feat(mapcanvas): 田字格2x2布局+拖拽辅助(合法高亮/灰显/吸附)+连接管理面板+zoom transform缩放+连线rAF节流

docs/mapcanvas-tianzige-redesign-20260830.md

@@ -0,0 +1,67 @@
+# 战略地图画布田字格 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（重绘节流/坐标缓存）、新增连接面板组件、工具条加"连接管理"
+- 不涉及后端（纯前端改版）