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

g3-file-actions 修改计划

需求分析

用户要求修改 g3-file-item 中的 g3-file-actions：

1. 默认不显示，hover 时显示：操作按钮默认隐藏，鼠标悬停在文件项上时才显示
2. 根据 getActionMenu 动态显示 more 按钮：如果 getActionMenu 返回空数组或为空，则不显示「更多」(more) 操作按钮

修改内容

1. CSS 修改（index.css）

修改 .g3-file-actions 的样式，使其默认隐藏，hover 时显示：

.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. 测试验证功能是否正常工作

预期效果

• 文件项默认只显示基本信息（文件名、大小、状态等）

• 鼠标悬停时显示操作按钮（预览、下载、更多）

• 如果没有自定义菜单，「更多」按钮不显示