# Mediahub — Session Handoff (2026-07-16)

## 1. Context

Mediahub 是 TVU UX Design System 的消费产品（consumer of TVU library，fileKey `BvqvqRXPEBlWFbl1jOC6mh` / MH-2026）。本次任务是 Jira [MH-3263](https://tvunetworks.atlassian.net/browse/MH-3263) "MediaHub: detect unsupported browsers and warn users (recommend Chrome, allow continue)"——检测非 Chromium 浏览器（Safari/Firefox 等），弹出提示建议切换 Chrome，同时允许用户继续使用（不硬拦截）。

## 2. 必读 onboarding 顺序

1. `../tvu-design-system/AGENTS.md`（跨 AI 工具协作硬规则）
2. `../tvu-design-system/docs/internal/mockup-conventions.md`（M0/M1/M-COLOR/M23/M32/M35 等）
3. `../tvu-design-system/docs/internal/figma-component-catalog.md` §Notification（含本次新增的 footer detachInstance gotcha）
4. 本 handoff 文档
5. Jira MH-3263（完整 requirements/acceptance criteria 已写在 ticket 里，等同 PRD）

## 3. Current State

**Figma 文件**：`BvqvqRXPEBlWFbl1jOC6mh`（MH-2026），页面 `MH-3263 MediaHub: detect unsupported browsers and warn users`（page nodeId `1967:1548`，本次任务新建，此前是空页）

**已落实产物**（2 个 SECTION，共 4 个 1920×1080 frame）：

| Section | Frame | node-id | 说明 |
|---|---|---|---|
| MH-3263 — Unsupported Browser Interstitial | Interstitial — EN | `1971:3257` | 全屏 scrim + 模糊 app 背景 + 居中警告卡片（英文） |
| 同上 | Interstitial — 中文 | `1977:120` | 同上，中文文案 |
| MH-3263 — Persistent Warning Bar (Post-Continue) | Persistent Bar — EN | `1978:1690` | 顶栏下方常驻细条提示（英文） |
| 同上 | Persistent Bar — 中文 | `1980:281` | 同上，中文文案 |

### Interstitial（不支持浏览器时的全屏拦截层）

- 背景：Top bar（After Login variant）+ 4 个占位卡片代表产品内容，`LAYER_BLUR radius=16` 模糊 + 60% 黑色 scrim 提亮层
- 卡片：复用 TVU library `Notification`（`theme=dark, form=dialog, type=warning`），标题/正文改写为浏览器警告文案，移除默认 close X（这是强制性提示，不给"叉掉"的逃生口，只有"Copy Link" / "Continue anyway" 两条出路）
- Footer 改造（**detachInstance() 后**才能改，见下方 §4 gap 1）：
  - Primary：`Button/dark M`（style=filling, color=green, fixed width=no）"Copy Link to Open in Chrome" / "复制链接，在 Chrome 中打开"
  - Secondary：纯文字下划线链接 "Don't have Chrome? Download it" / "还没有 Chrome？点击下载"（`Text/Tips` token 色）
  - Tertiary（弱化）：纯文字下划线链接 "Continue in Safari anyway" / "仍然继续使用 Safari"（`Text/Placeholder & Button` token 色，字号更小）
- 卡片宽度 560px（比 Notification 默认 480px 宽，给 footer 文字留够余量，避免临界宽度导致的次像素裁切）

### Persistent Bar（选择"继续使用"后的常驻提示条）

- Top bar 下方一条自建的通栏（`Color Type/Background/Layer_4` 背景 + 底部 1px `Line/Light Divider`）：warning 图标 + "You're using Safari — some features may not work as expected." / "您正在使用 Safari — 部分功能可能无法正常使用。" + "Get Chrome" / "获取 Chrome" 链接（brand green）+ 右侧关闭 X（`icon/Edit/Close`）
- 通栏下方是**未模糊、未变暗**的正常 app 占位内容，表达"应用可以正常使用，只是有条提示"

## 4. 已知 gap（按严重度排序）

| Gap | 严重度 | 解决路径 |
|---|---|---|
| Persistent 全宽通栏在 TVU library 里没有对应组件（`Notification` 只有 480px dialog/alert 和 320px slide 两种尺寸，没有 full-width top-strip 形态）——本次自建 | 🟡 | 已标记入库候选，回填到 `figma-component-catalog.md` 供下次复用；若产品侧确认这个模式会复用（版本升级提示 / 维护通知等），建议设计师在库里补一个正式组件 |
| `Notification` 默认 footer（Cancel+Confirm）不是 slot，无法直接增删子节点（`.remove()` 会抛 `Removing this node is not allowed`）——本次通过 `detachInstance()` 把顶层 instance 转成可编辑 frame 后才能重排 footer | 🟢 informational | 已回填 gotcha 到 `figma-component-catalog.md` §Notification，下次改 footer 组合直接照做，不用重新踩坑 |
| Chrome/Edge（受支持浏览器）正常态没有画对应 frame——这个状态就是现有产品本身、无变化，讨论后判定不需要额外产出 | — | 若后续需要完整状态走查图（M23 多状态流程图），可以补一版，不在本次范围内 |
| 浏览器身份用纯文字（"Safari" / "Firefox"）表达，没有画浏览器官方 logo——TVU library 里没有第三方浏览器图标，且自画品牌 logo 涉及版权/一致性风险 | — informational | 如果产品侧希望用图标，需要设计师单独提供/引入浏览器 logo 素材，不建议 AI 自造 |

## 5. 下一步优先级

1. **产品/工程确认文案措辞**（是否需要 user 决策：**是**）——"Copy Link to Open in Chrome" 的具体交互行为（复制到剪贴板 / 还是直接尝试用 Chrome 协议打开）需要工程侧确认技术方案，可能影响按钮文案的准确性
2. **补 Chrome/Edge 正常态说明**（是否需要 user 决策：否，纯文档性质）——如果需要完整的 F1 design-walkthrough 或交给工程 handoff，可以补一段文字说明"受支持浏览器 = 现状不变"，不需要额外 frame
3. **持久化 bar 是否需要正式入库**（是否需要 user 决策：**是**）——如果这个"顶部常驻提示条"模式未来会复用（例如版本升级提示、维护公告），建议设计师评估是否值得做成正式 library 组件而不是每次自建

## 6. Quick-start prompt

```
继续 Mediahub MH-3263 浏览器检测提示工作。
工作目录：/Users/lora/Documents/Project/Mediahub
Figma: https://www.figma.com/design/BvqvqRXPEBlWFbl1jOC6mh/MH-2026?node-id=1967-1548
按 docs/handoffs/2026-07-16-mh-3263-browser-warning-handoff.md §2 onboarding 顺序读完，然后从 §5 选一个任务起步。
```

## 7. Phase 0 ledger entry

- [x] 本任务执行了 Phase 0 mapping（8 element）→ 已 append 一行到 `tvu-design-system/docs/internal/_metrics/phase0-ledger.md`