leaudit-platform-frontend/app/components/dify-dataset-manager/sidebar.tsx

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>
    );
}