TanWenyan/leaudit-platform-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style：调整dify内嵌侧边栏、召回测试、预览块样式

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