# Plan B Figma Mockup — 新 Session 起手 Prompt

把下面整段复制到一个**新 Claude Code session 的第一条消息**里。新 session 会基于此 prompt 在 Figma 里画完整 Plan B 的效果图 + UX 标注，用于与 Plan A 对比。

---

## 一键复制内容

```
继续 MicroApps Console 项目，本 session 任务：**在 Figma 里画一套 Plan B 效果图 + UX 流程标注**，与 Plan A 并列展示给 PM / 设计师 / 开发对比。

## 背景

MicroApps Console 已经有 Plan A（卡片堆叠式 Master Console，每张 App Card 内嵌 session 表）的完整 Figma 设计稿。但 Plan A 在 session 数量很多的场景下不友好：
- 8 个 App 全部展开后页面无限拉长
- 跨 App 查看时需要反复滚动
- Session 多于 5-10 条时单卡内部分页/滚动体验差

为此设计了 Plan B 作为对比方案：**左侧 Sidebar（App 导航）+ 右侧主面板（Overview 或 Session 表）**。Plan B 已经有完整的 Vue SFC 实现，可双击打开看效果，是设计真源。

## 起手必读

按以下顺序读完后再开工：

1. `tvu-design-system/AGENTS.md` — TVU 跨工具入口
2. `tvu-design-system/docs/internal/code-conventions.md` — R1-R5（图标/token/canonical/不先实现/handoff）
3. `tvu-design-system/docs/internal/mockup-conventions.md` — M1-M20 Figma mockup 规则
4. `MicroApps Console/docs/MICROAPPS_PRODUCT_CONTEXT.md` — 产品模型 + 角色矩阵
5. **`MicroApps Console/docs/2026-05-13-plan-b-spec.md`** — Plan B 完整设计规范（本任务的核心真源）

## Plan B Vue 实现可参考（看实际效果）

- `MicroApps Console/vue-app/` — Vite + Vue 3 SFC 项目
- `MicroApps Console/vue-app/dist/index.html` — 单文件 build 产物，浏览器打开即可看完整效果
- `MicroApps Console/microapps-console-planb.html` — 同上副本（PM 分发版）
- 同目录还有 `microapps-console-demo.html` 是 Plan A，可对照看差异

## 任务目标

在用户提供的 Figma section URL 下，画 Plan B 的核心效果图 + UX 流程标注。**只考虑 1920 宽度**，不做 1440 / 响应式版本（Plan A 已经覆盖了响应式，Plan B 只为概念对比）。

### 用户会提供的 Figma section URL

用户在 prompt 之后会贴一个 Figma section 链接（形如 `https://figma.com/design/DtZcMkhNy6qh6jbQQnhreQ/...?node-id=XXX-YYY`），表示画到这个 section 里面，不要污染其他 section。**在用户提供链接前不要动 Figma 文件**，先把 spec 读完、问清楚需求再动手。

### 必须产出的 Frame（至少 4 个，1920 宽）

| Frame 名称建议 | 状态 |
|---|---|
| `Plan B · All Sessions · Overview / 1920` | admin 进入默认态：sidebar Overview 选中 + 右侧 8 张 App 概览卡 + 顶部 4 个聚合状态 chip |
| `Plan B · All Sessions · App Detail (AV Sync) / 1920` | admin 选中某 App：sidebar AV Sync 高亮 + 右侧 session table（包含数据行、状态 chip filter、分页等）|
| `Plan B · My Sessions · Overview / 1920` | my-sessions 默认态：persona chip = john.doe@tvu.tv + Overview |
| `Plan B · My Sessions · App Detail / 1920` | my-sessions 选中某 App + `+ New Session` 按钮（per-app 入口）|

### 加分项（可选）

- `Plan B · My Sessions · SCTE Insertion (Empty State A-my) / 1920` — 展示新 empty state 设计
- `Plan B · Sidebar Collapsed / 1920` — 折叠态展示
- `Plan B · Confirm Stop Dialog / 1920` — 确认弹窗

## 必须复用的现有库 / 组件

**TVU 公共组件**：
- TVU Top Bar（含 logo + product name + 右侧 cluster：时区时钟 / 通知 / 头像 / 九宫格）
- 各类 icon / Button / Input / Dropdown 已有 component

**MicroApps file-local 组件**（在 `Micro-Apps-20250923` 文件里已建）：
- APP Icons（`3:14402` 的 8 个 Color=Green variants）— 直接 import 实例用
- MicroApp State Pill（4 status）
- MicroApp Counter Pill（4 status）
- MicroApp Action Cluster (Bidirectional / Analyzer / Generator)
- MicroApp Card Header — Plan A 用，Plan B **不复用**（Plan B 没有 Card）

## 需要新建的 Plan B 专属 file-local 组件

如果 Figma 文件里还没有，请按需新建（命名建议加 `MicroApp PlanB ` 前缀以区分）：

1. **MicroApp PlanB Sidebar**
   - Variants: `State=Expanded / Collapsed`
   - Expanded 280px / Collapsed 56px
   - 含 toggle (icon-only 28×28) + Overview 行 + divider + 8 个 App 行

2. **MicroApp PlanB Sidebar Item**
   - Variants: `State=Default / Hover / Active`，`Collapsed=true / false`
   - 含 icon + name + count badge（active 时绿色，0 时灰色）

3. **MicroApp PlanB Aggregate Counter Chip**
   - Variants: `Status=On-air / Preview / Analyzing / Inactive`
   - 颜色对应 status token

4. **MicroApp PlanB Overview Card**
   - Variants: `State=Has-sessions / Empty`
   - 含 app icon + name + active badge + 4 色状态条 + 健康摘要

5. **MicroApp PlanB AutoRefresh Widget**
   - Variants: `State=Running / Paused / Off`
   - 含 pulsing live-dot + `Refresh in Xs` 数字主信息（monospace + brand 绿）+ pause/play + 间隔下拉 + 底部 2px progress 细线
   - **与 Plan A 的 Auto-refresh Widget 不同**：Plan A 是纯文字 `Live · 30s`，Plan B 强调数字倒计时

6. **MicroApp PlanB Persona Chip**
   - Variants: `Type=Admin / User`
   - Admin: 蓝色 pill `Admin · All Users`
   - User: 绿色 pill 显示 email

7. **MicroApp PlanB Empty State**
   - Variants: `Kind=No-sessions / Filtered-empty / Platform-empty / User-no-own`
   - 含 64×64 软圆形 icon 背景 + 标题 + 副标题 + 可选 action button

8. **MicroApp PlanB Pagination**
   - 含 `X-Y of Z` 文字 + prev / next + `current / total` + page size 下拉

## 必须加的 UX 标注（📌 frame，与 Plan A 同风格）

放在 Plan B section 内合适位置，用 connector 拉到对应 frame 节点：

1. **📌 Plan A vs Plan B — When to Use Which**
   - 触发条件对比：< 5 sessions per App → Plan A；> 10 per App 或多 App 频繁切 → Plan B
   - 这是给 PM / 设计师讲故事的重点

2. **📌 Page Structure**
   - 4 层：Topbar / Sub-header / Sidebar / Main panel
   - 各层职责说明

3. **📌 Persona Differentiation (5 处差异)**
   - 顶栏 tab 高亮
   - Sub-header persona chip 颜色
   - Sub-header 底边 accent
   - Search placeholder
   - 数据 scope + `+ New Session` 按钮可见性

4. **📌 Sidebar Collapse 行为**
   - localStorage 持久化
   - 折叠后 tooltip 弹向右侧（避免被裁）
   - 活跃数 badge → 折叠态变绿色小圆点

5. **📌 + New Session 作用域**
   - Overview 视图：sub-header 按钮 → 弹 App picker
   - App 视图：SessionTable filter bar 按钮（per-app）
   - All Sessions 完全不显示（admin 只读）

6. **📌 AutoRefresh Widget — Plan A vs Plan B 差异**
   - Plan A：文字 `Live · 30s`，简单
   - Plan B：脉冲 dot + 数字倒计时主信息 + 进度细线（监控控制台更直观）

7. **📌 Pagination 替代 Scroll 的原因**
   - Plan A：Card 内 scroll 触发 lazy load
   - Plan B：去掉滚动，用分页（每页默认 15 条）
   - 解决了 tooltip 被 scroll 容器 overflow 裁切的问题

8. **📌 Empty States 5 个场景**
   - A-admin / A-my / B / C / D 文案 + icon + action 矩阵
   - 强调 `i-empty-tray`（被动）vs `i-search`（过滤）vs `i-add`（创建）的图标语义

9. **📌 Aggregate Status Counters in Overview**
   - 4 个 chip 跨所有 App 聚合活跃数
   - 与 SessionTable 内部的 status filter chip 视觉一致

## 重要约束

- **只画 1920 宽度**，不做 1440
- **遵守 TVU Topbar 公共组件规则**：左右两侧固定不可改，只有中间菜单变
- **真源是 Vue 项目 + spec 文档**，不要凭记忆/猜测，遇到不确定的细节直接读源文件
- **使用 figma-use skill** 时遵守 mockup-conventions M1-M20
- **不要碰 Plan A 已有的 frame** — Plan B 是并列方案，单独建 section
- **如果用户提供的 section 内已有内容**，先 list 出来给用户确认是否清理 / 在哪里下笔

## 第一步建议

1. 读完上面 5 个起手文档（重点 §10 Empty States / §11 Tooltip / §12 视觉 token / §15 偏离 Plan A 清单 / §17 后续工作）
2. 浏览 `vue-app/dist/index.html` 真实效果（如果有 server 在 8080 跑就 `http://localhost:8080/vue-app/dist/index.html`）
3. **问用户提供 Figma section URL**，确认要画在哪
4. 用 `get_metadata` 探查现有 Plan A 的 frame 结构，确认配色 / 命名 / 标注风格
5. 开始按 frame 优先级建：Overview 默认态 → App Detail → Empty State → Sidebar Collapsed → 标注

完成后产出：
- N 个 Plan B frame
- 9 个 UX 标注（📌）
- 必要的 file-local 组件（如未存在则新建）
- 一份简短的 handoff doc 写到 `MicroApps Console/docs/YYYY-MM-DD-plan-b-figma-handoff.md`
```

---

## 使用步骤

1. 复制上面 ``` 之间的全部内容
2. 在 Claude Code 里新开一个 session
3. 把 Figma section URL 也准备好
4. 第一条消息粘贴 prompt
5. 收到 AI 的回复后，第二条消息贴 Figma section URL（例：`Figma section: https://figma.com/design/.../?node-id=XXX-YYY`）
6. AI 会按 spec 文档逐 frame 画下去