From c0d223f3575ffc5c32c52b87af4b7f24cf0e49fe Mon Sep 17 00:00:00 2001
From: ddcat666 <26564566+ddcat666@users.noreply.github.com>
Date: Fri, 25 Sep 2026 00:00:22 +0800
Subject: [PATCH] =?UTF-8?q?feat(canvas):=20=E7=94=BB=E5=B8=83=E5=B7=A5?=
 =?UTF-8?q?=E4=BD=9C=E5=8C=BA=20-=20=E4=BB=A5=E6=82=AC=E6=B5=AE=E7=A3=A8?=
 =?UTF-8?q?=E7=A0=82=E9=9D=A2=E6=9D=BF=E6=89=BF=E8=BD=BD=E4=BE=A7=E6=A0=8F?=
 =?UTF-8?q?=E5=AF=BC=E8=88=AA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/canvas/canvas-node.tsx     |  25 +--
 .../canvas-workspace-node-list-panel.tsx      |   2 +-
 .../canvas/canvas-workspace-panel.css         | 157 ++++++++++++++----
 .../canvas/canvas-workspace-panel.tsx         | 122 +++++++-------
 web/src/components/canvas/infinite-canvas.tsx |   2 +-
 web/src/pages/canvas/project.tsx              |   4 +-
 web/test/canvas-workspace-sidebar.test.ts     |  41 ++++-
 web/test/workspace-menu-density.test.tsx      |  11 +-
 8 files changed, 240 insertions(+), 124 deletions(-)

diff --git a/web/src/components/canvas/canvas-node.tsx b/web/src/components/canvas/canvas-node.tsx
index 1824ef884..902754fb7 100644
--- a/web/src/components/canvas/canvas-node.tsx
+++ b/web/src/components/canvas/canvas-node.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import type { ReactNode } from "react";
-import { AlertCircle, BookOpenCheck, CheckCircle2, ChevronRight, Clapperboard, Copy, Download, GripVertical, Image as ImageIcon, Lock, Maximize2, Music2, Pencil, RefreshCw, ScanSearch, Settings2, Star, Trash2, Type, Video, WandSparkles } from "lucide-react";
+import { AlertCircle, BookOpenCheck, CheckCircle2, ChevronRight, Clapperboard, Copy, Download, Image as ImageIcon, Lock, Maximize2, Music2, Pencil, RefreshCw, ScanSearch, Settings2, Star, Trash2, Type, Video, WandSparkles } from "lucide-react";
 
 import { useCanvasNodeActions } from "./canvas-node-action-context";
 
@@ -307,7 +307,6 @@ export const CanvasNode = React.memo(function CanvasNode({
                 draft={titleDraft}
                 theme={theme}
                 onDraftChange={setTitleDraft}
-                onDragStart={readOnly ? undefined : (event) => onMouseDown(event, data.id)}
                 onEdit={() => setIsEditingTitle(true)}
                 onCommit={commitTitle}
                 onCancel={() => { setTitleDraft(data.title); setIsEditingTitle(false); }}
@@ -647,7 +646,7 @@ function formatMediaDimensionLabel(node: CanvasNodeData, hasVisualMediaContent:
     return `${Math.round(width)}*${Math.round(height)}`;
 }
 
-function NodeExternalHeader({ node, scale, dimensionLabel, active, editable, editing, draft, theme, onDragStart, onDraftChange, onEdit, onCommit, onCancel }: {
+function NodeExternalHeader({ node, scale, dimensionLabel, active, editable, editing, draft, theme, onDraftChange, onEdit, onCommit, onCancel }: {
     node: CanvasNodeData;
     scale: number;
     dimensionLabel: string | null;
@@ -657,7 +656,6 @@ function NodeExternalHeader({ node, scale, dimensionLabel, active, editable, edi
     draft: string;
     theme: CanvasTheme;
     onDraftChange: (value: string) => void;
-    onDragStart?: (event: React.MouseEvent) => void;
     onEdit: () => void;
     onCommit: () => void;
     onCancel: () => void;
@@ -677,7 +675,7 @@ function NodeExternalHeader({ node, scale, dimensionLabel, active, editable, edi
                 "--canvas-node-width": `${node.width}px`,
                 borderRadius: "var(--r-sm)",
                 background: "transparent",
-                paddingInline: "var(--space-1-half)",
+                paddingInline: "0",
                 color: active ? theme.node.text : theme.node.label,
                 transform: `scale(var(--canvas-live-inverse-scale, ${inverseScale}))`,
                 transformOrigin: "left bottom",
@@ -686,23 +684,6 @@ function NodeExternalHeader({ node, scale, dimensionLabel, active, editable, edi
             onPointerDown={(event) => event.stopPropagation()}
         >
             <div className="flex min-w-0 items-center gap-1" style={{ maxWidth: maxHeaderWidth }}>
-                <button
-                    type="button"
-                    className="flex size-6 shrink-0 touch-none items-center justify-center rounded cursor-grab active:cursor-grabbing disabled:cursor-not-allowed focus-visible:outline focus-visible:outline-1"
-                    aria-label={node.metadata?.locked ? "节点已锁定" : `拖动节点：${node.title}`}
-                    title={node.metadata?.locked ? "节点已锁定，请先解锁" : "拖动此处移动节点；点击名称可重命名"}
-                    disabled={!onDragStart || Boolean(node.metadata?.locked)}
-                    onPointerDown={(event) => {
-                        if (event.button !== 0) return;
-                        // HTML / SVG 正文在跨源沙箱中；捕获指针，避免经过 iframe 后丢失 move / up。
-                        event.preventDefault();
-                        event.stopPropagation();
-                        event.currentTarget.setPointerCapture(event.pointerId);
-                        onDragStart?.(event);
-                    }}
-                >
-                    {node.metadata?.locked ? <Lock className="size-3" /> : <GripVertical className="size-3" strokeWidth={1.8} />}
-                </button>
                 <Icon className="size-3 shrink-0" strokeWidth={1.8} />
                 {editing ? (
                     <input
diff --git a/web/src/components/canvas/canvas-workspace-node-list-panel.tsx b/web/src/components/canvas/canvas-workspace-node-list-panel.tsx
index ddf455beb..3c437071e 100644
--- a/web/src/components/canvas/canvas-workspace-node-list-panel.tsx
+++ b/web/src/components/canvas/canvas-workspace-node-list-panel.tsx
@@ -36,7 +36,7 @@ export function CanvasWorkspaceNodeListPanel({
                 <span className="tabular-nums text-foreground/32">{nodes.length.toLocaleString("zh-CN")}</span>
             </header>
             <div className="shrink-0 border-b border-border/70 p-2">
-                <label className="flex h-8 items-center gap-1.5 rounded-md border border-border/75 bg-foreground/[.025] px-2 focus-within:border-[var(--workspace-accent)] focus-within:ring-2 focus-within:ring-[var(--workspace-accent-soft)]">
+                <label className="flex h-8 items-center gap-1.5 rounded-[var(--r-md)] bg-foreground/[.045] px-2 focus-within:ring-2 focus-within:ring-[var(--workspace-accent-soft)]">
                     <Search className="size-3.5 shrink-0 text-foreground/32" />
                     <input
                         value={query}
diff --git a/web/src/components/canvas/canvas-workspace-panel.css b/web/src/components/canvas/canvas-workspace-panel.css
index 52b637d73..7e8e97b92 100644
--- a/web/src/components/canvas/canvas-workspace-panel.css
+++ b/web/src/components/canvas/canvas-workspace-panel.css
@@ -52,76 +52,161 @@
     width: 12px;
     height: 12px;
 }
+.canvas-workspace-shell,
+.canvas-workspace-panel {
+    --canvas-workspace-material: color-mix(in srgb, var(--canvas-workspace-base, var(--background)) 72%, transparent);
+    --canvas-workspace-sheen: transparent;
+}
+.canvas-main-with-workspace {
+    --canvas-workspace-inset: var(--space-16);
+}
+@media (min-width: 992px) {
+    .canvas-main-with-workspace.canvas-workspace-expanded {
+        --canvas-workspace-inset: calc(var(--space-16) + 320px);
+    }
+    .canvas-main-with-workspace > .canvas-project-sidebar {
+        margin-left: var(--space-16);
+    }
+    .canvas-main-with-workspace:has(> .canvas-project-sidebar) .canvas-topbar {
+        left: 0;
+    }
+    .canvas-main-with-workspace:has(> .canvas-project-sidebar) .canvas-workspace-zoom-controls {
+        left: var(--canvas-inset-x);
+    }
+}
+.canvas-main-with-workspace .canvas-editor-shell {
+    z-index: 0;
+}
+.canvas-main-with-workspace .canvas-topbar {
+    left: var(--canvas-workspace-inset);
+}
+.canvas-main-with-workspace .canvas-workspace-zoom-controls {
+    left: calc(var(--canvas-workspace-inset) + var(--canvas-inset-x));
+}
+.canvas-workspace-shell {
+    position: absolute;
+    z-index: 2;
+    inset-block: 0;
+    left: 0;
+    display: flex;
+    flex-shrink: 0;
+    min-height: 0;
+    margin: var(--space-2) 0 var(--space-2) var(--space-2);
+    overflow: hidden;
+    border: 1px solid color-mix(in srgb, currentColor 8%, transparent);
+    border-radius: var(--r-2xl);
+    background: var(--canvas-workspace-material);
+    box-shadow: 0 10px 28px color-mix(in srgb, black 16%, transparent);
+    contain: layout paint;
+    -webkit-backdrop-filter: blur(22px) saturate(140%);
+    backdrop-filter: blur(22px) saturate(140%);
+}
+.canvas-workspace-panel {
+    background: linear-gradient(145deg, var(--canvas-workspace-sheen), transparent 55%), var(--canvas-workspace-material);
+}
+.canvas-workspace-shell .canvas-workspace-panel {
+    background: transparent;
+}
+.canvas-workspace-panel > :is(header, .border-b) {
+    border-bottom: 0 !important;
+}
+.canvas-workspace-panel > footer {
+    border-top: 0;
+}
+.canvas-workspace-panel > header {
+    padding-right: var(--space-12);
+}
+.canvas-workspace-close {
+    position: absolute;
+    z-index: 2;
+    top: var(--space-2);
+    right: var(--space-2);
+    display: grid;
+    width: var(--space-8);
+    height: var(--space-8);
+    place-items: center;
+    border-radius: var(--r-md);
+    color: inherit;
+}
+.canvas-workspace-close:hover {
+    background: var(--dock-command-hover);
+}
+.canvas-workspace-close:focus-visible {
+    outline: 2px solid var(--dock-command-active-text, var(--foreground));
+    outline-offset: 2px;
+}
 .canvas-workspace-rail {
     display: flex;
     flex-direction: column;
     flex-shrink: 0;
-    width: var(--space-16);
+    width: calc(var(--space-16) - var(--space-2));
     min-height: 0;
-    padding: var(--space-4) var(--space-2);
-    gap: var(--space-3);
+    padding: var(--space-2) var(--space-1-half);
+    gap: var(--space-1);
     overflow-y: auto;
-    border-right: 1px solid var(--dock-border);
-    backdrop-filter: blur(var(--dock-blur));
+    border: 0;
+    background: transparent;
+    scrollbar-width: none;
+}
+.canvas-workspace-rail::-webkit-scrollbar {
+    display: none;
 }
 .canvas-workspace-rail-items {
     display: flex;
     flex-direction: column;
-    gap: var(--space-3);
-    flex-shrink: 0;
-}
-.canvas-workspace-rail-divider {
-    height: 1px;
-    margin-inline: var(--space-2);
-    background: var(--dock-tooltip-border);
+    gap: var(--space-1);
     flex-shrink: 0;
 }
 .canvas-workspace-rail .canvas-workspace-rail-button {
+    padding: 0;
     position: relative;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: var(--space-1);
-    min-height: var(--space-12);
+    display: grid;
+    grid-template-rows: 20px auto;
+    place-items: center;
+    justify-items: center;
+    align-content: center;
+    gap: 2px;
+    min-height: 46px;
     width: 100%;
     flex-shrink: 0;
     border-radius: var(--r-lg);
-    font-size: var(--fs-tiny);
-    line-height: 1.4;
+    font-size: var(--fs-nano);
+    line-height: 1;
     font-weight: 500;
-    color: inherit;
+    text-align: center;
+    color: color-mix(in srgb, currentColor 72%, transparent);
     transition:
         background-color var(--motion-instant) ease-out,
         color var(--motion-instant) ease-out;
 }
+.canvas-workspace-rail .canvas-workspace-rail-button > span {
+    display: block;
+    width: 100%;
+    text-align: center;
+}
 .canvas-workspace-rail svg {
-    width: var(--space-5);
-    height: var(--space-5);
-    stroke-width: 1.65;
+    display: block;
+    width: 18px;
+    height: 18px;
+    margin-inline: auto;
+    stroke-width: 1.75;
 }
 .canvas-workspace-rail .canvas-workspace-rail-button:hover {
     background: var(--dock-command-hover);
+    color: currentColor;
 }
 .canvas-workspace-rail .canvas-workspace-rail-button[aria-pressed="true"] {
     background: var(--dock-command-active);
     color: var(--dock-command-active-text);
 }
-.canvas-workspace-rail-button[aria-pressed="true"]::before {
-    content: "";
-    position: absolute;
-    inset-inline-start: calc(-1 * var(--space-2));
-    top: var(--space-4);
-    bottom: var(--space-4);
-    width: 2px;
-    border-radius: var(--r-full);
-    background: currentColor;
-}
 .canvas-workspace-rail .canvas-workspace-rail-toggle {
     margin-top: auto;
 }
-.canvas-workspace-rail :focus-visible {
-    outline: 2px solid var(--dock-command-active-text);
+.canvas-workspace-rail :focus:not([data-input-modality="keyboard"]) {
+    outline: none;
+}
+.canvas-workspace-rail :focus-visible[data-input-modality="keyboard"] {
+    outline: 1px solid var(--dock-command-active-text);
     outline-offset: -2px;
 }
 @media (prefers-reduced-motion: reduce) {
diff --git a/web/src/components/canvas/canvas-workspace-panel.tsx b/web/src/components/canvas/canvas-workspace-panel.tsx
index 7109dec88..04d26e305 100644
--- a/web/src/components/canvas/canvas-workspace-panel.tsx
+++ b/web/src/components/canvas/canvas-workspace-panel.tsx
@@ -2,9 +2,9 @@ import { Link } from "react-router";
 import { CanvasWorkspaceAssetPanel } from "./canvas-workspace-asset-panel";
 import { CanvasWorkspaceHistoryPanel } from "./canvas-workspace-history-panel";
 import type { InsertAssetPayload } from "./asset-picker-modal";
-import { useDeferredValue, useState } from "react";
+import { useDeferredValue, useState, type CSSProperties, type KeyboardEvent, type PointerEvent } from "react";
 import { Button, Grid } from "antd";
-import { Home, PanelLeftClose, PanelLeftOpen, Layers, Images, ListChecks, History, X } from "lucide-react";
+import { Home, PanelLeftClose, PanelLeftOpen, Layers3, Images, ListChecks, History, X } from "lucide-react";
 import { AppDrawer } from "@/components/ui/product/app-drawer";
 import { searchCanvasNodes } from "@/lib/canvas/canvas-node-search";
 import { useEffectiveConfig } from "@/stores/use-config-store";
@@ -50,15 +50,18 @@ export function CanvasWorkspacePanel({
     const deferredQuery = useDeferredValue(query);
     const config = useEffectiveConfig();
     const screens = Grid.useBreakpoint();
+    const markPointer = (event: PointerEvent<HTMLElement>) => {
+        event.currentTarget.dataset.inputModality = "pointer";
+    };
+    const markKeyboard = (event: KeyboardEvent<HTMLElement>) => {
+        if (event.key === "Tab" || event.key === "Enter" || event.key === " ") event.currentTarget.dataset.inputModality = "keyboard";
+    };
     const tasks = useCanvasWorkspaceTasks(projectId, open && (tab === "tasks" || history));
     const content = (
-        <div className="canvas-workspace-panel flex h-full min-h-0 flex-col bg-background text-foreground" data-canvas-no-zoom data-canvas-wheel-scroll onWheel={(e) => e.stopPropagation()} onPointerDown={(e) => e.stopPropagation()}>
-            <header className="flex items-center justify-between border-b border-border p-3">
-                <strong>工作区</strong>
-                <button aria-label="关闭工作区" onClick={onClose}>
-                    <X className="size-4" />
-                </button>
-            </header>
+        <div className="canvas-workspace-panel relative flex h-full min-h-0 flex-col text-foreground" style={{ "--canvas-workspace-base": theme.node.panel } as CSSProperties} data-canvas-no-zoom data-canvas-wheel-scroll onWheel={(e) => e.stopPropagation()} onPointerDown={(e) => e.stopPropagation()}>
+            <button className="canvas-workspace-close" type="button" aria-label="关闭工作区" onClick={onClose}>
+                <X className="size-4" />
+            </button>
             {tab === "nodes" && (
                 <CanvasWorkspaceNodeListPanel nodes={nodes} config={config} results={searchCanvasNodes(nodes, deferredQuery, nodes.length, config)} query={query} deferredQuery={deferredQuery} selectedNodeIds={selectedNodeIds} onQueryChange={setQuery} onFocus={onFocus} />
             )}
@@ -86,62 +89,67 @@ export function CanvasWorkspacePanel({
         </div>
     );
     const entries = [
-        { id: "nodes", label: "节点", icon: Layers },
+        { id: "nodes", label: "节点", icon: Layers3 },
         { id: "assets", label: "资产", icon: Images },
         { id: "tasks", label: "任务", icon: ListChecks },
         { id: "history", label: "历史", icon: History },
     ];
     return (
         <>
-            <nav className="canvas-workspace-rail" style={{ ...canvasDockStyle(theme), boxShadow: "none" }} aria-label="画布左侧菜单" data-canvas-no-zoom onWheel={(event) => event.stopPropagation()} onPointerDown={(event) => event.stopPropagation()}>
-                <Link to="/" className="canvas-workspace-rail-button" aria-label="主页" title="返回主页">
-                    <Home />
-                    <span>主页</span>
-                </Link>
-                <div className="canvas-workspace-rail-divider" aria-hidden="true" />
-                <div className="canvas-workspace-rail-items">
-                    {entries.map(({ id, label, icon: Icon }) => (
-                        <button
-                            key={id}
-                            type="button"
-                            className="canvas-workspace-rail-button"
-                            title={open && tab === id ? `收起${label}` : `打开${label}`}
-                            aria-pressed={open && tab === id}
-                            onClick={() => {
-                                if (open && tab === id) onClose();
-                                else {
-                                    setTab(id);
-                                    onOpen();
-                                }
-                            }}
-                        >
-                            <Icon />
-                            <span>{label}</span>
-                        </button>
-                    ))}
-                </div>
-                <button
-                    className="canvas-workspace-rail-button canvas-workspace-rail-toggle"
-                    type="button"
-                    onClick={open ? onClose : onOpen}
-                    aria-expanded={open}
-                    aria-label={open ? "折叠面板" : "展开面板"}
-                    title={open ? "收起面板，扩大画布" : "展开工作区面板"}
-                >
-                    {open ? <PanelLeftClose /> : <PanelLeftOpen />}
-                    <span>{open ? "收起" : "展开"}</span>
-                </button>
-            </nav>
-            {open &&
-                (screens.lg ? (
-                    <aside className="w-80 shrink-0 border-r border-border min-h-0" aria-label="画布工作区">
+            <div className="canvas-workspace-shell" style={{ ...canvasDockStyle(theme), "--canvas-workspace-base": theme.node.panel, background: undefined } as CSSProperties}>
+                <nav className="canvas-workspace-rail" aria-label="画布左侧菜单" data-canvas-no-zoom onWheel={(event) => event.stopPropagation()} onPointerDown={(event) => event.stopPropagation()}>
+                    <Link to="/" className="canvas-workspace-rail-button" aria-label="主页" title="返回主页">
+                        <Home />
+                        <span>主页</span>
+                    </Link>
+                    <div className="canvas-workspace-rail-items">
+                        {entries.map(({ id, label, icon: Icon }) => (
+                            <button
+                                key={id}
+                                type="button"
+                                className="canvas-workspace-rail-button"
+                                title={open && tab === id ? `收起${label}` : `打开${label}`}
+                                aria-pressed={open && tab === id}
+                                onPointerDown={markPointer}
+                                onKeyDown={markKeyboard}
+                                onClick={() => {
+                                    if (open && tab === id) onClose();
+                                    else {
+                                        setTab(id);
+                                        onOpen();
+                                    }
+                                }}
+                            >
+                                <Icon />
+                                <span>{label}</span>
+                            </button>
+                        ))}
+                    </div>
+                    <button
+                        className="canvas-workspace-rail-button canvas-workspace-rail-toggle"
+                        type="button"
+                        onClick={open ? onClose : onOpen}
+                        onPointerDown={markPointer}
+                        onKeyDown={markKeyboard}
+                        aria-expanded={open}
+                        aria-label={open ? "折叠面板" : "展开面板"}
+                        title={open ? "收起面板，扩大画布" : "展开工作区面板"}
+                    >
+                        {open ? <PanelLeftClose /> : <PanelLeftOpen />}
+                        <span>{open ? "收起" : "展开"}</span>
+                    </button>
+                </nav>
+                {open && screens.lg ? (
+                    <aside className="w-80 shrink-0 min-h-0" aria-label="画布工作区">
                         {content}
                     </aside>
-                ) : (
-                    <AppDrawer flush open placement="left" title={null} closable={false} size={320} onClose={onClose}>
-                        {content}
-                    </AppDrawer>
-                ))}
+                ) : null}
+            </div>
+            {open && !screens.lg ? (
+                <AppDrawer flush open placement="left" title={null} closable={false} size={320} onClose={onClose}>
+                    {content}
+                </AppDrawer>
+            ) : null}
         </>
     );
 }
diff --git a/web/src/components/canvas/infinite-canvas.tsx b/web/src/components/canvas/infinite-canvas.tsx
index 7171a1bb5..c3e37f842 100644
--- a/web/src/components/canvas/infinite-canvas.tsx
+++ b/web/src/components/canvas/infinite-canvas.tsx
@@ -493,7 +493,7 @@ function isCanvasInternalDragEvent(event: React.DragEvent<HTMLDivElement>) {
     return Boolean(target?.closest(CANVAS_INTERNAL_DRAG_SELECTOR));
 }
 
-function CanvasGrid({ appearance, mode }: { appearance?: CanvasAppearance; mode: CanvasBackgroundMode }) {
+export function CanvasGrid({ appearance, mode }: { appearance?: CanvasAppearance; mode: CanvasBackgroundMode }) {
     const colorTheme = useActiveTheme();
     const gridColor = resolveCanvasGridColor(appearance, colorTheme, mode);
     const backgroundImage = mode === "dots" ? `radial-gradient(circle, ${gridColor} 0.8px, transparent 1px)` : `linear-gradient(${gridColor} 1px, transparent 1px), linear-gradient(90deg, ${gridColor} 1px, transparent 1px)`;
diff --git a/web/src/pages/canvas/project.tsx b/web/src/pages/canvas/project.tsx
index 0fa52fa57..6eaf88555 100644
--- a/web/src/pages/canvas/project.tsx
+++ b/web/src/pages/canvas/project.tsx
@@ -2550,7 +2550,7 @@ function InfiniteCanvasPage() {
             >
                 跳转到画布主内容
             </a>
-            <main id="canvas-main" tabIndex={-1} className="flex h-full min-h-0 overflow-hidden outline-none" style={{ background: resolvedCanvasAppearance.background, color: theme.node.text }}>
+            <main id="canvas-main" tabIndex={-1} className={`relative flex h-full min-h-0 overflow-hidden outline-none ${!focusMode && !versions.preview ? `canvas-main-with-workspace ${workspaceOpen ? "canvas-workspace-expanded" : ""}` : ""}`} style={{ background: resolvedCanvasAppearance.background, color: theme.node.text }}>
                 {!focusMode && !versions.preview ? <CanvasWorkspacePanel key={projectId} open={workspaceOpen} onOpen={() => setWorkspaceOpen(true)} onInsertAssets={handleProjectAssetsInsert} projectId={projectId} nodes={nodes} selectedNodeIds={selectedNodeIds} onClose={() => setWorkspaceOpen(false)} onAssets={() => openCanvasAssetLibrary()} onProjectAssets={currentProject?.projectId ? () => openProjectAssets() : undefined} onCancelTask={cancelCanvasTask} onFocus={nodeId => {
                     const target = nodeById.get(nodeId);
                     const parent = target?.parentId ? nodeById.get(target.parentId) : null;
@@ -3019,7 +3019,7 @@ function InfiniteCanvasPage() {
                             <CanvasOverlayLayerContainer
                                 overlayId="asset-tray"
                                 fallbackZIndex="var(--z-panel)"
-                                className="absolute bottom-[calc(var(--canvas-inset-y)+var(--space-16))] left-[var(--canvas-inset-x)] flex items-end gap-2 lg:bottom-[var(--canvas-inset-y)]"
+                                className="canvas-workspace-zoom-controls absolute bottom-[calc(var(--canvas-inset-y)+var(--space-16))] left-[var(--canvas-inset-x)] flex items-end gap-2 lg:bottom-[var(--canvas-inset-y)]"
                                 onMouseDown={(event) => event.stopPropagation()}
                                 onPointerDown={(event) => event.stopPropagation()}
                                 onWheel={(event) => event.stopPropagation()}
diff --git a/web/test/canvas-workspace-sidebar.test.ts b/web/test/canvas-workspace-sidebar.test.ts
index d35a617ae..7aace5104 100644
--- a/web/test/canvas-workspace-sidebar.test.ts
+++ b/web/test/canvas-workspace-sidebar.test.ts
@@ -67,22 +67,55 @@ test("workspace starts collapsed and keeps separated navigation and bottom toggl
     expect(panel).toContain('className="canvas-workspace-rail-items"');
     expect(panel.indexOf("canvas-workspace-rail-toggle")).toBeGreaterThan(panel.indexOf("entries.map"));
     const css = component("canvas-workspace-panel.css");
-    expect(css).toContain("gap: var(--space-3)");
+    expect(css).toContain("gap: var(--space-1)");
     expect(css).toContain("margin-top: auto");
     expect(css).toContain("prefers-reduced-motion: reduce");
 });
 
-test("rail shares canvas dock colors rather than muted workspace navigation colors", () => {
+test("rail inherits canvas dock colors from the workspace shell", () => {
     const panel = component("canvas-workspace-panel.tsx");
     expect(panel).toContain("canvasThemes[useActiveTheme()]");
-    expect(panel).toContain('...canvasDockStyle(theme), boxShadow: "none"');
+    expect(panel).toContain('className="canvas-workspace-shell" style={{ ...canvasDockStyle(theme)');
+    expect(panel).toContain("background: undefined");
+    expect(panel).not.toContain('boxShadow: "none"');
     const railCss = component("canvas-workspace-panel.css").split(".canvas-workspace-rail {")[1];
     expect(railCss).not.toContain("var(--muted-foreground)");
     expect(railCss).not.toContain("var(--workspace-navigation)");
-    for (const token of ["--dock-command-hover", "--dock-command-active", "--dock-command-active-text", "--dock-tooltip-border"]) expect(railCss).toContain(`var(${token})`);
+    for (const token of ["--dock-command-hover", "--dock-command-active", "--dock-command-active-text"]) expect(railCss).toContain(`var(${token})`);
     for (const theme of Object.values(canvasThemes)) {
         const style = canvasDockStyle(theme);
         expect(style.background).toBe("var(--dock-surface)");
         expect(style.color).toBe(theme.toolbar.item);
     }
 });
+
+test("editor rail and expanded panel share one restrained glass surface without hard dividers", () => {
+    const page = readFileSync(new URL("../src/pages/canvas/project.tsx", import.meta.url), "utf8");
+    const panel = component("canvas-workspace-panel.tsx");
+    const styles = component("canvas-workspace-panel.css");
+    expect(page).toContain('<InfiniteCanvas');
+    expect(page).not.toContain("canvas-workspace-backdrop");
+    expect(page).toContain("canvas-main-with-workspace");
+    expect(styles).toContain(".canvas-main-with-workspace .canvas-editor-shell {\n    z-index: 0;");
+    expect(styles).toContain(".canvas-workspace-shell {\n    position: absolute;");
+    expect(styles).toContain("left: var(--canvas-workspace-inset)");
+    expect(styles).toContain(".canvas-workspace-zoom-controls");
+    expect(styles).toContain(".canvas-main-with-workspace > .canvas-project-sidebar {\n        margin-left: var(--space-16);");
+    expect(styles).toContain(".canvas-main-with-workspace:has(> .canvas-project-sidebar) .canvas-topbar");
+    expect(panel).not.toContain("canvas-workspace-rail-divider");
+    expect(panel).not.toContain("<strong>工作区</strong>");
+    expect(styles).not.toContain(".canvas-workspace-rail-divider");
+    expect(styles).not.toContain("border-right: 1px solid var(--dock-border)");
+    expect(styles).not.toContain('canvas-workspace-rail-button[aria-pressed="true"]::before');
+    expect(styles).toContain("margin: var(--space-2) 0 var(--space-2) var(--space-2)");
+    expect(styles).toContain("--canvas-workspace-material: color-mix(in srgb, var(--canvas-workspace-base, var(--background)) 72%, transparent);");
+    expect(styles).not.toContain("backdrop-filter: blur(16px)");
+    expect(styles).toContain("backdrop-filter: blur(22px) saturate(140%);");
+    expect(styles).toContain(".canvas-workspace-shell .canvas-workspace-panel {\n    background: transparent;");
+    expect(styles).toContain(".canvas-workspace-panel > :is(header, .border-b) {\n    border-bottom: 0 !important;");
+    expect(styles).toContain("border-radius: var(--r-2xl)");
+    expect(styles).not.toContain("border-radius: calc(var(--radius) * 3.5)");
+    expect(page).toContain('workspaceOpen ? "canvas-workspace-expanded" : ""');
+    expect(styles).not.toContain("backdrop-filter: none");
+    expect(styles).not.toContain("box-shadow: none");
+});
diff --git a/web/test/workspace-menu-density.test.tsx b/web/test/workspace-menu-density.test.tsx
index 0f3cee772..202853bed 100644
--- a/web/test/workspace-menu-density.test.tsx
+++ b/web/test/workspace-menu-density.test.tsx
@@ -88,5 +88,14 @@ test("menu surfaces are explicitly scoped and old account inner overrides are re
     expect(css).toContain("box-shadow: none !important");
     expect(css).not.toContain(".ant-modal");
     expect(globals).not.toContain(".workspace-account-popover .ant-popover-inner");
-    expect(globals).toContain(".ant-select:has(input:focus-visible)");
+    expect(globals).toContain(".ant-select:not(.ant-select-open):has(input:focus-visible)");
+    expect(globals).toContain(".ant-select-dropdown, .ant-dropdown-menu) {\n    border: 0 !important;");
+    expect(globals).toContain("body.app-spatial-overlays :where(.ant-dropdown-menu, .ant-select-dropdown, .ant-cascader-menus, .ant-mentions-dropdown) {\n        border: 0 !important;");
+});
+
+test("shared single-select popup uses a borderless surface instead of a bright focus frame", () => {
+    const select = readFileSync(new URL("../src/components/ui/base/select/select.tsx", import.meta.url), "utf8");
+    expect(select).toContain("rounded-[var(--r-lg)] border-0 bg-surface-strong");
+    expect(select).toContain("focus-visible:ring-1 focus-visible:ring-[var(--control-selected-border)]");
+    expect(select).not.toContain('setPopoverWidth(width + 2)');
 });