08_归档04_VOZEB任务卡
VOZEB UI Migration M29 — Canvas inner surfaces
状态:LOCAL_IMPLEMENTATION_CANDIDATE / CANDIDATE_EVIDENCE / NOT_FORMAL_TEST
Task packet
Task ID: VOZEB-UI-MIGRATION-02-M29-CANVAS-INNER
目标用户结果: 进入 /canvas/[id] 后,Agent 对话、资产检查器、节点配置和上下文菜单共享清晰的 Ocean Air / Liquid Glass 视觉层,同时保留画布编辑行为。
Feature / Atomic: 既有 Canvas 创作能力的视觉承载;不改变业务语义或状态机
Base SHA: 4f84818
允许修改: web/src/app/(user)/canvas/components/{canvas-agent-chat-ui.tsx,canvas-assets-panel.tsx,canvas-assistant-panel.tsx,canvas-config-composer.tsx,canvas-config-node-panel.tsx,canvas-context-menu.tsx,canvas-editor-chrome.module.css,canvas-settings-popover-shell.tsx}; 本文件;直属契约测试
禁止修改: canvas stage/node engine、hooks/services/stores/API/持久化/生成/键盘/缩放/平移/连接、共享 Ocean/UI/manifest、其它路由、背景/WebGL、retail-platform
验收: canvas 定向 Vitest、TypeScript、ESLint、Prettier、git diff --check;正式 Testing/Operations 另行执行实现边界
- Agent header/tabs、消息气泡、工具状态卡、composer 和详情块使用中性玻璃表面;正文保持
theme.node.text,仅成功、警告、错误和信息图标使用对应语义 token。 - 资产面板桌面 dock、移动端 Drawer、过滤器、素材预览和媒体类型切换共用
OceanGlassCard/Ocean Air token;去除重复外框,不增加第二背景或 canvas。 - 配置 composer、模式菜单、详情/Composer 开关、设置 popover、mention 菜单和节点上下文菜单只增加表面 hooks/CSS;原有回调、定位、焦点和关闭行为不变。
prefers-reduced-transparency、prefers-reduced-motion、forced-colors和无滤镜浏览器均回退为可读实色;移动端 Drawer 与滚动区域保留,避免横向溢出。
不变行为与风险边界
节点创建/选择/移动/连接、生成与持久化、会话/API、资产加载/分页/插入、快捷键、缩放/平移和画布 stage 均未修改。OceanGlassCard 只作为现有 DOM 的视觉承载,React runtime、共享 manifest 和 User Web 不在本切片接入。候选中的视觉证据不等同于正式 Design、Testing 或 Operations 通过。
验收证据(本地候选)
在 web/ 目录执行:
pnpm exec vitest run --config vitest.config.ts \
'src/app/(user)/canvas/components/canvas-agent-chat-ui.test.tsx' \
'src/app/(user)/canvas/components/canvas-assets-panel.test.ts' \
'src/app/(user)/canvas/components/canvas-agent-generation-settings.test.ts' \
'src/app/(user)/canvas/components/canvas-editor-chrome.test.tsx' \
'src/app/(user)/canvas/components/canvas-inner-surfaces.test.ts'
pnpm exec tsc --noEmit --pretty false
pnpm exec eslint \
'src/app/(user)/canvas/components/canvas-agent-chat-ui.tsx' \
'src/app/(user)/canvas/components/canvas-assets-panel.tsx' \
'src/app/(user)/canvas/components/canvas-assistant-panel.tsx' \
'src/app/(user)/canvas/components/canvas-config-composer.tsx' \
'src/app/(user)/canvas/components/canvas-config-node-panel.tsx' \
'src/app/(user)/canvas/components/canvas-context-menu.tsx' \
'src/app/(user)/canvas/components/canvas-settings-popover-shell.tsx' --quiet
pnpm exec prettier --check \
'src/app/(user)/canvas/components/canvas-agent-chat-ui.tsx' \
'src/app/(user)/canvas/components/canvas-assets-panel.tsx' \
'src/app/(user)/canvas/components/canvas-assistant-panel.tsx' \
'src/app/(user)/canvas/components/canvas-config-composer.tsx' \
'src/app/(user)/canvas/components/canvas-config-node-panel.tsx' \
'src/app/(user)/canvas/components/canvas-context-menu.tsx' \
'src/app/(user)/canvas/components/canvas-editor-chrome.module.css' \
'src/app/(user)/canvas/components/canvas-settings-popover-shell.tsx' \
'src/app/(user)/canvas/components/canvas-inner-surfaces.test.ts' \
'../docs/oceanway/VOZEB-UI-MIGRATION-02-M29-CANVAS-INNER.md'
git diff --check当前状态:定向回归和类型检查已通过;ESLint/Prettier/diff-check 在提交前复跑并记录。真实登录画布、生产模型/媒体、跨浏览器性能和正式 Testing/Operations 不属于本任务授权范围。