diff --git a/code/file-preview/.trae/documents/permission_fix_plan.md b/code/file-preview/.trae/documents/permission_fix_plan.md new file mode 100644 index 00000000..8184b46e --- /dev/null +++ b/code/file-preview/.trae/documents/permission_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. 测试验证功能是否正常工作 + +## 预期效果 + +* 文件项默认只显示基本信息(文件名、大小、状态等) + +* 鼠标悬停时显示操作按钮(预览、下载、更多) + +* 如果没有自定义菜单,「更多」按钮不显示 + diff --git a/code/file-preview/g3-file/index.css b/code/file-preview/g3-file/index.css index d43f8cfb..07ac2ad1 100644 --- a/code/file-preview/g3-file/index.css +++ b/code/file-preview/g3-file/index.css @@ -3,8 +3,6 @@ display: flex; background: #ffffff; overflow: hidden; - border: 1px solid #eef0f2; - border-radius: 8px; --g3-z-dropdown: 100; --g3-z-toast: 300; @@ -21,7 +19,7 @@ width: 30%; display: flex; flex-direction: column; - border-right: 1px solid #eef0f2; + border-right: 1px solid #d1d5db; min-width: 300px; } @@ -31,7 +29,7 @@ height: 50px; padding: 0px 14px; background: #fafbfc; - border-bottom: 1px solid #eef0f2; + border-bottom: 1px solid #d1d5db; } .g3-main { @@ -64,7 +62,7 @@ justify-content: space-between; padding: 10px 14px; background: #fafbfc; - border-top: 1px solid #eee; + border-top: 1px solid #d1d5db; } .g3-header, @@ -95,17 +93,19 @@ } .g3-check-all input { - width: 16px; - height: 16px; + width: 14px; + height: 14px; } .g3-check-all span { margin-left: 4px; color: #333; + font-size: 12px; + line-height: 12px; } .g3-btn { - font-size: 13px; + font-size: 12px; border-radius: 4px; background: #165dff; color: #fff; @@ -113,16 +113,20 @@ transition: all 0.2s ease; border: none; width: auto; - height: 28px; line-height: 1; - padding: 0 15px; + padding: 8px 10px; display: flex; align-items: center; justify-content: center; + + word-break: break-all; } .g3-btn svg { margin-right: 4px; + flex-shrink: 0; + width: 12px; + height: 12px; } .g3-btn + .g3-btn { @@ -152,7 +156,7 @@ min-width: 0; position: relative; cursor: pointer; - border: 1px solid #eef0f2; + border: 1px solid #d1d5db; border-radius: 8px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); @@ -427,7 +431,7 @@ align-items: center; padding: 0 16px; background: #ffffff; - border-bottom: 1px solid #eef0f2; + border-bottom: 1px solid #d1d5db; flex-shrink: 0; } @@ -766,7 +770,7 @@ right: 20px; width: 340px; background: #ffffff; - border: 1px solid #eef0f2; + border: 1px solid #d1d5db; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: var(--g3-z-task); @@ -795,7 +799,7 @@ justify-content: space-between; padding: 12px 16px; background: #fafbfc; - border-bottom: 1px solid #eef0f2; + border-bottom: 1px solid #d1d5db; border-radius: 8px 8px 0 0; } diff --git a/code/file-preview/g3-file/index.js b/code/file-preview/g3-file/index.js index 4b6998b0..dfc9be37 100644 --- a/code/file-preview/g3-file/index.js +++ b/code/file-preview/g3-file/index.js @@ -547,9 +547,7 @@