文档
08_归档04_VOZEB任务卡

VOZEB-UI-MIGRATION-02-M35 — 管理后台计费内层 Ocean Foundation 切片

Task ID: VOZEB-UI-MIGRATION-02-M35-ADMIN-BILLING
目标用户结果: 管理员在计费后台的订单、商品、促销、优惠券、支付配置和对账弹窗中看到统一的 Ocean Air / Liquid Glass 内层表面,同时保留现有运营与账务操作。
Feature ID / Atomic Requirement IDs: BILL-P0-001..006;ADMIN-P0-001(仅视觉承载,不改变业务语义)
Base SHA: 63b8fabf7968b4038feba19d485d9250c0f0708e
必须阅读: VOZEB-UI-FOUNDATION-01.md;VOZEB-UI-MIGRATION-02.md;admin-billing-page.tsx;计费内层组件与既有 API/测试
允许修改: web/src/app/admin/billing/components/billing-operation-elements.tsx;web/src/app/admin/billing/components/billing-operations.tsx;web/src/app/admin/billing/components/billing-reconciliation-import.tsx;web/src/app/admin/billing/components/coupon-template-panel.tsx;web/src/app/admin/billing/components/promotion-campaign-panel.tsx;web/src/app/admin/billing/admin-billing-page.module.css;本任务结构契约测试;本任务文档
禁止修改: 其它路由、共享 Ocean/UI/manifest、页面背景/WebGL、后端、Go、数据库、retail-platform;不得改变权限、查询、报价、支付、退款、对账导入、优惠券/促销表单和 API 行为
范围: 订单表格与筛选、运营指标、商品卡与编辑弹窗、支付渠道/字段/检查、对账导入与结果表、优惠券和促销卡片/弹窗的 OceanGlassCard、OceanDataTable、OceanDialog 适配;Ant 控件统一 macOS 圆角、hairline、轻阴影和语义浅底状态
非目标: 不新增业务状态、字段、请求、持久化、后台权限、实时动效或页面级背景;不引入 React 之外的 runtime;不把蓝色用于正文文字
已冻结契约与数据模型: 既有 BillingOperations props、PaymentConfig* 类型、Billing* API、CouponTemplate/PromotionCampaign API、订单/退款/对账回调与现有表单状态机保持不变
安全与数据限制: 仅修改本地 UI 与结构契约测试;不读取或输出 Secret,不触发真实支付、账务、迁移或生产写入
验收命令: pnpm exec vitest run src/app/admin/billing/admin-billing-inner-layout.test.ts src/app/admin/billing/admin-billing-page-layout.test.ts;pnpm exec tsc --noEmit --pretty false;pnpm exec eslint <本任务修改的直属文件> --quiet;pnpm exec prettier --check <本任务修改的直属文件>;pnpm run build;git diff --check
人工决策点: LOCAL_IMPLEMENTATION_CANDIDATE / CANDIDATE_EVIDENCE / NOT_FORMAL_TEST;需独立 Testing、Operations 与用户确认后方可提升正式状态
交付物: 计费内层 Ocean Glass 视觉收口、Ant 表格/弹窗/表单适配、语义状态标签、透明度/强制颜色降级与结构契约测试

实现边界

  • 通过 data-ocean-billing-surface、data-ocean-tone 和 data-ocean-state 绑定现有 DOM;不重写 fetch、RBAC、表单校验、结算或退款逻辑。
  • 面板、卡片、表格和控件只消费现有 --ocean-air-* / --ocean-glass-* token,使用单层 blur/saturation/edge/shadow;正文保持 Ocean Air 中性色,颜色仅表达状态或焦点。
  • 表格通过 OceanDataTable、弹窗通过 OceanDialog、静态表面通过 OceanGlassCard 复用共享 material owner;Portal 弹窗使用既有 rootClassName,不创建第二背景。
  • @supports not (backdrop-filter: …)、prefers-reduced-transparency、prefers-reduced-motion 和 forced-colors 均回退到可读的实色/系统色;窄屏表格滚动保持在自身容器内。
  • 该候选只记录实现与本地自动化证据,不代表正式 Development、Testing、Operations、发布或部署完成。

状态:LOCAL_IMPLEMENTATION_CANDIDATE / CANDIDATE_EVIDENCE / NOT_FORMAL_TEST

On this page