@gientech/modual 2.0.8 → 2.0.9

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 Chat from './examples/chat/index';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(<Chat />);