temp:临时备份,完成一半知识库管理模块

app/components/dify-dataset-manager/index.tsx

@@ -1,13 +1,19 @@
 import { useEffect, useState } from 'react';
 import { message, Spin } from 'antd';
+import DatasetLayout, { type MenuTab } from './layout';
 import DocumentList from './document-list';
-import type { Dataset, Document } from '~/api/dify-dataset';
-import { fetchDatasets, fetchDocuments } from '~/api/dify-dataset';
+import DocumentDetail from './document-detail';
+import RetrieveTest from './retrieve-test';
+import DatasetSettings from './dataset-settings';
+import type { Dataset } from '~/api/dify-dataset/type/datasetTypes';
+import type { Document } from '~/api/dify-dataset/type/documentTypes';
+import { fetchDatasets } from '~/api/dify-dataset/api/datasetApi';
+import { fetchDocuments } from '~/api/dify-dataset/api/documentApi';
 import '../../styles/components/dify-dataset-manager/index.css';
 
 /**
  * 知识库管理主组件
- * 简化版 - 假设只有一个知识库，直接显示文档列表
+ * 带左侧菜单栏的完整布局
  */
 export default function DatasetManager() {
     // 知识库状态
@@ -25,6 +31,12 @@ export default function DatasetManager() {
     const [inited, setInited] = useState(false);
     const [error, setError] = useState<string | null>(null);
 
+    // 菜单状态
+    const [activeTab, setActiveTab] = useState<MenuTab>('documents');
+
+    // 选中的文档（用于查看文档详情）
+    const [selectedDocument, setSelectedDocument] = useState<Document | null>(null);
+
     /**
      * 加载知识库（获取第一个知识库）
      */
@@ -123,6 +135,39 @@ export default function DatasetManager() {
         }
     };
 
+    /**
+     * 查看文档详情（分段管理）
+     */
+    const handleViewDocument = (doc: Document) => {
+        console.log('[DatasetManager] 查看文档详情:', doc);
+        setSelectedDocument(doc);
+    };
+
+    /**
+     * 返回文档列表
+     */
+    const handleBackToDocuments = () => {
+        setSelectedDocument(null);
+    };
+
+    /**
+     * 处理菜单切换
+     */
+    const handleTabChange = (tab: MenuTab) => {
+        setActiveTab(tab);
+        // 切换菜单时清除选中的文档
+        if (tab !== 'documents') {
+            setSelectedDocument(null);
+        }
+    };
+
+    /**
+     * 处理知识库更新
+     */
+    const handleDatasetUpdated = (updatedDataset: Dataset) => {
+        setDataset(updatedDataset);
+    };
+
     // 初始化
     useEffect(() => {
         loadDataset();
@@ -132,11 +177,9 @@ export default function DatasetManager() {
     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 className="dataset-loading-state">
+                    <Spin size="large" />
+                    <span className="loading-text">正在加载知识库...</span>
                 </div>
             </div>
         );
@@ -146,20 +189,32 @@ export default function DatasetManager() {
     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 className="dataset-error-state">
+                    <i className="ri-error-warning-line error-icon"></i>
+                    <h3>加载失败</h3>
+                    <p>{error}</p>
                 </div>
             </div>
         );
     }
 
-    return (
-        <div className="dataset-manager-wrapper">
-            <div className="dataset-manager-card">
+    /**
+     * 渲染右侧内容区
+     */
+    const renderContent = () => {
+        // 文档菜单
+        if (activeTab === 'documents') {
+            // 如果选中了文档，显示文档详情
+            if (selectedDocument) {
+                return (
+                    <DocumentDetail
+                        datasetId={dataset?.id || ''}
+                        document={selectedDocument}
+                    />
+                );
+            }
+            // 否则显示文档列表
+            return (
                 <DocumentList
                     datasetId={dataset?.id || ''}
                     datasetName={dataset?.name || ''}
@@ -172,8 +227,40 @@ export default function DatasetManager() {
                     onDocumentDeleted={handleDocumentDeleted}
                     onDocumentStatusChanged={handleDocumentStatusChanged}
                     onRefresh={handleRefresh}
+                    onViewDocument={handleViewDocument}
                 />
-            </div>
+            );
+        }
+
+        // 召回测试菜单
+        if (activeTab === 'retrieve') {
+            return <RetrieveTest datasetId={dataset?.id || ''} />;
+        }
+
+        // 设置菜单
+        if (activeTab === 'settings') {
+            return (
+                <DatasetSettings
+                    dataset={dataset}
+                    onDatasetUpdated={handleDatasetUpdated}
+                />
+            );
+        }
+
+        return null;
+    };
+
+    return (
+        <div className="dataset-manager-wrapper">
+            <DatasetLayout
+                dataset={dataset}
+                activeTab={activeTab}
+                onTabChange={handleTabChange}
+                showBackButton={activeTab === 'documents' && !!selectedDocument}
+                onBack={handleBackToDocuments}
+            >
+                {renderContent()}
+            </DatasetLayout>
         </div>
     );
 }