# Video Sync Multi-Session · M3 Walkthrough Fix · 2026-05-20

> 接力 `2026-05-20-video-sync-next-session-pickup.md` backlog 🔴 (b) M3 design walkthrough 修复。

## 范围

M3 frame `4165:950` 主交付 + **Route/Dropdown 格式同步到 M0/M1/M2/M4/PlanB 全 5 帧**（最终 17 routes + 4 dropdowns 全量统一）。
其它 M3-only fix（dividers / delta 字号 bump）仍未跨帧同步——留待 backlog (d) `MicroApp Video Sync Session Row` file-local component 抽出后再统一。

## 4 项修复

| # | 用户原 feedback | 决策 | 落点 |
|---|---|---|---|
| 1 | session 间区分太弱（1px divider 偏弱） | **加 5 条 1px Deep Divider Rectangle** 在 session-list `4165:958` 之间（rows 之间 + add-session 前），FILL horizontal，`#353535` | 5 个 created rectangles + session-list children 6 → 11 |
| 2 | 顶 168 + 底 168 dead space 是否合理 | **保留 §5.5 hard rule 不改** — panel 垂直居中 y=232 (`64 + (1016-680)/2`) 是 MICROAPPS_PRODUCT_CONTEXT.md §5.5 硬规则结果；用户认可 | 无改动 |
| 3 | Delta 22px Mono 视觉权重不够 | **数字字号 22 → 28，ms 12 → 14**（保守不引新视觉 primitive） | Row 1 delta `4165:970` + Row 2 delta `4165:985` 各 2 处 TEXT |
| 4 | Slot>Ch + sync icon + Slot>Ch 双 stream 表达不显式 | **加 A:/B: 前缀**（Roboto Medium 12px BRAND 绿）；A/B 之间已是 `icon/file/synced` 双向同步图标保持不变；不用 Mono 字体（按用户设计规范字体要求） | Row 1/2/3/4 route 各 prepend `A:` + 插入 `B:` 共 8 个 created TEXT |
| 4-followup | Slot/Ch 格式应紧凑 `Slot N/Ch X-X`（用 `/` 替代 `Slot N` + chevron + `Ch X-X` 三节点结构） | **删 `icon/Arrow/Next` chevron + `Ch X-X` text 节点**（A 边 + B 边各一对，4 routes × 2 边 × 2 节点 = 16 个 removed）；**`Slot N` text 改写为 merged `Slot N/Ch X-X`**（8 个 mutated TEXT，Roboto Regular 12px Text_2 `#CCCCCC`） | 同上 4 routes |

## 同 session 增量回流：Selected indicator rail token-aligned

**用户追加 feedback**：当前 selected Active 边框 3px 不在设计系统 Token 变量集内，应该 4px (= `--sp-xxs`)。

| 改动 | Node | Before | After |
|---|---|---|---|
| M0 rail | `4139:1626` | strokeLeftWeight=3 | 4 |
| M1 rail | `4122:162`  | 4（已是） | 4（保持） |
| M2 rail | `4139:1354` | strokeLeftWeight=3 | 4 |
| M3 rail | `4165:1450` | strokeLeftWeight=3 | 4 |
| M4 rail | `4210:1724` | strokeLeftWeight=3 | 4 |
| Design Rules card EN | `4166:1247` | "(3px)" | "(4px)" |
| Design Rules card ZH | `4166:1248` | "(3px)" | "(4px)" |

**真源回流**（同步 commit tvu-design-system repo）：
- `docs/internal/mockup-conventions.md` M38：3px → 4px + cite `--sp-xxs` token + 加反例条「rail 宽度用 3px 等 off-token magic number」+ Acceptance 一条「rail 宽度必从 Spacing token 取」+ 实证段加 2026-05-20 v8 entry
- `docs/internal/code-conventions.md` R19：CSS spec `border-left: 3px` → `border-left: var(--sp-xxs)` + 加禁止条 off-token magic number

## Cardinality self-check 通过

| 问 | 答 |
|---|---|
| element transient/persistent? | M3 row dividers 都 persistent；A:/B: label persistent；delta values persistent |
| state count? | n/a（视觉权重 / 分隔 / 标签都是 single-state） |
| 历史 visibility? | n/a |
| cardinality? | 1 divider per row-gap (5 处)；1 A: + 1 B: per route (4 routes = 8 labels)；2 TEXT bumped per delta (2 deltas) |
| parent switch? | n/a |

## Layout 验证

| 容器 | 改动前 | 改动后 | 状态 |
|---|---|---|---|
| session-list `4165:958` | FIXED 1168×575，children 6 个 sum=528 | FIXED 1168×575，children 11 个 sum=533 | 无 overflow（仍 42px 剩余空间） |
| LEFT panel `4165:952` | FIXED 1168×680 | unchanged | OK |
| M3 frame | 1920×1080 | unchanged | OK |
| Section `4119:198` | 4560×2400 (per v7 fit) | unchanged | 不需 re-fit |

## Route/Dropdown 跨帧同步（追加交付）

用户后续 feedback：A:/B: 用 BRAND 绿稀释品牌色语义（OFF session 选中态 + Tips 灰 A:/B: 才不冲突）+ Expanded dropdown 仍是 `Slot N > Ch X-X (Stereo)` 旧格式。

| 改动 | 落点 | 数量 |
|---|---|---|
| Collapsed route: 删 `icon/Arrow/Next` chevron + `Ch X-X` text，合并 Slot text 为 `Slot N/Ch X-X` | 17 routes × 4 nodes removed + 2 mutated | 68 removed + 34 mutated |
| Collapsed route: 加 weak `A:` / `B:` label（Roboto Regular 12 Tips `#9E9E9E`）替代原 BRAND Medium | 17 routes × 2 inserted | 34 created |
| Expanded dropdown text `Slot N > Ch X-X (Stereo)` → `Slot N/Ch X-X` | M0 expand panel (2) + M2 (2) + M3 (2) = 6 dropdown texts | 6 mutated |

**Frames 覆盖**：M0 `4139:1376` (1 route + 2 dropdowns) / M1 `4119:199` (4 routes) / M2 `4139:988` (4 routes + 2 dropdowns) / M3 `4165:950` (4 routes + 2 dropdowns 已先行交付) / M4 `4210:1715` (4 routes) / PlanB `4186:1478` (4 routes)。

## Route 最终格式

```
A: Slot 3/Ch 1-2   [icon/file/synced]   B: Slot 7/Ch 1-2
```

- A: / B: = **Roboto Regular 12px Tips `#9E9E9E`**（弱化版，不与 BRAND state pill 抢注意力 / 不稀释品牌色语义）
- Slot N/Ch X-X = Roboto Regular 12px Text_2 `#CCCCCC`（紧凑，无 chevron 分隔）
- 中间 icon/file/synced = TVU library 双向同步图标（保留 BLUE tint）
- Expanded panel dropdown 同样用 `Slot N/Ch X-X` 紧凑格式（去掉旧的 ` > ` chevron + `(Stereo)` suffix）

## 视觉层级翻转（追加交付）

**Walkthrough miss 自审**：原 design 把 session **name** 当主标题（14 White Medium），把 **Slot/Ch source→dest 信号** 当次要 meta（12 Tips grey）——**主次颠倒**。Operator 真正盯的是"哪个 slot 的音频在跟哪个 slot 同步"，不是"叫什么名字"。

| 元素 | 改动前 | 改动后 |
|---|---|---|
| Session 标题 | `Premier_League_Main` Roboto Medium 14 White | `Sync session #N` Roboto Regular 14 Tips `#9E9E9E`（弱化） |
| Slot/Ch route 文字 | Roboto Regular 12 Text_2 `#CCCCCC` | **Roboto Medium 14 White `#FFFFFF`**（升级主视觉） |
| A:/B: prefix | 同上次（Tips grey Regular 12 弱化） | 不变 |
| RIGHT Parameters header binding | `Parameters · Premier_League_Main` | `Parameters · Sync session #N`（跟选中行同步） |
| Dividers + delta 字号 bump | M3 only | **已批量同步到 M0/M1/M2/M4/PlanB**（21 dividers + 16 delta TEXT mutations） |

**数量**：26 name TEXT + 42 slot-ch TEXT + 6 Parameters header = **74 mutations** across 5 frames。

**决策出处**：用户原话"Session 名字不关键，直接用序号标记是不是也可以？重点是当前使用的是哪个 Slot 的哪个音频轨道，看起来需要调整视觉显示重点了"——明确说重点是 Slot 信号，name 可换序号。

**Walkthrough miss 根因 + 回流候选**：原 walkthrough checklist 只 audit "现有元素的视觉权重"，没 audit "信息层级是否匹配用户 task model"。**回流候选规则**（待评估）：mockup walkthrough 必跑"task model alignment audit"——列出 operator 实际 task 的 top-3 信号查询，对比设计中 visual hierarchy top-3 权重，不匹配视为违规。

## Empty-state 决策（追加）

**判定：0-session state 不存在**——PP 自动 bootstrap Session #1。用户不从 0 开始，Empty State frame 取消。

| 决策 | 说明 |
|---|---|
| PP 创建/首次进入 | 系统自动创建 Session #1（OFF state，slot/ch 待用户配置） |
| List 最小展示 | 1 OFF row `Sync session #1 · Never started · — · select source and destination` + `+ Add another sync session` placeholder |
| 用户首次体验 | 直接看到 1 个空配置 row 等待编辑，无 onboarding empty state hint |

Figma：本 session 临时建过的 M5 Empty State frame + 对应 chip + connector 已删除。

## 仍 pending（pickup doc backlog 状态更新）

- 🔴 (a) Toast — **用户已手动调整结构**，不在本 session 范围
- 🔴 (b) M3 walkthrough — ✅ **本文件交付**
- 🔴 (c) M4 section auto-fit — Toast 手动改完后如有 bounds 漂移再 fit，本 session 未触发
- 🟠 (d) File-local component 抽出（M36/R17）— 抽出后才能把跨帧 fix 一键同步；**deferred 到下个 session 专注做**
- ~~🟠 (e) Empty state frame (0 session)~~ **取消** — PP 自动 bootstrap Session #1，0-session 不存在
- 🟢 (f) 3 条真源回流（本 session 进行中）

## Files

- Figma file: `Micro-Apps-20250923` (`DtZcMkhNy6qh6jbQQnhreQ`)
- Target page: `4083:8424` ([link](https://www.figma.com/design/DtZcMkhNy6qh6jbQQnhreQ/Micro-Apps-20250923?node-id=4083-8424))
- M3 frame: `4165:950` ([link](https://www.figma.com/design/DtZcMkhNy6qh6jbQQnhreQ/Micro-Apps-20250923?node-id=4165-950))
- Pickup doc: `docs/2026-05-20-video-sync-next-session-pickup.md`
- Real-source rule updates: `tvu-design-system/docs/internal/{mockup-conventions.md M38, code-conventions.md R19}`