fix: 修复文件夹右键菜单问题 + 新增文件夹详情功能

修复内容:

1. 【文件夹右键菜单无法显示】
   - 问题: showFileContextMenu() 中仍有 `if (file.isDirectory) return` 阻止代码
   - 原因: 之前的修复脚本替换失败,代码仍在
   - 修复: 手动移除这行限制代码
   - 效果: 文件夹现在可以正常右键操作(重命名、删除、查看详情)

新功能:

2. 【文件夹详情查看】
   后端API (POST /api/files/folder-info):
   - 接收参数: path(当前路径), folderName(文件夹名称)
   - 计算文件夹总大小(递归统计所有文件)
   - 统计文件数量和子文件夹数量
   - 返回数据: name, path, size, fileCount, folderCount
   - 仅支持本地存储

   前端功能:
   - 右键菜单新增"查看详情"选项(仅文件夹显示)
   - 详情弹窗显示:
     * 文件夹名称
     * 文件夹路径
     * 总大小(格式化显示)
     * 文件数量
     * 子文件夹数量
   - 加载中状态提示
   - 错误处理和提示

使用方式:
1. 右键点击任意文件夹
2. 选择"查看详情"
3. 弹窗显示文件夹统计信息

技术改动:
- backend/server.js: +100行 (新增folder-info API)
- frontend/app.html: +40行 (详情弹窗UI + 菜单项)
- frontend/app.js: +30行 (状态 + showFolderInfo方法)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
WanWanYun
2025-11-16 00:07:21 +08:00
parent 560b90f7f7
commit f64f86cd78
3 changed files with 177 additions and 4 deletions

View File

@@ -85,6 +85,10 @@ createApp({
folderName: ""
},
// 文件夹详情
showFolderInfoModal: false,
folderInfo: null,
// 上传
showUploadModal: false,
uploadProgress: 0,
@@ -903,6 +907,34 @@ handleDragLeave(e) {
}
},
// 显示文件夹详情
async showFolderInfo(file) {
if (!file.isDirectory) {
this.showToast('error', '错误', '只能查看文件夹详情');
return;
}
this.showFolderInfoModal = true;
this.folderInfo = null; // 先清空,显示加载中
try {
const response = await axios.post(`${this.apiBase}/api/files/folder-info`, {
path: this.currentPath,
folderName: file.name
}, {
headers: { 'Authorization': `Bearer ${this.token}` }
});
if (response.data.success) {
this.folderInfo = response.data.data;
}
} catch (error) {
console.error('[获取文件夹详情失败]', error);
this.showToast('error', '错误', error.response?.data?.message || '获取文件夹详情失败');
this.showFolderInfoModal = false;
}
},
confirmDeleteFile(file) {
const fileType = file.isDirectory ? '文件夹' : '文件';
const warning = file.isDirectory ? "\n⚠ 警告:文件夹内所有文件将被永久删除!" : "";
@@ -912,17 +944,16 @@ handleDragLeave(e) {
},
// ===== 右键菜单和长按功能 =====
// 显示右键菜单PC端
showFileContextMenu(file, event) {
if (file.isDirectory) return; // 文件夹不显示菜单
// 文件和文件夹都可以显示右键菜单
event.preventDefault();
this.contextMenuFile = file;
this.contextMenuX = event.clientX;
this.contextMenuY = event.clientY;
this.showContextMenu = true;
// 点击其他地方关闭菜单
this.$nextTick(() => {
document.addEventListener('click', this.hideContextMenu, { once: true });