|
| 1 | +<template> |
| 2 | + <div class="page-container"> |
| 3 | + <div class="page-header"> |
| 4 | + <div> |
| 5 | + <h2>📚 {{ kb?.kbName || '知识库' }}</h2> |
| 6 | + <div style="font-size:12px;color:#888;margin-top:4px">{{ kb?.description || '' }} · 片段 {{ kb?.chunkCount || 0 }} 个 · 检索方式 {{ kb?.retrieveType === 'vector' ? '向量' : '文本' }}</div> |
| 7 | + </div> |
| 8 | + <div style="display:flex;gap:8px"> |
| 9 | + <el-button size="small" @click="$router.push('/kb/list')">返回列表</el-button> |
| 10 | + <el-button size="small" type="warning" :loading="cleaning" @click="doClean">清洗</el-button> |
| 11 | + <el-button v-if="kb?.retrieveType === 'vector'" size="small" :loading="revectorizing" @click="doRevectorize">重新向量化</el-button> |
| 12 | + </div> |
| 13 | + </div> |
| 14 | + |
| 15 | + <el-card style="margin-bottom:12px" shadow="never"> |
| 16 | + <el-tabs v-model="tab"> |
| 17 | + <el-tab-pane label="文档与片段" name="docs"> |
| 18 | + <div style="display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;align-items:center"> |
| 19 | + <el-upload :show-file-list="false" :http-request="doUpload" |
| 20 | + accept=".txt,.md,.markdown,.docx,.xlsx,.pdf"> |
| 21 | + <el-button type="primary" size="small" icon="Upload" :loading="uploading">上传文档</el-button> |
| 22 | + </el-upload> |
| 23 | + <span style="font-size:12px;color:#909399">支持 word / excel / pdf / txt / markdown，自动解析并切片入库</span> |
| 24 | + </div> |
| 25 | + <div style="margin-bottom:12px"> |
| 26 | + <el-input v-model="manualChunk" type="textarea" :rows="3" placeholder="手动增加片段（如：售后服务政策：七天无理由退货…）" /> |
| 27 | + <el-button size="small" style="margin-top:6px" @click="doAddChunk">添加片段</el-button> |
| 28 | + </div> |
| 29 | + <el-table :data="documents" size="small" border> |
| 30 | + <el-table-column prop="docName" label="文档" min-width="200" show-overflow-tooltip /> |
| 31 | + <el-table-column prop="docType" label="类型" width="100" /> |
| 32 | + <el-table-column prop="createdAt" label="时间" width="160" show-overflow-tooltip /> |
| 33 | + </el-table> |
| 34 | + <div style="font-weight:600;margin:12px 0 6px;font-size:13px">片段列表</div> |
| 35 | + <el-table :data="chunks" size="small" border max-height="300"> |
| 36 | + <el-table-column prop="seqNo" label="#" width="50" /> |
| 37 | + <el-table-column prop="content" label="内容" min-width="300" show-overflow-tooltip /> |
| 38 | + </el-table> |
| 39 | + </el-tab-pane> |
| 40 | + <el-tab-pane label="检索测试" name="search"> |
| 41 | + <div style="display:flex;gap:8px;margin-bottom:12px"> |
| 42 | + <el-input v-model="searchQuery" size="small" style="flex:1" placeholder="输入查询内容测试检索效果" @keydown.enter="doSearch" /> |
| 43 | + <el-input-number v-model="searchTopK" size="small" :min="1" :max="20" style="width:100px" /> |
| 44 | + <el-button size="small" type="primary" :loading="searching" @click="doSearch">检索</el-button> |
| 45 | + </div> |
| 46 | + <el-card v-for="(r, i) in searchResults" :key="i" shadow="never" style="margin-bottom:8px"> |
| 47 | + <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px"> |
| 48 | + <span style="font-size:12px;color:#909399">#{{ i + 1 }}</span> |
| 49 | + <el-tag size="small" type="success">相似度 {{ r.score }}</el-tag> |
| 50 | + </div> |
| 51 | + <div style="font-size:13px;line-height:1.7">{{ r.content }}</div> |
| 52 | + </el-card> |
| 53 | + </el-tab-pane> |
| 54 | + <el-tab-pane label="匹配记录" name="logs"> |
| 55 | + <el-table :data="logs" size="small" border> |
| 56 | + <el-table-column prop="query" label="查询内容" min-width="200" show-overflow-tooltip /> |
| 57 | + <el-table-column prop="score" label="最高分" width="90" /> |
| 58 | + <el-table-column prop="createdAt" label="时间" width="170" show-overflow-tooltip /> |
| 59 | + </el-table> |
| 60 | + </el-tab-pane> |
| 61 | + </el-tabs> |
| 62 | + </el-card> |
| 63 | + </div> |
| 64 | +</template> |
| 65 | + |
| 66 | +<script setup lang="ts"> |
| 67 | +import { ref, onMounted } from 'vue' |
| 68 | +import { useRoute } from 'vue-router' |
| 69 | +import { ElMessage } from 'element-plus' |
| 70 | +import request from '../../utils/request' |
| 71 | +
|
| 72 | +const route = useRoute() |
| 73 | +const kbId = Number(route.params.id) || 0 |
| 74 | +const kb = ref<any>(null) |
| 75 | +const tab = ref('docs') |
| 76 | +const documents = ref<any[]>([]) |
| 77 | +const chunks = ref<any[]>([]) |
| 78 | +const manualChunk = ref('') |
| 79 | +const uploading = ref(false) |
| 80 | +const cleaning = ref(false) |
| 81 | +const revectorizing = ref(false) |
| 82 | +const searchQuery = ref('') |
| 83 | +const searchTopK = ref(5) |
| 84 | +const searching = ref(false) |
| 85 | +const searchResults = ref<any[]>([]) |
| 86 | +const logs = ref<any[]>([]) |
| 87 | +
|
| 88 | +onMounted(loadAll) |
| 89 | +
|
| 90 | +async function loadAll() { |
| 91 | + try { |
| 92 | + const res: any = await request.get('/kb/list') |
| 93 | + kb.value = (res.data || []).find((k: any) => k.id === kbId) || null |
| 94 | + } catch { /* 拦截器已提示 */ } |
| 95 | + await loadDocs() |
| 96 | + await loadLogs() |
| 97 | +} |
| 98 | +
|
| 99 | +async function loadDocs() { |
| 100 | + try { |
| 101 | + const [dRes, cRes]: any[] = await Promise.all([ |
| 102 | + request.get(`/kb/documents/${kbId}`), |
| 103 | + request.get(`/kb/chunks/${kbId}`) |
| 104 | + ]) |
| 105 | + documents.value = dRes.data || [] |
| 106 | + chunks.value = cRes.data || [] |
| 107 | + } catch { /* 忽略 */ } |
| 108 | +} |
| 109 | +
|
| 110 | +async function loadLogs() { |
| 111 | + try { |
| 112 | + const res: any = await request.get(`/kb/match-logs/${kbId}`) |
| 113 | + logs.value = res.data || [] |
| 114 | + } catch { logs.value = [] } |
| 115 | +} |
| 116 | +
|
| 117 | +async function doUpload(opt: any) { |
| 118 | + uploading.value = true |
| 119 | + try { |
| 120 | + const fd = new FormData() |
| 121 | + fd.append('file', opt.file) |
| 122 | + const res: any = await request.post(`/kb/upload/${kbId}`, fd, { headers: { 'Content-Type': 'multipart/form-data' } }) |
| 123 | + ElMessage.success(`已解析并切片 ${res.data?.chunkCount || 0} 个片段`) |
| 124 | + await loadAll() |
| 125 | + } catch (e: any) { |
| 126 | + ElMessage.error(e?.message || '上传失败') |
| 127 | + } finally { uploading.value = false } |
| 128 | +} |
| 129 | +
|
| 130 | +async function doAddChunk() { |
| 131 | + if (!manualChunk.value.trim()) { ElMessage.warning('请输入片段内容'); return } |
| 132 | + await request.post(`/kb/chunk/${kbId}`, { content: manualChunk.value }) |
| 133 | + ElMessage.success('片段已添加') |
| 134 | + manualChunk.value = '' |
| 135 | + await loadAll() |
| 136 | +} |
| 137 | +
|
| 138 | +async function doClean() { |
| 139 | + cleaning.value = true |
| 140 | + try { |
| 141 | + const res: any = await request.post(`/kb/clean/${kbId}`) |
| 142 | + ElMessage.success(`清洗完成：移除 ${res.data?.removed || 0} 个片段`) |
| 143 | + await loadAll() |
| 144 | + } finally { cleaning.value = false } |
| 145 | +} |
| 146 | +
|
| 147 | +async function doRevectorize() { |
| 148 | + revectorizing.value = true |
| 149 | + try { |
| 150 | + const res: any = await request.post(`/kb/revectorize/${kbId}`) |
| 151 | + ElMessage.success(`重新向量化完成：${res.data?.done || 0}/${res.data?.total || 0}`) |
| 152 | + } catch (e: any) { |
| 153 | + ElMessage.error(e?.message || '向量化失败，请确认已启用大模型供应商') |
| 154 | + } finally { revectorizing.value = false } |
| 155 | +} |
| 156 | +
|
| 157 | +async function doSearch() { |
| 158 | + if (!searchQuery.value.trim()) { ElMessage.warning('请输入查询内容'); return } |
| 159 | + searching.value = true |
| 160 | + try { |
| 161 | + const res: any = await request.post(`/kb/search/${kbId}`, { query: searchQuery.value, topK: searchTopK.value }) |
| 162 | + searchResults.value = res.data || [] |
| 163 | + } catch (e: any) { |
| 164 | + ElMessage.error(e?.message || '检索失败') |
| 165 | + } finally { searching.value = false } |
| 166 | +} |
| 167 | +</script> |
| 168 | + |
| 169 | +<style scoped> |
| 170 | +.page-container { padding:16px;height:100%;display:flex;flex-direction:column;box-sizing:border-box;overflow:auto } |
| 171 | +.page-header { display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;flex-shrink:0 } |
| 172 | +.page-header h2 { margin:0 } |
| 173 | +</style> |
0 commit comments