№ · 任务清单 CH.07.12
主页 · 📃 任务清单 · 2026-07-16-multiplayer-ui-integration

2026-07-16-multiplayer-ui-integration

📅 2026-07-12 · 📦 7.8 KB · 📃 任务清单 · 📝 MD 文档 🆕 14d 🏷️ 计划🏷️ 拍卖🏷️ 规范🏷️ 联机

⟦tag:v2|task|2026-07-16-multiplayer-ui-integration⟧ kind: task id: 2026-07-16-multiplayer-ui-integration lane: R10 title: 联机 UI 集成 + 视觉对照(Day 4 主,6h) objective: 收口 W29 5 日计划 R10 lane——把 R7 实时竞价 UI + R8 重连 banner 集成进 RoomCard 房间卡片,做视觉对照 checklist,确保联机 panel 跟 auction/console/ 视觉规范一致。 scope: docs/plans/active/2026-07-13-5日开发计划-v1.md § 4, docs/design/active/道具系统新核心UI视觉规范-v1.md(联机章节), docs/design/active/联机P2P房间骨架-v1.md, src/components/multiplayer-lobby/**(只动这下面文件 + App.tsx multiplayer tab 入口) acceptance:

  • src/components/multiplayer-lobby/RoomCard.tsx 升级:
    • 显示当前 4 态(waiting / bidding / antiSnipe / settled)
    • 显示当前 bid + 当前 bidder
    • 显示反狙击倒计时(30s 窗口)
    • 嵌入 RealtimeBidPanel 在卡片底部
    • 嵌入 ReconnectBanner 在卡片顶部(掉线时显,无掉线时隐藏)
  • src/App.tsx multiplayer tab 入口接通(从「骨架」变成「可点击进入 RoomCard」)
    • 只动 multiplayer tab 入口的 setActiveTab / 路由,主导航其他 tab 未被改动
  • 视觉对照 checklist 落盘:docs/design/active/W29联机UI视觉对照checklist-v1.md
    • 对照视觉规范 v1.0 联机章节的 12 项 checklist 全勾
    • 联机 panel 跟 auction/console/ 视觉一致性 6 项 checklist 全勾
  • cmd /c npm run build 通过,npm run lint 无新增错误
  • 浏览器手验 1 轮:从主导航进入 multiplayer tab → 进入房间 → 看 4 态切换 → 模拟掉线看 banner → 反狙击触发看倒计时
  • src/data/auction/** / src/utils/auctionRules.ts / src/components/auction/** 任何代码未被改动
  • src/components/item/** / src/data/items/** / src/utils/items/** 任何代码未被改动
  • RealtimeBidPanel / ReconnectBanner 的 R7/R8 既有功能未被破坏 current state: partial / accepted residual risk (P1 gate waiver) blockers: none for downstream dispatch。代码接线与 build 已完成，但真实 browser / screenshot 证据仍缺失；P1 于 2026-07-12 13:06:48 +08:00 明确跳过该 gate。此状态不得改写为 verified。 next action: 不再等待或催收 R10 callback；由 R11 在收口文档中明确记录缺失的视觉验证证据与回退路径。 summary:
  • 这是 W29 5 日计划 R10 lane(2026-07-16 Day 4 主轴,6h 工作量),关键路径上接 R7 + R8 收口。
  • 不实现真实网络测试 / 不做表情包 / 不做弹幕(留 W30+)。
  • 视觉对照是 P1 拍板点(Day 4 下午),短工不代决视觉 OK / 调 / 重做,只输出 checklist + 截图对照。

prompt(给短工 / 子会话的指令)

角色:[短工]#联机-UI集成@v1.0 lane:R10 时间窗:2026-07-16 上午 9:00 ~ 2026-07-16 下午 18:00(6h 工作量,单日;下午 14:00 后留 P1 视觉拍板) 承接文档:docs/plans/active/2026-07-13-5日开发计划-v1.md § 4 前置依赖:R7 实时竞价 + R8 流拍重连 全部 verified(7.15 Day 3 收口)

任务清单(按顺序做)

上午(9:00 - 12:00):代码集成

  1. RoomCard 升级:src/components/multiplayer-lobby/RoomCard.tsx

    • props 增 realtimeBid: RealtimeBidSnapshot + onBid: (amount: number) => void + reconnectStates: Map<seatId, ReconnectState>
    • 头部:ReconnectBanner 嵌入(只在有 reconnecting seat 时显)
    • 中部:4 态徽章 + 当前 bid + 当前 bidder
    • 反狙击倒计时:useEffect 算 deadlineAt - now,每秒刷新,state === 'antiSnipe' 时显「+30s」
    • 底部:RealtimeBidPanel 嵌入(只读 UI,出价回调走 onBid)
    • 不改 RealtimeBidPanel / ReconnectBanner 既有 props 签名(只动 RoomCard)

  2. App.tsx multiplayer tab 入口接通

    • 找到现有 multiplayer tab 入口(setActiveTab('multiplayer') 之类)
    • 进入后挂载 MultiplayerLobby + 渲染 RoomCard 列表
    • 测试数据:至少 1 个 room,3 个 seat(房主 + 2 客机),用于视觉对照
    • 主导航其他 tab(auction / story / adventure / hall 等)未被改动
    • 只修改 multiplayer tab 入口的 setActiveTab / 路由相关 3-5 行代码

  3. 构建验证

    • cmd /c npm run build 通过
    • cmd /c npm run lint 无新增错误

下午(13:00 - 14:00):视觉对照 checklist 准备

  1. checklist 文档:docs/design/active/W29联机UI视觉对照checklist-v1.md
    • § A 视觉规范 v1.0 联机章节 12 项:
      1. 主色板:--color-q-9 ~ --color-q-1 使用一致性
      2. 字体:同 auction/console/
      3. 间距:8px 网格
      4. 圆角:6px
      5. 阴影:0 4px 12px rgba(0,0,0,0.08)
      6. 边框:1px solid var(--color-border)
      7. hover 反馈:背景色 +10% 亮度
      8. 4 态徽章配色:waiting 灰 / bidding 蓝 / antiSnipe 橙 / settled 绿
      9. 反狙击倒计时:数字 + 进度条
      10. 出价按钮:主色按钮 + 禁用态灰
      11. 重连 banner:顶部条幅 + 倒计时
      12. 房间卡片:阴影 + 圆角 + 边框
    • § B 跟 auction/console/ 视觉一致性 6 项:
      1. 卡片容器样式一致
      2. 状态徽章位置一致
      3. 倒计时显示位置一致
      4. 按钮样式一致
      5. 错误提示样式一致
      6. 加载态样式一致
    • 每项勾 ✅ / 调 / 重做 + 截图引用(短工截 1-2 张关键图)

下午(14:00 - 18:00):P1 视觉拍板

  1. P1 视觉拍板会(短工不代决)

    • 把 checklist 文档 + 截图给 P1
    • P1 拍板:✅ 全过 / ⚠️ 调 1-2 处 / ❌ 重做
    • 短工按 P1 拍板结果:
      • ✅ → 收口,写「R10 verified」
      • ⚠️ → 修 1-2 处再交付,延后 1-2h
      • ❌ → 标记 P10 重做,记入残余风险,R11 收口时不算 R10 收口

  2. 浏览器手验 1 轮

    • 启动 npm run dev
    • 主导航 → multiplayer tab → 进入房间
    • 看 4 态切换(用测试数据切态)
    • 模拟掉线(测试数据把 seat 状态切 reconnecting)→ 看 banner
    • 反狙击触发(把 deadlineAt 调近 30s)→ 看倒计时
    • 截图保存到 docs/design/active/W29联机UI视觉对照checklist-v1.md 引用

文件边界(强制)

  • 🔧 修改:src/components/multiplayer-lobby/RoomCard.tsx
  • 🔧 修改:src/App.tsx(只动 multiplayer tab 入口 3-5 行)
  • ✅ 新增:docs/design/active/W29联机UI视觉对照checklist-v1.md
  • ❌ 不碰:src/components/multiplayer-lobby/RealtimeBidPanel.tsx / ReconnectBanner.tsx(R7/R8 既有产物)
  • ❌ 不碰:src/data/auction/** / src/utils/auctionRules.ts / src/components/auction/**
  • ❌ 不碰:src/components/item/** / src/data/items/** / src/utils/items/**
  • ❌ 不碰:src/App.tsx 主导航其他 tab

不做(明示)

  • ❌ 真实网络测试(留 W30+)
  • ❌ 表情包 / 弹幕 / 弹幕互动(留 W30+)
  • ❌ 房间卡片动效(留 v1.1 续)
  • ❌ 移动端适配(留 v1.1 续)
  • ❌ 暗色模式切换(留 v1.1 续)

风险 + 缓解

  • 联机 panel 跟 auction/console/ 风格不一致 → 严格对照视觉规范 v1.0 联机章节 + § B 6 项一致性 checklist
  • App.tsx 改动面失控 → 只动 multiplayer tab 入口 3-5 行,主导航其他 tab 不动
  • P1 视觉拍板「重做」导致 R10 未收口 → R11 收口时不算 R10 收口,记入残余风险

回执模板(短工完成时按这个格式回报主会话)

[R10 #联机-UI集成@v1.0 回执]
- 状态:✅ 完成 / ⚠️ 调 1-2 处后完成 / ❌ 重做(未收口)
- 修改文件:<列出 2 个文件实际路径>
- 新增文件:<列出 1 个文件实际路径>
- 视觉对照 checklist:<12 + 6 项勾选结果>
- P1 拍板结果:✅ / ⚠️ / ❌
- 浏览器手验:<PASS / FAIL 描述>
- `npm run build`:✅ / ❌
- `npm run lint`:无新增 / 新增 N 个
- 风险 / 阻塞:<如有,列出;如无,写 "无">
- 残余风险:<如有,列出;如无,写 "无">
- 建议给 R11 接力点:<一句话>

(End of R10 task card)