Skip to content

Latest commit

 

History

History
54 lines (44 loc) · 3.89 KB

File metadata and controls

54 lines (44 loc) · 3.89 KB

文件夹快捷创建交互优化方案

1. 背景与痛点

目前系统中创建新文件/项目的入口单一(通常为全局的“新建”按钮)。如果用户想要在特定的文件夹下创建新内容,操作流程较为繁琐。用户无法直接在目标文件夹上触发“新建”操作,这增加了用户的认知负担和操作步骤,降低了文件管理的效率。

2. 目标

  • 降低操作成本:允许用户在文件夹层级直接触发新建操作,实现“所见即所得”的上下文创建。
  • 提升心流体验:减少用户在不同UI区域(如侧边栏和顶部工具栏)之间的鼠标移动距离。
  • 完善目录管理功能:使产品在文件/项目管理上更加符合主流习惯(如 VS Code、Notion 等)。

3. 方案设计

方案一:侧边栏/目录树悬浮快捷操作 (Hover Actions) - 推荐

在文件树或目录列表中,当用户将鼠标悬停在某个“文件夹”上方时,显示快捷操作图标。

  • 交互说明
    • Hover态:文件夹同行右侧出现 + (新建) 和 ... (更多操作) 图标。
    • 点击 +:直接在该文件夹下展开一个输入框,要求用户输入新文件/项目的名称。
    • 失焦/按回车:完成创建。
  • 优点:操作最直接,符合直觉,步骤最少。
  • 缺点:在移动端/触屏设备上不支持 hover 状态,需要长按或点击右侧固定按钮。

方案二:右键上下文菜单 (Context Menu)

用户在文件夹上点击鼠标右键,唤出上下文菜单。

  • 交互说明
    • 右键菜单包含:新建文件新建文件夹重命名删除 等选项。
    • 点击新建后,同样在当前文件夹下触发输入框。
  • 优点:可以承载大量操作,UI 界面更清爽。
  • 缺点:隐藏较深,部分小白用户可能没有右键点击网页元素的习惯。

方案三:全局新建按钮增加“位置选择” (Location Picker)

保留目前的单一入口,但在新建表单或弹窗中,增加“目标文件夹”的下拉选择。

  • 交互说明
    • 如果用户当前正选中某个文件夹,点击全局新建按钮时,默认目标位置填入该文件夹。
    • 用户也可以在下拉树形菜单中重新选择位置。
  • 优点:开发成本相对较低,移动端适配容易。
  • 缺点:未能从根本上解决“在树状列表中直接创建”的需求,步骤依然较多。

4. 综合建议与实施路径

建议采用 方案一(Hover 快捷按钮) + 方案二(右键菜单) 的组合,这也是目前业界(如 VS Code、飞书文档)的主流做法:

  1. 桌面端优先:通过 hover 展现 + 号,点击快速创建,解决高频新建需求。
  2. 移动端/平板适配:在列表右侧常驻一个细微的 ... 按钮,点击唤出底部菜单(Action Sheet)包含“新建”操作。
  3. 快捷键支持:选中文件夹时,按下 A 或特定快捷键可直接触发新建。

5. 技术实现要点

  • 状态管理:需要准确维护当前目录树的展开/折叠状态。在新建时,必须确保目标文件夹处于展开 (Expanded) 状态。
  • 输入框占位:在选中文件夹的 children 列表中,临时插入一个特殊的 Input 节点用于接收用户输入。
  • 焦点管理 (Focus):点击新建后,输入框应当立即获得焦点 (autoFocus),并支持 Esc 键取消创建,Enter 键确认创建。
  • 防抖与请求处理:按回车确认后,进入 loading 状态(输入框置灰或显示 spinner),等待后端/本地存储 API 返回成功后再替换为真实的列表节点。

6. 后续计划

  1. 确认方案设计细节与 UI 风格。
  2. 更新相关组件 (TreeView / SidebarItem)。
  3. 编写单元测试覆盖创建、重命名、取消等逻辑。