目前系统中创建新文件/项目的入口单一(通常为全局的“新建”按钮)。如果用户想要在特定的文件夹下创建新内容,操作流程较为繁琐。用户无法直接在目标文件夹上触发“新建”操作,这增加了用户的认知负担和操作步骤,降低了文件管理的效率。
- 降低操作成本:允许用户在文件夹层级直接触发新建操作,实现“所见即所得”的上下文创建。
- 提升心流体验:减少用户在不同UI区域(如侧边栏和顶部工具栏)之间的鼠标移动距离。
- 完善目录管理功能:使产品在文件/项目管理上更加符合主流习惯(如 VS Code、Notion 等)。
在文件树或目录列表中,当用户将鼠标悬停在某个“文件夹”上方时,显示快捷操作图标。
- 交互说明:
- Hover态:文件夹同行右侧出现
+(新建) 和...(更多操作) 图标。 - 点击
+:直接在该文件夹下展开一个输入框,要求用户输入新文件/项目的名称。 - 失焦/按回车:完成创建。
- Hover态:文件夹同行右侧出现
- 优点:操作最直接,符合直觉,步骤最少。
- 缺点:在移动端/触屏设备上不支持 hover 状态,需要长按或点击右侧固定按钮。
用户在文件夹上点击鼠标右键,唤出上下文菜单。
- 交互说明:
- 右键菜单包含:
新建文件、新建文件夹、重命名、删除等选项。 - 点击新建后,同样在当前文件夹下触发输入框。
- 右键菜单包含:
- 优点:可以承载大量操作,UI 界面更清爽。
- 缺点:隐藏较深,部分小白用户可能没有右键点击网页元素的习惯。
保留目前的单一入口,但在新建表单或弹窗中,增加“目标文件夹”的下拉选择。
- 交互说明:
- 如果用户当前正选中某个文件夹,点击全局新建按钮时,默认目标位置填入该文件夹。
- 用户也可以在下拉树形菜单中重新选择位置。
- 优点:开发成本相对较低,移动端适配容易。
- 缺点:未能从根本上解决“在树状列表中直接创建”的需求,步骤依然较多。
建议采用 方案一(Hover 快捷按钮) + 方案二(右键菜单) 的组合,这也是目前业界(如 VS Code、飞书文档)的主流做法:
- 桌面端优先:通过 hover 展现
+号,点击快速创建,解决高频新建需求。 - 移动端/平板适配:在列表右侧常驻一个细微的
...按钮,点击唤出底部菜单(Action Sheet)包含“新建”操作。 - 快捷键支持:选中文件夹时,按下
A或特定快捷键可直接触发新建。
- 状态管理:需要准确维护当前目录树的展开/折叠状态。在新建时,必须确保目标文件夹处于展开 (Expanded) 状态。
- 输入框占位:在选中文件夹的
children列表中,临时插入一个特殊的Input节点用于接收用户输入。 - 焦点管理 (Focus):点击新建后,输入框应当立即获得焦点 (
autoFocus),并支持Esc键取消创建,Enter键确认创建。 - 防抖与请求处理:按回车确认后,进入 loading 状态(输入框置灰或显示 spinner),等待后端/本地存储 API 返回成功后再替换为真实的列表节点。
- 确认方案设计细节与 UI 风格。
- 更新相关组件 (TreeView / SidebarItem)。
- 编写单元测试覆盖创建、重命名、取消等逻辑。