u

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

@@ -0,0 +1,55 @@
+# g3-file-actions 修改计划
+
+## 需求分析
+
+用户要求修改 `g3-file-item` 中的 `g3-file-actions`：
+
+1. **默认不显示，hover 时显示**：操作按钮默认隐藏，鼠标悬停在文件项上时才显示
+2. **根据 getActionMenu 动态显示 more 按钮**：如果 `getActionMenu` 返回空数组或为空，则不显示「更多」(more) 操作按钮
+
+## 修改内容
+
+### 1. CSS 修改（index.css）
+
+修改 `.g3-file-actions` 的样式，使其默认隐藏，hover 时显示：
+
+```css
+.g3-file-actions {
+  display: none; /* 默认隐藏 */
+  /* ... 其他样式 */
+}
+
+.g3-file-item:hover .g3-file-actions {
+  display: flex; /* hover 时显示 */
+}
+```
+
+### 2. JavaScript 修改（index.js）
+
+修改 `createFileItem` 方法，动态判断是否渲染 `g3-action-more` 按钮：
+
+- 在生成文件项 HTML 前，先调用 `getActionMenu(file)` 获取自定义菜单
+- 如果返回结果为空（空数组或 undefined），则不渲染 `g3-action-more` 按钮
+
+## 文件列表
+
+- `d:\workspace\code\file-preview\g3-file\index.css` - 修改样式
+- `d:\workspace\code\file-preview\g3-file\index.js` - 修改 createFileItem 方法
+
+## 风险评估
+
+1. **兼容性风险**：修改 hover 显示可能影响现有交互逻辑，需确保不影响其他功能
+2. **性能风险**：每次渲染文件项都会调用 getActionMenu，需确保该函数执行效率
+3. **样式风险**：hover 显示可能影响布局，需要适当调整定位
+
+## 实施步骤
+
+1. 修改 CSS 文件，添加 hover 显示逻辑
+2. 修改 createFileItem 方法，根据 getActionMenu 结果动态渲染 more 按钮
+3. 测试验证功能是否正常工作
+
+## 预期效果
+
+- 文件项默认只显示基本信息（文件名、大小、状态等）
+- 鼠标悬停时显示操作按钮（预览、下载、更多）
+- 如果没有自定义菜单，「更多」按钮不显示

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

@@ -0,0 +1,60 @@
+# g3-file-actions 修改计划
+
+## 需求分析
+
+用户要求修改 `g3-file-item` 中的 `g3-file-actions`：
+
+1. **默认不显示，hover 时显示**：操作按钮默认隐藏，鼠标悬停在文件项上时才显示
+2. **根据 getActionMenu 动态显示 more 按钮**：如果 `getActionMenu` 返回空数组或为空，则不显示「更多」(more) 操作按钮
+
+## 修改内容
+
+### 1. CSS 修改（index.css）
+
+修改 `.g3-file-actions` 的样式，使其默认隐藏，hover 时显示：
+
+```css
+.g3-file-actions {
+  display: none; /* 默认隐藏 */
+  /* ... 其他样式 */
+}
+
+.g3-file-item:hover .g3-file-actions {
+  display: flex; /* hover 时显示 */
+}
+```
+
+### 2. JavaScript 修改（index.js）
+
+修改 `createFileItem` 方法，动态判断是否渲染 `g3-action-more` 按钮：
+
+* 在生成文件项 HTML 前，先调用 `getActionMenu(file)` 获取自定义菜单
+
+* 如果返回结果为空（空数组或 undefined），则不渲染 `g3-action-more` 按钮
+
+## 文件列表
+
+* `d:\workspace\code\file-preview\g3-file\index.css` - 修改样式
+
+* `d:\workspace\code\file-preview\g3-file\index.js` - 修改 createFileItem 方法
+
+## 风险评估
+
+1. **兼容性风险**：修改 hover 显示可能影响现有交互逻辑，需确保不影响其他功能
+2. **性能风险**：每次渲染文件项都会调用 getActionMenu，需确保该函数执行效率
+3. **样式风险**：hover 显示可能影响布局，需要适当调整定位
+
+## 实施步骤
+
+1. 修改 CSS 文件，添加 hover 显示逻辑
+2. 修改 createFileItem 方法，根据 getActionMenu 结果动态渲染 more 按钮
+3. 测试验证功能是否正常工作
+
+## 预期效果
+
+* 文件项默认只显示基本信息（文件名、大小、状态等）
+
+* 鼠标悬停时显示操作按钮（预览、下载、更多）
+
+* 如果没有自定义菜单，「更多」按钮不显示
+

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
+