# TVU 直播平台原型 · 设计 Spec

> 日期:2026-06-30 ｜ 形态:前端原型(留接口,可升级全栈)｜ 设计系统:TVU DS ｜ 文案:中英双语

## 1. 概述

双端直播平台前端原型:

- **TVU Live**(C 端 / 观众) — `/watch`
- **TVU Studio**(B 端 / 主播·制作) — `/studio`

同一品牌、同一 TVU 设计系统。Live 深色沉浸,Studio 深色控制台。真实流/聊天/监控数据本期用 mock,通过 service 接口层留好升级真实 API 的位置。

## 2. 范围

**本期做(MVP)**

- C 端:首页/发现、直播间、主播主页(3 页)
- B 端:总览 Dashboard、推流设置、直播管理、实时监控、多平台分发(5 页)

**不做(二期/可选)**

- 搜索、用户个人中心、送礼/弹幕娱乐化、数据分析报表、云录制回放。
- 真实推流/播放后端、真实用户系统、真实 WebSocket。

## 3. 技术栈与项目结构

- Vite + React + TypeScript。TVU 设计系统是 Vue 库,本项目**只复用其框架无关的 CSS token**(`import '@nancyzeng0210/tvu-design-system/style.css'`),基础组件按 token 自封装(用不了 TVU 的 Vue 组件)。
- `react-router`,分 `/watch`、`/studio` 两区,顶部可切换。
- 播放器:C 端优先用公开 HLS 占位流(示例 `.m3u8`)播放;若流不可用则回退为封面图 + LIVE 角标的静态展示。监控用定时器驱动的 mock 实时数据。

```
src/
├─ watch/        # C 端页面
├─ studio/       # B 端页面
├─ shared/       # DS 封装、布局、通用组件
└─ mock/
   ├─ data.ts        # 假数据:频道/直播间/聊天/监控/分发目标
   └─ services.ts    # 异步 service 接口(现 mock,将来换 fetch)
```

## 4. 数据 / 接口分层(升级全栈预留)

- `mock/data.ts`:静态假数据。
- `mock/services.ts`:`getLiveChannels()`、`getStream(id)`、`getChannel(name)`、`getMonitorMetrics()`、`getDestinations()` 等 **async 函数**,组件只依赖接口,升级时替换内部实现即可。
- 实时类(聊天、监控)用 `setInterval` 模拟推送,封装成 hook(`useChatStream`、`useMonitorStream`),将来可替换为 WebSocket。

## 5. 信息架构

```
TVU Live (C端 /watch)              TVU Studio (B端 /studio)
├─ 首页/发现   /watch              ├─ 总览 Dashboard   /studio
├─ 直播间      /watch/:id          ├─ 推流设置         /studio/stream
└─ 主播主页    /watch/c/:channel   ├─ 直播管理         /studio/broadcast
                                   ├─ 实时监控         /studio/monitor
                                   └─ 多平台分发       /studio/destinations
```

## 6. 页面功能规格

### C 端

**① 首页/发现 `/watch`**
- Banner 推荐位、"正在直播"网格(封面 + 主播 + 观看人数 + 品类标签)、分类横向滚动、热门主播。

**② 直播间 `/watch/:id`**
- 大播放器(LIVE 角标、清晰度、全屏)、右侧实时聊天、主播信息卡(头像/名称/简介/关注/订阅)、底部互动条(点赞)。

**③ 主播主页 `/watch/c/:channel`**
- 头图、简介、关注数、正在直播/离线状态、往期回放网格。

### B 端

**① 总览 Dashboard `/studio`**
- 当前直播状态卡、核心指标卡(在线人数/码率/连接健康/已直播时长)、快捷入口。

**② 推流设置 `/studio/stream`**
- RTMP/SRT 服务器地址 + 串流密钥(复制/重置)、编码配置(分辨率/码率/帧率)、协议切换。

**③ 直播管理 `/studio/broadcast`**
- 标题/封面/品类/简介编辑、开播/下播大按钮、预览窗。

**④ 实时监控 `/studio/monitor`**(重点做扎实)
- 码率实时曲线、帧率/丢帧、延迟、连接状态时间线、告警条。

**⑤ 多平台分发 `/studio/destinations`**
- 已绑定平台列表(YouTube/Twitch/Facebook/自定义 RTMP),每个开关 + 状态 + 添加目标。

## 7. 全局状态规范

- 三态:**加载**(骨架屏)、**空**(空态文案 + 插画位)、**错误**(`加载失败,请重试` / `Failed to load, retry`)。
- 实时类断连:聊天/监控显示重连提示。

## 8. 视觉

- 全程使用 TVU 设计系统 CSS token(`--brand` #2fb54e、`--sp-*`、`--radius-*`、`--text-*`、`--bg-*` 等),不硬编码颜色。基础组件(Button/Card/Badge/Switch/Input 等)按这些 token 自封装。
- 深色模式默认开启(TVU DS 默认深色);C 端深色沉浸,Studio 深色控制台,统一品牌绿点缀。

---

## 9. 双语文案库(交付核心)

> 实现时直接落到界面;`zh` 简体中文 / `en` 英文。

### 9.0 全局 / 导航

| key | zh | en |
|---|---|---|
| brand.live | TVU Live | TVU Live |
| brand.studio | TVU Studio | TVU Studio |
| nav.watch | 观看 | Watch |
| nav.studio | 创作中心 | Studio |
| nav.switchToStudio | 进入创作中心 | Go to Studio |
| nav.switchToLive | 返回观看 | Back to Watch |
| common.retry | 加载失败,请重试 | Failed to load, retry |
| common.loading | 加载中… | Loading… |
| common.empty | 暂无内容 | Nothing here yet |
| common.copy | 复制 | Copy |
| common.copied | 已复制 | Copied |
| common.save | 保存 | Save |
| common.cancel | 取消 | Cancel |
| common.confirm | 确认 | Confirm |

### 9.1 C 端 · 首页/发现

| key | zh | en |
|---|---|---|
| home.liveNow | 正在直播 | Live Now |
| home.recommended | 为你推荐 | Recommended |
| home.categories | 浏览品类 | Browse Categories |
| home.topStreamers | 热门主播 | Top Streamers |
| home.badge.live | 直播中 | LIVE |
| home.viewers | {n} 人观看 | {n} watching |
| home.viewers.10k | 1.2万人观看 | 12K watching |
| home.empty | 暂无正在直播的频道 | No live channels right now |
| home.cta.watch | 立即观看 | Watch Now |

### 9.2 C 端 · 直播间

| key | zh | en |
|---|---|---|
| room.badge.live | 直播中 | LIVE |
| room.status.streaming | 主播正在直播 | Streaming now |
| room.status.ended | 直播已结束 | Stream ended |
| room.follow | 关注 | Follow |
| room.following | 已关注 | Following |
| room.subscribe | 订阅 | Subscribe |
| room.like | 点赞 | Like |
| room.quality | 清晰度 | Quality |
| room.fullscreen | 全屏 | Fullscreen |
| room.chat.title | 聊天 | Chat |
| room.chat.placeholder | 发条弹幕… | Say something… |
| room.chat.send | 发送 | Send |
| room.chat.reconnecting | 聊天重连中… | Reconnecting chat… |
| room.about | 关于主播 | About |

### 9.3 C 端 · 主播主页

| key | zh | en |
|---|---|---|
| channel.followers | 粉丝 | Followers |
| channel.status.live | 正在直播 | Live |
| channel.status.offline | 离线 | Offline |
| channel.pastStreams | 往期回放 | Past Streams |
| channel.about | 简介 | About |
| channel.watchLive | 观看直播 | Watch Live |

### 9.4 B 端 · 总览 Dashboard

| key | zh | en |
|---|---|---|
| dash.title | 总览 | Overview |
| dash.status.onair | 直播中 | On Air |
| dash.status.offline | 未开播 | Offline |
| dash.metric.viewers | 当前在线 | Current Viewers |
| dash.metric.bitrate | 码率 | Bitrate |
| dash.metric.health | 连接健康 | Connection Health |
| dash.metric.uptime | 已直播时长 | Uptime |
| dash.quick.goLive | 去开播 | Go Live |
| dash.quick.monitor | 查看监控 | View Monitor |
| dash.quick.stream | 推流设置 | Stream Settings |

### 9.5 B 端 · 推流设置

| key | zh | en |
|---|---|---|
| stream.title | 推流设置 | Stream Settings |
| stream.protocol | 推流协议 | Protocol |
| stream.serverUrl | 服务器地址 | Server URL |
| stream.streamKey | 串流密钥 | Stream Key |
| stream.resetKey | 重置密钥 | Reset Key |
| stream.resetKey.confirm | 重置后旧密钥立即失效,确认重置? | Resetting invalidates the old key immediately. Continue? |
| stream.resolution | 分辨率 | Resolution |
| stream.bitrate | 码率 | Bitrate |
| stream.framerate | 帧率 | Frame Rate |
| stream.saved | 设置已保存 | Settings saved |

### 9.6 B 端 · 直播管理

| key | zh | en |
|---|---|---|
| bcast.title | 直播管理 | Broadcast |
| bcast.streamTitle | 直播标题 | Stream Title |
| bcast.streamTitle.placeholder | 给这场直播起个标题 | Name your stream |
| bcast.thumbnail | 上传封面 | Upload Thumbnail |
| bcast.category | 选择品类 | Select Category |
| bcast.description | 直播简介 | Description |
| bcast.goLive | 开始直播 | Go Live |
| bcast.endStream | 结束直播 | End Stream |
| bcast.endStream.confirm | 确认结束本场直播? | End this stream now? |
| bcast.preview | 预览 | Preview |

### 9.7 B 端 · 实时监控

| key | zh | en |
|---|---|---|
| monitor.title | 实时监控 | Monitoring |
| monitor.bitrate | 码率 | Bitrate |
| monitor.framerate | 帧率 | Frame Rate |
| monitor.dropped | 丢帧 | Dropped Frames |
| monitor.latency | 延迟 | Latency |
| monitor.signal.stable | 信号正常 | Signal Stable |
| monitor.signal.unstable | 连接不稳定 | Unstable Connection |
| monitor.signal.lost | 连接中断 | Connection Lost |
| monitor.timeline | 连接时间线 | Connection Timeline |
| monitor.alert | 检测到丢帧上升,请检查网络 | Frame drops rising — check your network |

### 9.8 B 端 · 多平台分发

| key | zh | en |
|---|---|---|
| dest.title | 多平台分发 | Destinations |
| dest.simulcast | 同时转推 | Simulcast |
| dest.add | 添加分发目标 | Add Destination |
| dest.status.connected | 已连接 | Connected |
| dest.status.disconnected | 已断开 | Disconnected |
| dest.status.error | 连接异常 | Error |
| dest.enable | 启用 | Enable |
| dest.disable | 停用 | Disable |
| dest.custom | 自定义 RTMP | Custom RTMP |
| dest.empty | 还没有分发目标,添加一个开始转推 | No destinations yet — add one to simulcast |

---

## 10. 验收

- 8 个页面可路由互通,Live / Studio 可切换。
- 所有界面文案来自上方双语文案库,可整体切换语言。
- 加载/空/错误三态齐全。
- 全程使用 TVU DS token,无硬编码颜色。
- mock service 接口清晰,组件不直接依赖静态数据。