u
This commit is contained in:
1 parent
2fb19021ae
commit
742ca27f2e
4 files changed
+94
-27
No files matched your search
@@ -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. 测试验证功能是否正常工作
|
||||
|
||||
## 预期效果
|
||||
|
||||
* 文件项默认只显示基本信息(文件名、大小、状态等)
|
||||
|
||||
* 鼠标悬停时显示操作按钮(预览、下载、更多)
|
||||
|
||||
* 如果没有自定义菜单,「更多」按钮不显示
|
||||
|
||||
Reference in new issue
Block a user