feat: 新增本地存储文件夹管理功能

新功能概述:
- 支持在本地存储模式下创建文件夹
- 支持删除文件夹(递归删除)
- 支持重命名文件夹(已有功能,天然支持)
- 文件夹配额计算正确

后端改动:

1. 新增创建文件夹API (backend/server.js)
   - POST /api/files/mkdir
   - 参数: path(当前路径), folderName(文件夹名称)
   - 安全检查: 禁止特殊字符(/ \ .. :),防止路径遍历攻击
   - 仅限本地存储使用
   - 创建前检查文件夹是否已存在

2. 改进删除功能 (backend/storage.js)
   - LocalStorageClient.delete() 现在支持删除文件夹
   - 使用 fs.rmSync(path, { recursive: true }) 递归删除
   - 新增 calculateFolderSize() 方法计算文件夹总大小
   - 删除文件夹时正确更新配额使用情况

前端改动:

1. 新建文件夹按钮 (frontend/app.html)
   - 在"上传文件"按钮旁新增"新建文件夹"按钮
   - 仅本地存储模式显示

2. 新建文件夹弹窗 (frontend/app.html)
   - 简洁的创建表单
   - 支持回车键快速创建
   - 使用优化的弹窗关闭逻辑(防止拖动选择文本时误关闭)

3. 前端API调用 (frontend/app.js)
   - 新增 createFolderForm 状态
   - 新增 createFolder() 方法
   - 前端参数验证
   - 创建成功后自动刷新文件列表

4. 右键菜单优化 (frontend/app.html)
   - 文件夹不显示"下载"按钮(文件夹暂不支持打包下载)
   - 文件夹不显示"分享"按钮(分享单个文件夹暂不支持)
   - 文件夹支持"重命名"和"删除"操作

安全性:
- 文件夹名称严格验证,禁止包含 / \ .. : 等特殊字符
- 路径安全检查,防止目录遍历攻击
- 仅限本地存储模式使用(SFTP存储使用上传工具管理)

配额管理:
- 空文件夹不占用配额
- 删除文件夹时正确释放配额(计算所有子文件大小)
- 删除非空文件夹会递归删除所有内容

使用方式:
1. 登录后切换到本地存储模式
2. 点击"新建文件夹"按钮
3. 输入文件夹名称,点击创建
4. 双击文件夹进入,支持多级目录
5. 右键文件夹可重命名或删除

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
WanWanYun
2025-11-15 23:46:20 +08:00
parent 3977e72c9e
commit e5c932a351
4 changed files with 144 additions and 7 deletions

View File

@@ -669,6 +669,9 @@
<button v-if="storageType === 'local'" class="btn btn-primary" @click="$refs.fileUploadInput.click()">
<i class="fas fa-upload"></i> 上传文件
</button>
<button v-if="storageType === 'local'" class="btn btn-primary" @click="showCreateFolderModal = true">
<i class="fas fa-folder-plus"></i> 新建文件夹
</button>
<!-- SFTP存储显示下载上传工具按钮 -->
<button v-else class="btn btn-primary" @click="downloadUploadTool" :disabled="downloadingTool">
<i :class="downloadingTool ? 'fas fa-spinner fa-spin' : 'fas fa-download'"></i>
@@ -811,6 +814,27 @@
</div>
</div>
<!-- 新建文件夹模态框 -->
<div v-if="showCreateFolderModal" class="modal-overlay" @mousedown.self="handleModalMouseDown" @mouseup.self="handleModalMouseUp('showCreateFolderModal')">
<div class="modal-content" @click.stop>
<h3 style="margin-bottom: 20px;">
<i class="fas fa-folder-plus"></i> 新建文件夹
</h3>
<div class="form-group">
<label class="form-label">文件夹名称</label>
<input type="text" class="form-input" v-model="createFolderForm.folderName" @keyup.enter="createFolder()" placeholder="请输入文件夹名称" autofocus>
</div>
<div style="display: flex; gap: 10px; margin-top: 20px;">
<button class="btn btn-primary" @click="createFolder()" style="flex: 1;">
<i class="fas fa-check"></i> 创建
</button>
<button class="btn btn-secondary" @click="showCreateFolderModal = false; createFolderForm.folderName = ''" style="flex: 1;">
<i class="fas fa-times"></i> 取消
</button>
</div>
</div>
</div>
<!-- 分享所有文件模态框 -->
<div v-if="showShareAllModal" class="modal-overlay" @mousedown.self="handleModalMouseDown" @mouseup.self="handleModalMouseUp('showShareAllModal')">
<div class="modal-content" @click.stop>
@@ -1674,13 +1698,14 @@
<div v-if="isPreviewable(contextMenuFile)" class="context-menu-item" @click="contextMenuAction('preview')">
<i class="fas fa-eye"></i> 预览
</div>
<div class="context-menu-item" @click="contextMenuAction('download')">
<!-- 文件夹不显示下载和分享按钮 -->
<div v-if="!contextMenuFile.isDirectory" class="context-menu-item" @click="contextMenuAction('download')">
<i class="fas fa-download"></i> 下载
</div>
<div class="context-menu-item" @click="contextMenuAction('rename')">
<i class="fas fa-edit"></i> 重命名
</div>
<div class="context-menu-item" @click="contextMenuAction('share')">
<div v-if="!contextMenuFile.isDirectory" class="context-menu-item" @click="contextMenuAction('share')">
<i class="fas fa-share"></i> 分享
</div>
<div class="context-menu-divider"></div>

View File

@@ -79,6 +79,12 @@ createApp({
path: ""
},
// 创建文件夹
showCreateFolderModal: false,
createFolderForm: {
folderName: ""
},
// 上传
showUploadModal: false,
uploadProgress: 0,