mobile_file_preview_evaluation.md

FilePreview 组件移动端适配评估报告

1. 总体评估

结论：无法直接复用代码，需要完全重写。 原因：原组件基于 React + Ant Design，且核心文件预览功能依赖于 DOM 操作库（@js-preview/*），这在微信小程序（无 DOM 环境）中完全不可用。

2. 核心功能适配方案

2.1 Office 文档 (Word/Excel/PPT/PDF)

• PC 实现：使用 @js-preview/docx, @js-preview/excel, @js-preview/pdf 等库，在 DOM 容器中渲染。
• 移动端难点：小程序无 DOM，且手机屏幕小，复杂的 JS 渲染库性能差且兼容性极难保证。
• 推荐方案：使用微信/Uniapp 原生能力。
  1. uni.downloadFile：先将文件下载到本地临时路径。
  2. uni.openDocument：调用系统自带的文档查看器打开。体验最好，性能最高，且无需引入庞大的 JS 库。

2.2 Markdown / HTML

• PC 实现：react-markdown, iframe。
• 移动端/小程序方案：项目已集成 mp-html 组件。
  • 直接复用 mp-html 渲染 Markdown (需开启 markdown 插件) 和 HTML 内容。
  • H5 端也可使用 mp-html 保持一致性。

2.3 多媒体 (图片/视频/音频)

• PC 实现：<img>, <video>, <audio> 标签。
• 移动端/小程序方案：
  • 图片：preview-image 组件或 uni.previewImage API（支持手势缩放、保存）。
  • 视频：<video> 原生组件。
  • 音频：<audio> 原生组件或 uni.createInnerAudioContext API。

2.4 代码/纯文本

• PC 实现：<pre><code>。
• 移动端/小程序方案：
  • 简单查看：<text> + <scroll-view>，配合 white-space: pre-wrap。
  • 富文本高亮：通过 mp-html 的 markdown 插件支持代码高亮。

3. UI 适配

• Ant Design -> uni-ui / 原生组件：
  • Button -> <button> 或 uni-tag
  • Spin -> uni-load-more 或 <loading>
  • Alert -> uni.showToast/Modal 或自定义提示区域
  • 图标 -> uni-icons 或 SVG/Font 资源

4. 依赖库处理

PC 库	移动端状态	替代方案
react-markdown	❌ 不可用	mp-html
@js-preview/* (docx/excel/pdf)	❌ 不可用 (依赖 DOM)	uni.openDocument
pptx-preview	❌ 不可用 (依赖 DOM)	uni.openDocument
antd	❌ 不可用	uni-ui / 原生

5. 建议实施步骤

1. 新建组件：在 uni_modules 或 components 下新建 file-preview 组件。
2. 类型判断：复用原组件的 getExtension 等工具函数（需移除 DOM 相关逻辑），判断文件类型。
3. 分流渲染：
   • Office/PDF：渲染为一个"点击预览"的卡片文件（类似微信聊天记录中的文件气泡），点击后触发 uni.downloadFile -> uni.openDocument。
   • Image：直接显示缩略图，点击调用 uni.previewImage。
   • Audio/Video：使用原生组件直接渲染。
   • Text/MD/HTML：使用 <mp-html> 渲染。
4. 下载/另存为：小程序中 uni.saveFile (保存到本地) 或 uni.opensDocument (右上角菜单转发/保存)。

6. 代码复用度

可复用的逻辑仅限于纯 TS 工具函数：

• 文件扩展名获取
• MIME 类型映射
• 大致的渲染状态管理逻辑 (Loading/Error/Success)

其余 UI 和渲染层需全部重写。