@spacecorexdev/core 0.0.2 → 0.0.5

package/src/ui/UIFilePreview/RichDocEditor/richdoc-editor.css

@@ -0,0 +1,59 @@
+/* BlockNote 编辑器容器样式 */
+.richdoc-editor-host {
+  height: 100%;
+  overflow-y: auto;
+  background: #fff;
+}
+
+.richdoc-editor-host .bn-container {
+  height: 100%;
+}
+
+/* 暗色主题：容器与编辑器统一使用应用表面色。
+   BlockNote 暗色编辑器自带 #1f1f1f 底色，与表面色存在色差，
+   会让 700px 宽的正文两侧出现一条异色边，这里把编辑器底色改为透明。
+   排除导出用离屏容器（同样带 .richdoc-editor-host），保证导出始终为浅色排版。 */
+.dark .richdoc-editor-host:not(.rdoc-export-preview),
+[data-theme="dark"] .richdoc-editor-host:not(.rdoc-export-preview) {
+  background: rgb(var(--color-surface));
+}
+
+.dark .richdoc-editor-host:not(.rdoc-export-preview) .bn-editor,
+[data-theme="dark"] .richdoc-editor-host:not(.rdoc-export-preview) .bn-editor {
+  background-color: transparent;
+}
+
+.richdoc-editor-host .bn-editor {
+  height: 100%;
+  margin: auto;
+  max-width: 700px;
+  padding-top: 24px;
+  padding-left: 0;
+  padding-right: 0;
+  /* 光标颜色跟随主题前景色：暗色下默认光标对比度不足，几乎看不见 */
+  caret-color: rgb(var(--color-foreground));
+}
+
+.richdoc-editor-host .bn-editor code {
+  border-radius: 2px;
+  padding-left: 2px;
+  padding-right: 2px;
+  padding-top: 1px;
+  padding-bottom: 1px;
+  background: rgb(var(--color-markdown-comment) / 0.3);
+}
+
+.richdoc-editor-host .bn-editor pre code {
+  background: none;
+}
+
+@media (max-width: 768px) {
+  .richdoc-editor-host .bn-editor {
+    padding-inline: 16px;
+  }
+}
+
+/* 只读模式下去掉 hover 时的侧边操作按钮占位间隙 */
+.richdoc-editor-host.richdoc-readonly .bn-side-menu {
+  display: none;
+}

package/src/ui/UIFilePreview/UIFilePreview.tsx

@@ -0,0 +1,611 @@
+
+import React, { Suspense, lazy, useEffect, useMemo, useRef, useState } from 'react';
+import * as febs from 'febs-browser';
+import { Modal, Spin, Tag } from 'antd';
+import { getFileUrl, getFilePreviewType, fetchFileBuffer, getFileExtension, FileDetailFetcher } from './previewUtils';
+import uiToast from '../UIToast';
+import { AbortControllerClass } from 'febs-browser/types/fetch';
+import { destroyImagePreview, loadImagePreview } from './filetypes/imageLoader';
+import { ImagePreview } from './filetypes/image';
+import { VideoPreview } from './filetypes/video';
+import { getLocalFile } from './IndexedDBUtils';
+import type { LocalFileRecord } from './IndexedDBUtils';
+
+import './filePreview.css'
+import { isEditableFileType } from '../FileManager/utils/fileUtils';
+import { WarningOutlined } from '@ant-design/icons';
+
+const PdfPreview = lazy(() =>
+  import('./filetypes/pdf').then((module) => ({ default: module.PdfPreview }))
+);
+const WordPreview = lazy(() =>
+  import('./filetypes/word').then((module) => ({ default: module.WordPreview }))
+);
+const ExcelPreview = lazy(() =>
+  import('./filetypes/excel').then((module) => ({ default: module.ExcelPreview }))
+);
+const MarkdownEditor = lazy(() => import('./MarkdownEditor').then((module) => ({ default: module.MarkdownEditor })));
+const RichDocEditor = lazy(() => import('./RichDocEditor').then((module) => ({ default: module.RichDocEditor })));
+const ExcelEditor = lazy(() => import('./ExcelEditor').then((module) => ({ default: module.ExcelEditor })));
+const PptPreview = lazy(() =>
+  import('./filetypes/ppt').then((module) => ({ default: module.PptPreview }))
+);
+const WordEditor = lazy(() => import('./WordEditor').then((module) => ({ default: module.WordEditor })));
+const ArchivePreview = lazy(() => import('./filetypes/archive').then((module) => ({ default: module.ArchivePreview })));
+const CadPreview = lazy(() => import('./filetypes/cad').then((module) => ({ default: module.CadPreview })));
+
+type PreviewType = 'image' | 'pdf' | 'word' | 'ppt' | 'excel' | 'markdown' | 'richdoc' | 'video' | 'archive' | 'cad' | 'unknown';
+
+const getPreviewFileName = (fileName: string | undefined, fileUrl: string | null, fallback: string) => {
+  if (fileName) {
+    return fileName;
+  }
+
+  let cleanUrl = fileUrl || '';
+  const queryIndex = cleanUrl.indexOf('?');
+  if (queryIndex !== -1) {
+    cleanUrl = cleanUrl.substring(0, queryIndex);
+  }
+
+  const nameFromUrl = cleanUrl.split('/').filter(Boolean).pop();
+  if (!nameFromUrl) {
+    return fallback;
+  }
+
+  try {
+    return decodeURIComponent(nameFromUrl);
+  } catch {
+    return nameFromUrl;
+  }
+};
+
+const appendTempToken = (url: string, accessToken?: string) => {
+  if (!accessToken) {
+    return url;
+  }
+  const separator = url.includes('?') ? '&' : '?';
+  return `${url}${separator}tempToken=${encodeURIComponent(accessToken)}`;
+};
+
+const EditorLoading = ({ label }: { label: string }) => (
+  <div className='flex min-h-[260px] flex-col items-center justify-center' style={{ width: '100%' }}>
+    <Spin />
+    <span style={{ marginTop: 16, color: 'rgb(var(--color-muted))' }}>正在加载{label}...</span>
+  </div>
+);
+
+export const UIFilePreview: React.FC<{
+  fileUrl: string | null;
+  accessToken?: string;
+  visible: boolean;
+  onClose: () => void;
+  hiddenClose?: boolean; // 是否隐藏关闭按钮
+  isCreate?: boolean; // 是否为新建模式 
+  editable?: boolean; // 是否为编辑模式
+  fileName?: string; // 文件名（新建模式下必须提供）
+  uploadPercent: number | undefined;  // 上传进度.
+  uploadSuccess?: boolean | undefined; // 上传成功.
+  onUploadBlob?: (initialBlob: Blob | undefined, blob: Blob, fileName: string) => Promise<void>; // 编辑模式下上传回调（用于 Excel/PPTX）
+  onUploadMarkdown?: (oldContent: string, content: string, fileName: string) => Promise<void>; // 编辑模式下上传回调（用于 Markdown）
+  fileId?: string; // 文件ID，用于缓存管理（服务器文件）
+  crc32?: number; // 文件CRC32校验值，用于缓存验证
+  /** 文件详情查询函数：不传时使用项目文件接口；CRM 等场景可注入自有接口 */
+  fetchFileDetail?: FileDetailFetcher;
+  onCacheSaved?: (fileId: string) => void; // 文件缓存保存成功回调
+  // ---- 新增：本地文件 / 离线模式支持 ----
+  /** 本地文件唯一 ID（本地文件或未同步服务器文件），设置后将从 localFiles store 加载内容，不从服务器 fetch */
+  localId?: string;
+  /** 是否为仅本地存在（从未上传）*/
+  isLocalOnly?: boolean;
+  /** 是否有未同步的本地修改 */
+  hasUnsyncedChanges?: boolean;
+  /** 离线模式：true 时隐藏上传按钮，仅允许本地保存，并显示离线提示 */
+  isOffline?: boolean;
+  /** 编辑本地/离线文件时，保存（非上传）到本地的回调，更新 localFiles store 内容 */
+  onSaveLocalBlob?: (blob: Blob, fileName: string, markUnsynced?: boolean) => Promise<void>;
+  /** 编辑本地/离线 Markdown 文件时，保存（非上传）到本地的回调 */
+  onSaveLocalMarkdown?: (content: string, fileName: string, markUnsynced?: boolean) => Promise<void>;
+}> = ({ fileUrl, accessToken, visible, isCreate, onClose, hiddenClose = false, editable = false, fileName, uploadPercent, uploadSuccess, onUploadBlob, onUploadMarkdown, fileId, crc32, fetchFileDetail, onCacheSaved, localId, isLocalOnly, hasUnsyncedChanges, isOffline, onSaveLocalBlob, onSaveLocalMarkdown }) => {
+  const [previewType, setPreviewType] = useState<PreviewType>('unknown');
+  const [previewUrl, setPreviewUrl] = useState('');
+  const [previewLoading, setPreviewLoading] = useState(false);
+  const [previewLoadingPercent, setPreviewLoadingPercent] = useState(0);
+  const [previewError, setPreviewError] = useState<string | null>(null);
+  const [markdownContent, setMarkdownContent] = useState<string>('');
+  const [richdocContent, setRichdocContent] = useState<string>('');
+  const [excelBlob, setExcelBlob] = useState<Blob | null>(null);
+  const [excelFile, setExcelFile] = useState<File | null>(null);
+  const [pptxFile, setPptxFile] = useState<File | null>(null);
+  const [wordBlob, setWordBlob] = useState<Blob | null>(null);
+  const [wordFile, setWordFile] = useState<File | null>(null);
+  const [archiveFile, setArchiveFile] = useState<File | null>(null);
+  const [cadFile, setCadFile] = useState<File | null>(null);
+  const [pdfFile, setPdfFile] = useState<File | null>(null);
+  const [loadedLocalFile, setLoadedLocalFile] = useState<LocalFileRecord | null>(null);
+
+  const containerImageRef = useRef<HTMLImageElement | null>(null);
+
+  const supportedPreviewTypes: PreviewType[] = ['image', 'pdf', 'word', 'ppt', 'excel', 'markdown', 'richdoc', 'video', 'archive', 'cad'];
+  const abortControllerRef = useRef<AbortControllerClass>(new febs.net.AbortController());
+  const isAbortedRef = useRef(false);
+
+  // 用 ref 跟踪这些"状态标记"属性，避免它们的变化（如保存/上传后更新标记）
+  // 触发 loadFileContent useEffect 重新执行，导致文件重新加载、编辑器 remount、画面闪动。
+  // 这些值只在打开文件时需要读取最新值，不需要在值变化时重新加载文件内容。
+  const localIdRef = useRef(localId);
+  const isLocalOnlyRef = useRef(isLocalOnly);
+  const hasUnsyncedChangesRef = useRef(hasUnsyncedChanges);
+  localIdRef.current = localId;
+  isLocalOnlyRef.current = isLocalOnly;
+  hasUnsyncedChangesRef.current = hasUnsyncedChanges;
+  // 详情查询函数通过 ref 传递，避免外部内联函数变化触发文件重新加载
+  const fetchFileDetailRef = useRef(fetchFileDetail);
+  fetchFileDetailRef.current = fetchFileDetail;
+
+  // 阻止后退.
+  useEffect(() => {
+    const preventBack = function () {
+      window.history.go(1); // 阻止后退，回到当前页面
+    }
+    window.history.pushState(null, null as any, document.URL);
+    window.addEventListener('popstate', preventBack);
+
+    return () => { window.removeEventListener('popstate', preventBack) };
+  }, []);
+
+
+  useEffect(() => {
+    if (!visible) return;
+
+    // 清除所有编辑器相关的 blob/内容状态，防止切换文件时残留旧数据
+    setWordBlob(null);
+    setExcelBlob(null);
+    setPptxFile(null);
+    setMarkdownContent('');
+    setRichdocContent('');
+    setLoadedLocalFile(null);
+
+    const loadFileContent = async () => {
+      // 读取 ref 中的最新值（避免将这些状态标记作为 useEffect 依赖）
+      const currentLocalId = localIdRef.current;
+      // =============== 情况 1：有 localId（本地新建文件 或 服务器文件的未同步修改）===============
+      const filename = fileName ? fileName : fileUrl?.substring(fileUrl?.lastIndexOf('/')+1 || 0);
+      if (currentLocalId && editable && filename) {
+        const type = getFilePreviewType(filename);
+        if (!['ppt', 'excel', 'markdown', 'word', 'richdoc'].includes(type)) {
+          uiToast.warning('当前文件类型不支持本地编辑');
+          return;
+        }
+        setPreviewType(type);
+        setPreviewError(null);
+        setPreviewLoading(true);
+
+        try {
+          const local = await getLocalFile(currentLocalId);
+          if (!local) {
+            setPreviewLoading(false);
+            return;
+          }
+          setLoadedLocalFile(local);
+
+          // 如果本地记录有内容（用户之前保存过），直接加载本地内容
+          if (local.content && ((typeof local.content === 'string' && local.content.length > 0) ||
+              (typeof local.content !== 'string' && local.content.byteLength > 0))) {
+            if (type === 'markdown') {
+              setMarkdownContent(typeof local.content === 'string' ? local.content : '');
+            } else if (type === 'richdoc') {
+              setRichdocContent(typeof local.content === 'string' ? local.content : '');
+            } else if (type === 'word') {
+              const buf = typeof local.content !== 'string' ? local.content : new ArrayBuffer(0);
+              const blob = new Blob([buf], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
+              setWordBlob(blob);
+              setWordFile(new File([blob], filename, { type: blob.type }));
+            } else if (type === 'excel') {
+              const buf = typeof local.content !== 'string' ? local.content : new ArrayBuffer(0);
+              const blob = new Blob([buf], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+              setExcelBlob(blob);
+              setExcelFile(new File([blob], filename, { type: blob.type }));
+            } else if (type === 'ppt') {
+              const buf = typeof local.content !== 'string' ? local.content : new ArrayBuffer(0);
+              const pptxBlob = new Blob([buf], { type: 'application/vnd.openxmlformats-officedocument.presentationml.presentation' });
+              setPptxFile(new File([pptxBlob], filename, { type: pptxBlob.type }));
+            }
+            setPreviewLoading(false);
+            return; // 已加载本地内容，结束
+          }
+
+          // 本地记录存在但内容为空（首次编辑已上传文件），继续尝试从服务器加载
+          // 如果 fileUrl 存在，会在下面的逻辑中处理
+          setPreviewLoading(false);
+        } catch (err) {
+          console.error('加载本地文件失败:', err);
+          setPreviewLoading(false);
+        }
+      }
+
+      // =============== 情况 2：纯新建模式（无 localId 且无 fileUrl）===============
+      if (!fileUrl && !currentLocalId && filename && editable) {
+        const type = getFilePreviewType(filename);
+        if (['ppt', 'excel', 'markdown', 'word', 'richdoc'].includes(type)) {
+          setPreviewType(type);
+          setPreviewError(null);
+          setPreviewLoading(false);
+        } else {
+          uiToast.warning('当前文件类型不支持新建');
+        }
+        return;
+      }
+
+      // =============== 情况 3：从服务器加载文件内容 ===============
+      // fileId 可选（如历史版本预览无 fileId），仅 fileUrl 必需；fileId 为空时跳过缓存
+      if (!fileUrl) return;
+
+      // 防御性守卫：当有 crc32（来自文件列表）但 fileId 尚未就绪时，跳过本次调用。
+      // 场景：handlePreview 中 React 18 的 useState 批处理 + react-router 的 setSearchParams
+      // 可能导致多次渲染。首次渲染时 fileUrl/crc32 已设置但 fileId（依赖 state.files 的更新）
+      // 可能尚未就绪，此时 fetchFileBuffer 会跳过 getDetail 直接 fetch，造成浪费的网络请求。
+      // 当下一次渲染 fileId 就绪后，useEffect 会重新执行，届时流程正确。
+      if (crc32 != null && !fileId) {
+        console.log('[UIFilePreview] crc32 已就绪但 fileId 尚未就绪，等待下次渲染...');
+        return;
+      }
+
+      // 如果有 localId，本地内容为空时，也允许从服务器加载
+      const previewFileName = filename || fileUrl;
+      const type = getFilePreviewType(previewFileName);
+
+      if (type === 'unknown') {
+        setPreviewType(type);
+        uiToast.warning('当前文件类型不支持预览');
+        return;
+      }
+
+      setPreviewType(type);
+      setPreviewUrl('');
+      setPreviewError(null);
+      setExcelBlob(null);
+      setExcelFile(null);
+      setPptxFile(null);
+      setWordBlob(null);
+      setWordFile(null);
+      setArchiveFile(null);
+      setCadFile(null);
+      setPdfFile(null);
+      setMarkdownContent('');
+      setRichdocContent('');
+
+      destroyImagePreview(containerImageRef);
+
+      setPreviewLoadingPercent(0);
+      setPreviewLoading(true);
+
+      try {
+        const url = getFileUrl(fileUrl);
+        if (!url) {
+          uiToast.error('文件资源路径不可用，无法预览');
+          setPreviewLoading(false);
+          return;
+        }
+
+        // 仅 video 类型在 fetch 前就设置 previewUrl，因为 <video> 组件需要 src 来拉流；
+        // 其他类型（image/pdf/word/excel/ppt/archive/cad/markdown）的内容均来自 fetchFileBuffer 的结果，
+        // 不应在 fetch 之前就把 fileUrl 暴露给渲染层，否则某些组件挂载时会自发请求（导致"先请求文件资源再请求 detail"的竞态）。
+        if (type === 'video') {
+          setPreviewUrl(appendTempToken(url, accessToken));
+          setPreviewLoading(false);
+          return;
+        }
+
+        const buffer = await fetchFileBuffer(fileUrl, accessToken, abortControllerRef.current, setPreviewLoadingPercent, fileId, crc32, fetchFileDetailRef.current);
+
+        if (fileId && onCacheSaved) {
+          onCacheSaved(fileId);
+        }
+
+        if (type === 'image') {
+          await loadImagePreview(buffer, containerImageRef);
+        } else if (type === 'pdf') {
+          const blob = new Blob([buffer.buffer], {
+            type: buffer.headers.get('Content-Type') || 'application/pdf',
+          });
+          setPdfFile(new File([blob], getPreviewFileName(filename, fileUrl, '预览.pdf'), { type: blob.type }));
+        } else if (type === 'word') {
+          const wordBlob = new Blob([buffer.buffer], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
+          setWordBlob(wordBlob);
+          setWordFile(new File([wordBlob], getPreviewFileName(filename, fileUrl, '预览.docx'), { type: wordBlob.type }));
+        } else if (type === 'excel') {
+          const excelBlob = new Blob([buffer.buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+          setExcelBlob(excelBlob);
+          setExcelFile(new File([excelBlob], getPreviewFileName(filename, fileUrl, '预览.xlsx'), { type: excelBlob.type }));
+        } else if (type === 'ppt') {
+          const pptxBlob = new Blob([buffer.buffer], { type: 'application/vnd.openxmlformats-officedocument.presentationml.presentation' });
+          setPptxFile(new File([pptxBlob], getPreviewFileName(filename, fileUrl, '预览.pptx'), { type: pptxBlob.type }));
+        } else if (type === 'markdown') {
+          const textDecoder = new TextDecoder('utf-8');
+          const content = textDecoder.decode(buffer.buffer);
+          setMarkdownContent(content);
+        } else if (type === 'richdoc') {
+          const textDecoder = new TextDecoder('utf-8');
+          const content = textDecoder.decode(buffer.buffer);
+          setRichdocContent(content);
+        } else if (type === 'archive') {
+          const blob = new Blob([buffer.buffer], {
+            type: buffer.headers.get('Content-Type') || 'application/octet-stream',
+          });
+          setArchiveFile(new File([blob], getPreviewFileName(filename, fileUrl, '预览.zip'), { type: blob.type }));
+        } else if (type === 'cad') {
+          const blob = new Blob([buffer.buffer], {
+            type: 'application/octet-stream',
+          });
+          setCadFile(new File([blob], getPreviewFileName(filename, fileUrl, '预览.dwg'), { type: 'application/octet-stream' }));
+        }
+      } catch (error) {
+        if (isAbortedRef.current) {
+          return;
+        }
+        console.error(error);
+        const rawMsg = (error as any)?.message || '';
+        const errorName = (error as any)?.name || '';
+        // 展示原始错误信息（如 "Network request failed"）及请求 URL，方便排查。
+        // 注意：CORS 被拦截时 JS 无法读取 HTTP 状态码（如 404），该信息仅在浏览器控制台可见。
+        const detailLines: string[] = [];
+        detailLines.push('文件预览失败');
+        if (errorName) detailLines.push(`错误类型：${errorName}`);
+        if (rawMsg) detailLines.push(`错误信息：${rawMsg}`);
+        setPreviewError(detailLines.join('\n'));
+      } finally {
+        setPreviewLoading(false);
+      }
+    };
+
+    loadFileContent().catch(() => {});
+
+    return () => {
+      isAbortedRef.current = true;
+      abortControllerRef.current.abort();
+      abortControllerRef.current = new febs.net.AbortController();
+    };
+
+  }, [fileUrl, visible, accessToken, editable, fileName, fileId, crc32]);
+
+  const handleClose = () => {
+    // console.log('[UIFilePreview] handleClose: aborting request');
+    isAbortedRef.current = true;
+    abortControllerRef.current.abort();
+    abortControllerRef.current = new febs.net.AbortController();
+    // console.log('[UIFilePreview] handleClose: abortController reset');
+    setPreviewLoading(false);
+    setPreviewUrl('');
+    setExcelBlob(null);
+    setExcelFile(null);
+    setPptxFile(null);
+    setWordBlob(null);
+    setWordFile(null);
+    setArchiveFile(null);
+    setCadFile(null);
+    setPdfFile(null);
+    setPreviewError(null);
+    setMarkdownContent('');
+    setRichdocContent('');
+
+    onClose();
+  };
+
+  return (
+    <Modal
+      // title={previewFileName ? `预览：${previewFileName}` : '文件预览'}
+      open={visible}
+      closeIcon={hiddenClose ? null : (
+        previewType === 'markdown'
+          || previewType === 'richdoc'
+          || (previewType === 'word' && editable)
+          || (previewType === 'excel' && editable)
+          ? null
+          : undefined)
+      }
+      onCancel={handleClose}
+      footer={null}
+      className={"ant-modal-nopadding ant-modal-fullscreen" + (previewType == 'ppt' ? ' ant-modal-ppt' : '')}
+      styles={{ body: { padding: 0, justifyContent: 'center', display: 'flex' } }}
+      destroyOnHidden
+      keyboard={false}
+      transitionName={hiddenClose ? 'none' : undefined}
+    >
+      <div style={{ width: '100%', display: 'flex', justifyContent: 'center', alignItems: (previewType === 'excel' && !editable) ? 'flex-start' : 'center', background: (previewType === 'excel' && !editable) ? '#ffffff' : 'rgb(var(--color-background))', minHeight: '100dvh', position: 'relative' }}>
+
+        {previewType === 'word' && editable && (
+          <Suspense fallback={<EditorLoading label="Word 编辑器" />}>
+            <WordEditor
+              hiddenClose={hiddenClose}
+              isCreate={isCreate}
+              visible={previewType === 'word' && visible}
+              fileName={getPreviewFileName(fileName, fileUrl, '预览.docx')}
+              initialBlob={wordBlob || undefined}
+              onClose={handleClose}
+              readOnly={!editable}
+              onUpload={editable ? onUploadBlob : undefined}
+              uploadPercent={uploadPercent}
+              isOffline={isOffline}
+              isLocalOnly={isLocalOnly}
+              hasUnsyncedChanges={hasUnsyncedChanges}
+              onSaveLocalBlob={onSaveLocalBlob}
+            />
+          </Suspense>
+        )}
+        {previewType === 'word' && !editable && (
+          <Suspense
+            fallback={
+              <div style={{ width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: 240 }}>
+                加载Word预览组件...
+              </div>
+            }
+          >
+            <WordPreview file={wordFile} />
+          </Suspense>
+        )}
+        {/* <PptPreview containerRef={containerPptRef} type={previewType} /> */}
+        {previewType === 'excel' && editable && (
+          <Suspense fallback={<EditorLoading label="Excel 编辑器" />}>
+            <ExcelEditor
+              hiddenClose={hiddenClose}
+              visible={previewType === 'excel' && visible}
+              fileName={getPreviewFileName(fileName, fileUrl, '预览.xlsx')}
+              initialBlob={excelBlob || undefined}
+              isCreate={isCreate}
+              onClose={handleClose}
+              readOnly={!editable}
+              onUpload={editable ? onUploadBlob : undefined}
+              uploadPercent={uploadPercent}
+              uploadSuccess={uploadSuccess}
+              isOffline={isOffline}
+              isLocalOnly={isLocalOnly}
+              hasUnsyncedChanges={hasUnsyncedChanges}
+              onSaveLocalBlob={onSaveLocalBlob}
+            />
+          </Suspense>
+        )}
+        {previewType === 'excel' && !editable && (
+          <Suspense
+            fallback={
+              <div style={{ width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: 240 }}>
+                加载Excel预览组件...
+              </div>
+            }
+          >
+            <ExcelPreview file={excelFile} />
+          </Suspense>
+        )}
+        {previewType === 'pdf' && (
+          <Suspense
+            fallback={
+              <div style={{ width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: 240 }}>
+                加载PDF预览组件...
+              </div>
+            }
+          >
+            <PdfPreview
+              file={pdfFile}
+              progressKey={fileId || (fileName ? `name:${fileName}` : undefined)}
+            />
+          </Suspense>
+        )}
+        <ImagePreview containerRef={containerImageRef} type={previewType} />
+        <VideoPreview previewUrl={previewUrl} type={previewType} />
+        {previewType === 'archive' && (
+          <Suspense fallback={<EditorLoading label="压缩包预览器" />}>
+            <ArchivePreview file={archiveFile} />
+          </Suspense>
+        )}
+        {previewType === 'cad' && (
+          <Suspense fallback={<EditorLoading label="CAD 图纸预览器" />}>
+            <CadPreview file={cadFile} />
+          </Suspense>
+        )}
+        {previewType === 'markdown' && (
+          <Suspense fallback={<EditorLoading label="Markdown 编辑器" />}>
+            <MarkdownEditor
+              hiddenClose={hiddenClose}
+              value={markdownContent}
+              onClose={handleClose}
+              readOnly={!editable}
+              isCreate={isCreate}
+              visible={previewType === 'markdown' && visible}
+              defaultPreviewMode={!editable}
+              onUpload={editable ? onUploadMarkdown : undefined}
+              fileName={getPreviewFileName(fileName, fileUrl, '预览.md')}
+              uploadPercent={uploadPercent}
+              uploadSuccess={uploadSuccess}
+              isOffline={isOffline}
+              isLocalOnly={isLocalOnly}
+              hasUnsyncedChanges={hasUnsyncedChanges}
+              onSaveLocalMarkdown={onSaveLocalMarkdown}
+            />
+          </Suspense>
+        )}
+        {previewType === 'richdoc' && (
+          <Suspense fallback={<EditorLoading label="文档编辑器" />}>
+            <RichDocEditor
+              hiddenClose={hiddenClose}
+              value={richdocContent}
+              onClose={handleClose}
+              readOnly={!editable}
+              isCreate={isCreate}
+              visible={previewType === 'richdoc' && visible}
+              onUpload={editable ? onUploadMarkdown : undefined}
+              fileName={getPreviewFileName(fileName, fileUrl, '预览.rdoc')}
+              uploadPercent={uploadPercent}
+              uploadSuccess={uploadSuccess}
+              isOffline={isOffline}
+              isLocalOnly={isLocalOnly}
+              hasUnsyncedChanges={hasUnsyncedChanges}
+              onSaveLocalMarkdown={onSaveLocalMarkdown}
+            />
+          </Suspense>
+        )}
+        {previewType === 'ppt' && (
+          <Suspense
+            fallback={
+              <div style={{ width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: 240 }}>
+                加载PPT预览组件...
+              </div>
+            }
+          >
+            <PptPreview file={pptxFile} />
+          </Suspense>
+        )}
+
+        {previewLoading ? (
+          <div style={{
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            background: 'rgb(var(--color-surface))',
+            zIndex: 10
+          }}>
+            <Spin />
+            <span style={{ marginTop: 16, color: 'rgb(var(--color-muted))' }}>正在加载预览内容 {previewLoadingPercent}% ...</span>
+          </div>
+        ) : previewError ? (
+          <div style={{
+            color: '#ff4d4f',
+            width: '100%',
+            maxWidth: 640,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 12,
+            justifyContent: 'center',
+            alignItems: 'center',
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            background: 'rgb(var(--color-surface))',
+            zIndex: 100,
+            padding: 24,
+            textAlign: 'center',
+            whiteSpace: 'pre-line',
+            wordBreak: 'break-all',
+          }}>
+            <WarningOutlined style={{ fontSize: 40, color: '#ff4d4f' }} />
+            <span style={{ fontSize: 16, lineHeight: 1.8 }}>{previewError}</span>
+          </div>
+        ) : previewType === 'image' || previewType === 'video' ? (
+          <></>
+        ) : (
+          supportedPreviewTypes.includes(previewType) ? null : (
+            <div style={{ padding: 24, color: '#555' }}>
+              <WarningOutlined style={{ color: '#faad14' }} /> 当前文件类型不支持预览。
+            </div>)
+        )}
+      </div>
+    </Modal>
+  )
+};