08_归档04_VOZEB任务卡
VOZEB-UI-MIGRATION-02-M04-CREATE-A — 创作 Agent 首屏与 Composer 外壳
Task ID: VOZEB-UI-MIGRATION-02-M04-CREATE-A
目标用户结果: 用户进入创作页即可在清晰、轻量的 Ocean Air 液态玻璃工作区中输入多模态创作需求
Feature ID / Atomic Requirement IDs: HOME-P0-001-R01..R05；EXEC-P0-001-R01..R04；EXEC-P0-002-R01..R05；EXEC-P0-003-R01..R03（仅承载视觉）；ATD-P0-001/002/003/005（不改数据语义）
Base SHA: 66e90f724322c992ff66e3f90b871bf3001c7258
必须阅读: VOZEB-UI-FOUNDATION-01.md；VOZEB-UI-MIGRATION-02.md；现有 create-home-layout.test.ts；Creative Agent/Run 契约
允许修改: 本任务包；web/src/app/(user)/create/page.tsx；web/src/app/(user)/create/components/creative-composer.tsx；web/src/app/(user)/create/create-home-layout.test.ts；本目录新增的 create 页面视觉 CSS
禁止修改: use-create-agent.ts、stores、services/api/creative.ts、contracts、API routes、Go/migrations、共享 Ocean 组件与 layout/shell、其它页面
范围: 以 OceanGlassSurface 作为唯一 Composer 焦点表面；将页面背景、半透明层、圆角和动效降级接入 Ocean Air token；保留现有输入、Skill、模型、参数、附件、视频帧、引用、优化、提交和取消回调
非目标: 新增模型/价格/权限/账务能力；改变 SSE、Run、媒体比例、重试、取消、持久化或导航语义；引入新依赖或 WebGL 背景
已冻结契约与数据模型: 现有 CreativeComposer props、data-testid、aria label、键盘 Enter/Shift+Enter 与 390/430 响应式行为保持不变
安全与数据限制: 仅页面视觉和 DOM 外壳；不触发真实生成、外部渠道、Key 或账务写入
验收命令: pnpm exec vitest run src/app/(user)/create/create-home-layout.test.ts src/app/(user)/create/components/creative-composer-styles.test.ts；pnpm exec tsc --noEmit --pretty false；pnpm exec eslint src/app/(user)/create/page.tsx src/app/(user)/create/components/creative-composer.tsx src/app/(user)/create/create-home-layout.test.ts --quiet；pnpm exec prettier --check docs/oceanway/VOZEB-UI-MIGRATION-02-M04-CREATE-A.md web/src/app/(user)/create/page.tsx web/src/app/(user)/create/components/creative-composer.tsx web/src/app/(user)/create/create-home-layout.test.ts web/src/app/(user)/create/create-page.module.css；git diff --check
人工决策点: LOCAL_IMPLEMENTATION_CANDIDATE / CANDIDATE_EVIDENCE / NOT_FORMAL_TEST；后续消息、历史、资产面板仍需独立切片
交付物: 创作页首屏/Composer Ocean Glass 外壳、保留业务回调的视觉 contract test、任务包验收边界
CreativeComposer继续拥有完整的 Skill、模型、生成参数、附件、视频首尾帧、引用、优化和提交控件；不嵌套功能重叠的OceanAgentComposer。- Composer 只设置一个
OceanGlassSurface视觉 owner；其余 overview、消息、历史和资产面板留给后继切片，避免多层边框与重复状态。 - 紧凑停靠态在 Glass 组件的内容包裹层内保留独立的横向 flex 容器，确保附件、输入、引用、优化和发送控件不会因表面适配器的内部 DOM 而改为纵向堆叠。
- 页面背景使用 CSS token 和轻量动画；不在本切片新增 WebGL 实例。
prefers-reduced-motion与prefers-reduced-transparency时保持可读静态回退。 - 保留现有
.creative-composer、data-ready、data-compact、data-testid、aria label 和窄屏布局契约。