# Modal 预览功能实现计划

## 需求分析

用户需要实现双击文件项弹出 modal 预览的功能，具体要求：

1. 双击 `file-item` 触发 modal 预览
2. modal 需设计为通用组件，便于后续复用
3. modal header：title 居中显示文件名，右侧包含最小化/最大化/关闭按钮
4. modal content：预览区域，与现有单击预览布局一致
5. 支持左右切换预览文件
6. 文件名作为 modal 的 title

## 实现方案

### 1. CSS 修改 (index.css)

添加通用 modal 样式，包括：

* `.g3-modal`: modal 遮罩层

* `.g3-modal-content`: modal 主体容器

* `.g3-modal-header`: 头部区域，包含 title 和操作按钮

* `.g3-modal-title`: 居中的标题

* `.g3-modal-actions`: 右侧操作按钮组（min/max/close）

* `.g3-modal-body`: 预览内容区域

* `.g3-modal-preview`: 预览内容布局（与现有预览一致）

* `.g3-modal-footer`: 底部区域，现在预览用不到，但是仍然需要保留，方便以后使用

### 2. JavaScript 修改 (index.js)

添加以下功能：

* `openModal(fileId)`: 打开 modal 并显示指定文件预览

* `closeModal()`: 关闭 modal

* `toggleModalSize()`: 切换 modal 大小（最大化/还原）

* `modalPrev()`: modal 内预览上一个文件

* `modalNext()`: modal 内预览下一个文件

* `updateModalPreview()`: 更新 modal 预览内容

* 双击事件绑定

* 同时需要考虑国际化，国际化配置在 language.js

* 图标配置在 icon.js

### 3. 关键设计

**双预览状态分离**：

* `currentPreviewFileId`: 右侧面板预览的文件 ID

* `currentModalFileId`: modal 预览的文件 ID（独立状态）

**通用 modal 设计**：

* modal 使用固定定位，居中显示

* 支持最大化/还原

* 点击遮罩层可关闭

**预览内容复用**：

* 提取公共预览内容生成逻辑

* modal 内预览布局与右侧面板保持一致

## 修改文件列表

| 文件                  | 修改类型 | 说明                 |
| ------------------- | ---- | ------------------ |
| `g3-file/index.css` | 添加   | 添加 modal 相关样式      |
| `g3-file/index.js`  | 修改   | 添加 modal 相关方法和事件绑定 |

## 步骤分解

1. **添加 modal CSS 样式**

   * 遮罩层样式

   * modal 主体样式

   * header 样式（title 居中，按钮组）

   * body 样式（预览区域）

2. **添加 modal HTML 结构**

   * 在 render 方法中添加 modal 模板

3. **添加 modal 控制方法**

   * `openModal(fileId)`

   * `closeModal()`

   * `toggleModalSize()`

   * `modalPrev()`

   * `modalNext()`

   * `updateModalPreview()`

4. **绑定双击事件**

   * 在文件列表事件委托中添加 dblclick 事件

5. **初始化 modal DOM 引用**

   * 在 render 方法中保存 modal 相关 DOM 引用

## 风险考虑

1. **状态冲突**：双击和单击可能同时触发，需确保状态隔离
2. **内存泄漏**：modal 关闭时需清理 iframe 资源
3. **样式冲突**：modal 样式需独立命名空间，避免与现有样式冲突
4. **响应式布局**：modal 需要适配不同屏幕尺寸

## 预期效果

* 双击文件项弹出居中的 modal

* modal 头部显示文件名，右侧有操作按钮

* 预览内容与右侧面板布局一致，支持左右切换

* 最大化时 modal 占满整个屏幕

* 点击遮罩层或 close 按钮关闭 modal