u

code/file-preview/.trae/documents/modal_preview_plan.md

@@ -0,0 +1,143 @@
+# 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
+