@gientech/modual 2.0.3 → 2.0.5

package/src/modules/streamFilesReader/components/Header/index.tsx

@@ -0,0 +1,297 @@
+import React from 'react';
+import styled from 'styled-components';
+import { X, ChevronLeft, ChevronRight, ZoomIn, ZoomOut, Download, Pencil, RotateCcw, RotateCw } from 'lucide-react';
+import type { AppTheme, ToolsConfig } from '../../../core/types';
+
+// Header组件属性接口
+export interface HeaderProps {
+  // 文件信息
+  fileName?: string;
+  currentPage?: number;
+  totalPage?: number;
+
+  // 工具配置
+  tools?: ToolsConfig;
+
+  // 样式配置
+  styles?: {
+    theme?: AppTheme;
+  };
+
+  // 事件回调
+  onPrevPage?: () => void;
+  onNextPage?: () => void;
+  onZoomIn?: () => void;
+  onZoomOut?: () => void;
+  onAnnotationToggle?: () => void;
+  onDownload?: () => void;
+  onRotateLeft?: () => void;
+  onRotateRight?: () => void;
+  onClose?: () => void;
+
+  // 状态
+  scale?: number;
+  isAnnotating?: boolean;
+
+  // 自定义类名
+  className?: string;
+}
+
+// 样式组件
+const HeaderContainer = styled.div<{ $theme: AppTheme }>`
+  display: flex;
+  align-items: center;
+  padding: 0px 12px;
+  justify-content: space-between;
+  padding: ${props => props.$theme.space.padding};
+  border-bottom: 1px solid ${props => props.$theme.colors.border};
+  background: ${props => props.$theme.colors.background};
+  min-height: 52px;
+`;
+
+const FileInfo = styled.div<{ $theme: AppTheme }>`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
+`;
+
+const FileName = styled.div<{ $theme: AppTheme }>`
+  font-size: 14px;
+  font-weight: 500;
+  color: ${props => props.$theme.colors.text};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+const PageInfo = styled.div<{ $theme: AppTheme }>`
+  font-size: 12px;
+  color: ${props => props.$theme.colors.disabledText};
+  white-space: nowrap;
+`;
+
+const ToolBar = styled.div<{ $theme: AppTheme }>`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+`;
+
+const ToolButton = styled.button<{ $theme: AppTheme; $active?: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: ${props => props.$theme.space.radius};
+  background: ${props => props.$active ? props.$theme.colors.primary + '20' : 'transparent'};
+  color: ${props => props.$active ? props.$theme.colors.primary : props.$theme.colors.text};
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: ${props => props.$theme.colors.primary + '10'};
+    color: ${props => props.$theme.colors.primary};
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+
+const ZoomInfo = styled.div<{ $theme: AppTheme }>`
+  font-size: 12px;
+  color: ${props => props.$theme.colors.disabledText};
+  min-width: 40px;
+  text-align: center;
+`;
+
+// 默认主题
+const defaultTheme: AppTheme = {
+  colors: {
+    primary: '#007bff',
+    secondary: '#6c757d',
+    success: '#008000',
+    warning: '#FFA500',
+    error: '#FF0000',
+    info: '#0000FF',
+    background: '#f8f9fa',
+    text: '#343a40',
+    border: '#dee2e6',
+    disabled: '#808080',
+    disabledBackground: '#F5F5F5',
+    disabledText: '#808080',
+  },
+  space: {
+    sidebar: 'md',
+    size: 'md',
+    radius: 'md',
+    padding: 'md',
+    margin: 'md',
+    shadow: 'md',
+    lineHeight: 'md',
+  },
+};
+
+/**
+ * Header组件
+ * 负责文件查看器的头部工具栏
+ *
+ * @param props - 组件属性
+ * @returns Header组件
+ */
+const Header: React.FC<HeaderProps> = React.memo(({
+  fileName = '未知文件',
+  currentPage = 1,
+  totalPage = 0,
+  tools = {
+    annotation: true,
+    download: true,
+    zoom: true,
+    close: true,
+    navigation: true,
+    rotate: true,
+  },
+  styles,
+  onPrevPage,
+  onNextPage,
+  onZoomIn,
+  onZoomOut,
+  onAnnotationToggle,
+  onDownload,
+  onRotateLeft,
+  onRotateRight,
+  onClose,
+  scale = 1,
+  isAnnotating = false,
+  className,
+}) => {
+  // 使用主题
+  const mergedTheme = styles?.theme || defaultTheme;
+
+  // 添加调试信息
+  console.log('Header组件渲染 - currentPage:', currentPage, 'totalPage:', totalPage);
+
+  return (
+    <HeaderContainer $theme={mergedTheme} className={className}>
+      <FileInfo $theme={mergedTheme}>
+        <FileName $theme={mergedTheme}>
+          {fileName}
+        </FileName>
+      </FileInfo>
+
+      <ToolBar $theme={mergedTheme}>
+        {/* 页面导航 */}
+        {tools.navigation && (
+          <>
+            <ToolButton
+              $theme={mergedTheme}
+              onClick={onPrevPage}
+              disabled={currentPage <= 1}
+              title="上一页"
+            >
+              <ChevronLeft size={16} />
+            </ToolButton>
+            {totalPage > 0 && (
+              <PageInfo $theme={mergedTheme}>
+                {currentPage} / {totalPage}
+              </PageInfo>
+            )}
+            <ToolButton
+              $theme={mergedTheme}
+              onClick={onNextPage}
+              disabled={!totalPage || currentPage >= totalPage}
+              title="下一页"
+            >
+              <ChevronRight size={16} />
+            </ToolButton>
+          </>
+        )}
+
+        {/* 缩放控制 */}
+        {tools.zoom && (
+          <>
+            <ToolButton
+              $theme={mergedTheme}
+              onClick={onZoomOut}
+              disabled={scale <= 0.3}
+              title="缩小"
+            >
+              <ZoomOut size={16} />
+            </ToolButton>
+            <ZoomInfo $theme={mergedTheme}>
+              {Math.round(scale * 100)}%
+            </ZoomInfo>
+            <ToolButton
+              $theme={mergedTheme}
+              onClick={onZoomIn}
+              disabled={scale >= 3}
+              title="放大"
+            >
+              <ZoomIn size={16} />
+            </ToolButton>
+          </>
+        )}
+
+        {/* 标注工具 */}
+        {tools.annotation && (
+          <ToolButton
+            $theme={mergedTheme}
+            $active={isAnnotating}
+            onClick={onAnnotationToggle}
+            title={isAnnotating ? '退出标注' : '开始标注'}
+          >
+            <Pencil size={16} />
+          </ToolButton>
+        )}
+
+        {/* 下载按钮 */}
+        {tools.download && (
+          <ToolButton
+            $theme={mergedTheme}
+            onClick={onDownload}
+            title="下载"
+          >
+            <Download size={16} />
+          </ToolButton>
+        )}
+
+        {/* 旋转控制 */}
+        {tools.rotate && (
+          <>
+            <ToolButton
+              $theme={mergedTheme}
+              onClick={onRotateLeft}
+              title="向左旋转"
+            >
+              <RotateCcw size={16} />
+            </ToolButton>
+            <ToolButton
+              $theme={mergedTheme}
+              onClick={onRotateRight}
+              title="向右旋转"
+            >
+              <RotateCw size={16} />
+            </ToolButton>
+          </>
+        )}
+
+        {/* 关闭按钮 */}
+        {tools.close && (
+          <ToolButton
+            $theme={mergedTheme}
+            onClick={onClose}
+            title="关闭"
+          >
+            <X size={16} />
+          </ToolButton>
+        )}
+      </ToolBar>
+    </HeaderContainer>
+  );
+});
+
+export default Header;

package/src/modules/streamFilesReader/index.tsx

@@ -0,0 +1,3 @@
+// 导出 GientechStreamReader 组件和类型
+export { default as GientechStreamReader, registerPDFWorker } from './GientechStreamReader';
+export type { GientechStreamReaderProps } from './GientechStreamReader';

package/src/style.css

@@ -0,0 +1,6 @@
+@import 'tailwindcss';
+
+* {
+  padding: 0;
+  margin: 0;
+}

package/src/utils/commonFn.tsx

@@ -0,0 +1,111 @@
+import message from 'antd/es/message';
+import { uid } from 'uid';
+import Clipboard from 'clipboard';
+
+export const toCopy = (content: any, event: any) => {
+  // 去除 <think>...</think> 标签及内容
+  let _content = content ? content.replace(/<think>[\s\S]*?<\/think>/g, '') : content;
+
+  // 去除 [retrive-tag ...]...[/retrive-tag] 标签及内容
+  _content = _content.replace(/\[retrive-tag[^\]]*\][\s\S]*?\[\/retrive-tag\]/g, '');
+
+  // 去除 <a> 标签（保留原有逻辑）
+  _content = _content.replace(/<a\s+[^>]*>(.*?)<\/a>/g, '');
+  console.log('_content', _content);
+
+  const clipboard: any = new Clipboard(event.currentTarget || event.target, {
+    text: () => _content,
+  });
+
+  try {
+    clipboard.on('success', () => {
+      message.success('文本复制成功', 2);
+      clipboard.destroy();
+    });
+    clipboard.on('error', (e:any) => {
+      message.error('复制失败', 2);
+      clipboard.destroy();
+    });
+
+    clipboard.onClick(event);
+  } catch (error) {
+    clipboard.destroy();
+    message.error('复制失败: ' + error, 2);
+  }
+
+  // if (navigator.clipboard?.writeText) {
+  //   console.log('_content1', navigator);
+  //   navigator.clipboard
+  //     .writeText(_content)
+  //     .then(() => {
+  //       console.log('_content2', _content);
+  //       message.success('文本复制成功', 2);
+  //     })
+  //     .catch(err => {
+  //       message.error('复制失败: ', 2);
+  //       console.log('error occurs when copy:', err);
+  //     });
+  // } else {
+  //   console.log('_content3', _content);
+  //   const textareaDom = document.createElement('textarea');
+  //   console.log('_content4', textareaDom);
+  //   textareaDom.value = _content;
+  //   textareaDom.style.position = 'absolute';
+  //   textareaDom.style.opacity = '0';
+  //   textareaDom.style.left = '-500px';
+  //   textareaDom.style.top = '-500px';
+  //   textareaDom.style.height = '0';
+  //   document.body.appendChild(textareaDom);
+  //   textareaDom.focus();
+  //   textareaDom.select();
+  //   document.execCommand('copy');
+  //   textareaDom.remove();
+  //   message.success('文本复制成功', 2);
+  // }
+};
+
+// 添加文件类型判断辅助函数
+export const getFileTypeByName = (fileName: string): string => {
+  const extension = fileName.toLowerCase().split('.').pop() || '';
+  if (/^(jpg|jpeg|png|gif|bmp|webp)$/.test(extension)) return 'image';
+  if (/^(doc|docx)$/.test(extension)) return 'word';
+  if (/^(xls|xlsx|csv)$/.test(extension)) return 'excel';
+  if (/^(ppt|pptx)$/.test(extension)) return 'ppt';
+  if (extension === 'pdf') return 'pdf';
+  if (/^(txt|json|md|markdown)$/.test(extension)) return 'text';
+  if (/^(zip|rar|7z)$/.test(extension)) return 'archive';
+  return 'file';
+};
+
+// 将 query-reply 对列表转换为消息数组
+export function convertQueryReplyPairListToMessages(queryReplyPairList: any[]): any[] {
+
+  const messages: any[] = [];
+  for (const pair of queryReplyPairList) {
+    //console.log(pair, 'pair');
+    if (pair.query) {
+      const _queryId = pair.query.queryId || pair.query.id || pair.queryId || pair.id || uid(32);
+      messages.push({
+        istype: 'user',
+        content: pair.query.content,
+        time: pair.query.gmtCreate,
+        queryId: _queryId,
+        clientSideId: _queryId + '-user',
+        ...pair.query,
+      });
+    }
+    if (pair.reply) {
+      const _queryId = pair.reply.queryId || pair.reply.id || pair.queryId || pair.id || uid(32);
+      messages.push({
+        istype: 'ai',
+        content: pair.reply.content,
+        isDefault: pair.reply.isDefault,
+        time: pair.time || pair.gmtCreate || Date.now(),
+        queryId: _queryId,
+        clientSideId: _queryId + '-ai',
+        ...pair.reply,
+      });
+    }
+  }
+  return messages;
+}

package/src/utils/decryptApiKey.ts

@@ -0,0 +1,40 @@
+import CryptoJS from 'crypto-js';
+
+// 默认的 KEY 与 IV（与代码库中的一致）
+const DEFAULT_KEY = CryptoJS.enc.Utf8.parse('1234567890123456');
+const DEFAULT_IV = CryptoJS.enc.Utf8.parse('1234567890123456');
+
+/**
+ * 解密 API Key
+ * @param encryptedKey - 加密的 API Key（可以包含 apiKey_ 前缀）
+ * @returns 解密后的 JSON 对象，包含 apiKey 和 targetId，如果解密失败返回 null
+ */
+export function decryptApiKey(encryptedKey: string): { apiKey: string; targetId: number } | null {
+  try {
+    // 如果 key 以 apiKey_ 开头，去掉前缀
+    let keyToDecrypt = encryptedKey;
+    if (encryptedKey.startsWith('apiKey_')) {
+      keyToDecrypt = encryptedKey.replace('apiKey_', '');
+    }
+
+    const base64 = CryptoJS.enc.Base64.parse(keyToDecrypt);
+    const src = CryptoJS.enc.Base64.stringify(base64);
+
+    const decrypted = CryptoJS.AES.decrypt(src, DEFAULT_KEY, {
+      iv: DEFAULT_IV,
+      mode: CryptoJS.mode.CBC,
+      padding: CryptoJS.pad.ZeroPadding,
+    });
+
+    const decryptedStr = decrypted.toString(CryptoJS.enc.Utf8);
+    const cleanedStr = decryptedStr.replace(/\0/g, ''); // 移除填充的 null 字符
+
+    // 解析 JSON
+    const result = JSON.parse(cleanedStr);
+    return result;
+  } catch (error) {
+    console.error('解密 API Key 失败:', error);
+    return null;
+  }
+}
+

package/src/utils/gientechCommon/components/AppError.tsx

@@ -0,0 +1,32 @@
+import { Button } from 'antd';
+import { XOctagon, RefreshCw } from 'lucide-react';
+
+export default function AppError({ msg, subMsg }: { msg?: string; subMsg?: string }) {
+  return (
+    <div className="flex flex-col items-center justify-center h-full p-8 text-center bg-white/80 backdrop-blur-sm">
+      {/* 错误图标 */}
+      <div className="mb-6 animate-bounce">
+        <XOctagon size={64} className="text-[#d70016]" />
+      </div>
+
+      {/* 错误标题 */}
+      <h2 className="text-[20px] font-medium text-[#222222] mb-3">{msg || '应用初始化失败'}</h2>
+
+      {/* 错误描述 */}
+      <p className="text-[14px] text-[#555555] mb-8 max-w-[400px]">
+        {subMsg ||
+          '无法完成应用初始化，这可能是由于网络连接问题或服务配置错误导致的。请检查您的网络连接并重试。'}
+      </p>
+
+      {/* 重试按钮 */}
+      <Button
+        type="primary"
+        icon={<RefreshCw className="w-4 h-4" />}
+        onClick={() => window.location.reload()}
+        className="flex items-center gap-2 bg-gradient-to-r from-[#2B69FF] to-[#8F91FF] border-none hover:opacity-90"
+      >
+        重新加载
+      </Button>
+    </div>
+  );
+}

package/src/utils/gientechCommon/components/AppLoading.tsx

@@ -0,0 +1,75 @@
+import { useEffect, useState } from 'react';
+
+export default function AppLoading({ title, subtitle }: { title?: string; subtitle?: string }) {
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    let timer: any;
+    if (progress < 98) {
+      timer = setTimeout(() => {
+        setProgress(p => p + Math.random() * 6 + 1);
+      }, 80);
+    } else if (progress < 100) {
+      timer = setTimeout(() => setProgress(100), 400);
+    }
+    return () => clearTimeout(timer);
+  }, [progress]);
+
+  return (
+    <div className="flex flex-col justify-center items-center min-h-screen bg-gradient-to-br from-[#EEF4FF] via-white to-[#F5F8FF]">
+      {/* Logo区域 */}
+      <div className="mb-8 flex flex-col items-center">
+        {/* <div className="w-20 h-20 rounded-full bg-gradient-to-r from-[#2B69FF] to-[#8F91FF] flex items-center justify-center shadow-lg animate-bounce-slow">
+          <svg width="48" height="48" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <ellipse cx="19" cy="19" rx="19" ry="19" fill="url(#paint0_linear)"/>
+            <path d="M12 25c2.5-2 7.5-2 10 0" stroke="#fff" strokeWidth="2.2" strokeLinecap="round"/>
+            <ellipse cx="14.5" cy="16" rx="1.5" ry="2" fill="#fff"/>
+            <ellipse cx="23.5" cy="16" rx="1.5" ry="2" fill="#fff"/>
+            <defs>
+              <linearGradient id="paint0_linear" x1="0" y1="0" x2="38" y2="38" gradientUnits="userSpaceOnUse">
+                <stop stopColor="#2B69FF"/>
+                <stop offset="1" stopColor="#8F91FF"/>
+              </linearGradient>
+            </defs>
+          </svg>
+        </div> */}
+        <div className="mt-6 text-2xl font-semibold text-[#222222] tracking-wide">
+          {title || '小鲸智能会话助手'}
+        </div>
+        <div className="mt-2 text-sm text-[#555555]">{subtitle || '让智能对话更简单'}</div>
+      </div>
+
+      {/* 进度条 */}
+      <div className="relative w-80 max-w-sm">
+        <div className="w-full h-2 bg-[#EEF4FF] rounded-full overflow-hidden shadow-inner">
+          <div
+            className="h-full bg-gradient-to-r from-[#2B69FF] to-[#8F91FF] transition-all duration-300 ease-out"
+            style={{ width: `${Math.min(progress, 100)}%` }}
+          />
+        </div>
+        <div className="absolute -right-2 top-5 text-sm text-[#555555]">
+          {Math.min(Math.round(progress), 100)}%
+        </div>
+      </div>
+
+      {/* 加载提示 */}
+      <div className="mt-8 flex flex-col items-center gap-2">
+        <div className="text-sm text-[#555555] animate-pulse">正在初始化应用</div>
+        <div className="text-xs text-[#888888]">首次加载可能需要一些时间，请耐心等待</div>
+      </div>
+    </div>
+  );
+}
+
+// 添加动画样式
+const style = document.createElement('style');
+style.textContent = `
+  .animate-bounce-slow {
+    animation: bounce 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  }
+  @keyframes bounce {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-12px); }
+  }
+`;
+document.head.appendChild(style);

package/src/utils/gientechCommon/components/DeleteModal.tsx

@@ -0,0 +1,75 @@
+import { Button, ConfigProvider, Form, Input, Modal } from "antd";
+import { useForm } from "antd/es/form/Form";
+import { useEffect } from "react";
+
+export const DeleteModal = ({
+  isModalOpen,
+  handleOk,
+  handleCancel,
+  data
+}: any) => {
+  const modalStyles = {
+    header: {
+      height: "60px",
+      borderBottom: "1px solid #F0F0F0",
+      display: "flex",
+      paddingLeft: "24px",
+      alignItems: "center",
+      marginBottom: "16px"
+    },
+    title: { fontSize: "16px" },
+    body: { padding: "0 24px" },
+    mask: {},
+    footer: { marginTop: "0px", padding: "0 24px 16px 24px" },
+    content: { padding: 0 }
+  };
+  const [rename_form] = useForm();
+  useEffect(() => {
+    if (!isModalOpen) {
+      rename_form.resetFields();
+      return;
+    }
+    rename_form.setFieldValue("new_name", data?.label);
+  }, [data, isModalOpen]);
+  return (
+    <ConfigProvider
+      modal={{
+        styles: modalStyles
+      }}
+    >
+      <Modal
+        title={<div className="text-[16px]">删除会话</div>}
+        closeIcon={null}
+        open={isModalOpen}
+        width={520}
+        centered
+        className="[&:[.ant-modal-content]]:bg-red"
+        footer={
+          <div className="mt-[16px] flex justify-end">
+            <Button
+              children="取消"
+              onClick={handleCancel}
+              className="mr-[8px]"
+            />
+            <Button
+              children="确认"
+              onClick={async () => {
+                try {
+                  const data = await rename_form.validateFields();
+                  handleOk("ok_remove", data);
+                } catch (e) {
+                  console.log(e);
+                  return;
+                }
+              }}
+              type="primary"
+              className="border-none"
+            />
+          </div>
+        }
+      >
+        <div>{`确定要删除会话「${data.label}」吗？删除后无法恢复。`}</div>
+      </Modal>
+    </ConfigProvider>
+  );
+};

package/src/utils/gientechCommon/components/DisplayError.tsx

@@ -0,0 +1,33 @@
+import { Button } from 'antd';
+import { AlertCircle, RefreshCw } from 'lucide-react';
+
+export default function DisplayError() {
+  return (
+    <div className="flex flex-col items-center justify-center h-full p-8 text-center bg-transparent! backdrop-blur-sm">
+      {/* 错误图标 */}
+      <div className="mb-6 animate-bounce">
+        <AlertCircle size={64} className="text-[#d70016]" />
+      </div>
+
+      {/* 错误标题 */}
+      <h2 className="text-[20px] font-medium text-[#222222] mb-3">
+        抱歉，遇到了一些问题
+      </h2>
+
+      {/* 错误描述 */}
+      <p className="text-[14px] text-[#555555] mb-8 max-w-[400px]">
+        请求失败，请稍后重试
+      </p>
+
+      {/* 重试按钮 */}
+      <Button
+        type="primary"
+        icon={<RefreshCw className="w-4 h-4" />}
+        onClick={() => window.location.reload()}
+        className="flex items-center gap-2 bg-gradient-to-r from-[#2B69FF] to-[#8F91FF] border-none hover:opacity-90"
+      >
+        重新加载
+      </Button>
+    </div>
+  );
+}