tt/ttstd-infinite-canvas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(*): 空间界面 - 统一工作台浮层并收敛画布模型选择焦点样式

Browse Source
This commit is contained in:
ddCat
2026-07-31 17:16:26 +08:00
parent d94f4c6bed
commit 7dd2a5881b
2 changed files with 153 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
web/src/layouts/user-layout.tsx
View File

@@ -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 (
<div className={cn("app-user-workspace h-dvh overflow-hidden text-foreground", spatialWorkbench && "app-spatial-workspace")}>
<AppWorkspaceShell>{children}</AppWorkspaceShell>

155
web/src/styles/globals.css
View File

@@ -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),