<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;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
|
: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; 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="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>
|
</template>
|
|
<script>
|
export default {
|
name: "KnowledgeBase",
|
data() {
|
return {
|
fileList: [],
|
form: {
|
user: 255
|
},
|
options: [{
|
value: '选项1',
|
label: '黄金糕'
|
}, {
|
value: '选项2',
|
label: '双皮奶'
|
}, {
|
value: '选项3',
|
label: '蚵仔煎'
|
}, {
|
value: '选项4',
|
label: '龙须面'
|
}, {
|
value: '选项5',
|
label: '北京烤鸭'
|
}],
|
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)
|
}
|
return false
|
},
|
handleChange(file, fileList) {
|
this.fileList = fileList;
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.knowledge-body {
|
width: 650px;
|
margin-top: 30px;
|
}
|
.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;
|
}
|
|
.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%;
|
}
|
.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>
|
