Show kb id

web/pages/KnowledgeBase.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { Search, Plus, FileText, Upload, ArrowLeft, CloudUpload, File as FileIcon, X, Pencil, Trash2, Settings2, MoreHorizontal } from 'lucide-react';
+import { Search, Plus, FileText, Upload, ArrowLeft, CloudUpload, File as FileIcon, X, Pencil, Trash2, Settings2, MoreHorizontal, Copy } from 'lucide-react';
 import { Button, Input, TableHeader, TableRow, TableHead, TableCell, Card, Dialog, Badge } from '../components/UI';
 import { KnowledgeBase, KnowledgeDocument } from '../types';
 import { createKnowledgeBase, deleteKnowledgeBase, deleteKnowledgeDocument, fetchKnowledgeBaseById, fetchKnowledgeBases, fetchLLMModels, indexKnowledgeDocument, searchKnowledgeBase, updateKnowledgeBase, uploadKnowledgeDocument, type KnowledgeSearchResultItem } from '../services/backendApi';
@@ -31,6 +31,16 @@ export const KnowledgeBasePage: React.FC = () => {
   const [kbChunkOverlap, setKbChunkOverlap] = useState(50);
   const [isSavingKb, setIsSavingKb] = useState(false);
 
+  const copyKbId = async (id: string) => {
+    try {
+      await navigator.clipboard.writeText(id);
+      alert(`已复制 KB ID: ${id}`);
+    } catch (error) {
+      console.error(error);
+      alert('复制失败，请手动复制。');
+    }
+  };
+
   const filteredKbs = kbs.filter((kb) => kb.name.toLowerCase().includes(searchTerm.toLowerCase()));
 
   const refreshKnowledgeBases = async () => {
@@ -299,6 +309,19 @@ export const KnowledgeBasePage: React.FC = () => {
               </div>
             </div>
             <h3 className="text-lg font-semibold group-hover:text-primary transition-colors text-white">{kb.name}</h3>
+            <div className="mt-1 flex items-center gap-2 text-xs text-muted-foreground">
+              <span className="font-mono">KB ID: {kb.id}</span>
+              <button
+                className="inline-flex items-center justify-center rounded p-1 hover:bg-white/10 transition-colors"
+                title="复制 KB ID"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  void copyKbId(kb.id);
+                }}
+              >
+                <Copy className="h-3.5 w-3.5" />
+              </button>
+            </div>
             <div className="mt-2">
               <Badge variant="outline">{kb.embeddingModel || 'embedding'}</Badge>
             </div>
@@ -531,7 +554,24 @@ const KnowledgeBaseDetail: React.FC<{
             <ArrowLeft className="h-4 w-4" />
           </Button>
           <div>
+            <div className="flex items-center gap-2">
               <h1 className="text-2xl font-bold text-white">{kb.name}</h1>
+              <span className="font-mono text-xs text-muted-foreground">KB ID: {kb.id}</span>
+              <button
+                className="inline-flex items-center justify-center rounded p-1 hover:bg-white/10 transition-colors text-muted-foreground"
+                title="复制 KB ID"
+                onClick={() => {
+                  void navigator.clipboard.writeText(kb.id)
+                    .then(() => alert(`已复制 KB ID: ${kb.id}`))
+                    .catch((error) => {
+                      console.error(error);
+                      alert('复制失败，请手动复制。');
+                    });
+                }}
+              >
+                <Copy className="h-3.5 w-3.5" />
+              </button>
+            </div>
             <p className="text-sm text-muted-foreground">创建于 {kb.createdAt} · {kb.embeddingModel} · by {kb.creator}</p>
           </div>
         </div>