@spacecorexdev/core 0.0.2 → 0.0.5

package/src/ui/UIFilePreview/previewUtils.tsx

@@ -0,0 +1,531 @@
+import { AuthorizationHandler, ResponseCode } from "../../api/_base";
+import { AbortControllerClass } from "febs-browser/types/fetch";
+import * as febs from 'febs-browser';
+import { FileExcelFilled, FileImageFilled, FileMarkdownFilled, FileOutlined, FilePdfFilled, FilePptFilled, FileWordFilled, FileZipFilled, FolderFilled, FolderOpenFilled, VideoCameraFilled, FileTextFilled, BookFilled } from "@ant-design/icons";
+import uiToast from "../UIToast";
+import { UIToastSingle } from "../UIToastSingle";
+import { CacheFileContent, CacheFileMeta } from "../../utils/CacheFileContent";
+import { API } from "../../api/index";
+
+export const ARCHIVE_FILE_EXTENSIONS = [
+  'zip',
+  'zipx',
+  '7z',
+  'rar',
+  'tar',
+  'gz',
+  'gzip',
+  'tgz',
+  'bz2',
+  'bzip2',
+  'tbz',
+  'tbz2',
+  'xz',
+  'txz',
+  'lzma',
+  'zst',
+  'tzst',
+  'cab',
+  'ar',
+  'cpio',
+  'iso',
+  'xar',
+  'lha',
+  'lzh',
+  'jar',
+  'war',
+  'ear',
+  'apk',
+  'cbz',
+  'cbr',
+] as const;
+
+export const CAD_FILE_EXTENSIONS = [
+  'dwg',
+  'dxf',
+  'dwf',
+  'dwfx',
+  'xps',
+  'oxps',
+] as const;
+
+export const getFileExtension = (fileName: string) => {
+  let cleanFileName = fileName;
+
+  if (/^https?:\/\//i.test(fileName)) {
+    try {
+      const url = new URL(fileName);
+      cleanFileName = url.pathname;
+    } catch {
+      cleanFileName = fileName.split(/[?#]/)[0] || '';
+    }
+  } else {
+    const queryIndex = fileName.indexOf('?');
+    if (queryIndex !== -1) {
+      cleanFileName = fileName.substring(0, queryIndex);
+    }
+  }
+
+  const extension = cleanFileName.split('.').pop()?.toLowerCase() || '';
+  return extension;
+};
+
+export const getFileUrl = (fileResourcePath: string) => {
+  if (!fileResourcePath) {
+    return '';
+  }
+
+  const lastSlashIndex = fileResourcePath.lastIndexOf('/');
+  if (lastSlashIndex !== -1) {
+    let filename = fileResourcePath.substring(lastSlashIndex + 1);
+    fileResourcePath = fileResourcePath.substring(0, lastSlashIndex + 1);
+    filename = encodeURIComponent(filename);
+    fileResourcePath = `${fileResourcePath}${filename}`;
+  }
+
+  if (/^https?:\/\//i.test(fileResourcePath)) {
+    return fileResourcePath;
+  }
+  if (fileResourcePath.startsWith('/')) {
+    return `${import.meta.env.VITE_API_BASE}${fileResourcePath}`;
+  }
+  return `${import.meta.env.VITE_API_BASE}/${fileResourcePath}`;
+};
+
+export const getFilePreviewType = (fileName: string) => {
+  if (!fileName || fileName.length === 0) {
+    return 'unknown' as const;
+  }
+
+  const extension = getFileExtension(fileName);
+  const mime = '';
+
+  if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg', 'webp'].includes(extension) || mime.startsWith('image/')) {
+    return 'image' as const;
+  }
+  if (extension === 'pdf' || mime.includes('pdf')) {
+    return 'pdf' as const;
+  }
+  if (['doc', 'docx', 'dot', 'dotx'].includes(extension) || mime.includes('word') || mime.includes('msword')) {
+    return 'word' as const;
+  }
+  if (['ppt', 'pptx', 'pps', 'ppsx'].includes(extension) || mime.includes('powerpoint') || mime.includes('presentation')) {
+    return 'ppt' as const;
+  }
+  if (['xls', 'xlsx', 'csv', 'xlsm', 'xlsb'].includes(extension) || mime.includes('excel') || mime.includes('spreadsheet')) {
+    return 'excel' as const;
+  }
+  if (['md', 'markdown'].includes(extension) || mime.includes('markdown')) {
+    return 'markdown' as const;
+  }
+  if (extension === 'rdoc') {
+    return 'richdoc' as const;
+  }
+  if (['mp4', 'mov', 'avi', 'mkv', 'webm', 'flv', 'wmv', 'mpeg', 'ogg'].includes(extension) || mime.startsWith('video/')) {
+    return 'video' as const;
+  }
+  if ((ARCHIVE_FILE_EXTENSIONS as readonly string[]).includes(extension)) {
+    return 'archive' as const;
+  }
+  if ((CAD_FILE_EXTENSIONS as readonly string[]).includes(extension)) {
+    return 'cad' as const;
+  }
+
+  // try {
+  //   const url = new URL(fileName, 'http://localhost');
+  //   const pathname = url.pathname;
+  //   const urlExtension = pathname.split('/').pop()?.split('.').pop()?.toLowerCase();
+  //   if (urlExtension && (CAD_FILE_EXTENSIONS as readonly string[]).includes(urlExtension)) {
+  //     return 'cad' as const;
+  //   }
+  // } catch (_) {
+  //   // ignore
+  // }
+
+  return 'unknown' as const;
+};
+
+/**
+ * 获取文件图标
+ * 根据文件类型和扩展名返回对应的图标组件
+ * @param record - 文件记录对象
+ * @param size - 图标大小，默认22px
+ * @returns 图标组件
+ */
+export const getFileIcon = ({
+  fileName,
+  fileType,
+  isExpanded = false,
+  isSecure = false,
+  isVirtualContractFolder = false,
+  isContractSubfolder = false,
+  isContractTagFolder = false,
+  contractSigned,
+  size = 22
+}: {
+  fileName: string,
+  fileType: string | 'folder',
+  isExpanded?: boolean,
+  isSecure?: boolean,
+  isVirtualContractFolder?: boolean,
+  isContractSubfolder?: boolean,
+  isContractTagFolder?: boolean,
+  contractSigned?: boolean,
+  size?: number
+}) => {
+  const iconStyle = { fontSize: size, width: size, height: size };
+
+  // 文件夹图标：展开状态显示打开文件夹，否则显示关闭文件夹
+  if (fileType === 'folder') {
+    if (isVirtualContractFolder || isContractSubfolder || isContractTagFolder) {
+      // 未签约的合同子文件夹使用灰色弱化显示（虚拟"合同"根文件夹与分类标签文件夹不受影响）
+      const contractColor = isContractSubfolder && contractSigned === false ? '#9ca3af' : '#367f12';
+      return isExpanded
+        ? <FolderOpenFilled style={{ ...iconStyle, color: contractColor }} />
+        : <FolderFilled style={{ ...iconStyle, color: contractColor }} />;
+    }
+    return isExpanded
+      ? <FolderOpenFilled style={{ ...iconStyle, color: isSecure ? 'rgb(240 100 80)' : '#1890ff' }} />
+      : <FolderFilled style={{ ...iconStyle, color: isSecure ? 'rgb(240 100 80)' : '#1890ff' }} />;
+  }
+
+  const extension = getFileExtension(fileName);
+  const mime = fileType?.toLowerCase() || '';
+
+  // 根据扩展名或MIME类型返回对应图标
+  if (extension === 'pdf' || mime.includes('pdf')) {
+    return <FilePdfFilled style={{ ...iconStyle, color: '#e53935' }} />;
+  }
+  if (['doc', 'docx', 'dot', 'dotx'].includes(extension) || mime.includes('word') || mime.includes('msword')) {
+    return <FileWordFilled style={{ ...iconStyle, color: '#1e88e5' }} />;
+  }
+  if (['ppt', 'pptx', 'pps', 'ppsx'].includes(extension) || mime.includes('powerpoint') || mime.includes('presentation')) {
+    return <FilePptFilled style={{ ...iconStyle, color: '#f97316' }} />;
+  }
+  if (['xls', 'xlsx', 'csv', 'xlsm', 'xlsb'].includes(extension) || mime.includes('excel') || mime.includes('spreadsheet')) {
+    return <FileExcelFilled style={{ ...iconStyle, color: '#43a047' }} />;
+  }
+  if (['md', 'markdown'].includes(extension)) {
+    return <FileMarkdownFilled style={{ ...iconStyle, color: '#333' }} />;
+  }
+  if (extension === 'rdoc') {
+    return <FileTextFilled style={{ ...iconStyle, color: '#f9aa16' }} />;
+  }
+  if (mime.startsWith('image/') || ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg', 'webp'].includes(extension)) {
+    return <FileImageFilled style={{ ...iconStyle, color: '#8e24aa' }} />;
+  }
+  if (mime.startsWith('video/') || ['mp4', 'mov', 'avi', 'mkv', 'webm'].includes(extension)) {
+    return <VideoCameraFilled style={{ ...iconStyle, color: '#3949ab' }} />;
+  }
+  if ((ARCHIVE_FILE_EXTENSIONS as readonly string[]).includes(extension)) {
+    return <FileZipFilled style={{ ...iconStyle, color: '#8b5cf6' }} />;
+  }
+  if ((CAD_FILE_EXTENSIONS as readonly string[]).includes(extension)) {
+    return <FileTextFilled style={{ ...iconStyle, color: '#00acc1' }} />;
+  }
+  // if ((EBOOK_FILE_EXTENSIONS as readonly string[]).includes(extension)) {
+  //   return <BookFilled style={{ ...iconStyle, color: '#6f5a2d' }} />;
+  // }
+  // 默认文件图标
+  return <FileOutlined style={{ ...iconStyle, color: '#757575' }} />;
+};
+
+/**
+ * 下载 Blob 到本地文件
+ */
+export const downloadBlob = (blob: Blob, fileName: string) => {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = fileName;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+};
+
+/**
+ * 下载文件
+ * 优先从本地缓存获取，若无缓存则从网络下载
+ * @param fileResourcePath 文件资源路径
+ * @param fileName 下载文件名（可选）
+ * @param fileId 文件ID（可选，用于缓存查找）
+ * @param expectedCrc32 期望的CRC32校验值（可选）
+ * @returns 下载完成后的文件路径
+ */
+export const downloadFile = async (fileResourcePath: string, fileName?: string, fileId?: string, expectedCrc32?: number) => {
+  const url = getFileUrl(fileResourcePath);
+  if (!url) {
+    throw new Error('文件资源路径不可用');
+  }
+
+  const defaultFileName = fileName || fileResourcePath.split('/').pop() || 'downloaded_file';
+
+  // 优先从缓存获取
+  if (fileId) {
+    try {
+      if (expectedCrc32 !== undefined) {
+        const isValid = await CacheFileContent.validateCache(fileId, expectedCrc32);
+        if (isValid) {
+          const cached = await CacheFileContent.getCachedContent(fileId);
+          if (cached) {
+            console.log('[downloadFile] 使用本地缓存下载');
+            downloadBlob(cached.content, defaultFileName);
+            uiToast.success('文件已下载，请查看浏览器的下载文件夹');
+            return;
+          }
+        }
+      } else {
+        const cached = await CacheFileContent.getCachedContent(fileId);
+        if (cached) {
+          console.log('[downloadFile] 使用本地缓存下载（无CRC校验）');
+          downloadBlob(cached.content, defaultFileName);
+          uiToast.success('文件已下载，请查看浏览器的下载文件夹');
+          return;
+        }
+      }
+    } catch (error) {
+      console.error('[downloadFile] 读取缓存失败，将从网络下载:', error);
+    }
+  }
+
+  // 从网络下载
+  console.log('[downloadFile] 从网络下载');
+  let headers = {} as any;
+  headers.set = (key: string, value: string) => {
+    headers[key] = value;
+  }
+  AuthorizationHandler.requestHandleSid({ headers });
+
+  uiToast.info('即将开始下载，请稍后...');
+  let abortController: AbortControllerClass|null = new febs.net.AbortController();
+  try {
+    const response = await febs.net.fetch(url, {
+      headers: { Authorization: headers.Authorization || '' },
+      credentials: 'include',
+      mode: 'cors',
+      timeout: Number(import.meta.env.VITE_API_FILEVIEW_TIMEOUT) || 100000,
+      signal: abortController.signal,
+      progress: (percent: number) => {
+        UIToastSingle.info({
+          key: url,
+          message: 
+            (<div>
+                下载进度: { Math.floor(percent * 100) } %
+            </div>),
+          // 进行中 duration 必须为 0（不自动关闭）：toast 自动超时会触发 onClose，
+          // 导致大文件下载超过超时时间被 abort。完成后给 2 秒自动消失。
+          // onClose 只会在用户手动点关闭按钮时触发（见 UIToastSingle）。
+          duration: percent >= 1 ? 2 : 0,
+          onClose: () => {
+            abortController && abortController.abort();
+          }
+        });
+      },
+    });
+
+    if (!response.ok) {
+      UIToastSingle.close(url);
+      if (response.status == 402) {
+        uiToast.error(`无权查看此文件`);
+        throw new Error(`无权查看此文件`);
+      }
+
+      uiToast.error(`文件加载失败，状态码 ${response.status}`);
+      throw new Error(`文件加载失败，状态码 ${response.status}`);
+    }
+
+    let buffer = await response.arrayBuffer();
+    abortController = null;
+    UIToastSingle.close(url);
+
+    const blob = new Blob([buffer], { type: response.headers.get('Content-Type') || 'application/octet-stream' });
+    
+    // 下载后保存到缓存（如果有fileId）— 同时传入 Content-Type，避免 Safari IndexedDB 丢失 Blob.type
+    if (fileId) {
+      try {
+        await CacheFileContent.saveToCache(fileId, blob, expectedCrc32, blob.size, blob.type);
+        console.log('[downloadFile] 已保存到本地缓存');
+      } catch (error) {
+        console.error('[downloadFile] 保存到缓存失败:', error);
+      }
+    }
+
+    downloadBlob(blob, defaultFileName);
+    uiToast.success('文件已下载，请查看浏览器的下载文件夹');
+  } catch (error) {
+    // 网络错误（CORS、超时、断网等）：febs.net.fetch 会抛出 NetworkFailed 等异常，
+    // 此处统一捕获并提示，避免页面无任何反应。
+    abortController = null;
+    UIToastSingle.close(url);
+    const errMsg = (error as any)?.message;
+    // HTTP 状态码错误已在上方抛出并提示过 toast，避免重复提示
+    const isHttpStatusError = errMsg && /^无权查看此文件|^文件加载失败，状态码/.test(errMsg);
+    if (!isHttpStatusError) {
+      const rawMsg = errMsg || String(error) || '未知错误';
+      uiToast.error(`文件下载失败：${rawMsg}`);
+    }
+    console.error('[downloadFile] 下载失败:', error, 'url:', url);
+    throw error;
+  }
+};
+
+/**
+ * 文件详情查询函数（用于按业务场景切换详情接口，如项目文件 / CRM 客户文件）
+ */
+export type FileDetailFetcher = (fileId: string) => Promise<{
+  code: number;
+  data?: { crc32?: number; projectId?: string } | null;
+}>;
+
+/**
+* @desc 文件预览组件，支持图片、PDF、Office文档等常见格式的预览。根据文件类型自动选择合适的预览方式，提供加载状态和错误提示。
+* @example 
+* <UIFilePreview 
+*   fileUrl={previewUrl} 
+*   visible={previewVisible} 
+*   onClose={() => setPreviewVisible(false)} />
+*/
+export const fetchFileBuffer = async (
+  fileResourcePath: string,
+  accessToken: string|undefined,
+  abortController: AbortControllerClass | null,
+  onProgress?: (percent: number) => void,
+  fileId?: string,
+  expectedCrc32?: number,
+  detailFetcher?: FileDetailFetcher,
+) => {
+  const url = getFileUrl(fileResourcePath);
+  if (!url) {
+    throw new Error('文件资源路径不可用');
+  }
+
+  let actualCrc32 = expectedCrc32;
+
+  // 合同链接文件（ID 以 contract-file- 开头）是虚拟文件，无需查询 detail
+  const isContractLinkFile = fileId?.startsWith('contract-file-');
+
+  // —— 第 1 步：必须调用 getDetail，获取服务器最新 crc32（权威值） ——
+  if (fileId && !isContractLinkFile) {
+    try {
+      const detailResponse = detailFetcher
+        ? await detailFetcher(fileId)
+        : await API.project.file.getDetail({ fileId });
+      if (detailResponse?.code === ResponseCode.SUCCESS && detailResponse.data) {
+        const detailCrc32 = detailResponse.data.crc32;
+        // 仅当 detail 返回有效值时才覆盖（避免 null/undefined 把 prop 的有效值冲掉）
+        if (detailCrc32 != null) {
+          actualCrc32 = detailCrc32;
+        }
+        // 持久化单条文件元数据缓存（用于离线列表显示）
+        if (detailResponse.data.projectId) {
+          CacheFileMeta.saveFileMeta(detailResponse.data.projectId, detailResponse.data).catch(err =>
+            console.warn('持久化单条文件元数据缓存失败:', err)
+          );
+        }
+      }
+    } catch (error) {
+      console.error('获取文件详情失败:', error);
+    }
+  }
+
+  // —— 第 2 步：用最新的 actualCrc32 校验缓存 ——
+  //   crc32 相同 → 直接打开缓存（跳过文件资源网络请求）
+  //   crc32 不同 / 无 crc32 / 无缓存 → 走网络下载
+  if (fileId && !isContractLinkFile) {
+    let cached: { content: Blob; crc32: number; contentType: string } | null = null;
+    if (actualCrc32 != null) {
+      const isValid = await CacheFileContent.validateCache(fileId, actualCrc32);
+      if (isValid) {
+        cached = await CacheFileContent.getCachedContent(fileId);
+        if (cached) {
+          // Safari IndexedDB Blob 完整性校验：
+          // Safari 存在 IndexedDB Blob 损坏问题——缓存的 Blob 可能因内存回收/配额限制
+          // 变成空 Blob 或损坏 Blob。如果 size 为 0，直接视为缓存失效，删除并走网络。
+          if (cached.content.size === 0) {
+            console.warn('[fetchFileBuffer] 缓存 Blob 为空（size=0），Safari IndexedDB 可能已损坏，删除缓存并从网络加载');
+            await CacheFileContent.removeFromCache(fileId);
+          } else {
+            try {
+              const rawBuffer = await cached.content.arrayBuffer();
+              // Safari 兼容性：克隆 ArrayBuffer 创建新副本，避免 IndexedDB 派生的 ArrayBuffer
+              // 在创建 Blob/File 时出现 WebKitBlobResource error 1 等问题。
+              const buffer = rawBuffer.slice(0);
+              console.log('[fetchFileBuffer] 缓存命中（detail crc32 校验通过），size:', buffer.byteLength, '跳过文件资源请求');
+              const hitHeaders = new Headers();
+              if (cached.contentType) {
+                hitHeaders.set('Content-Type', cached.contentType);
+              }
+              return {
+                buffer,
+                headers: hitHeaders,
+                status: 200,
+                fromCache: true,
+              };
+            } catch (cacheError) {
+              console.warn('[fetchFileBuffer] 读取缓存 Blob 失败（Safari 可能损坏），删除缓存并从网络加载:', cacheError);
+              await CacheFileContent.removeFromCache(fileId);
+            }
+          }
+        }
+      } else {
+        console.log('[fetchFileBuffer] 缓存 crc32 与服务器不一致，将从网络加载最新文件');
+      }
+    } else {
+      console.log('[fetchFileBuffer] 无法校验 crc32（服务器未返回），跳过缓存检查，将从网络加载');
+    }
+  }
+
+  // add sid to headers.
+  let headers = {} as any;
+  headers.set = (key: string, value: string) => {
+    headers[key] = value;
+  }
+  AuthorizationHandler.requestHandleSid({ headers });
+
+  let response;
+  try {
+    response = await febs.net.fetch(url + (accessToken? `?tempToken=${accessToken}` : ''),  {
+      headers: { Authorization: headers.Authorization || '' },
+      credentials: 'include',
+      mode: 'cors',
+      timeout: Number(import.meta.env.VITE_API_FILEVIEW_TIMEOUT) || 100000,
+      progress: (percent: number) => onProgress?.(Math.floor(percent * 100)),
+      signal: abortController? abortController.signal : null,
+    });
+  } catch (error) {
+    // 网络错误（CORS、超时、断网等）：febs.net.fetch 抛出 NetworkFailed，
+    // 统一提示，避免仅依赖调用方的 previewError 文本（可能不够醒目或被遮挡）。
+    // 注意：CORS 被拦截时 JS 无法读取 HTTP 状态码（如 404），仅能拿到 error.message。
+    const rawMsg = (error as any)?.message || String(error) || '未知错误';
+    uiToast.error(`文件加载失败：${rawMsg}`);
+    console.error('[fetchFileBuffer] 网络请求失败:', error, 'url:', url);
+    throw error;
+  }
+
+  if (!response.ok) {
+    if (response.status == 402) {
+      uiToast.error(`无权查看此文件`);
+      throw new Error(`无权查看此文件`);
+    }
+
+    uiToast.error(`文件加载失败，状态码 ${response.status}`);
+    throw new Error(`文件加载失败，状态码 ${response.status}`);
+  }
+
+  const buffer = await response.arrayBuffer();
+
+  if (fileId) {
+    // 从响应头取出 Content-Type 并独立传入缓存，避免 Safari IndexedDB 把 Blob.type 清空
+    const responseContentType = response.headers?.get?.('Content-Type') || '';
+    const blob = new Blob([buffer], { type: responseContentType });
+    await CacheFileContent.saveToCache(fileId, blob, actualCrc32, blob.size, responseContentType);
+  }
+
+  return {
+    buffer,
+    headers: response.headers,
+    status: response.status,
+    fromCache: false,
+  }
+};