08_归档04_VOZEB任务卡
VOZEB-UI-MIGRATION-02 — VOZEB 页面级 Foundation 迁移
Task ID: VOZEB-UI-MIGRATION-02
目标用户结果: 在不改变 VOZEB 业务行为、路由和数据语义的前提下，按页接入已确认的 OceanWay Foundation 组件
Feature / Atomic: HOME-P0-001；SPACE-P0-001..005；EXEC-P0-001；MOD-P0-001；KEY-P0-001..004；BILL-P0-003
Base SHA: 1f7d0c2 (VOZEB Next 候选，已包含 Foundation 与 Key/Model/Usage 候选)
视觉基线: VOZEB-UI-FOUNDATION-01 候选（Quiet Ocean Air / Abyss）
实现边界: Next.js App Router + React 19；retail-platform 只读参考，不引入 Vue runtime
状态: LOCAL_IMPLEMENTATION_CANDIDATE / CANDIDATE_EVIDENCE / NOT_FORMAL_TEST1. 已获授权的范围
用户已明确允许在基于 VOZEB-PRO 的 Next.js 项目中开始逐页改造。每个页面仍以独立切片 实施、测试和提交；本任务不把一次页面改造自动解释为全项目正式验收或发布授权。
2. 迁移规则
- 页面只复用
web/src/components/ocean与现有components/ui的已完成组件；不在页面内 重新实现玻璃材质、背景、圆角或动效。 - 业务 adapter、API、权限、计费、任务状态和持久化语义保持原实现；视觉 kit 不读取 store、不直接请求 API、不创建 Operation/Billing Entry。
- 保留现有路由和中文文案语义；不恢复早期旧页面壳层、顶部产品菜单或 Vue 代码。
- 每个切片至少覆盖适用的 ready / loading / empty / error / forbidden / submitting 状态， 浅深主题、键盘焦点、390/430 与窄桌面无横向溢出、reduced-motion/transparency。
- 页面级背景仍只允许一个
OceanAmbientBackground；Canvas 全屏页遵循其专用 Stage/Loading 契约；不叠加第二个 WebGL renderer。
3. 页面队列
| 顺序 | 页面切片 | Foundation 接线重点 | 主要非目标 |
|---|---|---|---|
| 1 | /models | GlassCard、FilterBar、Status/Empty、响应式模型目录 | 不增加 detail API、渠道或 Auto 决策 |
| 2 | /keys | GlassCard、Dialog、Status、敏感操作态 | 不改变 Secret/权限/存储契约 |
| 3 | /usage、/usage/:requestId | Filter、Table/Status、Detail、Decimal 展示 | 不增加重试、退款或法币展示 |
| 4 | /create | AgentComposer、Conversation、Generation、AssetPicker | 不改 Run、SSE、计费和重试语义 |
| 5 | /canvas、/canvas/:id | CanvasKit、CanvasStage、LoadingShell、UtilityControl | 不改节点、相机、关系和持久化 |
| 6 | /assets、/drama、/drama/:id | Asset/Media、DramaEditor、Status | 不改上传、生成和项目状态机 |
| 7 | /works、/community、公共作品页 | WorkGallery、WorkCard、MediaFrame | 不改发布、互动、治理和分页事实 |
| 8 | /prompts、/my-prompts、/profile、/help | Prompt、Section、GlassCard、Status | 不改账户、积分、导出和安全语义 |
| 9 | /login、/register、/forgot-password、/install | AuthKit、InstallWizardKit | 不改 Session、验证码、安装写入 |
| 10 | /billing*、/admin*、法律与公告页 | Billing/Admin/公共内容 kit | 不改支付、RBAC、审计、合规文本 |
重定向页面 /image、/video、/admin/generation-operations 不单独建立视觉切片。
/components 是组件实验室，不纳入业务页面迁移验收。
4. 首个切片 M-01
首个切片为 /models，只允许修改：
docs/oceanway/VOZEB-UI-MIGRATION-02-M01-MODELS.md
web/src/app/(user)/models/page.tsx
web/src/app/(user)/models/page.test.tsx（如需要）GET /api/retail/portal/models、公开 DTO、筛选、分页和错误映射保持不变。由于当前契约
没有 q 参数，搜索必须明确为“当前页搜索”，不得暗示服务端全目录搜索。
5. 验收与交付
每个切片完成后记录 base SHA、变更文件、测试命令、浏览器视口和剩余缺口，并保持候选
状态。实现者自测不能提升 IMPLEMENTED、VERIFIED 或 OPERATIONALIZED；正式 Testing
和 Operations 由后续独立任务执行。
首个切片的最低命令：
cd web
pnpm exec vitest run src/app/'(user)'/models src/services/api/retail src/integrations/retail --reporter=dot
pnpm exec tsc --noEmit --pretty false
pnpm exec eslint src/app/'(user)'/models --quiet
pnpm exec prettier --check src/app/'(user)'/models docs/oceanway/VOZEB-UI-MIGRATION-02-M01-MODELS.md
pnpm exec next build
git diff --check浏览器使用本地 loopback fixture，至少检查桌面、390px 和 430px：页面身份、非空渲染、无 框架错误、无横向溢出、筛选/分页/重试/空态交互和控制台错误。