🏛️ HS Design · 空间思维导图与超级应用融合系统架构白皮书

（GitMind / Miro 级空间物理引擎 + 全景 Super App 数据底座）

战略核心宗旨（CEO Jake 2026-08-26 指示）：绝不急于求成，绝不搞“差不多就发”的半成品！ 首要任务是海量的 Research、严密的 Planning 与顶层的 Architecture。深入解构 GitMind、Miro、Whimsical、Tldraw 等全球标杆产品，构建一套兼具「极致自由空间交互手感」与「全景 5 大业务视图无缝互联」的工业级超级系统。

🧭 一、大牌产品底层引擎深度解构与技术路线选型

graph TD
    A["图形与交互渲染底座选型"] --> B["方案 1: 纯 Canvas 2D (GitMind / XMind)"]
    A --> C["方案 2: DOM + SVG 混合空间 (Miro / Heptabase / Tldraw)"]
    A --> D["方案 3: WebGL / WebGPU (Figma)"]
    
    B -->|优缺点| B1["高性能渲染, 但移动端长文本排版与富文本编辑困难"]
    C -->|推荐方案| C1["🏆 最佳平衡: SVG 处理 60fps 贝塞尔流体连线 + DOM 处理富文本卡片/待办打勾 + 视口硬件加速 Transform"]
    D -->|优缺点| D1["超大规模白板极致性能, 但开发复杂度高, 不利于与 HTML 待办系统集成"]

1. 为什么选择「DOM + SVG 混合空间图谱架构」？

DOM 节点卡片的无可替代性：
- 思维导图不仅仅是静态图形，更是 日常待办事项（To-Do ✅/⏳ 打勾）、富文本行内编辑、标签/图标选择、人脉/知识库抽屉联动 的交互中枢。DOM 能够提供原生级别的文本选择、输入法（IME）支持与无障碍触控；
SVG 矢量层的极致丝滑：
- SVG 专门承载动态贝塞尔连接线、吸附磁环光效与框选矩形，利用 GPU 路径加速，拖拽时实现 60fps 自适应重绘；
视口硬件加速：
- 全画布置于单个 #canvas-world 容器内，通过 transform: translate3d(tx, ty, 0) scale(s) 由 GPU 统一切片渲染，实现万级像素无限平移与缩放。

📐 二、空间物理与动态树形运动学数学规范（Kinematics & Spatial Models）

1. 双重坐标系统设计（Dual-Coordinate Model）

每个节点在内存中拥有双重坐标表达：

相对层级骨骼坐标 $(Δ x_{r e l}, Δ y_{r e l})$ ：相对于父节点锚点的相对偏移向量；
绝对空间物理坐标 $(X_{w or l d}, Y_{w or l d})$ ：在 2D 无限画布上的绝对物理位置。

当父节点 P 从 (Xp, Yp) 移动到 (Xp + dx, Yp + dy) 时：
旗下所有子孙节点 C_k 的绝对坐标同步变换：
(Xc, Yc) -> (Xc + dx, Yc + dy)
【保证思维构型永不散架、空间相对拓扑 100% 保持】

2. 紧凑分层子树动态高度算法（Reingold-Tilford / FlexTree Algorithm）

为了在「自由拖拽」与「一键智能整理」之间达到完美统一：

自底向上高度递归： $TreeHeight (N) = {H_{c a r d} \sum_{i = 1}^{k} TreeHeight (C_{i}) + (k - 1) \times Gap_{y} if leaf or collapsed if has children$
自顶向下独立槽位分配：
- 系统为每一个分支分配绝对隔离的纵向包围盒（Bounding Box）；
- 彻底杜绝交叉线、重叠堆积与“面条混乱”。

3. 动态自适应三次贝塞尔曲线方程（Cubic Bezier Routing）

依据起点 $(S_{x}, S_{y})$ 与终点 $(T_{x}, T_{y})$ 的相对方位与距离，动态计算控制点： $C_{1} = (S_{x} \pm Δ_{o f f se t}, S_{y}), C_{2} = (T_{x} \mp Δ_{o f f se t}, T_{y})$ $B (t) = (1 - t)^{3} S + 3 (1 - t)^{2} t C_{1} + 3 (1 - t) t^{2} C_{2} + t^{3} T, t \in [0, 1]$

📱 三、三星平板（Samsung Tab / S23 Ultra / iPad）触控手势管线

sequenceDiagram
    participant User as 用户手指/手写笔
    participant VP as Canvas Viewport
    participant TouchEngine as Universal Touch Engine
    participant World as Canvas World (GPU)

    User->>TouchEngine: 单指轻触节点 (Touch/Pointer Down)
    TouchEngine->>TouchEngine: 阻止系统手势 (e.preventDefault) + 记录子树骨骼
    TouchEngine->>World: 激活节点呼吸高亮环 (Selected Glow)
    
    alt 单指滑动 (Drag Node)
        User->>TouchEngine: 手指划动屏幕
        TouchEngine->>World: 60fps 实时平移子树与重绘 SVG 贝塞尔曲线
    else 双指操作 (Pinch-to-Zoom & Pan)
        User->>TouchEngine: 双指张合
        TouchEngine->>World: 计算双指中点与距离比，以几何中点为圆心平滑缩放
    end

平板端 5 大触控铁律：

全局手势隔离：touch-action: none; -webkit-user-select: none; 彻底屏蔽系统返回与边缘手势冲突；
全局 Window 级事件捕获：手指即使划出节点卡片边界或划到屏幕边缘，window.pointermove 绝不丢帧；
触控死区（Slop Zone）智能判定：移动距离 $< 4 px$ 判定为「点击/选中」， $> 4 px$ 瞬间平滑无缝切换为「物理拖拽」，杜绝误触与抖动；
S-Pen / Apple Pencil 原生压力感应适配；
虚拟悬浮工具坞（Radial / Floating Dock）：专为平板大屏触控定制的大尺寸快捷操作按钮。

🔄 四、全景 Super App 5 大视图融合数据流模型

系统不是一个孤立的思维导图画板，而是 HS Design 核心业务与人生的数据中枢：

                    ┌─────────────────────────────────────────┐
                    │      统一图数据模型 (Unified Graph)       │
                    │ (D1 Database `life-map-db` + IndexedDB) │
                    └────────────────────┬────────────────────┘
                                         │
        ┌──────────────────┬─────────────┼─────────────┬──────────────────┐
        ▼                  ▼             ▼             ▼                  ▼
  【1. 导图视图】     【2. 任务视图】 【3. 知识库】  【4. 人脉视图】    【5. 规划视图】
  (Spatial Canvas)    (Daily Tasks)  (Knowledge)    (Contacts CRM)     (Strategic OKRs)
        │                  │             │             │                  │
   自由空间探索       待办打勾联动    卡片笔记抽屉    商业人脉网络       2026-2027战略
   节点任意拖拽       D1 审计日志     跨节点双向链    跟进与协作记录     三大灯塔/Q1推进

数据双向联动原则：

在导图上给节点加上 ✅ ➔ 任务视图的待办列表即刻勾销，并写入 D1 task_changes 审计日志；
在规划视图修改了 Q1 目标 ➔ 导图的战略分支自动同步更新，空间拓扑保持完好；
节点支持挂载知识库卡片（Markdown 详细长文与附件），保证导图表面只展示精炼关键词，深层内容一键抽屉展开。

🔬 五、研发攻坚路线图与严格验收标准（Roadmap & SOP）

阶段一：深度调研与竞品逆向（Research & Prototyping）

由 Research PM 牵头输出万字级全球产品解构报告；
建立独立的实验环境 https://spatial-mindmap.ida-czia.workers.dev 与 Git 仓库 JakeBilu/hs-spatial-mindmap。

阶段二：空间引擎数学模型与多端触控打磨（Engine Core R&D）

落地高精度的 Reingold-Tilford 紧凑无碰撞排版算法；
落地 Samsung Tab 平板单指刚体拖拽与双指中点捏合缩放；
落地双击空白生成独立灵感岛屿与磁吸挂载认亲。

阶段三：Super App 5 大视图数据流彻底融合（Super App Integration）

导图、待办、知识库、人脉、规划 5 大视图基于 Unified Graph 彻底打通；
D1 增量同步与离线优先（Offline-First）存储。

由 QA & Blind Reviewer PM 在真机平板上执行 25 项全场景盲审实测；
达到 0 报错、0 碰撞、极致丝滑手感后，向 CEO Jake 正式提交汇报。

HS Knowledge Vault

探索

空间思维导图与超级应用融合系统架构白皮书

🏛️ HS Design · 空间思维导图与超级应用融合系统架构白皮书

（GitMind / Miro 级空间物理引擎 + 全景 Super App 数据底座）

🧭 一、大牌产品底层引擎深度解构与技术路线选型

1. 为什么选择「DOM + SVG 混合空间图谱架构」？

📐 二、空间物理与动态树形运动学数学规范（Kinematics & Spatial Models）

1. 双重坐标系统设计（Dual-Coordinate Model）

2. 紧凑分层子树动态高度算法（Reingold-Tilford / FlexTree Algorithm）

3. 动态自适应三次贝塞尔曲线方程（Cubic Bezier Routing）

📱 三、三星平板（Samsung Tab / S23 Ultra / iPad）触控手势管线

平板端 5 大触控铁律：

🔄 四、全景 Super App 5 大视图融合数据流模型

数据双向联动原则：

🔬 五、研发攻坚路线图与严格验收标准（Roadmap & SOP）

阶段一：深度调研与竞品逆向（Research & Prototyping）

阶段二：空间引擎数学模型与多端触控打磨（Engine Core R&D）

阶段三：Super App 5 大视图数据流彻底融合（Super App Integration）

阶段四：对抗性双盲破坏测试与最终交付（Double-Blind QA Gate）

关系图谱

目录