feat(knowledge-base): 实现知识库文件夹功能和优化文件管理

- 添加 datasetId 和 filePath 字段到 DatasetFile 接口
- 实现 resolveRelativeFileName 函数用于解析相对文件名
- 在 AddDataDialog 中使用 resolveRelativeFileName 处理文件名
- 添加文件夹浏览功能，支持目录导航和层级显示
- 实现文件夹删除功能，可批量删除目录下所有文件
- 集成 Folder 和 File 图标组件用于目录和文件区分
- 优化文件列表加载逻辑，使用分页和关键词搜索
- 添加文件夹状态显示和相应操作按钮
- 实现文件路径前缀管理和子目录过滤
- 重构文件列表渲染逻辑，支持目录和文件混合展示

frontend/src/pages/DataManagement/dataset.model.ts

@@ -34,10 +34,12 @@ export enum DataSource {
 
 export interface DatasetFile {
   id: string;
+  datasetId?: string;
   fileName: string;
   size: string;
   uploadDate: string;
   path: string;
+  filePath?: string;
 }
 
 export interface Dataset {

frontend/src/pages/KnowledgeBase/Detail/KnowledgeBaseDetail.tsx

@@ -1,6 +1,17 @@
 import type React from "react";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
-import { Table, Badge, Button, Breadcrumb, Tooltip, App, Card, Input, Empty, Spin } from "antd";
+import {
+  Table,
+  Badge,
+  Button,
+  Breadcrumb,
+  Tooltip,
+  App,
+  Card,
+  Input,
+  Empty,
+  Spin,
+} from "antd";
 import {
   DeleteOutlined,
   EditOutlined,
@@ -18,9 +29,9 @@ import {
   queryKnowledgeBaseFilesUsingGet,
   retrieveKnowledgeBaseContent,
 } from "../knowledge-base.api";
-import useFetchData from "@/hooks/useFetchData";
 import AddDataDialog from "../components/AddDataDialog";
 import CreateKnowledgeBase from "../components/CreateKnowledgeBase";
+import { File, Folder } from "lucide-react";
 
 interface StatisticItem {
   icon?: React.ReactNode;
@@ -39,6 +50,31 @@ interface RecallResult {
   primaryKey?: string;
 }
 
+type KBFileRow = KBFile & {
+  isDirectory?: boolean;
+  displayName?: string;
+  fullPath?: string;
+  fileCount?: number;
+};
+
+const normalizePath = (value?: string) => (value ?? "").replace(/\\/g, "/");
+
+const normalizePrefix = (value?: string) => {
+  const trimmed = normalizePath(value).replace(/^\/+/, "").trim();
+  if (!trimmed) {
+    return "";
+  }
+  return trimmed.endsWith("/") ? trimmed : `${trimmed}/`;
+};
+
+const splitRelativePath = (fullPath: string, prefix: string) => {
+  if (prefix && !fullPath.startsWith(prefix)) {
+    return [];
+  }
+  const remainder = fullPath.slice(prefix.length);
+  return remainder.split("/").filter(Boolean);
+};
+
 const KnowledgeBaseDetailPage: React.FC = () => {
   const navigate = useNavigate();
   const { message } = App.useApp();
@@ -46,37 +82,66 @@ const KnowledgeBaseDetailPage: React.FC = () => {
   const [knowledgeBase, setKnowledgeBase] = useState<KnowledgeBaseItem | undefined>(undefined);
   const [showEdit, setShowEdit] = useState(false);
   const [activeTab, setActiveTab] = useState<'fileList' | 'recallTest'>('fileList');
+  const [filePrefix, setFilePrefix] = useState("");
+  const [fileKeyword, setFileKeyword] = useState("");
+  const [filesLoading, setFilesLoading] = useState(false);
+  const [allFiles, setAllFiles] = useState<KBFile[]>([]);
+  const [filePagination, setFilePagination] = useState({
+    current: 1,
+    pageSize: 10,
+  });
   const [recallLoading, setRecallLoading] = useState(false);
   const [recallResults, setRecallResults] = useState<RecallResult[]>([]);
   const [recallQuery, setRecallQuery] = useState("");
 
-  const fetchKnowledgeBaseDetails = async (id: string) => {
+  const fetchKnowledgeBaseDetails = useCallback(async (baseId: string) => {
-    const { data } = await queryKnowledgeBaseByIdUsingGet(id);
+    const { data } = await queryKnowledgeBaseByIdUsingGet(baseId);
     setKnowledgeBase(mapKnowledgeBase(data));
-  };
+  }, []);
+
+  const fetchFiles = useCallback(async () => {
+    if (!id) {
+      setAllFiles([]);
+      return;
+    }
+    setFilesLoading(true);
+    try {
+      const pageSize = 200;
+      let page = 0;
+      let combined: KBFile[] = [];
+      while (true) {
+        const { data } = await queryKnowledgeBaseFilesUsingGet(id, {
+          page,
+          size: pageSize,
+        });
+        const content = Array.isArray(data?.content) ? data.content : [];
+        combined = combined.concat(content.map(mapFileData));
+        if (content.length < pageSize) {
+          break;
+        }
+        if (typeof data?.totalElements === "number" && combined.length >= data.totalElements) {
+          break;
+        }
+        page += 1;
+      }
+      setAllFiles(combined);
+    } catch (error) {
+      console.error("Failed to fetch knowledge base files:", error);
+      message.error("文件列表加载失败");
+    } finally {
+      setFilesLoading(false);
+    }
+  }, [id, message]);
 
   useEffect(() => {
     if (id) {
       fetchKnowledgeBaseDetails(id);
+      fetchFiles();
     }
-  }, [id]);
+  }, [id, fetchKnowledgeBaseDetails, fetchFiles]);
-
-  const {
-    loading,
-    tableData: files,
-    searchParams,
-    pagination,
-    fetchData: fetchFiles,
-    setSearchParams,
-    handleFiltersChange,
-    handleKeywordChange,
-  } = useFetchData<KBFile>(
-    (params) => id ? queryKnowledgeBaseFilesUsingGet(id, params) : Promise.resolve({ data: [] }),
-    mapFileData
-  );
 
   // File table logic
-  const handleDeleteFile = async (file: KBFile) => {
+  const handleDeleteFile = async (file: KBFileRow) => {
     try {
       await deleteKnowledgeBaseFileByIdUsingDelete(knowledgeBase!.id, {
         ids: [file.id]
@@ -119,6 +184,168 @@ const KnowledgeBaseDetailPage: React.FC = () => {
     setRecallLoading(false);
   };
 
+  const handleOpenDirectory = (directoryName: string) => {
+    const currentPrefix = normalizePrefix(filePrefix);
+    const nextPrefix = normalizePrefix(`${currentPrefix}${directoryName}`);
+    setFilePrefix(nextPrefix);
+  };
+
+  const handleBackToParent = () => {
+    const currentPrefix = normalizePrefix(filePrefix);
+    if (!currentPrefix) {
+      return;
+    }
+    const trimmed = currentPrefix.replace(/\/$/, "");
+    const parts = trimmed.split("/").filter(Boolean);
+    parts.pop();
+    const parentPrefix = parts.length ? `${parts.join("/")}/` : "";
+    setFilePrefix(parentPrefix);
+  };
+
+  const handleDeleteDirectory = async (directoryName: string) => {
+    if (!knowledgeBase?.id) {
+      return;
+    }
+    const currentPrefix = normalizePrefix(filePrefix);
+    const directoryPrefix = normalizePrefix(`${currentPrefix}${directoryName}`);
+    const targetIds = allFiles
+      .filter((file) => {
+        const fullPath = normalizePath(file.fileName || file.name);
+        return fullPath.startsWith(directoryPrefix);
+      })
+      .map((file) => file.id);
+    if (targetIds.length === 0) {
+      message.info("该文件夹为空");
+      return;
+    }
+    try {
+      await deleteKnowledgeBaseFileByIdUsingDelete(knowledgeBase.id, {
+        ids: targetIds,
+      });
+      message.success(`已删除 ${targetIds.length} 个文件`);
+      fetchFiles();
+    } catch {
+      message.error("文件夹删除失败");
+    }
+  };
+
+  const handleKeywordChange = (keyword: string) => {
+    setFileKeyword(keyword);
+  };
+
+  useEffect(() => {
+    setFilePagination((prev) => ({ ...prev, current: 1 }));
+  }, [filePrefix, fileKeyword]);
+
+  const normalizedPrefix = useMemo(() => normalizePrefix(filePrefix), [filePrefix]);
+
+  const { rows: fileRows, total: fileTotal } = useMemo(() => {
+    const keyword = fileKeyword.trim().toLowerCase();
+    const folderMap = new Map<string, { name: string; fileCount: number; hasMatch: boolean }>();
+    const fileItems: KBFileRow[] = [];
+
+    allFiles.forEach((file) => {
+      const fullPath = normalizePath(file.fileName || file.name);
+      if (!fullPath) {
+        return;
+      }
+      const segments = splitRelativePath(fullPath, normalizedPrefix);
+      if (segments.length === 0) {
+        return;
+      }
+      const leafName = segments[0];
+      const fileMatches =
+        !keyword ||
+        leafName.toLowerCase().includes(keyword) ||
+        fullPath.toLowerCase().includes(keyword);
+
+      if (segments.length > 1) {
+        const folderName = leafName;
+        const entry = folderMap.get(folderName) || {
+          name: folderName,
+          fileCount: 0,
+          hasMatch: false,
+        };
+        entry.fileCount += 1;
+        if (fileMatches) {
+          entry.hasMatch = true;
+        }
+        folderMap.set(folderName, entry);
+        return;
+      }
+
+      if (!fileMatches) {
+        return;
+      }
+
+      fileItems.push({
+        ...file,
+        name: leafName,
+        displayName: leafName,
+        fullPath,
+      });
+    });
+
+    const folderItems: KBFileRow[] = Array.from(folderMap.values())
+      .filter((entry) => {
+        if (!keyword) {
+          return true;
+        }
+        return (
+          entry.hasMatch ||
+          entry.name.toLowerCase().includes(keyword)
+        );
+      })
+      .map((entry) =>
+        ({
+          id: `directory-${normalizedPrefix}${entry.name}`,
+          fileName: entry.name,
+          name: entry.name,
+          status: null,
+          chunkCount: 0,
+          createdAt: "",
+          updatedAt: "",
+          metadata: {},
+          knowledgeBaseId: knowledgeBase?.id || "",
+          fileId: "",
+          updatedBy: "",
+          createdBy: "",
+          isDirectory: true,
+          displayName: entry.name,
+          fullPath: `${normalizedPrefix}${entry.name}/`,
+          fileCount: entry.fileCount,
+        }) as KBFileRow
+      );
+
+    const sortByName = (a: KBFileRow, b: KBFileRow) =>
+      (a.displayName || a.name || "").localeCompare(
+        b.displayName || b.name || "",
+        "zh-Hans-CN"
+      );
+
+    folderItems.sort(sortByName);
+    fileItems.sort(sortByName);
+
+    const combined = [...folderItems, ...fileItems];
+    return { rows: combined, total: combined.length };
+  }, [allFiles, fileKeyword, knowledgeBase?.id, normalizedPrefix]);
+
+  const filePageCurrent = filePagination.current;
+  const filePageSize = filePagination.pageSize;
+
+  const pagedFileRows = useMemo(() => {
+    const startIndex = (filePageCurrent - 1) * filePageSize;
+    const endIndex = startIndex + filePageSize;
+    return fileRows.slice(startIndex, endIndex);
+  }, [filePageCurrent, filePageSize, fileRows]);
+
+  useEffect(() => {
+    const maxPage = Math.max(1, Math.ceil(fileTotal / filePageSize));
+    if (filePageCurrent > maxPage) {
+      setFilePagination((prev) => ({ ...prev, current: maxPage }));
+    }
+  }, [filePageCurrent, filePageSize, fileTotal]);
+
   const operations = [
     {
       key: "edit",
@@ -170,14 +397,38 @@ const KnowledgeBaseDetailPage: React.FC = () => {
       width: 200,
       ellipsis: true,
       fixed: "left" as const,
+      render: (name: string, record: KBFileRow) => {
+        const displayName = record.displayName || name;
+        if (record.isDirectory) {
+          return (
+            <Button
+              type="link"
+              onClick={() => handleOpenDirectory(displayName)}
+              className="flex items-center gap-2 p-0"
+            >
+              <Folder className="w-4 h-4 text-blue-500" />
+              <span className="truncate">{displayName}</span>
+            </Button>
+          );
+        }
+        return (
+          <div className="flex items-center gap-2">
+            <File className="w-4 h-4 text-gray-800" />
+            <span className="truncate">{displayName}</span>
+          </div>
+        );
+      },
     },
     {
       title: "状态",
       dataIndex: "status",
       key: "vectorizationStatus",
       width: 120,
-      render: (status: unknown) => {
+      render: (status: unknown, record: KBFileRow) => {
-        if (typeof status === 'object' && status !== null) {
+        if (record.isDirectory) {
+          return <Badge color="default" text="文件夹" />;
+        }
+        if (typeof status === "object" && status !== null) {
           const s = status as { color?: string; label?: string };
           return <Badge color={s.color} text={s.label} />;
         }
@@ -190,6 +441,8 @@ const KnowledgeBaseDetailPage: React.FC = () => {
       key: "chunkCount",
       width: 100,
       ellipsis: true,
+      render: (value: number, record: KBFileRow) =>
+        record.isDirectory ? "-" : value ?? 0,
     },
     {
       title: "创建时间",
@@ -197,6 +450,8 @@ const KnowledgeBaseDetailPage: React.FC = () => {
       key: "createdAt",
       ellipsis: true,
       width: 180,
+      render: (value: string, record: KBFileRow) =>
+        record.isDirectory ? "-" : value || "-",
     },
     {
       title: "更新时间",
@@ -204,26 +459,51 @@ const KnowledgeBaseDetailPage: React.FC = () => {
       key: "updatedAt",
       ellipsis: true,
       width: 180,
+      render: (value: string, record: KBFileRow) =>
+        record.isDirectory ? "-" : value || "-",
     },
     {
       title: "操作",
       key: "actions",
       align: "right" as const,
       width: 100,
-      render: (_: unknown, file: KBFile) => (
+      render: (_: unknown, file: KBFileRow) => {
-        <div>
+        if (file.isDirectory) {
-          {fileOps.map((op) => (
+          return (
-            <Tooltip key={op.key} title={op.label}>
+            <Tooltip title="删除文件夹">
               <Button
                 type="text"
-                icon={op.icon}
+                icon={<DeleteOutlined className="w-4 h-4" />}
-                danger={op?.danger}
+                danger
-                onClick={() => op.onClick(file)}
+                onClick={() => {
+                  modal.confirm({
+                    title: "确认删除该文件夹吗？",
+                    content: `删除后将移除文件夹 “${file.displayName || file.name}” 下的全部文件，且无法恢复。`,
+                    okText: "删除",
+                    okType: "danger",
+                    cancelText: "取消",
+                    onOk: () => handleDeleteDirectory(file.displayName || file.name),
+                  });
+                }}
               />
             </Tooltip>
-          ))}
+          );
-        </div>
+        }
-      ),
+        return (
+          <div>
+            {fileOps.map((op) => (
+              <Tooltip key={op.key} title={op.label}>
+                <Button
+                  type="text"
+                  icon={op.icon}
+                  danger={op?.danger}
+                  onClick={() => op.onClick(file)}
+                />
+              </Tooltip>
+            ))}
+          </div>
+        );
+      },
     },
   ];
 
@@ -265,12 +545,12 @@ const KnowledgeBaseDetailPage: React.FC = () => {
             <>
               <div className="flex-1">
                 <SearchControls
-                  searchTerm={searchParams.keyword}
+                  searchTerm={fileKeyword}
                   onSearchChange={handleKeywordChange}
                   searchPlaceholder="搜索文件名..."
                   filters={[]}
-                  onFiltersChange={handleFiltersChange}
+                  onFiltersChange={() => {}}
-                  onClearFilters={() => setSearchParams({ ...searchParams, filter: { type: [], status: [], tags: [] } })}
+                  onClearFilters={() => setFileKeyword("")}
                   showViewToggle={false}
                   showReload={false}
                 />
@@ -281,14 +561,54 @@ const KnowledgeBaseDetailPage: React.FC = () => {
         </div>
 
         {activeTab === 'fileList' ? (
-          <Table
+          <>
-            loading={loading}
+            <div className="mb-2">
-            columns={fileColumns}
+              {normalizedPrefix && (
-            dataSource={files}
+                <Button type="link" onClick={handleBackToParent} className="p-0">
-            rowKey="id"
+                  <span className="flex items-center text-blue-500">
-            pagination={pagination}
+                    <svg
-            scroll={{ y: "calc(100vh - 30rem)" }}
+                      className="w-4 h-4 mr-1"
-          />
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M10 19l-7-7m0 0l7-7m-7 7h18"
+                      />
+                    </svg>
+                    返回上一级
+                  </span>
+                </Button>
+              )}
+              {normalizedPrefix && (
+                <span className="ml-2 text-gray-600">
+                  当前路径: {normalizedPrefix}
+                </span>
+              )}
+            </div>
+            <Table
+              loading={filesLoading}
+              columns={fileColumns}
+              dataSource={pagedFileRows}
+              rowKey="id"
+              pagination={{
+                current: filePagination.current,
+                pageSize: filePagination.pageSize,
+                total: fileTotal,
+                showTotal: (total) => `共 ${total} 条`,
+                onChange: (page, pageSize) =>
+                  setFilePagination({
+                    current: page,
+                    pageSize: pageSize || filePagination.pageSize,
+                  }),
+              }}
+              scroll={{ y: "calc(100vh - 30rem)" }}
+            />
+          </>
         ) : (
           <div className="p-2">
             <div style={{ fontSize: 14, fontWeight: 300, marginBottom: 8 }}>基于语义文本检索和全文检索后的加权平均结果</div>

frontend/src/pages/KnowledgeBase/components/AddDataDialog.tsx

@@ -15,6 +15,7 @@ import { addKnowledgeBaseFilesUsingPost } from "../knowledge-base.api";
 import DatasetFileTransfer from "@/components/business/DatasetFileTransfer";
 import { DescriptionsItemType } from "antd/es/descriptions";
 import { DatasetFileCols } from "../knowledge-base.const";
+import type { DatasetFile } from "@/pages/DataManagement/dataset.model";
 
 export default function AddDataDialog({ knowledgeBase, onDataAdded }) {
   const [open, setOpen] = useState(false);
@@ -25,6 +26,34 @@ export default function AddDataDialog({ knowledgeBase, onDataAdded }) {
 
   const [selectedFilesMap, setSelectedFilesMap] = useState({});
 
+  const normalizePath = (value?: string) =>
+    (value ?? "").replace(/\\/g, "/");
+
+  const resolveRelativeFileName = (file: DatasetFile) => {
+    const normalizedName = normalizePath(file.fileName);
+    if (normalizedName.includes("/")) {
+      return normalizedName.replace(/^\/+/, "");
+    }
+
+    const rawPath = normalizePath(file.path || file.filePath);
+    const datasetId = String(file.datasetId || "");
+    if (rawPath && datasetId) {
+      const marker = `/${datasetId}/`;
+      const index = rawPath.lastIndexOf(marker);
+      if (index >= 0) {
+        const relative = rawPath
+          .slice(index + marker.length)
+          .replace(/^\/+/, "");
+        if (relative) {
+          return relative;
+        }
+      }
+    }
+
+    const fallbackName = rawPath.split("/").pop();
+    return fallbackName || file.fileName;
+  };
+
   // 定义分块选项
   const sliceOptions = [
     { label: "默认分块", value: "DEFAULT_CHUNK" },
@@ -129,7 +158,7 @@ export default function AddDataDialog({ knowledgeBase, onDataAdded }) {
       const requestData = {
         files: Object.values(selectedFilesMap).map((file) => ({
           id: String(file.id),
-          fileName: file.fileName,
+          fileName: resolveRelativeFileName(file as DatasetFile),
         })),
         processType: newKB.processType,
         chunkSize: Number(newKB.chunkSize), // 确保是数字类型