Cloud-Index/PREVIEW_FEATURE.md

文件预览功能说明

功能概述

文件预览功能已更新，现在支持多种文件类型的在线预览，并对不支持预览的文件类型提供友好的提示信息。

支持的文件类型

1. 图片文件

支持的格式：jpg, jpeg, png, gif, bmp, webp, svg, ico

预览方式：在模态框中直接显示图片，支持缩放适配。

2. 视频文件

支持的格式：mp4, webm, ogg, mov, avi, mkv, m4v

预览方式：使用 HTML5 视频播放器，支持播放控制、音量调节、全屏等功能。

3. 音频文件 ⭐ 新增

支持的格式：mp3, wav, ogg, m4a, aac, flac, opus, weba

预览方式：显示音乐图标和 HTML5 音频播放器，支持播放控制、进度条、音量调节。

4. PDF 文件 ⭐ 新增

支持的格式：pdf

预览方式：使用 iframe 内嵌 PDF 查看器，支持页面导航和缩放（取决于浏览器）。

5. 文本文件 ⭐ 新增

支持的格式：

• 纯文本：txt, log, md
• 数据格式：json, xml, csv, yaml, yml, toml, ini, conf
• 代码文件：js, css, html, py, java, c, cpp, h, hpp, sh, bat

预览方式：以等宽字体显示文本内容，保留格式和换行，支持滚动查看。

不支持预览的文件

对于不在上述类型中的文件（如：zip、exe、docx、xlsx 等），系统会显示一个友好的提示界面，包含：

• 文件图标
• "该文件不支持预览" 提示信息
• 文件名显示
• 下载文件 按钮 - 直接下载文件到本地
• 新窗口打开 按钮 - 在新标签页中尝试打开文件

用户体验改进

1. 统一的预览界面：所有支持预览的文件都在同一个模态框中显示
2. 加载提示：预览加载时显示 "加载中..." 提示
3. 错误处理：加载失败时显示友好的错误信息
4. 快捷操作：
   • 点击预览窗口外部区域可关闭预览
   • 按 Esc 键关闭预览
   • 预览窗口内提供下载和关闭按钮
5. 响应式设计：在移动设备上自动调整预览窗口大小
6. 主题适配：文本预览支持深色/浅色主题切换

技术实现

JavaScript 更新

• getFileType(filename) 函数：扩展了文件类型识别，支持 5 大类文件
• openPreview(url, filename) 函数：
  • 根据文件类型动态创建相应的预览元素
  • 为不支持的文件显示操作提示界面
  • 处理加载成功和失败的各种情况

CSS 样式

新增样式类：

• .preview-audio-wrapper - 音频预览容器
• .preview-audio - 音频播放器
• .preview-text - 文本内容显示
• .preview-unsupported - 不支持预览的提示界面

使用示例

预览音频文件

点击任意 .mp3, .wav 等音频文件的 "预览" 按钮
→ 显示音乐图标和播放控制器
→ 自动开始播放

预览文本文件

点击 .txt, .json, .py 等文本文件的 "预览" 按钮
→ 加载并显示文件内容
→ 使用等宽字体，便于阅读代码

处理不支持的文件

点击 .zip, .exe 等文件的 "预览" 按钮
→ 显示提示界面
→ 提供下载或新窗口打开选项

浏览器兼容性

• 现代浏览器：完全支持（Chrome, Firefox, Safari, Edge）
• 音频格式：取决于浏览器对各种音频编码的支持
• PDF 预览：取决于浏览器内置 PDF 查看器
• 视频格式：建议使用 mp4 (H.264) 以获得最佳兼容性

未来改进方向

• 添加代码语法高亮
• 支持 Office 文档预览（需要第三方服务）
• 添加图片旋转、缩放控制
• 支持预览窗口内文件导航（上一个/下一个）
• 添加预览历史记录