3.3 KiB
Modal 预览功能实现计划
需求分析
用户需要实现双击文件项弹出 modal 预览的功能，具体要求：
- 双击
file-item触发 modal 预览 - modal 需设计为通用组件，便于后续复用
- modal header：title 居中显示文件名，右侧包含最小化/最大化/关闭按钮
- modal content：预览区域，与现有单击预览布局一致
- 支持左右切换预览文件
- 文件名作为 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 相关方法和事件绑定 |
步骤分解
-
添加 modal CSS 样式
-
遮罩层样式
-
modal 主体样式
-
header 样式（title 居中，按钮组）
-
body 样式（预览区域）
-
-
添加 modal HTML 结构
- 在 render 方法中添加 modal 模板
-
添加 modal 控制方法
-
openModal(fileId) -
closeModal() -
toggleModalSize() -
modalPrev() -
modalNext() -
updateModalPreview()
-
-
绑定双击事件
- 在文件列表事件委托中添加 dblclick 事件
-
初始化 modal DOM 引用
- 在 render 方法中保存 modal 相关 DOM 引用
风险考虑
- 状态冲突：双击和单击可能同时触发，需确保状态隔离
- 内存泄漏：modal 关闭时需清理 iframe 资源
- 样式冲突：modal 样式需独立命名空间，避免与现有样式冲突
- 响应式布局：modal 需要适配不同屏幕尺寸
预期效果
-
双击文件项弹出居中的 modal
-
modal 头部显示文件名，右侧有操作按钮
-
预览内容与右侧面板布局一致，支持左右切换
-
最大化时 modal 占满整个屏幕
-
点击遮罩层或 close 按钮关闭 modal