cma-management/docs/mapcanvas-tianzige-redesign-20260830.md

战略地图画布田字格 2×2 改版方案（2026-08-30）

提出：项目Bot（用户确认"按推荐执行"）| 依据：画布布局评估（纵向泳道→田字格） 目标：缩短跨层拖拽距离 + 拖拽智能辅助 + 画布性能优化

一、布局改版（核心）

田字格 2×2 排布（BSC 四层）

┌─────────────────┬─────────────────┐
│  💰 财务层        │  👥 客户层        │
│  (目标卡片)       │  (目标卡片)       │
├─────────────────┼─────────────────┤
│  ⚙️ 内部流程层    │  📚 学习成长层    │
│  (目标卡片)       │  (目标卡片)       │
└─────────────────┴─────────────────┘

• 排布依据：因果支撑方向为 学习→流程→客户→财务（自下而上），田字格使对角距离≈边距（跨层拖拽缩短约一半）
• 各层保留当前"层标题+目标卡片列表"结构，仅容器从全宽横条改为 2×2 网格
• 画布总高度减半 → 整体更紧凑，减少滚动

响应式

• 宽度 > 1200px：田字格 2×2
• 宽度 800-1200px：田字格仍 2×2（卡片缩小）或降级为纵向（保底）
• 移动端：纵向（保底）

二、拖拽交互优化（降难度）

1. 方向预判 + 高亮

• 拖起目标时，只高亮合法连接目标（按 BSC 支撑方向：下层→上层 或 同层相邻；反方向灰显不可连）
• 目标高亮 + 吸附（靠近自动贴合）

2. 连接面板兜底（非拖拽方式）

• 画布工具条加"连接管理"入口 → 弹窗表格：源目标/目标目标/强度/方向
• 精确场景用面板，直觉场景用拖拽

3. 拖拽提示

• 拖起时显示"拖到目标建立因果链"提示（首用引导）

三、性能优化（一并实施——"反应慢"根因）

1. zoom 缩放：CSS zoom → transform: scale

• 现状：:style="{ zoom: zoomLevel }"（MapCanvas.vue:54）——CSS zoom 触发整页重排重绘
• 改：外层容器 transform: scale(zoomLevel) + transform-origin: top left（GPU 合成，流畅）
• 注意：transform 不改变布局尺寸——滚动容器宽度需按 zoomLevel 补偿（scrollWidth = base * zoom）

2. 连线重绘优化

• 现状：ConnectionLines 对 props.connections deep watch + 节点坐标重算（全量重绘）
• 改：重绘节流（rAF 合并：拖拽/缩放连续变化时只每帧一次）+ 节点坐标缓存（层内节点未变不重算）+ 连线 path 计算只在节点/连接变化时执行

3. 目标卡片渲染

• 大量 KPI 行渲染优化（v-memo / 减少响应式依赖）——如层内目标多时

四、验收标准（铁律七）

• 田字格 2×2 布局生效（四层两行两列，BSC 顺序保留）
• 跨层拖拽：财务↔学习 拖拽距离明显缩短（对比旧布局）
• 拖拽辅助：拖起时合法目标高亮、反方向灰显、吸附生效
• 连接面板可打开并创建连线（非拖拽方式）
• 性能：zoom 缩放流畅（transform 生效，无整页重排）；连线拖拽中不卡顿（rAF 节流）
• 原有功能不回归：目标增删改、连线增删、版本快照、发布
• pytest + 构建部署

五、实施范围（全栈Bot）

• 前端：MapCanvas.vue（布局容器/zoom transform）、StrategyLayer.vue（卡片布局适配）、ConnectionLines.vue（重绘节流/坐标缓存）、新增连接面板组件、工具条加"连接管理"
• 不涉及后端（纯前端改版）