# PC 直播间原型 · 水滴标注清单 > 来源文件：`直播2/PC直播间原型.html` > 文案集中位置：脚本内 `Anno` → `REGISTRY` > 水滴挂载：DOM 上 `anno-anchor` + `anno-drop`（`data-anno-id`） > 切换页面：`showPage()` / 登录态 → `Anno.onPageChange(pageKey)`；弹窗 → `onModalOpen(modalId)`；关播结束页 → `livingEndPage` > 交互对齐：`直播2/商城后台直播功能原型.html`（右侧标注说明面板、水滴高亮、可拖拽宽度） > 水滴交互：第一次点击展开右侧标注；再次点击同一水滴收起 > **三端联动演示场次：** liveId=30「午间秒杀」，登录 `b` / `123456`（主播 190595） ## 标注规范（全局） 1. **一功能一水滴**：不把无关能力塞进同一滴（如「实时数据入口」与「实时数据弹窗」分开展示；结束页独立 key）。 2. **说明写清**：功能目标、字段口径、状态差异（待开始/直播中/已结束）、交互结果（Toast/弹窗/跳转）。 3. **挂载对准**：水滴挂在对应 UI 区域；点开侧栏即该功能说明。 4. **弹窗/结束页独立 key**：商品列表、库存、发券、连麦、实时数据弹窗、在线观众弹窗、结束页各自独立 `REGISTRY` 条目。 --- ## 现有标注总览 | 页面 key | 页面名 | 水滴 | 标题 | 挂载位置 | |----------|--------|------|------|----------| | `login` | 登录页 | ① | 登录页 | 登录卡片左上 | | `home` | 直播中心 | ①② | 直播预告 / 近期场次 | 左侧预告卡 / 右侧场次列表 | | `prepare` | 开播准备 | ①② | 画面预览 / 本场信息与开播 | 左预览区 / 右信息区 | | `living` | 直播中控 | ①～⑩ | 状态栏 / 画面 / 设备 / 商品 / 互动 / 发券 / 连麦工具 / 实时数据入口 / 在线观众入口 / 连麦面板 | 顶栏 / 预览 / 左栏 / 四工具 / 状态栏右侧 / 连麦面板 | | `livingEndPage` | 直播结束页 | ① | 结束页字段与【确定】 | 结束页左上 | | `analytics` | 数据分析 | ①②④⑤ | 筛选 / 概况 / 漏斗 / 观众趋势 | 标题 / 指标 / 漏斗 / 观众趋势 | | `orders` | 直播订单 | ①②③ | 组合查询 / 订单列表 / 分页 | 筛选 / 表格 / 分页 | | `history` | 直播历史 | ①② | 历史卡片 / 分页 | 标题区 / 底部分页 | | `goodsMask` | 商品列表弹窗 | ①② | 搜索 / 卡片与操作（含库存） | 搜索区 / 列表区 | | `goodsStockMask` | 门店库存弹窗 | ①② | 商品名称与门店搜索 / 库存列表 | 商品名+搜索区 / 列表区 | | `couponMask` | 发券弹窗 | ① | 备券列表与发券（点击【发放】先二次确认；发放中可停止、停止后可续发） | 列表区 | | `livingMicPanel` | 连麦面板 | ⑩ | 开启连麦 / 当前连麦 / 已申请观众 | 右侧常驻面板 | | `liveStatsMask` | 实时数据弹窗 | ① | 时长与奖励字段口径 | 弹窗顶栏 | | `viewerMask` | 在线观众弹窗 | ① | 搜索 / 头像+昵称列表 | 弹窗顶栏 | --- ## 1. 登录页（`login`） ### ① 登录页 **功能：** 商城后台添加且启用的主播，用绑定账号登录 PC 直播间开播。 | 品牌元素 | 展示规则 | |------|------| | logo | 【V1.18】取商城后台【基础设置 → 主播登录平台设置】上传的 logo；未设置时展示默认播放图标 | | 名称 | 【V1.18】取后台配置的直播系统名称（≤10 字）；未设置时默认「直播平台」 | | 顶栏品牌 | 【V1.18】内页顶栏与登录页同源，展示同一 logo 与名称；未配置时同样回退默认播放图标 + 「直播平台」 | | 字段 | 规则 | |------|------| | 账号 | 占位「请输入账号」；过滤特殊字符；空→Toast「请输入账号」 | | 密码 | 占位「请输入密码」；可显隐；空→Toast「请输入密码」 | | 记住账号和密码 | 勾选则本地缓存；取消则清除 | | 结果 | 行为 | |------|------| | 账号不存在 / 密码错误 / 未绑定 / 已禁用 | 对应 Toast，不进入 | | 校验通过 | 进入直播中心 | 演示：`b` / `123456`（午间秒杀）；禁用 / 未绑定账号见原型说明。 --- ## 2. 直播中心（`home`） ### ① 直播预告 展示下一场重点场次：直播中优先，否则最近待开播。【立即开始】→ 中控（待开播为「待开始」，摄像/麦克默认开）。 ### ② 近期场次 本主播直播中 / 待开播 / 已结束（不含已取消）。排序：状态 ＞ 开播时间升序 ＞ 创建时间降序。【开播】进中控；【取消】二次确认→已取消。 --- ## 3. 开播准备（`prepare`） ### ① 画面预览（WebRTC） 开启/关闭预览、选择摄像/麦克；授权失败有占位（原型仍可演示开播）。 ### ② 本场信息与开播 本场信息只读；【开始直播】→直播中进中控；【取消】回直播中心。 --- ## 4. 直播中控（`living`） ### ① 状态栏 进入中控后隐藏主播中心全局顶栏；离开中控恢复。离开路径、【开始直播】/【结束直播】、状态、名称、主播身份。**直播中不展示【返回】**；关播用【结束直播】或【×】二次确认后进结束页。 ### ② 画面预览 一期仅摄像头；待开始默认预览；已结束被结束页覆盖；连麦成功后预览区左右分屏；直播中推预览帧至门店端。 ### ③ 设备操作条 摄像/麦克：进中控默认开；已结束锁定关。 ### ④～⑦ 工具入口 商品 / 互动消息 / 发券 / 连麦 —— 各一滴；商品/发券打开弹窗标注；**连麦**开关右侧常驻面板（见 `livingMicPanel` ⑩）。 | 工具 | 说明 | |------|------| | 连麦 | 开关整块面板（对标互动消息）；红点=申请人数；连麦中文案「连麦中」；高亮=面板开 | ### ⑩ 连麦面板（`livingMicPanel`） 工具【连麦】打开后展示；标题栏【展开/收起】仅控制本模块内容区。 | 区块 | 说明 | |------|------| | 开启连麦 | 开关；关→观众端不显示连麦入口并清场 pending/connected | | 当前连麦 | 头像、昵称、【结束】（主播不可静音观众） | | 画面分屏 | 连麦成功后预览区左右分屏：左主播 / 右观众（语音=头像+昵称，视频=摄像头） | | 已申请观众 | 头像、昵称、【接通】【拒绝】；同时仅 1 人；禁排队 | 一期支持语音+视频；连麦成功画面左右分屏；连麦事件不进公屏；联动 `live2_mic_bus_v1`（含 `muted`/`videoOn`）。 ### ⑧ 实时数据入口 打开深色弹窗；明细见 `liveStatsMask`。 ### ⑨ 在线观众入口 打开观众弹窗；明细见 `viewerMask`。 --- ## 5. 直播结束页（`livingEndPage`） ### ① 直播结束页 | 元素 | 口径 | |------|------| | 标题 | 直播已结束 | | 直播时长 | HH:MM:SS | | 观看人数 | 本场开播起至今直播中进房观看的去重用户数（累计；演示默认 100人） | | 最高在线人数 | 本场最高同时进房观看人数（演示默认 80人） | | 【确定】 | 回直播中心（顶栏返回/× 亦可） | --- ## 6. 实时数据弹窗（`liveStatsMask`） ### ① 实时数据弹窗 顶行：直播时长 HH:MM:SS + 今日奖励（今日计入待结算或变为已结算的主播奖励，按 §2.3 奖励时间统计）。 底行：本月获得 / 已发放（本月已结算） / 待发放（本月待结算）。 不含「带货奖励（本场）」。**未达结算周期计入时点**的订单（如后台配置「订单完成」且未确认收货）不计入上述指标。 --- ## 7. 在线观众弹窗（`viewerMask`） ### ① 在线观众弹窗 无普通/邀约 Tab；标题 `在线观众(N)`；搜索占位「请输入观众昵称」、失焦过滤；列表仅头像+昵称。 --- ## 8. 数据分析（`analytics`） ① 时间筛选（全部/今日/本周/本月） ② 概况指标口径（含访问人数、观看人数累计、累计开播次数；访问人数 / 观看人数 / 带货转化率跨场次不去重；**不含**最高点赞数 / 最高在线数） ④ 直播转化漏斗（访问人数→观看→成交；成交=支付成功用户数、跨场次不去重） ⑤ 实时观众人数趋势（访问/观看/离开；截至该日累计、跨场次不去重） 页面顺序：概况 → 漏斗 → 观众趋势（**不含** GMV / 带货转化率 / 订单成交金额 / 订单成交数量 / 主播带货奖励经营趋势图）。 --- ## 9. 直播订单（`orders`） ① 组合查询（会员 / 奖励状态 / 下单时间） ② 订单列表字段（只读）；**奖励状态**仅展示已达结算周期计入时点的订单（待结算/已结算） ③ 分页 > 计入待结算时点由商城后台【基础设置 → 奖励设置】结算周期决定：订单支付=支付成功；订单完成=确认收货。 --- ## 10. 直播历史（`history`） ① 已结束场次卡片（时长/观看/GMV/带货奖励） ② 分页 --- ## 11. 弹窗：商品列表 / 库存 / 发券 与中控工具对应；打开弹窗时侧栏自动切换至 `goodsMask` / `goodsStockMask` / `couponMask`。连麦见右侧常驻面板 `livingMicPanel`（⑩），不再使用 `micMask` 弹窗。商品卡图左上展示「奖励X%」（本场商品主播奖励比例）；卡片展示「库存：X」（统计逻辑：云连锁=本场参与门店总库存；qimall=商城商品总库存）。字段与状态机见原型 REGISTRY。 发券二次确认：点击【发放】先弹出确认弹窗（标题「提示」，文案「确认发放该优惠券吗？」，【取消】/【确定】），【确定】后才执行发放并推会员端 + 公屏。 发券状态机：发放（点击先二次确认）→ 发放中（**发放完成前可点【停止发放】**）→ 已停止（库存≠0 时显示【发放】可续发）/ 已发完（限量券本场剩余=0，终态）。不限量券无「已发完」。 --- ## 维护说明 - 新增功能：必须新增独立水滴 + REGISTRY 条目 + 本清单一行。 - 改口径：同步改 REGISTRY 与本清单、双份 PRD。 - 弹窗/结束页：禁止只写在入口水滴里而不做独立 key（打开后侧栏会变空）。