# Plan B Figma — M23 完整化 pickup prompt（新 Session 用）

把下面整段贴到新 Claude Code session 第一条消息。

---

## 一键复制

```
@TVU mockup 继续 MicroApps Console 项目 Plan B Figma 的 M23 完整化收尾。

## 当前状态（前一 session 留下）

Figma 文件 `Micro-Apps-20250923` (key `DtZcMkhNy6qh6jbQQnhreQ`)
Section `Plan B: Pagination Support` (id `3668:84170`)，位置 (-839, 8389)，已自动撑宽到 13332。

Section 内现有内容（已用 `figma.getNodeByIdAsync` 验证）：
- 6 frames（全部 y=1108 section-local 一行紧贴排列）：
  - `3709:5152` Plan B · All Sessions · Overview / 1920 (x=632, w=1920, h=1080)
  - `3766:5776` Plan B · All Sessions · App Detail (AV Sync) / 1920 (x=2712, h=1460)
  - `3772:6270` Plan B · My Sessions · Overview / 1920 (x=4792, h=1460)
  - `3776:6867` Plan B · My Sessions · App Detail (AV Sync) / 1920 (x=6872, h=1460)
  - `3778:7322` Plan B · My Sessions · SCTE Insertion (Empty A-my) / 1920 (x=8952, h=1460)
  - `3797:7520` Plan B · All Sessions · SCTE Insertion (Empty A-admin) / 1920 (x=11116, h=1460)
- 3 个标注行（已建完 navy chip card 主体，但**缺 connectors + state groups**）：
  - `3782:7527` 📌 Annotations Row 1 (#1-#3) 在 y=3270
  - `3783:7527` 📌 Annotations Row 2 (#4-#6) 在 y=3701
  - `3784:7527` 📌 Annotations Row 3 (#7-#9) 在 y=4181

## 真源（先读）

按顺序读完：
1. `tvu-design-system/AGENTS.md`
2. `tvu-design-system/docs/internal/mockup-conventions.md`（**特别注意 M23 + 新增的 M24/M25/M26**）
3. `tvu-design-system/docs/internal/figma-technical-reference.md`（**特别注意 Q6 箭头手画 + Q7 嵌套 instance opacity**）
4. `MicroApps Console/docs/2026-05-14-plan-b-figma-handoff.md`（本次完整 handoff，含根因分析）

## 本次任务（M23 完整化）

前一 session 的 9 个 📌 标注**违反了 M23 部分要求**——只建了 navy bilingual chip 主卡，跳过了：

| 缺失项 | M23 要求 |
|---|---|
| 流程箭头 VECTOR | 每个状态转移/对比关系一条，stroke `#33A4FD` 2px，手画 arrowhead path data |
| 条件标签 GROUP `_` | 沿箭头标 transition condition（双语），navy bg + 蓝字 |
| state group GROUP `_flow-state-N` | 多状态流程（#4 Sidebar Collapse / #5 New Session scope）包裹每个 state（label chip + UI frame） |
| reconnect map | `page.setSharedPluginData('ux_annotation', '<feature>_reconnect_map', JSON)` 写入箭头坐标 |
| 内容空间 | 当前 frames 紧贴 0 间距，无法布 connector → 需要扩 frame 间距到能容纳连线 |

## 必做工作（按顺序）

### Step 1: 扩 frame 间距

当前 6 frames 间距 160，紧贴排列没有 connector 空间。

建议：把 frames 间距扩到 800-1000，使每两个 frame 之间留 1 个 annotation card 空间（620 宽 + padding）。或者把 annotations 移到 frames **之间**的纵向条带里：

```
[Frame 1] [ann group] [Frame 2] [ann group] [Frame 3] ... 
```

但这会让总宽巨大（6×1920 + 5×800 + 6×annotation = ~17000）。

**替代方案**（推荐）：保持 frames 1 行，把 annotations 放到 frames **下方对应的列**里，每个标注紧贴所标 frame 下方，connector 从 frame 内目标元素垂直拉到标注卡。让 frames y 不动（y=1108），annotations y 从 2800 起（frame 1 底 +200 gap），按所标 frame 的 x 列放。

举例：
- 📌#1 Plan A vs B → 跨 frame 全局叙事 → 放最左（x=632）下方
- 📌#2 Page Structure → 拉 4 个 connector 到 Frame 1 的 Topbar / Sub-header / Sidebar / Main panel
- 📌#3 Persona Differentiation → Frame 1 (Admin) ↔ Frame 3 (User) 之间拉连线
- 📌#4 Sidebar Collapse → 需要建 state group GROUP（Frame 1 sidebar expanded + 借 Frame 2 / 5 截图建 collapsed state）
- 📌#5 New Session scope → 拉 connector 到 Frame 3 sub-header `+ New Session` + Frame 4 filter bar `+ New Session` + Frame 1 (没按钮，标 ✗)
- 📌#6 AutoRefresh A vs B → 拉 connector 到 Frame 1 AutoRefresh widget
- 📌#7 Pagination → 拉 connector 到 Frame 2 filter bar Pagination
- 📌#8 Empty States → 拉 connector 到 Frame 5 (A-my) + Frame 6 (A-admin)（已有的 empty 卡片 + 缺 B/C/D mini variants）
- 📌#9 Aggregate Counters → 拉 connector 到 Frame 1 main header 4 个 Counter Pill

### Step 2: 为每个 📌 加 VECTOR connector + condition label GROUP

技术参考 Q6：

```js
const vec = figma.createVector();
const len = x2 - x1;
const AH = 8;
vec.vectorPaths = [{ windingRule:'EVENODD',
  data: `M 0 ${AH} L ${len-AH} ${AH} M ${len-AH*2} 0 L ${len} ${AH} L ${len-AH*2} ${AH*2}` }];
vec.x = x1;  // canvas absolute coord
vec.y = y1;
vec.strokes = [{ type:'SOLID', color:{r:0x33/255,g:0xa4/255,b:0xfd/255} }];
vec.strokeWeight = 2;
page.appendChild(vec); // 或者 section.appendChild(vec)
```

condition label GROUP（注意 RECTANGLE 在 children index 0，TEXT 在 index 1）：

```js
const rect = figma.createRectangle();
rect.resize(120, 24);
rect.cornerRadius = 4;
rect.fills = [{ type:'SOLID', color:{r:0x2b/255,g:0x2d/255,b:0x42/255} }];

const txt = figma.createText();
txt.fontName = { family: "Roboto", style: "Medium" };
txt.fontSize = 11;
txt.characters = "click toggle  点击折叠"; // bilingual inline
txt.fills = [{ type:'SOLID', color:{r:0x33/255,g:0xa4/255,b:0xfd/255} }];
// 设 ZH range opacity 0.45 per M23

const grp = figma.group([rect, txt], section);
grp.name = '_'; // GROUP 不显示 name label
```

### Step 3: 多状态流程图（#4 + #5）需要 state group GROUP

每个 state = `_flow-state-N` 包裹（label chip + UI mini-frame）。
N 个 state + N-1 arrows 串联 + 各 arrow 上 condition label。

#4 Sidebar Collapse: state 1 = Expanded screenshot of Sidebar (从 Frame 1 借) / state 2 = Collapsed (建一个新的 Sidebar Collapsed 实例) + 来回箭头标 `click toggle`。

#5 New Session: state 1 = Overview 视图 + button shown / state 2 = App picker dropdown / state 3 = navigate to App Detail + button moved。

### Step 4: 写 reconnect map

每个 📌 完成后写入 `page.setSharedPluginData('ux_annotation', '<feature>_reconnect_map', JSON)`，记录所有 arrow 的 from/to + label。

JSON schema 见 mockup-conventions.md M23 §Reconnect map。

### Step 5: 验证

probe：
- 每个 VECTOR 是否有 vectorPaths data
- 每个 condition label 是 GROUP 不是 FRAME
- 每个 state group GROUP name 是 `_flow-state-N`
- ZH 文字 opacity 0.45 + Noto Sans SC 字体（per M23 §双语支持 + 实证脚本）
- sharedPluginData 是否写入（per page.getSharedPluginData 验证）

最后截图 section 全景验收。

## 重要约束

- **不要破坏 frames + annotation cards 当前内容**——只添加 connectors + state groups + 调整 annotation 位置
- 所有 connectors 必须**在 section 内部**（per 前次约定 "跨 frame 可，跨 section 不可"）
- 连接 frames + annotations 时确保 connector 起止坐标准确（probe 目标 frame 内目标元素的绝对坐标后再画）
- 完成后更新 `MicroApps Console/docs/2026-05-14-plan-b-figma-handoff.md` 把"M23 connectors 缺失" 标记为已修复
- append ledger 一行到 `tvu-design-system/docs/internal/_metrics/phase0-ledger.md` 记录此 retrofit task

## 起手 5 min 任务

1. probe section + 6 frames + 3 annotation rows 的当前坐标
2. 决定 annotation 重排策略（贴近所标 frame 列 vs frames 中间纵向条带）问 user 确认
3. 从最简单的 📌#9 Aggregate Counter (4 connectors 直接拉到 Frame 1 chips) 开始建第一个 connector，验证 VECTOR + condition label GROUP + reconnect map 整套链路工作
4. 验证 OK 后批量做剩下 8 个
```

---

## 使用步骤

1. 复制上面 ``` 之间的整段
2. 新开 Claude Code session
3. cd 到 `MicroApps Console/`
4. 第一条消息粘贴 prompt
5. 新 session 会按 M23 完整化方式补完 connectors + state groups + reconnect map

## 本 session 实际产出（已完成的 ✅）

- 6 frames（1920 宽）：Plan B 全部 6 个 mockup
- 8 file-local 组件 + 复用 Plan A 6 个 file-local + TVU library 多个组件
- 9 navy bilingual annotation cards（**主卡完整**，**connectors 缺失**）
- 库知识反哺：`icon/Preview/{4,9,6,1,25,List,grid view,Layout,sidebar}` + `UX/Brand/Hover` + `Brand/Disable` + 状态色 Hover variants 全部登记到 catalog
- 3 个新 M-rule (M24/M25/M26) + 1 个新 Q-rule (Q7) 写入 TVU 设计规范
- 完整 handoff doc：`docs/2026-05-14-plan-b-figma-handoff.md`
- Ledger entry：`tvu-design-system/docs/internal/_metrics/phase0-ledger.md`

## 本 session 已知遗留 (待新 session 处理)

- ❌ 9 个 📌 标注的 VECTOR connectors
- ❌ #4 + #5 多状态流程图的 `_flow-state-N` GROUP
- ❌ 沿 connectors 的条件标签 `_` GROUP
- ❌ sharedPluginData reconnect map
- ❌ Frames + annotations 重排（让 connector 有空间）

---

## 2026-05-14 retrofit session 闭环 ✅

所有上述遗留全部修复（采用 Option A 列分配 + F1 纵向堆叠策略）：

- ✅ 18 VECTOR connectors（手画 arrowhead per Q6）：
  - 📌#2 4 layer arrows（TopBar/Sub-header/Sidebar/Main panel）
  - 📌#3 2 diagonal arrows（F1 Admin chip ↔ F3 User chip）
  - 📌#4 1 internal state arrow（state-1 → state-2）
  - 📌#5 3 diagonal arrows（F1 hidden / F3 sub-header / F4 filter bar）
  - 📌#6 1 vertical arrow（F1 AutoRefresh widget）
  - 📌#7 1 vertical arrow（F2 Pagination control）
  - 📌#8 2 diagonal arrows（F5 + F6 Empty State）
  - 📌#9 4 vertical arrows（F1 Counter pills × 4）
  - 📌#1 standalone global summary, 无 connectors（intentional）
- ✅ 2 state-group GROUPs `_flow-state-1` / `_flow-state-2`（for 📌#4 Sidebar Collapse）
- ✅ 4 condition label GROUPs `_` bilingual（1 for #4 "click toggle 点击切换" + 3 for #5 三种 scope）
- ✅ Reconnect map JSON 9363 bytes 写入 page sharedPluginData（ns=`ux_annotation`, key=`plan_b_reconnect_map`）
- ✅ 9 annotations 重排到 frame 列下方对应位置；3 个 row 容器已删除（reset 后 section 39 children = 15 FRAMES + 18 VECTORs + 6 GROUPs）

验收：6 ZH ranges 全部 Noto Sans SC @ 9px opacity≈0.45 + EN Roboto Medium @ 11px @ `#33A4FD` ✓。所有 connector 严格在 Plan B section (`3668:84170`) 内部 ✓。Ledger 已 append。