先上效果：角色关系图
这个页面纯AI写成，工具是WorkBuddy，调用的大模型是DeepSeek，制作时间是（2026-8-13），开发过程中要求AI写好文档记录，整理审核，并修改后如下。
1. 项目概述
这是一个人物关系网络搭建工具，可以比较方便的绘制不同人物间的关系，有以下功能：在无限画布上以节点表示人物、带箭头的连线表示关系，并配套章节大纲视图（按章节高亮出场人物）、搜索高亮、可自定义快捷键、人物模板复制粘贴、迷你地图导航。所有的数据只保存在浏览器 localStorage，支持 JSON 导出/导入，纯前端即可完成创作与备份迁移。
2. 原始需求（v1 立项，2026-08-11）
| # | 需求 | 实现 |
|---|---|---|
| 1 | 现代简约风格（类 Miro） | 浅色主题、卡片式节点、点阵背景、柔和阴影与动效 |
| 2 | 无限画布 | 鼠标拖拽平移、滚轮以光标为中心缩放（25%~300%）、点阵随缩放联动 |
| 3 | 人物节点：点击添加/拖拽/双击编辑/右键删除/多色/属性自定义 | 双击空白添加；拖拽移动；双击弹窗编辑；右键菜单（编辑/12 色切换/删除）；属性为自由键值对 |
| 4 | 连线工具，带箭头标注关系 | 工具栏切换连线模式，选起点→终点创建；贝塞尔曲线+箭头+关系标签；点选/双击/右键管理 |
| 5 | 章节大纲，按章节过滤显示 | 右侧面板自由编写章节标题+备注，出场人物 chips 勾选；点击章节标题切换视图，非出场人物/关系半透明淡化（与搜索叠加） |
| 6 | 顶部工具栏 | 添加人物、连线、章节大纲、撤销/重做、快捷键、复制/粘贴、导出/导入/清空 |
| 7 | 右下角迷你地图 | 节点概览 + 视口蓝框，点击/拖动定位 |
数据方案：localStorage 自动保存；章节过滤用半透明淡化；属性用自由键值对；内置《红楼梦》示例数据（10 人物/12 关系/5 章节）；连线支持关系标注。
3. 迭代历程
3.1 v1 阶段（2026-08-11，主理人直接开发）
| 轮次 | 内容 | 关键修复/新增 |
|---|---|---|
| 1 | 核心交付（40 项冒烟测试） | 画布/节点/连线/章节/工具栏/迷你地图全功能 |
| 2 | 搜索与高亮 | 搜人物名/属性/关系标签，命中高亮（mark+光晕）、未命中淡化，与章节过滤叠加 |
| 3 | 箭头遮挡修复 | 端点由固定半径改为按节点真实尺寸计算矩形边界交点，外移 GAP 保证箭头露出 |
| 4 | 成对反向线重合修复 | 弯曲方向改为 id 哈希确定性算法；教训：曾误加 dir 符号导致控制点重合，去掉后反向线垂直向量天然分离 |
| 5 | 可自定义快捷键系统 | 动作表+keymap 架构、录制弹窗、冲突检测、localStorage 持久化 |
| 6 | 复制粘贴（模板工作流） | 复制人物（名称/颜色/全部属性），粘贴自动弹编辑框改名，支持空白模板复用 |
| 7 | 迷你地图坐标错位修复 | 视口范围误用屏幕偏移量 → 改为世界坐标 -camera/zoom；bbox 改为仅由节点决定（点击定位精确） |
| 8 | 关系标签白框修复 | 文字宽度在元素挂载前测量失真 → 先挂载再测量 + 字宽兜底估算 |
| 9 | 双向线端点错开 | 端点沿节点边界切线按弯曲方向偏移；角部回推防遮挡 |
3.2 v2 阶段（2026-08-13，软件开发团队协作）
流程：工程师审查 → 用户确认 → 工程师实施 → QA 回归。
审查发现 11 项问题（1 P0 + 5 P1 + 5 P2），全部修复 + 3 项行为变化，QA 152/152 通过：
| 编号 | 问题 | 修复 |
|---|---|---|
| P0-1 | 章节编辑（标题/备注/出场人）不入撤销栈，Ctrl+Z 静默丢修改 | 统一先 pushUndo（备注用失焦时一次性入栈防每键一栈） |
| P1-2 | 删除/撤销后选中态与浮动工具条残留（幽灵工具条、et-del 死键） | 统一 selectEdge(null)/selectNode(null)/updateClipboardUI |
| P1-3 | 本地数据/导入校验过弱，脏数据打崩页面 | 新增 sanitizeData 逐项清洗（persons/relations/chapters/camera） |
| P1-4 | 章节过滤死锁：非本章不可点、空章节全锁、无清除入口 | 章节面板「显示全部」按钮 + 空章节画布提示 |
| P1-5 | 搜索每键全量重建 + O(E²) 查找，大图卡顿 | 词变化才重建 DOM；applyFilters 预建 Map 索引 |
| P1-6 | 连线模式下误点空白静默丢起点 | link 模式下空白点击仅 toast 提示，不取消起点 |
| P2-7 | 平移/缩放每帧全量重绘迷你地图；三处重复监听 | rAF 节流 + 公共 attachDrag 助手 |
| P2-8 | 清空/导入状态未复位；删人后复制按钮态不刷新 | 新增 resetUiState() 统一复位 |
| P2-9 | 双击章节头先取消视图再展开；连线后停留连线模式 | 单击延迟 250ms 防双击误触；连线创建后自动退出连线模式 |
| P2-10 | Firefox 行模式缩放过慢；localStorage 写失败无提示 | wheel deltaMode 兼容；首次失败 toast 一次 |
| P2-11 | 死代码、旧浏览器兼容 | 删 worldToScreen；color-mix @supports 降级 |
3 项行为变化：自动退出连线模式；清除章节过滤入口；保护连线起点。
4. 当前版本功能清单（v2）
- 无限画布：平移/缩放/点阵背景/空状态提示
- 人物节点：双击添加、拖拽、双击编辑（名称/12 色/自由属性键值对）、右键菜单（编辑/复制/改色/删除）、复制粘贴（模板工作流）
- 关系连线：连线工具、贝塞尔曲线+箭头+标签、点选/双击/右键管理、双向线端点错开
- 章节大纲：自由编写标题/备注、出场人物 chips、章节视图过滤（半透明淡化）、「显示全部」入口、空章节提示、新增自动定位
- 搜索：人物名/属性/关系标签实时搜索，命中高亮（mark+脉冲）、未命中淡化、与章节过滤叠加
- 快捷键：10 个动作全部可自定义（录制/冲突检测/恢复默认），Ctrl+Z/Y、Ctrl+S、Ctrl+F、Delete、Esc、L 等默认键
- 迷你地图：节点概览+视口蓝框，点击/拖动定位，rAF 节流
- 数据：localStorage 自动保存、JSON 导出/导入（含数据清洗）、撤销/重做（60 步）
- 健壮性：应用内确认弹窗（不依赖原生 confirm）、数据清洗层、localStorage 失败提示
5. 技术要点
- 架构：单文件 IIFE；DOM 节点 + SVG 连线混合渲染；world 层
transform: translate+scale实现相机 - 坐标体系：屏幕↔世界换算
屏幕 = 世界×zoom + camera；迷你地图 bbox 仅由节点决定 - 连线几何：按节点真实尺寸计算边界交点、端点切线错开、id 哈希决定弯曲方向（反向线天然分离）、挂载后测量标签宽度
- 状态管理：ui 对象统一管理（tool/选择/章节/搜索）；撤销栈为深拷贝快照（60 步）
- 快捷键：keymap 可配置架构，window 捕获阶段录制监听
- XSS 防护：所有 innerHTML 拼接经 esc() 转义
6. 已知问题与注意事项
- 快捷键配置独立存储（独立 key），导出/导入图谱数据不包含快捷键配置
- 迷你地图在内容极稀疏/视口远超节点范围时，蓝框可能部分超出小地图（canvas 裁剪），属设计行为
- 章节头单击有 250ms 延迟（防双击误触），快速连点需注意
7. 后续可优化方向
- 多作品/多图谱切换（不同小说分空间）
- 导出图片（canvas 快照）或导出人物模板 JSON
- 关系线按类型着色/线型（如敌对红色虚线）
- 移动端触控适配（当前以鼠标为主）
- 快捷键配置随图谱一并导出
2 条评论
不错，有点意思。
好耶