From 7dd2a5881b7ac3594336223c6f84ec6c272a4e86 Mon Sep 17 00:00:00 2001 From: ddCat <2695092045@qq.com> Date: Fri, 31 Jul 2026 17:16:26 +0800 Subject: [PATCH] =?UTF-8?q?feat(*):=20=E7=A9=BA=E9=97=B4=E7=95=8C=E9=9D=A2?= =?UTF-8?q?=20-=20=E7=BB=9F=E4=B8=80=E5=B7=A5=E4=BD=9C=E5=8F=B0=E6=B5=AE?= =?UTF-8?q?=E5=B1=82=E5=B9=B6=E6=94=B6=E6=95=9B=E7=94=BB=E5=B8=83=E6=A8=A1?= =?UTF-8?q?=E5=9E=8B=E9=80=89=E6=8B=A9=E7=84=A6=E7=82=B9=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/src/layouts/user-layout.tsx | 9 +- web/src/styles/globals.css | 155 +++++++++++++++++++++++++++++--- 2 files changed, 153 insertions(+), 11 deletions(-) diff --git a/web/src/layouts/user-layout.tsx b/web/src/layouts/user-layout.tsx index 83fcb4c11..c532ee46e 100644 --- a/web/src/layouts/user-layout.tsx +++ b/web/src/layouts/user-layout.tsx @@ -1,4 +1,4 @@ -import type { ReactNode } from "react"; +import { useLayoutEffect, type ReactNode } from "react"; import { useLocation } from "react-router"; import { CanvasDeleteProjectsDialog } from "@/components/canvas/canvas-delete-projects-dialog"; @@ -9,6 +9,13 @@ import { isSpatialWorkbenchPath } from "@/lib/workspace-routes"; export default function UserLayout({ children }: { children: ReactNode }) { const { pathname } = useLocation(); const spatialWorkbench = isSpatialWorkbenchPath(pathname); + + useLayoutEffect(() => { + // Ant Design 浮层挂载在 body，必须用路由级标记隔离用户工作台与画布编辑器、运营后台。 + document.body.classList.toggle("app-spatial-overlays", spatialWorkbench); + return () => document.body.classList.remove("app-spatial-overlays"); + }, [spatialWorkbench]); + return (
{children} diff --git a/web/src/styles/globals.css b/web/src/styles/globals.css index 70a70fea3..4ccabc1d3 100644 --- a/web/src/styles/globals.css +++ b/web/src/styles/globals.css @@ -186,7 +186,7 @@ --workspace-border-strong: rgba(17, 17, 17, 0.2); --workspace-grid-line: rgba(17, 17, 17, 0.035); --workspace-nav: rgba(250, 250, 250, 0.86); - --workspace-sidebar: rgba(250, 250, 250, 0.88); + --workspace-sidebar: rgba(250, 250, 250, 0.72); --workspace-accent: #171717; --workspace-accent-soft: rgba(17, 17, 17, 0.065); background-color: var(--workspace-canvas); @@ -204,7 +204,7 @@ --workspace-border-strong: rgba(255, 255, 255, 0.18); --workspace-grid-line: rgba(255, 255, 255, 0.026); --workspace-nav: rgba(10, 10, 10, 0.88); - --workspace-sidebar: rgba(14, 14, 14, 0.9); + --workspace-sidebar: rgba(12, 12, 13, 0.72); --workspace-accent: #f5f5f5; --workspace-accent-soft: rgba(255, 255, 255, 0.08); } @@ -225,19 +225,153 @@ } .app-workspace-shell.is-spatial .app-workspace-sidebar { - border: 1px solid var(--workspace-border); + border: 1px solid color-mix(in srgb, var(--foreground) 16%, transparent); border-radius: 8px; - background: var(--workspace-sidebar); + background: + linear-gradient(145deg, color-mix(in srgb, white 10%, transparent), transparent 24%, transparent 76%, color-mix(in srgb, var(--foreground) 3%, transparent)), + var(--workspace-sidebar); box-shadow: 0 26px 70px rgba(0, 0, 0, 0.12), - inset 0 1px 0 color-mix(in srgb, white 12%, transparent); - backdrop-filter: blur(24px) saturate(125%); + inset 0 1px 0 color-mix(in srgb, white 24%, transparent), + inset 1px 0 0 color-mix(in srgb, white 7%, transparent); + backdrop-filter: blur(28px) saturate(132%); + -webkit-backdrop-filter: blur(28px) saturate(132%); } .dark .app-workspace-shell.is-spatial .app-workspace-sidebar { box-shadow: 0 28px 80px rgba(0, 0, 0, 0.46), - inset 0 1px 0 rgba(255, 255, 255, 0.08); + inset 0 1px 0 rgba(255, 255, 255, 0.18), + inset 1px 0 0 rgba(255, 255, 255, 0.055); + } + + body.app-spatial-overlays { + --workspace-overlay-bg: rgba(244, 244, 245, 0.78); + --workspace-overlay-bg-strong: rgba(250, 250, 250, 0.88); + --workspace-overlay-border: rgba(17, 17, 17, 0.22); + --workspace-overlay-divider: rgba(17, 17, 17, 0.1); + --workspace-overlay-highlight: rgba(255, 255, 255, 0.86); + --workspace-overlay-hover: rgba(17, 17, 17, 0.065); + --workspace-overlay-selected: rgba(17, 17, 17, 0.1); + --workspace-overlay-shadow: 0 26px 72px rgba(15, 23, 42, 0.18), 0 4px 18px rgba(15, 23, 42, 0.08); + } + + .dark body.app-spatial-overlays { + --workspace-overlay-bg: rgba(10, 10, 11, 0.78); + --workspace-overlay-bg-strong: rgba(15, 15, 16, 0.88); + --workspace-overlay-border: rgba(255, 255, 255, 0.22); + --workspace-overlay-divider: rgba(255, 255, 255, 0.105); + --workspace-overlay-highlight: rgba(255, 255, 255, 0.2); + --workspace-overlay-hover: rgba(255, 255, 255, 0.075); + --workspace-overlay-selected: rgba(255, 255, 255, 0.115); + --workspace-overlay-shadow: 0 30px 84px rgba(0, 0, 0, 0.62), 0 8px 24px rgba(0, 0, 0, 0.34); + } + + body.app-spatial-overlays :where( + .ant-dropdown-menu, + .ant-select-dropdown, + .ant-popover-inner, + .ant-picker-dropdown .ant-picker-panel-container, + .ant-cascader-menus, + .ant-mentions-dropdown, + .ant-tooltip-inner, + .ant-modal-content, + .ant-drawer-content, + .ant-message-notice-content, + .ant-notification-notice + ) { + border: 1px solid var(--workspace-overlay-border) !important; + background: + linear-gradient(145deg, var(--workspace-overlay-highlight), transparent 24%, transparent 76%, rgba(158, 178, 214, 0.055)), + var(--workspace-overlay-bg) !important; + box-shadow: + var(--workspace-overlay-shadow), + inset 0 1px 0 var(--workspace-overlay-highlight), + inset 1px 0 0 color-mix(in srgb, var(--workspace-overlay-highlight) 36%, transparent) !important; + backdrop-filter: blur(30px) saturate(138%) !important; + -webkit-backdrop-filter: blur(30px) saturate(138%) !important; + } + + body.app-spatial-overlays :where(.ant-modal-content, .ant-drawer-content, .ant-notification-notice) { + background: + linear-gradient(145deg, var(--workspace-overlay-highlight), transparent 20%, transparent 82%, rgba(158, 178, 214, 0.05)), + var(--workspace-overlay-bg-strong) !important; + } + + body.app-spatial-overlays :where(.ant-dropdown-menu, .ant-select-dropdown, .ant-popover-inner, .ant-cascader-menus, .ant-mentions-dropdown) { + border-radius: 8px !important; + } + + body.app-spatial-overlays :where( + .ant-dropdown-menu-item:not(.ant-dropdown-menu-item-disabled), + .ant-dropdown-menu-submenu-title:not(.ant-dropdown-menu-item-disabled), + .ant-select-item-option:not(.ant-select-item-option-disabled), + .ant-cascader-menu-item:not(.ant-cascader-menu-item-disabled), + .ant-mentions-dropdown-menu-item + ) { + border-radius: 5px; + transition: background-color var(--motion-instant) ease-out, color var(--motion-instant) ease-out; + } + + body.app-spatial-overlays :where( + .ant-dropdown-menu-item:not(.ant-dropdown-menu-item-disabled):hover, + .ant-dropdown-menu-submenu-title:not(.ant-dropdown-menu-item-disabled):hover, + .ant-select-item-option-active:not(.ant-select-item-option-disabled), + .ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled), + .ant-mentions-dropdown-menu-item-active + ) { + background: var(--workspace-overlay-hover) !important; + } + + body.app-spatial-overlays :where( + .ant-dropdown-menu-item-selected, + .ant-select-item-option-selected:not(.ant-select-item-option-disabled), + .ant-cascader-menu-item-active + ) { + background: var(--workspace-overlay-selected) !important; + color: var(--foreground) !important; + } + + body.app-spatial-overlays :where( + .ant-dropdown-menu-item-divider, + .ant-popover-inner-content > .border-b, + .ant-popover-inner-content > .border-y, + .ant-modal-header, + .ant-modal-footer, + .ant-drawer-header + ) { + border-color: var(--workspace-overlay-divider) !important; + } + + body.app-spatial-overlays :where(.ant-popover-arrow::before, .ant-tooltip-arrow::before) { + border: 1px solid var(--workspace-overlay-border); + background: var(--workspace-overlay-bg-strong) !important; + } + + body.app-spatial-overlays :where(.ant-modal-mask, .ant-drawer-mask) { + background: rgba(0, 0, 0, 0.48) !important; + backdrop-filter: blur(7px); + -webkit-backdrop-filter: blur(7px); + } + + @media (prefers-reduced-transparency: reduce) { + body.app-spatial-overlays :where( + .ant-dropdown-menu, + .ant-select-dropdown, + .ant-popover-inner, + .ant-picker-dropdown .ant-picker-panel-container, + .ant-cascader-menus, + .ant-mentions-dropdown, + .ant-tooltip-inner, + .ant-modal-content, + .ant-drawer-content, + .ant-message-notice-content, + .ant-notification-notice + ) { + background: var(--workspace-overlay-bg-strong) !important; + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; + } } .app-workspace-shell.is-spatial .app-workspace-brand-mark { @@ -1389,14 +1523,15 @@ } .canvas-composer-model-picker.ant-select .ant-select-content { - background: color-mix(in srgb, var(--background) 96%, var(--foreground) 4%) !important; - border-color: color-mix(in srgb, var(--foreground) 16%, transparent) !important; + background: var(--background) !important; + border-color: color-mix(in srgb, var(--foreground) 8%, transparent) !important; box-shadow: none !important; } .canvas-composer-model-picker.ant-select-focused .ant-select-content { - border-color: color-mix(in srgb, var(--foreground) 28%, transparent) !important; + border-color: color-mix(in srgb, var(--foreground) 8%, transparent) !important; box-shadow: none !important; + outline: none !important; } .canvas-model-picker-popup .ant-select-item-option-active:not(.ant-select-item-option-disabled),