From 5f50c137e446ba18ecfc7d91458063c8f090e6f4 Mon Sep 17 00:00:00 2001
From: Xin Wang <wx44wx@XindeMac-mini.local>
Date: Tue, 10 Feb 2026 10:57:52 +0800
Subject: [PATCH] Test KB index button move

---
 web/pages/KnowledgeBase.tsx | 138 +++++++++++++++++++-----------------
 1 file changed, 73 insertions(+), 65 deletions(-)

diff --git a/web/pages/KnowledgeBase.tsx b/web/pages/KnowledgeBase.tsx
index f5c09e9..3ff4acf 100644
--- a/web/pages/KnowledgeBase.tsx
+++ b/web/pages/KnowledgeBase.tsx
@@ -473,6 +473,7 @@ const KnowledgeBaseDetail: React.FC<{
   const [debugLoading, setDebugLoading] = useState(false);
   const [debugResults, setDebugResults] = useState<KnowledgeSearchResultItem[]>([]);
   const [debugError, setDebugError] = useState('');
+  const [debugDialogOpen, setDebugDialogOpen] = useState(false);
   const filteredDocs = kb.documents.filter((d) => d.name.toLowerCase().includes(docSearch.toLowerCase()));
   const docNameById = new Map(kb.documents.map((doc) => [doc.id, doc.name]));
 
@@ -535,6 +536,7 @@ const KnowledgeBaseDetail: React.FC<{
           </div>
         </div>
         <div className="flex items-center gap-2">
+          <Button variant="outline" onClick={() => setDebugDialogOpen(true)}>调试检索</Button>
           <Button variant="outline" onClick={onEdit}><Settings2 className="mr-2 h-4 w-4" /> 编辑配置</Button>
           <Button onClick={onImport}><Upload className="mr-2 h-4 w-4" /> 新增知识 (导入)</Button>
           <Button variant="ghost" className="text-destructive" onClick={onDelete}><Trash2 className="mr-2 h-4 w-4" /> 删除</Button>
@@ -609,71 +611,6 @@ const KnowledgeBaseDetail: React.FC<{
         </table>
       </Card>
 
-      <Card className="overflow-hidden border-white/5">
-        <div className="p-4 border-b border-white/5 bg-white/5">
-          <h3 className="font-medium text-white">调试检索</h3>
-          <p className="text-xs text-muted-foreground mt-1">
-            输入测试文本，使用当前知识库的 embedding 配置检索文档片段并查看匹配度。
-          </p>
-        </div>
-        <div className="p-4 space-y-4">
-          <div className="grid grid-cols-1 md:grid-cols-[1fr_120px_120px] gap-3">
-            <Input
-              placeholder="输入要测试的检索文本..."
-              value={debugQuery}
-              onChange={(e) => setDebugQuery(e.target.value)}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter' && !debugLoading) void runDebugSearch();
-              }}
-              className="bg-black/20 border-transparent focus:bg-black/40"
-            />
-            <Input
-              type="number"
-              min={1}
-              max={20}
-              value={debugTopK}
-              onChange={(e) => setDebugTopK(parseInt(e.target.value || '1', 10))}
-              className="bg-black/20 border-transparent focus:bg-black/40"
-            />
-            <Button onClick={() => void runDebugSearch()} disabled={debugLoading}>
-              {debugLoading ? '检索中...' : '开始检索'}
-            </Button>
-          </div>
-
-          {!!debugError && (
-            <div className="text-sm text-destructive">{debugError}</div>
-          )}
-
-          {!debugLoading && debugResults.length === 0 && !debugError && (
-            <div className="text-sm text-muted-foreground">暂无结果，输入文本后点击“开始检索”。</div>
-          )}
-
-          {debugResults.length > 0 && (
-            <div className="space-y-3">
-              {debugResults.map((item, idx) => {
-                const docId = String(item.metadata?.document_id || '');
-                const chunkIndex = item.metadata?.chunk_index;
-                const docName = docNameById.get(docId);
-                return (
-                  <div key={`${docId}-${chunkIndex}-${idx}`} className="rounded-lg border border-white/10 bg-white/5 p-3 space-y-2">
-                    <div className="flex flex-wrap items-center gap-2 text-xs">
-                      <Badge variant="outline">#{idx + 1}</Badge>
-                      <Badge variant="outline">{docName || docId || 'unknown_doc'}</Badge>
-                      <Badge variant="outline">chunk {chunkIndex ?? '-'}</Badge>
-                      <Badge variant="outline">distance: {typeof item.distance === 'number' ? item.distance.toFixed(6) : '-'}</Badge>
-                      <Badge variant="outline">匹配度: {renderMatchPercent(item.distance)}</Badge>
-                    </div>
-                    <p className="text-sm text-white/90 whitespace-pre-wrap leading-relaxed">
-                      {item.content || '(空内容)'}
-                    </p>
-                  </div>
-                );
-              })}
-            </div>
-          )}
-        </div>
-      </Card>
-
       <Dialog
         isOpen={!!indexingDoc}
         onClose={() => {
@@ -712,6 +649,77 @@ const KnowledgeBaseDetail: React.FC<{
           />
         </div>
       </Dialog>
+
+      <Dialog
+        isOpen={debugDialogOpen}
+        onClose={() => setDebugDialogOpen(false)}
+        title="调试检索"
+        footer={
+          <>
+            <Button variant="ghost" onClick={() => setDebugDialogOpen(false)}>关闭</Button>
+            <Button onClick={() => void runDebugSearch()} disabled={debugLoading}>
+              {debugLoading ? '检索中...' : '开始检索'}
+            </Button>
+          </>
+        }
+      >
+        <div className="space-y-4">
+          <p className="text-xs text-muted-foreground">
+            输入测试文本，使用当前知识库的 embedding 配置检索文档片段并查看匹配度。
+          </p>
+          <div className="grid grid-cols-1 md:grid-cols-[1fr_120px] gap-3">
+            <Input
+              placeholder="输入要测试的检索文本..."
+              value={debugQuery}
+              onChange={(e) => setDebugQuery(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' && !debugLoading) void runDebugSearch();
+              }}
+              className="bg-black/20 border-transparent focus:bg-black/40"
+            />
+            <Input
+              type="number"
+              min={1}
+              max={20}
+              value={debugTopK}
+              onChange={(e) => setDebugTopK(parseInt(e.target.value || '1', 10))}
+              className="bg-black/20 border-transparent focus:bg-black/40"
+            />
+          </div>
+
+          {!!debugError && (
+            <div className="text-sm text-destructive">{debugError}</div>
+          )}
+
+          {!debugLoading && debugResults.length === 0 && !debugError && (
+            <div className="text-sm text-muted-foreground">暂无结果，输入文本后点击“开始检索”。</div>
+          )}
+
+          {debugResults.length > 0 && (
+            <div className="space-y-3 max-h-[52vh] overflow-y-auto pr-1 custom-scrollbar">
+              {debugResults.map((item, idx) => {
+                const docId = String(item.metadata?.document_id || '');
+                const chunkIndex = item.metadata?.chunk_index;
+                const docName = docNameById.get(docId);
+                return (
+                  <div key={`${docId}-${chunkIndex}-${idx}`} className="rounded-lg border border-white/10 bg-white/5 p-3 space-y-2">
+                    <div className="flex flex-wrap items-center gap-2 text-xs">
+                      <Badge variant="outline">#{idx + 1}</Badge>
+                      <Badge variant="outline">{docName || docId || 'unknown_doc'}</Badge>
+                      <Badge variant="outline">chunk {chunkIndex ?? '-'}</Badge>
+                      <Badge variant="outline">distance: {typeof item.distance === 'number' ? item.distance.toFixed(6) : '-'}</Badge>
+                      <Badge variant="outline">匹配度: {renderMatchPercent(item.distance)}</Badge>
+                    </div>
+                    <p className="text-sm text-white/90 whitespace-pre-wrap leading-relaxed">
+                      {item.content || '(空内容)'}
+                    </p>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      </Dialog>
     </div>
   );
 };