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

import { useEffect, useState } from 'react';
import { message, Spin } from 'antd';
import DocumentList from './document-list';
import type { Dataset, Document } from '~/api/dify-dataset';
import { fetchDatasets, fetchDocuments } from '~/api/dify-dataset';
import '../../styles/components/dify-dataset-manager/index.css';

/**
 * 知识库管理主组件
 * 简化版 - 假设只有一个知识库，直接显示文档列表
 */
export default function DatasetManager() {
    // 知识库状态
    const [dataset, setDataset] = useState<Dataset | null>(null);
    const [loadingDataset, setLoadingDataset] = useState(true);

    // 文档状态
    const [documents, setDocuments] = useState<Document[]>([]);
    const [loadingDocuments, setLoadingDocuments] = useState(false);
    const [documentTotal, setDocumentTotal] = useState(0);
    const [documentPage, setDocumentPage] = useState(1);
    const [documentPageSize] = useState(20);

    // 初始化状态
    const [inited, setInited] = useState(false);
    const [error, setError] = useState<string | null>(null);

    /**
     * 加载知识库（获取第一个知识库）
     */
    const loadDataset = async () => {
        setLoadingDataset(true);
        try {
            console.log('[DatasetManager] 加载知识库...');
            const response = await fetchDatasets(1, 1);
            console.log('[DatasetManager] 知识库响应:', response);

            if (response && response.data && response.data.length > 0) {
                const firstDataset = response.data[0];
                setDataset(firstDataset);
                // 立即加载文档
                await loadDocuments(firstDataset.id, 1);
            } else {
                setError('未找到知识库，请先在Dify中创建知识库');
            }
        } catch (err: any) {
            console.error('[DatasetManager] 加载知识库失败:', err);
            setError(err.message || '加载知识库失败');
            message.error('加载知识库失败');
        } finally {
            setLoadingDataset(false);
            setInited(true);
        }
    };

    /**
     * 加载文档列表
     */
    const loadDocuments = async (datasetId: string, page: number = 1) => {
        if (!datasetId) return;

        setLoadingDocuments(true);
        try {
            console.log('[DatasetManager] 加载文档列表:', { datasetId, page });
            const response = await fetchDocuments(datasetId, page, documentPageSize);
            console.log('[DatasetManager] 文档列表响应:', response);

            if (response && response.data) {
                setDocuments(response.data);
                setDocumentTotal(response.total);
                setDocumentPage(page);
            }
        } catch (err: any) {
            console.error('[DatasetManager] 加载文档列表失败:', err);
            message.error('加载文档列表失败');
        } finally {
            setLoadingDocuments(false);
        }
    };

    /**
     * 处理文档页码变化
     */
    const handlePageChange = (page: number) => {
        if (dataset) {
            loadDocuments(dataset.id, page);
        }
    };

    /**
     * 处理文档删除
     */
    const handleDocumentDeleted = (documentId: string) => {
        setDocuments((prev) => prev.filter((doc) => doc.id !== documentId));
        setDocumentTotal((prev) => prev - 1);

        // 更新知识库的文档数量
        if (dataset) {
            setDataset({
                ...dataset,
                document_count: dataset.document_count - 1
            });
        }
    };

    /**
     * 处理文档状态变化
     */
    const handleDocumentStatusChanged = (documentId: string, enabled: boolean) => {
        setDocuments((prev) =>
            prev.map((doc) =>
                doc.id === documentId ? { ...doc, enabled } : doc
            )
        );
    };

    /**
     * 刷新文档列表
     */
    const handleRefresh = () => {
        if (dataset) {
            loadDocuments(dataset.id, documentPage);
        }
    };

    // 初始化
    useEffect(() => {
        loadDataset();
    }, []);

    // 加载中状态
    if (!inited || loadingDataset) {
        return (
            <div className="dataset-manager-wrapper">
                <div className="dataset-manager-card">
                    <div className="dataset-loading-state">
                        <Spin size="large" />
                        <span className="loading-text">正在加载知识库...</span>
                    </div>
                </div>
            </div>
        );
    }

    // 错误状态
    if (error) {
        return (
            <div className="dataset-manager-wrapper">
                <div className="dataset-manager-card">
                    <div className="dataset-error-state">
                        <i className="ri-error-warning-line error-icon"></i>
                        <h3>加载失败</h3>
                        <p>{error}</p>
                    </div>
                </div>
            </div>
        );
    }

    return (
        <div className="dataset-manager-wrapper">
            <div className="dataset-manager-card">
                <DocumentList
                    datasetId={dataset?.id || ''}
                    datasetName={dataset?.name || ''}
                    documents={documents}
                    loading={loadingDocuments}
                    total={documentTotal}
                    page={documentPage}
                    pageSize={documentPageSize}
                    onPageChange={handlePageChange}
                    onDocumentDeleted={handleDocumentDeleted}
                    onDocumentStatusChanged={handleDocumentStatusChanged}
                    onRefresh={handleRefresh}
                />
            </div>
        </div>
    );
}