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. 测试验证功能是否正常工作
+
+## 预期效果
+
+- 文件项默认只显示基本信息（文件名、大小、状态等）
+- 鼠标悬停时显示操作按钮（预览、下载、更多）
+- 如果没有自定义菜单，「更多」按钮不显示