* 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>
This commit is contained in:
1 parent
6eb77b93a0
commit
39844d7c8d
21 files changed
+103
-43
No files matched your search
@@ -1608,7 +1608,7 @@ function InfiniteCanvasPage() {
|
||||
|
||||
{isMiniMapOpen ? <Minimap nodes={nodes} viewport={viewport} viewportSize={size} canvasContainerRef={containerRef} onViewportPreviewChange={previewViewport} onViewportChange={handleViewportChange} /> : null}
|
||||
|
||||
<div data-canvas-no-zoom className="absolute bottom-4 left-4 z-50 flex items-end gap-2" onMouseDown={(event) => event.stopPropagation()} onPointerDown={(event) => event.stopPropagation()} onWheel={(event) => event.stopPropagation()}>
|
||||
<div data-canvas-no-zoom className="absolute bottom-4 left-4 z-[var(--z-panel)] flex items-end gap-2" onMouseDown={(event) => event.stopPropagation()} onPointerDown={(event) => event.stopPropagation()} onWheel={(event) => event.stopPropagation()}>
|
||||
<CanvasZoomControls scale={viewport.k} containerRef={containerRef} onScaleChange={setZoomScale} onReset={resetViewport} isMiniMapOpen={isMiniMapOpen} onToggleMiniMap={() => setIsMiniMapOpen((value) => !value)} onOpenShortcuts={() => setShortcutRequestNonce((value) => value + 1)} />
|
||||
<CanvasAssetTray assetImages={imageAssets} canvasImages={canvasImageNodes} showLibrary={!currentProject?.projectId} activeNodeId={selectedNodeIds.size === 1 ? Array.from(selectedNodeIds)[0] : null} onInsertAssetImage={(asset) => void createImageAssetNode(asset)} onFocusCanvasImage={focusCanvasImageNode} />
|
||||
</div>
|
||||
@@ -1665,7 +1665,7 @@ function InfiniteCanvasPage() {
|
||||
}}
|
||||
/>
|
||||
|
||||
{drawingNode ? <Suspense fallback={<div className="fixed inset-0 z-[500] grid place-items-center px-5" style={{ background: theme.canvas.background, color: theme.node.text }}><WorkspaceState icon="loading" title="正在加载绘图编辑器" description="正在准备绘图画布。" /></div>}>
|
||||
{drawingNode ? <Suspense fallback={<div className="fixed inset-0 z-[var(--z-toast)] grid place-items-center px-5" style={{ background: theme.canvas.background, color: theme.node.text }}><WorkspaceState icon="loading" title="正在加载绘图编辑器" description="正在准备绘图画布。" /></div>}>
|
||||
<CanvasDrawingEditorModal
|
||||
node={drawingNode}
|
||||
projectId={projectId}
|
||||
@@ -1692,7 +1692,7 @@ function InfiniteCanvasPage() {
|
||||
/>
|
||||
|
||||
{directorNodeId && activeDirectorScene ? (
|
||||
<Suspense fallback={<div className="fixed inset-0 z-[500] grid place-items-center px-5" style={{ background: theme.canvas.background, color: theme.node.text }}><WorkspaceState icon="loading" title="正在加载 3D 导演台" description="准备场景、镜头与空间控制。" /></div>}>
|
||||
<Suspense fallback={<div className="fixed inset-0 z-[var(--z-toast)] grid place-items-center px-5" style={{ background: theme.canvas.background, color: theme.node.text }}><WorkspaceState icon="loading" title="正在加载 3D 导演台" description="准备场景、镜头与空间控制。" /></div>}>
|
||||
<CanvasDirectorWorkbench
|
||||
open
|
||||
scene={activeDirectorScene}
|
||||
|
||||
Reference in new issue
Block a user