@spacecorexdev/core 0.0.4 → 0.0.5

package/src/ui/UIFilePreview/filetypes/excel.tsx

@@ -0,0 +1,355 @@
+import React, { useEffect, useRef, useState } from 'react';
+import * as XLSX from 'xlsx';
+import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core';
+import UniverPresetSheetsCoreZhCN from '@univerjs/preset-sheets-core/locales/zh-CN';
+import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets';
+import '@univerjs/preset-sheets-core/lib/index.css';
+
+export interface ExcelPreviewProps {
+  file: File | null;
+}
+
+type PreviewStatus = 'loading' | 'ready' | 'error';
+
+type UniverAPI = ReturnType<typeof createUniver>['univerAPI'];
+
+/**
+ * 把 SheetJS 工作簿转换为 Univer 的 IWorkbookData（只读预览用）。
+ * 覆盖：多工作表、值类型、公式、合并单元格、列宽行高、隐藏行列/工作表、冻结窗格、日期/数字格式。
+ */
+function convertWorkbook(workbook: XLSX.WorkBook, fileName: string): Record<string, unknown> {
+  const sheets: Record<string, unknown> = {};
+  const sheetOrder: string[] = [];
+
+  const hiddenMap = new Map<string, boolean>();
+  (workbook.Workbook?.Sheets ?? []).forEach((meta) => {
+    if (meta.name) hiddenMap.set(meta.name, Boolean(meta.Hidden));
+  });
+
+  workbook.SheetNames.forEach((sheetName, sheetIndex) => {
+    const worksheet = workbook.Sheets[sheetName];
+    const sheetId = `sheet-${sheetIndex + 1}`;
+
+    const cellData: Record<number, Record<number, unknown>> = {};
+    let maxRow = 0;
+    let maxColumn = 0;
+
+    // 单元格
+    Object.keys(worksheet).forEach((address) => {
+      if (address.startsWith('!')) return;
+      const cell = worksheet[address] as XLSX.CellObject | undefined;
+      if (!cell) return;
+
+      const { r, c } = XLSX.utils.decode_cell(address);
+      maxRow = Math.max(maxRow, r);
+      maxColumn = Math.max(maxColumn, c);
+
+      const univerCell: Record<string, unknown> = {};
+
+      // 公式（SheetJS 的 f 不含开头的 '='）
+      if (typeof cell.f === 'string' && cell.f.length > 0) {
+        univerCell.f = cell.f.startsWith('=') ? cell.f.slice(1) : cell.f;
+      }
+
+      // 值：保留原始类型（数字/布尔/字符串），日期转换为 Excel 序列值
+      const rawValue = cell.v;
+      if (rawValue !== undefined && rawValue !== null && rawValue !== '') {
+        if (cell.t === 'd' && rawValue instanceof Date) {
+          univerCell.v = dateToExcelSerial(rawValue);
+          univerCell.s = { n: { pattern: normalizeNumfmt(cell.z) || 'yyyy-mm-dd' } };
+        } else if (cell.t === 'n' && typeof rawValue === 'number') {
+          univerCell.v = rawValue;
+          const pattern = normalizeNumfmt(cell.z);
+          if (pattern) univerCell.s = { n: { pattern } };
+        } else if (cell.t === 'b') {
+          univerCell.v = Boolean(rawValue);
+        } else {
+          univerCell.v = String(rawValue);
+        }
+      }
+
+      if (Object.keys(univerCell).length > 0) {
+        if (!cellData[r]) cellData[r] = {};
+        cellData[r][c] = univerCell;
+      }
+    });
+
+    // 合并单元格
+    const mergeData = (worksheet['!merges'] ?? []).map((range) => ({
+      startRow: range.s.r,
+      startColumn: range.s.c,
+      endRow: range.e.r,
+      endColumn: range.e.c,
+    }));
+    (worksheet['!merges'] ?? []).forEach((range) => {
+      maxRow = Math.max(maxRow, range.e.r);
+      maxColumn = Math.max(maxColumn, range.e.c);
+    });
+
+    // 列宽
+    const columnData: Record<number, { w?: number; hd?: 1 }> = {};
+    (worksheet['!cols'] ?? []).forEach((col, index) => {
+      const column: { w?: number; hd?: 1 } = {};
+      if (typeof col.wpx === 'number') column.w = Math.round(col.wpx);
+      else if (typeof col.wch === 'number') column.w = Math.round(col.wch * 7 + 5);
+      if (col.hidden) column.hd = 1;
+      if (column.w !== undefined || column.hd !== undefined) columnData[index] = column;
+    });
+
+    // 行高
+    const rowData: Record<number, { h?: number; hd?: 1 }> = {};
+    (worksheet['!rows'] ?? []).forEach((row, index) => {
+      const rowInfo: { h?: number; hd?: 1 } = {};
+      if (typeof row.hpx === 'number') rowInfo.h = Math.round(row.hpx);
+      else if (typeof row.hpt === 'number') rowInfo.h = Math.round((row.hpt * 96) / 72);
+      if (row.hidden) rowInfo.hd = 1;
+      if (rowInfo.h !== undefined || rowInfo.hd !== undefined) rowData[index] = rowInfo;
+    });
+
+    // 冻结窗格（部分格式/版本下 SheetJS 可能不提供）
+    const freezePane = (worksheet as XLSX.WorkSheet & {
+      '!freeze'?: { xSplit?: number; ySplit?: number; topLeftCell?: string };
+    })['!freeze'];
+    let freeze: { xSplit: number; ySplit: number; startRow: number; startColumn: number } | undefined;
+    if (freezePane && (freezePane.xSplit || freezePane.ySplit)) {
+      let startRow = freezePane.ySplit ?? 0;
+      let startColumn = freezePane.xSplit ?? 0;
+      if (freezePane.topLeftCell) {
+        const anchor = XLSX.utils.decode_cell(freezePane.topLeftCell);
+        startRow = anchor.r;
+        startColumn = anchor.c;
+      }
+      freeze = {
+        xSplit: freezePane.xSplit ?? 0,
+        ySplit: freezePane.ySplit ?? 0,
+        startRow,
+        startColumn,
+      };
+    }
+
+    // 实际使用范围（!ref 可能比已解析单元格更大）
+    let refMaxRow = maxRow;
+    let refMaxColumn = maxColumn;
+    if (worksheet['!ref']) {
+      const range = XLSX.utils.decode_range(worksheet['!ref']);
+      refMaxRow = Math.max(refMaxRow, range.e.r);
+      refMaxColumn = Math.max(refMaxColumn, range.e.c);
+    }
+
+    sheets[sheetId] = {
+      id: sheetId,
+      name: sheetName,
+      hidden: hiddenMap.get(sheetName) ? 1 : 0,
+      ...(freeze ? { freeze } : {}),
+      rowCount: Math.max(refMaxRow + 1, 100),
+      columnCount: Math.max(refMaxColumn + 1, 26),
+      defaultColumnWidth: 88,
+      defaultRowHeight: 24,
+      showGridlines: 1,
+      rowHeader: { width: 46 },
+      columnHeader: { height: 22 },
+      mergeData,
+      cellData,
+      rowData,
+      columnData,
+    };
+    sheetOrder.push(sheetId);
+  });
+
+  return {
+    id: `workbook-preview-${Date.now()}`,
+    name: fileName,
+    sheetOrder,
+    sheets,
+  };
+}
+
+/** JS Date 转 Excel 1900 日期系统的序列值（兼容 Excel 1900 闰年 Bug）。 */
+function dateToExcelSerial(date: Date): number {
+  const epoch = Date.UTC(1899, 11, 30);
+  const current = Date.UTC(
+    date.getFullYear(),
+    date.getMonth(),
+    date.getDate(),
+    date.getHours(),
+    date.getMinutes(),
+    date.getSeconds(),
+  );
+  return (current - epoch) / 86_400_000;
+}
+
+/** Excel 内置数字格式 ID（数字形式 z）中常见的日期/时间格式。 */
+const BUILTIN_NUMFMT: Record<number, string> = {
+  14: 'yyyy/m/d',
+  15: 'd-mmm-yy',
+  16: 'd-mmm',
+  17: 'mmm-yy',
+  18: 'h:mm AM/PM',
+  19: 'h:mm:ss AM/PM',
+  20: 'h:mm',
+  21: 'h:mm:ss',
+  22: 'yyyy/m/d h:mm',
+  27: 'yyyy-mm-dd',
+  28: 'mmm-dd',
+};
+
+/**
+ * 归一化数字格式：General 等通用格式无需写入 Univer；
+ * 内置格式 ID 映射为日期/时间模式；其余 Excel 格式串与 Univer 基本兼容，直接透传。
+ */
+function normalizeNumfmt(pattern?: string | number): string | undefined {
+  if (pattern === undefined || pattern === null) return undefined;
+  if (typeof pattern === 'number') return BUILTIN_NUMFMT[pattern];
+  const trimmed = pattern.trim();
+  if (!trimmed || trimmed.toLowerCase() === 'general') return undefined;
+  return trimmed;
+}
+
+export const ExcelPreview: React.FC<ExcelPreviewProps> = ({ file }) => {
+  const [status, setStatus] = useState<PreviewStatus>('loading');
+  const [retryTick, setRetryTick] = useState(0);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!file || !containerRef.current) return;
+
+    let disposed = false;
+    let univerAPI: UniverAPI | null = null;
+
+    setStatus('loading');
+
+    (async () => {
+      try {
+        const arrayBuffer = await file.arrayBuffer();
+        // cellDates: 日期单元格解析为 JS Date；cellNF: 保留数字格式串到 cell.z
+        const workbook = XLSX.read(arrayBuffer, { type: 'array', cellDates: true, cellNF: true });
+        const workbookData = convertWorkbook(workbook, file.name);
+
+        if (disposed || !containerRef.current) return;
+
+        const instance = createUniver({
+          locale: LocaleType.ZH_CN,
+          locales: {
+            [LocaleType.ZH_CN]: mergeLocales(UniverPresetSheetsCoreZhCN),
+          },
+          presets: [
+            UniverSheetsCorePreset({
+              container: containerRef.current,
+              header: true,
+              toolbar: true,
+              formulaBar: true,
+              contextMenu: true,
+            }),
+          ],
+        });
+        univerAPI = instance.univerAPI;
+
+        if (disposed) {
+          univerAPI.dispose();
+          univerAPI = null;
+          return;
+        }
+
+        const univerWorkbook = univerAPI.createWorkbook(workbookData as any);
+        // 只读预览：禁止编辑，保留选中、滚动、多工作表切换
+        univerWorkbook.setEditable(false);
+
+        setStatus('ready');
+      } catch (error) {
+        console.error('[ExcelPreview] 文档加载失败:', error);
+        if (!disposed) setStatus('error');
+      }
+    })();
+
+    return () => {
+      disposed = true;
+      if (univerAPI) {
+        univerAPI.dispose();
+        univerAPI = null;
+      }
+    };
+  }, [file, retryTick]);
+
+  return (
+    <div className="ui-file-preview-excel" data-global-context-menu-ignore="true">
+      <style>
+        {`.excel-loading-overlay {
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background: #ffffff;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          z-index: 100;
+        }
+        .excel-loading-spinner {
+          width: 40px;
+          height: 40px;
+          border: 3px solid #f3f3f3;
+          border-top: 3px solid #5292f7;
+          border-radius: 50%;
+          animation: excel-spin 1s linear infinite;
+        }
+        .excel-loading-text {
+          margin-top: 16px;
+          color: #666;
+          font-size: 14px;
+        }
+        .excel-loading-error-icon {
+          font-size: 48px;
+          color: #f56c6c;
+        }
+        .excel-loading-error-text {
+          margin-top: 16px;
+          color: #f56c6c;
+          font-size: 14px;
+        }
+        .excel-loading-retry-btn {
+          margin-top: 20px;
+          padding: 8px 24px;
+          background: #5292f7;
+          color: #fff;
+          border: none;
+          border-radius: 4px;
+          cursor: pointer;
+          font-size: 14px;
+        }
+        .excel-loading-retry-btn:hover {
+          background: #67b8ff;
+        }
+        @keyframes excel-spin {
+          0% { transform: rotate(0deg); }
+          100% { transform: rotate(360deg); }
+        }`}
+      </style>
+      {file && status !== 'ready' && (
+        <div className="excel-loading-overlay">
+          {status === 'error' ? (
+            <>
+              <div className="excel-loading-error-icon">✕</div>
+              <div className="excel-loading-error-text">文档加载失败</div>
+              <button
+                className="excel-loading-retry-btn"
+                onClick={() => setRetryTick((tick) => tick + 1)}
+              >
+                重新加载
+              </button>
+            </>
+          ) : (
+            <>
+              <div className="excel-loading-spinner"></div>
+              <div className="excel-loading-text">加载中...</div>
+            </>
+          )}
+        </div>
+      )}
+      {file ? (
+        <div key={retryTick} ref={containerRef} style={{ width: '100%', height: '100dvh' }} />
+      ) : null}
+    </div>
+  );
+};

package/src/ui/UIFilePreview/filetypes/image.tsx

@@ -0,0 +1,20 @@
+import React, { useState } from 'react';
+
+export interface ImagePreviewProps {
+  containerRef: React.RefObject<HTMLDivElement>;
+  type: string;
+}
+
+export const ImagePreview: React.FC<ImagePreviewProps> = ({ containerRef, type }) => {
+  return (
+    type === 'image' && (
+      <div ref={containerRef}
+          style={{
+            display: type === 'image'? 'inherit': 'none',
+            maxWidth: '100%',
+            maxHeight: 'calc(100vh - 40px)',
+            objectFit: 'contain'
+          }}
+        />
+    ));
+};

package/src/ui/UIFilePreview/filetypes/imageLoader.ts

@@ -0,0 +1,63 @@
+import type { Dispatch, RefObject, SetStateAction } from 'react';
+import * as febs from 'febs-browser';
+
+/**
+ * 根据 ArrayBuffer 开头的 Magic Bytes 推断图片 MIME 类型。
+ * 作为兜底方案：当 Content-Type 响应头/缓存类型都缺失时（尤其 Safari 缓存 Blob.type 丢失后），
+ * 用于保证 <img src="blob:..."> 在 Safari 严格模式下仍能正确解码。
+ */
+const detectImageMimeFromBuffer = (ab: ArrayBuffer): string => {
+  if (!ab || ab.byteLength < 4) return '';
+  const view = new Uint8Array(ab, 0, Math.min(16, ab.byteLength));
+  // JPEG: FF D8 FF
+  if (view[0] === 0xFF && view[1] === 0xD8 && view[2] === 0xFF) return 'image/jpeg';
+  // PNG: 89 50 4E 47
+  if (view[0] === 0x89 && view[1] === 0x50 && view[2] === 0x4E && view[3] === 0x47) return 'image/png';
+  // GIF: 47 49 46 38
+  if (view[0] === 0x47 && view[1] === 0x49 && view[2] === 0x46 && view[3] === 0x38) return 'image/gif';
+  // WEBP: 52 49 46 46 .. .. .. .. 57 45 42 50 ("RIFF" + ... + "WEBP")
+  if (view.length >= 12
+    && view[0] === 0x52 && view[1] === 0x49 && view[2] === 0x46 && view[3] === 0x46
+    && view[8] === 0x57 && view[9] === 0x45 && view[10] === 0x42 && view[11] === 0x50) return 'image/webp';
+  // BMP: 42 4D
+  if (view[0] === 0x42 && view[1] === 0x4D) return 'image/bmp';
+  // SVG: <svg 开头的文本（text/xml 或 image/svg+xml）
+  try {
+    const head = new TextDecoder('utf-8').decode(view.slice(0, 16)).trimStart();
+    if (head.startsWith('<svg') || head.startsWith('<?xml')) return 'image/svg+xml';
+  } catch { /* ignore decode errors */ }
+  return '';
+};
+
+export const loadImagePreview = async (
+  buffer: {
+    buffer: ArrayBuffer;
+    headers: any;
+    status: number;
+  },
+  imageRef: RefObject<HTMLDivElement>,
+) => {
+  const img = new Image();
+  // 优先 headers → 再用 Magic Bytes 兜底（Safari Blob/IDB 的 Content-Type 可能被清空）
+  let mimeType = buffer.headers?.get?.('Content-Type') || '';
+  if (!mimeType) {
+    mimeType = detectImageMimeFromBuffer(buffer.buffer);
+  }
+  const blob = new Blob([buffer.buffer], { type: mimeType });
+  img.src = URL.createObjectURL(blob);
+  img.onload = () => {
+    img.style.maxWidth = '100%';
+    img.style.maxHeight = 'calc(100vh - 40px)';
+    img.style.objectFit = 'contain';
+  
+    (imageRef.current as any).innerHTML = '';
+    (imageRef.current as any).appendChild(img);
+    URL.revokeObjectURL(img.src);
+  }
+};
+
+export const destroyImagePreview = (imageRef: RefObject<HTMLDivElement>) => {
+  // if (imageRef.current) {
+  //   (imageRef.current as any).innerHTML = '';
+  // }
+}

package/src/ui/UIFilePreview/filetypes/pdf.tsx

@@ -0,0 +1,156 @@
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { FileViewer } from '@file-viewer/react';
+import { pdfRenderer } from '@file-viewer/renderer-pdf';
+
+/** localStorage 存储前缀 */
+const PROGRESS_STORAGE_PREFIX = 'reading-progress:';
+
+/** 防抖保存间隔（ms） */
+const SAVE_DEBOUNCE_MS = 500;
+
+/** 阅读进度记录 */
+interface ReadingProgressRecord {
+  state: Record<string, unknown>;
+  savedAt: number;
+}
+
+const readProgress = (key: string): Record<string, unknown> | undefined => {
+  try {
+    const raw = localStorage.getItem(PROGRESS_STORAGE_PREFIX + key);
+    if (raw) {
+      const parsed = JSON.parse(raw) as ReadingProgressRecord;
+      return parsed.state;
+    }
+  } catch {
+    // ignore
+  }
+  return undefined;
+};
+
+const writeProgress = (key: string, state: Record<string, unknown>) => {
+  try {
+    const record: ReadingProgressRecord = { state, savedAt: Date.now() };
+    localStorage.setItem(PROGRESS_STORAGE_PREFIX + key, JSON.stringify(record));
+  } catch {
+    // ignore
+  }
+};
+
+export interface PdfPreviewProps {
+  file: File | null;
+  /** 阅读进度本地存储 key（通常为文件 ID）；未提供时不保存/恢复进度 */
+  progressKey?: string;
+}
+
+export const PdfPreview: React.FC<PdfPreviewProps> = ({ file, progressKey }) => {
+  const latestStateRef = useRef<Record<string, unknown> | null>(null);
+  const saveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const progressKeyRef = useRef(progressKey);
+  progressKeyRef.current = progressKey;
+
+  const initialViewState = useMemo(() => {
+    if (!progressKey) return undefined;
+    return readProgress(progressKey);
+  }, [progressKey]);
+
+  const onEvent = useCallback((event: { type: string; payload?: unknown }) => {
+    if (event.type !== 'view-state-change' || !progressKey) return;
+    const change = event.payload as { state?: Record<string, unknown> } | undefined;
+    if (change?.state) {
+      latestStateRef.current = change.state;
+      if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
+      saveTimerRef.current = setTimeout(() => {
+        if (latestStateRef.current) writeProgress(progressKey, latestStateRef.current);
+      }, SAVE_DEBOUNCE_MS);
+    }
+  }, [progressKey]);
+
+  useEffect(() => {
+    return () => {
+      if (saveTimerRef.current) {
+        clearTimeout(saveTimerRef.current);
+        saveTimerRef.current = null;
+      }
+      const key = progressKeyRef.current;
+      if (key && latestStateRef.current) {
+        writeProgress(key, latestStateRef.current);
+      }
+    };
+  }, []);
+
+  const pdfRenderers = [pdfRenderer];
+
+  const options = useMemo(() => ({
+    locale: 'zh-CN',
+    rendererMode: 'replace' as const,
+    renderers: pdfRenderers as any,
+    theme: 'light' as const,
+    toolbar: {
+      position: 'bottom-right' as const,
+      download: false,
+      print: false,
+      exportHtml: false,
+    },
+    pdf: {
+      cMapUrl: '/cmaps/',
+      defaultNavigationVisible: false,
+    },
+    initialViewState,
+  }), [initialViewState]);
+
+  return (
+    <div className="ui-file-preview-pdf" data-global-context-menu-ignore="true">
+      <style>
+        {`.pdf-toolbar {
+          padding-right: 50px !important;
+        }
+
+        /* 文本层提升到 canvas 之上，确保鼠标事件被文本层捕获 */
+        .ui-file-preview-pdf .pdfViewer .page .textLayer {
+          z-index: 2 !important;
+          pointer-events: auto !important;
+        }
+
+        /* 强制覆盖权限模式和通用 user-select 规则 */
+        .ui-file-preview-pdf .pdfViewer .textLayer span,
+        .ui-file-preview-pdf .pdfViewer .textLayer br,
+        .ui-file-preview-pdf .pdfViewer.enablePermissions .textLayer span {
+          -webkit-user-select: text !important;
+          -moz-user-select: text !important;
+          user-select: text !important;
+          cursor: text !important;
+          pointer-events: auto !important;
+        }
+
+        /* 恢复选择高亮背景（PDF.js 默认设为透明导致选中时看不到） */
+        .ui-file-preview-pdf .pdfViewer .textLayer ::selection,
+        .ui-file-preview-pdf .pdfViewer .textLayer span::selection,
+        .ui-file-preview-pdf .pdfViewer .textLayer br::selection {
+          background: highlight !important;
+        }
+        .ui-file-preview-pdf .pdfViewer .textLayer ::-moz-selection,
+        .ui-file-preview-pdf .pdfViewer .textLayer span::-moz-selection,
+        .ui-file-preview-pdf .pdfViewer .textLayer br::-moz-selection {
+          background: highlight !important;
+        }
+
+        /* 父级元素 user-select 统一放开 */
+        .ui-file-preview-pdf .pdfViewer,
+        .ui-file-preview-pdf .pdfViewer .page,
+        .ui-file-preview-pdf .pdfViewer .textLayer {
+          -webkit-user-select: text !important;
+          -moz-user-select: text !important;
+          user-select: text !important;
+        }`}
+      </style>
+      {file ? (
+        <FileViewer
+          file={file}
+          name={file.name}
+          options={options}
+          onEvent={onEvent}
+        />
+      ) : null}
+    </div>
+  );
+};