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

import {
    CloudUploadOutlined,
    DeleteOutlined,
    FileTextOutlined,
    ReloadOutlined,
    SearchOutlined,
    UnorderedListOutlined
} from '@ant-design/icons';
import {
    Button,
    Empty,
    Input,
    Popconfirm,
    Space,
    Spin,
    Switch,
    Table,
    Tag,
    Tooltip,
} from 'antd';
import type { ColumnsType } from 'antd/es/table';
import type { Document, IndexingStatus } from '~/api/dify-dataset/type/documentTypes';
import { useDocumentList } from '~/hooks/dify-dataset-manager/document-list';
import type { DocumentListProps } from '~/types/dify-dataset-manager/document-list';
import { usePermission } from '~/hooks/usePermission';
import '../../styles/components/dify-dataset-manager/index.css';
import DocumentUpload from './document-upload';

/**
 * 文档列表组件
 */
export default function DocumentList({
    datasetId,
    documents,
    loading,
    total,
    page,
    pageSize,
    onPageChange,
    onDocumentDeleted,
    onDocumentStatusChanged,
    onRefresh,
    onViewDocument,
    canEditDataset = true,
}: DocumentListProps) {
    const {
        searchValue,
        setSearchValue,
        deletingId,
        showUploadPage,
        getStatusConfig,
        formatDate,
        formatNumber,
        handleDelete,
        handleToggleStatus,
        handleUploadClick,
        handleUploadClose,
        handleUploadSuccess,
        filterDocuments,
    } = useDocumentList(datasetId, onDocumentDeleted, onDocumentStatusChanged, onRefresh);

    const { hasPermission } = usePermission();
    const canWrite = hasPermission('dify:document:manage') && canEditDataset;

    // 过滤文档
    const filteredDocuments = filterDocuments(documents);

    // 表格列定义
    const columns: ColumnsType<Document> = [
        {
            title: '文档名称',
            dataIndex: 'name',
            key: 'name',
            ellipsis: true,
            render: (name: string) => (
                <div className="flex items-center gap-2">
                    <FileTextOutlined className="text-gray-400" />
                    <span className="font-medium">{name}</span>
                </div>
            ),
        },
        {
            title: '状态',
            dataIndex: 'indexing_status',
            key: 'indexing_status',
            width: 120,
            render: (status: IndexingStatus) => {
                const config = getStatusConfig(status);
                return (
                    <Tag color={config.color} icon={config.icon}>
                        {config.text}
                    </Tag>
                );
            },
        },
        {
            title: '字数',
            dataIndex: 'word_count',
            key: 'word_count',
            width: 100,
            render: (count: number) => formatNumber(count),
        },
        {
            title: '命中次数',
            dataIndex: 'hit_count',
            key: 'hit_count',
            width: 100,
            render: (count: number) => formatNumber(count),
        },
        {
            title: '启用',
            dataIndex: 'enabled',
            key: 'enabled',
            width: 80,
            render: (enabled: boolean, record) => (
                <Switch
                    size="small"
                    checked={enabled}
                    disabled={!canWrite}
                    onChange={(checked) => handleToggleStatus(record.id, checked)}
                />
            ),
        },
        {
            title: '创建时间',
            dataIndex: 'created_at',
            key: 'created_at',
            width: 160,
            render: (timestamp: number) => formatDate(timestamp),
        },
        {
            title: '操作',
            key: 'action',
            width: 120,
            render: (_, record) => (
                <Space size="small">
                    <Tooltip title="分段设置">
                        <Button
                            type="text"
                            size="small"
                            icon={<UnorderedListOutlined />}
                            onClick={() => onViewDocument?.(record)}
                        />
                    </Tooltip>
                    {canWrite && (
                        <Popconfirm
                            title="确定要删除这个文档吗？"
                            description="删除后无法恢复"
                            onConfirm={() => handleDelete(record.id)}
                            okText="确定"
                            cancelText="取消"
                            okButtonProps={{ danger: true }}
                        >
                            <Tooltip title="删除">
                                <Button
                                    type="text"
                                    size="small"
                                    danger
                                    icon={<DeleteOutlined />}
                                    loading={deletingId === record.id}
                                />
                            </Tooltip>
                        </Popconfirm>
                    )}
                </Space>
            ),
        },
    ];

    return (
        <>
            {/* 上传页面 */}
            {showUploadPage ? (
                <DocumentUpload
                    datasetId={datasetId}
                    onClose={handleUploadClose}
                    onSuccess={handleUploadSuccess}
                />
            ) : (
                <div className="document-list-page">
                    {/* 页面头部 */}
                    <div className="page-header">
                        <div className="header-left">
                            <h1>文档</h1>
                        </div>
                        <div className="header-actions">
                            <Tooltip title="刷新">
                                <Button
                                    icon={<ReloadOutlined />}
                                    onClick={onRefresh}
                                    loading={loading}
                                />
                            </Tooltip>
                            {canWrite && (
                                <Button
                                    type="primary"
                                    icon={<CloudUploadOutlined />}
                                    onClick={handleUploadClick}
                                    disabled={!datasetId}
                                >
                                    添加文件
                                </Button>
                            )}
                        </div>
                    </div>

                    {/* 搜索栏 */}
                    <div className="document-search-bar">
                        <Input
                            placeholder="搜索文档..."
                            prefix={<SearchOutlined />}
                            value={searchValue}
                            onChange={(e) => setSearchValue(e.target.value)}
                            allowClear
                            style={{ width: 280 }}
                        />
                    </div>

                    {/* 文档表格 */}
                    <div className="document-table-wrapper">
                        {loading && documents.length === 0 ? (
                            <div className="loading-state">
                                <Spin size="large" />
                                <div className="loading-text">加载中...</div>
                            </div>
                        ) : filteredDocuments.length === 0 ? (
                            <div className="empty-state">
                                <Empty description={searchValue ? '未找到匹配的文档' : '暂无文档'}>
                                    {!searchValue && (
                                        <Button
                                            type="primary"
                                            icon={<CloudUploadOutlined />}
                                            onClick={handleUploadClick}
                                        >
                                            上传第一个文档
                                        </Button>
                                    )}
                                </Empty>
                            </div>
                        ) : (
                            <Table
                                className="document-table"
                                columns={columns}
                                dataSource={filteredDocuments}
                                rowKey="id"
                                loading={loading}
                                pagination={false}
                                size="small"
                                scroll={{ x: 'max-content' }}
                            />
                        )}
                    </div>

                    {/* 底部分页器 */}
                    {filteredDocuments.length > 0 && (
                        <div className="document-pagination">
                            <span className="pagination-total">共 {total} 条</span>
                            <div className="pagination-controls">
                                <Button
                                    size="small"
                                    disabled={page <= 1}
                                    onClick={() => onPageChange(page - 1)}
                                >
                                    上一页
                                </Button>
                                <span className="pagination-info">
                                    第 {page} 页 / 共 {Math.ceil(total / pageSize)} 页
                                </span>
                                <Button
                                    size="small"
                                    disabled={page >= Math.ceil(total / pageSize)}
                                    onClick={() => onPageChange(page + 1)}
                                >
                                    下一页
                                </Button>
                            </div>
                        </div>
                    )}
                </div>
            )}
        </>
    );
}