@gientech/modual 2.2.3-fix.5 → 2.2.3-fix.6

package/src/modules/knowledgebaseDetails/modules/KnowledgeParseModule.tsx

@@ -0,0 +1,771 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import styled from 'styled-components';
+import { Upload, FilePlus, FolderPlus, Network, Play } from 'lucide-react';
+import { Xviwer } from '@mxmweb/xviewer';
+import { FileNameCell, MoreActionsButton, ParseStatusFilter, ShowAllFilesFilter } from '../components';
+import {
+  fetchKnowledgeParseFileFolderList,
+  fetchKnowledgeParseGraphList,
+  fetchKnowledgeParseVersionList,
+  type KnowledgeParsePagedResult,
+} from '../servers';
+import type { KnowledgeBaseDetailsModuleRenderProps } from './types';
+
+/**
+ * 模块：知识解析
+ * - 顶部 Tab：知识解析
+ * - 内容：XViewer（tabs 模式）包含 文件管理 / 版本管理（支持子级 table） / 图谱增强（table）
+ *
+ * 注意：
+ * - 不做 mock 数据：dataSource 由业务层接口返回后传入
+ * - 子级 table：依赖 dataSource 行内的 children 字段（数组）触发子表渲染
+ */
+export const KnowledgeParseModule: React.FC<KnowledgeBaseDetailsModuleRenderProps> = ({
+  kbId,
+  server,
+  coreRef,
+  appStatus,
+  styles,
+  eventsEmit,
+  CustomComponents,
+  activeId,
+  setActiveId,
+}) => {
+  type TableRow = any;
+
+  const [fileRows, setFileRows] = useState<TableRow[]>([]);
+  const [fileTotal, setFileTotal] = useState(0);
+  const [versionRows, setVersionRows] = useState<TableRow[]>([]);
+  const [versionTotal, setVersionTotal] = useState(0);
+  const [graphRows, setGraphRows] = useState<TableRow[]>([]);
+  const [graphTotal, setGraphTotal] = useState(0);
+  // 记录当前视图下的多选选中项，用于“批量操作”启用/禁用
+  const [selectedIdsByView, setSelectedIdsByView] = useState<Record<string, string[]>>({});
+  // 版本管理 showType（平台下拉“显示全部文件”）
+  const [versionShowType, setVersionShowType] = useState<number>(1);
+
+  /**
+   * 将后端数据项转换为 XViewer(DynamicTable) 可渲染的行结构
+   *
+   * 说明：
+   * - XViewer table 行结构：{ id, data: Array<{columnId,type,value}>, children? }
+   * - 为支持后端分页的“远跳页渲染”，这里额外写入 __absIndex（绝对索引）
+   *
+   * 2026-01-28: 接入知识解析列表，增加宽松字段映射（兼容不同后端字段名）
+   */
+  const mapToTableRows = useCallback(
+    (viewId: string, result: KnowledgeParsePagedResult<any>) => {
+      const startAbs = (result.pageNo - 1) * result.pageSize;
+
+      const pickFirst = (obj: any, keys: string[]) => {
+        for (const k of keys) {
+          const v = obj?.[k];
+          if (v !== undefined && v !== null && `${v}`.length > 0) return v;
+        }
+        return undefined;
+      };
+
+      const getFileExt = (fileName?: string) => {
+        const name = typeof fileName === 'string' ? fileName : '';
+        const idx = name.lastIndexOf('.');
+        if (idx <= -1) return '';
+        return name.slice(idx + 1).toLowerCase();
+      };
+
+      const mapParseMethodLabel = (fileType?: any) => {
+        const v = typeof fileType === 'string' ? fileType.toLowerCase() : '';
+        if (v === 'intelligent') return '智能切分';
+        if (v === 'naive') return '自定义切片';
+        if (!v) return '-';
+        return v;
+      };
+
+      const mapParseStatus = (raw: any) => {
+        // 兼容：后端可能返回 number / string
+        if (typeof raw === 'string') {
+          const s = raw.trim();
+          if (!s) return { label: '-', statusType: 'default' as const };
+          // 简单命中中文关键词
+          if (s.includes('完成') || s.includes('成功')) return { label: s, statusType: 'success' as const };
+          if (s.includes('失败')) return { label: s, statusType: 'error' as const };
+          if (s.includes('解析中') || s.includes('进行中')) return { label: s, statusType: 'processing' as const };
+          if (s.includes('未解析') || s.includes('待解析')) return { label: s, statusType: 'warning' as const };
+          return { label: s, statusType: 'default' as const };
+        }
+        const n = typeof raw === 'number' ? raw : Number(raw);
+        if (Number.isNaN(n)) return { label: '-', statusType: 'default' as const };
+        // 经验映射（可按真实枚举随时调整）
+        switch (n) {
+          case 1:
+            return { label: '未解析', statusType: 'warning' as const };
+          case 2:
+            return { label: '解析中', statusType: 'processing' as const };
+          case 3:
+            return { label: '解析完成', statusType: 'success' as const };
+          case 4:
+            return { label: '解析失败', statusType: 'error' as const };
+          default:
+            return { label: '待解析', statusType: 'default' as const };
+        }
+      };
+
+      const rows: TableRow[] = result.list.map((item: any, i: number) => {
+        const __absIndex = startAbs + i;
+        const id =
+          `${pickFirst(item, ['id', 'fileId', 'docId', 'kbFileId', 'uuid']) ?? ''}` || `${viewId}_${__absIndex}`;
+
+        if (viewId === 'file-management') {
+          const fileName = pickFirst(item, ['fileName', 'name', 'title']) as string | undefined;
+          const isFolder = Number(pickFirst(item, ['isFolder'])) === 1;
+          const name = isFolder
+            ? (pickFirst(item, ['folderName', 'name']) as any) ?? fileName ?? ''
+            : fileName ?? '';
+          const ext = isFolder ? 'folder' : getFileExt(fileName);
+          const label = pickFirst(item, ['label']) ?? pickFirst(item, ['tags', 'tag', 'labels']) ?? '';
+
+          const parseMethodRaw = pickFirst(item, ['fileType', 'parseType', 'parseMethod', 'method']);
+          const parseMethodLabel = mapParseMethodLabel(parseMethodRaw);
+          const parseStatusRaw = pickFirst(item, ['fileParseStatus', 'parseStatus', 'status']);
+          const parseStatus = mapParseStatus(parseStatusRaw);
+
+          const actionMain =
+            parseStatus.label === '解析完成'
+              ? { value: 'reparse', label: '重新解析' }
+              : { value: 'parse', label: '解析' };
+
+          const children = Array.isArray(item?.children) ? item.children : undefined;
+          const mappedChildren = Array.isArray(children)
+            ? children.map((c: any, ci: number) => ({
+                id: `${id}_sub_${ci}`,
+                data: [
+                  { columnId: 'name', type: 'text', value: pickFirst(c, ['name', 'fileName', 'title']) ?? '' },
+                  (() => {
+                    const st = mapParseStatus(pickFirst(c, ['fileParseStatus', 'status', 'parseStatus']));
+                    return {
+                      columnId: 'status',
+                      type: 'status',
+                      value: st.label,
+                      statusType: st.statusType,
+                    };
+                  })(),
+                  { columnId: 'updatedAt', type: 'date', value: pickFirst(c, ['updatedAt', 'gmtModified', 'updateTime']) ?? '' },
+                  (() => {
+                    const st = mapParseStatus(pickFirst(c, ['fileParseStatus', 'status', 'parseStatus']));
+                    const childActionMain =
+                      st.label === '解析完成'
+                        ? { value: 'reparse', label: '重新解析' }
+                        : { value: 'parse', label: '解析' };
+                    // DynamicTable 的 action 列会把 cell 本身传给 renderer（不是 cell.value）
+                    // 因此这里必须用“多个同 columnId 的 action cell”来表达多按钮
+                    return [
+                      { columnId: 'actions', type: 'action', value: childActionMain.value, label: childActionMain.label },
+                      { columnId: 'actions', type: 'action', value: 'delete', label: '删除' },
+                      { columnId: 'actions', type: 'action', value: 'more', label: '...' },
+                    ];
+                  })(),
+                ],
+              }))
+            : undefined;
+
+          return {
+            id,
+            __absIndex,
+            meta: {
+              kbId: item?.kbId ?? kbId,
+              rawId: item?.id,
+              fileName,
+              filePath: item?.filePath,
+              isFolder,
+              folderId: item?.folderId,
+              folderName: item?.folderName,
+              version: item?.version,
+            },
+            data: [
+              // 注意：cell.value 必须保持 primitive，避免在视图切换时 dataSource 错配导致 React 渲染 object 崩溃
+              { columnId: 'name', type: 'customized', value: name ?? '', fileType: ext },
+              { columnId: 'tags', type: 'text', value: label ?? '' },
+              { columnId: 'docId', type: 'text', value: pickFirst(item, ['docId', 'documentId', 'fileId', 'id', 'fileCode']) ?? '' },
+              { columnId: 'chunkCount', type: 'text', value: pickFirst(item, ['chunkCount', 'chunkNum', 'chunkSize', 'chunk_count']) ?? '' },
+              { columnId: 'parseMethod', type: 'text', value: parseMethodLabel },
+              {
+                columnId: 'parseStatus',
+                type: 'status',
+                value: parseStatus.label,
+                statusType: parseStatus.statusType,
+              },
+              { columnId: 'versionTime', type: 'date', value: pickFirst(item, ['reviseDate', 'versionTime', 'gmtModified', 'updateTime', 'uploadTime']) ?? '' },
+              { columnId: 'uploadTime', type: 'date', value: pickFirst(item, ['uploadTime', 'gmtCreate', 'createTime']) ?? '' },
+              { columnId: 'actions', type: 'action', value: actionMain.value, label: actionMain.label },
+              { columnId: 'actions', type: 'action', value: 'delete', label: '删除' },
+              { columnId: 'actions', type: 'action', value: 'more', label: '...' },
+            ],
+            ...(mappedChildren
+              ? {
+                  // children 的 data 里我们返回了数组，需要拍平
+                  children: mappedChildren.map((r: any) => ({
+                    ...r,
+                    data: (r.data || []).flat(),
+                  })),
+                }
+              : {}),
+          };
+        }
+
+        if (viewId === 'version-management') {
+          /**
+           * 版本管理接口返回结构：
+           * - records[] 的顶层字段可能为 null
+           * - 当前版本/文件详情通常在 kbFiles[0] 中（见平台返回）
+           *
+           * 2026-01-28: 兼容 records[].kbFiles[0] 作为详情源
+           */
+          const info = (Array.isArray(item?.kbFiles) && item.kbFiles.length > 0 ? item.kbFiles[0] : item) || item;
+
+          const fileName =
+            (pickFirst(info, ['fileName', 'name', 'title']) as string | undefined) ||
+            (pickFirst(item, ['parentFileName']) as string | undefined);
+          const ext = getFileExt(fileName);
+
+          const parseMethodRaw = pickFirst(info, ['fileType', 'parseType', 'parseMethod', 'method']);
+          // 版本管理在平台展示 raw（naive/intelligent）
+          const parseMethodLabel = typeof parseMethodRaw === 'string' ? parseMethodRaw : `${parseMethodRaw ?? ''}`;
+
+          const parseStatusRaw = pickFirst(info, ['fileParseStatus', 'parseStatus', 'status']);
+          const parseStatus = mapParseStatus(parseStatusRaw);
+          const actionMain =
+            parseStatus.label === '解析完成'
+              ? { value: 'reparse', label: '重新解析' }
+              : { value: 'parse', label: '解析' };
+
+          return {
+            id,
+            __absIndex,
+            meta: {
+              kbId: info?.kbId ?? item?.kbId ?? kbId,
+              rawId: info?.id ?? item?.id,
+              fileName,
+              filePath: info?.filePath ?? item?.filePath,
+              version: info?.version ?? item?.version,
+            },
+            data: [
+              { columnId: 'name', type: 'customized', value: fileName ?? '', fileType: ext },
+              { columnId: 'chunkCount', type: 'text', value: pickFirst(info, ['chunkCount', 'chunkNum', 'chunkSize', 'chunk_count']) ?? '' },
+              { columnId: 'parseMethod', type: 'text', value: parseMethodLabel },
+              { columnId: 'parseStatus', type: 'status', value: parseStatus.label, statusType: parseStatus.statusType },
+              // 平台该字段多数与 uploadTime 一致（reviseDate 可能为空）
+              { columnId: 'versionTime', type: 'date', value: pickFirst(info, ['reviseDate', 'versionTime', 'gmtModified', 'updateTime', 'uploadTime']) ?? '' },
+              { columnId: 'uploadTime', type: 'date', value: pickFirst(info, ['uploadTime', 'gmtCreate', 'createTime']) ?? '' },
+              { columnId: 'actions', type: 'action', value: actionMain.value, label: actionMain.label },
+              { columnId: 'actions', type: 'action', value: 'delete', label: '删除' },
+              { columnId: 'actions', type: 'action', value: 'more', label: '...' },
+            ],
+          };
+        }
+
+        // graph-enhancement
+        const graphStatusRaw =
+          pickFirst(item, ['graphParseStatus', 'graphStatus', 'status']) ??
+          pickFirst(item, ['fileParseStatus', 'parseStatus']);
+        const graphStatus = mapParseStatus(graphStatusRaw);
+        return {
+          id,
+          __absIndex,
+          data: [
+            { columnId: 'name', type: 'text', value: pickFirst(item, ['name', 'graphName', 'fileName', 'title']) ?? '' },
+            { columnId: 'nodeCount', type: 'text', value: pickFirst(item, ['nodeCount', 'nodes']) ?? '' },
+            { columnId: 'relationCount', type: 'text', value: pickFirst(item, ['relationCount', 'relations', 'edgeCount', 'edgeCount']) ?? '' },
+            { columnId: 'graphStatus', type: 'status', value: graphStatus.label, statusType: graphStatus.statusType },
+            { columnId: 'actions', type: 'action', value: 'more', label: '...' },
+          ],
+        };
+      });
+
+      return rows;
+    },
+    []
+  );
+
+  /**
+   * 将某一页的数据 merge 到已有缓存中（依赖 __absIndex）
+   */
+  const mergeAbsIndexedRows = useCallback((prev: TableRow[], nextRows: TableRow[]) => {
+    const map = new Map<number, TableRow>();
+    for (const r of prev) {
+      if (typeof r?.__absIndex === 'number') map.set(r.__absIndex, r);
+    }
+    for (const r of nextRows) {
+      if (typeof r?.__absIndex === 'number') map.set(r.__absIndex, r);
+    }
+    return Array.from(map.entries())
+      .sort((a, b) => a[0] - b[0])
+      .map(([, v]) => v);
+  }, []);
+
+  /**
+   * 统一请求入口：按 viewId 调用对应的列表接口
+   *
+   * 2026-01-28: 知识解析列表接入（文件管理 / 版本管理 / 知识图谱）
+   */
+  const requestList = useCallback(
+    async (
+      viewId: 'file-management' | 'version-management' | 'graph-enhancement',
+      pageNo: number,
+      pageSize: number,
+      signal?: AbortSignal
+    ) => {
+      if (!server || !kbId) return null;
+
+      // 这里先按分析文档的默认约定：fileListType=1，fuzzy 为空
+      const baseParams = {
+        kbId,
+        pageNo,
+        pageSize,
+        fileListType: 1,
+        fuzzy: '',
+      };
+
+      if (viewId === 'file-management') {
+        return await fetchKnowledgeParseFileFolderList(server, { ...baseParams, signal });
+      }
+      if (viewId === 'version-management') {
+        return await fetchKnowledgeParseVersionList(server, { ...baseParams, showType: versionShowType, signal });
+      }
+      // 图谱增强接口与文件管理共用 /folder/list，通过 fileListType=3 区分
+      return await fetchKnowledgeParseGraphList(server, { ...baseParams, fileListType: 3, signal });
+    },
+    [kbId, server, versionShowType]
+  );
+
+  const applyResult = useCallback(
+    (
+      viewId: 'file-management' | 'version-management' | 'graph-enhancement',
+      result: KnowledgeParsePagedResult<any>,
+      merge: boolean
+    ) => {
+      const nextRows = mapToTableRows(viewId, result);
+
+      if (viewId === 'file-management') {
+        setFileTotal(result.total);
+        setFileRows((prev) => (merge ? mergeAbsIndexedRows(prev, nextRows) : nextRows));
+        return;
+      }
+      if (viewId === 'version-management') {
+        setVersionTotal(result.total);
+        setVersionRows((prev) => (merge ? mergeAbsIndexedRows(prev, nextRows) : nextRows));
+        return;
+      }
+      setGraphTotal(result.total);
+      setGraphRows((prev) => (merge ? mergeAbsIndexedRows(prev, nextRows) : nextRows));
+    },
+    [mapToTableRows, mergeAbsIndexedRows]
+  );
+
+  const viewConfig = useMemo(() => {
+    const selectedIdsForActiveView = selectedIdsByView[activeId] || [];
+    const MoreActionsButtonWithSelection: React.FC<any> = (p) => (
+      <MoreActionsButton {...p} selectedIds={selectedIdsForActiveView} totalCount={activeId === 'file-management' ? fileTotal : activeId === 'version-management' ? versionTotal : graphTotal} />
+    );
+
+    const baseFileManagementView = {
+      label: '文件管理',
+      id: 'file-management',
+      type: 'table' as const,
+      allowMultiSelect: true,
+      viewBehavior: 'pagination' as const,
+      viewPageSize: 10,
+      total: fileTotal,
+      requestPagesize: 10,
+      columns: [
+        {
+          title: '名称',
+          id: 'name',
+          type: 'customized',
+          tip: '文件名称',
+          component: FileNameCell,
+        },
+        { title: '标签', id: 'tags', type: 'text', tip: '文件标签' },
+        { title: '文档编号', id: 'docId', type: 'text', tip: '文档编号' },
+        { title: '分块数', id: 'chunkCount', type: 'text', tip: '分块数量' },
+        { title: '解析方法', id: 'parseMethod', type: 'text', tip: '解析方法' },
+        { title: '解析状态', id: 'parseStatus', type: 'status', tip: '解析状态' },
+        { title: '版本修订时间', id: 'versionTime', type: 'date', tip: '版本修订时间' },
+        { title: '上传时间', id: 'uploadTime', type: 'date', tip: '上传时间' },
+        { title: '操作', id: 'actions', type: 'action' },
+      ],
+      toolbar: [
+        {
+          type: 'button' as const,
+          key: 'upload',
+          label: '上传',
+          icon: <Upload size={16} />,
+          btnType: 'primary' as const,
+        },
+        {
+          type: 'button' as const,
+          key: 'add_file',
+          label: '添加文件',
+          icon: <FilePlus size={16} />,
+          btnType: 'default' as const,
+        },
+        {
+          type: 'button' as const,
+          key: 'new_folder',
+          label: '新建文件夹',
+          icon: <FolderPlus size={16} />,
+          btnType: 'default' as const,
+        },
+        {
+          type: 'customized' as const,
+          key: 'more_actions',
+          component: MoreActionsButtonWithSelection,
+        },
+        {
+          type: 'customized' as const,
+          key: 'parse_status_filter',
+          component: ParseStatusFilter,
+          position: 'right' as const,
+        },
+        {
+          type: 'fuzzy_search' as const,
+          key: 'search',
+          label: '搜索内容',
+          searchKeys: ['name', 'tags'],
+          position: 'right' as const,
+        },
+      ],
+    };
+
+    return {
+      model: 'tabs' as const,
+      defaultActiveId: activeId,
+      views: [
+        baseFileManagementView,
+        {
+          label: '版本管理',
+          id: 'version-management',
+          type: 'table' as const,
+          allowMultiSelect: true,
+          viewBehavior: 'pagination' as const,
+          viewPageSize: 10,
+          total: versionTotal,
+          requestPagesize: 10,
+          toolbar: [
+            {
+              type: 'customized' as const,
+              key: 'more_actions',
+              component: MoreActionsButtonWithSelection,
+            },
+            {
+              type: 'customized' as const,
+              key: 'version_show_filter',
+              component: ShowAllFilesFilter,
+              position: 'right' as const,
+            },
+            {
+              type: 'fuzzy_search' as const,
+              key: 'search',
+              label: '搜索内容',
+              searchKeys: ['name'],
+              position: 'right' as const,
+            },
+          ],
+          columns: [
+            { title: '名称', id: 'name', type: 'customized', component: FileNameCell },
+            { title: '分块数', id: 'chunkCount', type: 'text' },
+            { title: '解析方法', id: 'parseMethod', type: 'text' },
+            { title: '解析状态', id: 'parseStatus', type: 'status' },
+            { title: '版本修订时间', id: 'versionTime', type: 'date' },
+            { title: '上传时间', id: 'uploadTime', type: 'date' },
+            { title: '操作', id: 'actions', type: 'action' },
+          ],
+        },
+        {
+          label: '图谱增强',
+          id: 'graph-enhancement',
+          type: 'table' as const,
+          allowMultiSelect: false,
+          viewBehavior: 'pagination' as const,
+          viewPageSize: 10,
+          total: graphTotal,
+          requestPagesize: 10,
+          toolbar: [
+            {
+              type: 'button' as const,
+              key: 'upload',
+              label: '上传',
+              icon: <Upload size={16} />,
+              btnType: 'primary' as const,
+            },
+            {
+              type: 'button' as const,
+              key: 'add_file',
+              label: '添加文件',
+              icon: <FilePlus size={16} />,
+              btnType: 'default' as const,
+            },
+            {
+              type: 'button' as const,
+              key: 'graph_visualize',
+              label: '可视化图谱',
+              icon: <Network size={16} />,
+              btnType: 'default' as const,
+            },
+            {
+              type: 'button' as const,
+              key: 'graph_parse',
+              label: '图谱解析',
+              icon: <Play size={16} />,
+              btnType: 'default' as const,
+            },
+            {
+              type: 'fuzzy_search' as const,
+              key: 'search',
+              label: '搜索内容',
+              searchKeys: ['name'],
+              position: 'right' as const,
+            },
+          ],
+          columns: [
+            { title: '名称', id: 'name', type: 'text' },
+            { title: '节点数', id: 'nodeCount', type: 'text' },
+            { title: '关系数', id: 'relationCount', type: 'text' },
+            { title: '图谱解析状态', id: 'graphStatus', type: 'status' },
+            { title: '操作', id: 'actions', type: 'action' },
+          ],
+        },
+      ],
+      dataSource:
+        activeId === 'file-management'
+          ? fileRows
+          : activeId === 'version-management'
+            ? versionRows
+            : graphRows,
+    };
+  }, [activeId, fileRows, fileTotal, graphRows, graphTotal, versionRows, versionTotal, selectedIdsByView]);
+
+  const handleXviewerEventsEmit = useCallback(
+    (name: string, data: any, appFn: any) => {
+      if (name === 'select' && data?.id) {
+        setActiveId(data.id);
+      }
+
+      // 兼容 XViewer 表格多选回传：尽可能从 data 中识别“选中行 id 列表”
+      // 常见字段：selectedRowKeys / selectedKeys / selectedIds / selectedItems
+      if (data && (data.viewId || data.id)) {
+        const viewId = (data.viewId || data.id) as string;
+        const selectedIds: string[] | undefined =
+          (Array.isArray(data.selectedIds) ? data.selectedIds : undefined) ??
+          (Array.isArray(data.selectedRowKeys) ? data.selectedRowKeys : undefined) ??
+          (Array.isArray(data.selectedKeys) ? data.selectedKeys : undefined) ??
+          (Array.isArray(data.selectedItems) ? data.selectedItems.map((it: any) => `${it?.id ?? it}`) : undefined);
+
+        if (selectedIds) {
+          setSelectedIdsByView((prev) => ({ ...prev, [viewId]: selectedIds.map((v) => `${v}`) }));
+        }
+      }
+
+      // 版本管理 showType 切换（显示全部文件）
+      if (name === 'toolbar_version_show_filter_change' && typeof data?.value === 'number') {
+        setVersionShowType(data.value);
+        // 切换筛选时清空当前缓存，避免 UI 看到旧数据
+        setVersionRows([]);
+        setVersionTotal(0);
+      }
+
+      if (name === 'pagination:request_merge_data' && data?.viewId && data?.request) {
+        const viewId = data.viewId as 'file-management' | 'version-management' | 'graph-enhancement';
+        const req = data.request as { pageNo: number; pageSize: number };
+        if (viewId && req?.pageNo && req?.pageSize) {
+          const controller = new AbortController();
+          requestList(viewId, req.pageNo, req.pageSize, controller.signal)
+            .then((res) => {
+              if (!res) return;
+              applyResult(viewId, res, true);
+            })
+            .catch(() => undefined);
+        }
+      }
+
+      eventsEmit(name, data, appFn);
+    },
+    [applyResult, eventsEmit, requestList, setActiveId]
+  );
+
+  // 触发首屏数据加载（按当前 viewId 拉取第 1 页）
+  useEffect(() => {
+    if (!server || !kbId) return;
+    const viewId = (activeId || 'file-management') as 'file-management' | 'version-management' | 'graph-enhancement';
+    const controller = new AbortController();
+    requestList(viewId, 1, 10, controller.signal)
+      .then((res) => {
+        if (!res) return;
+        applyResult(viewId, res, false);
+      })
+      .catch(() => undefined);
+    return () => controller.abort();
+  }, [activeId, applyResult, kbId, requestList, server]);
+
+  return (
+    <XviewerToolbarSkin
+      className="knowledgebase-xviewer-toolbar-skin"
+      $primary={styles?.theme?.colors?.primary}
+      $border={styles?.theme?.colors?.border}
+      $text={styles?.theme?.colors?.text}
+      $textSecondary={styles?.theme?.colors?.textSecondary}
+    >
+      <Xviwer
+        ref={coreRef}
+        label=""
+        model={viewConfig.model}
+        defaultActiveId={viewConfig.defaultActiveId}
+        views={viewConfig.views}
+        dataSource={viewConfig.dataSource}
+        // 子级 table 配置（当 dataSource 的某行存在 children 时，自动渲染子表）
+        subTableConfig={{
+          type: 'table' as const,
+          allowMultiSelect: false,
+          viewBehavior: 'pagination' as const,
+          viewPageSize: 5,
+          columns: [
+            { title: '名称', id: 'name', type: 'text' },
+            { title: '状态', id: 'status', type: 'status' },
+            { title: '更新时间', id: 'updatedAt', type: 'date' },
+            { title: '操作', id: 'actions', type: 'action' },
+          ],
+        }}
+        eventsEmit={(name: string, data: any, appFn: any) => {
+          console.log('[KnowledgeParseModule eventsEmit]', name, data);
+          handleXviewerEventsEmit(name, data, appFn);
+        }}
+        status={appStatus}
+        styles={styles}
+        CustomComponents={CustomComponents}
+      />
+    </XviewerToolbarSkin>
+  );
+};
+
+const XviewerToolbarSkin = styled.div.attrs({
+  className: 'knowledgebase-xviewer-toolbar-skin',
+})<{
+  $primary?: string;
+  $border?: string;
+  $text?: string;
+  $textSecondary?: string;
+}>`
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+
+  /* 仅影响 XViewer 内的 antd toolbar 按钮 */
+  .ant-btn:not(.ant-btn-link):not(.ant-btn-text) {
+    height: 32px;
+    padding: 0 19px;
+    border-radius: 8px;
+    box-shadow: none;
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  .ant-btn.ant-btn-default,
+  .ant-btn.ant-btn-variant-outlined,
+  .ant-btn.ant-btn-color-default {
+    background: #ffffff;
+    border-color: ${({ $border }) => $border || '#D0D5DD'};
+    color: ${({ $text }) => $text || '#101828'};
+  }
+
+  .ant-btn.ant-btn-default:hover,
+  .ant-btn.ant-btn-variant-outlined:hover,
+  .ant-btn.ant-btn-color-default:hover {
+    background: #ffffff;
+    border-color: ${({ $primary }) => $primary || '#3B82F6'};
+  }
+
+  .ant-btn:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
+  }
+
+  .ant-btn.ant-btn-primary {
+    border-color: ${({ $primary }) => $primary || '#2563EB'};
+    background: ${({ $primary }) => $primary || '#2563EB'};
+  }
+
+  .ant-btn.ant-btn-primary:hover {
+    border-color: ${({ $primary }) => $primary || '#1D4ED8'};
+    background: ${({ $primary }) => $primary || '#1D4ED8'};
+  }
+
+  .ant-btn .ant-btn-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .ant-btn.ant-btn-default .ant-btn-icon,
+  .ant-btn.ant-btn-variant-outlined .ant-btn-icon {
+    color: ${({ $primary }) => $primary || '#2563EB'};
+  }
+
+  /* Select / Input 对齐高度（与参考图一致） */
+  .ant-select .ant-select-selector {
+    height: 32px !important;
+    border-radius: 8px !important;
+    display: flex !important;
+    align-items: center !important;
+    border-color: ${({ $border }) => $border || '#D0D5DD'} !important;
+  }
+
+  .ant-select .ant-select-selection-item,
+  .ant-select .ant-select-selection-placeholder {
+    line-height: 30px !important;
+    color: ${({ $text }) => $text || '#101828'} !important;
+  }
+
+  .ant-input-affix-wrapper {
+    height: 32px;
+    border-radius: 8px;
+    border-color: ${({ $border }) => $border || '#D0D5DD'};
+  }
+
+  .ant-input-affix-wrapper input {
+    height: 30px;
+  }
+
+  /* Disabled 视觉 */
+  .ant-btn:disabled,
+  .ant-btn[disabled] {
+    background: #f2f4f7 !important;
+    border-color: #eaecf0 !important;
+    color: ${({ $textSecondary }) => $textSecondary || '#98A2B3'} !important;
+    opacity: 1;
+  }
+
+  /* ===== 表格空间更宽裕（仅影响本模块的 DynamicTable）===== */
+  .dynamic-table-th {
+    padding: 12px 16px;
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  .dynamic-table-td {
+    padding: 12px 16px;
+    line-height: 20px;
+  }
+
+  .dynamic-table-tr {
+    height: 56px;
+  }
+
+  /* 多选 checkbox 列更好点按 */
+  .dynamic-table-td input[type='checkbox'] {
+    width: 16px;
+    height: 16px;
+  }
+`;
+