# 文件预览功能说明

## 功能概述

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

## 支持的文件类型

### 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 文档预览（需要第三方服务）
- [ ] 添加图片旋转、缩放控制
- [ ] 支持预览窗口内文件导航（上一个/下一个）
- [ ] 添加预览历史记录