Skip to content

fix(mindmap): 新建文件夹保存失败/无反馈,修复主题节点拖拽交互 #775

Description

@cropflre

用户反馈

用户反馈两个脑图基础交互问题:

  1. 新建文件夹后保存不了;
  2. 脑图“主题”无法拖动。

这两项都属于合理反馈,并且从 release/v1.5.0 当前代码看,相关能力本身已经存在,因此优先按 功能回归 / 交互链路不完整 处理,而不是重新设计一套脑图。


一、新建文件夹保存不了

当前代码核对

后端已经有完整目录接口:

GET    /api/mindmap-folders
POST   /api/mindmap-folders
PATCH  /api/mindmap-folders/:id
DELETE /api/mindmap-folders/:id

前端 MindMapEditor.tsx 也已经调用:

api.createMindMapFolder({ name: newFolderName.trim() })

但当前新建文件夹 UI 主要依赖 输入名称后按 Enter 才提交,并且 Promise 链缺少明确错误反馈。用户如果输入完名称后点击其他位置,或者接口失败,很容易感知为“保存不了”。

建议修复

  • 输入框旁提供明确的确认按钮(✓ / 保存);
  • Enter 提交继续保留;
  • Escape 取消;
  • 空名称禁止提交;
  • 提交中显示 loading,避免重复提交;
  • 成功后立即更新 folder list,不要求用户手动刷新;
  • 失败必须 toast.error() 显示后端 error/message;
  • 不要使用 .then() 静默吞掉错误,改成明确 async/await + try/catch;
  • 检查个人空间 / workspace 两种 workspaceId 是否都能正常保存;
  • 检查父级文件夹、三级深度限制、重复名称等边界。

二、脑图主题节点无法拖动

当前代码核对

MindMapEditor.tsx 已经存在:

  • getMovableNodeIdsForDrag()
  • moveMindMapNodes()
  • onDragStart / onDragOver / onDragLeave / onDrop 等节点拖拽接口;
  • 多选节点与父子关系校验;
  • 防止拖到自身 / 后代节点。

因此“主题无法拖动”更像是实际 UI 事件没有稳定触发,或拖拽语义不符合用户预期。

产品定义

一期将“拖动主题”明确为 幕布类脑图的结构拖拽

主题 A
├── 子主题 A1
└── 子主题 A2

拖动 A2 到主题 B
        ↓
主题 B
└── 子主题 A2

支持:

  • 改变父子关系;
  • 同层调整顺序;
  • 拖到根主题成为一级主题;
  • 多选主题批量拖动(已有逻辑可复用);
  • 拖动时明确显示目标高亮和插入位置。

不建议本 Issue 把它扩成任意像素自由布局。 当前脑图是树布局算法,节点 x/y 会重新计算。若后续要支持“节点随意摆放”,应独立设计自由布局模式,否则会和自动排版、移动端、导出产生冲突。

重点排查

  1. 节点实际 DOM 是否设置了正确 draggable / pointer 事件;
  2. 文本编辑态是否把 drag 事件全部拦截;
  3. 移动端 touch/pointer 与桌面 HTML5 drag 是否分裂;
  4. root 节点限制是否误伤一级节点;
  5. selection / context menu / resize handle 是否与拖拽手势冲突;
  6. drop 后是否只改本地 state,但保存接口没有持久化;
  7. 自动布局重算后是否让用户误以为拖动“没生效”;
  8. 同层 reorder 是否目前仅支持 reparent、不支持排序。

UX 建议

参考幕布的原则是“结构优先”,不要做重型画布:

  • 按住主题主体区域即可拖动;
  • 拖动中显示半透明 ghost;
  • 可放置目标高亮;
  • 同层插入显示横线;
  • 非法目标显示禁止状态;
  • 成功后立即重排并自动保存;
  • Undo / Redo 可以撤销拖拽。

移动端:

  • 长按 250~400ms 进入拖动;
  • 不与画布平移、缩放、文本编辑抢手势;
  • 触发拖动后给予轻微 haptic(如现有项目能力允许)。

验收标准

文件夹

  • 新建文件夹输入名称后可点击明确“保存/确认”按钮;
  • Enter 可保存,Esc 可取消;
  • 保存失败有明确错误提示;
  • 成功后无需刷新即可看到文件夹;
  • 个人空间正常;
  • 工作区正常;
  • 父子文件夹与最多三级规则正常;
  • 重复点击不会创建多个重复目录;
  • 接口异常不会静默失败。

主题拖拽

  • 桌面端主题可以拖到另一主题下改变父子关系;
  • 同层主题可以调整顺序;
  • 一级主题可拖到根节点下;
  • 禁止拖到自身或自己的后代;
  • 多选拖动保持树顺序;
  • drop 后立即持久化,刷新后结构不恢复旧状态;
  • 拖动目标有清晰视觉反馈;
  • 文本编辑、节点 resize、框选、画布平移不与拖动冲突;
  • Android / iOS 有可用触控拖动方案;
  • Undo / Redo 正常;
  • 补充文件夹创建失败、主题 reparent/reorder 和持久化回归测试。

相关代码

  • frontend/src/components/MindMapEditor.tsx
  • frontend/src/lib/api.impl.ts
  • backend/src/routes/mindmap-folders.ts
  • backend/src/routes/mindmaps.ts
  • backend/src/repositories/mindmapFoldersRepository.ts
  • 脑图历史/Undo 相关 hooks

优先级:P0/P1(基础功能可用性)

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions