This commit is contained in:
oneao committed 2026-05-06 17:33:00 +08:00
1 parent 2fb19021ae
commit 742ca27f2e
4 files changed
+92 -25

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. 测试验证功能是否正常工作
## 预期效果
* 文件项默认只显示基本信息(文件名、大小、状态等)
* 鼠标悬停时显示操作按钮(预览、下载、更多)
* 如果没有自定义菜单,「更多」按钮不显示
+18 -14
View File
@@ -3,8 +3,6 @@
display: flex; display: flex;
background: #ffffff; background: #ffffff;
overflow: hidden; overflow: hidden;
border: 1px solid #eef0f2;
border-radius: 8px;
--g3-z-dropdown: 100; --g3-z-dropdown: 100;
--g3-z-toast: 300; --g3-z-toast: 300;
@@ -21,7 +19,7 @@
width: 30%; width: 30%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-right: 1px solid #eef0f2; border-right: 1px solid #d1d5db;
min-width: 300px; min-width: 300px;
} }
@@ -31,7 +29,7 @@
height: 50px; height: 50px;
padding: 0px 14px; padding: 0px 14px;
background: #fafbfc; background: #fafbfc;
border-bottom: 1px solid #eef0f2; border-bottom: 1px solid #d1d5db;
} }
.g3-main { .g3-main {
@@ -64,7 +62,7 @@
justify-content: space-between; justify-content: space-between;
padding: 10px 14px; padding: 10px 14px;
background: #fafbfc; background: #fafbfc;
border-top: 1px solid #eee; border-top: 1px solid #d1d5db;
} }
.g3-header, .g3-header,
@@ -95,17 +93,19 @@
} }
.g3-check-all input { .g3-check-all input {
width: 16px; width: 14px;
height: 16px; height: 14px;
} }
.g3-check-all span { .g3-check-all span {
margin-left: 4px; margin-left: 4px;
color: #333; color: #333;
font-size: 12px;
line-height: 12px;
} }
.g3-btn { .g3-btn {
font-size: 13px; font-size: 12px;
border-radius: 4px; border-radius: 4px;
background: #165dff; background: #165dff;
color: #fff; color: #fff;
@@ -113,16 +113,20 @@
transition: all 0.2s ease; transition: all 0.2s ease;
border: none; border: none;
width: auto; width: auto;
height: 28px;
line-height: 1; line-height: 1;
padding: 0 15px; padding: 8px 10px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
word-break: break-all;
} }
.g3-btn svg { .g3-btn svg {
margin-right: 4px; margin-right: 4px;
flex-shrink: 0;
width: 12px;
height: 12px;
} }
.g3-btn + .g3-btn { .g3-btn + .g3-btn {
@@ -152,7 +156,7 @@
min-width: 0; min-width: 0;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
border: 1px solid #eef0f2; border: 1px solid #d1d5db;
border-radius: 8px; border-radius: 8px;
background: #fff; background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
@@ -427,7 +431,7 @@
align-items: center; align-items: center;
padding: 0 16px; padding: 0 16px;
background: #ffffff; background: #ffffff;
border-bottom: 1px solid #eef0f2; border-bottom: 1px solid #d1d5db;
flex-shrink: 0; flex-shrink: 0;
} }
@@ -766,7 +770,7 @@
right: 20px; right: 20px;
width: 340px; width: 340px;
background: #ffffff; background: #ffffff;
border: 1px solid #eef0f2; border: 1px solid #d1d5db;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: var(--g3-z-task); z-index: var(--g3-z-task);
@@ -795,7 +799,7 @@
justify-content: space-between; justify-content: space-between;
padding: 12px 16px; padding: 12px 16px;
background: #fafbfc; background: #fafbfc;
border-bottom: 1px solid #eef0f2; border-bottom: 1px solid #d1d5db;
border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0;
} }
+13 -10
View File
@@ -547,9 +547,7 @@
<label class="g3-checkbox-label"></label> <label class="g3-checkbox-label"></label>
<div class="g3-file-preview">${content}</div> <div class="g3-file-preview">${content}</div>
${statusBadge} ${statusBadge}
<div class="g3-file-delete-btn ${deleteDisabled ? "is-disabled" : ""}"> ${deleteDisabled ? "" : `<div class="g3-file-delete-btn">${G3FileIcons.action.delete}</div>`}
${G3FileIcons.action.delete}
</div>
<div class="g3-file-info"> <div class="g3-file-info">
<span class="g3-file-name">${file.name}</span> <span class="g3-file-name">${file.name}</span>
@@ -647,9 +645,6 @@
.find(".g3-action-download") .find(".g3-action-download")
.toggleClass("is-disabled", !canDownload); .toggleClass("is-disabled", !canDownload);
$item.find(".g3-action-preview").toggleClass("is-disabled", !canView); $item.find(".g3-action-preview").toggleClass("is-disabled", !canView);
$item
.find(".g3-file-delete-btn")
.toggleClass("is-disabled", !canDelete);
}); });
}, },
@@ -684,12 +679,10 @@
var canDownload = this.hasPermission(file, "download"); var canDownload = this.hasPermission(file, "download");
var canView = this.hasPermission(file, "view"); var canView = this.hasPermission(file, "view");
var canDelete = this.hasPermission(file, "delete");
$item $item
.find(".g3-action-download") .find(".g3-action-download")
.toggleClass("is-disabled", !canDownload); .toggleClass("is-disabled", !canDownload);
$item.find(".g3-action-preview").toggleClass("is-disabled", !canView); $item.find(".g3-action-preview").toggleClass("is-disabled", !canView);
$item.find(".g3-file-delete-btn").toggleClass("is-disabled", !canDelete);
}, },
/** /**
@@ -1005,12 +998,16 @@
.on("dragenter", function (e) { .on("dragenter", function (e) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
if (self.hasPermission(null, "upload")) {
$container.addClass("drag-over"); $container.addClass("drag-over");
}
}) })
.on("dragover", function (e) { .on("dragover", function (e) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
if (self.hasPermission(null, "upload")) {
$container.addClass("drag-over"); $container.addClass("drag-over");
}
}) })
.on("dragleave", function (e) { .on("dragleave", function (e) {
e.preventDefault(); e.preventDefault();
@@ -1024,6 +1021,8 @@
e.stopPropagation(); e.stopPropagation();
$container.removeClass("drag-over"); $container.removeClass("drag-over");
if (!self.hasPermission(null, "upload")) return;
var files = e.originalEvent.dataTransfer.files; var files = e.originalEvent.dataTransfer.files;
if (files && files.length > 0) { if (files && files.length > 0) {
self.handleFileSelect(files); self.handleFileSelect(files);
@@ -1037,6 +1036,7 @@
var clipboardData = e.originalEvent.clipboardData; var clipboardData = e.originalEvent.clipboardData;
var files = clipboardData.files; var files = clipboardData.files;
if (files && files.length > 0) { if (files && files.length > 0) {
if (!self.hasPermission(null, "upload")) return;
e.preventDefault(); e.preventDefault();
self.handleFileSelect(files); self.handleFileSelect(files);
} }
@@ -1640,7 +1640,7 @@
self.updateFileStatus(file._id, "uploading"); self.updateFileStatus(file._id, "uploading");
return new Promise(function (resolve) { return new Promise(function (resolve) {
function handleResult(error, uploadedFile) { async function handleResult(error, uploadedFile) {
completedCount++; completedCount++;
if (error) { if (error) {
@@ -1653,7 +1653,10 @@
successCount++; successCount++;
self.updateFileStatus(file._id, "uploaded", uploadedFile); self.updateFileStatus(file._id, "uploaded", uploadedFile);
if (typeof self.options.onUploadSuccess === "function") { if (typeof self.options.onUploadSuccess === "function") {
self.options.onUploadSuccess(uploadedFile); var result = self.options.onUploadSuccess(uploadedFile);
if (result && typeof result.then === "function") {
await result;
}
} }
} }
+1 -1
View File
@@ -30,7 +30,7 @@
} }
.container { .container {
max-width: 1200px; max-width: 800px;
margin: 0 auto; margin: 0 auto;
} }