feat:前端新增初版知识库管理页面

2025-11-30 19:27:01 +08:00
parent 9614899171
commit c94cc00138
40 changed files with 3034 additions and 1024 deletions
@@ -0,0 +1,160 @@
+import { useState } from 'react';
+import { Button, Layout, Menu, theme, Input, Spin } from 'antd';
+import {
+    MenuFoldOutlined,
+    MenuUnfoldOutlined,
+    DatabaseOutlined,
+    SearchOutlined,
+    FileTextOutlined,
+} from '@ant-design/icons';
+import type { Dataset } from '~/api/dify-dataset';
+import '../../styles/components/dify-dataset-manager/sidebar.css';
+
+const { Sider } = Layout;
+
+interface DatasetSidebarProps {
+    collapsed: boolean;
+    onToggle: () => void;
+    datasets: Dataset[];
+    currentDatasetId: string;
+    onDatasetSelect: (datasetId: string) => void;
+    loading?: boolean;
+}
+
+/**
+ * 知识库侧边栏组件
+ */
+export default function DatasetSidebar({
+    collapsed,
+    onToggle,
+    datasets,
+    currentDatasetId,
+    onDatasetSelect,
+    loading = false,
+}: DatasetSidebarProps) {
+    const [searchValue, setSearchValue] = useState('');
+    const {
+        token: { colorBgContainer },
+    } = theme.useToken();
+
+    // 过滤知识库列表
+    const filteredDatasets = datasets.filter((ds) =>
+        ds.name.toLowerCase().includes(searchValue.toLowerCase())
+    );
+
+    // 生成菜单项
+    const menuItems = filteredDatasets.map((ds) => ({
+        key: ds.id,
+        icon: <DatabaseOutlined />,
+        label: (
+            <div className="dataset-info">
+                <span className="dataset-info-name" title={ds.name}>
+                    {ds.name}
+                </span>
+                {!collapsed && (
+                    <div className="dataset-info-meta">
+                        <span className="dataset-info-meta-item">
+                            <FileTextOutlined />
+                            {ds.document_count}
+                        </span>
+                    </div>
+                )}
+            </div>
+        ),
+    }));
+
+    return (
+        <Sider
+            trigger={null}
+            collapsible
+            collapsed={collapsed}
+            width={280}
+            collapsedWidth={60}
+            className="dataset-sidebar"
+            style={{
+                background: colorBgContainer,
+                borderRight: '1px solid #f0f0f0',
+                display: 'flex',
+                flexDirection: 'column',
+                height: '100%',
+            }}
+        >
+            {/* 侧边栏头部 */}
+            <div className="dataset-sidebar-header">
+                <div className="dataset-sidebar-title">
+                    <Button
+                        type="text"
+                        icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
+                        onClick={onToggle}
+                        style={{
+                            fontSize: '16px',
+                            width: 32,
+                            height: 32,
+                            color: 'rgb(0, 104, 74)',
+                        }}
+                    />
+                    {!collapsed && (
+                        <h3>知识库</h3>
+                    )}
+                </div>
+
+                {/* 搜索框 */}
+                {!collapsed && (
+                    <Input
+                        placeholder="搜索知识库..."
+                        prefix={<SearchOutlined />}
+                        value={searchValue}
+                        onChange={(e) => setSearchValue(e.target.value)}
+                        allowClear
+                    />
+                )}
+            </div>
+
+            {/* 知识库列表 */}
+            <div className="dataset-sidebar-list">
+                {loading ? (
+                    <div className="flex items-center justify-center py-8">
+                        <Spin size="small" />
+                    </div>
+                ) : (
+                    <>
+                        {!collapsed && filteredDatasets.length === 0 && searchValue && (
+                            <div className="p-4 text-center text-gray-500">
+                                <DatabaseOutlined className="text-2xl mb-2" />
+                                <p>未找到相关知识库</p>
+                            </div>
+                        )}
+
+                        {!collapsed && datasets.length === 0 && !searchValue && (
+                            <div className="p-4 text-center text-gray-500">
+                                <DatabaseOutlined className="text-2xl mb-2" />
+                                <p>暂无知识库</p>
+                            </div>
+                        )}
+
+                        <Menu
+                            mode="inline"
+                            selectedKeys={[currentDatasetId]}
+                            items={menuItems}
+                            onClick={({ key }) => onDatasetSelect(key)}
+                            style={{
+                                border: 'none',
+                                background: 'transparent',
+                            }}
+                            className="dataset-sidebar-menu"
+                        />
+                    </>
+                )}
+            </div>
+
+            {/* 侧边栏底部 */}
+            {!collapsed && datasets.length > 0 && (
+                <div className="dataset-sidebar-footer">
+                    <div className="stats-text">
+                        共 {datasets.length} 个知识库
+                    </div>
+                </div>
+            )}
+        </Sider>
+    );
+}