leaudit-platform-frontend/app/routes/chat-with-llm.dataset-manager.tsx

import { Spin } from 'antd';
import { useState, useEffect } from 'react';

/**
 * 知识库管理页面
 * 动态加载 DatasetManager 组件避免 SSR 问题
 */
export default function DatasetManagerPage() {
    const [DatasetManager, setDatasetManager] = useState<React.ComponentType | null>(null);
    const [mounted, setMounted] = useState(false);

    useEffect(() => {
        setMounted(true);
        // 只在客户端动态导入组件
        import("~/components/dify-dataset-manager").then((mod) => {
            setDatasetManager(() => mod.default);
        }).catch(err => {
            console.error('加载知识库管理组件失败:', err);
        });
    }, []);

    // 服务端渲染时显示简单加载状态
    if (!mounted) {
        return (
            <div style={{ padding: '40px', textAlign: 'center' }}>
                <div>加载中...</div>
            </div>
        );
    }

    // 客户端加载中
    if (!DatasetManager) {
        return (
            <div style={{ padding: '40px', textAlign: 'center' }}>
                <Spin size="large" />
                <p style={{ marginTop: 16 }}>正在加载知识库管理...</p>
            </div>
        );
    }

    return <DatasetManager />;
}