@spacecorexdev/core 0.0.4 → 0.0.5

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

@@ -0,0 +1,245 @@
+import React, { useMemo, useState, useEffect, useRef, useCallback } from 'react';
+import { message } from 'antd';
+import { FileViewer } from '@file-viewer/react';
+import { buildWordViewerOptions, exportWordPdf } from './wordExportPdf';
+import { ExportDropdown } from '../ExportDropdown';
+import { downloadBlob } from '../previewUtils';
+
+export interface WordPreviewProps {
+  file: File | null;
+}
+
+export const WordPreview: React.FC<WordPreviewProps> = ({ file }) => {
+  const [isLoading, setIsLoading] = useState(true);
+  const [progress, setProgress] = useState(0);
+  const [hasError, setHasError] = useState(false);
+  const [exporting, setExporting] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const retryRef = useRef(false);
+
+  const options = useMemo(() => buildWordViewerOptions(), []);
+
+  // 离屏重新按 Word 原生分页渲染后逐页截图，直接下载 PDF（无打印对话框）。
+  // 预览虽同为分页视图，但仍独立渲染一份离屏 DOM，避免缩放/样式干扰截图。
+  const handleExportPdf = useCallback(async () => {
+    if (!file) {
+      message.warning('文档尚未加载完成，请稍后再试');
+      return;
+    }
+    setExporting(true);
+    message.loading({ key: 'word-export-pdf', content: '正在准备文档…', duration: 0 });
+    try {
+      await exportWordPdf({
+        file,
+        fileName: file.name,
+        onProgress: (page, total) => {
+          message.loading({ key: 'word-export-pdf', content: `正在导出第 ${page} / ${total} 页…`, duration: 0 });
+        },
+      });
+    } catch (error) {
+      console.error('Word 导出 PDF 失败:', error);
+      message.error(`导出 PDF 失败：${(error as Error)?.message || '请重试'}`);
+    } finally {
+      message.destroy('word-export-pdf');
+      setExporting(false);
+    }
+  }, [file]);
+
+  // 下载原始文件：只读预览拿到的 File 就是原始文件
+  const handleDownload = useCallback(() => {
+    if (!file) return;
+    downloadBlob(file, file.name);
+  }, [file]);
+
+  useEffect(() => {
+    if (!containerRef.current || !file) return;
+    
+    let progressTimer: ReturnType<typeof setInterval>;
+    let checkTimer: ReturnType<typeof setTimeout>;
+    let timeoutTimer: ReturnType<typeof setTimeout>;
+    
+    const cancelAll = () => {
+      clearInterval(progressTimer);
+      clearTimeout(checkTimer);
+      clearTimeout(timeoutTimer);
+    };
+    
+    const incrementProgress = () => {
+      setProgress(prev => {
+        if (prev >= 95) return prev;
+        return prev + Math.random() * 15 + 5;
+      });
+    };
+    
+    progressTimer = setInterval(incrementProgress, 300);
+    
+    const checkContent = () => {
+      const container = containerRef.current;
+      if (!container) return;
+      
+      const hasContent = container.innerHTML.trim().length > 0 && 
+                         container.querySelector('.docx-wrapper, .docx-page-frame, .docx-flow-frame');
+      
+      if (hasContent) {
+        setProgress(100);
+        setTimeout(() => {
+          setIsLoading(false);
+          setHasError(false);
+        }, 200);
+        cancelAll();
+        return;
+      }
+      
+      checkTimer = setTimeout(checkContent, 100);
+    };
+
+    checkTimer = setTimeout(checkContent, 100);
+    
+    timeoutTimer = setTimeout(() => {
+      clearInterval(progressTimer);
+      clearTimeout(checkTimer);
+      const container = containerRef.current;
+      if (container && !container.querySelector('.docx-wrapper, .docx-page-frame, .docx-flow-frame')) {
+        setHasError(true);
+      }
+    }, 30000);
+    
+    return () => {
+      cancelAll();
+    };
+  }, [file, retryRef.current]);
+
+  useEffect(() => {
+    if (file) {
+      setIsLoading(true);
+      setProgress(0);
+      setHasError(false);
+    }
+  }, [file]);
+
+  return (
+    <div className="ui-file-preview-word" data-global-context-menu-ignore="true" style={{ position: 'relative' }}>
+      <style>{`
+        .word-export-pdf-btn {
+          position: absolute;
+          top: 7px;
+          right: 16px;
+          z-index: 50;
+        }
+        .word-toolbar {
+          padding-right: 50px !important;
+        }
+        .word-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;
+        }
+        .word-loading-spinner {
+          width: 40px;
+          height: 40px;
+          border: 3px solid #f3f3f3;
+          border-top: 3px solid #5292f7;
+          border-radius: 50%;
+          animation: spin 1s linear infinite;
+        }
+        .word-loading-text {
+          margin-top: 16px;
+          color: #666;
+          font-size: 14px;
+        }
+        .word-loading-progress {
+          margin-top: 24px;
+          width: 200px;
+          height: 6px;
+          background: #e8e8e8;
+          border-radius: 3px;
+          overflow: hidden;
+        }
+        .word-loading-progress-bar {
+          height: 100%;
+          background: linear-gradient(90deg, #5292f7, #67b8ff);
+          border-radius: 3px;
+          transition: width 0.3s ease;
+        }
+        .word-loading-percent {
+          margin-top: 8px;
+          color: #999;
+          font-size: 12px;
+        }
+        .word-loading-error-icon {
+          font-size: 48px;
+          color: #f56c6c;
+        }
+        .word-loading-error-text {
+          margin-top: 16px;
+          color: #f56c6c;
+          font-size: 14px;
+        }
+        .word-loading-retry-btn {
+          margin-top: 20px;
+          padding: 8px 24px;
+          background: #5292f7;
+          color: #fff;
+          border: none;
+          border-radius: 4px;
+          cursor: pointer;
+          font-size: 14px;
+        }
+        .word-loading-retry-btn:hover {
+          background: #67b8ff;
+        }
+        @keyframes 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-light word-export-pdf-btn mr-[30px] bg-transparent border-none' }}
+        />
+      )}
+      {file && isLoading && !hasError && (
+        <div className="word-loading-overlay">
+          <div className="word-loading-spinner"></div>
+          <div className="word-loading-text">加载中...</div>
+          <div className="word-loading-progress">
+            <div className="word-loading-progress-bar" style={{ width: `${Math.min(progress, 100)}%` }}></div>
+          </div>
+          <div className="word-loading-percent">{Math.round(Math.min(progress, 100))}%</div>
+        </div>
+      )}
+      {file && hasError && (
+        <div className="word-loading-overlay">
+          <div className="word-loading-error-icon">✕</div>
+          <div className="word-loading-error-text">文档加载失败</div>
+          <button className="word-loading-retry-btn" onClick={() => {
+            setHasError(false);
+            setIsLoading(true);
+            setProgress(0);
+            retryRef.current = !retryRef.current;
+          }}>重新加载</button>
+        </div>
+      )}
+      {file ? (
+        <div ref={containerRef} style={{ width: '100%', height: '100dvh' }}>
+          <FileViewer
+            file={file}
+            name={file.name}
+            options={options}
+          />
+        </div>
+      ) : null}
+    </div>
+  );
+};

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

@@ -0,0 +1,86 @@
+import TurndownService from 'turndown';
+import { gfm } from 'turndown-plugin-gfm';
+import { mammoth } from '../../../utils/mammothApi';
+import { downloadBlob } from '../previewUtils';
+
+/**
+ * Word 导出 Markdown。
+ *
+ * 说明：markitdown 是 Python 库，浏览器端跑不了，这里用等价链路实现：
+ *   docx --mammoth--> 语义化 HTML --turndown(gfm)--> Markdown
+ * mammoth 负责 docx 的结构解析（标题、列表、表格、加粗等），turndown + gfm
+ * 负责 HTML → Markdown 的还原，表格用 gfm 插件保住 Markdown 表格语法。
+ * mammoth 已是项目依赖（原本用于 docx 文本提取）。
+ */
+
+export interface ExportWordMarkdownOptions {
+  /** docx/doc 文件（编辑器侧应传入含最新修改的 save() 产物） */
+  file: Blob;
+  /** 文件名（.docx/.doc 后缀会被替换为 .md） */
+  fileName: string;
+}
+
+/** 把 .docx/.doc 文件名换成 .md */
+const toMarkdownFileName = (fileName: string): string =>
+  `${fileName.replace(/\.(docx|doc)$/i, '') || 'document'}.md`;
+
+/**
+ * mammoth 输出的表格单元格一律是 <td>，而 turndown-plugin-gfm 的 table 规则只在
+ * 「首行全部是 <th>（有表头行）」时才转成 Markdown 管道表格，否则会把整张表原样保留成
+ * HTML。这里做两步预处理：
+ * 1. 把首行的 <td> 提升为 <th> 并包一层 <thead>，让管道表格规则生效（与 markitdown 一致：
+ *    拿首行当表头）；
+ * 2. 单元格内的 <p>/<br> 是块级/换行元素，会把管道表格撑破行，这里拍平成行内文本。
+ */
+const normalizeTablesForMarkdown = (html: string): HTMLElement => {
+  const doc = new DOMParser().parseFromString(html, 'text/html');
+
+  doc.querySelectorAll('table').forEach((table) => {
+    const firstRow = table.querySelector('tr');
+    if (!firstRow || !firstRow.querySelector('td')) return;
+    const thead = doc.createElement('thead');
+    firstRow.querySelectorAll('td').forEach((cell) => {
+      const th = doc.createElement('th');
+      th.innerHTML = cell.innerHTML;
+      cell.replaceWith(th);
+    });
+    table.insertBefore(thead, table.firstChild);
+    thead.appendChild(firstRow);
+  });
+
+  doc.querySelectorAll('table td, table th').forEach((cell) => {
+    cell.querySelectorAll('p').forEach((p) => {
+      const nodes = Array.from(p.childNodes);
+      if (p.nextElementSibling) nodes.push(doc.createTextNode(' '));
+      p.replaceWith(...nodes);
+    });
+    cell.querySelectorAll('br').forEach((br) => {
+      br.replaceWith(doc.createTextNode(' '));
+    });
+  });
+
+  return doc.body;
+};
+
+/** docx → Markdown 文本（不下载，便于复用/测试） */
+export const convertDocxToMarkdown = async (file: Blob): Promise<string> => {
+  const arrayBuffer = await file.arrayBuffer();
+  const { value: html } = await mammoth.convertToHtml({ arrayBuffer });
+
+  const turndown = new TurndownService({
+    headingStyle: 'atx',
+    bulletListMarker: '-',
+    codeBlockStyle: 'fenced',
+    hr: '---',
+  });
+  turndown.use(gfm);
+
+  return turndown.turndown(normalizeTablesForMarkdown(html));
+};
+
+/** docx → Markdown 并直接下载 .md 文件，返回转换结果 */
+export const exportWordMarkdown = async ({ file, fileName }: ExportWordMarkdownOptions): Promise<string> => {
+  const markdown = await convertDocxToMarkdown(file);
+  downloadBlob(new Blob([markdown], { type: 'text/markdown;charset=utf-8' }), toMarkdownFileName(fileName));
+  return markdown;
+};