feat: 知识库文档详情页内展示，概览检索框居中放大并参数持久化
- 知识库点击文档改为页面内展示详情，移除文档详情抽屉 - 概览检索框居中放大，检索参数（top_k/AI总结）改由 Modal 设置并持久化到 localStorage - 概览统计使用 Statistic 样式展示在检索框上方
This commit is contained in:
@@ -156,21 +156,21 @@ onMounted(() => {
|
||||
loadAll()
|
||||
})
|
||||
|
||||
/* ---------- 文档详情 ---------- */
|
||||
const docDetailVisible = ref(false)
|
||||
/* ---------- 文档详情（页面内展示） ---------- */
|
||||
const selectedDoc = ref(null)
|
||||
const docDetailData = ref(null)
|
||||
const isLoadingDetail = ref(false)
|
||||
const isDeleting = ref(false)
|
||||
const isReingesting = ref(false)
|
||||
|
||||
function openDocDetail(doc) {
|
||||
docDetailVisible.value = true
|
||||
selectedDoc.value = doc
|
||||
docDetailData.value = null
|
||||
loadDocDetail(doc.doc_id)
|
||||
}
|
||||
|
||||
function closeDocDetail() {
|
||||
docDetailVisible.value = false
|
||||
selectedDoc.value = null
|
||||
docDetailData.value = null
|
||||
}
|
||||
|
||||
@@ -432,75 +432,73 @@ const failedColumns = [
|
||||
<div class="text-muted">{{ categoryDesc || '（无描述）' }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 文档详情（页面内展示） -->
|
||||
<div v-else-if="selectedDoc" class="library__panel library__doc-detail">
|
||||
<div class="library__doc-head">
|
||||
<h3 class="library__panel-title library__doc-title">
|
||||
<FileTextOutlined /> {{ selectedDoc.title || '（无标题）' }}
|
||||
</h3>
|
||||
<div class="library__detail-actions">
|
||||
<a-button size="small" :loading="isReingesting" @click="handleReingest(selectedDoc)">
|
||||
重新摘要
|
||||
</a-button>
|
||||
<a-button size="small" danger :loading="isDeleting" @click="handleDelete(selectedDoc)">
|
||||
删除
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a-spin :spinning="isLoadingDetail">
|
||||
<div v-if="docDetailData">
|
||||
<a-descriptions :column="1" size="small" bordered>
|
||||
<a-descriptions-item label="doc_id">{{ docDetailData.l1?.doc_id || '-' }}</a-descriptions-item>
|
||||
<a-descriptions-item label="标题">{{ docDetailData.l1?.title || '-' }}</a-descriptions-item>
|
||||
<a-descriptions-item label="类目">{{ docDetailData.l1?.category || '-' }}</a-descriptions-item>
|
||||
<a-descriptions-item label="标签">
|
||||
<template v-if="docDetailData.l1?.tags && docDetailData.l1.tags.length">
|
||||
<a-tag v-for="tag in docDetailData.l1.tags" :key="tag">{{ tag }}</a-tag>
|
||||
</template>
|
||||
<span v-else class="text-muted">-</span>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="chunks_count">{{ docDetailData.chunks_count ?? 0 }}</a-descriptions-item>
|
||||
<a-descriptions-item v-if="docDetailData.file" label="原文文件">
|
||||
<a :href="docDetailData.file.url" target="_blank" rel="noopener">
|
||||
{{ docDetailData.file.filename }}
|
||||
<span v-if="docDetailData.file.size_bytes" class="text-muted">
|
||||
（{{ formatSize(docDetailData.file.size_bytes) }}）
|
||||
</span>
|
||||
</a>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
|
||||
<h3 class="library__section-title">L1 全文</h3>
|
||||
<pre class="library__pre">{{ docDetailData.l1?.text || '' }}</pre>
|
||||
|
||||
<h3 class="library__section-title">L2 节点（{{ (docDetailData.l2_nodes || []).length }}）</h3>
|
||||
<div v-if="(docDetailData.l2_nodes || []).length === 0" class="text-muted">无</div>
|
||||
<div v-for="(node, idx) in docDetailData.l2_nodes || []" :key="`l2-${idx}`" class="library__node">
|
||||
<div class="library__node-path">{{ node.section_path || '' }}</div>
|
||||
<div class="text-break">{{ node.text || '' }}</div>
|
||||
</div>
|
||||
|
||||
<h3 class="library__section-title">L3 节点（{{ (docDetailData.l3_nodes || []).length }}）</h3>
|
||||
<div v-if="(docDetailData.l3_nodes || []).length === 0" class="text-muted">无</div>
|
||||
<div v-for="(node, idx) in docDetailData.l3_nodes || []" :key="`l3-${idx}`" class="library__node">
|
||||
<div class="library__node-path">{{ node.section_path || '' }}</div>
|
||||
<div class="text-break">{{ node.text || '' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="!isLoadingDetail" class="text-muted">暂无数据</div>
|
||||
</a-spin>
|
||||
</div>
|
||||
|
||||
<!-- 未选中提示 -->
|
||||
<div v-else-if="!docDetailVisible" class="library__placeholder text-muted">
|
||||
<div v-else class="library__placeholder text-muted">
|
||||
从左侧选择类目或文档查看详情
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 文档详情抽屉 -->
|
||||
<a-drawer
|
||||
:open="docDetailVisible"
|
||||
title="文档详情"
|
||||
placement="right"
|
||||
width="620"
|
||||
:destroy-on-close="true"
|
||||
@close="closeDocDetail"
|
||||
>
|
||||
<a-spin :spinning="isLoadingDetail">
|
||||
<div v-if="docDetailData">
|
||||
<a-descriptions :column="1" size="small" bordered>
|
||||
<a-descriptions-item label="doc_id">{{ docDetailData.l1?.doc_id || '-' }}</a-descriptions-item>
|
||||
<a-descriptions-item label="标题">{{ docDetailData.l1?.title || '-' }}</a-descriptions-item>
|
||||
<a-descriptions-item label="类目">{{ docDetailData.l1?.category || '-' }}</a-descriptions-item>
|
||||
<a-descriptions-item label="标签">
|
||||
<template v-if="docDetailData.l1?.tags && docDetailData.l1.tags.length">
|
||||
<a-tag v-for="tag in docDetailData.l1.tags" :key="tag">{{ tag }}</a-tag>
|
||||
</template>
|
||||
<span v-else class="text-muted">-</span>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="chunks_count">{{ docDetailData.chunks_count ?? 0 }}</a-descriptions-item>
|
||||
<a-descriptions-item v-if="docDetailData.file" label="原文文件">
|
||||
<a :href="docDetailData.file.url" target="_blank" rel="noopener">
|
||||
{{ docDetailData.file.filename }}
|
||||
<span v-if="docDetailData.file.size_bytes" class="text-muted">
|
||||
（{{ formatSize(docDetailData.file.size_bytes) }}）
|
||||
</span>
|
||||
</a>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
|
||||
<div class="library__detail-actions">
|
||||
<a-button size="small" :loading="isReingesting" @click="handleReingest(docDetailData.l1)">
|
||||
重新摘要
|
||||
</a-button>
|
||||
<a-button size="small" danger :loading="isDeleting" @click="handleDelete(docDetailData.l1)">
|
||||
删除
|
||||
</a-button>
|
||||
</div>
|
||||
|
||||
<h3 class="library__section-title">L1 全文</h3>
|
||||
<pre class="library__pre">{{ docDetailData.l1?.text || '' }}</pre>
|
||||
|
||||
<h3 class="library__section-title">L2 节点（{{ (docDetailData.l2_nodes || []).length }}）</h3>
|
||||
<div v-if="(docDetailData.l2_nodes || []).length === 0" class="text-muted">无</div>
|
||||
<div v-for="(node, idx) in docDetailData.l2_nodes || []" :key="`l2-${idx}`" class="library__node">
|
||||
<div class="library__node-path">{{ node.section_path || '' }}</div>
|
||||
<div class="text-break">{{ node.text || '' }}</div>
|
||||
</div>
|
||||
|
||||
<h3 class="library__section-title">L3 节点（{{ (docDetailData.l3_nodes || []).length }}）</h3>
|
||||
<div v-if="(docDetailData.l3_nodes || []).length === 0" class="text-muted">无</div>
|
||||
<div v-for="(node, idx) in docDetailData.l3_nodes || []" :key="`l3-${idx}`" class="library__node">
|
||||
<div class="library__node-path">{{ node.section_path || '' }}</div>
|
||||
<div class="text-break">{{ node.text || '' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="!isLoadingDetail" class="text-muted">暂无数据</div>
|
||||
</a-spin>
|
||||
</a-drawer>
|
||||
|
||||
<!-- 入库抽屉 -->
|
||||
<a-drawer
|
||||
:open="ingestVisible"
|
||||
@@ -735,7 +733,27 @@ const failedColumns = [
|
||||
.library__detail-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.library__doc-detail {
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.library__doc-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.library__doc-title {
|
||||
margin: 0;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.library__section-title {
|
||||
|
||||
+276
-200
@@ -10,23 +10,54 @@ import {
|
||||
QuestionCircleOutlined,
|
||||
ReloadOutlined,
|
||||
AppstoreOutlined,
|
||||
SearchOutlined
|
||||
SearchOutlined,
|
||||
SettingOutlined
|
||||
} from '@ant-design/icons-vue'
|
||||
import { stats as fetchStats } from '@/api/knowledge'
|
||||
import { search as searchApi } from '@/api/search'
|
||||
|
||||
/* ---------- 检索 ---------- */
|
||||
const isSearching = ref(false)
|
||||
const resultData = ref(null)
|
||||
const searchFormRef = ref(null)
|
||||
/* ---------- 检索参数（localStorage 持久化） ---------- */
|
||||
const STORAGE_KEY = 'qdsearch:searchParams'
|
||||
|
||||
const searchForm = reactive({
|
||||
query: '',
|
||||
top_k: 5,
|
||||
summarize: false
|
||||
})
|
||||
|
||||
function loadParams() {
|
||||
try {
|
||||
const raw = localStorage.getItem(STORAGE_KEY)
|
||||
if (!raw) return
|
||||
const p = JSON.parse(raw)
|
||||
if (typeof p.top_k === 'number' && p.top_k >= 1 && p.top_k <= 50) {
|
||||
searchForm.top_k = p.top_k
|
||||
}
|
||||
if (typeof p.summarize === 'boolean') {
|
||||
searchForm.summarize = p.summarize
|
||||
}
|
||||
} catch {
|
||||
/* 忽略损坏的本地缓存 */
|
||||
}
|
||||
}
|
||||
|
||||
function persistParams() {
|
||||
try {
|
||||
localStorage.setItem(
|
||||
STORAGE_KEY,
|
||||
JSON.stringify({ top_k: searchForm.top_k, summarize: searchForm.summarize })
|
||||
)
|
||||
} catch {
|
||||
/* localStorage 不可用时忽略 */
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- 检索 ---------- */
|
||||
const isSearching = ref(false)
|
||||
const resultData = ref(null)
|
||||
const searchFormRef = ref(null)
|
||||
const searchRules = {
|
||||
query: [{ required: true, message: '请输入查询语句', trigger: 'blur' }],
|
||||
top_k: [{ type: 'number', min: 1, max: 50, message: 'top_k 范围 1~50', trigger: 'change' }]
|
||||
query: [{ required: true, message: '请输入查询语句', trigger: 'blur' }]
|
||||
}
|
||||
|
||||
const routedCategoriesText = (cats) => {
|
||||
@@ -65,17 +96,44 @@ async function handleSearch() {
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- 检索参数设置弹窗 ---------- */
|
||||
const paramsVisible = ref(false)
|
||||
const paramsFormRef = ref(null)
|
||||
const paramsForm = reactive({ top_k: 5, summarize: false })
|
||||
const paramsRules = {
|
||||
top_k: [{ type: 'number', min: 1, max: 50, message: 'top_k 范围 1~50', trigger: 'change' }]
|
||||
}
|
||||
|
||||
function openParams() {
|
||||
paramsForm.top_k = searchForm.top_k
|
||||
paramsForm.summarize = searchForm.summarize
|
||||
paramsVisible.value = true
|
||||
}
|
||||
|
||||
async function saveParams() {
|
||||
try {
|
||||
await paramsFormRef.value.validate()
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
searchForm.top_k = paramsForm.top_k
|
||||
searchForm.summarize = paramsForm.summarize
|
||||
persistParams()
|
||||
paramsVisible.value = false
|
||||
message.success('检索参数已保存')
|
||||
}
|
||||
|
||||
/* ---------- 概览统计 ---------- */
|
||||
const isLoading = ref(false)
|
||||
const statsData = ref(null)
|
||||
|
||||
const cardMeta = [
|
||||
{ key: 'doc_l1', label: 'L1 文档总结', icon: DatabaseOutlined, color: '#1677ff', bg: 'rgba(22, 119, 255, 0.12)' },
|
||||
{ key: 'doc_l2', label: 'L2 大纲节点', icon: ApartmentOutlined, color: '#722ed1', bg: 'rgba(114, 46, 209, 0.12)' },
|
||||
{ key: 'doc_l3', label: 'L3 内容大纲', icon: FileSearchOutlined, color: '#13c2c2', bg: 'rgba(19, 194, 194, 0.12)' },
|
||||
{ key: 'chunks', label: 'Chunks', icon: BlockOutlined, color: '#fa8c16', bg: 'rgba(250, 140, 22, 0.12)' },
|
||||
{ key: '__documents_total', label: '文档总数', icon: FileTextOutlined, color: '#52c41a', bg: 'rgba(82, 196, 26, 0.12)' },
|
||||
{ key: '__uncategorized', label: '未分类文档', icon: QuestionCircleOutlined, color: '#ff4d4f', bg: 'rgba(255, 77, 79, 0.12)' }
|
||||
{ key: 'doc_l1', label: 'L1 文档总结', icon: DatabaseOutlined, color: '#1677ff' },
|
||||
{ key: 'doc_l2', label: 'L2 大纲节点', icon: ApartmentOutlined, color: '#722ed1' },
|
||||
{ key: 'doc_l3', label: 'L3 内容大纲', icon: FileSearchOutlined, color: '#13c2c2' },
|
||||
{ key: 'chunks', label: 'Chunks', icon: BlockOutlined, color: '#fa8c16' },
|
||||
{ key: '__documents_total', label: '文档总数', icon: FileTextOutlined, color: '#52c41a' },
|
||||
{ key: '__uncategorized', label: '未分类文档', icon: QuestionCircleOutlined, color: '#ff4d4f' }
|
||||
]
|
||||
|
||||
const cards = computed(() => {
|
||||
@@ -131,6 +189,7 @@ async function loadStats() {
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadParams()
|
||||
loadStats()
|
||||
})
|
||||
</script>
|
||||
@@ -145,143 +204,161 @@ onMounted(() => {
|
||||
</a-button>
|
||||
</div>
|
||||
|
||||
<!-- 检索测试 -->
|
||||
<div class="overview__search">
|
||||
<h3 class="overview__subtitle">
|
||||
<SearchOutlined />
|
||||
<span>检索</span>
|
||||
</h3>
|
||||
<a-form
|
||||
ref="searchFormRef"
|
||||
:model="searchForm"
|
||||
:rules="searchRules"
|
||||
layout="inline"
|
||||
>
|
||||
<a-form-item name="query" style="flex: 1; min-width: 260px">
|
||||
<a-input
|
||||
v-model:value="searchForm.query"
|
||||
placeholder="请输入查询语句"
|
||||
allow-clear
|
||||
@pressEnter="handleSearch"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item name="top_k">
|
||||
<a-input-number
|
||||
v-model:value="searchForm.top_k"
|
||||
:min="1"
|
||||
:max="50"
|
||||
style="width: 120px"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item name="summarize">
|
||||
<a-checkbox v-model:checked="searchForm.summarize">AI 总结</a-checkbox>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button type="primary" :loading="isSearching" @click="handleSearch">
|
||||
检索
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
|
||||
<div v-if="resultData" class="overview__result">
|
||||
<a-descriptions :column="1" size="small" bordered>
|
||||
<a-descriptions-item label="routed_categories">
|
||||
{{ routedCategoriesText(resultData.routed_categories) }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
|
||||
<a-alert
|
||||
v-if="resultData.fallback"
|
||||
class="overview__alert"
|
||||
type="warning"
|
||||
show-icon
|
||||
message="fallback：本次检索触发了回退策略（路由类目无命中，已降级全局检索）"
|
||||
/>
|
||||
|
||||
<div v-if="resultData.summary" class="overview__summary">
|
||||
<div class="overview__summary-title">AI 总结</div>
|
||||
<div class="text-break">{{ resultData.summary }}</div>
|
||||
</div>
|
||||
|
||||
<div v-if="resultData.extracted_info" class="overview__extracted">
|
||||
<div class="overview__extracted-title">AI 提取的关键信息</div>
|
||||
<a-descriptions :column="1" size="small" bordered>
|
||||
<a-descriptions-item label="改写">{{ eiValue(resultData.extracted_info.rewrite) }}</a-descriptions-item>
|
||||
<a-descriptions-item label="关键词">{{ eiValue(resultData.extracted_info.keywords) }}</a-descriptions-item>
|
||||
<a-descriptions-item label="实体">{{ eiValue(resultData.extracted_info.entities) }}</a-descriptions-item>
|
||||
<a-descriptions-item label="意图">{{ eiValue(resultData.extracted_info.intent) }}</a-descriptions-item>
|
||||
<a-descriptions-item label="时间范围">{{ eiValue(resultData.extracted_info.time_range) }}</a-descriptions-item>
|
||||
<a-descriptions-item label="命中类目">{{ eiValue(resultData.extracted_info.categories) }}</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</div>
|
||||
|
||||
<div class="text-muted" style="margin: 12px 0 8px">
|
||||
命中 {{ hits(resultData).length }} 条
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-for="(hit, idx) in hits(resultData)"
|
||||
:key="`hit-${idx}`"
|
||||
class="overview__hit"
|
||||
<!-- 概览统计（Statistic 样式，位于检索框上方） -->
|
||||
<a-spin :spinning="isLoading">
|
||||
<div class="overview__stats">
|
||||
<a-card
|
||||
v-for="card in cards"
|
||||
:key="card.key"
|
||||
class="overview__stat-card"
|
||||
:bordered="false"
|
||||
>
|
||||
<div class="overview__hit-meta">
|
||||
score={{ hit.score }} | doc_id={{ hit.doc_id }} | 标题={{ hit.title || '' }} | section={{ hit.section_path || '' }}
|
||||
</div>
|
||||
<div class="overview__hit-snippet text-break">{{ hit.text || '' }}</div>
|
||||
<div v-if="hit.doc_summary" class="overview__hit-meta">
|
||||
文档摘要：{{ hit.doc_summary }}
|
||||
</div>
|
||||
<a-statistic
|
||||
:title="card.label"
|
||||
:value="card.value"
|
||||
:value-style="{ color: card.color }"
|
||||
>
|
||||
<template #prefix>
|
||||
<component :is="card.icon" />
|
||||
</template>
|
||||
</a-statistic>
|
||||
</a-card>
|
||||
</div>
|
||||
</a-spin>
|
||||
|
||||
<!-- 检索区（居中放大） -->
|
||||
<div class="overview__search-well">
|
||||
<div class="overview__search-bar">
|
||||
<a-form ref="searchFormRef" :model="searchForm" :rules="searchRules" class="overview__search-form">
|
||||
<a-form-item name="query" class="overview__search-form-item">
|
||||
<a-input
|
||||
v-model:value="searchForm.query"
|
||||
size="large"
|
||||
class="overview__search-input"
|
||||
placeholder="在知识库中检索，输入查询语句后按回车"
|
||||
allow-clear
|
||||
@pressEnter="handleSearch"
|
||||
>
|
||||
<template #prefix><SearchOutlined /></template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<a-button type="primary" size="large" :loading="isSearching" @click="handleSearch">
|
||||
检索
|
||||
</a-button>
|
||||
</div>
|
||||
<div class="overview__search-params">
|
||||
<a-button size="small" type="text" @click="openParams">
|
||||
<template #icon><SettingOutlined /></template>
|
||||
参数设置
|
||||
</a-button>
|
||||
<span class="text-muted">
|
||||
top_k = {{ searchForm.top_k }}，AI 总结：{{ searchForm.summarize ? '开' : '关' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 检索结果 -->
|
||||
<div v-if="resultData" class="overview__result">
|
||||
<a-descriptions :column="1" size="small" bordered>
|
||||
<a-descriptions-item label="routed_categories">
|
||||
{{ routedCategoriesText(resultData.routed_categories) }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
|
||||
<a-alert
|
||||
v-if="resultData.fallback"
|
||||
class="overview__alert"
|
||||
type="warning"
|
||||
show-icon
|
||||
message="fallback：本次检索触发了回退策略（路由类目无命中，已降级全局检索）"
|
||||
/>
|
||||
|
||||
<div v-if="resultData.summary" class="overview__summary">
|
||||
<div class="overview__summary-title">AI 总结</div>
|
||||
<div class="text-break">{{ resultData.summary }}</div>
|
||||
</div>
|
||||
|
||||
<div v-if="resultData.extracted_info" class="overview__extracted">
|
||||
<div class="overview__extracted-title">AI 提取的关键信息</div>
|
||||
<a-descriptions :column="1" size="small" bordered>
|
||||
<a-descriptions-item label="改写">{{ eiValue(resultData.extracted_info.rewrite) }}</a-descriptions-item>
|
||||
<a-descriptions-item label="关键词">{{ eiValue(resultData.extracted_info.keywords) }}</a-descriptions-item>
|
||||
<a-descriptions-item label="实体">{{ eiValue(resultData.extracted_info.entities) }}</a-descriptions-item>
|
||||
<a-descriptions-item label="意图">{{ eiValue(resultData.extracted_info.intent) }}</a-descriptions-item>
|
||||
<a-descriptions-item label="时间范围">{{ eiValue(resultData.extracted_info.time_range) }}</a-descriptions-item>
|
||||
<a-descriptions-item label="命中类目">{{ eiValue(resultData.extracted_info.categories) }}</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</div>
|
||||
|
||||
<div class="text-muted" style="margin: 12px 0 8px">
|
||||
命中 {{ hits(resultData).length }} 条
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-for="(hit, idx) in hits(resultData)"
|
||||
:key="`hit-${idx}`"
|
||||
class="overview__hit"
|
||||
>
|
||||
<div class="overview__hit-meta">
|
||||
score={{ hit.score }} | doc_id={{ hit.doc_id }} | 标题={{ hit.title || '' }} | section={{ hit.section_path || '' }}
|
||||
</div>
|
||||
<div class="overview__hit-snippet text-break">{{ hit.text || '' }}</div>
|
||||
<div v-if="hit.doc_summary" class="overview__hit-meta">
|
||||
文档摘要：{{ hit.doc_summary }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 概览统计 -->
|
||||
<a-spin :spinning="isLoading">
|
||||
<div class="overview__cards">
|
||||
<div v-for="card in cards" :key="card.key" class="overview__card">
|
||||
<div class="overview__card-body">
|
||||
<div class="overview__card-icon" :style="{ background: card.bg, color: card.color }">
|
||||
<component :is="card.icon" />
|
||||
</div>
|
||||
<div class="overview__card-info">
|
||||
<div class="overview__card-num">{{ card.value }}</div>
|
||||
<div class="overview__card-label">{{ card.label }}</div>
|
||||
</div>
|
||||
<!-- 类目分布 -->
|
||||
<div class="overview__section">
|
||||
<div class="overview__section-head">
|
||||
<h3 class="overview__subtitle">
|
||||
<AppstoreOutlined />
|
||||
<span>类目分布</span>
|
||||
</h3>
|
||||
<span v-if="categoryBars.length" class="text-muted overview__section-meta">
|
||||
共 {{ categoryBars.length }} 个类目
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="categoryBars.length === 0" class="overview__empty text-muted">暂无数据</div>
|
||||
<div v-else class="overview__bars">
|
||||
<div
|
||||
v-for="(bar, idx) in categoryBars"
|
||||
:key="bar.name"
|
||||
class="overview__bar-row"
|
||||
:title="`${bar.name}: ${bar.count} (${bar.ratio}%)`"
|
||||
>
|
||||
<span class="overview__bar-name" :title="bar.name">{{ bar.name }}</span>
|
||||
<div class="overview__bar-track">
|
||||
<div
|
||||
class="overview__bar-fill"
|
||||
:style="{ width: bar.percent + '%', background: barGradient(idx) }"
|
||||
/>
|
||||
</div>
|
||||
<span class="overview__bar-count">{{ bar.count }}</span>
|
||||
<span class="overview__bar-ratio">{{ bar.ratio }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overview__section">
|
||||
<div class="overview__section-head">
|
||||
<h3 class="overview__subtitle">
|
||||
<AppstoreOutlined />
|
||||
<span>类目分布</span>
|
||||
</h3>
|
||||
<span v-if="categoryBars.length" class="text-muted overview__section-meta">
|
||||
共 {{ categoryBars.length }} 个类目
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="categoryBars.length === 0" class="overview__empty text-muted">暂无数据</div>
|
||||
<div v-else class="overview__bars">
|
||||
<div
|
||||
v-for="(bar, idx) in categoryBars"
|
||||
:key="bar.name"
|
||||
class="overview__bar-row"
|
||||
:title="`${bar.name}: ${bar.count} (${bar.ratio}%)`"
|
||||
>
|
||||
<span class="overview__bar-name" :title="bar.name">{{ bar.name }}</span>
|
||||
<div class="overview__bar-track">
|
||||
<div
|
||||
class="overview__bar-fill"
|
||||
:style="{ width: bar.percent + '%', background: barGradient(idx) }"
|
||||
/>
|
||||
</div>
|
||||
<span class="overview__bar-count">{{ bar.count }}</span>
|
||||
<span class="overview__bar-ratio">{{ bar.ratio }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-spin>
|
||||
<!-- 检索参数设置弹窗 -->
|
||||
<a-modal
|
||||
v-model:open="paramsVisible"
|
||||
title="检索参数设置"
|
||||
ok-text="保存"
|
||||
cancel-text="取消"
|
||||
@ok="saveParams"
|
||||
>
|
||||
<a-form ref="paramsFormRef" :model="paramsForm" :rules="paramsRules" layout="vertical">
|
||||
<a-form-item label="Top-K（返回条数）" name="top_k">
|
||||
<a-input-number v-model:value="paramsForm.top_k" :min="1" :max="50" style="width: 100%" />
|
||||
</a-form-item>
|
||||
<a-form-item label="AI 总结" name="summarize">
|
||||
<a-switch v-model:checked="paramsForm.summarize" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -293,14 +370,67 @@ onMounted(() => {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.overview__search {
|
||||
/* 概览统计（Statistic 卡片） */
|
||||
.overview__stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 16px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.overview__stat-card {
|
||||
background: #fff;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 1px 2px rgba(0, 21, 41, 0.04);
|
||||
}
|
||||
|
||||
.overview__stat-card:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 21, 41, 0.08);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* 检索区（居中放大） */
|
||||
.overview__search-well {
|
||||
background: linear-gradient(135deg, #f0f7ff 0%, #eef2ff 100%);
|
||||
border: 1px solid #e0e7ff;
|
||||
border-radius: 12px;
|
||||
padding: 36px 24px;
|
||||
text-align: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.overview__search-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
max-width: 760px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.overview__search-form {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.overview__search-form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.overview__search-input {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.overview__search-params {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
margin-top: 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.overview__result {
|
||||
margin-top: 16px;
|
||||
}
|
||||
@@ -359,63 +489,6 @@ onMounted(() => {
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.overview__cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.overview__card {
|
||||
background: #fff;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 8px;
|
||||
padding: 16px 18px;
|
||||
transition: all 0.2s;
|
||||
box-shadow: 0 1px 2px rgba(0, 21, 41, 0.04);
|
||||
}
|
||||
|
||||
.overview__card:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 21, 41, 0.08);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.overview__card-body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.overview__card-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 8px;
|
||||
font-size: 22px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.overview__card-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.overview__card-num {
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.overview__card-label {
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.overview__section {
|
||||
margin-top: 8px;
|
||||
}
|
||||
@@ -504,5 +577,8 @@ onMounted(() => {
|
||||
.overview__bar-name {
|
||||
width: 120px;
|
||||
}
|
||||
.overview__search-bar {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user