对话、知识库页面，首页

xiangpei

2025-03-25 7692e06e56a2d56bb57733ba303b2a23b36975a2

对话、知识库页面，首页

 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;
}


 src/assets/img/logo.png

 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 {

 src/components/KnowledgeBase.vue

New file
@@ -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>

 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({

 src/views/Index.vue

New file
@@ -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>