桌面端上传和新建功能UI现代化

StoreX UI 桌面 加密 上传 重构 修复
January 4, 2026
2 min read
By devshan

Table of Contents

This is a list of all the sections in this post. Click on any of them to jump to that section.

1. 背景

在桌面端文件管理界面中，我这边用的时候发现上传和新建功能的菜单层级较深，操作不够直观。原有的悬停下拉菜单设计在桌面端体验不佳，需要进行现代化改进。

2. 需求

  • 点击上传按钮时，不再显示悬停下拉菜单，而是弹窗选择
  • 点击新建时，出现居中弹窗可选择
  • 导入功能独立成按钮，不再嵌套在新建菜单里

3. 实现方案

3.1 顶部工具栏按钮重构

将原来的悬停下拉菜单改为点击弹窗，并拆分为三个独立按钮：

按钮功能交互
上传选择文件/文件夹点击弹窗
新建新建文件夹/文本点击弹窗
导入导入加密文件直接调用

3.2 文件夹上传逻辑修复

  • 修复了选择文件夹上传时子文件夹未被上传的问题
  • 修改了文件名路径处理逻辑，确保子文件夹结构被正确保留
  • 后端会根据文件名中的路径信息自动创建中间目录

4. 技术实现

4.1 组件结构

// 上传按钮 - 点击弹窗
_ToolbarUploadButton(
  onUploadFile: _uploadFile,
  onUploadFolder: _uploadFolder,
)
 
// 新建按钮 - 点击弹窗
_ToolbarNewButton(
  onNewFolder: _createFolder,
  onNewText: _createTextFile,
)
 
// 导入按钮 - 直接调用
_ToolbarImportButton(
  onImportE2E: _importE2EFile,
)

4.2 UI 变更

  • _ToolbarUploadButton: 改为 TextButton.icon，点击后 showDialog 显示选项
  • _ToolbarNewButton: 同上，移除了 onImportE2E 参数
  • _ToolbarImportButton: 新增独立按钮，直接调用导入功能

5. 验证

  • 运行 flutter analyze 确保代码无错误
  • 测试上传按钮弹窗正常显示
  • 测试新建按钮弹窗正常显示
  • 测试导入按钮直接调用导入功能