From eb05318074e81c24a6313117a9eb471e39c832d6 Mon Sep 17 00:00:00 2001
From: PingChuan <1259732256@qq.com>
Date: Tue, 9 Dec 2025 16:30:33 +0800
Subject: [PATCH] =?UTF-8?q?style=EF=BC=9A=E8=B0=83=E6=95=B4dify=E5=86=85?=
 =?UTF-8?q?=E5=B5=8C=E4=BE=A7=E8=BE=B9=E6=A0=8F=E3=80=81=E5=8F=AC=E5=9B=9E?=
 =?UTF-8?q?=E6=B5=8B=E8=AF=95=E3=80=81=E9=A2=84=E8=A7=88=E5=9D=97=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/dify-chat/sidebar.tsx          |   4 +-
 .../area-dataset-config.tsx                   |   2 +-
 .../dify-dataset-manager/layout.tsx           |   2 +-
 .../dify-dataset-manager/retrieve-test.tsx    | 151 ++++++------------
 .../components/dify-dataset-manager/index.css |  14 +-
 5 files changed, 67 insertions(+), 106 deletions(-)

diff --git a/app/components/dify-chat/sidebar.tsx b/app/components/dify-chat/sidebar.tsx
index b15d53f..a3eec13 100644
--- a/app/components/dify-chat/sidebar.tsx
+++ b/app/components/dify-chat/sidebar.tsx
@@ -407,7 +407,7 @@ const ChatSidebar = forwardRef<ChatSidebarRef, ChatSidebarProps>(({
                 confirmLoading={renameLoading}
                 okText="确定"
                 cancelText="取消"
-                destroyOnClose
+                destroyOnHidden
             >
                 <div className="py-4">
                     <Input
@@ -437,7 +437,7 @@ const ChatSidebar = forwardRef<ChatSidebarRef, ChatSidebarProps>(({
                 okText="删除"
                 cancelText="取消"
                 okType="danger"
-                destroyOnClose
+                destroyOnHidden
             >
                 <div className="py-4">
                     <p>确定要删除会话 <strong>"{deletingConversation?.name}"</strong> 吗？</p>
diff --git a/app/components/dify-dataset-manager/area-dataset-config.tsx b/app/components/dify-dataset-manager/area-dataset-config.tsx
index f482750..b611f34 100644
--- a/app/components/dify-dataset-manager/area-dataset-config.tsx
+++ b/app/components/dify-dataset-manager/area-dataset-config.tsx
@@ -577,7 +577,7 @@ export default function AreaDatasetConfig() {
                 ),
                 value: ds.id,
               }))}
-              dropdownStyle={{ maxHeight: '300px' }}
+              styles={{ popup: { root: { maxHeight: '300px' } } }}
             />
           </Form.Item>
 
diff --git a/app/components/dify-dataset-manager/layout.tsx b/app/components/dify-dataset-manager/layout.tsx
index dec9eb5..64483e1 100644
--- a/app/components/dify-dataset-manager/layout.tsx
+++ b/app/components/dify-dataset-manager/layout.tsx
@@ -55,7 +55,7 @@ export default function DatasetLayout({
                                 placeholder="选择知识库"
                                 suffixIcon={<SwapOutlined />}
                                 popupMatchSelectWidth={false}
-                                dropdownStyle={{ minWidth: 200 }}
+                                styles={{ popup: { root: { minWidth: 200 } } }}
                             >
                                 {availableDatasets.map(ds => (
                                     <Select.Option key={ds.dataset_id} value={ds.dataset_id}>
diff --git a/app/components/dify-dataset-manager/retrieve-test.tsx b/app/components/dify-dataset-manager/retrieve-test.tsx
index 8a6c7bd..06a8c74 100644
--- a/app/components/dify-dataset-manager/retrieve-test.tsx
+++ b/app/components/dify-dataset-manager/retrieve-test.tsx
@@ -1,5 +1,5 @@
-import { SearchOutlined, FileSearchOutlined } from '@ant-design/icons';
-import { Button, Tag, Input, Slider, Spin, Select, Flex, Switch, InputNumber, Tooltip } from 'antd';
+import { FileSearchOutlined, SearchOutlined } from '@ant-design/icons';
+import { Button, Card, Flex, Input, InputNumber, Select, Slider, Spin, Switch, Tag, Tooltip } from 'antd';
 import type { RetrieveRecord } from '~/api/dify-dataset/type';
 import { useRetrieveTest } from '~/hooks/dify-dataset-manager/retrieve-test';
 import type { RetrieveTestProps } from '~/types/dify-dataset-manager/retrieve-test';
@@ -25,62 +25,46 @@ function ResultItem({ record, index }: { record: RetrieveRecord; index: number }
     const scoreColor = record.score > 0.8 ? '#52c41a' : record.score > 0.5 ? '#faad14' : '#666';
 
     return (
-        <Flex
-            vertical
-            gap={12}
-            style={{
-                padding: 16,
-                background: colors.bgContainer,
-                borderRadius: 8,
-                border: `1px solid ${colors.border}`,
-            }}
-        >
-            <Flex justify="space-between" align="center">
-                <Flex gap={8} align="center">
-                    <Tag style={{ background: scoreColor, color: '#fff', border: 'none' }}>
+        <div className="segment-item">
+            <div className="segment-header">
+                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                    <Tag style={{ background: scoreColor, color: '#fff', border: 'none', margin: 0 }}>
                         {scorePercent}%
                     </Tag>
-                    <span style={{ color: colors.textSecondary, fontSize: 12 }}>
-                        #{index + 1} · {record.segment.word_count} 字 · 命中 {record.segment.hit_count} 次
+                    <span className="segment-index">#{index + 1}</span>
+                    <span className="segment-chars">
+                        {record.segment.word_count} 字 · 命中 {record.segment.hit_count} 次
                     </span>
-                </Flex>
+                </div>
                 {record.segment.document && (
-                    <span style={{ color: colors.textTertiary, fontSize: 12 }}>
+                    <span className="segment-chars">
                         来源: {record.segment.document.name}
                     </span>
                 )}
-            </Flex>
-            <div style={{
-                color: colors.text,
-                fontSize: 14,
-                lineHeight: 1.6,
-                whiteSpace: 'pre-wrap',
-            }}>
+            </div>
+            <div className="segment-content">
                 {record.segment.content.length > 500
                     ? record.segment.content.substring(0, 500) + '...'
                     : record.segment.content}
             </div>
             {record.segment.answer && (
-                <Flex
-                    vertical
-                    gap={4}
-                    style={{
-                        padding: 12,
-                        background: colors.fillTertiary,
-                        borderRadius: 6,
-                    }}
-                >
-                    <span style={{ color: colors.textSecondary, fontSize: 12 }}>
+                <div style={{
+                    padding: 12,
+                    background: '#f0f0f0',
+                    borderRadius: 6,
+                    marginTop: 8,
+                }}>
+                    <span style={{ color: '#8c8c8c', fontSize: 12, display: 'block', marginBottom: 4 }}>
                         答案:
                     </span>
-                    <span style={{ color: colors.text, fontSize: 14 }}>
+                    <span style={{ color: '#262626', fontSize: 14 }}>
                         {record.segment.answer.length > 200
                             ? record.segment.answer.substring(0, 200) + '...'
                             : record.segment.answer}
                     </span>
-                </Flex>
+                </div>
             )}
-        </Flex>
+        </div>
     );
 }
 
@@ -277,63 +261,32 @@ export default function RetrieveTest({ datasetId }: RetrieveTestProps) {
             </Flex>
 
             {/* 右侧面板 - 结果展示 */}
-            <Flex
-                vertical
-                flex={1}
-                gap={16}
-                style={{
-                    padding: 20,
-                    background: colors.bgElevated,
-                    overflow: 'auto',
-                }}
-            >
-                {retrieving ? (
-                    <Flex
-                        flex={1}
-                        align="center"
-                        justify="center"
-                        vertical
-                        gap={12}
-                    >
-                        <Spin size="large" />
-                        <span style={{ color: colors.textSecondary }}>
-                            检索中...
-                        </span>
-                    </Flex>
-                ) : retrieveResults.length === 0 ? (
-                    <Flex
-                        flex={1}
-                        align="center"
-                        justify="center"
-                        vertical
-                        gap={12}
-                    >
-                        <FileSearchOutlined style={{
-                            fontSize: 48,
-                            color: colors.textQuaternary,
-                        }} />
-                        <span style={{ color: colors.textTertiary }}>
-                            召回测试结果将展示在这里
-                        </span>
-                    </Flex>
-                ) : (
-                    <>
-                        <Flex justify="space-between" align="center">
-                            <span style={{
-                                fontSize: 14,
-                                color: colors.text,
-                                fontWeight: 500,
-                            }}>
-                                检索结果
+            <div className="preview-panel">
+                <Card
+                    title={
+                        <div className="preview-header">
+                            <span>检索结果</span>
+                            <span className="segment-count">
+                                {retrieveResults.length > 0 ? `${retrieveResults.length} 条结果` : '0 条结果'}
                             </span>
-                            <span style={{
-                                fontSize: 13,
-                                color: colors.textSecondary,
-                            }}>
-                                共找到 {retrieveResults.length} 条结果
-                            </span>
-                        </Flex>
-                        <Flex vertical gap={12}>
+                        </div>
+                    }
+                    className="preview-card"
+                >
+                    {retrieving ? (
+                        <div className="preview-loading">
+                            <Spin size="large" />
+                            <div className="loading-text">检索中...</div>
+                        </div>
+                    ) : retrieveResults.length === 0 ? (
+                        <div className="preview-empty">
+                            <div className="empty-icon">
+                                <FileSearchOutlined />
+                            </div>
+                            <p>召回测试结果将展示在这里</p>
+                        </div>
+                    ) : (
+                        <div className="preview-segments">
                             {retrieveResults.map((record, index) => (
                                 <ResultItem
                                     key={record.segment.id}
@@ -341,10 +294,10 @@ export default function RetrieveTest({ datasetId }: RetrieveTestProps) {
                                     index={index}
                                 />
                             ))}
-                        </Flex>
-                    </>
-                )}
-            </Flex>
+                        </div>
+                    )}
+                </Card>
+            </div>
         </Flex>
     );
 }
diff --git a/app/styles/components/dify-dataset-manager/index.css b/app/styles/components/dify-dataset-manager/index.css
index 2238583..c3339c9 100644
--- a/app/styles/components/dify-dataset-manager/index.css
+++ b/app/styles/components/dify-dataset-manager/index.css
@@ -6,7 +6,7 @@
 .dataset-manager-wrapper {
     display: flex;
     flex-direction: column;
-    height: 100%;
+    height:90%;
     max-height: 100%;
     background: #fff;
     overflow: hidden;
@@ -26,13 +26,14 @@
 
 /* 左侧侧边栏 */
 .dataset-sidebar {
-    width: 200px;
-    min-width: 200px;
+    width: 26vh;
+    min-width: 11vh;
     background: #fafafa;
     border-right: 1px solid #f0f0f0;
     display: flex;
     flex-direction: column;
     overflow: hidden;
+    max-height: 90vh;
 }
 
 /* 返回按钮 */
@@ -229,6 +230,7 @@
 /* 右侧主内容区 */
 .dataset-main {
     flex: 1;
+    height: 85vh;
     min-width: 0;
     display: flex;
     flex-direction: column;
@@ -735,6 +737,7 @@
 
 /* 右侧预览面板 */
 .preview-panel {
+    height: 85vh;
     flex: 1;
     min-width: 0;
     background: #f5f5f5;
@@ -852,6 +855,11 @@
     display: flex;
     flex-direction: column;
     gap: 12px;
+    /* 关键修复：添加高度约束和内部滚动 */
+    height: 100%;
+    min-height: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
 }
 
 .segment-item {