From 0536930fdefe64e6ef1e5bea4f0030d8d1d6dc0b Mon Sep 17 00:00:00 2001
From: Xin Wang <your-email@example.com>
Date: Sun, 12 Jul 2026 18:26:34 +0800
Subject: [PATCH] Enhance ComponentsKnowledgePage with improved dialog content
 and layout

- Add DialogDescription components to provide context in the settings and search dialogs.
- Refactor layout for better spacing and organization of form elements in the settings dialog.
- Update search results display to improve user experience with clearer messaging and styling.
- Introduce footer buttons for closing dialogs, enhancing user interaction.
---
 .../pages/ComponentsKnowledgePage.tsx         | 78 +++++++++++--------
 1 file changed, 44 insertions(+), 34 deletions(-)

diff --git a/frontend/src/components/pages/ComponentsKnowledgePage.tsx b/frontend/src/components/pages/ComponentsKnowledgePage.tsx
index 85b50de..6154870 100644
--- a/frontend/src/components/pages/ComponentsKnowledgePage.tsx
+++ b/frontend/src/components/pages/ComponentsKnowledgePage.tsx
@@ -27,6 +27,7 @@ import { DataList } from "@/components/ui/data-list";
 import {
   Dialog,
   DialogContent,
+  DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
@@ -975,29 +976,28 @@ function KnowledgeEditView({ knowledgeBaseId }: { knowledgeBaseId: string }) {
       </Card>
 
       <Dialog open={settingsOpen} onOpenChange={setSettingsOpen}>
-        <DialogContent>
+        <DialogContent className="sm:max-w-xl">
           <DialogHeader>
             <DialogTitle>知识库设置</DialogTitle>
+            <DialogDescription>
+              修改用途说明与 Embedding 模型。名称可在页面标题处直接编辑。
+            </DialogDescription>
           </DialogHeader>
-          <div className="space-y-4">
-            <label className="block">
-              <div className="mb-2 text-sm font-medium text-foreground">
-                描述
-              </div>
+          <div className="space-y-5 rounded-xl border border-hairline bg-surface-strong/20 p-4">
+            <label className="block space-y-2">
+              <span className="text-sm font-medium">描述</span>
               <Textarea
                 placeholder="用途说明（可选）"
                 value={description}
                 onChange={(event) => setDescription(event.target.value)}
                 rows={4}
-                className="field-sizing-fixed min-h-24 resize-y border-hairline-strong bg-background"
+                className="field-sizing-fixed min-h-24 resize-y"
               />
             </label>
-            <div>
-              <div className="mb-2 text-sm font-medium text-foreground">
-                Embedding 模型
-              </div>
+            <label className="block space-y-2">
+              <span className="text-sm font-medium">Embedding 模型</span>
               <Select value={embeddingId} onValueChange={setEmbeddingId}>
-                <SelectTrigger className="border-hairline-strong bg-background">
+                <SelectTrigger className="w-full">
                   <SelectValue placeholder="选择 Embedding 模型" />
                 </SelectTrigger>
                 <SelectContent>
@@ -1009,13 +1009,16 @@ function KnowledgeEditView({ knowledgeBaseId }: { knowledgeBaseId: string }) {
                 </SelectContent>
               </Select>
               {documents.length > 0 && (
-                <p className="mt-2 text-xs text-muted-foreground">
+                <p className="text-xs text-muted-foreground">
                   已有文档时不能更换 Embedding 模型。
                 </p>
               )}
-            </div>
+            </label>
           </div>
           <DialogFooter>
+            <Button variant="outline" onClick={() => setSettingsOpen(false)}>
+              取消
+            </Button>
             <Button
               disabled={busy || !embeddingId}
               onClick={() => void saveSettings()}
@@ -1028,17 +1031,16 @@ function KnowledgeEditView({ knowledgeBaseId }: { knowledgeBaseId: string }) {
       </Dialog>
 
       <Dialog open={searchOpen} onOpenChange={setSearchOpen}>
-        <DialogContent className="sm:max-w-2xl">
+        <DialogContent className="max-h-[calc(100vh-3rem)] overflow-y-auto sm:max-w-3xl">
           <DialogHeader>
             <DialogTitle>检索测试</DialogTitle>
+            <DialogDescription>
+              直接验证当前知识库能否召回正确片段。
+            </DialogDescription>
           </DialogHeader>
           <div className="space-y-4">
-            <p className="text-sm text-muted-foreground">
-              直接验证当前知识库能否召回正确片段。
-            </p>
             <div className="flex gap-2">
               <Input
-                className="border-hairline-strong bg-background"
                 placeholder="输入问题，例如：退款规则是什么？"
                 value={testQuery}
                 onChange={(event) => setTestQuery(event.target.value)}
@@ -1047,6 +1049,7 @@ function KnowledgeEditView({ knowledgeBaseId }: { knowledgeBaseId: string }) {
                 }}
               />
               <Button
+                className="shrink-0 gap-2"
                 disabled={searching || !testQuery.trim()}
                 onClick={() => void testSearch()}
               >
@@ -1058,29 +1061,36 @@ function KnowledgeEditView({ knowledgeBaseId }: { knowledgeBaseId: string }) {
                 检索
               </Button>
             </div>
-            <div className="max-h-[50vh] space-y-3 overflow-y-auto">
-              {searchResults.length === 0 ? (
-                <p className="py-4 text-center text-sm text-muted-foreground">
-                  输入问题后点击检索查看结果。
-                </p>
-              ) : (
-                searchResults.map((result, index) => (
+            {searchResults.length === 0 ? (
+              <div className="rounded-xl border border-dashed border-hairline-strong px-4 py-10 text-center text-sm text-muted-foreground">
+                输入问题后点击检索查看结果。
+              </div>
+            ) : (
+              <div className="max-h-[50vh] divide-y divide-hairline overflow-y-auto rounded-xl border border-hairline">
+                {searchResults.map((result, index) => (
                   <div
                     key={`${result.document}-${index}`}
-                    className="rounded-xl border border-hairline p-3"
+                    className="space-y-2 px-4 py-3"
                   >
-                    <div className="mb-2 flex justify-between text-xs text-muted-foreground">
-                      <span>来源：{result.document}</span>
-                      <span>相关度 {result.score}</span>
+                    <div className="flex justify-between gap-3 text-xs text-muted-foreground">
+                      <span className="truncate">来源：{result.document}</span>
+                      <span className="shrink-0 tabular-nums">
+                        相关度 {result.score}
+                      </span>
                     </div>
-                    <p className="whitespace-pre-wrap text-sm leading-6">
+                    <p className="whitespace-pre-wrap text-sm leading-6 text-foreground">
                       {result.content}
                     </p>
                   </div>
-                ))
-              )}
-            </div>
+                ))}
+              </div>
+            )}
           </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setSearchOpen(false)}>
+              关闭
+            </Button>
+          </DialogFooter>
         </DialogContent>
       </Dialog>