temp:临时备份,完成一半知识库管理模块

2025-12-01 12:33:53 +08:00
parent 754ec2c7b5
commit 0c1b81cfb2
25 changed files with 3564 additions and 560 deletions
@@ -0,0 +1,109 @@
+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>
+    );
+}