From 0e428ed7ab730e3248f674114fad96470df69311 Mon Sep 17 00:00:00 2001
From: xiangpei <xiangpei@timesnew.cn>
Date: 星期三, 26 三月 2025 16:44:52 +0800
Subject: [PATCH] 完善页面
---
src/components/KnowledgeBase.vue | 132 ++++++++++++++++++++++++++++++--
src/views/Index.vue | 94 ++++++++++++++++++++++
2 files changed, 212 insertions(+), 14 deletions(-)
diff --git a/src/components/KnowledgeBase.vue b/src/components/KnowledgeBase.vue
index 531a9b0..f45eb66 100644
--- a/src/components/KnowledgeBase.vue
+++ b/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%;
}
diff --git a/src/views/Index.vue b/src/views/Index.vue
index 84ebc4a..60b1ea4 100644
--- a/src/views/Index.vue
+++ b/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>
--
Gitblit v1.8.0