VOZEB UI Migration M21 — Billing checkout and result surfaces

状态：LOCAL_IMPLEMENTATION_CANDIDATE / CANDIDATE_EVIDENCE / NOT_FORMAL_TEST

Task packet

• Task ID: VOZEB-UI-MIGRATION-02-M21
• 目标用户结果： 用户在充值、支付结果确认和订单记录之间获得统一的 Ocean Air / Liquid Glass 结算体验，同时继续使用现有支付、优惠券和订单状态服务。
• Base SHA: 12abbd6
• 允许修改路径：
  • web/src/app/(user)/billing/checkout/checkout-client.tsx
  • web/src/app/(user)/billing/billing-result-page.tsx
  • web/src/app/(user)/billing/checkout/checkout-page.module.css
  • web/src/app/(user)/billing/billing-result-page.module.css
  • web/src/app/(user)/billing/billing-pages-layout.test.ts
  • docs/oceanway/VOZEB-UI-MIGRATION-02-M21-BILLING.md
• 禁止修改路径： billing API/service、payment window、profile、shared Ocean/UI、其它路由、数据库、Go 服务和 retail-platform。

实现边界

本切片只替换页面级呈现层：使用 OceanGlassCard、OceanContentCard、OceanStatusCluster、OceanReveal、OceanLoadingShell 和 OceanUtilityControl 组织结算页面，不新增背景、WebGL 或第二个页面渲染器。正文与控件文字读取 Ocean Air 中性文本 token，语义色只用于状态图形和状态标签。

以下行为保持原实现：

• 商品列表、商品缺失和加载错误仍由既有 listBillingProducts 流程决定；
• 数量仍限制在 1..24，优惠券仍调用 includeTemplates: false 的用户券列表，并通过既有 quote 接口核价；
• 金额继续使用整数分与既有 formatYuan 展示，不引入浮点账务计算；
• 创建订单、创建支付 checkout、复制支付信息、弹窗阻止回退、人工确认和安全 URL 处理仍交给既有 API/helper；
• success 使用 subscribeBillingOrder，cancel 使用 cancelBillingOrder；手动检查仍调用 getBillingOrder；支付成功只按订单 ID 刷新一次用户会话；
• 结果页继续覆盖 pending / paid / closed / canceled / refunding / refunded 状态及无订单编号、连接中断和服务错误语义；
• 桌面双栏与窄屏订单/支付分段视图均支持键盘焦点、无横向溢出、prefers-reduced-motion、prefers-reduced-transparency 和 forced-colors 降级。

验收命令

在 web/ 目录执行：

pnpm exec vitest run 'src/app/(user)/billing/billing-pages-layout.test.ts' \
  'src/app/(user)/billing/checkout/checkout-coupon-loading.test.ts' \
  'src/app/(user)/billing/checkout/payment-checkout-window.test.ts' \
  --config vitest.config.ts --reporter=dot
pnpm exec tsc --noEmit --pretty false
pnpm exec eslint 'src/app/(user)/billing/checkout/checkout-client.tsx' \
  'src/app/(user)/billing/billing-result-page.tsx' \
  'src/app/(user)/billing/billing-pages-layout.test.ts' --quiet
pnpm exec prettier --check \
  'src/app/(user)/billing/checkout/checkout-client.tsx' \
  'src/app/(user)/billing/billing-result-page.tsx' \
  'src/app/(user)/billing/checkout/checkout-page.module.css' \
  'src/app/(user)/billing/billing-result-page.module.css' \
  'src/app/(user)/billing/billing-pages-layout.test.ts'
pnpm run build
git diff --check

本地候选证据：pnpm run check:release 通过（Vitest 539 files / 2411 passed / 9 skipped，TypeScript、ESLint、Prettier、Next 66/66 路由和 standalone 产物均通过）；定向 billing 契约与支付窗口测试为 3 files / 9 tests 全部通过。浏览器仅完成未配置数据库/会话环境下的启动烟测，访问结算地址会按既有保护逻辑重定向 /install，未将其计作已登录支付状态验收。上述结果仅是本地候选证据，不替代独立 Testing/Operations。

正式 Testing、Operations、支付真实调用和发布仍未授权。本文件只记录本地候选实现和可复核证据，不提升任何 Feature/Atomic 状态。