08_归档04_VOZEB任务卡
VOZEB-UI-MIGRATION-02-M03 — 用量中心 Ocean Foundation 视觉切片
Task ID: VOZEB-UI-MIGRATION-02-M03
目标用户结果: 登录用户可以在 OceanWay 壳层中清晰查看网页/API 用量及单次请求详情
Feature ID / Atomic Requirement IDs: BILL-P0-003
Base SHA: 7ca22d82c5ead9f70dc0e1056b22f956cf109d1f
必须阅读: VOZEB-UI-FOUNDATION-01.md；VOZEB-RETAIL-NEXT-KEY-MODEL-USAGE-01.md；现有 Retail Usage 契约
允许修改: 本任务包；web/src/app/(user)/usage/page.tsx；web/src/app/(user)/usage/[requestId]/page.tsx；同目录 Usage contract test
禁止修改: Retail BFF、contracts、服务 API、Foundation/shared components、左侧导航、其它页面、数据库、迁移和部署文件
范围: 用已完成 Ocean Foundation 组件重构用量列表、筛选、聚合摘要、请求详情和生命周期状态的布局与状态层级
非目标: 改变用量查询、排序、分页、Decimal 字符串、账务/对账状态、权限、重试、退款或任何其它路由语义
已冻结契约与数据模型: listRetailUsage/getRetailUsageDetail typed adapter；金额和数量保持十进制字符串；仅展示公开单位、积分和服务端状态
安全与数据限制: 仅渲染当前会话返回的公开用量；不展示法币、供应商/渠道、下游诊断或可执行的重试/退款动作
验收命令: pnpm exec vitest run src/app/(user)/usage/page.test.tsx；pnpm exec tsc --noEmit --pretty false；pnpm exec eslint src/app/(user)/usage/page.tsx src/app/(user)/usage/[requestId]/page.tsx src/app/(user)/usage/page.test.tsx --quiet；pnpm exec prettier --check docs/oceanway/VOZEB-UI-MIGRATION-02-M03-USAGE.md web/src/app/(user)/usage/page.tsx web/src/app/(user)/usage/[requestId]/page.tsx web/src/app/(user)/usage/page.test.tsx；git diff --check
人工决策点: 本切片为 LOCAL_CANDIDATE / CANDIDATE_EVIDENCE / NOT_FORMAL_TEST；需独立 Testing 与用户确认后方可进入后继页面集成
交付物: Ocean Foundation 用量列表/详情页面候选、页面 contract test、该切片任务包验收边界
- 列表继续使用服务端筛选、排序和分页；请求详情继续按当前用户范围读取，不在页面内推导账务事实。
RetailDecimal、RetailMoney和用量数量始终作为字符串展示；不使用浮点计算，不渲染人民币、法币或内部成本字段。created / reserved / dispatched / settled / released / reconciliation_required通过文案和状态组件表达；“核对中”不得被呈现为最终消费。- 列表与详情保留 loading、refreshing、empty、error、not-found、窄屏卡片、桌面表格和无横向溢出；重试只重新读取，不重复执行请求。
- 使用
OceanGlassCard、OceanGlassSurface、OceanReveal、OceanStatusCluster及现有 UI 控件；不在页面内复制玻璃材质或新增 WebGL。 - 桌面、窄桌面和 390/430 移动视口支持键盘焦点、浅深主题、reduced-motion/transparency 和 forced-colors。
- 本候选不提升 Product、Design、Development、Testing 或 Operations 正式状态。