feat: 知识库文档详情页内展示，概览检索框居中放大并参数持久化

- 知识库点击文档改为页面内展示详情，移除文档详情抽屉
- 概览检索框居中放大，检索参数（top_k/AI总结）改由 Modal 设置并持久化到 localStorage
- 概览统计使用 Statistic 样式展示在检索框上方

frontend/src/views/Library.vue

@@ -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,22 +432,22 @@ const failedColumns = [
           <div class="text-muted">{{ categoryDesc || '（无描述）' }}</div>
         </div>
 
-        <!-- 未选中提示 -->
+        <!-- 文档详情（页面内展示） -->
-        <div v-else-if="!docDetailVisible" class="library__placeholder text-muted">
+        <div v-else-if="selectedDoc" class="library__panel library__doc-detail">
-          从左侧选择类目或文档查看详情
+          <div class="library__doc-head">
-        </div>
+            <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-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>
@@ -471,15 +471,6 @@ const failedColumns = [
                 </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>
 
@@ -499,7 +490,14 @@ const failedColumns = [
             </div>
             <div v-else-if="!isLoadingDetail" class="text-muted">暂无数据</div>
           </a-spin>
-    </a-drawer>
+        </div>
+
+        <!-- 未选中提示 -->
+        <div v-else class="library__placeholder text-muted">
+          从左侧选择类目或文档查看详情
+        </div>
+      </div>
+    </div>
 
     <!-- 入库抽屉 -->
     <a-drawer
@@ -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 {

frontend/src/views/Overview.vue

@@ -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'
 
-/* ---------- 检索 ---------- */
+/* ---------- 检索参数（localStorage 持久化） ---------- */
-const isSearching = ref(false)
+const STORAGE_KEY = 'qdsearch:searchParams'
-const resultData = ref(null)
+
-const searchFormRef = ref(null)
 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' }],
+  query: [{ required: true, message: '请输入查询语句', trigger: 'blur' }]
-  top_k: [{ type: 'number', min: 1, max: 50, message: 'top_k 范围 1~50', trigger: 'change' }]
 }
 
 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_l1', label: 'L1 文档总结', icon: DatabaseOutlined, color: '#1677ff' },
-  { key: 'doc_l2', label: 'L2 大纲节点', icon: ApartmentOutlined, color: '#722ed1', bg: 'rgba(114, 46, 209, 0.12)' },
+  { key: 'doc_l2', label: 'L2 大纲节点', icon: ApartmentOutlined, color: '#722ed1' },
-  { key: 'doc_l3', label: 'L3 内容大纲', icon: FileSearchOutlined, color: '#13c2c2', bg: 'rgba(19, 194, 194, 0.12)' },
+  { key: 'doc_l3', label: 'L3 内容大纲', icon: FileSearchOutlined, color: '#13c2c2' },
-  { key: 'chunks', label: 'Chunks', icon: BlockOutlined, color: '#fa8c16', bg: 'rgba(250, 140, 22, 0.12)' },
+  { key: 'chunks', label: 'Chunks', icon: BlockOutlined, color: '#fa8c16' },
-  { key: '__documents_total', label: '文档总数', icon: FileTextOutlined, color: '#52c41a', bg: 'rgba(82, 196, 26, 0.12)' },
+  { key: '__documents_total', label: '文档总数', icon: FileTextOutlined, color: '#52c41a' },
-  { key: '__uncategorized', label: '未分类文档', icon: QuestionCircleOutlined, color: '#ff4d4f', bg: 'rgba(255, 77, 79, 0.12)' }
+  { key: '__uncategorized', label: '未分类文档', icon: QuestionCircleOutlined, color: '#ff4d4f' }
 ]
 
 const cards = computed(() => {
@@ -131,6 +189,7 @@ async function loadStats() {
 }
 
 onMounted(() => {
+  loadParams()
   loadStats()
 })
 </script>
@@ -145,44 +204,61 @@ onMounted(() => {
       </a-button>
     </div>
 
-    <!-- 检索测试 -->
+    <!-- 概览统计（Statistic 样式，位于检索框上方） -->
-    <div class="overview__search">
+    <a-spin :spinning="isLoading">
-      <h3 class="overview__subtitle">
+      <div class="overview__stats">
-        <SearchOutlined />
+        <a-card
-        <span>检索</span>
+          v-for="card in cards"
-      </h3>
+          :key="card.key"
-      <a-form
+          class="overview__stat-card"
-        ref="searchFormRef"
+          :bordered="false"
-        :model="searchForm"
-        :rules="searchRules"
-        layout="inline"
         >
-        <a-form-item name="query" style="flex: 1; min-width: 260px">
+          <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"
-            placeholder="请输入查询语句"
+              size="large"
+              class="overview__search-input"
+              placeholder="在知识库中检索，输入查询语句后按回车"
               allow-clear
               @pressEnter="handleSearch"
-          />
+            >
-        </a-form-item>
+              <template #prefix><SearchOutlined /></template>
-        <a-form-item name="top_k">
+            </a-input>
-          <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>
+        <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">
@@ -233,24 +309,8 @@ onMounted(() => {
         </div>
       </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>
-        </div>
-      </div>
 
+    <!-- 类目分布 -->
     <div class="overview__section">
       <div class="overview__section-head">
         <h3 class="overview__subtitle">
@@ -281,7 +341,24 @@ onMounted(() => {
         </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>