lotteryFront/design-qa.md

玩家端 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