@spacecorexdev/core 0.0.2 → 0.0.5

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

@@ -0,0 +1,535 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { message } from 'antd';
+import { PptxViewer } from '@file-viewer/pptx';
+import { withPolyfillWorkerBootstrap } from '../../../utils/workerBootstrap';
+import { exportPptxPdf } from './pptExportPdf';
+import { ExportDropdown } from '../ExportDropdown';
+import { downloadBlob } from '../previewUtils';
+
+export interface PptPreviewProps {
+  file: File | null;
+}
+
+export const PptPreview: React.FC<PptPreviewProps> = ({ file }) => {
+  const [isLoading, setIsLoading] = useState(true);
+  const [hasError, setHasError] = useState(false);
+  const [reloadTick, setReloadTick] = useState(0);
+  const [exporting, setExporting] = useState(false);
+  // 大文件加载反馈：
+  // - stage='parsing'：worker 正在解压/解析 PPTX（大文件此阶段可能持续很久且此前只有转圈）
+  // - parsePercent：worker 上报的解析进度（0-100），parsedSlides：已解析幻灯片序号
+  // - stage='rendering'：解析完成后等待首页幻灯片渲染出来
+  const [stage, setStage] = useState<'parsing' | 'rendering'>('parsing');
+  const [parsePercent, setParsePercent] = useState(0);
+  const [parsedSlides, setParsedSlides] = useState(0);
+  const [renderedSlides, setRenderedSlides] = useState(0);
+  const [totalSlides, setTotalSlides] = useState(0);
+
+  // 离屏重新以 1:1 尺寸渲染全部幻灯片后逐页光栅化，直接下载 PDF（无打印对话框）。
+  const handleExportPdf = useCallback(async () => {
+    if (!file) {
+      message.warning('文档尚未加载完成，请稍后再试');
+      return;
+    }
+    setExporting(true);
+    message.loading({ key: 'ppt-export-pdf', content: '正在准备演示文稿…', duration: 0 });
+    try {
+      await exportPptxPdf({
+        file,
+        fileName: file.name,
+        onProgress: (page, total) => {
+          message.loading({ key: 'ppt-export-pdf', content: `正在导出第 ${page} / ${total} 页…`, duration: 0 });
+        },
+      });
+    } catch (error) {
+      console.error('PPT 导出 PDF 失败:', error);
+      message.error(`导出 PDF 失败：${(error as Error)?.message || '请重试'}`);
+    } finally {
+      message.destroy('ppt-export-pdf');
+      setExporting(false);
+    }
+  }, [file]);
+
+  // 下载原始文件：只读预览拿到的 File 就是原始文件
+  const handleDownload = useCallback(() => {
+    if (!file) return;
+    downloadBlob(file, file.name);
+  }, [file]);
+
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const targetRef = useRef<HTMLDivElement>(null);
+  const viewerRef = useRef<PptxViewer | null>(null);
+  const slideSizeRef = useRef<{ width?: number; height?: number } | null>(null);
+  const fittedRef = useRef(false);
+
+  /**
+   * 单页显示：只让"视觉中心最接近容器中心"的 slide 可见，
+   * 其余 slide 一律 opacity:0（由 CSS 控制）。滚动/键盘翻页时随滚动实时切换，
+   * 配合 CSS opacity 过渡形成翻页淡入淡出，任何窗口比例下都只看到一页。
+   * 注意：导出 PDF 使用独立离屏渲染器，其 slide 不在 .ppt-scroll-container 内，
+   * 不受这里的 class 影响。
+   */
+  const updateActiveSlide = useCallback(() => {
+    const container = scrollContainerRef.current;
+    if (!container) return;
+    const slides = Array.from(
+      container.querySelectorAll<HTMLElement>('.flyfish-pptx-content .slide'),
+    );
+    if (slides.length === 0) return;
+
+    const viewportCenter =
+      container.getBoundingClientRect().top + container.clientHeight / 2;
+
+    let activeIndex = 0;
+    let closestDist = Number.POSITIVE_INFINITY;
+    slides.forEach((slide, i) => {
+      const r = slide.getBoundingClientRect();
+      const d = Math.abs(r.top + r.height / 2 - viewportCenter);
+      if (d < closestDist) {
+        closestDist = d;
+        activeIndex = i;
+      }
+    });
+
+    slides.forEach((slide, i) => {
+      slide.classList.toggle('ppt-slide-active', i === activeIndex);
+    });
+  }, []);
+
+  /**
+   * 让幻灯片完整显示在可视区域内（contain 模式），并给每个 slide 加间距
+   * 让它们一页一页排列：每页视觉高度 = 100dvh，slide 在页内居中。
+   */
+  const layoutSlides = useCallback(async () => {
+    const viewer = viewerRef.current;
+    const container = scrollContainerRef.current;
+    const size = slideSizeRef.current;
+    if (!viewer || !container || !size) return;
+
+    const slideW = size.width ?? 1;
+    const slideH = size.height ?? 1;
+
+    // contain 模式缩放比
+    const scaleW = container.clientWidth / slideW;
+    const scaleH = container.clientHeight / slideH;
+    const scale = Math.min(scaleW, scaleH);
+    await viewer.setZoom(scale * 100);
+
+    // 每页的"布局高度"（content 坐标系里的像素）= 100dvh / scale
+    // 这样乘以 transform:scale 后视觉高度正好是 100dvh
+    const layoutPageHeight = container.clientHeight / scale;
+
+    // 等 viewer resize() 完成，再设 margin
+    requestAnimationFrame(() => {
+      const slides = Array.from(container.querySelectorAll('.flyfish-pptx-content .slide')) as HTMLElement[];
+      slides.forEach((slide) => {
+        const gap = Math.max(0, layoutPageHeight - slideH);
+        // 居中：前面加半个 gap，后面加半个 gap
+        slide.style.marginTop = `${gap / 2}px`;
+        slide.style.marginBottom = `${gap / 2}px`;
+        slide.style.marginLeft = 'auto';
+        slide.style.marginRight = 'auto';
+      });
+      // 间距生效后重新判定当前可见页
+      updateActiveSlide();
+    });
+  }, [updateActiveSlide]);
+
+  useEffect(() => {
+    let disposed = false;
+
+    const mount = async () => {
+      if (!file || !targetRef.current || !scrollContainerRef.current) return;
+
+      setIsLoading(true);
+      setHasError(false);
+      setStage('parsing');
+      setParsePercent(0);
+      setParsedSlides(0);
+      setRenderedSlides(0);
+      setTotalSlides(0);
+      fittedRef.current = false;
+      slideSizeRef.current = null;
+      scrollContainerRef.current.scrollTop = 0;
+
+      try {
+        const buffer = await file.arrayBuffer();
+        if (disposed) return;
+
+        const viewer = await PptxViewer.open(buffer, targetRef.current, {
+          fitMode: 'none',
+          workerType: 'classic',
+          workerUrl: withPolyfillWorkerBootstrap('/vendor/pptx/pptx.worker.js'),
+          lazySlides: false,
+          listOptions: undefined,
+          // worker 每解析完一页幻灯片上报一次：progress 为 0-100，
+          // message 形如 { type:'progress-update', slide_num, data }
+          onProgress: (progress: number, message: unknown) => {
+            if (disposed) return;
+            setParsePercent(Math.min(100, Math.max(0, Math.floor(progress))));
+            const slideNum = (message as { slide_num?: number } | null)?.slide_num;
+            if (typeof slideNum === 'number') {
+              setParsedSlides(slideNum);
+            }
+          },
+          onSlideSize: (size: { width?: number; height?: number }) => {
+            slideSizeRef.current = size;
+          },
+          onSlideRendered: (slideIndex: number) => {
+            if (disposed) return;
+            setRenderedSlides((count) => Math.max(count, slideIndex + 1));
+            setIsLoading(false);
+            // 幻灯片是流式逐页追加的：新页默认 opacity:0，
+            // 每次追加后都重算激活页，保证首页立即可见、其余页隐藏
+            requestAnimationFrame(() => updateActiveSlide());
+            if (!fittedRef.current) {
+              fittedRef.current = true;
+              void layoutSlides();
+            }
+          },
+          onError: (error) => {
+            if (disposed) return;
+            console.error('[ppt-preview] render error:', error);
+            setHasError(true);
+            setIsLoading(false);
+          },
+        });
+
+        if (disposed) {
+          viewer.destroy();
+          return;
+        }
+        viewerRef.current = viewer;
+        // open 在 worker 发送 Done（全部解析完成）后才 resolve，
+        // 此时可拿到总页数；若首页尚未渲染（极端大文件后处理慢），显示渲染阶段进度
+        setTotalSlides(viewer.slideCount || 0);
+        setStage('rendering');
+      } catch (error) {
+        if (disposed) return;
+        console.error('[ppt-preview] mount failed:', error);
+        setHasError(true);
+        setIsLoading(false);
+      }
+    };
+
+    void mount();
+
+    return () => {
+      disposed = true;
+      viewerRef.current?.destroy();
+      viewerRef.current = null;
+    };
+  }, [file, reloadTick, layoutSlides, updateActiveSlide]);
+
+  // 窗口尺寸变化时重新适配
+  useEffect(() => {
+    let frame = 0;
+    const handleResize = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => {
+        void layoutSlides();
+      });
+    };
+    window.addEventListener('resize', handleResize);
+    return () => {
+      cancelAnimationFrame(frame);
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [layoutSlides]);
+
+  // 滚动过程中逐帧切换"当前页"显隐（与滚动结束后的对齐 snap 相互独立：
+  // snap 有 150ms 防抖，显隐必须实时，否则滚动途中仍会看到相邻页）
+  useEffect(() => {
+    const container = scrollContainerRef.current;
+    if (!container) return;
+
+    let frame = 0;
+    const handleScroll = () => {
+      if (frame) return;
+      frame = requestAnimationFrame(() => {
+        frame = 0;
+        updateActiveSlide();
+      });
+    };
+
+    container.addEventListener('scroll', handleScroll, { passive: true });
+    return () => {
+      if (frame) cancelAnimationFrame(frame);
+      container.removeEventListener('scroll', handleScroll);
+    };
+  }, [updateActiveSlide]);
+
+  // 滚动结束后自动对齐到最近的 slide（与方向键同算法，视觉坐标零换算）
+  useEffect(() => {
+    const container = scrollContainerRef.current;
+    if (!container) return;
+
+    let scrollTimer: number;
+    let snapping = false;
+
+    const snap = () => {
+      if (snapping) return;
+      const slides = Array.from(container.querySelectorAll('.flyfish-pptx-content .slide')) as HTMLElement[];
+      if (slides.length === 0) return;
+
+      const containerRect = container.getBoundingClientRect();
+      const viewportCenter = containerRect.top + container.clientHeight / 2;
+
+      // 找视觉中心最接近容器中心的 slide
+      let closest = slides[0];
+      let closestDist = Number.POSITIVE_INFINITY;
+      for (const slide of slides) {
+        const r = slide.getBoundingClientRect();
+        const d = Math.abs(r.top + r.height / 2 - viewportCenter);
+        if (d < closestDist) { closestDist = d; closest = slide; }
+      }
+
+      const slideRect = closest.getBoundingClientRect();
+      const scrollDelta = slideRect.top + slideRect.height / 2 - viewportCenter;
+      if (Math.abs(scrollDelta) < 3) return;
+
+      snapping = true;
+      container.scrollTo({
+        top: Math.max(0, container.scrollTop + scrollDelta),
+        behavior: 'smooth',
+      });
+      window.setTimeout(() => { snapping = false; }, 500);
+    };
+
+    const handleScroll = () => {
+      clearTimeout(scrollTimer);
+      scrollTimer = window.setTimeout(snap, 150);
+    };
+
+    container.addEventListener('scroll', handleScroll, { passive: true });
+    return () => {
+      clearTimeout(scrollTimer);
+      container.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
+  // 方向键翻页：↑← 上一页，↓→/空格 下一页，Home 首页，End 末页
+  useEffect(() => {
+    const container = scrollContainerRef.current;
+    if (!container) return;
+
+    const goToIndex = (delta: number) => {
+      const slides = Array.from(container.querySelectorAll('.flyfish-pptx-content .slide')) as HTMLElement[];
+      if (slides.length === 0) return;
+
+      const containerRect = container.getBoundingClientRect();
+      const viewportVisualCenter = containerRect.top + container.clientHeight / 2;
+
+      // 当前 slide：视觉中心最接近容器中心的
+      let currentIndex = 0;
+      let closestDist = Number.POSITIVE_INFINITY;
+      slides.forEach((slide, i) => {
+        const r = slide.getBoundingClientRect();
+        const d = Math.abs(r.top + r.height / 2 - viewportVisualCenter);
+        if (d < closestDist) { closestDist = d; currentIndex = i; }
+      });
+
+      const idx = Math.max(0, Math.min(slides.length - 1, currentIndex + delta));
+      if (idx === currentIndex) return;
+
+      // 让目标 slide 的视觉中心对齐容器中心
+      // scrollTop 和 getBoundingClientRect 都在视口坐标系，直接对应，
+      // scrollTop 增加 delta → slide visual top 减少 delta，零换算！
+      const slideRect = slides[idx].getBoundingClientRect();
+      const slideCenter = slideRect.top + slideRect.height / 2;
+      const scrollDelta = slideCenter - viewportVisualCenter;
+
+      container.scrollTo({
+        top: Math.max(0, container.scrollTop + scrollDelta),
+        behavior: 'smooth',
+      });
+    };
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (['ArrowUp', 'ArrowLeft'].includes(e.key)) {
+        e.preventDefault();
+        goToIndex(-1);
+      } else if (['ArrowDown', 'ArrowRight', ' '].includes(e.key)) {
+        e.preventDefault();
+        goToIndex(1);
+      } else if (e.key === 'Home') {
+        e.preventDefault();
+        goToIndex(-9999);
+      } else if (e.key === 'End') {
+        e.preventDefault();
+        goToIndex(9999);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, []);
+
+  return (
+    <div className="ui-file-preview-ppt" data-global-context-menu-ignore="true">
+      <style>
+        {`.ui-file-preview-ppt {
+          position: relative;
+          width: 100%;
+          height: 100dvh;
+          background: #000;
+          color: #000;
+          color-scheme: light;
+          overflow: hidden;
+        }
+        .ppt-export-pdf-btn {
+          position: absolute;
+          top: 7px;
+          right: 16px;
+          z-index: 50;
+        }
+        .ppt-scroll-container {
+          width: 100%;
+          height: 100dvh;
+          overflow-y: auto;
+          overflow-x: hidden;
+          scrollbar-width: none;
+        }
+        .ppt-scroll-container::-webkit-scrollbar {
+          display: none;
+        }
+        /* 覆盖 viewer 默认的 .slide margin-bottom: 50px，
+           由 layoutSlides() 精确计算间距并 inline 设置。
+           单页显示：默认全部透明，仅当前页（视觉中心所在页）加
+           .ppt-slide-active 后不透明，保证任何窗口比例下窗口内只出现一页；
+           过渡时间要短，翻页时快速淡入淡出而不拖泥带水。
+           （离屏导出 PDF 的 viewer 不在 .ppt-scroll-container 内，不受影响） */
+        .ppt-scroll-container .flyfish-pptx-content .slide {
+          box-shadow: none !important;
+          opacity: 0;
+          transition: opacity 0.18s ease;
+        }
+        .ppt-scroll-container .flyfish-pptx-content .slide.ppt-slide-active {
+          opacity: 1;
+        }
+        .ppt-loading-overlay {
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background: #000;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          z-index: 100;
+        }
+        .ppt-loading-spinner {
+          width: 40px;
+          height: 40px;
+          border: 3px solid #333;
+          border-top: 3px solid #5292f7;
+          border-radius: 50%;
+          animation: ppt-spin 1s linear infinite;
+        }
+        .ppt-loading-text {
+          margin-top: 16px;
+          color: #ccc;
+          font-size: 14px;
+        }
+        .ppt-loading-progress {
+          margin-top: 20px;
+          width: 220px;
+          height: 6px;
+          background: #2a2a2a;
+          border-radius: 3px;
+          overflow: hidden;
+        }
+        .ppt-loading-progress-bar {
+          height: 100%;
+          background: linear-gradient(90deg, #5292f7, #67b8ff);
+          border-radius: 3px;
+          transition: width 0.3s ease;
+        }
+        .ppt-loading-percent {
+          margin-top: 8px;
+          color: #888;
+          font-size: 12px;
+          min-height: 16px;
+        }
+        .ppt-loading-error-icon {
+          font-size: 48px;
+          color: #f56c6c;
+        }
+        .ppt-loading-error-text {
+          margin-top: 16px;
+          color: #f56c6c;
+          font-size: 14px;
+        }
+        .ppt-loading-retry-btn {
+          margin-top: 20px;
+          padding: 8px 24px;
+          background: #5292f7;
+          color: #fff;
+          border: none;
+          border-radius: 4px;
+          cursor: pointer;
+          font-size: 14px;
+        }
+        .ppt-loading-retry-btn:hover {
+          background: #67b8ff;
+        }
+        @keyframes ppt-spin {
+          0% { transform: rotate(0deg); }
+          100% { transform: rotate(360deg); }
+        }`}
+      </style>
+      {!isLoading && !hasError && file && (
+        <ExportDropdown
+          onExportPdf={handleExportPdf}
+          onDownload={handleDownload}
+          exportingPdf={exporting}
+          buttonProps={{ className: 'vendorsys-export-trigger-on-dark ppt-export-pdf-btn mr-[30px] bg-transparent border-none' }}
+        />
+      )}
+      {file && isLoading && !hasError && (
+        <div className="ppt-loading-overlay">
+          <div className="ppt-loading-spinner"></div>
+          <div className="ppt-loading-text">加载中...</div>
+          <div className="ppt-loading-progress">
+            <div
+              className="ppt-loading-progress-bar"
+              style={{ width: `${stage === 'rendering' ? 100 : parsePercent}%` }}
+            />
+          </div>
+          <div className="ppt-loading-percent">
+            {stage === 'rendering'
+              ? totalSlides > 0
+                ? `正在渲染幻灯片 第 ${Math.max(renderedSlides, 1)} / ${totalSlides} 页`
+                : '正在渲染幻灯片…'
+              : parsePercent >= 100
+                ? '正在处理幻灯片资源…'
+                : parsePercent > 0
+                  ? `正在解析演示文稿 ${parsePercent}%${parsedSlides > 0 ? ` · 已解析第 ${parsedSlides} 页` : ''}`
+                  : '正在读取文件…'}
+          </div>
+        </div>
+      )}
+      {file && hasError && (
+        <div className="ppt-loading-overlay">
+          <div className="ppt-loading-error-icon">✕</div>
+          <div className="ppt-loading-error-text">文档加载失败</div>
+          <button
+            className="ppt-loading-retry-btn"
+            onClick={() => {
+              setHasError(false);
+              setIsLoading(true);
+              setReloadTick((v) => v + 1);
+            }}
+          >
+            重新加载
+          </button>
+        </div>
+      )}
+      <div ref={scrollContainerRef} className="ppt-scroll-container">
+        <div ref={targetRef} className="ppt-render-target" style={{ width: '100%' }} />
+      </div>
+    </div>
+  );
+};