08_归档04_VOZEB任务卡
VOZEB-UI-MIGRATION-02-M06 — Canvas 编辑器 Chrome
Task ID: VOZEB-UI-MIGRATION-02-M06-CANVAS-EDITOR-CHROME
目标用户结果: 用户在 /canvas/:id 中获得轻量、透明、可读的 Ocean Way 编辑器工具层,同时保留现有画布编辑行为
Feature ID / Atomic Requirement IDs: SPACE-P0-001..005;EXEC-P0-001-R01..R04(仅承载视觉)
Base SHA: fbd66caf43e0f424ac49ce1102b0942c94d68241
必须阅读: VOZEB-UI-FOUNDATION-01.md;VOZEB-UI-MIGRATION-02.md;VOZEB-UI-MIGRATION-02-M05-CANVAS-LIST.md;Canvas domain/store 与现有编辑器测试
允许修改: 本任务包;web/src/app/(user)/canvas/[id]/canvas-client-page.tsx(仅根 marker/壳类);web/src/app/(user)/canvas/components/canvas-top-bar.tsx;web/src/app/(user)/canvas/components/canvas-toolbar.tsx;web/src/app/(user)/canvas/components/canvas-zoom-controls.tsx;必要时 web/src/app/(user)/canvas/components/canvas-assistant-panel.tsx(仅外壳视觉接线);本目录新增 canvas-editor-chrome.module.css;本目录新增 canvas-editor-chrome.test.tsx
禁止修改: CanvasSurface/CanvasStage 内部实现、节点渲染与节点业务逻辑、stores、services/api、contracts、API routes、Go、migrations、共享 Ocean 组件与 layout/navigation、资产/短剧/其它页面
范围: 将顶部工具层、底部工具 dock、缩放 dock 和可选 Agent 侧栏接入现有 Ocean Foundation material;统一单层 hairline、macOS 连续圆角、透明 blur、中性文字和窄屏布局
非目标: 不改变回调、状态、路由、相机、节点、关系、持久化、生成、计费、助手会话或加载语义;不包裹/改写 CanvasSurface;不新增 WebGL、逐节点玻璃或第二个页面背景;不恢复旧 CanvasRefreshShell
已冻结契约与数据模型: CanvasTopBar、CanvasToolbar、CanvasZoomControls、CanvasAssistantPanel props、data-testid/aria-label、现有 CSS hooks、CanvasLoadingShell 及 390/430 行为保持不变
安全与数据限制: 仅修改展示层 class/CSS/材质属性;使用本地合成会话和现有 fixture;不读取或输出 Secret,不触发真实上游、账务或生产写入
验收命令: pnpm exec vitest run src/app/(user)/canvas/[id]/canvas-page-elements.test.tsx src/app/(user)/canvas/[id]/canvas-page-utils.test.ts src/app/(user)/canvas/components/canvas-editor-chrome.test.tsx;pnpm exec tsc --noEmit --pretty false;pnpm exec eslint src/app/(user)/canvas/[id]/canvas-client-page.tsx src/app/(user)/canvas/components/canvas-top-bar.tsx src/app/(user)/canvas/components/canvas-toolbar.tsx src/app/(user)/canvas/components/canvas-zoom-controls.tsx src/app/(user)/canvas/components/canvas-assistant-panel.tsx --quiet;pnpm exec prettier --check docs/oceanway/VOZEB-UI-MIGRATION-02-M06-CANVAS-EDITOR-CHROME.md web/src/app/(user)/canvas/[id]/canvas-client-page.tsx web/src/app/(user)/canvas/components/canvas-top-bar.tsx web/src/app/(user)/canvas/components/canvas-toolbar.tsx web/src/app/(user)/canvas/components/canvas-zoom-controls.tsx web/src/app/(user)/canvas/components/canvas-assistant-panel.tsx web/src/app/(user)/canvas/components/canvas-editor-chrome.module.css web/src/app/(user)/canvas/components/canvas-editor-chrome.test.tsx;pnpm run build;git diff --check
人工决策点: LOCAL_IMPLEMENTATION_CANDIDATE / CANDIDATE_EVIDENCE / NOT_FORMAL_TEST;Canvas 节点、Agent 业务和其它页面另建切片
交付物: 单层 Ocean 玻璃编辑器 Chrome、窄屏无溢出样式、源结构契约测试和独立验证记录验收边界
- 顶部、底部和缩放控件只增加一层可见材质;不在 dock 内嵌套第二个 GlassSurface 或 WebGL renderer。
- 工具栏保持极简扁平的信息层级:控件使用中性文字,动作色只用于焦点/选中图形,不把正文变成蓝色。
- CanvasSurface 继续由原有 controller 直接拥有;本切片不改变节点拖拽、选择、缩放、连接和持久化。
CanvasLoadingShell继续是未挂载和未加载阶段唯一占位,不闪现旧块。- 窄屏(390px/430px)保留触控命中区和横向工具滚动能力,但页面根与编辑器 Chrome 不产生水平溢出。
- 所有变化仍是候选实现,不提升正式 Development、Testing 或 Operations 状态。