feat:完成dify知识库文档基础CRUD模块

.env

@@ -1,10 +1,3 @@
-# APP ID
-NEXT_PUBLIC_APP_ID=http://nas.7bm.co:12980/app/46539478-3281-4e98-a445-6da9dc078e95/configuration
-# APP API key
-NEXT_PUBLIC_APP_KEY=app-N3su9tKyMMnqxt2EMgOkVof7
-# API url prefix
-NEXT_PUBLIC_API_URL=http://localhost:8000/dify
-
 # JWT Secret - 用于签名和验证前端JWT token
 # 生产环境请务必修改为强随机字符串（至少32个字符）
 JWT_SECRET=gdyc-super-secrets-jjwtt-key-change-this-in-production-20250721-from-login-callback

app/api/dify-chat/client.server.ts

@@ -1,13 +1,13 @@
 /**
- * Dify 服务端基础 API 模块
+ * Dify Chat 服务端 API 模块
  *
  * 提供 Node.js 服务端调用 FastAPI 后端的基础功能
- * 包括配置管理和基础请求函数
+ * Dify 的 API_KEY 和 APP_ID 由 FastAPI 后端管理，前端只负责转发请求
  *
  * 调用链路：
- * Remix Server → FastAPI /dify/* → Dify
+ * Remix Server → FastAPI /dify_chat/* → Dify
  *
- * @module api/dify/client.server
+ * @module api/dify-chat/client.server
  */
 
 import { API_BASE_URL } from '~/config/api-config';
@@ -17,45 +17,25 @@ import { API_BASE_URL } from '~/config/api-config';
 // ============================================================================
 
 /**
- * 获取环境变量的服务端函数
+ * Dify Chat API 代理地址
+ * 通过 FastAPI 后端的 /dify_chat 路由代理访问 Dify
+ * Dify 的认证（API_KEY）由 FastAPI 后端处理
  */
-const getServerEnvVar = (name: string, defaultValue: string = ''): string => {
+const DIFY_CHAT_API_URL = `${API_BASE_URL}/dify_chat`;
-    return process.env[name] || defaultValue;
-};
-
-/**
- * Dify API 客户端配置
- * 通过 FastAPI 后端的 /dify 路由代理访问 Dify
- */
-const DIFY_CONFIG = {
-    API_URL: `${API_BASE_URL}/dify_chat`,
-    API_KEY: getServerEnvVar('NEXT_PUBLIC_APP_KEY', ''),
-    APP_ID: (() => {
-        const rawAppId = getServerEnvVar('NEXT_PUBLIC_APP_ID', '');
-        const match = rawAppId.match(/\/app\/([a-f0-9-]{36})/);
-        return match ? match[1] : rawAppId;
-    })(),
-};
-
-console.log('[Dify Server] 配置:', {
-    apiUrl: DIFY_CONFIG.API_URL,
-    apiBaseUrl: API_BASE_URL,
-    appId: DIFY_CONFIG.APP_ID,
-    configComplete: !!(DIFY_CONFIG.API_URL && DIFY_CONFIG.APP_ID)
-});
 
 // ============================================================================
 // 基础请求函数
 // ============================================================================
 
 /**
- * Dify API 基础请求函数
+ * Dify Chat API 基础请求函数
  *
- * 使用 JWT 认证通过 FastAPI 代理访问 Dify
+ * 使用用户 JWT 认证通过 FastAPI 代理访问 Dify
+ * FastAPI 后端会验证 JWT 并添加 Dify API_KEY
  *
  * @param endpoint - API 端点路径
  * @param options - fetch 请求选项
- * @param jwt - JWT 认证令牌
+ * @param jwt - 用户 JWT 认证令牌
  * @returns Response 对象
  */
 export async function difyFetch(
@@ -63,7 +43,7 @@ export async function difyFetch(
     options: RequestInit = {},
     jwt?: string
 ): Promise<Response> {
-    const url = `${DIFY_CONFIG.API_URL}/${endpoint.replace(/^\//, '')}`;
+    const url = `${DIFY_CHAT_API_URL}/${endpoint.replace(/^\//, '')}`;
 
     const headers: HeadersInit = {
         'Content-Type': 'application/json',
@@ -73,7 +53,7 @@ export async function difyFetch(
     if (jwt) {
         (headers as Record<string, string>)['Authorization'] = `Bearer ${jwt}`;
     } else {
-        console.warn('[Dify Server] 没有提供 JWT，转发fastapi请求可能失败');
+        console.warn('[Dify Chat] 没有提供 JWT，FastAPI 请求可能失败');
     }
 
     const response = await fetch(url, {
@@ -83,7 +63,7 @@ export async function difyFetch(
 
     if (!response.ok) {
         const errorText = await response.text();
-        console.error('[Dify Server] API 转发错误:', {
+        console.error('[Dify Chat] API 转发错误:', {
             status: response.status,
             statusText: response.statusText,
             error: errorText
@@ -99,19 +79,5 @@ export async function difyFetch(
     return response;
 }
 
-// ============================================================================
-// 工具函数
-// ============================================================================
-
-/**
- * Dify 工具函数
- */
-export const difyUtils = {
-    /**
-     * 获取 Dify 配置
-     */
-    getConfig: () => DIFY_CONFIG,
-};
-
 // 重新导出 chat 模块的 difyClient
 export { difyClient } from './chat';

app/api/dify-dataset/client.server.ts

@@ -0,0 +1,84 @@
+/**
+ * Dify Dataset 服务端 API 模块
+ *
+ * 提供 Node.js 服务端调用 FastAPI 后端的基础功能
+ * Dify 的 DATASET_API_KEY 由 FastAPI 后端管理，前端只负责转发请求
+ *
+ * 调用链路：
+ * Remix Server → FastAPI /dify_dataset/* → Dify Knowledge API
+ *
+ * @module api/dify-dataset/client.server
+ */
+
+import { API_BASE_URL } from '~/config/api-config';
+
+// ============================================================================
+// 配置
+// ============================================================================
+
+/**
+ * Dify Dataset API 代理地址
+ * 通过 FastAPI 后端的 /dify_dataset 路由代理访问 Dify Knowledge API
+ * Dify 的认证（DATASET_API_KEY）由 FastAPI 后端处理
+ */
+const DIFY_DATASET_API_URL = `${API_BASE_URL}/dify_dataset`;
+
+// ============================================================================
+// 基础请求函数
+// ============================================================================
+
+/**
+ * Dify Dataset API 基础请求函数
+ *
+ * 使用用户 JWT 认证通过 FastAPI 代理访问 Dify Knowledge API
+ * FastAPI 后端会验证 JWT 并添加 Dify DATASET_API_KEY
+ *
+ * @param endpoint - API 端点路径
+ * @param options - fetch 请求选项
+ * @param jwt - 用户 JWT 认证令牌
+ * @returns Response 对象
+ */
+export async function difyDatasetFetch(
+    endpoint: string,
+    options: RequestInit = {},
+    jwt?: string
+): Promise<Response> {
+    const url = `${DIFY_DATASET_API_URL}/${endpoint.replace(/^\//, '')}`;
+
+    const headers: HeadersInit = {
+        ...options.headers,
+    };
+
+    // 如果不是 FormData，设置 Content-Type 为 JSON
+    if (!(options.body instanceof FormData)) {
+        (headers as Record<string, string>)['Content-Type'] = 'application/json';
+    }
+
+    if (jwt) {
+        (headers as Record<string, string>)['Authorization'] = `Bearer ${jwt}`;
+    } else {
+        console.warn('[Dify Dataset] 没有提供 JWT，FastAPI 请求可能失败');
+    }
+
+    const response = await fetch(url, {
+        ...options,
+        headers,
+    });
+
+    if (!response.ok) {
+        const errorText = await response.text();
+        console.error('[Dify Dataset] API 转发错误:', {
+            status: response.status,
+            statusText: response.statusText,
+            error: errorText
+        });
+
+        if (response.status === 401) {
+            throw new Error('JWT认证失败，请重新登录');
+        }
+
+        throw new Error(`Dify Dataset API Error: ${response.status} ${response.statusText}`);
+    }
+
+    return response;
+}

app/api/dify-dataset/client.ts

@@ -9,11 +9,15 @@
 
 import axios from 'axios';
 import type {
+    Dataset,
     DatasetsResponse,
     DocumentsResponse,
     SegmentsResponse,
     Document,
     OperationResult,
+    IndexingStatusResponse,
+    UploadFileInfo,
+    UpdateDatasetRequest,
 } from './types';
 
 // ============================================================================
@@ -59,14 +63,38 @@ export async function fetchDatasets(
  * @param datasetId - 知识库 ID
  * @returns 知识库详情
  */
-export async function fetchDataset(datasetId: string): Promise<any> {
+export async function fetchDataset(datasetId: string): Promise<Dataset> {
-    const response = await axios.get(
+    const response = await axios.get<Dataset>(
         `${API_URL}/datasets/${datasetId}`,
         { withCredentials: true }
     );
     return response.data;
 }
 
+/**
+ * 更新知识库详情
+ *
+ * @param datasetId - 知识库 ID
+ * @param data - 更新数据
+ * @returns 更新后的知识库详情
+ */
+export async function updateDataset(
+    datasetId: string,
+    data: UpdateDatasetRequest
+): Promise<Dataset> {
+    console.log('[Dataset Client] 更新知识库:', { datasetId, data });
+
+    const response = await axios.patch<Dataset>(
+        `${API_URL}/datasets/${datasetId}`,
+        data,
+        {
+            headers: { 'Content-Type': 'application/json' },
+            withCredentials: true,
+        }
+    );
+    return response.data;
+}
+
 // ============================================================================
 // 文档 API
 // ============================================================================
@@ -144,6 +172,8 @@ export async function deleteDocument(
 
 /**
  * 启用/禁用文档
+ * Dify API: PATCH /datasets/{dataset_id}/documents/status/{action}
+ * action: enable / disable / archive / un_archive
  *
  * @param datasetId - 知识库 ID
  * @param documentId - 文档 ID
@@ -155,11 +185,12 @@ export async function toggleDocumentStatus(
     documentId: string,
     enabled: boolean
 ): Promise<OperationResult> {
-    console.log('[Dataset Client] 切换文档状态:', { datasetId, documentId, enabled });
+    const action = enabled ? 'enable' : 'disable';
+    console.log('[Dataset Client] 切换文档状态:', { datasetId, documentId, action });
 
     const response = await axios.patch<OperationResult>(
-        `${API_URL}/datasets/${datasetId}/documents/${documentId}/status`,
+        `${API_URL}/datasets/${datasetId}/documents/status/${action}`,
-        { enabled },
+        { document_ids: [documentId] },
         {
             headers: { 'Content-Type': 'application/json' },
             withCredentials: true,
@@ -231,6 +262,8 @@ export async function deleteSegment(
 
 /**
  * 启用/禁用分段
+ * Dify API: POST /datasets/{dataset_id}/documents/{document_id}/segments/{segment_id}
+ * 通过更新分段的方式来切换状态
  *
  * @param datasetId - 知识库 ID
  * @param documentId - 文档 ID
@@ -244,9 +277,11 @@ export async function toggleSegmentStatus(
     segmentId: string,
     enabled: boolean
 ): Promise<OperationResult> {
-    const response = await axios.patch<OperationResult>(
+    console.log('[Dataset Client] 切换分段状态:', { datasetId, documentId, segmentId, enabled });
-        `${API_URL}/datasets/${datasetId}/documents/${documentId}/segments/${segmentId}/status`,
+
-        { enabled },
+    const response = await axios.post<OperationResult>(
+        `${API_URL}/datasets/${datasetId}/documents/${documentId}/segments/${segmentId}`,
+        { segment: { enabled } },
         {
             headers: { 'Content-Type': 'application/json' },
             withCredentials: true,
@@ -284,7 +319,7 @@ export async function uploadDocument(
     console.log('[Dataset Client] 上传文档:', { datasetId, fileName: file.name });
 
     const response = await axios.post(
-        `${API_URL}/datasets/${datasetId}/documents/create-by-file`,
+        `${API_URL}/datasets/${datasetId}/documents`,
         formData,
         {
             withCredentials: true,
@@ -298,3 +333,43 @@ export async function uploadDocument(
     );
     return response.data;
 }
+
+/**
+ * 获取文档嵌入状态（索引进度）
+ *
+ * @param datasetId - 知识库 ID
+ * @param batch - 上传文档的批次号
+ * @returns 索引状态列表
+ */
+export async function fetchIndexingStatus(
+    datasetId: string,
+    batch: string
+): Promise<IndexingStatusResponse> {
+    console.log('[Dataset Client] 获取索引状态:', { datasetId, batch });
+
+    const response = await axios.get<IndexingStatusResponse>(
+        `${API_URL}/datasets/${datasetId}/documents/${batch}/indexing-status`,
+        { withCredentials: true }
+    );
+    return response.data;
+}
+
+/**
+ * 获取文档上传文件信息
+ *
+ * @param datasetId - 知识库 ID
+ * @param documentId - 文档 ID
+ * @returns 上传文件信息
+ */
+export async function fetchUploadFileInfo(
+    datasetId: string,
+    documentId: string
+): Promise<UploadFileInfo> {
+    console.log('[Dataset Client] 获取上传文件信息:', { datasetId, documentId });
+
+    const response = await axios.get<UploadFileInfo>(
+        `${API_URL}/datasets/${datasetId}/documents/${documentId}/upload-file`,
+        { withCredentials: true }
+    );
+    return response.data;
+}

app/api/dify-dataset/index.ts

@@ -16,21 +16,32 @@ export type {
     OperationResult,
     CreateDocumentResponse,
     UploadProgress,
+    DocumentIndexingStatus,
+    IndexingStatusResponse,
+    UploadFileInfo,
+    RetrievalModel,
+    UpdateDatasetRequest,
 } from './types';
 
-// 客户端 API 导出
+// 客户端 API 导出（浏览器端使用 axios）
 export {
     // 知识库
     fetchDatasets,
     fetchDataset,
+    updateDataset,
     // 文档
     fetchDocuments,
     fetchDocument,
     deleteDocument,
     toggleDocumentStatus,
     uploadDocument,
+    fetchIndexingStatus,
+    fetchUploadFileInfo,
     // 分段
     fetchSegments,
     deleteSegment,
     toggleSegmentStatus,
 } from './client';
+
+// 服务端 API 请直接从 client.server.ts 导入
+// import { difyDatasetFetch } from '~/api/dify-dataset/client.server';

app/api/dify-dataset/types.ts

@@ -165,3 +165,86 @@ export interface UploadProgress {
     total: number;
     percent: number;
 }
+
+// ============================================================================
+// 索引状态类型
+// ============================================================================
+
+/**
+ * 单个文档的索引状态
+ */
+export interface DocumentIndexingStatus {
+    id: string;
+    indexing_status: IndexingStatus;
+    processing_started_at: number | null;
+    parsing_completed_at: number | null;
+    cleaning_completed_at: number | null;
+    splitting_completed_at: number | null;
+    completed_at: number | null;
+    paused_at: number | null;
+    error: string | null;
+    stopped_at: number | null;
+    completed_segments: number;
+    total_segments: number;
+}
+
+/**
+ * 批量文档索引状态响应
+ */
+export interface IndexingStatusResponse {
+    data: DocumentIndexingStatus[];
+}
+
+// ============================================================================
+// 上传文件信息类型
+// ============================================================================
+
+/**
+ * 上传文件信息
+ */
+export interface UploadFileInfo {
+    id: string;
+    name: string;
+    size: number;
+    extension: string;
+    url: string;
+    download_url: string;
+    mime_type: string;
+    created_by: string;
+    created_at: number;
+}
+
+// ============================================================================
+// 知识库更新类型
+// ============================================================================
+
+/**
+ * 检索模型配置
+ */
+export interface RetrievalModel {
+    search_method: 'keyword_search' | 'semantic_search' | 'full_text_search' | 'hybrid_search';
+    reranking_enable?: boolean;
+    reranking_mode?: string | null;
+    reranking_model?: {
+        reranking_provider_name: string;
+        reranking_model_name: string;
+    };
+    weights?: number | null;
+    top_k?: number;
+    score_threshold_enabled?: boolean;
+    score_threshold?: number | null;
+}
+
+/**
+ * 更新知识库请求参数
+ */
+export interface UpdateDatasetRequest {
+    name?: string;
+    description?: string;
+    indexing_technique?: 'high_quality' | 'economy';
+    permission?: 'only_me' | 'all_team_members' | 'partial_members';
+    embedding_model_provider?: string;
+    embedding_model?: string;
+    retrieval_model?: RetrievalModel;
+    partial_member_list?: string[];
+}

app/components/dify-dataset-manager/document-list.tsx

@@ -29,7 +29,7 @@ import {
 import type { ColumnsType } from 'antd/es/table';
 import type { Document, IndexingStatus } from '~/api/dify-dataset';
 import { deleteDocument, toggleDocumentStatus, uploadDocument } from '~/api/dify-dataset';
-import '../../styles/components/dify-dataset-manager/document-list.css';
+import '../../styles/components/dify-dataset-manager/index.css';
 
 interface DocumentListProps {
     datasetId: string;
@@ -275,10 +275,8 @@ export default function DocumentList({
     return (
         <div className="dataset-content">
             {/* 头部区域 */}
-            <div className="dataset-header" style={{ marginBottom: 16, padding: 0, height: 'auto', border: 'none' }}>
+            <div className="dataset-header">
-                <h1 style={{ margin: 0 }}>
+                <h1>{datasetName || '知识库文档'}</h1>
-                    {datasetName || '请选择知识库'}
-                </h1>
                 <div className="dataset-header-actions">
                     <Tooltip title="刷新">
                         <Button
@@ -315,58 +313,71 @@ export default function DocumentList({
                     onChange={(e) => setSearchValue(e.target.value)}
                     allowClear
                 />
-                <div className="document-list-actions">
-                    <span className="text-gray-500 text-sm">
-                        共 {total} 个文档
-                    </span>
-                </div>
             </div>
 
-            {/* 文档表格 */}
+            {/* 文档表格 - 固定表头和分页 */}
-            {!datasetId ? (
+            <div className="document-table-container">
-                <div className="dataset-empty">
+                {loading && documents.length === 0 ? (
-                    <Empty description="请先选择一个知识库" />
+                    <div className="dataset-loading">
+                        <Spin size="large" />
+                        <span className="text-gray-500">加载中...</span>
+                    </div>
+                ) : filteredDocuments.length === 0 ? (
+                    <div className="dataset-empty">
+                        <Empty
+                            description={searchValue ? '未找到匹配的文档' : '暂无文档'}
+                        >
+                            {!searchValue && (
+                                <Upload
+                                    beforeUpload={handleUpload}
+                                    showUploadList={false}
+                                    accept=".txt,.md,.pdf,.docx,.doc,.csv,.xlsx,.xls"
+                                >
+                                    <Button type="primary" icon={<CloudUploadOutlined />}>
+                                        上传第一个文档
+                                    </Button>
+                                </Upload>
+                            )}
+                        </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>
-            ) : loading && documents.length === 0 ? (
-                <div className="dataset-loading">
-                    <Spin size="large" />
-                    <span className="text-gray-500">加载中...</span>
-                </div>
-            ) : filteredDocuments.length === 0 ? (
-                <div className="dataset-empty">
-                    <Empty
-                        description={searchValue ? '未找到匹配的文档' : '暂无文档'}
-                    >
-                        {!searchValue && (
-                            <Upload
-                                beforeUpload={handleUpload}
-                                showUploadList={false}
-                                accept=".txt,.md,.pdf,.docx,.doc,.csv,.xlsx,.xls"
-                            >
-                                <Button type="primary" icon={<CloudUploadOutlined />}>
-                                    上传第一个文档
-                                </Button>
-                            </Upload>
-                        )}
-                    </Empty>
-                </div>
-            ) : (
-                <Table
-                    className="document-table"
-                    columns={columns}
-                    dataSource={filteredDocuments}
-                    rowKey="id"
-                    loading={loading}
-                    pagination={{
-                        current: page,
-                        pageSize: pageSize,
-                        total: total,
-                        onChange: onPageChange,
-                        showSizeChanger: false,
-                        showTotal: (total) => `共 ${total} 条`,
-                    }}
-                    size="middle"
-                />
             )}
         </div>
     );

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

@@ -1,30 +1,18 @@
-import { Layout, theme, message } from 'antd';
 import { useEffect, useState } from 'react';
-import DatasetSidebar from './sidebar';
+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';
 
-const { Content } = Layout;
-
 /**
  * 知识库管理主组件
+ * 简化版 - 假设只有一个知识库，直接显示文档列表
  */
 export default function DatasetManager() {
-    // 主题
-    const {
-        token: { colorBgContainer },
-    } = theme.useToken();
-
-    // 侧边栏状态
-    const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
-    const [isMobile, setIsMobile] = useState(false);
-
     // 知识库状态
-    const [datasets, setDatasets] = useState<Dataset[]>([]);
+    const [dataset, setDataset] = useState<Dataset | null>(null);
-    const [currentDatasetId, setCurrentDatasetId] = useState<string>('');
+    const [loadingDataset, setLoadingDataset] = useState(true);
-    const [loadingDatasets, setLoadingDatasets] = useState(true);
 
     // 文档状态
     const [documents, setDocuments] = useState<Document[]>([]);
@@ -38,29 +26,29 @@ export default function DatasetManager() {
     const [error, setError] = useState<string | null>(null);
 
     /**
-     * 加载知识库列表
+     * 加载知识库（获取第一个知识库）
      */
-    const loadDatasets = async () => {
+    const loadDataset = async () => {
-        setLoadingDatasets(true);
+        setLoadingDataset(true);
         try {
-            console.log('[DatasetManager] 加载知识库列表...');
+            console.log('[DatasetManager] 加载知识库...');
-            const response = await fetchDatasets(1, 100);
+            const response = await fetchDatasets(1, 1);
-            console.log('[DatasetManager] 知识库列表响应:', response);
+            console.log('[DatasetManager] 知识库响应:', response);
 
-            if (response && response.data) {
+            if (response && response.data && response.data.length > 0) {
-                setDatasets(response.data);
+                const firstDataset = response.data[0];
-
+                setDataset(firstDataset);
-                // 如果有知识库，默认选中第一个
+                // 立即加载文档
-                if (response.data.length > 0 && !currentDatasetId) {
+                await loadDocuments(firstDataset.id, 1);
-                    setCurrentDatasetId(response.data[0].id);
+            } else {
-                }
+                setError('未找到知识库，请先在Dify中创建知识库');
             }
         } catch (err: any) {
-            console.error('[DatasetManager] 加载知识库列表失败:', err);
+            console.error('[DatasetManager] 加载知识库失败:', err);
-            setError(err.message || '加载知识库列表失败');
+            setError(err.message || '加载知识库失败');
-            message.error('加载知识库列表失败');
+            message.error('加载知识库失败');
         } finally {
-            setLoadingDatasets(false);
+            setLoadingDataset(false);
             setInited(true);
         }
     };
@@ -90,21 +78,13 @@ export default function DatasetManager() {
         }
     };
 
-    /**
-     * 处理知识库选择
-     */
-    const handleDatasetSelect = (datasetId: string) => {
-        if (datasetId !== currentDatasetId) {
-            setCurrentDatasetId(datasetId);
-            setDocumentPage(1);
-        }
-    };
-
     /**
      * 处理文档页码变化
      */
     const handlePageChange = (page: number) => {
-        loadDocuments(currentDatasetId, page);
+        if (dataset) {
+            loadDocuments(dataset.id, page);
+        }
     };
 
     /**
@@ -115,13 +95,12 @@ export default function DatasetManager() {
         setDocumentTotal((prev) => prev - 1);
 
         // 更新知识库的文档数量
-        setDatasets((prev) =>
+        if (dataset) {
-            prev.map((ds) =>
+            setDataset({
-                ds.id === currentDatasetId
+                ...dataset,
-                    ? { ...ds, document_count: ds.document_count - 1 }
+                document_count: dataset.document_count - 1
-                    : ds
+            });
-            )
+        }
-        );
     };
 
     /**
@@ -139,103 +118,62 @@ export default function DatasetManager() {
      * 刷新文档列表
      */
     const handleRefresh = () => {
-        loadDocuments(currentDatasetId, documentPage);
+        if (dataset) {
-    };
+            loadDocuments(dataset.id, documentPage);
-
+        }
-    /**
-     * 处理侧边栏切换
-     */
-    const handleSidebarToggle = () => {
-        setSidebarCollapsed(!sidebarCollapsed);
     };
 
     // 初始化
     useEffect(() => {
-        loadDatasets();
+        loadDataset();
     }, []);
 
-    // 当选中的知识库变化时，加载文档列表
+    // 加载中状态
-    useEffect(() => {
+    if (!inited || loadingDataset) {
-        if (currentDatasetId) {
-            loadDocuments(currentDatasetId, 1);
-        }
-    }, [currentDatasetId]);
-
-    // 检查屏幕尺寸
-    useEffect(() => {
-        const checkScreenSize = () => {
-            setIsMobile(window.innerWidth < 992);
-        };
-
-        checkScreenSize();
-        window.addEventListener('resize', checkScreenSize);
-
-        return () => {
-            window.removeEventListener('resize', checkScreenSize);
-        };
-    }, []);
-
-    // 获取当前选中的知识库
-    const currentDataset = datasets.find((ds) => ds.id === currentDatasetId);
-
-    // 如果有错误，显示错误页面
-    if (error && !inited) {
         return (
-            <div className="dataset-manager-container">
+            <div className="dataset-manager-wrapper">
-                <div className="dataset-empty">
+                <div className="dataset-manager-card">
-                    <h3>加载失败</h3>
+                    <div className="dataset-loading-state">
-                    <p>{error}</p>
+                        <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 (
-        <Layout style={{ height: '100%', display: 'flex', flexDirection: 'row' }}>
+        <div className="dataset-manager-wrapper">
-            {/* 移动端遮罩层 */}
+            <div className="dataset-manager-card">
-            {!sidebarCollapsed && isMobile && (
+                <DocumentList
-                <div
+                    datasetId={dataset?.id || ''}
-                    className="fixed inset-0 bg-black bg-opacity-50 z-[999]"
+                    datasetName={dataset?.name || ''}
-                    onClick={handleSidebarToggle}
+                    documents={documents}
+                    loading={loadingDocuments}
+                    total={documentTotal}
+                    page={documentPage}
+                    pageSize={documentPageSize}
+                    onPageChange={handlePageChange}
+                    onDocumentDeleted={handleDocumentDeleted}
+                    onDocumentStatusChanged={handleDocumentStatusChanged}
+                    onRefresh={handleRefresh}
                 />
-            )}
+            </div>
-
+        </div>
-            {/* 侧边栏 */}
-            <DatasetSidebar
-                collapsed={sidebarCollapsed}
-                onToggle={handleSidebarToggle}
-                datasets={datasets}
-                currentDatasetId={currentDatasetId}
-                onDatasetSelect={handleDatasetSelect}
-                loading={loadingDatasets}
-            />
-
-            {/* 主内容区域 */}
-            <Layout style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
-                <Content
-                    style={{
-                        background: colorBgContainer,
-                        display: 'flex',
-                        flexDirection: 'column',
-                        flex: 1,
-                        minHeight: 0,
-                    }}
-                >
-                    <DocumentList
-                        datasetId={currentDatasetId}
-                        datasetName={currentDataset?.name || ''}
-                        documents={documents}
-                        loading={loadingDocuments}
-                        total={documentTotal}
-                        page={documentPage}
-                        pageSize={documentPageSize}
-                        onPageChange={handlePageChange}
-                        onDocumentDeleted={handleDocumentDeleted}
-                        onDocumentStatusChanged={handleDocumentStatusChanged}
-                        onRefresh={handleRefresh}
-                    />
-                </Content>
-            </Layout>
-        </Layout>
     );
 }

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

@@ -1,160 +0,0 @@
-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>
-    );
-}

app/routes/api.dataset.datasets.$datasetId.documents.$batch.indexing-status.tsx

@@ -0,0 +1,74 @@
+import { type LoaderFunctionArgs } from '@remix-run/node';
+import { API_BASE_URL } from '~/config/api-config';
+
+/**
+ * GET /api/dataset/datasets/:datasetId/documents/:batch/indexing-status
+ * 获取文档嵌入状态（处理进度）
+ *
+ * Dify API: GET /datasets/{dataset_id}/documents/{batch}/indexing-status
+ *
+ * 返回示例:
+ * {
+ *   "data": [{
+ *     "id": "",
+ *     "indexing_status": "indexing",
+ *     "processing_started_at": 1681623462.0,
+ *     "parsing_completed_at": 1681623462.0,
+ *     "cleaning_completed_at": 1681623462.0,
+ *     "splitting_completed_at": 1681623462.0,
+ *     "completed_at": null,
+ *     "paused_at": null,
+ *     "error": null,
+ *     "stopped_at": null,
+ *     "completed_segments": 24,
+ *     "total_segments": 100
+ *   }]
+ * }
+ */
+export async function loader({ request, params }: LoaderFunctionArgs) {
+    try {
+        const { getUserSession } = await import("~/api/login/auth.server");
+        const { frontendJWT } = await getUserSession(request);
+
+        if (!frontendJWT) {
+            return new Response(
+                JSON.stringify({ error: 'JWT认证失败，请重新登录' }),
+                { status: 401, headers: { 'Content-Type': 'application/json' } }
+            );
+        }
+
+        const { datasetId, batch } = params;
+        if (!datasetId || !batch) {
+            return new Response(
+                JSON.stringify({ error: '缺少必要参数 (datasetId, batch)' }),
+                { status: 400, headers: { 'Content-Type': 'application/json' } }
+            );
+        }
+
+        console.log('[API] Indexing Status:', { datasetId, batch });
+
+        // 转发请求到 FastAPI -> Dify API
+        const apiUrl = `${API_BASE_URL}/dify_dataset/datasets/${datasetId}/documents/${batch}/indexing-status`;
+        const response = await fetch(apiUrl, {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${frontendJWT}`,
+            },
+        });
+
+        const data = await response.json();
+
+        return new Response(JSON.stringify(data), {
+            status: response.status,
+            headers: { 'Content-Type': 'application/json' },
+        });
+
+    } catch (error: any) {
+        console.error('[API] Indexing Status - Error:', error.message);
+        return new Response(
+            JSON.stringify({ error: error.message || 'Failed to get indexing status' }),
+            { status: 500, headers: { 'Content-Type': 'application/json' } }
+        );
+    }
+}

app/routes/api.dataset.datasets.$datasetId.documents.$documentId.segments.$segmentId.tsx

@@ -0,0 +1,143 @@
+import { type LoaderFunctionArgs, type ActionFunctionArgs } from '@remix-run/node';
+import { API_BASE_URL } from '~/config/api-config';
+
+/**
+ * GET /api/dataset/datasets/:datasetId/documents/:documentId/segments/:segmentId - 获取分段详情
+ * Dify API: GET /datasets/{dataset_id}/documents/{document_id}/segments/{segment_id}
+ */
+export async function loader({ request, params }: LoaderFunctionArgs) {
+    try {
+        const { getUserSession } = await import("~/api/login/auth.server");
+        const { frontendJWT } = await getUserSession(request);
+
+        if (!frontendJWT) {
+            return new Response(
+                JSON.stringify({ error: 'JWT认证失败，请重新登录' }),
+                { status: 401, headers: { 'Content-Type': 'application/json' } }
+            );
+        }
+
+        const { datasetId, documentId, segmentId } = params;
+        if (!datasetId || !documentId || !segmentId) {
+            return new Response(
+                JSON.stringify({ error: '缺少必要参数' }),
+                { status: 400, headers: { 'Content-Type': 'application/json' } }
+            );
+        }
+
+        console.log('[API] Segment Detail:', { datasetId, documentId, segmentId });
+
+        // 转发请求到 FastAPI -> Dify API
+        const apiUrl = `${API_BASE_URL}/dify_dataset/datasets/${datasetId}/documents/${documentId}/segments/${segmentId}`;
+        const response = await fetch(apiUrl, {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${frontendJWT}`,
+            },
+        });
+
+        const data = await response.json();
+
+        return new Response(JSON.stringify(data), {
+            status: response.status,
+            headers: { 'Content-Type': 'application/json' },
+        });
+
+    } catch (error: any) {
+        console.error('[API] Segment Detail - Error:', error.message);
+        return new Response(
+            JSON.stringify({ error: error.message || 'Failed to get segment' }),
+            { status: 500, headers: { 'Content-Type': 'application/json' } }
+        );
+    }
+}
+
+/**
+ * DELETE /api/dataset/datasets/:datasetId/documents/:documentId/segments/:segmentId - 删除分段
+ * POST - 更新分段 (Dify用POST更新分段，可传enabled参数切换状态)
+ * Dify API: DELETE/POST /datasets/{dataset_id}/documents/{document_id}/segments/{segment_id}
+ */
+export async function action({ request, params }: ActionFunctionArgs) {
+    try {
+        const { getUserSession } = await import("~/api/login/auth.server");
+        const { frontendJWT } = await getUserSession(request);
+
+        if (!frontendJWT) {
+            return new Response(
+                JSON.stringify({ error: 'JWT认证失败，请重新登录' }),
+                { status: 401, headers: { 'Content-Type': 'application/json' } }
+            );
+        }
+
+        const { datasetId, documentId, segmentId } = params;
+        if (!datasetId || !documentId || !segmentId) {
+            return new Response(
+                JSON.stringify({ error: '缺少必要参数' }),
+                { status: 400, headers: { 'Content-Type': 'application/json' } }
+            );
+        }
+
+        const method = request.method;
+        const apiUrl = `${API_BASE_URL}/dify_dataset/datasets/${datasetId}/documents/${documentId}/segments/${segmentId}`;
+
+        if (method === 'DELETE') {
+            console.log('[API] Delete Segment:', { datasetId, documentId, segmentId });
+
+            const response = await fetch(apiUrl, {
+                method: 'DELETE',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${frontendJWT}`,
+                },
+            });
+
+            // Dify删除分段返回 204 No Content
+            if (response.status === 204) {
+                return new Response(
+                    JSON.stringify({ result: 'success' }),
+                    { status: 200, headers: { 'Content-Type': 'application/json' } }
+                );
+            }
+
+            const data = await response.json();
+            return new Response(JSON.stringify(data), {
+                status: response.status,
+                headers: { 'Content-Type': 'application/json' },
+            });
+        }
+
+        if (method === 'POST') {
+            // POST 用于更新分段（包括启用/禁用）
+            const body = await request.json();
+            console.log('[API] Update Segment:', { datasetId, documentId, segmentId, body });
+
+            const response = await fetch(apiUrl, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${frontendJWT}`,
+                },
+                body: JSON.stringify(body),
+            });
+
+            const data = await response.json();
+            return new Response(JSON.stringify(data), {
+                status: response.status,
+                headers: { 'Content-Type': 'application/json' },
+            });
+        }
+
+        return new Response(
+            JSON.stringify({ error: 'Method not allowed' }),
+            { status: 405, headers: { 'Content-Type': 'application/json' } }
+        );
+
+    } catch (error: any) {
+        console.error('[API] Segment Action - Error:', error.message);
+        return new Response(
+            JSON.stringify({ error: error.message || 'Failed to process segment request' }),
+            { status: 500, headers: { 'Content-Type': 'application/json' } }
+        );
+    }
+}

app/routes/api.dataset.datasets.$datasetId.documents.$documentId.segments.tsx

@@ -0,0 +1,66 @@
+import { type LoaderFunctionArgs } from '@remix-run/node';
+import { API_BASE_URL } from '~/config/api-config';
+
+/**
+ * GET /api/dataset/datasets/:datasetId/documents/:documentId/segments - 获取分段列表
+ * Dify API: GET /datasets/{dataset_id}/documents/{document_id}/segments
+ */
+export async function loader({ request, params }: LoaderFunctionArgs) {
+    try {
+        const { getUserSession } = await import("~/api/login/auth.server");
+        const { frontendJWT } = await getUserSession(request);
+
+        if (!frontendJWT) {
+            return new Response(
+                JSON.stringify({ error: 'JWT认证失败，请重新登录' }),
+                { status: 401, headers: { 'Content-Type': 'application/json' } }
+            );
+        }
+
+        const { datasetId, documentId } = params;
+        if (!datasetId || !documentId) {
+            return new Response(
+                JSON.stringify({ error: '缺少必要参数' }),
+                { status: 400, headers: { 'Content-Type': 'application/json' } }
+            );
+        }
+
+        // 获取查询参数
+        const url = new URL(request.url);
+        const page = url.searchParams.get('page') || '1';
+        const limit = url.searchParams.get('limit') || '20';
+        const keyword = url.searchParams.get('keyword') || '';
+        const status = url.searchParams.get('status') || '';
+
+        console.log('[API] Segments List:', { datasetId, documentId, page, limit, keyword, status });
+
+        // 构建查询参数
+        const queryParams = new URLSearchParams({ page, limit });
+        if (keyword) queryParams.append('keyword', keyword);
+        if (status) queryParams.append('status', status);
+
+        // 转发请求到 FastAPI -> Dify API
+        const apiUrl = `${API_BASE_URL}/dify_dataset/datasets/${datasetId}/documents/${documentId}/segments?${queryParams}`;
+        const response = await fetch(apiUrl, {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${frontendJWT}`,
+            },
+        });
+
+        const data = await response.json();
+
+        return new Response(JSON.stringify(data), {
+            status: response.status,
+            headers: { 'Content-Type': 'application/json' },
+        });
+
+    } catch (error: any) {
+        console.error('[API] Segments List - Error:', error.message);
+        return new Response(
+            JSON.stringify({ error: error.message || 'Failed to get segments' }),
+            { status: 500, headers: { 'Content-Type': 'application/json' } }
+        );
+    }
+}

app/routes/api.dataset.datasets.$datasetId.documents.$documentId.tsx

@@ -26,7 +26,7 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
 
         console.log('[API] Document Detail:', { datasetId, documentId });
 
-        const apiUrl = `${API_BASE_URL}/dify-dataset/datasets/${datasetId}/documents/${documentId}`;
+        const apiUrl = `${API_BASE_URL}/dify_dataset/datasets/${datasetId}/documents/${documentId}`;
         const response = await fetch(apiUrl, {
             method: 'GET',
             headers: {
@@ -79,7 +79,7 @@ export async function action({ request, params }: ActionFunctionArgs) {
         if (method === 'DELETE') {
             console.log('[API] Delete Document:', { datasetId, documentId });
 
-            const apiUrl = `${API_BASE_URL}/dify-dataset/datasets/${datasetId}/documents/${documentId}`;
+            const apiUrl = `${API_BASE_URL}/dify_dataset/datasets/${datasetId}/documents/${documentId}`;
             const response = await fetch(apiUrl, {
                 method: 'DELETE',
                 headers: {

app/routes/api.dataset.datasets.$datasetId.documents.$documentId.upload-file.tsx

@@ -1,10 +1,26 @@
-import { type ActionFunctionArgs } from '@remix-run/node';
+import { type LoaderFunctionArgs } from '@remix-run/node';
 import { API_BASE_URL } from '~/config/api-config';
 
 /**
- * PATCH /api/dataset/datasets/:datasetId/documents/:documentId/status - 切换文档状态
+ * GET /api/dataset/datasets/:datasetId/documents/:documentId/upload-file
+ * 获取文档上传文件信息
+ *
+ * Dify API: GET /datasets/{dataset_id}/documents/{document_id}/upload-file
+ *
+ * 返回示例:
+ * {
+ *   "id": "file_id",
+ *   "name": "file_name",
+ *   "size": 1024,
+ *   "extension": "txt",
+ *   "url": "preview_url",
+ *   "download_url": "download_url",
+ *   "mime_type": "text/plain",
+ *   "created_by": "user_id",
+ *   "created_at": 1728734540
+ * }
  */
-export async function action({ request, params }: ActionFunctionArgs) {
+export async function loader({ request, params }: LoaderFunctionArgs) {
     try {
         const { getUserSession } = await import("~/api/login/auth.server");
         const { frontendJWT } = await getUserSession(request);
@@ -19,24 +35,21 @@ export async function action({ request, params }: ActionFunctionArgs) {
         const { datasetId, documentId } = params;
         if (!datasetId || !documentId) {
             return new Response(
-                JSON.stringify({ error: '缺少必要参数' }),
+                JSON.stringify({ error: '缺少必要参数 (datasetId, documentId)' }),
                 { status: 400, headers: { 'Content-Type': 'application/json' } }
             );
         }
 
-        const body = await request.json();
+        console.log('[API] Upload File Info:', { datasetId, documentId });
-        const { enabled } = body;
 
-        console.log('[API] Toggle Document Status:', { datasetId, documentId, enabled });
+        // 转发请求到 FastAPI -> Dify API
-
+        const apiUrl = `${API_BASE_URL}/dify_dataset/datasets/${datasetId}/documents/${documentId}/upload-file`;
-        const apiUrl = `${API_BASE_URL}/dify-dataset/datasets/${datasetId}/documents/${documentId}/status`;
         const response = await fetch(apiUrl, {
-            method: 'PATCH',
+            method: 'GET',
             headers: {
                 'Content-Type': 'application/json',
                 'Authorization': `Bearer ${frontendJWT}`,
             },
-            body: JSON.stringify({ enabled }),
         });
 
         const data = await response.json();
@@ -47,9 +60,9 @@ export async function action({ request, params }: ActionFunctionArgs) {
         });
 
     } catch (error: any) {
-        console.error('[API] Toggle Document Status - Error:', error.message);
+        console.error('[API] Upload File Info - Error:', error.message);
         return new Response(
-            JSON.stringify({ error: error.message || 'Failed to toggle status' }),
+            JSON.stringify({ error: error.message || 'Failed to get upload file info' }),
             { status: 500, headers: { 'Content-Type': 'application/json' } }
         );
     }

app/routes/api.dataset.datasets.$datasetId.documents.status.$action.tsx

@@ -0,0 +1,75 @@
+import { type ActionFunctionArgs } from '@remix-run/node';
+import { API_BASE_URL } from '~/config/api-config';
+
+/**
+ * PATCH /api/dataset/datasets/:datasetId/documents/status/:action - 批量更新文档状态
+ * Dify API: PATCH /datasets/{dataset_id}/documents/status/{action}
+ * action: enable / disable / archive / un_archive
+ */
+export async function action({ request, params }: ActionFunctionArgs) {
+    try {
+        const { getUserSession } = await import("~/api/login/auth.server");
+        const { frontendJWT } = await getUserSession(request);
+
+        if (!frontendJWT) {
+            return new Response(
+                JSON.stringify({ error: 'JWT认证失败，请重新登录' }),
+                { status: 401, headers: { 'Content-Type': 'application/json' } }
+            );
+        }
+
+        const { datasetId, action: statusAction } = params;
+        if (!datasetId || !statusAction) {
+            return new Response(
+                JSON.stringify({ error: '缺少必要参数' }),
+                { status: 400, headers: { 'Content-Type': 'application/json' } }
+            );
+        }
+
+        // 验证action参数
+        const validActions = ['enable', 'disable', 'archive', 'un_archive'];
+        if (!validActions.includes(statusAction)) {
+            return new Response(
+                JSON.stringify({ error: `无效的action参数，有效值: ${validActions.join(', ')}` }),
+                { status: 400, headers: { 'Content-Type': 'application/json' } }
+            );
+        }
+
+        const body = await request.json();
+        const { document_ids } = body;
+
+        if (!document_ids || !Array.isArray(document_ids) || document_ids.length === 0) {
+            return new Response(
+                JSON.stringify({ error: '缺少 document_ids 参数' }),
+                { status: 400, headers: { 'Content-Type': 'application/json' } }
+            );
+        }
+
+        console.log('[API] Update Documents Status:', { datasetId, action: statusAction, document_ids });
+
+        // 转发请求到 FastAPI -> Dify API
+        const apiUrl = `${API_BASE_URL}/dify_dataset/datasets/${datasetId}/documents/status/${statusAction}`;
+        const response = await fetch(apiUrl, {
+            method: 'PATCH',
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${frontendJWT}`,
+            },
+            body: JSON.stringify({ document_ids }),
+        });
+
+        const data = await response.json();
+
+        return new Response(JSON.stringify(data), {
+            status: response.status,
+            headers: { 'Content-Type': 'application/json' },
+        });
+
+    } catch (error: any) {
+        console.error('[API] Update Documents Status - Error:', error.message);
+        return new Response(
+            JSON.stringify({ error: error.message || 'Failed to update documents status' }),
+            { status: 500, headers: { 'Content-Type': 'application/json' } }
+        );
+    }
+}

app/routes/api.dataset.datasets.$datasetId.documents.tsx

@@ -38,7 +38,7 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
         if (keyword) queryParams.append('keyword', keyword);
 
         // 转发请求到 FastAPI
-        const apiUrl = `${API_BASE_URL}/dify-dataset/datasets/${datasetId}/documents?${queryParams}`;
+        const apiUrl = `${API_BASE_URL}/dify_dataset/datasets/${datasetId}/documents?${queryParams}`;
         const response = await fetch(apiUrl, {
             method: 'GET',
             headers: {
@@ -92,8 +92,8 @@ export async function action({ request, params }: ActionFunctionArgs) {
 
         console.log('[API] Upload Document:', { datasetId });
 
-        // 转发请求到 FastAPI
+        // 转发请求到 FastAPI (注意：Dify API是 /document/create-by-file，document是单数)
-        const apiUrl = `${API_BASE_URL}/dify-dataset/datasets/${datasetId}/documents/create-by-file`;
+        const apiUrl = `${API_BASE_URL}/dify_dataset/datasets/${datasetId}/document/create-by-file`;
         const response = await fetch(apiUrl, {
             method: 'POST',
             headers: {

app/routes/api.dataset.datasets.$datasetId.tsx

@@ -0,0 +1,135 @@
+import { type LoaderFunctionArgs, type ActionFunctionArgs } from '@remix-run/node';
+import { API_BASE_URL } from '~/config/api-config';
+
+/**
+ * GET /api/dataset/datasets/:datasetId - 获取知识库详情
+ * Dify API: GET /datasets/{dataset_id}
+ */
+export async function loader({ request, params }: LoaderFunctionArgs) {
+    try {
+        const { getUserSession } = await import("~/api/login/auth.server");
+        const { frontendJWT } = await getUserSession(request);
+
+        if (!frontendJWT) {
+            return new Response(
+                JSON.stringify({ error: 'JWT认证失败，请重新登录' }),
+                { status: 401, headers: { 'Content-Type': 'application/json' } }
+            );
+        }
+
+        const { datasetId } = params;
+        if (!datasetId) {
+            return new Response(
+                JSON.stringify({ error: '缺少 datasetId 参数' }),
+                { status: 400, headers: { 'Content-Type': 'application/json' } }
+            );
+        }
+
+        console.log('[API] Dataset Detail:', { datasetId });
+
+        // 转发请求到 FastAPI -> Dify API
+        const apiUrl = `${API_BASE_URL}/dify_dataset/datasets/${datasetId}`;
+        const response = await fetch(apiUrl, {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${frontendJWT}`,
+            },
+        });
+
+        const data = await response.json();
+
+        return new Response(JSON.stringify(data), {
+            status: response.status,
+            headers: { 'Content-Type': 'application/json' },
+        });
+
+    } catch (error: any) {
+        console.error('[API] Dataset Detail - Error:', error.message);
+        return new Response(
+            JSON.stringify({ error: error.message || 'Failed to get dataset' }),
+            { status: 500, headers: { 'Content-Type': 'application/json' } }
+        );
+    }
+}
+
+/**
+ * PATCH /api/dataset/datasets/:datasetId - 修改知识库详情
+ *
+ * Dify API: PATCH /datasets/{dataset_id}
+ *
+ * 请求体示例:
+ * {
+ *   "name": "知识库名称",
+ *   "description": "描述",
+ *   "indexing_technique": "high_quality",
+ *   "permission": "only_me",
+ *   "embedding_model_provider": "zhipuai",
+ *   "embedding_model": "embedding-3",
+ *   "retrieval_model": {
+ *     "search_method": "semantic_search",
+ *     "reranking_enable": false,
+ *     "top_k": 2,
+ *     "score_threshold_enabled": false
+ *   }
+ * }
+ *
+ * 注意：删除知识库功能不对外开放
+ */
+export async function action({ request, params }: ActionFunctionArgs) {
+    try {
+        const { getUserSession } = await import("~/api/login/auth.server");
+        const { frontendJWT } = await getUserSession(request);
+
+        if (!frontendJWT) {
+            return new Response(
+                JSON.stringify({ error: 'JWT认证失败，请重新登录' }),
+                { status: 401, headers: { 'Content-Type': 'application/json' } }
+            );
+        }
+
+        const { datasetId } = params;
+        if (!datasetId) {
+            return new Response(
+                JSON.stringify({ error: '缺少 datasetId 参数' }),
+                { status: 400, headers: { 'Content-Type': 'application/json' } }
+            );
+        }
+
+        const method = request.method;
+
+        if (method === 'PATCH') {
+            // 修改知识库详情
+            const body = await request.json();
+            console.log('[API] Update Dataset:', { datasetId, body });
+
+            const apiUrl = `${API_BASE_URL}/dify_dataset/datasets/${datasetId}`;
+            const response = await fetch(apiUrl, {
+                method: 'PATCH',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${frontendJWT}`,
+                },
+                body: JSON.stringify(body),
+            });
+
+            const data = await response.json();
+            return new Response(JSON.stringify(data), {
+                status: response.status,
+                headers: { 'Content-Type': 'application/json' },
+            });
+        }
+
+        return new Response(
+            JSON.stringify({ error: 'Method not allowed' }),
+            { status: 405, headers: { 'Content-Type': 'application/json' } }
+        );
+
+    } catch (error: any) {
+        console.error('[API] Dataset Action - Error:', error.message);
+        return new Response(
+            JSON.stringify({ error: error.message || 'Failed to process dataset request' }),
+            { status: 500, headers: { 'Content-Type': 'application/json' } }
+        );
+    }
+}

app/routes/api.dataset.datasets.tsx

@@ -30,7 +30,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
         console.log('[API] Dataset List - 获取知识库列表:', { page, limit });
 
         // 转发请求到 FastAPI
-        const apiUrl = `${API_BASE_URL}/dify-dataset/datasets?page=${page}&limit=${limit}`;
+        const apiUrl = `${API_BASE_URL}/dify_dataset/datasets?page=${page}&limit=${limit}`;
         const response = await fetch(apiUrl, {
             method: 'GET',
             headers: {

app/styles/components/dify-dataset-manager/document-list.css

@@ -1,91 +0,0 @@
-/**
- * åÆ“¡h - ‡ch7
- */
-
-/* åw */
-.document-list-toolbar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 16px;
-    gap: 16px;
-}
-
-.document-list-search {
-    width: 280px;
-}
-
-.document-list-actions {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-}
-
-/* h<7 */
-.document-table {
-    flex: 1;
-}
-
-.document-table .ant-table-thead > tr > th {
-    background-color: #fafafa;
-    font-weight: 600;
-}
-
-.document-table .ant-table-tbody > tr:hover > td {
-    background-color: #f5f5f5;
-}
-
-/* ‡c
-ð */
-.document-name-cell {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
-
-.document-name-cell .anticon {
-    color: #999;
-    font-size: 16px;
-}
-
-.document-name-cell span {
-    font-weight: 500;
-}
-
-/* ¶
~ */
-.document-status-tag {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-}
-
-/* Í\	® */
-.document-actions {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-}
-
-/* z¶
 */
-.document-list-empty {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 60px 20px;
-}
-
-/* Í”@ */
-@media (max-width: 991px) {
-    .document-list-toolbar {
-        flex-direction: column;
-        align-items: stretch;
-    }
-
-    .document-list-search {
-        width: 100%;
-    }
-
-    .document-list-actions {
-        justify-content: space-between;
-    }

app/styles/components/dify-dataset-manager/index.css

@@ -1,46 +1,29 @@
 /**
- * åÆ“¡h - ;@7
+ * 知识库管理器 - 白色卡片风格
  */
 
-.dataset-manager-page {
+/* 外层容器 - 直接占满，与大模型对话一致 */
+.dataset-manager-wrapper {
     display: flex;
     flex-direction: column;
-    background-color: #f5f7f9;
+    height: 100%;
+    background: #fff;
+    overflow: hidden;
+    border-radius: 0.5rem;
+}
+
+/* 卡片容器 - 无边框阴影，直接融入 */
+.dataset-manager-card {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    background: #fff;
     overflow: hidden;
 }
 
-.dataset-manager-container {
+/* 加载状态 */
-    display: flex;
+.dataset-loading-state {
-    flex-direction: row;
-    height: 100%;
-    background-color: #f5f7f9;
-    overflow: hidden;
-}
-
-/* z¶
¹h */
-.dataset-empty {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    padding: 40px;
-    color: #999;
-}
-
-.dataset-empty h3 {
-    margin-bottom: 8px;
-    color: #666;
-    font-size: 16px;
-}
-
-.dataset-empty p {
-    color: #999;
-    font-size: 14px;
-}
-
-/*  }¶
¹h */
-.dataset-loading {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -49,25 +32,70 @@
     gap: 16px;
 }
 
-/* ;…¹:ß */
+.dataset-loading-state .loading-text {
+    color: #666;
+    font-size: 14px;
+}
+
+/* Spin 组件主题色 */
+.dataset-loading-state .ant-spin .ant-spin-dot-item,
+.dataset-loading .ant-spin .ant-spin-dot-item {
+    background-color: rgb(0 104 74);
+}
+
+/* 错误状态 */
+.dataset-error-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 40px;
+    text-align: center;
+}
+
+.dataset-error-state .error-icon {
+    font-size: 48px;
+    color: #ff4d4f;
+    margin-bottom: 16px;
+}
+
+.dataset-error-state h3 {
+    font-size: 18px;
+    font-weight: 600;
+    color: #1a1a1a;
+    margin: 0 0 8px 0;
+}
+
+.dataset-error-state p {
+    font-size: 14px;
+    color: #666;
+    margin: 0;
+}
+
+/* 内容区域 */
 .dataset-content {
     display: flex;
     flex-direction: column;
     flex: 1;
-    padding: 20px 24px;
+    min-height: 0;
-    overflow: auto;
+    padding: 24px;
+    overflow: hidden;
 }
 
-/* 4è:ß */
+/* 头部区域 */
 .dataset-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 20px;
+    flex-shrink: 0;
+    padding-bottom: 16px;
+    border-bottom: 1px solid #f0f0f0;
+    margin-bottom: 16px;
 }
 
 .dataset-header h1 {
-    font-size: 20px;
+    font-size: 18px;
     font-weight: 600;
     color: #1a1a1a;
     margin: 0;
@@ -78,12 +106,115 @@
     gap: 12px;
 }
 
-/* Í”@ */
+/* 工具栏 */
-@media (max-width: 991px) {
+.document-list-toolbar {
-    .dataset-manager-container {
+    display: flex;
-        flex-direction: column;
+    justify-content: space-between;
-    }
+    align-items: center;
+    flex-shrink: 0;
+    margin-bottom: 16px;
+}
 
+.document-list-search {
+    width: 280px;
+}
+
+.document-list-actions {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+/* 表格容器 - 唯一滚动区域 */
+.document-table-container {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.document-table {
+    background: transparent;
+}
+
+.document-table .ant-table-wrapper,
+.document-table .ant-table,
+.document-table .ant-table-container {
+    background: transparent;
+}
+
+/* 固定表头 */
+.document-table .ant-table-thead > tr > th {
+    background: #fafafa;
+    font-weight: 600;
+    font-size: 13px;
+    color: #1a1a1a;
+    padding: 8px 12px !important;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+}
+
+/* 压缩行高 */
+.document-table .ant-table-tbody > tr > td {
+    padding: 6px 12px !important;
+    font-size: 13px;
+}
+
+.document-table .ant-table-tbody > tr:hover > td {
+    background: #f5f7f9;
+}
+
+/* 固定底部分页器 */
+.document-pagination {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 0;
+    border-top: 1px solid #f0f0f0;
+    flex-shrink: 0;
+    background: #fff;
+}
+
+.pagination-total {
+    color: #666;
+    font-size: 14px;
+}
+
+.pagination-controls {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.pagination-info {
+    color: #666;
+    font-size: 14px;
+}
+
+/* 空状态 */
+.dataset-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    padding: 60px 40px;
+    color: #999;
+}
+
+/* 加载状态 */
+.dataset-loading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    gap: 16px;
+}
+
+/* 响应式 */
+@media (max-width: 991px) {
     .dataset-content {
         padding: 16px;
     }
@@ -98,4 +229,28 @@
         width: 100%;
         justify-content: flex-end;
     }
+
+    .document-list-toolbar {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 12px;
+    }
+
+    .document-list-search {
+        width: 100%;
+    }
+
+    .document-list-actions {
+        justify-content: space-between;
+    }
+}
+
+@media (max-width: 576px) {
+    .dataset-content {
+        padding: 12px;
+    }
+
+    .dataset-header h1 {
+        font-size: 16px;
+    }
 }

app/styles/components/dify-dataset-manager/sidebar.css

@@ -1,135 +0,0 @@
-/**
- * 知识库管理器 - 侧边栏样式
- */
-
-.dataset-sidebar {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    overflow: hidden;
-}
-
-.dataset-sidebar .ant-layout-sider-children {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-}
-
-/* 侧边栏头部 */
-.dataset-sidebar-header {
-    display: flex;
-    flex-direction: column;
-    padding: 12px;
-    border-bottom: 1px solid #f0f0f0;
-    gap: 12px;
-}
-
-.dataset-sidebar-title {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
-
-.dataset-sidebar-title h3 {
-    font-size: 16px;
-    font-weight: 600;
-    color: #1a1a1a;
-    margin: 0;
-}
-
-/* 知识库列表 */
-.dataset-sidebar-list {
-    flex: 1;
-    overflow-y: auto;
-    overflow-x: hidden;
-}
-
-/* 菜单样式覆盖 */
-.dataset-sidebar-menu.ant-menu {
-    border: none;
-    background: transparent;
-}
-
-.dataset-sidebar-menu .ant-menu-item {
-    margin: 4px 8px;
-    border-radius: 8px;
-    height: auto;
-    line-height: 1.5;
-    padding: 8px 12px !important;
-}
-
-.dataset-sidebar-menu .ant-menu-item-selected {
-    background-color: rgba(0, 104, 74, 0.1) !important;
-}
-
-.dataset-sidebar-menu .ant-menu-item-selected::after {
-    display: none;
-}
-
-.dataset-sidebar-menu .ant-menu-item:hover {
-    background-color: #f5f5f5;
-}
-
-/* 知识库信息 */
-.dataset-info {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    min-width: 0;
-}
-
-.dataset-info-name {
-    font-size: 14px;
-    font-weight: 500;
-    color: #1a1a1a;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.dataset-info-meta {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-}
-
-.dataset-info-meta-item {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    font-size: 12px;
-    color: #999;
-}
-
-.dataset-info-meta-item .anticon {
-    font-size: 12px;
-}
-
-/* 侧边栏底部 */
-.dataset-sidebar-footer {
-    padding: 12px 16px;
-    border-top: 1px solid #f0f0f0;
-    background: #fafafa;
-}
-
-.stats-text {
-    font-size: 12px;
-    color: #999;
-    text-align: center;
-}
-
-/* 响应式布局 */
-@media (max-width: 991px) {
-    .dataset-sidebar {
-        position: fixed;
-        left: 0;
-        top: 0;
-        z-index: 1000;
-        height: 100vh;
-        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
-    }
-
-    .dataset-sidebar.ant-layout-sider-collapsed {
-        transform: translateX(-100%);
-    }
-}