From 7692e06e56a2d56bb57733ba303b2a23b36975a2 Mon Sep 17 00:00:00 2001
From: xiangpei <xiangpei@timesnew.cn>
Date: 星期二, 25 三月 2025 18:06:14 +0800
Subject: [PATCH] 对话、知识库页面，首页
---
src/assets/img/logo.png | 0
src/App.vue | 1
src/router/index.js | 26 +++--
src/components/KnowledgeBase.vue | 149 +++++++++++++++++++++++++++++
src/views/Index.vue | 105 +++++++++++++++++++++
src/components/AiChat.vue | 6
6 files changed, 273 insertions(+), 14 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index aada410..c102b28 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,7 +9,6 @@
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
- text-align: center;
color: #2c3e50;
}
diff --git a/src/assets/img/logo.png b/src/assets/img/logo.png
new file mode 100644
index 0000000..5de8ee8
--- /dev/null
+++ b/src/assets/img/logo.png
Binary files differ
diff --git a/src/components/AiChat.vue b/src/components/AiChat.vue
index 2e01898..41a0fd7 100644
--- a/src/components/AiChat.vue
+++ b/src/components/AiChat.vue
@@ -1,5 +1,5 @@
<template>
- <div>
+ <div style="position: relative;height: 800px;width: 100%;display: flex;justify-content: center">
<!-- 鑱婂ぉ娑堟伅鍒楄〃 -->
<div class="chat-messages">
<div
@@ -139,9 +139,11 @@
}
.chat-messages {
- flex: 1;
padding: 16px;
+ margin-top: 54px;
overflow-y: auto;
+ width: 800px;
+ height: 680px;
}
.message {
diff --git a/src/components/KnowledgeBase.vue b/src/components/KnowledgeBase.vue
new file mode 100644
index 0000000..531a9b0
--- /dev/null
+++ b/src/components/KnowledgeBase.vue
@@ -0,0 +1,149 @@
+<template>
+ <div style="display: flex;justify-content: center">
+ <div class="knowledge-body">
+ <el-select v-model="value" size="medium" placeholder="璇烽�夋嫨鐭ヨ瘑搴�">
+ <el-option
+ v-for="item in options"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value">
+ </el-option>
+ </el-select>
+ <div class="normal-text" style="margin-top: 15px;margin-bottom: 5px">閫夋嫨鐭ヨ瘑鏂囦欢(鍗曚釜鏂囦欢涓嶈秴杩�200M)</div>
+ <el-alert
+ description="HTML,MD,JSON,CSV,PDF,PNG,JPG,JPEG,BMP,EML,MSG,RST,RIF,TXT,XML,DOCX,EPUB,ODT,PPT,PPTX,TSV,HTM"
+ type="info"
+ :closable="false"
+ show-icon>
+ </el-alert>
+ <el-upload
+ class="upload"
+ drag
+ :on-change="handleChange"
+ :before-upload="handleUpload"
+ :file-list="fileList"
+ multiple>
+ <i class="el-icon-upload"></i>
+ <div class="el-upload__text">
+ <div>灏嗘枃浠舵嫋鍒版澶勶紝鎴�<em>鐐瑰嚮涓婁紶</em></div>
+ </div>
+ </el-upload>
+ <div class="file-setting">
+ <div class="file-setting-content">
+ <div class="normal-text file-setting-title">鏂囦欢澶勭悊閰嶇疆</div>
+ <el-form :inline="true" :model="form" size="mini" label-position="top" class="form-inline">
+ <el-form-item label="鍗曟鏂囨湰鏈�澶ч暱搴︼細">
+ <el-input v-model="form.user" type="number"></el-input>
+ </el-form-item>
+ <el-form-item label="鐩搁偦鏂囨湰閲嶅悎闀垮害锛�">
+ <el-input v-model="form.user" type="number"></el-input>
+ </el-form-item>
+ <el-form-item label="鍏跺畠锛�">
+ <el-checkbox v-model="form.checked">寮�鍚腑鏂囨爣棰樺姞寮�</el-checkbox>
+ </el-form-item>
+ </el-form>
+ </div>
+ </div>
+ <div style="margin-top: 15px">
+ <el-button type="primary" size="small">娣诲姞鏂囦欢鍒扮煡璇嗗簱</el-button>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "KnowledgeBase",
+ data() {
+ return {
+ fileList: [],
+ form: {
+
+ },
+ options: [{
+ value: '閫夐」1',
+ label: '榛勯噾绯�'
+ }, {
+ value: '閫夐」2',
+ label: '鍙岀毊濂�'
+ }, {
+ value: '閫夐」3',
+ label: '铓典粩鐓�'
+ }, {
+ value: '閫夐」4',
+ label: '榫欓』闈�'
+ }, {
+ value: '閫夐」5',
+ label: '鍖椾含鐑ら腑'
+ }],
+ value: ''
+ }
+ },
+ methods: {
+ handleUpload(file) {
+ if (this.fileList.indexOf(file) === -1) {
+ this.fileList.push(file)
+ }
+ return false
+ },
+ handleChange(file, fileList) {
+ this.fileList = fileList;
+ }
+ }
+}
+</script>
+
+<style scoped>
+.knowledge-body {
+ width: 650px;
+ margin-top: 70px;
+}
+.upload {
+ margin-top: 5px;
+}
+.normal-text {
+ color: #606266;
+ font-size: 14px;
+}
+.file-setting {
+ width: 100%;
+ height: 100px;
+ border: 1px solid lightgray;
+ border-radius: 6px;
+ position: relative;
+}
+.file-setting-title {
+ margin-bottom: 10px;
+}
+.file-setting-content {
+ width: 100%;
+ height: 100%;
+ padding: 8px;
+}
+.form-inline {
+ padding-left: 10px;
+}
+.el-select {
+ width: 100%;
+}
+.el-upload__tip {
+ word-wrap: break-word; /* 闀垮崟璇嶆垨URL鎹㈣ */
+ overflow-wrap: break-word; /* 鏇寸幇浠ｇ殑灞炴�э紝鏁堟灉绫讳技 */
+ white-space: normal; /* 榛樿鍊硷紝鍏佽鎹㈣ */
+}
+::v-deep .el-upload-dragger {
+ width: 650px !important;
+}
+
+::v-deep .el-upload-list {
+ max-height: 100px;
+ overflow-y: scroll;
+}
+::v-deep .el-form-item__label {
+ padding-bottom: 0px;
+}
+
+::v-deep .el-form-item {
+ margin-right: 20px;
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index 13499be..d8b25ab 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,23 +1,27 @@
import Vue from 'vue'
import VueRouter from 'vue-router'
-import HomeView from '../views/HomeView.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
- name: 'home',
- component: HomeView
+ name: 'index',
+ component: () => import(/* webpackChunkName: "about" */ '../views/Index.vue'),
+ children: [
+ {
+ path: '/chat',
+ name: 'chat',
+ component: () => import(/* webpackChunkName: "about" */ '../components/AiChat.vue')
+ },
+ {
+ path: '/knowledge',
+ name: 'knowledge',
+ component: () => import(/* webpackChunkName: "about" */ '../components/KnowledgeBase.vue')
+ },
+ ]
},
- // {
- // path: '/about',
- // name: 'about',
- // // route level code-splitting
- // // this generates a separate chunk (about.[hash].js) for this route
- // // which is lazy-loaded when the route is visited.
- // component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
- // }
+
]
const router = new VueRouter({
diff --git a/src/views/Index.vue b/src/views/Index.vue
new file mode 100644
index 0000000..84ebc4a
--- /dev/null
+++ b/src/views/Index.vue
@@ -0,0 +1,105 @@
+<template>
+ <div class="index">
+ <div class="left">
+ <div class="logo">
+ <img style="width: 60px;height: 60px" src="@/assets/img/logo.png"/>
+ </div>
+ <div class="menu">
+ <div :class="{tab: true, activeTab: activeTab === 0}" @click="changeTab(0)">
+ <svg t="1742895429099" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1205" width="18" height="18">
+ <path d="M174.72 855.68l130.048-43.392 23.424 11.392C382.4 849.984 444.352 864 512 864c223.744 0 384-159.872 384-352 0-192.832-159.104-352-384-352S128 319.168 128 512a341.12 341.12 0 0 0 69.248 204.288l21.632 28.8-44.16 110.528z m-45.248 82.56A32 32 0 0 1 89.6 896l56.512-141.248A405.12 405.12 0 0 1 64 512C64 299.904 235.648 96 512 96s448 203.904 448 416-173.44 416-448 416c-79.68 0-150.848-17.152-211.712-46.72l-170.88 56.96z" p-id="1206" :fill="activeTab === 0 ? 'blue' : 'grey'">
+ </path></svg>
+ <span style="margin-left: 10px">瀵硅瘽</span></div>
+ <div :class="{tab: true, activeTab: activeTab === 1}" style="margin-top: 2px" @click="changeTab(1)">
+ <svg style="margin-left: -1px" t="1742895849411" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1227" width="20" height="20"><path d="M921.6 366.592L512 102.4 102.4 366.592l409.6 264.192z m-409.6-153.6L759.296 358.4 512 503.296 264.704 358.4z m0 621.568l-361.472-224.256-48.128 47.104L512 921.6l409.6-264.192-48.64-48.128z m0-145.408L150.528 464.896 102.4 512l409.6 264.192L921.6 512l-48.64-48.128z" p-id="1228" :fill="activeTab === 1 ? 'blue' : 'grey'"></path></svg>
+ <span style="margin-left: 8px">鐭ヨ瘑搴撶鐞�</span>
+ </div>
+ </div>
+ <div class="setting">
+ 杩欐槸閰嶇疆鏉垮潡
+ </div>
+ </div>
+ <div class="right">
+ <router-view></router-view>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "IndexView",
+ data() {
+ return {
+ activeTab: 0
+ }
+ },
+ mounted() {
+ this.changeRoute(this.activeTab)
+ },
+ methods: {
+ changeTab(index) {
+ if (index !== this.activeTab) {
+ this.activeTab = index
+ this.changeRoute(index)
+ }
+ },
+ changeRoute(index) {
+ console.log(this.$router.currentRoute.path, "璺敱")
+ if (index === 0 && this.$router.currentRoute.path !== "/chat") {
+ this.$router.push("/chat")
+ } else if (index === 1 && this.$router.currentRoute.path !== "/knowledge") {
+ this.$router.push("/knowledge")
+ }
+ }
+ }
+}
+</script>
+
+<style scoped>
+.index {
+ display: flex;
+}
+.left {
+ width: 250px;
+ height: calc(100vh - 20px);
+ background-color: #f3f3f3;
+ padding: 0px 40px;
+}
+.right {
+ width: 1600px;
+}
+.logo {
+ width: 100%;
+ height: 80px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+.menu {
+ height: 150px;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+.tab {
+ width: 100%;
+ line-height: 30px;
+ padding-left: 16px;
+ display: flex;
+ justify-content: flex-start;
+ border-radius: 8px;
+ align-items: center;
+}
+.activeTab {
+ background-color: #bed7f5;
+ color: blue;
+}
+.tab:hover {
+ cursor: pointer;
+ background-color: #bed7f5;
+ color: blue;
+}
+
+</style>
--
Gitblit v1.8.0