文件列表 FAB 菜单与新建文本设计

StoreX UI 上传 元数据
December 14, 2025
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.

问题背景

最初文件列表右下角的上传按钮功能比较单一，只支持上传文件，且新建文本文件的交互是：

  • 仅弹出对话框让输入内容文件名；
  • 创建完成后返回列表，不进入编辑器。

体验问题：

  • 主操作入口不够集中，要上传/新建时需要在不同地方找入口；
  • 新建文本后我通常期望“直接编辑内容”，而不是只看到一个空文件条目。

目标

  • 文件页只保留一个“主操作” FAB，点击后底部弹出菜单，集中所有主要文件操作：
    • 上传文件；
    • 上传文件夹；
    • 新建文件夹；
    • 新建文本。
  • 新建文本文件后直接进入编辑器，并处于编辑模式。

方案设计

FAB 与底部菜单

  • 使用单一圆形 FAB（加号），统一入口。
  • 点击 FAB 打开 showModalBottomSheet：
    • 每个选项对应现有的逻辑：上传文件、上传文件夹、新建文件夹、新建文本；
    • 复用已有状态管理方法，避免重复实现。

新建文本文件流程

需求细化：

  • 新建文件名建议以 .txt 结尾；
  • 创建完成后立即进入文本编辑页；
  • 保存时要刷新文件元信息（大小、更新时间等），列表里能立刻反映变化。

实现思路：

  • 状态层 AppState.createTextFile：
    • 接收路径与文件名；
    • 先在元数据中创建一个 size=0 的文本文件记录；
    • 调用更新内容的 API 写入初始空内容或默认文本；
    • 返回 FileMetadata?，供 UI 导航。
  • UI 层（HomePage）：
    • 在 FAB 菜单中选择“新建文本”后：
      • 弹出输入文件名对话框，默认值带 .txt 后缀，并把光标放在前面方便改名；
      • 调用 createTextFile；
      • 创建成功后，跳转到文本编辑页。
  • 文本编辑页：
    • 打开时强制是编辑模式，而不是预览模式；
    • 保存成功后，通过状态层刷新该文件的元信息（size、updatedAt 等），避免列表显示老数据。

收获

  • 把一堆零散操作收敛到 FAB + BottomSheet，是移动端常见模式，能明显提升发现和使用效率。
  • 新建资源后直接进入编辑，是更贴合使用心智的流程，可以作为类似场景的通用设计原则。