style：调整dify内嵌侧边栏、召回测试、预览块样式
This commit is contained in:
PingChuan
@@ -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>
|
||||
|
||||
@@ -577,7 +577,7 @@ export default function AreaDatasetConfig() {
|
||||
),
|
||||
value: ds.id,
|
||||
}))}
|
||||
dropdownStyle={{ maxHeight: '300px' }}
|
||||
styles={{ popup: { root: { maxHeight: '300px' } } }}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
|
||||
@@ -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}>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user