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