爱笑的毛毛虫
|
dd820616a4
|
feat(canvas): 面板层级管理 — 五层Elevation体系+渐进式三区+z-index全量迁移 #98 (#102)
* feat(canvas): 面板层级管理优化 - 五层Elevation+渐进式三区+进度增强 #98 #94
基于 Wayfinder 地图 #98 决议执行面板层级管理优化：
1. 五层 Elevation 体系（决策1）
- 画布组件 z-index 硬编码值全部迁移到 token
- L0 画布层 → L1 工具层 → L2 面板层 → L3 对话框层 → L4 通知层
- 涉及 14 个 .tsx 文件，0 处 z-[N] 硬编码残留
2. prompt 面板渐进式三区（决策2）
- B区参数区改为手风琴折叠模式（默认折叠）
- 新增 SlidersHorizontal + ChevronDown 图标切换
- 点击展开 video 工具参数，收起后释放视觉空间
- A区核心区（prompt+生成）始终展开
3. 任务进度条增强（决策3）
- 进度条高度 1px→1.5px，视觉更醒目
- 新增 shimmer 扫描动画（running 态，1.4s/cycle）
- 新增百分比数字显示（tabular-nums 等宽数字）
- 新增 indeterminate 模式（无百分比时循环扫描）
- 尊重 prefers-reduced-motion（reducedMotion 时禁用动画）
4. CSS 动画
- 新增 @keyframes canvas-task-progress-shimmer
- .canvas-task-progress-shimmer 类
Closes #98
* refactor(canvas): z-index 全量迁移到五层Elevation token #98 #94
补全 #98 五层 Elevation 体系的剩余硬编码 z-index 清理：
- 三个设置弹层（图/音/视频）zIndex:1200 → var(--z-popover)
- model-setup-guide z-[900] → var(--z-toast)
- 项目侧栏 z-30 → var(--z-panel)，章节预览 z-50 → var(--z-panel-floating)
- shared 页头/缩放控件/访客提示 z-[80]/z-[70] → var(--z-panel-floating)，右键菜单 z-[90] → var(--z-modal)
- project 缩放控件容器 z-50 → var(--z-panel)，绘图加载遮罩 z-[500] → var(--z-toast)
- 反馈面板 z-[90] → var(--z-panel-floating)
共 16 处全局浮层 z-index 迁移到 token，消除层级冲突隐患。
---------
Co-authored-by: sikongyue <3155157671@qq.com>
|
2026-08-03 22:16:25 +08:00 |
|