@gientech/modual 1.9.3 → 1.9.4-fix.1

package/src/examples/streamFiles/index.tsx

@@ -0,0 +1,417 @@
+import React, { useState } from 'react';
+import { GientechStreamReader, registerPDFWorker } from '../../modules/streamFilesReader';
+import { Styles } from '@mxmweb/zui';
+registerPDFWorker('/worker/pdf.worker.min.js');
+
+// 演示用的主题配置
+const demoTheme: Styles = {
+  colors: {
+    primary: '#1890ff',
+    secondary: '#52c41a',
+    success: '#52c41a',
+    warning: '#faad14',
+    error: '#ff4d4f',
+    info: '#1890ff',
+    background: '#ffffff',
+    text: '#262626',
+    border: '#d9d9d9',
+    disabled: '#bfbfbf',
+    disabledBackground: '#f5f5f5',
+    disabledText: '#bfbfbf',
+  },
+  space: {
+    sidebar: '200px',
+    size: '14px',
+    radius: '6px',
+    padding: '16px',
+    margin: '8px',
+    shadow: '0 2px 8px rgba(0,0,0,0.15)',
+    lineHeight: '1.5715',
+  },
+  icons: {},
+  others: {
+    baseFontWeight: 'normal',
+  },
+};
+
+// 模拟的标注数据
+const mockAnnotations = [
+  {
+    id: '1',
+    type: 'highlight',
+    content: '这是一个重要的段落',
+    position: { x: 100, y: 200 },
+    page: 1,
+  },
+  {
+    id: '2',
+    type: 'note',
+    content: '这是备注内容',
+    position: { x: 150, y: 300 },
+    page: 1,
+  },
+];
+
+const StreamFilesDemo: React.FC = () => {
+  const [currentFile, setCurrentFile] = useState({
+    convertedFilePath:
+      'http://10.15.12.13:9000/dev-rag-data/富文本文档/需求设计--抽取式构建PPT.pptx/V0/需求设计--抽取式构建PPT.pdf',
+    fileName: '示例文档.pdf',
+    fileType: 'pdf',
+    totalPages: 10,
+  });
+
+  const [fileType, setFileType] = useState<'pdf' | 'markdown' | 'image' | 'text'>('pdf');
+
+  // 处理事件
+  const handleEventsEmit = (name: string, data?: any) => {
+    console.log('GientechStreamReader 事件:', name, data);
+
+    switch (name) {
+      case 'pageChange':
+        console.log('页面变化:', data);
+        break;
+      case 'zoomChange':
+        console.log('缩放变化:', data);
+        break;
+      case 'rotateChange':
+        console.log('旋转变化:', data);
+        break;
+      case 'md_annotation_add':
+        console.log('Markdown 标注添加:', data);
+        break;
+      case 'table_annotation_add':
+        console.log('表格标注添加:', data);
+        break;
+      case 'request_finish':
+        console.log('请求完成，CSRF Token:', data);
+        break;
+      case 'viewer:close':
+        console.log('查看器关闭');
+        break;
+      default:
+        console.log('其他事件:', name, data);
+    }
+  };
+
+  // 切换文件类型
+  const switchFileType = (type: 'pdf' | 'markdown' | 'image' | 'text') => {
+    setFileType(type);
+
+    const fileConfigs = {
+      pdf: {
+        convertedFilePath: '/api/files/sample.pdf',
+        fileName: '示例PDF文档.pdf',
+        fileType: 'pdf',
+        totalPages: 10,
+      },
+      markdown: {
+        convertedFilePath: '/api/files/sample.md',
+        fileName: '示例Markdown文档.md',
+        fileType: 'markdown',
+        totalPages: 1,
+      },
+      image: {
+        convertedFilePath: '/api/files/sample.jpg',
+        fileName: '示例图片.jpg',
+        fileType: 'image',
+        totalPages: 1,
+      },
+      text: {
+        convertedFilePath: '/api/files/sample.txt',
+        fileName: '示例文本文件.txt',
+        fileType: 'text',
+        totalPages: 1,
+      },
+    };
+
+    setCurrentFile(fileConfigs[type]);
+  };
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100vh',
+        background: '#f0f2f5',
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      }}
+    >
+      {/* 顶部控制栏 */}
+      <div
+        style={{
+          background: '#fff',
+          padding: '16px',
+          borderBottom: '1px solid #d9d9d9',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '16px',
+          boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
+        }}
+      >
+        <h2 style={{ margin: 0, color: '#262626' }}>GientechStreamReader 演示</h2>
+
+        <div style={{ display: 'flex', gap: '8px' }}>
+          <button
+            onClick={() => switchFileType('pdf')}
+            style={{
+              padding: '6px 12px',
+              border: '1px solid #d9d9d9',
+              borderRadius: '4px',
+              background: fileType === 'pdf' ? '#1890ff' : '#fff',
+              color: fileType === 'pdf' ? '#fff' : '#262626',
+              cursor: 'pointer',
+              fontSize: '12px',
+            }}
+          >
+            PDF
+          </button>
+          <button
+            onClick={() => switchFileType('markdown')}
+            style={{
+              padding: '6px 12px',
+              border: '1px solid #d9d9d9',
+              borderRadius: '4px',
+              background: fileType === 'markdown' ? '#1890ff' : '#fff',
+              color: fileType === 'markdown' ? '#fff' : '#262626',
+              cursor: 'pointer',
+              fontSize: '12px',
+            }}
+          >
+            Markdown
+          </button>
+          <button
+            onClick={() => switchFileType('image')}
+            style={{
+              padding: '6px 12px',
+              border: '1px solid #d9d9d9',
+              borderRadius: '4px',
+              background: fileType === 'image' ? '#1890ff' : '#fff',
+              color: fileType === 'image' ? '#fff' : '#262626',
+              cursor: 'pointer',
+              fontSize: '12px',
+            }}
+          >
+            图片
+          </button>
+          <button
+            onClick={() => switchFileType('text')}
+            style={{
+              padding: '6px 12px',
+              border: '1px solid #d9d9d9',
+              borderRadius: '4px',
+              background: fileType === 'text' ? '#1890ff' : '#fff',
+              color: fileType === 'text' ? '#fff' : '#262626',
+              cursor: 'pointer',
+              fontSize: '12px',
+            }}
+          >
+            文本
+          </button>
+        </div>
+
+        <div style={{ marginLeft: 'auto', fontSize: '12px', color: '#8c8c8c' }}>
+          当前文件: {currentFile.fileName}
+        </div>
+      </div>
+
+      {/* 主要内容区域 */}
+      <div style={{ flex: 1, display: 'flex', gap: '16px', padding: '16px' }}>
+        {/* 左侧信息面板 */}
+        <div
+          style={{
+            width: '300px',
+            background: '#fff',
+            borderRadius: '6px',
+            padding: '16px',
+            boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
+            height: 'fit-content',
+          }}
+        >
+          <h3 style={{ margin: '0 0 16px 0', color: '#262626' }}>配置信息</h3>
+
+          <div style={{ marginBottom: '12px' }}>
+            <label
+              style={{ display: 'block', fontSize: '12px', color: '#8c8c8c', marginBottom: '4px' }}
+            >
+              文件路径:
+            </label>
+            <code
+              style={{
+                display: 'block',
+                padding: '4px 8px',
+                background: '#f5f5f5',
+                borderRadius: '4px',
+                fontSize: '11px',
+                wordBreak: 'break-all',
+              }}
+            >
+              {currentFile.convertedFilePath}
+            </code>
+          </div>
+
+          <div style={{ marginBottom: '12px' }}>
+            <label
+              style={{ display: 'block', fontSize: '12px', color: '#8c8c8c', marginBottom: '4px' }}
+            >
+              文件类型:
+            </label>
+            <span
+              style={{
+                display: 'inline-block',
+                padding: '2px 8px',
+                background: '#e6f7ff',
+                color: '#1890ff',
+                borderRadius: '4px',
+                fontSize: '11px',
+              }}
+            >
+              {currentFile.fileType}
+            </span>
+          </div>
+
+          <div style={{ marginBottom: '12px' }}>
+            <label
+              style={{ display: 'block', fontSize: '12px', color: '#8c8c8c', marginBottom: '4px' }}
+            >
+              总页数:
+            </label>
+            <span style={{ fontSize: '14px', color: '#262626' }}>{currentFile.totalPages}</span>
+          </div>
+
+          <div style={{ marginBottom: '12px' }}>
+            <label
+              style={{ display: 'block', fontSize: '12px', color: '#8c8c8c', marginBottom: '4px' }}
+            >
+              标注数量:
+            </label>
+            <span style={{ fontSize: '14px', color: '#262626' }}>{mockAnnotations.length}</span>
+          </div>
+
+          <div style={{ marginBottom: '12px' }}>
+            <label
+              style={{ display: 'block', fontSize: '12px', color: '#8c8c8c', marginBottom: '4px' }}
+            >
+              功能特性:
+            </label>
+            <ul style={{ margin: 0, paddingLeft: '16px', fontSize: '12px', color: '#595959' }}>
+              <li>分页加载 (PDF)</li>
+              <li>缓存机制</li>
+              <li>缩放控制</li>
+              <li>旋转功能 (图片)</li>
+              <li>标注支持</li>
+              <li>主题定制</li>
+            </ul>
+          </div>
+        </div>
+
+        {/* 右侧文件查看器 */}
+        <div
+          style={{
+            flex: 1,
+            background: '#fff',
+            borderRadius: '6px',
+            overflow: 'hidden',
+            boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
+          }}
+        >
+          <GientechStreamReader
+            convertedFilePath={currentFile.convertedFilePath}
+            fileName={currentFile.fileName}
+            fileType={currentFile.fileType}
+            totalPages={currentFile.totalPages}
+            initialPage={1}
+            annotations={mockAnnotations}
+            pageSize={5}
+            streamApiUrl="/proxy/index/knowledgeBase/file/stream"
+            authorization="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJHSUVOLVJBRyIsImF1ZCI6IkpJQUJJTkJJTjAwIiwidXNlcklkIjoxMjQzLCJ1c2VyTmFtZSI6IkpJQUJJTkJJTjAwIiwic3ViIjoibWl4ZWRRdWFudHVtIiwiZXhwIjoxNzY0MDM4NzQ2LCJpYXQiOjE3NjM5NTIzNDZ9.C8UIIJBh9HkvlolY6OtgyvKiaQWOpau7v4N1TYMUoRA"
+            eventsEmit={handleEventsEmit}
+            styles={{ theme: demoTheme }}
+            tools={{
+              annotation: true,
+              download: true,
+              zoom: true,
+              close: false,
+              navigation: true,
+              rotate: fileType === 'image',
+            }}
+            customComponents={{
+              LoadingComponent: ({ status, theme }) => (
+                <div
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    height: '400px',
+                    background: theme.colors.background,
+                    color: theme.colors.text,
+                  }}
+                >
+                  <div
+                    style={{
+                      width: '40px',
+                      height: '40px',
+                      border: `3px solid ${theme.colors.border}`,
+                      borderTop: `3px solid ${theme.colors.primary}`,
+                      borderRadius: '50%',
+                      animation: 'spin 1s linear infinite',
+                      marginBottom: '16px',
+                    }}
+                  />
+                  <div style={{ fontSize: '14px' }}>{status}</div>
+                  <style>{`
+                    @keyframes spin {
+                      0% { transform: rotate(0deg); }
+                      100% { transform: rotate(360deg); }
+                    }
+                  `}</style>
+                </div>
+              ),
+              ErrorComponent: ({ error, theme }) => (
+                <div
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    height: '400px',
+                    background: theme.colors.background,
+                    color: theme.colors.error,
+                    textAlign: 'center',
+                    padding: '20px',
+                  }}
+                >
+                  <div style={{ fontSize: '48px', marginBottom: '16px' }}>⚠️</div>
+                  <div style={{ fontSize: '16px', marginBottom: '8px' }}>加载失败</div>
+                  <div style={{ fontSize: '12px', color: theme.colors.text }}>{error}</div>
+                </div>
+              ),
+            }}
+          />
+        </div>
+      </div>
+
+      {/* 底部日志区域 */}
+      <div
+        style={{
+          background: '#fff',
+          borderTop: '1px solid #d9d9d9',
+          padding: '12px 16px',
+          fontSize: '12px',
+          color: '#8c8c8c',
+          maxHeight: '120px',
+          overflow: 'auto',
+        }}
+      >
+        <div style={{ marginBottom: '8px', fontWeight: '500' }}>事件日志:</div>
+        <div style={{ fontFamily: 'Monaco, Consolas, "Courier New", monospace' }}>
+          打开浏览器控制台查看详细的事件日志...
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default StreamFilesDemo;

package/src/lib_enter.ts

@@ -0,0 +1,43 @@
+// Gientech 多入口集成项目 - 统一导出入口
+// 导出所有业务模块和组件
+
+// 聊天模块
+export * from './modules/chat';
+
+// 数据库模块
+export * from './modules/database';
+
+// 数据库ID模块
+export * from './modules/databaseId';
+
+// 数据库表模块
+export * from './modules/databaseTable';
+
+// // 无头聊天模块
+// export * from './modules/headlessChat';
+
+// 登录模块
+export * from './modules/login';
+
+// 模型管理模块
+export * from './modules/modelManage';
+
+// 搜索模块（暂不导出，待重构后再开放）
+// export * from './modules/search';
+
+// 敏感词模块
+export * from './modules/sensitive';
+
+// 流式文件读取器模块
+export * from './modules/streamFilesReader';
+
+// 敏感词模块
+export * from './modules/assistantConfig';
+
+// 从 @mxmweb/fviewer 重新导出 PDF Worker 注册函数和类型
+export { registerPDFWorker } from '@mxmweb/fviewer';
+export type { Annotation } from '@mxmweb/fviewer';
+
+// 导出 AppTheme 类型（如果用户需要从 @gientech/modual 导入）
+export type { AppTheme } from '@mxmweb/zui';
+export { defaultTheme } from '@mxmweb/zui-theme';

package/src/main.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import Chat from './examples/chat/index';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(<Chat />);

package/src/main.tsx.backup

@@ -0,0 +1,5 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import HeadlessChat from './examples/headlessChat/index';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(<HeadlessChat />);

package/src/modules/assistantConfig/assets/databse.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="24" height="24" rx="3.55556" fill="#925BFF"/>
+<path d="M11.9971 11.265C15.249 11.265 17.8891 10.443 17.8891 9.423V7.95288C17.8891 6.93291 15.2492 6.11084 11.9971 6.11084C8.74513 6.11084 6.10504 6.93276 6.10504 7.95288V9.42285C6.10504 10.437 8.73898 11.265 11.9971 11.265Z" fill="white"/>
+<path d="M11.9971 14.577C15.249 14.577 17.8891 13.7551 17.8891 12.7349V10.527C17.8891 11.5469 15.2492 12.369 11.9971 12.369C8.74513 12.369 6.10504 11.5471 6.10504 10.527V12.7349C6.10504 13.749 8.73898 14.577 11.9971 14.577Z" fill="white"/>
+<path d="M11.9971 15.681C8.7451 15.681 6.11102 14.859 6.11102 13.839V16.0469C6.11102 17.0609 8.74496 17.889 12.0031 17.889C15.255 17.889 17.8951 17.0671 17.8951 16.0469V13.8391C17.889 14.859 15.249 15.681 11.9971 15.681Z" fill="white"/>
+</svg>

package/src/modules/assistantConfig/assets/graph.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="24" height="24" rx="3.55556" fill="#00C1B8"/>
+<path d="M17.9887 12.582C18.1207 13.6621 17.2267 14.5801 16.1526 14.4901C15.3306 14.4181 14.6645 13.7521 14.6045 12.924C14.5745 12.558 14.6645 12.21 14.8445 11.9159C14.9285 11.7779 14.9045 11.6039 14.8025 11.4899L14.3885 11.0339C14.2805 10.9139 14.1005 10.8839 13.9565 10.9559C13.6144 11.1239 13.2304 11.2199 12.8224 11.2199C12.6244 11.2199 12.4324 11.1959 12.2464 11.1539C12.0963 11.1179 11.9463 11.1779 11.8563 11.3039L11.2803 12.1259C11.1783 12.276 11.1963 12.474 11.3223 12.606C11.8983 13.188 12.2464 13.9921 12.2284 14.8741C12.1924 16.4702 10.9203 17.7963 9.32417 17.9043C7.45804 18.0243 5.90994 16.4942 6.00595 14.6281C6.08995 13.038 7.38604 11.7599 8.97614 11.6879C9.42017 11.6699 9.8402 11.7419 10.2302 11.8919C10.3922 11.9519 10.5722 11.8979 10.6743 11.7599L11.1663 11.0579C11.2743 10.9019 11.2503 10.6919 11.1123 10.5658C10.5302 10.0498 10.1882 9.26976 10.2662 8.4177C10.3742 7.18162 11.3823 6.18556 12.6244 6.09555C14.1245 5.98154 15.3846 7.17562 15.3846 8.65172C15.3846 9.20376 15.2106 9.70779 14.9105 10.1278C14.8085 10.2658 14.8205 10.4578 14.9345 10.5898L15.3786 11.0819C15.4746 11.1899 15.6306 11.2259 15.7626 11.1779C16.0086 11.0939 16.2786 11.0639 16.5606 11.1119C17.3047 11.2259 17.8987 11.8319 17.9887 12.582Z" fill="white"/>
+</svg>

package/src/modules/assistantConfig/assets/knowledge.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="20" height="20" rx="2.22222" fill="#00B2F9"/>
+<path d="M5.3125 13.9672V13.975C5.32812 14.6938 5.89922 15.2734 6.61875 15.2734H13.9062C14.3375 15.2734 14.6875 14.9289 14.6875 14.4977V5.50703C14.6875 5.40447 14.6673 5.30292 14.628 5.20818C14.5887 5.11344 14.5312 5.02736 14.4586 4.95488C14.3861 4.8824 14.2999 4.82492 14.2052 4.78575C14.1104 4.74657 14.0088 4.72646 13.9062 4.72656H6.875C6.01172 4.72656 5.3125 5.42031 5.3125 6.28359V13.9672ZM7.5 9.24531V6.25C7.5 6.07813 7.64062 5.9375 7.8125 5.9375H9.6875C9.86016 5.9375 10 6.07813 10 6.25V9.24531C10 9.30716 9.98175 9.36762 9.94741 9.41906C9.91308 9.47049 9.86425 9.51058 9.80712 9.53426C9.74999 9.55793 9.68712 9.56412 9.62647 9.55204C9.56581 9.53996 9.51011 9.51016 9.46641 9.46641L8.97109 8.97109C8.94207 8.94204 8.90761 8.91899 8.86967 8.90326C8.83173 8.88754 8.79107 8.87944 8.75 8.87944C8.70893 8.87944 8.66827 8.88754 8.63033 8.90326C8.59239 8.91899 8.55793 8.94204 8.52891 8.97109L8.03359 9.46641C7.98989 9.51016 7.93418 9.53996 7.87353 9.55204C7.81288 9.56412 7.75001 9.55793 7.69288 9.53426C7.63575 9.51058 7.58692 9.47049 7.55259 9.41906C7.51825 9.36762 7.49995 9.30716 7.5 9.24531ZM6.54375 14.2063C6.45208 14.1156 6.40625 14.0052 6.40625 13.875C6.40625 13.7458 6.45208 13.6354 6.54375 13.5438C6.6349 13.4521 6.74531 13.4062 6.875 13.4062H13.5938V14.3438H6.875C6.74531 14.3438 6.6349 14.2979 6.54375 14.2063Z" fill="white"/>
+</svg>

package/src/modules/assistantConfig/assets/sensitive.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="20" height="20" rx="2.22222" fill="#FFCC3C"/>
+<path d="M13.3263 12.7917H7.53763C7.33426 12.8116 7.17923 12.9825 7.17923 13.1867C7.17923 13.3909 7.33426 13.5618 7.53763 13.5817H13.3277C13.3828 13.5871 13.4384 13.5809 13.4909 13.5634C13.5435 13.546 13.5918 13.5178 13.6328 13.4806C13.6738 13.4434 13.7066 13.3981 13.729 13.3474C13.7514 13.2968 13.763 13.2421 13.763 13.1867C13.763 13.1313 13.7514 13.0766 13.729 13.026C13.7066 12.9753 13.6738 12.93 13.6328 12.8928C13.5918 12.8556 13.5435 12.8274 13.4909 12.8099C13.4384 12.7925 13.3828 12.7863 13.3277 12.7917H13.3263ZM9.19742 7.60418L8.84232 8.55193H9.57339L9.19742 7.60418Z" fill="white"/>
+<path d="M15.3211 14.7707V6.9692H14.4704V14.3543H6.70511C6.06668 14.3392 5.55704 13.8173 5.55704 13.1788C5.55704 12.5402 6.06668 12.0184 6.70511 12.0033H13.352C13.4644 12.0075 13.5735 11.9648 13.653 11.8852C13.6923 11.8459 13.7231 11.7988 13.7434 11.747C13.7638 11.6952 13.7731 11.6398 13.771 11.5842V5.20102C13.7736 5.14526 13.7646 5.08958 13.7445 5.03752C13.7244 4.98546 13.6936 4.93816 13.6542 4.89865C13.6148 4.85915 13.5675 4.82832 13.5155 4.80812C13.4634 4.78792 13.4077 4.7788 13.352 4.78134H6.70511C5.60281 4.80136 4.71609 5.69369 4.70291 6.79599V13.1759C4.71609 14.283 5.61038 15.1773 6.71756 15.1905H14.8893C15.0042 15.1994 15.1173 15.1585 15.1999 15.0782C15.2407 15.0385 15.2727 14.9905 15.2936 14.9375C15.3145 14.8845 15.3239 14.8276 15.3211 14.7707ZM8.98782 6.78585H9.44888L10.7213 9.92562H10.2475L9.9075 9.06759H8.51871L8.19742 9.92562H7.72354L8.98782 6.78585Z" fill="white"/>
+</svg>

package/src/modules/assistantConfig/components/Database.tsx

@@ -0,0 +1,171 @@
+import { useState, useEffect, useRef } from 'react';
+import ResourceBinderItem from './ResourceBinderItem';
+import SearchableSelector, { type SearchableSelectorRef } from './SearchableSelector';
+import { Button, Modal } from 'antd';
+import { Plus } from 'lucide-react';
+import Icon from '../assets/databse.svg';
+import AxiosInstance from '../server';
+
+const maxCount = 10;
+
+const DatabaseSection = ({ url, token, role, eventsEmit, sectionData, disabled }: any) => {
+  const [options, setOptions]: any = useState([]);
+  const [data, setData]: any = useState([]);
+  const [isModalShow, setIsModalShow] = useState(false);
+  const selectorRef = useRef<SearchableSelectorRef>(null);
+
+  const { fetchDatabases } = AxiosInstance({
+    url,
+    token,
+    role,
+    eventsEmit,
+  });
+
+  useEffect(() => {
+    getList();
+  }, []);
+
+  useEffect(() => {
+    if (sectionData) {
+      let _data = [] as any;
+      (sectionData || []).map((db: any) => {
+        const _targetDb = (options || []).find((i: any) => i.key === db.key);
+        if (_targetDb) {
+          const { key, label } = _targetDb;
+          _data.push({
+            key,
+            label,
+          });
+        }
+      });
+      setData(_data);
+    }
+  }, [sectionData, options]);
+
+  const getList = async () => {
+    try {
+      const res = await fetchDatabases();
+      if (res) {
+        const options = (res || []).map((item: any) => {
+          return {
+            key: item.primitiveName,
+            label: item.name,
+          };
+        });
+        setOptions(options);
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  const handleEventsEmit = (name: string, eventsData?: any) => {
+    switch (name) {
+      case 'removeItem':
+        const _data = data.filter((p: any) => p.key !== eventsData.key);
+        setData([..._data]);
+        eventsEmit && eventsEmit('database_selected', _data);
+        break;
+    }
+  };
+
+  const handleOk = () => {
+    // 通过 ref 获取选中的项
+    const selectedItems = selectorRef.current?.getSelectedItems() || [];
+    setData(selectedItems);
+    setIsModalShow(false);
+    eventsEmit && eventsEmit('database_selected', selectedItems);
+  };
+
+  return (
+    <div style={{ borderBottom: '1px solid #E5E6EB', padding: '12px 0 ' }}>
+      <div className="flex items-center justify-between">
+        <div className="flex items-center">
+          <img src={Icon} />
+          <span
+            className="font-medium "
+            style={{
+              marginLeft: '10px',
+            }}
+          >
+            数据库
+          </span>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <Button
+            color="primary"
+            variant="outlined"
+            size="small"
+            icon={<Plus size={14} />}
+            onClick={() => setIsModalShow(true)}
+            disabled={data.length >= maxCount || disabled}
+          >
+            添加
+          </Button>
+        </div>
+      </div>
+      {data?.length > 0 && (
+        <ResourceBinderItem
+          countText={data?.length > 0 ? `已选：${data?.length}个数据库` : undefined}
+          eventsEmit={handleEventsEmit}
+          data={data}
+        />
+      )}
+
+      <Modal
+        width={740}
+        title="选择数据库"
+        className="assistant-config-resource-bind-modal"
+        okText="确定"
+        cancelText="取消"
+        open={isModalShow}
+        onOk={handleOk}
+        onCancel={() => setIsModalShow(false)}
+        destroyOnHidden
+      >
+        <SearchableSelector
+          ref={selectorRef}
+          dataSource={options}
+          value={data}
+          searchPlaceholder="搜索名称..."
+          width="700px"
+          height="500px"
+          title="数据库"
+          maxCount={maxCount}
+          renderItem={item => {
+            return (
+              <div className="flex ">
+                <img src={Icon} alt="add" />
+                <span
+                  style={{
+                    marginLeft: 8,
+                    marginRight: 8,
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                  }}
+                  title={item.label}
+                >
+                  {item.label}
+                </span>
+              </div>
+            );
+          }}
+          renderSelectedItem={(item, updateItemData) => {
+            return (
+              <div className="flex items-center">
+                <img src={Icon} alt="add" />
+                <div style={{ marginLeft: '12px' }}>
+                  <div style={{ fontWeight: 500 }}>{item.label}</div>
+                </div>
+              </div>
+            );
+          }}
+        />
+      </Modal>
+    </div>
+  );
+};
+
+export default DatabaseSection;