149 lines
14 KiB
Markdown
149 lines
14 KiB
Markdown
# 玩家端 PC 桌面化 Design QA
|
||
|
||
final result: passed
|
||
|
||
## 基准与实现证据
|
||
|
||
- 视觉基准（方案 3）：`/Users/wchino/.codex/generated_images/019f8441-2864-75d2-a2a9-69bc25a3bc7a/exec-3297a599-f1a3-40a2-8845-e4d38b19bc52.png`
|
||
- 1728×907 最终实现：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/final-1728x907-populated.jpg`
|
||
- 同画布左右对比：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/design-comparison-option3-vs-implementation.jpg`
|
||
- 1024×768 最终实现：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/final-1024x768.jpg`
|
||
- 390×844 移动回归：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/full-390x844.jpg`
|
||
- 480×844 移动回归：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/viewport-480x844-full.jpg`
|
||
- 浏览器批注修正后 1567×899：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/followup-audit/hall-after-1567x899.jpg`
|
||
|
||
## 验收状态
|
||
|
||
- 桌面基准状态：已登录、信用模式、开放期号；大厅使用 4D、四条有效草稿、一家开注商，用于检验工具区、表格密度和复核栏。
|
||
- 1024×768：复核摘要位于表格下方，宽度 743px；表格宽度 741px。页面 `scrollWidth === clientWidth === 1024`，横向滚动仅在表格内部。
|
||
- 1280×800、1440×900：复核摘要位于表格下方；1500px 以上复核栏位于表格右侧，避免中等桌面宽度压缩输入区。页面无全局横向滚动。
|
||
- 390×844、480×844：继续使用原移动布局和底部提交栏；页面无全局横向滚动。
|
||
- 主导航、玩法切换、号码和金额输入、预览、提交、注单展开、信用流水筛选均可操作。
|
||
- Chrome 控制台没有新增 error；只有开发模式 HMR、TokenRefresh 和 React DevTools 提示。
|
||
|
||
## 真实数据闭环
|
||
|
||
- 测试订单号：`TO20260721111116994982`
|
||
- 票号：`TK20260721111116970261`
|
||
- 期号：`20260721-1039`
|
||
- 测试内容：号码 `3147`、玩法 `大`、Singapore、`NPR 1.00`
|
||
- 我的注单：总记录从 8 增至 9，订单立即出现并可展开查看票号、玩法、号码、开注商和金额。
|
||
- 信用流水：新增“下注占用 −NPR 1.00”；提交时可用信用从 `NPR 95,891.00` 变为 `NPR 95,890.00`，已用信用从 `NPR 3,098.00` 变为 `NPR 3,099.00`，与授信 `NPR 98,989.00` 一致。
|
||
|
||
## 差异检查与迭代
|
||
|
||
1. 初版将三步工具区和复核区按方案 3 重组，保留真实表格列、开注商与提交预览。
|
||
2. 1024px 首轮发现状态卡金额和第三步操作被压缩，调整状态区为 16rem 信用卡、隐藏窄屏次要授信摘要，并收窄玩法按钮。
|
||
3. 复查 1024px 后期号、倒计时和信用金额完整显示，第三步操作不再裁切，复核区在表格后保持全宽。
|
||
4. 1728px 同画布对比确认层级、三步工具区、投注台账、右侧复核栏、主操作位置与方案 3 一致；保留现有产品的真实列和业务文案。
|
||
5. 最终 P0：0，P1：0，P2：0。
|
||
|
||
## 浏览器批注复查
|
||
|
||
- 大厅汇总条由单行滚动表改为自适应网格：1567、1440、1280、1024、480、390px 均为 `scrollWidth === clientWidth`；本轮进一步扩展为稳定的全玩法换行网格，移动端不显示横向滚动条。
|
||
- 投注表格收窄桌面列宽并调整复核栏断点：1567、1440、1280px 表格内部无横向滚动；1024px 与 480/390px 只在投注表格内部保留必要横向滚动，页面本身无横向滚动。
|
||
- 桌面复核区的可用信用、下注后可用和预计扣款已移除 `NPR` 前缀；“提交前仍会显示最终预览”提示已移除。
|
||
- 开奖结果、我的注单、信用页复查后未发现新的 P0/P1/P2；规则页空数据状态改为有界居中提示，减少空白拉伸感。
|
||
- 规则页 1567×899：`scrollWidth === clientWidth === 1567`；Chrome 控制台无新增 error。
|
||
|
||
## 浏览器批注复查 2
|
||
|
||
- 源视觉真值：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/followup-audit/hall-after-1567x899.jpg`，对应本轮三个浏览器批注前的 1567×899 大厅状态。
|
||
- 实现截图：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/annotation-round-2/hall-after-open-1567x899.jpg`；状态为已登录、开放期号、4D、20 条空白行。
|
||
- 全视图同画布对比：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/annotation-round-2/comparison-before-after-open.jpg`。
|
||
- 汇总区聚焦对比：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/annotation-round-2/comparison-summary-focused.jpg`；密集表头和金额状态在原始尺寸下可读，因此无需更多局部裁切。
|
||
- 非零高亮证据：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/annotation-round-2/hall-highlight-1567x899.jpg`。
|
||
- 移动换行证据：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/annotation-round-2/hall-after-390x844.jpg`；31 个汇总单元固定六列换行，汇总区 `scrollWidth === clientWidth === 354`，页面 `scrollWidth === clientWidth === 390`。
|
||
|
||
### 比较历史与修复
|
||
|
||
1. P1：汇总区只显示当前玩法列，切换 4D/3D/2D 时内容变化。修复为稳定的 D4、D3、D2 全玩法集合；实测三个 Tab 的 31 个单元内容和顺序完全一致。
|
||
2. P1：列同步复选框仅切换状态，关闭时不会清列。修复为开启后把该列输入同步到所有号码有效的行，关闭后清空该列；实测两行号码的 4C 金额同步为 `7`，取消后两行 4C 均为空。
|
||
3. P1：批量清空会把 20 行缩减为 1 行。修复为只清号码和金额，保留行 ID、开注商和选择类型；实测清空前后均为 20 行，号码和金额为空，20 行默认开注商选择保留。
|
||
4. P2：零值与非零值缺少视觉区分。零值使用灰色表头/数值，非零值使用蓝色表头与浅蓝底；实测 `4A 8.00` 与总计高亮，其他 `0.00` 保持灰态。
|
||
|
||
### 忠实度检查
|
||
|
||
- 字体与排版：沿用现有字体、字号和表格字重；长标签在单元格内保持清晰，不截断。
|
||
- 间距与布局：1567px 使用两行自适应汇总网格，390px 使用六列换行；无新增全局或汇总区横向滚动。
|
||
- 颜色与状态：灰态和蓝色高亮继续使用现有 slate/品牌蓝色 token，金额状态对比明确。
|
||
- 图片与资产：本轮没有新增或替换图片、Logo、图标或装饰资产。
|
||
- 文案与内容：保留全部现有玩法名称、金额格式和业务文案，只调整显示集合与交互行为。
|
||
- Chrome 控制台无 error；本轮最终 P0：0，P1：0，P2：0，`final result` 保持 `passed`。
|
||
|
||
## 浏览器批注复查 3
|
||
|
||
- 源视觉真值：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/annotation-round-3/hall-before-1221x899.jpg`，对应汇总区仍位于三步工具栏下方的 1221px 大厅状态。
|
||
- 桌面实现：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/annotation-round-3/hall-after-desktop-final-1221x899-cdp.jpg`；视口 1221×899、已登录、开放期号、4D。
|
||
- 移动实现：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/annotation-round-3/hall-after-mobile-final-390x844-cdp.jpg`；视口 390×844。
|
||
- 全视图同画布对比：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/annotation-round-3/comparison-before-after-1221.jpg`。
|
||
- 汇总位置聚焦对比：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/annotation-round-3/comparison-summary-position-focused.jpg`。
|
||
|
||
### 比较历史与修复
|
||
|
||
1. P1：汇总区位于三步工具栏和投注表格之间，不符合“位于选择玩法上方”的信息顺序。修复为桌面端在三步工具栏之前渲染汇总区。
|
||
2. P2：第一次移动后，移动端快捷填单位于汇总区和玩法 Tab 之间，汇总区与玩法 Tab 相距 84px。修复为移动端按“快捷填单、汇总区、玩法 Tab”排列，并统一使用 12px 垂直间距。
|
||
3. Post-fix：1221px 下汇总区到三步工具栏为 12px，工具栏到投注表格为 13px；390px 下快捷填单到汇总区、汇总区到玩法 Tab 均为 12px。
|
||
4. Post-fix：1221px 页面 `scrollWidth === clientWidth === 1221`；390px 页面 `scrollWidth === clientWidth === 390`，汇总区 `scrollWidth === clientWidth === 341`。
|
||
|
||
### 忠实度检查
|
||
|
||
- 字体与排版：玩法标签、金额字号、字重和换行规则保持不变。
|
||
- 间距与布局：只改变汇总模块顺序并统一相邻模块 12px 节奏，没有改变状态区、工具栏或表格尺寸。
|
||
- 颜色与状态：零值灰态和非零蓝色高亮保持不变。
|
||
- 图片与资产：没有新增或替换 Logo、图标及图片资产。
|
||
- 文案与内容：全部玩法名称、金额、快捷填单和工具栏文案保持不变。
|
||
- Chrome 控制台无 error；本轮最终 P0：0，P1：0，P2：0，`final result` 保持 `passed`。
|
||
|
||
## 浏览器批注复查 4
|
||
|
||
- 源视觉真值：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/annotation-round-4/hall-before-390x844.png`，对应移动端快捷填单、汇总区和玩法 Tab 尚未形成独立上下间距的状态。
|
||
- 移动实现：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/annotation-round-4/hall-after-390x844.png`；视口 390×844、已登录、开放期号、4D。
|
||
- 桌面回归：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/annotation-round-4/hall-after-1221x899.png`；视口 1221×899。
|
||
- 全视图同画布对比：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/annotation-round-4/mobile-before-after.png`。
|
||
- 标注区域聚焦对比：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/annotation-round-4/mobile-before-after-focus.png`；快捷填单、玩法 Tab 与相邻模块的边界在原始尺寸下清晰可读，无需继续裁切。
|
||
|
||
### 比较历史与修复
|
||
|
||
1. P2：移动端快捷填单、汇总区和玩法 Tab 被放在同一垂直组内，快捷填单区域没有形成用户标注所需的独立上、下边界。修复为把全玩法汇总区移出快捷填单组，移动端顺序调整为“汇总区、快捷填单、玩法 Tab、投注表格”。
|
||
2. Post-fix：390px 下汇总区到快捷填单组为 12px、快捷填单到玩法 Tab 为 12px、玩法组到投注表格为 12px；页面 `scrollWidth === clientWidth === 390`。
|
||
3. Post-fix：1221px 页面 `scrollWidth === clientWidth === 1221`，桌面汇总区、三步工具栏和投注表格结构不变。
|
||
|
||
### 忠实度检查
|
||
|
||
- 字体与排版：快捷填单、玩法 Tab、汇总金额和表格字号、字重均未改变。
|
||
- 间距与布局：只拆分移动端模块分组并统一 12px 垂直节奏，标注区域上下都有可见留白。
|
||
- 颜色与状态：灰态汇总、品牌蓝和表格状态色保持不变。
|
||
- 图片与资产：没有新增或替换 Logo、钱包背景、图标及图片资产。
|
||
- 文案与内容：玩法、金额、快捷填单和业务文案保持不变。
|
||
- Chrome 控制台无 error；本轮最终 P0：0，P1：0，P2：0，`final result` 保持 `passed`。
|
||
|
||
## 浏览器批注复查 5
|
||
|
||
- 源视觉真值：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/annotation-round-5/hall-before-390x844.png`，对应移动端期号状态卡和可用信用卡直接相贴的状态。
|
||
- 移动实现：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/annotation-round-5/hall-after-390x844.png`；视口 390×844、已登录、开放期号、4D。
|
||
- 桌面回归：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/annotation-round-5/hall-after-1221x899.png`；视口 1221×899。
|
||
- 全视图同画布对比：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/annotation-round-5/mobile-before-after.png`。
|
||
- 顶部模块聚焦对比：`/Users/wchino/.codex/visualizations/2026/07/21/019f8441-2864-75d2-a2a9-69bc25a3bc7a/annotation-round-5/mobile-before-after-focus.png`；状态卡和信用卡的边界与留白在原始尺寸下清晰可读。
|
||
|
||
### 比较历史与修复
|
||
|
||
1. P2：移动端期号状态卡与可用信用卡之间为 0px，两个独立信息模块视觉上粘连。修复为移动端容器使用 12px 垂直间距，并在桌面断点归零以继续使用并排网格。
|
||
2. Post-fix：390px 下状态卡到信用卡为 12px，信用卡到全玩法汇总区为 12px；页面 `scrollWidth === clientWidth === 390`。
|
||
3. Post-fix：1221px 下状态卡和信用卡顶部差为 0px，继续保持并排等高布局；页面 `scrollWidth === clientWidth === 1221`。
|
||
|
||
### 忠实度检查
|
||
|
||
- 字体与排版：期号、时间、倒计时、信用金额及辅助文案均未改变。
|
||
- 间距与布局：只增加移动端两个顶部模块之间的 12px 间距，桌面网格保持原位。
|
||
- 颜色与状态：状态色、红色信用卡和页面背景 token 保持不变。
|
||
- 图片与资产：钱包背景、Logo 和现有图标均未新增或替换。
|
||
- 文案与内容：期号状态、信用金额和导航文案保持不变。
|
||
- Chrome 控制台无 error；本轮最终 P0：0，P1：0，P2：0，`final result` 保持 `passed`。
|
||
|
||
## 工程验证
|
||
|
||
- `npm run lint`：passed
|
||
- `npm run build`：passed
|
||
- `git diff --check`：passed
|