PingChuan
110 lines
3.6 KiB
TypeScript
110 lines
3.6 KiB
TypeScript
import { ReactNode } from 'react';
|
|
import { Button, Tooltip } from 'antd';
|
|
import {
|
|
FileTextOutlined,
|
|
SearchOutlined,
|
|
SettingOutlined,
|
|
ArrowLeftOutlined,
|
|
DatabaseOutlined,
|
|
} from '@ant-design/icons';
|
|
import type { Dataset } from '~/api/dify-dataset/type/datasetTypes';
|
|
|
|
/**
|
|
* 菜单项类型
|
|
*/
|
|
export type MenuTab = 'documents' | 'retrieve' | 'settings';
|
|
|
|
interface DatasetLayoutProps {
|
|
/** 知识库信息 */
|
|
dataset: Dataset | null;
|
|
/** 当前激活的菜单 */
|
|
activeTab: MenuTab;
|
|
/** 菜单切换回调 */
|
|
onTabChange: (tab: MenuTab) => void;
|
|
/** 是否显示返回按钮（在文档详情页时显示） */
|
|
showBackButton?: boolean;
|
|
/** 返回按钮点击回调 */
|
|
onBack?: () => void;
|
|
/** 子组件 */
|
|
children: ReactNode;
|
|
}
|
|
|
|
/**
|
|
* 知识库布局组件
|
|
* 包含左侧菜单栏和右侧内容区
|
|
*/
|
|
export default function DatasetLayout({
|
|
dataset,
|
|
activeTab,
|
|
onTabChange,
|
|
showBackButton = false,
|
|
onBack,
|
|
children,
|
|
}: DatasetLayoutProps) {
|
|
const menuItems: { key: MenuTab; icon: ReactNode; label: string }[] = [
|
|
{ key: 'documents', icon: <FileTextOutlined />, label: '文档' },
|
|
{ key: 'retrieve', icon: <SearchOutlined />, label: '召回测试' },
|
|
{ key: 'settings', icon: <SettingOutlined />, label: '设置' },
|
|
];
|
|
|
|
return (
|
|
<div className="dataset-layout">
|
|
{/* 左侧侧边栏 */}
|
|
<aside className="dataset-sidebar">
|
|
{/* 返回按钮 */}
|
|
{showBackButton && onBack && (
|
|
<div className="sidebar-back">
|
|
<Button
|
|
type="text"
|
|
icon={<ArrowLeftOutlined />}
|
|
onClick={onBack}
|
|
className="back-btn"
|
|
>
|
|
返回文档列表
|
|
</Button>
|
|
</div>
|
|
)}
|
|
|
|
{/* 知识库信息 */}
|
|
<div className="sidebar-header">
|
|
<div className="dataset-icon">
|
|
<DatabaseOutlined />
|
|
</div>
|
|
<div className="dataset-info">
|
|
<Tooltip title={dataset?.name} placement="right">
|
|
<h2 className="dataset-name">{dataset?.name || '知识库'}</h2>
|
|
</Tooltip>
|
|
<span className="dataset-type">本地文档</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 统计信息 */}
|
|
<div className="sidebar-stats">
|
|
<span className="stat-item">
|
|
{dataset?.document_count || 0} 个文档
|
|
</span>
|
|
</div>
|
|
|
|
{/* 导航菜单 */}
|
|
<nav className="sidebar-menu">
|
|
{menuItems.map((item) => (
|
|
<button
|
|
key={item.key}
|
|
className={`menu-item ${activeTab === item.key ? 'active' : ''}`}
|
|
onClick={() => onTabChange(item.key)}
|
|
>
|
|
<span className="menu-icon">{item.icon}</span>
|
|
<span className="menu-label">{item.label}</span>
|
|
</button>
|
|
))}
|
|
</nav>
|
|
</aside>
|
|
|
|
{/* 右侧内容区 */}
|
|
<main className="dataset-main">
|
|
{children}
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|