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