@spacecorexdev/core 0.0.4 → 0.0.5

package/src/ui/UIFilePreview/filePreview.css

@@ -0,0 +1,193 @@
+.pptx-preview-wrapper .pptx-preview-slide-wrapper {
+  border-bottom: 1px solid rgb(var(--color-border));
+  margin: 0 !important;
+  /* padding-top: 10px !important;
+  padding-bottom: 10px !important; */
+}
+
+.pptx-preview-wrapper .pptx-preview-slide-wrapper .slide-master-wrapper,
+.pptx-preview-wrapper .pptx-preview-slide-wrapper .slide-layout-wrapper,
+.pptx-preview-wrapper .pptx-preview-slide-wrapper .slide-wrapper {
+  right: 0;
+}
+
+.pptx-preview-wrapper .pptx-preview-slide-wrapper table {
+  width: 100%;
+}
+
+.ant-modal-root .ant-modal-wrap .ant-modal.ant-modal-fullscreen.ant-modal-ppt .ant-modal-content {
+  min-height: 100vh !important;
+  margin-bottom: 0 !important;
+  padding-top: 0 !important;
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+  padding-bottom: 0 !important;
+}
+
+.ant-modal-root .ant-modal-wrap .ant-modal.ant-modal-fullscreen.ant-modal-ppt .ant-modal-content .ant-modal-body {
+  min-height: 100vh !important;
+  background: rgb(var(--color-black));
+}
+
+.ant-modal-root .ant-modal-wrap .ant-modal.ant-modal-fullscreen.ant-modal-ppt .ant-modal-content .ant-modal-body>div {
+  background: rgb(var(--color-black)) !important;
+}
+
+.ant-modal-root .ant-modal-wrap .ant-modal.ant-modal-fullscreen.ant-modal-ppt .ant-modal-content .ant-modal-close {
+  color: rgb(var(--color-gray-300));
+}
+
+.ant-modal-root .ant-modal-wrap .ant-modal.ant-modal-fullscreen.ant-modal-ppt .ant-modal-content .ant-modal-close:hover {
+  color: rgb(var(--color-white));
+}
+
+.ant-modal-root .ant-modal-wrap .ant-modal.ant-modal-fullscreen .ant-modal-content .ant-modal-close {
+  position: fixed;
+}
+
+.docx-preview {
+  justify-self: center;
+}
+
+.ui-file-preview-archive {
+  width: 100%;
+  height: 100dvh;
+  min-height: 0;
+  background: rgb(var(--color-surface));
+}
+
+.ui-file-preview-pdf {
+  width: 100%;
+  height: 100dvh;
+  min-height: 0;
+  background: rgb(var(--color-surface));
+}
+
+
+/* ==========================================================================
+   PDF 预览文本选择修复
+   PDF.js 默认禁用了文本选择高亮，且 .enablePermissions 模式下完全禁用，
+   这里用最高优先级的覆盖确保文本可以被选择并看到选中高亮。
+   ========================================================================== */
+
+/* 1) 文本层提升到画布之上，确保鼠标事件落在文本层而非 canvas 上 */
+.ui-file-preview-pdf .pdfViewer .page .textLayer {
+  z-index: 2 !important;
+  pointer-events: auto !important;
+}
+
+/* 2) 强制文本层内的所有 span 均可选择，覆盖权限禁用规则 */
+.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;
+}
+
+/* 3) 恢复选择高亮的默认颜色，否则 ::selection 背景透明看不到选中内容 */
+.ui-file-preview-pdf .pdfViewer .textLayer ::selection,
+.ui-file-preview-pdf .pdfViewer .textLayer span::selection,
+.ui-file-preview-pdf .pdfViewer .textLayer br::selection {
+  background: AccentColor !important;
+  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;
+}
+
+/* 4) 文本层本身也要允许选择，防止父级 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;
+}
+
+
+.ui-file-preview-word {
+  width: 100%;
+  height: 100vh;
+  min-height: 0;
+  background: rgb(var(--color-surface));
+}
+
+.ui-file-preview-excel {
+  width: 100%;
+  height: 100vh;
+  min-height: 0;
+  background: #ffffff;
+}
+
+.ui-file-preview-excel .e-virt-table-canvas {
+  background: #ffffff;
+}
+
+.ui-file-preview-cad .cad-toolbar {
+  padding-right: 50px;
+}
+
+.ui-file-preview-ebook {
+  width: 100%;
+  height: 100dvh;
+  min-height: 0;
+  /* 纸张色背景：暖白偏黄，模拟实体书纸张观感 */
+  background: #f5ecd9;
+}
+
+@media (min-width: 720px) {
+  .ui-file-preview-ebook .epub-actions {
+    margin-right: 35px;
+  }
+}
+
+.ui-file-preview-ebook .file-viewer,
+.ui-file-preview-ebook .file-viewer * {
+  max-width: none;
+}
+
+.ui-file-preview-ebook .epub-viewer {
+  width: 100% !important;
+  height: 100% !important;
+}
+
+.ui-file-preview-ebook .epub-container {
+  max-width: 100% !important;
+  width: 100% !important;
+}
+
+.ui-file-preview-ebook .epub-stage-wrap {
+  padding-left: 0;
+  padding-right: 0;
+  padding-bottom: 0;
+  padding-top: 0;
+}
+
+/* ==========================================================================
+   电子书阅读区样式
+   epubjs 使用 flow:scrolled + manager:continuous 模式，自行管理 iframe
+   高度与内部滚动。不要覆盖 iframe/epub-container 的 height，否则会破坏
+   epubjs 的翻页（next/prev）与视图计算。
+   ========================================================================== */
+.ui-file-preview-ebook .epub-toolbar,
+.ui-file-preview-ebook .epub-icon-button,
+.ui-file-preview-ebook .epub-button {
+  background: #f5ecd9 !important;
+}
+
+.ui-file-preview-ebook .epub-toc {
+  background: #f2deb4 !important;
+}
+
+.ui-file-preview-ebook .epub-stage {
+  /* 内容区用纸张色，与外层背景一致 */
+  background: #f5ecd9 !important;
+  box-shadow: none !important;
+  /* 允许触摸惯性滚动（移动端） */
+  touch-action: pan-y;
+}

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

@@ -0,0 +1,66 @@
+import React, { useMemo } from 'react';
+import { FileViewer } from '@file-viewer/react';
+import { archiveRenderer } from '@file-viewer/renderer-archive';
+import { pdfRenderer } from '@file-viewer/renderer-pdf';
+import { wordRenderer } from '@file-viewer/renderer-word';
+import { spreadsheetRenderer } from '@file-viewer/renderer-spreadsheet';
+import { textRenderer } from '@file-viewer/renderer-text';
+import { withPolyfillWorkerBootstrap } from '../../../utils/workerBootstrap';
+
+interface ArchivePreviewProps {
+  file: File | null;
+}
+
+export const ArchivePreview: React.FC<ArchivePreviewProps> = ({ file }) => {
+  const renderers = [
+    archiveRenderer,
+    spreadsheetRenderer,
+    wordRenderer,
+    pdfRenderer,
+    textRenderer,
+  ];
+
+  const options = useMemo(() => ({
+    locale: 'zh-CN',
+    rendererMode: 'extend' as const,
+    renderers: renderers as any,
+    theme: 'light' as const,
+    toolbar: {
+      position: 'bottom-right' as const,
+      download: false,
+      print: false,
+      exportHtml: false,
+    },
+    archive: {
+      workerUrl: withPolyfillWorkerBootstrap('/vendor/libarchive/worker-bundle.js'),
+      cache: true,
+      workerTimeoutMs: 30000,
+      maxArchiveSize: 320 * 1024 * 1024,
+      maxEntryPreviewSize: 64 * 1024 * 1024,
+    },
+    spreadsheet: {
+      worker: false,
+    },
+  }), []);
+
+  return (
+    <div className="ui-file-preview-archive" style={{ position: 'relative', minHeight: '100vh' }}>
+      <style>
+        {`.ui-file-preview-archive .archive-head .archive-sidebar-toggle {
+          display: none !important;
+        }
+        .ui-file-preview-archive .fv-root,
+        .ui-file-preview-archive .fv-container {
+          padding-right: 50px !important;
+        }`}
+      </style>
+      {file ? (
+        <FileViewer
+          file={file}
+          name={file.name}
+          options={options}
+        />
+      ) : null}
+    </div>
+  );
+};

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

@@ -0,0 +1,287 @@
+import React, { useEffect, useMemo, useState, useRef } from 'react';
+import { FileViewer, type FileViewerHandle } from '@file-viewer/react';
+import type { FileViewerZoomState } from '@file-viewer/core';
+import { engineeringRenderers } from '@file-viewer/preset-engineering';
+import { withPolyfillModuleWorkerBootstrap } from '../../../utils/workerBootstrap';
+
+export interface CadPreviewProps {
+  file: File | null;
+}
+
+export const CadPreview: React.FC<CadPreviewProps> = ({ file }) => {
+  const [buffer, setBuffer] = useState<ArrayBuffer | null>(null);
+  const [cssScale, setCssScale] = useState(1);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const viewerRef = useRef<FileViewerHandle | null>(null);
+  const initialDistanceRef = useRef(0);
+  const baseZoomRef = useRef(1);
+  const rafIdRef = useRef<number | null>(null);
+  const pendingScaleRef = useRef(1);
+  const isPinchingRef = useRef(false);
+  const lastTouchCountRef = useRef(0);
+
+  useEffect(() => {
+    if (file) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        setBuffer(e.target?.result as ArrayBuffer);
+      };
+      reader.readAsArrayBuffer(file);
+    } else {
+      setBuffer(null);
+    }
+  }, [file]);
+
+  useEffect(() => {
+    // 保存原始 viewport 设置
+    const viewportMeta = document.querySelector('meta[name="viewport"]');
+    const originalContent = viewportMeta?.getAttribute('content') || '';
+
+    // 禁用页面缩放
+    if (viewportMeta) {
+      viewportMeta.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no');
+    }
+
+    // 全局阻止双指缩放到整个页面
+    const handleGlobalTouchStart = (e: TouchEvent) => {
+      if (e.touches.length === 2) {
+        e.preventDefault();
+      }
+    };
+
+    const handleGlobalGestureStart = (e: Event) => {
+      e.preventDefault();
+    };
+
+    const handleGlobalGestureChange = (e: Event) => {
+      e.preventDefault();
+    };
+
+    document.addEventListener('touchstart', handleGlobalTouchStart, { passive: false, capture: true });
+    document.addEventListener('gesturestart', handleGlobalGestureStart);
+    document.addEventListener('gesturechange', handleGlobalGestureChange);
+
+    return () => {
+      // 恢复原始 viewport 设置
+      if (viewportMeta) {
+        viewportMeta.setAttribute('content', originalContent);
+      }
+
+      document.removeEventListener('touchstart', handleGlobalTouchStart, { capture: true });
+      document.removeEventListener('gesturestart', handleGlobalGestureStart);
+      document.removeEventListener('gesturechange', handleGlobalGestureChange);
+    };
+  }, []);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const restoreTouchAction = () => {
+      container.style.touchAction = 'pan-x pan-y';
+    };
+
+    const syncZoomToCad = () => {
+      const finalScale = pendingScaleRef.current;
+      const baseScale = baseZoomRef.current;
+      const ratio = finalScale / baseScale;
+      
+      if (Math.abs(ratio - 1) < 0.05) return;
+      
+      const steps = Math.round(Math.log(ratio) / Math.log(1.15));
+      const absSteps = Math.min(Math.abs(steps), 10);
+      
+      if (steps > 0) {
+        for (let i = 0; i < absSteps; i++) {
+          viewerRef.current?.zoomIn?.();
+        }
+      } else if (steps < 0) {
+        for (let i = 0; i < absSteps; i++) {
+          viewerRef.current?.zoomOut?.();
+        }
+      }
+    };
+
+    const handleTouchStart = (e: TouchEvent) => {
+      const touchCount = e.touches.length;
+      
+      if (touchCount === 2 && !isPinchingRef.current) {
+        const dx = e.touches[0].clientX - e.touches[1].clientX;
+        const dy = e.touches[0].clientY - e.touches[1].clientY;
+        initialDistanceRef.current = Math.sqrt(dx * dx + dy * dy);
+        
+        const zoomState = viewerRef.current?.getZoomState?.();
+        baseZoomRef.current = zoomState?.scale || 1;
+        pendingScaleRef.current = baseZoomRef.current;
+        setCssScale(1);
+        isPinchingRef.current = true;
+        
+        container.style.touchAction = 'none';
+        e.preventDefault();
+        e.stopPropagation();
+      }
+      
+      lastTouchCountRef.current = touchCount;
+    };
+
+    const handleTouchMove = (e: TouchEvent) => {
+      const touchCount = e.touches.length;
+      
+      if (touchCount === 2 && isPinchingRef.current) {
+        const dx = e.touches[0].clientX - e.touches[1].clientX;
+        const dy = e.touches[0].clientY - e.touches[1].clientY;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        
+        if (initialDistanceRef.current > 0) {
+          const targetScale = baseZoomRef.current * (distance / initialDistanceRef.current);
+          pendingScaleRef.current = targetScale;
+          
+          if (rafIdRef.current === null) {
+            rafIdRef.current = requestAnimationFrame(() => {
+              rafIdRef.current = null;
+              setCssScale(pendingScaleRef.current / baseZoomRef.current);
+            });
+          }
+        }
+        
+        e.preventDefault();
+        e.stopPropagation();
+      } else if (touchCount < 2 && isPinchingRef.current) {
+        isPinchingRef.current = false;
+        syncZoomToCad();
+        
+        if (rafIdRef.current !== null) {
+          cancelAnimationFrame(rafIdRef.current);
+          rafIdRef.current = null;
+        }
+        
+        setTimeout(() => {
+          setCssScale(1);
+          restoreTouchAction();
+        }, 100);
+      }
+      
+      lastTouchCountRef.current = touchCount;
+    };
+
+    const handleTouchEnd = (e: TouchEvent) => {
+      const touchCount = e.touches.length;
+      
+      if (isPinchingRef.current && touchCount < 2) {
+        isPinchingRef.current = false;
+        syncZoomToCad();
+        
+        if (rafIdRef.current !== null) {
+          cancelAnimationFrame(rafIdRef.current);
+          rafIdRef.current = null;
+        }
+        
+        setTimeout(() => {
+          setCssScale(1);
+          restoreTouchAction();
+        }, 100);
+      }
+      
+      if (touchCount === 0) {
+        initialDistanceRef.current = 0;
+      }
+      
+      lastTouchCountRef.current = touchCount;
+    };
+
+    const handleTouchCancel = () => {
+      isPinchingRef.current = false;
+      initialDistanceRef.current = 0;
+      if (rafIdRef.current !== null) {
+        cancelAnimationFrame(rafIdRef.current);
+        rafIdRef.current = null;
+      }
+      setCssScale(1);
+      restoreTouchAction();
+      lastTouchCountRef.current = 0;
+    };
+
+    container.addEventListener('touchstart', handleTouchStart, { passive: false, capture: true });
+    container.addEventListener('touchmove', handleTouchMove, { passive: false, capture: true });
+    container.addEventListener('touchend', handleTouchEnd, { passive: false, capture: true });
+    container.addEventListener('touchcancel', handleTouchCancel, { passive: false, capture: true });
+
+    return () => {
+      container.removeEventListener('touchstart', handleTouchStart, { capture: true });
+      container.removeEventListener('touchmove', handleTouchMove, { capture: true });
+      container.removeEventListener('touchend', handleTouchEnd, { capture: true });
+      container.removeEventListener('touchcancel', handleTouchCancel, { capture: true });
+      
+      if (rafIdRef.current !== null) {
+        cancelAnimationFrame(rafIdRef.current);
+      }
+    };
+  }, [buffer]);
+
+  const options = useMemo(() => ({
+    locale: 'zh-CN',
+    rendererMode: 'replace' as const,
+    renderers: engineeringRenderers,
+    theme: 'dark' as const,
+    toolbar: {
+      position: 'bottom-right' as const,
+      download: false,
+      print: false,
+      exportHtml: false,
+    },
+    cad: {
+      // @flyfish-dev/cad-viewer 固定以 { type: 'module' } 启动 worker，必须用 module 版引导（ESM import 注入 polyfills）
+      workerUrl: withPolyfillModuleWorkerBootstrap('/wasm/cad/dwg-worker.js'),
+      wasmPath: '/wasm/cad/',
+      dwfWasmUrl: '/wasm/cad/dwfv-render.wasm',
+      // 黑色画布（类 AutoCAD 模型空间）；foreground 配合 adaptive 对比度保证图元/文字在黑底上可读
+      canvasOptions: {
+        background: '#000000',
+        foreground: '#ffffff',
+      },
+      dwfBackground: '#000000',
+    },
+  }), []);
+
+  return (
+    <div 
+      ref={containerRef}
+      className="ui-file-preview-cad" 
+      style={{ 
+        width: '100%', 
+        height: '100vh', 
+        minHeight: '600px',
+        touchAction: 'pan-x pan-y',
+        overflow: 'hidden',
+        userSelect: 'none',
+        WebkitUserSelect: 'none'
+      }}
+    >
+      {buffer && file ? (
+        <div
+          style={{
+            width: '100%',
+            height: '100%',
+            transform: `scale(${cssScale})`,
+            transformOrigin: 'center center',
+            transition: cssScale === 1 ? 'transform 0.1s ease-out' : 'none',
+            willChange: 'transform'
+          }}
+        >
+          <FileViewer
+            ref={(handleRef) => {
+              viewerRef.current = handleRef;
+            }}
+            buffer={buffer}
+            filename={file.name}
+            name={file.name}
+            type="dwg"
+            size={file.size}
+            options={options}
+            style={{ width: '100%', height: '100%' }}
+          />
+        </div>
+      ) : null}
+    </div>
+  );
+};