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,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 {

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,143 +204,161 @@ 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-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"
         >
-          <div class="overview__hit-meta">
+          <a-statistic
-            score={{ hit.score }} | doc_id={{ hit.doc_id }} | 标题={{ hit.title || '' }} | section={{ hit.section_path || '' }}
+            :title="card.label"
-          </div>
+            :value="card.value"
-          <div class="overview__hit-snippet text-break">{{ hit.text || '' }}</div>
+            :value-style="{ color: card.color }"
-          <div v-if="hit.doc_summary" class="overview__hit-meta">
+          >
-            文档摘要：{{ hit.doc_summary }}
+            <template #prefix>
-          </div>
+              <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__section">
-      <div class="overview__cards">
+      <div class="overview__section-head">
-        <div v-for="card in cards" :key="card.key" class="overview__card">
+        <h3 class="overview__subtitle">
-          <div class="overview__card-body">
+          <AppstoreOutlined />
-            <div class="overview__card-icon" :style="{ background: card.bg, color: card.color }">
+          <span>类目分布</span>
-              <component :is="card.icon" />
+        </h3>
-            </div>
+        <span v-if="categoryBars.length" class="text-muted overview__section-meta">
-            <div class="overview__card-info">
+          共 {{ categoryBars.length }} 个类目
-              <div class="overview__card-num">{{ card.value }}</div>
+        </span>
-              <div class="overview__card-label">{{ card.label }}</div>
+      </div>
-            </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">
+    <a-modal
-          <h3 class="overview__subtitle">
+      v-model:open="paramsVisible"
-            <AppstoreOutlined />
+      title="检索参数设置"
-            <span>类目分布</span>
+      ok-text="保存"
-          </h3>
+      cancel-text="取消"
-          <span v-if="categoryBars.length" class="text-muted overview__section-meta">
+      @ok="saveParams"
-            共 {{ categoryBars.length }} 个类目
+    >
-          </span>
+      <a-form ref="paramsFormRef" :model="paramsForm" :rules="paramsRules" layout="vertical">
-        </div>
+        <a-form-item label="Top-K（返回条数）" name="top_k">
-        <div v-if="categoryBars.length === 0" class="overview__empty text-muted">暂无数据</div>
+          <a-input-number v-model:value="paramsForm.top_k" :min="1" :max="50" style="width: 100%" />
-        <div v-else class="overview__bars">
+        </a-form-item>
-          <div
+        <a-form-item label="AI 总结" name="summarize">
-            v-for="(bar, idx) in categoryBars"
+          <a-switch v-model:checked="paramsForm.summarize" />
-            :key="bar.name"
+        </a-form-item>
-            class="overview__bar-row"
+      </a-form>
-            :title="`${bar.name}: ${bar.count} (${bar.ratio}%)`"
+    </a-modal>
-          >
-            <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>
   </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>