refactor(canvas): 浮层体系重构 — z-index 14档+专注模式+工具栏click触发 #126 #127 #128 (#129)

按视觉层重设计 z-index(12→14 档),新增节点层/激活节点层/节点工具栏层等
语义 token,并下沉节点内部 stacking context(--node-z-content/overlay/handle)
与 dock 子面板(--dock-z-popover),消除硬编码 z 值。

新增专注模式(避让分屏可切换):use-focus-mode 管理 localStorage 偏好与小屏
(<1024px)强制避让;助手面板从 flex 改为 absolute + 垂直分槽(顶部 288px
让位活动任务面板),画布区按面板宽度动态 padding;顶栏新增 PanelRight
切换按钮并带强制态反馈。

节点工具栏由 hover+select 触发放为 click-only(选中即显),组件由
canvas-node-hover-toolbar 重命名为 canvas-node-toolbar;移除 project 与
render-model 中冗余的 toolbarNodeId 状态。

活动任务面板 z-index 由 --z-modal-overlay(110) 降至 --z-panel-floating(80),
归位浮动面板层;AGENTS.md Elevation 同步至 14 档。

Co-authored-by: sikongyue <3155157671@qq.com>
This commit is contained in:
爱笑的毛毛虫
2026-08-04 20:46:25 +08:00
committed by GitHub
parent 850375158c
commit d6a42d53a1
17 changed files with 199 additions and 90 deletions

View File

@@ -101,19 +101,21 @@
--shadow-glow-md: 0 0 24px rgba(125, 162, 255, 0.3);
--shadow-glow-lg: 0 0 40px rgba(125, 162, 255, 0.4);
/* --- 6. Elevation(z-index 12 档,对应 #98 五层体系)--- */
--z-canvas: 0; /* L0 画布层 */
--z-canvas-overlay: 5; /* L0 画布覆盖(网格、连线)*/
--z-toolbar: 10; /* L1 浮动工具层 */
--z-toolbar-floating: 20; /* L1 悬停工具栏 */
--z-panel: 50; /* L2 侧边面板层 */
--z-panel-floating: 80; /* L2 浮动面板 */
--z-modal: 100; /* L3 对话框层 */
--z-modal-overlay: 110; /* L3 遮罩 */
--z-popover: 200; /* L3 popover */
--z-toast: 500; /* L4 通知层 */
--z-tooltip: 1000; /* L4 tooltip */
--z-max: 2000; /* 最高层(紧急通知)*/
/* --- 6. Elevation(z-index 14 档,按视觉层划分,见 ADR-001)--- */
--z-canvas: 0; /* L0 画布底 */
--z-canvas-overlay: 5; /* L1 画布覆盖(网格、连线)*/
--z-node: 10; /* L2 节点层(未选中)*/
--z-node-active: 20; /* L3 激活节点(选中/拖拽)*/
--z-toolbar: 30; /* L4 浮动工具栏(顶栏、dock、zoom)*/
--z-node-toolbar: 50; /* L5 节点工具栏(click 触发)*/
--z-panel: 60; /* L6 侧边面板(侧栏、素材托盘)*/
--z-panel-floating: 80; /* L7 浮动面板(助手/agent/活动任务)*/
--z-modal: 100; /* L8 对话框 */
--z-modal-overlay: 110; /* L9 遮罩 */
--z-popover: 200; /* L10 弹出层 */
--z-toast: 500; /* L11 通知 */
--z-tooltip: 1000; /* L12 提示 */
--z-max: 2000; /* L13 最高(紧急通知)*/
/* --- 7. 动效(对应 #99 动效 token)--- */
/* duration */
@@ -464,6 +466,7 @@
--dock-shadow: var(--shadow-lg);
--dock-item-radius: var(--r-md); /* 8px */
--dock-item-radius-labeled: var(--r-lg); /* 12px */
--dock-z-popover: 30; /* dock 子面板在 toolbar 根 stacking context 内的层级(见 ADR-001)*/
/* Node 组件(画布节点,对应 #97 节点视觉规范)*/
--node-radius: var(--r-2xl); /* 16px */
@@ -483,6 +486,9 @@
--node-badge-fs: var(--fs-tiny); /* 10px */
--node-type-strip-width: 3px; /* 色带宽度 */
--node-type-badge-size: 20px; /* 图标徽章尺寸 */
--node-z-content: 30; /* 节点遮罩层(stacking context 内,见 ADR-001)*/
--node-z-overlay: 40; /* 节点角标/按钮层 */
--node-z-handle: 50; /* 节点 resize handle 层 */
/* Modal 组件(对话框,对应 #98 面板层级)*/
--modal-radius: var(--r-3xl); /* 20px */