08_归档04_VOZEB任务卡
VOZEB UI Migration M33 — Canvas node chrome
状态:LOCAL_IMPLEMENTATION_CANDIDATE / CANDIDATE_EVIDENCE / NOT_FORMAL_TEST
Task packet
Task ID: VOZEB-UI-MIGRATION-02-M33-CANVAS-CHROME
目标用户结果: 画布节点操作、媒体信息与编辑器工具栏在浅色/深色主题下呈现轻量 Ocean Air / Liquid Glass chrome,顶栏保持极简扁平且节点弹层不溢出。
Feature / Atomic: 既有 Canvas 创作能力的视觉承载;不改变业务语义或状态机
Base SHA: 163523e
允许修改: web/src/app/(user)/canvas/components/{canvas-node-hover-toolbar.tsx,canvas-node-content.tsx,canvas-toolbar.tsx,canvas-top-bar.tsx,canvas-editor-chrome.module.css,canvas-chrome-inner.test.ts}; 本文件
禁止修改: canvas stage/node engine、hooks/services/stores/API/持久化/生成/媒体、共享 Ocean/UI/manifest、其它路由、背景/WebGL、retail-platform
验收: Canvas chrome 定向 Vitest、TypeScript、ESLint、Prettier、git diff --check、必要的生产构建;正式 Testing/Operations 另行执行实现边界
- 节点 hover toolbar、文字节点动作、图片批次控制、资源标签和尺寸信息只使用 Ocean Air 中性玻璃 token;语义错误/状态仍读取现有
canvasThemes,不写死 stone、sky、黑底或蓝色文字。 - 图片/视频媒体保持原始比例与控件行为;仅收敛内部圆角和媒体底色,避免节点外框内再出现重复边框。
- 顶部工具栏保留现有菜单、标题、资产、Agent、用户状态和快捷键回调,但其容器取消胶囊式边框、阴影和独立背景;底部工具 dock 继续使用既有 OceanGlassCard。
- 统一补齐
prefers-reduced-transparency、prefers-reduced-motion、forced-colors与无backdrop-filter回退;节点 toolbar 使用最大视口宽度和隐藏滚动轨道,避免窄屏溢出。
不变行为与风险边界
节点创建/选择/移动/连接、生成与持久化、会话/API、资产加载、上传下载、批次展开、文本编辑、快捷键、缩放/平移和画布 stage 均未修改。样式 hooks 只作用于现有 DOM;不新增渲染器、背景或 React runtime。候选视觉证据不等同于正式 Design、Testing 或 Operations 通过。
验收证据(本地候选)
在 web/ 目录执行:
pnpm exec vitest run --config vitest.config.ts \
'src/app/(user)/canvas/components/canvas-chrome-inner.test.ts' \
'src/app/(user)/canvas/components/canvas-editor-chrome.test.tsx' \
'src/app/(user)/canvas/components/canvas-inner-surfaces.test.ts' \
'src/app/(user)/canvas/components/canvas-node.test.tsx'
pnpm exec tsc --noEmit --pretty false
pnpm exec eslint \
'src/app/(user)/canvas/components/canvas-node-hover-toolbar.tsx' \
'src/app/(user)/canvas/components/canvas-node-content.tsx' \
'src/app/(user)/canvas/components/canvas-toolbar.tsx' \
'src/app/(user)/canvas/components/canvas-top-bar.tsx' --quiet
pnpm exec prettier --check \
'src/app/(user)/canvas/components/canvas-node-hover-toolbar.tsx' \
'src/app/(user)/canvas/components/canvas-node-content.tsx' \
'src/app/(user)/canvas/components/canvas-toolbar.tsx' \
'src/app/(user)/canvas/components/canvas-top-bar.tsx' \
'src/app/(user)/canvas/components/canvas-editor-chrome.module.css' \
'src/app/(user)/canvas/components/canvas-chrome-inner.test.ts' \
'../docs/oceanway/VOZEB-UI-MIGRATION-02-M33-CANVAS-CHROME.md'
git diff --check真实登录画布、生产模型/媒体、跨浏览器性能和正式 Testing/Operations 不属于本任务授权范围。