mirror of
https://github.com/RhenCloud/Cloud-Index.git
synced 2025-12-06 15:26:10 +08:00
124 lines
3.8 KiB
Markdown
124 lines
3.8 KiB
Markdown
# 文件预览功能说明
|
||
|
||
## 功能概述
|
||
|
||
文件预览功能已更新，现在支持多种文件类型的在线预览，并对不支持预览的文件类型提供友好的提示信息。
|
||
|
||
## 支持的文件类型
|
||
|
||
### 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 文档预览（需要第三方服务）
|
||
- [ ] 添加图片旋转、缩放控制
|
||
- [ ] 支持预览窗口内文件导航（上一个/下一个）
|
||
- [ ] 添加预览历史记录
|