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

package/src/examples/headlessChat/assets/mind.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.43707 9.27717C10.5618 8.15244 9.85264 5.61981 7.85314 3.62031C5.85367 1.62082 3.32101 0.911679 2.1963 2.03639C1.07159 3.1611 1.78074 5.69377 3.78021 7.69324C5.77971 9.69274 8.31237 10.4019 9.43707 9.27717Z" stroke="#4E6EF2" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.43707 6.42068C10.5618 7.54538 9.85264 10.078 7.85317 12.0775C5.85367 14.077 3.32101 14.7861 2.1963 13.6614C1.07159 12.5367 1.78074 10.0041 3.78021 8.00458C5.77971 6.00511 8.31237 5.29594 9.43707 6.42068Z" stroke="#4E6EF2" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.56348 9.27717C5.43878 8.15244 6.14792 5.61981 8.14739 3.62031C10.1469 1.62082 12.6796 0.911679 13.8043 2.03639C14.929 3.1611 14.2198 5.69377 12.2204 7.69324C10.2209 9.69274 7.68818 10.4019 6.56348 9.27717Z" stroke="#4E6EF2" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.56348 6.42066C5.43878 7.54536 6.14792 10.078 8.14742 12.0775C10.1469 14.077 12.6796 14.7861 13.8043 13.6614C14.929 12.5367 14.2198 10.0041 12.2204 8.00456C10.2209 6.0051 7.68818 5.29596 6.56348 6.42066Z" stroke="#4E6EF2" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/examples/headlessChat/assets/net.svg

@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.00001 14.6666C11.6819 14.6666 14.6667 11.6819 14.6667 7.99998C14.6667 4.31808 11.6819 1.33331 8.00001 1.33331C4.31811 1.33331 1.33334 4.31808 1.33334 7.99998C1.33334 11.6819 4.31811 14.6666 8.00001 14.6666Z" stroke="#4E6EF2" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1.33334 8H14.6667" stroke="#4E6EF2" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.00001 14.6666C9.47278 14.6666 10.6667 11.6819 10.6667 7.99998C10.6667 4.31808 9.47278 1.33331 8.00001 1.33331C6.52724 1.33331 5.33334 4.31808 5.33334 7.99998C5.33334 11.6819 6.52724 14.6666 8.00001 14.6666Z" stroke="#4E6EF2" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.28598 3.38068C4.49241 4.58711 6.15908 5.33331 8.00001 5.33331C9.84098 5.33331 11.5076 4.58711 12.7141 3.38068" stroke="#4E6EF2" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.7141 12.6193C11.5076 11.4129 9.84098 10.6667 8.00001 10.6667C6.15908 10.6667 4.49241 11.4129 3.28598 12.6193" stroke="#4E6EF2" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/examples/headlessChat/index.tsx

@@ -0,0 +1,298 @@
+import React, { useState, useEffect } from 'react';
+import withHeadLessChatAdopter from '../../modules/headlessChat';
+import { Paperclip } from 'lucide-react';
+import { rag_dev_server } from '../../utils/testconfigs';
+import LoginMain from '../../modules/login';
+import { decryptApiKey } from '../../utils/decryptApiKey';
+import { getQueryParam } from '../../utils';
+import Net from './assets/net.svg';
+import Mind from './assets/mind.svg';
+import { Icon } from '@mxmweb/zui';
+const mockSenderConfig = {
+  // 文件大小限制（字节数），例如：100MB = 100 * 1024 * 1024
+  upload_size_limit: 50 * 1024 * 1024,
+
+  // 文件数量限制
+  upload_number_limit: 10,
+
+  // 允许的文件类型列表
+  // 支持扩展名（如 'pdf', 'docx', 'jpg'）
+  // 支持 MIME 类型（如 'image/*', 'application/pdf'）
+  upload_file_type_limit: [
+    'ppt',
+    'pptx',
+    'doc',
+    'docx',
+    'xlsx',
+    'csv',
+    'pdf',
+    'text',
+    'html',
+    'jpg',
+    'jpeg',
+    'md',
+    'json',
+    'png',
+  ],
+
+  // 自定义错误提示信息（可选）
+  upload_limit_message: '文件不符合上传要求，请检查后重试',
+  actions: [
+    {
+      name: 'upload',
+      icon: <Paperclip color="#4E5969" size={20} />,
+      // badgeCount: 0,
+      tip: `最多上传10个文件（每个最大 50 MB），支持单次或批量上传ppt(x)、doc(x)、xlsx、csv、pdf、text、html、jp(e)g、md、json、png等文件`,
+    },
+  ],
+  switchs: [
+    {
+      label: '联网搜索',
+      name: 'netSearch',
+      type: 'checkbox',
+      defaultValue: false,
+      enabled: true,
+      icon: <img src={Net} className="w-[16px] h-[16px]" alt="net" />,
+    },
+    {
+      label: '推理思考',
+      name: 'reasoning',
+      type: 'checkbox',
+      defaultValue: false,
+      enabled: true,
+      icon: <img src={Mind} className="w-[16px] h-[16px]" alt="mind" />,
+    },
+  ],
+};
+
+const HeadlessChat = withHeadLessChatAdopter();
+
+export default function HeadlessChatExample() {
+  // 从 URL 路径获取 configId（格式：/791）
+  const pathname = window.location.pathname;
+  const pathConfigId =
+    pathname && pathname !== '/' && pathname !== '/index.html'
+      ? pathname.replace(/^\//, '').replace(/\/$/, '') // 去掉首尾的斜杠
+      : null;
+
+  // 从 URL 查询参数获取 token、apiKey、configId、initialMessage
+  const urlParams = new URLSearchParams(window.location.search);
+  const urlToken = getQueryParam('token');
+  const urlApiKey = getQueryParam('apiKey'); // new URLSearchParams解码会丢失+
+  const urlConfigId = urlParams.get('configId');
+  const urlBaseUrl = urlParams.get('url') || rag_dev_server.url;
+  const urlInitialMessage = getQueryParam('imsg'); // 从 URL query 中获取初始消息
+
+  // 合并路径参数和查询参数的 configId，路径参数优先
+  const finalConfigId = pathConfigId || urlConfigId;
+
+  // 状态管理
+  const [token, setToken] = useState<string | null>(() => {
+    // 优先从 sessionStorage 获取
+    const storedToken = sessionStorage.getItem('headless_chat_token');
+    if (storedToken) return storedToken;
+
+    // 如果 URL 中有 token 参数，直接使用（不管格式，不解密）
+    if (urlToken) {
+      console.log('[HeadlessChatExample] token 从 URL token 参数获取');
+      return urlToken;
+    }
+
+    // 尝试解密 API Key 参数获取 token
+
+    // 如果没有从 URL 获取到 token，返回 null（后续判断是否需要登录）
+    return null;
+  });
+
+  const [configId] = useState<string>(() => {
+    // 优先从路径参数或 URL 查询参数获取
+    if (finalConfigId) {
+      console.log('[HeadlessChatExample] configId 从 URL 参数获取:', finalConfigId);
+      return finalConfigId;
+    }
+
+    // 检查 token 参数是否是 apiKey_ 格式，如果是则解密获取 targetId
+    if (urlToken && urlToken.startsWith('apiKey_')) {
+      const decrypted = decryptApiKey(urlToken);
+      if (decrypted && decrypted.targetId) {
+        const targetId = String(decrypted.targetId);
+        console.log('[HeadlessChatExample] configId 从 token (apiKey_) 解密获取:', targetId);
+        return targetId;
+      }
+    }
+
+    // 尝试从 API Key 参数解密获取 targetId（作为 configId）
+    if (urlApiKey) {
+      const decrypted = decryptApiKey(urlApiKey);
+      if (decrypted && decrypted.targetId) {
+        const targetId = String(decrypted.targetId);
+        console.log('[HeadlessChatExample] configId 从 apiKey 参数解密获取:', targetId);
+        return targetId;
+      }
+    }
+
+    console.log('[HeadlessChatExample] configId 未找到，返回空字符串');
+    return '';
+  });
+
+  const [url] = useState(urlBaseUrl);
+  const [showLogin, setShowLogin] = useState(false);
+
+  // 检查是否需要显示登录页面
+  useEffect(() => {
+    // 如果没有 token，但有 configId（路径参数或查询参数），则显示登录页面
+    if (!token && finalConfigId) {
+      setShowLogin(true);
+    } else if (token) {
+      // 有 token 时，不显示登录页面
+      setShowLogin(false);
+    }
+  }, [token, finalConfigId]);
+
+  // 处理登录成功后的回调
+  const handleAfterLogin = (loginToken: string) => {
+    // 存储 token 到 sessionStorage
+    sessionStorage.setItem('headless_chat_token', loginToken);
+    setToken(loginToken);
+    setShowLogin(false);
+  };
+
+  // 如果显示登录页面，渲染登录组件
+  if (showLogin) {
+    return (
+      <LoginMain
+        eventsEmit={(eventName, data) => {
+          if (eventName === 'afterLogin') {
+            handleAfterLogin(data);
+          }
+        }}
+      />
+    );
+  }
+
+  // 如果没有 token 且不在登录页面，显示登录组件（只有在没有 configId 时才显示）
+  if (!token && !showLogin && !finalConfigId) {
+    return (
+      <LoginMain
+        eventsEmit={(eventName, data) => {
+          if (eventName === 'afterLogin') {
+            handleAfterLogin(data);
+          }
+        }}
+      />
+    );
+  }
+
+  const parsedStyles = {
+    theme: {
+      colors: {
+        primary: '#4E6EF2',
+        secondary: '#6c757d',
+        success: '#008000',
+        warning: '#FFA500',
+        error: '#FF0000',
+        info: '#0000FF',
+        background: '#ffff',
+        text: '#000000',
+        border: '#dee2e6',
+        disabled: '#808080',
+        disabledBackground: '#F5F5F5',
+        disabledText: '#808080',
+        shadow: '#000000',
+        appBackground: '#fff',
+        listBackground: '#f9f9f9',
+        dashboardBackground: '#ffffff',
+        sidebarBg: '#FBFBFF',
+        itemBg: 'transparent',
+        itemHoverBg: '#f0f4ff',
+        activeItemBg: 'linear-gradient(to right, #E3ECFF, #EEEBFF)',
+        activeItemText: '#1D2129',
+        itemText: '#333',
+        groupBg: 'transparent',
+        groupText: '#333',
+        groupBorder: '#dee2e6',
+      },
+      space: {
+        sidebar: 'md',
+        size: 'md',
+        radius: 'md',
+        padding: 'md',
+        margin: 'md',
+        shadow: 'md',
+        lineHeight: 'md',
+      },
+      icons: {
+        aiAvatar: '/icons/answerAwartar.png',
+        userAvatar: '/icons/questionAwartar.png',
+        // 使用 zui-icon 图标（rag/xxx 格式）
+        pdf: <Icon type="rag/pdf" size={18} />,
+        docx: <Icon type="rag/word" size={18} />,
+        doc: <Icon type="rag/word" size={18} />,
+        image: <Icon type="rag/pic" size={18} />,
+        sheets: <Icon type="rag/excel" size={18} />,
+        excel: <Icon type="rag/excel" size={18} />,
+        xls: <Icon type="rag/excel" size={18} />,
+        xlsx: <Icon type="rag/excel" size={18} />,
+        csv: <Icon type="rag/csv" size={18} />,
+        pptx: <Icon type="rag/ppt" size={18} />,
+        ppt: <Icon type="rag/ppt" size={18} />,
+        txt: <Icon type="rag/txt" size={18} />,
+        md: <Icon type="rag/txt" size={18} />,
+        html: <Icon type="rag/url" size={18} />,
+        htm: <Icon type="rag/url" size={18} />,
+        json: <Icon type="rag/json" size={18} />,
+        // 保留其他图标配置（如果存在）
+        video: '/icons/video.png',
+        audio: '/icons/audio.png',
+      },
+      others: {
+        baseFontWeight: 'normal',
+      },
+    },
+  };
+
+  // 确保 token 不为 null
+  if (!token) {
+    return null; // 这种情况应该已经被上面的逻辑处理了
+  }
+
+  return (
+    <div className="w-screen h-screen relative overflow-hidden">
+      <HeadlessChat
+        token={token}
+        url={url}
+        configId={configId} // 从 URL 参数或 API Key 解密获取
+        initialMessage={urlInitialMessage || undefined} // 从 URL query 中获取初始消息
+        welcomeContent="欢迎来到小鲸智能助手，有什么能帮你的么？"
+        senderConfig={mockSenderConfig as any}
+        styles={parsedStyles}
+        title="智能助手"
+        disclaimers={{
+          style: { fontSize: '16px', color: '#4a5565' },
+          text: '本回答由AI生成，内容仅供参考，请仔细甄别',
+          faqText: '已从FAQ中找到相关解答',
+        }}
+        eventsEmit={(eventName, data) => {
+          console.log('事件触发:', eventName, data);
+          // 可以在这里处理各种事件
+          switch (eventName) {
+            case 'action_retrive_tag':
+              console.log('点击了引用标签:', data);
+              break;
+            case 'referenceFile_view':
+              console.log('查看文件:', data);
+              break;
+            case 'referenceFile_download':
+              console.log('下载文件:', data);
+              break;
+            default:
+              break;
+          }
+        }}
+        onError={error => {
+          console.error('HeadlessChat 错误:', error);
+        }}
+      />
+    </div>
+  );
+}

package/src/examples/knowledgebaseDetails/index.tsx

@@ -0,0 +1,119 @@
+import { useMemo } from 'react';
+import { ThemeProvider, defaultTheme, type Styles, type ThemeFonts } from "@mxmweb/zui-theme";
+import KnowledgeBaseDetails from "../../modules/knowledgebaseDetails";
+import { createKnowledgeBaseDetailsServer } from '../../modules/knowledgebaseDetails/servers';
+import { rag_dev_server } from '../../utils/testconfigs';
+
+const defaultToken = rag_dev_server.token;
+export default function KnowledgeBaseDetailsDemo() {
+  // ===== 服务层（示例层）=====
+  // 业务层请求推荐在示例/页面层初始化 server，并传入业务组件，便于外部配置 baseURL/token/customHeaders
+  const server = useMemo(() => {
+    return createKnowledgeBaseDetailsServer({
+      /**
+       * 重要：
+       * - 本地开发请让请求走 Vite dev server 的 proxy（见 `gientech/vite.config.ts`）
+       * - 因此这里使用空 baseURL，使 axios 以“同源相对路径”发起请求（例如 /proxy/...）
+       *
+       * 否则如果写成 http://127.0.0.1:8889 会绕过 Vite proxy，导致请求打到不存在/不一致的地址而“看起来不通”
+       */
+      baseURL: '',
+      // 由外部决定是否走代理前缀（本地开发走 Vite proxy）
+      pathPrefix: '/proxy',
+      // TODO: 替换为真实 token（或从你项目的登录态/本地存储读取）
+      token: defaultToken,
+      /**
+       * 注意：当前后端鉴权方式是 `Authorization: <token>`（不带 Bearer）
+       * - 因此这里重写 token 注入策略
+       */
+      buildAuthHeaders: (t) => ({ Authorization: t }),
+
+      customHeaders: {
+        'x-app': 'gientech',
+      },
+      // 对某个请求单独 header（key 由业务层自行约定）
+      requestHeaders: {
+        kb_details: {
+          'x-kb-module': 'knowledgebaseDetails',
+        },
+      },
+    });
+  }, []);
+
+  const styles: Styles = {
+    theme: {
+      ...defaultTheme,
+      colors: {
+        ...defaultTheme.colors,
+        dashboardBorder: 'none',
+        dashboardShadow: 'none',
+      },
+      fonts: {
+        ...defaultTheme.fonts,
+        // 使用自定义字体
+        body: {
+          ...defaultTheme.fonts?.body,
+          family: 'Inter, CustomDisplayFont, PingFang SC, Microsoft YaHei, Arial, sans-serif',
+        },
+        heading: {
+          ...defaultTheme.fonts?.heading,
+          family: 'Inter, CustomDisplayFont, PingFang SC, Microsoft YaHei, Arial, sans-serif',
+        },
+        // 定义自定义字体（系统没有的字体）
+        // 示例：从 Google Fonts CDN 加载 Inter 字体
+        // 注意：实际使用时，请替换为你的字体文件路径或 CDN URL
+        customFonts: [
+          {
+            family: 'Inter',
+            // 方式1：使用单个字体文件（推荐 woff2 格式，体积小、加载快）
+            src: 'https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiJ-Ek-_EeA.woff2',
+            format: 'woff2',
+            weight: '400',
+            style: 'normal',
+            display: 'swap', // 避免文本闪烁，推荐使用
+          },
+          {
+            family: 'Inter',
+            src: 'https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiJ-Ek-_EeA.woff2',
+            format: 'woff2',
+            weight: '600',
+            style: 'normal',
+            display: 'swap',
+          },
+          // 方式2：使用多个字体文件（提供浏览器兼容性回退）
+          {
+            family: 'CustomDisplayFont',
+            src: [
+              'https://fonts.gstatic.com/s/poppins/v21/pxiEyp8kv8JHgFVrJJfecg.woff2', // woff2 格式（现代浏览器）
+              'https://fonts.gstatic.com/s/poppins/v21/pxiEyp8kv8JHgFVrJJfecg.woff', // woff 回退（旧浏览器）
+            ],
+            weight: '400',
+            style: 'normal',
+            display: 'swap',
+          },
+          // 方式3：使用本地字体文件（示例）
+          // {
+          //   family: 'LocalCustomFont',
+          //   src: '/fonts/LocalCustomFont.woff2',
+          //   format: 'woff2',
+          //   weight: 'normal',
+          //   display: 'swap',
+          // },
+        ],
+      } as ThemeFonts,
+    },
+    mode: 'light',
+  };
+  return (
+    <ThemeProvider theme={styles.theme} mode={styles.mode}>
+      <KnowledgeBaseDetails
+        knowledgeBaseId={'4790'}
+        kbId={4790}
+        server={server}
+        // 如果你不想通过 server 管理，也可以直接传 url/token（组件侧可按需要使用）
+        // url="http://127.0.0.1:8889"
+        // token="REPLACE_ME_TOKEN"
+      />
+    </ThemeProvider>
+  )
+}

package/src/examples/ragDatabaseDataPage/index.tsx

@@ -0,0 +1,40 @@
+import { ThemeProvider } from 'styled-components';
+import { defaultTheme } from '@mxmweb/zui-theme';
+import DatabaseTableView from '../../modules/databaseTable';
+import {rag_dev_database_data,rag_dev_server,token } from '../../utils/testconfigs';
+
+export default function DatabaseDataPage() {
+  const customComponents: any = {
+    ContentLoading: () => (
+      <div className="flex flex-col items-center justify-center h-full">
+        <div className="text-xl font-semibold mb-3">
+          {/* <Spin indicator={<LoadingOutlined spin />} size="large" /> */}
+        </div>
+        <div className="text-base mb-2" style={{ color: '#055AFF' }}>
+          加载中...
+        </div>
+      </div>
+    ),
+  };
+
+  const handlePageEventsEmit = (name: string, data: any) => {
+    console.log('[DatabaseIdPage] pageEventsEmit ', name, data);
+  };
+  return (
+    <ThemeProvider theme={defaultTheme}>
+      <DatabaseTableView
+        url={rag_dev_server.url}
+        token={token}
+        role="admin"
+        fileId={rag_dev_database_data.fileId}
+        dbId={rag_dev_database_data.dbId}
+        tableId={rag_dev_database_data.tableId}
+        tableName={rag_dev_database_data.tableName}
+        dbType={rag_dev_database_data.dbType}
+        eventsEmit={handlePageEventsEmit}
+        // getBtnDisabled={getBtnDisabled}
+        CustomComponents={customComponents}
+      />
+    </ThemeProvider>
+  );
+}

package/src/examples/ragDatabaseIdPage/index.tsx

@@ -0,0 +1,126 @@
+import { ThemeProvider } from 'styled-components';
+import { defaultTheme } from '@mxmweb/zui-theme';
+import React, { useRef, useState, useEffect, useMemo } from 'react';
+import DatabaseIdView, { type DatabaseViewAdopterRef } from '../../modules/databaseId';
+import { message, Spin, Drawer, Button, Tabs, Form, Select, Tooltip, } from "antd";
+
+const { useForm } = Form;
+import { rag_dev_database_id } from '../../utils/testconfigs';
+
+export default function DatabaseIdPage() {
+  const childRef = useRef<DatabaseViewAdopterRef>(null);
+
+  const [activeKey, setActiveKey] = useState("2")
+  const customComponents: any = {
+    ContentLoading: () => (
+      <div className="flex flex-col items-center justify-center h-full">
+        <div className="text-xl font-semibold mb-3">
+          {/* <Spin indicator={<LoadingOutlined spin />} size="large" /> */}
+        </div>
+        <div className="text-base mb-2" style={{ color: '#055AFF' }}>
+          加载中...
+        </div>
+      </div>
+    ),
+    ContainerLoading: () => (
+      <div className="flex flex-col items-center justify-center h-full">
+        <div className="text-xl font-semibold mb-3">
+          {/* <Spin indicator={<LoadingOutlined spin />} size="large" /> */}
+        </div>
+        <div className="text-base mb-2" style={{ color: '#055AFF' }}>
+          加载中...
+        </div>
+      </div>
+    ),
+  };
+
+  const handlePageEventsEmit = (name: string, data: any) => {
+    console.log("[DatabaseIdPage] pageEventsEmit ", name, data);
+    if (name.startsWith("request:error")) {
+      message.error(data.errorMsg);
+      return;
+    }
+    switch (name) {
+
+      case "toolbar_auth": {
+        setDrawerVisible(true);
+
+        break;
+      }
+
+
+      default:
+        return;
+    }
+
+  };
+
+  const [drawerVisible, setDrawerVisible] = useState(false);
+
+  const closeDrawer = () => {
+    setDrawerVisible(false);
+  };
+  const handleSubmit = async (values?: any) => {
+    if (activeKey == "2") {
+      console.log("提交的表单数据:", values);
+      message.success("已更新授权设置");
+      setDrawerVisible(false);
+    }
+
+
+  };
+
+  return (
+    <>
+      <DatabaseIdView
+        url={rag_dev_database_id.url}
+        token={rag_dev_database_id.token}
+        role="admin"
+        id={rag_dev_database_id.id}
+        dbType={rag_dev_database_id.dbType as 'DataTable' | 'DirectDB'}
+        CustomComponents={customComponents}
+        uploadUrl="http://10.15.12.11:8889/index/database/dataTable/uploadFile"
+        eventsEmit={handlePageEventsEmit}
+        ref={childRef}
+      // getBtnDisabled={getBtnDisabled}
+      />
+
+      <Drawer
+        title={"测试"}
+        placement="right"
+        width={560}
+        onClose={() => closeDrawer()}
+        closeIcon={false}
+
+        open={drawerVisible}
+        styles={{
+          header: {
+            padding: 0,
+            border: "none"
+          }
+        }}
+
+        destroyOnClose
+        footer={
+          <div className={`flex justify-end items-center gap-3`}>
+            <Button onClick={closeDrawer}>取消</Button>
+            <Button type="primary" onClick={handleSubmit}>
+              确认
+            </Button>
+          </div>
+        }
+
+      >      <div onClick={() => {
+        if (childRef.current) {
+          // 调用子组件方法
+          const result = childRef.current.getDatabaseDetail();
+          console.log(result); // "来自子组件的数据"
+
+        }
+      }}>dianji</div>
+
+      </Drawer >
+    </>
+
+  );
+}

package/src/examples/ragDatabasePage/index.tsx

@@ -0,0 +1,36 @@
+import DatabaseView from '../../modules/database';
+import { rag_dev_database } from '../../utils/testconfigs';
+
+const token = rag_dev_database.token;
+const url = rag_dev_database.url;
+
+const DatabasePage = () => {
+  const customComponents: any = {
+    ContentLoading: () => (
+      <div className="flex flex-col items-center justify-center h-full">
+        <div className="text-xl font-semibold mb-3">
+          {/* <Spin indicator={<LoadingOutlined spin />} size="large" /> */}
+        </div>
+        <div className="text-base mb-2" style={{ color: '#055AFF' }}>
+          加载中...
+        </div>
+      </div>
+    ),
+  };
+
+  const handlePageEventsEmit = (name: string, data: any) => {
+    console.log('[DatabasePage] pageEventsEmit ', name, data);
+  };
+  return (
+    <DatabaseView
+      url={url}
+      token={token}
+      role="admin"
+      eventsEmit={handlePageEventsEmit}
+      CustomComponents={customComponents}
+      // getBtnDisabled={getBtnDisabled}
+    />
+  );
+};
+
+export default DatabasePage;