From 58f41e83cf8c6d188f933c5f0e6f6d602fe45957 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=88=B1=E7=AC=91=E7=9A=84=E6=AF=9B=E6=AF=9B=E8=99=AB?= <315515767@qq.com> Date: Mon, 17 Aug 2026 09:27:39 +0800 Subject: [PATCH] =?UTF-8?q?refactor(canvas):=20=E7=94=BB=E5=B8=83=E5=B7=A5?= =?UTF-8?q?=E5=85=B7=E6=A0=8F=20-=20=E6=94=B6=E6=95=9B=20Dock=20=E6=94=BE?= =?UTF-8?q?=E5=A4=A7=E4=B8=8E=E4=BA=A4=E4=BA=92=E7=8A=B6=E6=80=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 保留当前画布视觉体系，统一 Dock 按钮形态、状态反馈与子菜单展开关系。\n\nCloses #244 --- web/src/components/canvas/canvas-toolbar.tsx | 8 ++-- .../ui/aceternity/floating-dock.tsx | 8 ++-- web/src/styles/globals.css | 47 +++---------------- 3 files changed, 16 insertions(+), 47 deletions(-) diff --git a/web/src/components/canvas/canvas-toolbar.tsx b/web/src/components/canvas/canvas-toolbar.tsx index a538a261c..63f336e8f 100644 --- a/web/src/components/canvas/canvas-toolbar.tsx +++ b/web/src/components/canvas/canvas-toolbar.tsx @@ -192,8 +192,8 @@ export function CanvasToolbar({ {appearanceOpen ? ( - - event.stopPropagation()}> + + event.stopPropagation()}> } title="画布外观" subtitle="调整整个创作空间" theme={theme} />
主题模式
@@ -231,8 +231,8 @@ function AddNodeMenu({ x, theme, commands }: { commands: CanvasCreateCommand[]; }) { return ( - - event.stopPropagation()}> + + event.stopPropagation()}> diff --git a/web/src/components/ui/aceternity/floating-dock.tsx b/web/src/components/ui/aceternity/floating-dock.tsx index ad7f62878..820c0f429 100644 --- a/web/src/components/ui/aceternity/floating-dock.tsx +++ b/web/src/components/ui/aceternity/floating-dock.tsx @@ -40,9 +40,11 @@ type DockMetrics = { distance: number; }; +// magnification 收敛：base 略增以适配圆角方块，magnified 幅度从 +14 降到 +8， +// 避免 dock 整体跳动，同时保留 Aceternity 接近放大身份。 const DOCK_METRICS: Record, DockMetrics> = { - default: { base: 29, magnified: 43, icon: 14, iconMagnified: 19, distance: 108 }, - compact: { base: 25, magnified: 35, icon: 13, iconMagnified: 17, distance: 88 }, + default: { base: 30, magnified: 38, icon: 15, iconMagnified: 18, distance: 100 }, + compact: { base: 26, magnified: 32, icon: 13, iconMagnified: 16, distance: 84 }, }; const TOUCH_DOCK_METRICS: Record, DockMetrics> = { @@ -228,7 +230,7 @@ function DockCommandButton({ command, mouseX, metrics, motionEnabled, compact, s aria-expanded={command.expands ? command.active || undefined : undefined} aria-pressed={command.expands ? undefined : command.active || undefined} disabled={command.disabled} - className={cn("aceternity-dock-command group relative grid size-full place-items-center rounded-full border outline-none", command.quiet && "is-quiet", command.active && "is-active", command.danger && "is-danger")} + className={cn("aceternity-dock-command group relative grid size-full place-items-center rounded-[var(--dock-item-radius)] border outline-none", command.quiet && "is-quiet", command.active && "is-active", command.danger && "is-danger")} whileTap={motionEnabled && !command.disabled ? { scale: 0.92 } : undefined} transition={aceternityMotion.spring.dock} onMouseEnter={() => setHovered(true)} diff --git a/web/src/styles/globals.css b/web/src/styles/globals.css index 4bdf3a752..930deef68 100644 --- a/web/src/styles/globals.css +++ b/web/src/styles/globals.css @@ -5030,16 +5030,17 @@ box-shadow: 0 24px 72px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.16); } + /* Dock 命令按钮：BottomMenu 式干净状态——透明默认 + hover/active 仅换底色， + 去掉描边/内阴影/发光阴影的多层反馈，hover 与 active 用同一套视觉语言， + 保持 dock 整体性（参考 uselayouts BottomMenu 的 bg-muted/bg-accent 切换）。*/ .aceternity-dock-command { - border-color: color-mix(in srgb, currentColor 11%, transparent); - background: var(--dock-command-bg); + border-color: transparent; + background: transparent; color: inherit; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 5px 15px rgba(15, 23, 42, 0.08); + box-shadow: none; transition: - border-color var(--motion-instant) ease-out, background-color var(--motion-instant) ease-out, - color var(--motion-instant) ease-out, - box-shadow var(--motion-instant) ease-out; + color var(--motion-instant) ease-out; } .aceternity-dock-command > span:first-child svg { @@ -5049,33 +5050,12 @@ } .aceternity-dock-command:hover:not(:disabled) { - border-color: color-mix(in srgb, currentColor 20%, transparent); background: var(--dock-command-hover); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 12px 30px rgba(15, 23, 42, 0.14); - } - - .aceternity-dock-command.is-labeled { - border-color: transparent; - background: transparent; - box-shadow: none; - } - - .aceternity-dock-command.is-labeled:hover:not(:disabled) { - border-color: transparent; - background: var(--dock-command-hover); - box-shadow: none; - } - - .aceternity-dock-command.is-labeled.is-active { - border-color: transparent; - box-shadow: none; } .aceternity-dock-command.is-active { - border-color: color-mix(in srgb, var(--dock-command-active) 28%, transparent); background: var(--dock-command-active); color: var(--dock-command-active-text); - box-shadow: 0 12px 30px color-mix(in srgb, var(--dock-command-active) 22%, transparent); } .aceternity-dock-command.is-active > span:first-child, @@ -5085,19 +5065,6 @@ opacity: 1; } - .aceternity-dock-command.is-quiet { - border-color: transparent; - background: transparent; - box-shadow: none; - } - - .aceternity-dock-command.is-quiet:hover:not(:disabled), - .aceternity-dock-command.is-quiet.is-active { - border-color: transparent; - background: var(--dock-command-hover); - box-shadow: none; - } - .aceternity-dock-command.is-danger { color: var(--dock-command-danger); }