完善页面

xiangpei

2025-03-26 0e428ed7ab730e3248f674114fad96470df69311

完善页面

 src/components/KnowledgeBase.vue

@@ -9,13 +9,11 @@
            :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>
      <div class="normal-text" style="margin-top: 15px;margin-bottom: 5px;display: flex;align-items: center">选择知识文件
        <el-tooltip style="margin-left: 10px" content="单个文件不超过200M，支持以下文件格式" placement="right" effect="light">
        <svg t="1742971974478" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2969" width="16" height="16"><path d="M464 784.352c0 26.51 21.49 48 48 48s48-21.49 48-48-21.49-48-48-48-48 21.49-48 48z" p-id="2970" fill="#515151"></path><path d="M512 960C264.96 960 64 759.04 64 512S264.96 64 512 64s448 200.96 448 448-200.96 448-448 448z m0-831.713c-211.584 0-383.713 172.129-383.713 383.713 0 211.552 172.129 383.713 383.713 383.713 211.552 0 383.713-172.16 383.713-383.713 0-211.584-172.161-383.713-383.713-383.713z" p-id="2971" fill="#515151"></path><path d="M512 673.695c-17.665 0-32-14.336-32-31.999v-54.112c0-52.353 39.999-92.352 75.327-127.648 25.887-25.92 52.672-52.672 52.672-74.016 0-53.344-43.072-96.736-95.999-96.736-53.823 0-96 41.536-96 94.56 0 17.664-14.335 31.999-32 31.999s-32-14.336-32-32c0-87.423 71.774-158.559 160-158.559S672 297.28 672 385.92c0 47.904-36.32 84.191-71.424 119.296-27.84 27.776-56.575 56.512-56.575 82.335v54.112c0 17.665-14.336 32.032-32.001 32.032z" p-id="2972" fill="#515151"></path></svg>
      </el-tooltip></div>
      <div class="file-manage-tip">HTML,MD,JSON,CSV,PDF,PNG,JPG,JPEG,BMP,EML,MSG,RST,RIF,TXT,XML,DOCX,EPUB,ODT,PPT,PPTX,TSV,HTM</div>
      <el-upload
          class="upload"
          drag
@@ -44,8 +42,64 @@
          </el-form>
        </div>
      </div>
      <div style="margin-top: 15px">
        <el-button type="primary" size="small">添加文件到知识库</el-button>
      <div style="margin-top: 15px; margin-bottom: 25px">
        <el-button type="primary" :disabled="!fileList || fileList.length < 1" size="mini">添加文件到知识库</el-button>
      </div>

      <div class="file-manage">
        <div class="normal-text">
          <span>知识库</span>
          <span class="highlight">{{kbBaseName}}</span>
          <span>中已有文件：</span>
        </div>
        <div class="file-manage-tip">知识库中包含源文件与向量库，请从下表中选择文件后操作</div>
        <div>
          <el-table
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange">
            <el-table-column
                type="selection"
                width="55">
            </el-table-column>
            <el-table-column
                prop="loader"
                label="加载器"
                width="120">
            </el-table-column>
            <el-table-column
                prop="tokenizer"
                label="分词器"
                width="120">
            </el-table-column>
            <el-table-column
                prop="docNum"
                label="文档数量">
            </el-table-column>
            <el-table-column
                prop="source"
                label="源文件">
              <template><i class="el-icon-check"/></template>
            </el-table-column>
            <el-table-column
                prop="vectorLibrary"
                label="向量库">
              <template><i class="el-icon-check"/></template>
            </el-table-column>
          </el-table>
        </div>
        <div class="table-op-list">
          <el-button size="mini" :type="buttonUseful" :disabled="buttonDisable">下载选中文档</el-button>
          <el-button size="mini" :type="buttonUseful" :disabled="buttonDisable">添加至向量库</el-button>
          <el-button size="mini" :type="buttonUseful" :disabled="buttonDisable">从向量库删除</el-button>
          <el-button size="mini" :type="buttonUseful" :disabled="buttonDisable">从知识库删除</el-button>
        </div>
      </div>
      <div class="kb-manage">
        <el-button size="mini" type="primary" style="position: absolute;left: 0">依据源文件重建向量库</el-button>
        <el-button size="mini" type="danger" style="position: absolute;right: 0">删除知识库</el-button>
      </div>
    </div>
  </div>
@@ -58,7 +112,7 @@
    return {
      fileList: [],
      form: {

        user: 255
      },
      options: [{
        value: '选项1',
@@ -76,10 +130,31 @@
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: ''
      value: '',
      kbBaseName: 'test',  // 知识库名称
      tableData: [{
        loader: 'xxx',
        tokenizer: 'xxx',
        docNum: 299,
        source: true,
        vectorLibrary: true
      }],
      multipleSelection: []
    }
  },
  computed: {
    buttonUseful() {
      return this.multipleSelection.length > 0 ? "primary" : null;
    },
    buttonDisable() {
      return this.multipleSelection.length === 0;
    },
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection)
    },
    handleUpload(file) {
      if (this.fileList.indexOf(file) === -1) {
        this.fileList.push(file)
@@ -123,6 +198,41 @@
.form-inline {
  padding-left: 10px;
}

.file-manage {
  padding-top: 15px;
  margin-bottom: 20px;
  border-top: 1px solid lightgray;
}
.highlight {
  margin: 0px 4px;
  background-color: #eeeeee;
  color: green;
}
.file-manage-tip {
  margin-top: 10px;
  width: 100%;
  padding: 10px;
  background-color: #E8F2FC;
  color: #4097ea;
  font-size: small;
  border-radius: 2px;
  box-sizing: border-box;
  word-wrap: break-word;  /* 允许长单词或URL换行 */
  overflow-wrap: break-word; /* 更现代的属性，效果类似 */
  white-space: normal; /* 默认值，允许换行 */
}
.table-op-list {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
.kb-manage {
  width: 100%;
  border-top: 1px solid lightgray;
  padding-top: 10px;
  position: relative;
}
.el-select {
  width: 100%;
}

 src/views/Index.vue

@@ -16,7 +16,52 @@
        </div>
      </div>
      <div class="setting">
        这是配置板块
        <el-tabs v-model="activeSetting" @tab-click="tabSelect">
          <el-tab-pane label="工具设置" name="util">
            <div style="display: flex; align-items: center">
              <el-checkbox v-model="enableAgent">启用Agent</el-checkbox>
              <el-tooltip style="margin-left: 10px" content="Top center" placement="right" effect="light">
                <svg t="1742971974478" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2969" width="16" height="16"><path d="M464 784.352c0 26.51 21.49 48 48 48s48-21.49 48-48-21.49-48-48-48-48 21.49-48 48z" p-id="2970" fill="#515151"></path><path d="M512 960C264.96 960 64 759.04 64 512S264.96 64 512 64s448 200.96 448 448-200.96 448-448 448z m0-831.713c-211.584 0-383.713 172.129-383.713 383.713 0 211.552 172.129 383.713 383.713 383.713 211.552 0 383.713-172.16 383.713-383.713 0-211.584-172.161-383.713-383.713-383.713z" p-id="2971" fill="#515151"></path><path d="M512 673.695c-17.665 0-32-14.336-32-31.999v-54.112c0-52.353 39.999-92.352 75.327-127.648 25.887-25.92 52.672-52.672 52.672-74.016 0-53.344-43.072-96.736-95.999-96.736-53.823 0-96 41.536-96 94.56 0 17.664-14.335 31.999-32 31.999s-32-14.336-32-32c0-87.423 71.774-158.559 160-158.559S672 297.28 672 385.92c0 47.904-36.32 84.191-71.424 119.296-27.84 27.776-56.575 56.512-56.575 82.335v54.112c0 17.665-14.336 32.032-32.001 32.032z" p-id="2972" fill="#515151"></path></svg>
              </el-tooltip>
            </div>
            <div style="margin-top: 15px">
              <div class="normal-text">选择工具</div>
              <div style="margin-top: 5px">
                <el-select v-model="selectUtil" size="mini" placeholder="未选择" style="width: 100%">
                  <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </div>
            <div style="margin-top: 15px">
              <div class="normal-text" style="display: flex;align-items: center">
                <div>上传附件</div>
                <el-tooltip style="margin-left: 10px" content="单个文件不超过200M" placement="right" effect="light">
                  <svg t="1742971974478" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2969" width="16" height="16"><path d="M464 784.352c0 26.51 21.49 48 48 48s48-21.49 48-48-21.49-48-48-48-48 21.49-48 48z" p-id="2970" fill="#515151"></path><path d="M512 960C264.96 960 64 759.04 64 512S264.96 64 512 64s448 200.96 448 448-200.96 448-448 448z m0-831.713c-211.584 0-383.713 172.129-383.713 383.713 0 211.552 172.129 383.713 383.713 383.713 211.552 0 383.713-172.16 383.713-383.713 0-211.584-172.161-383.713-383.713-383.713z" p-id="2971" fill="#515151"></path><path d="M512 673.695c-17.665 0-32-14.336-32-31.999v-54.112c0-52.353 39.999-92.352 75.327-127.648 25.887-25.92 52.672-52.672 52.672-74.016 0-53.344-43.072-96.736-95.999-96.736-53.823 0-96 41.536-96 94.56 0 17.664-14.335 31.999-32 31.999s-32-14.336-32-32c0-87.423 71.774-158.559 160-158.559S672 297.28 672 385.92c0 47.904-36.32 84.191-71.424 119.296-27.84 27.776-56.575 56.512-56.575 82.335v54.112c0 17.665-14.336 32.032-32.001 32.032z" p-id="2972" fill="#515151"></path></svg>
                </el-tooltip>
              </div>
              <div style="margin-top: 5px">
                <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>
            </div>
          </el-tab-pane>
          <el-tab-pane label="会话设置" name="session"></el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="right">
@@ -30,13 +75,45 @@
  name: "IndexView",
  data() {
    return {
      activeTab: 0
      fileList: [],
      activeTab: 0,
      activeSetting: 'util',
      enableAgent: false,
      selectUtil: null,
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
    }
  },
  mounted() {
    this.changeRoute(this.activeTab)
  },
  methods: {
    handleUpload(file) {
      if (this.fileList.indexOf(file) === -1) {
        this.fileList.push(file)
      }
      return false
    },
    handleChange(file, fileList) {
      this.fileList = fileList;
    },
    tabSelect(tab, event) {
      console.log(tab, event)
    },
    changeTab(index) {
      if (index !== this.activeTab) {
        this.activeTab = index
@@ -62,6 +139,7 @@
.left {
  width: 250px;
  height: calc(100vh - 20px);
  min-height: 600px;
  background-color: #f3f3f3;
  padding: 0px 40px;
}
@@ -82,6 +160,7 @@
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid lightgray;
}
.tab {
  width: 100%;
@@ -101,5 +180,14 @@
  background-color: #bed7f5;
  color: blue;
}

.setting {
  margin-top: 20px;
}
.normal-text {
  color: #606266;
  font-size: 12px;
}
::v-deep(.el-upload-dragger) {
  width: 250px !important;
}
</style>