feat(*): 用户工作台 - 统一黑白灰空间界面并整理画布入口

web/src/components/layout/app-top-nav.tsx

@@ -1,5 +1,5 @@
 import { Infinity as InfinityIcon, PanelLeftClose, PanelLeftOpen } from "lucide-react";
-import { useEffect, useState, type ReactNode } from "react";
+import { Fragment, useEffect, useState, type ReactNode } from "react";
 import { Link, useLocation, useNavigate } from "react-router";
 
 import { ModelSetupGuide } from "@/components/layout/model-setup-guide";
@@ -7,6 +7,7 @@ import { WORKSPACE_SIDEBAR_STORAGE_KEY } from "@/components/layout/workspace-sid
 import { WorkspaceSidebarFooter } from "@/components/layout/workspace-sidebar-footer";
 import { navigationTools, type NavigationToolSlug } from "@/constant/navigation-tools";
 import { cn } from "@/lib/utils";
+import { isSpatialWorkbenchPath } from "@/lib/workspace-routes";
 
 export function AppWorkspaceShell({ children }: { children: ReactNode }) {
     const { pathname } = useLocation();
@@ -14,9 +15,11 @@ export function AppWorkspaceShell({ children }: { children: ReactNode }) {
     const [mobileSidebarExpanded, setMobileSidebarExpanded] = useState(false);
     const [sidebarCollapsed, setSidebarCollapsed] = useState(() => window.localStorage.getItem(WORKSPACE_SIDEBAR_STORAGE_KEY) === "1");
     const hideChrome = pathname.startsWith("/admin") || /^\/canvas\/[^/]+/.test(pathname);
+    const spatialWorkbench = isSpatialWorkbenchPath(pathname);
     const compactSidebar = sidebarCollapsed;
     const slug = pathname.split("/").filter(Boolean)[0];
     const activeToolSlug = navigationTools.some((tool) => tool.slug === slug) ? (slug as NavigationToolSlug) : undefined;
+    const visibleNavigationTools = spatialWorkbench ? navigationTools : navigationTools.filter((tool) => tool.section === "创作空间");
 
     useEffect(() => {
         window.localStorage.setItem(WORKSPACE_SIDEBAR_STORAGE_KEY, sidebarCollapsed ? "1" : "0");
@@ -35,9 +38,10 @@ export function AppWorkspaceShell({ children }: { children: ReactNode }) {
 
     return (
         <>
-            <div className="flex h-dvh min-h-0 w-full overflow-hidden">
+            <div className={cn("app-workspace-shell flex h-dvh min-h-0 w-full overflow-hidden", spatialWorkbench && "is-spatial")}>
+                {spatialWorkbench && mobileSidebarExpanded ? <button type="button" className="app-workspace-sidebar-scrim lg:hidden" aria-label="收起侧栏" onClick={() => setMobileSidebarExpanded(false)} /> : null}
                 {!hideChrome ? (
-                    <aside className={cn("app-workspace-sidebar flex shrink-0 flex-col overflow-hidden", mobileSidebarExpanded ? "w-[196px]" : "w-[52px]", compactSidebar ? "lg:w-[60px]" : "lg:w-[220px]")}>
+                    <aside className={cn("app-workspace-sidebar flex shrink-0 flex-col overflow-hidden", mobileSidebarExpanded ? "is-mobile-expanded w-[196px]" : "w-[52px]", compactSidebar ? "lg:w-[60px]" : "lg:w-[220px]")}>
                         <div
                             className={cn(
                                 "flex h-14 shrink-0 items-center border-b border-border/55 text-foreground",
@@ -46,8 +50,8 @@ export function AppWorkspaceShell({ children }: { children: ReactNode }) {
                             )}
                         >
                             <Link to="/" className={cn("min-w-0 items-center gap-2", mobileSidebarExpanded ? "flex" : "hidden", compactSidebar ? "lg:hidden" : "lg:flex")} title="影策">
-                                <span className="grid size-7 shrink-0 place-items-center rounded-md bg-foreground text-background"><InfinityIcon className="size-4" /></span>
-                                <span className="truncate text-[13px] font-semibold">影策</span>
+                                <span className="app-workspace-brand-mark grid size-7 shrink-0 place-items-center rounded-md bg-foreground text-background"><InfinityIcon className="size-4" /></span>
+                                {spatialWorkbench ? <span className="min-w-0"><span className="block truncate text-[13px] font-semibold">影策</span><span className="block truncate text-[9px] text-foreground/36">AI 叙事工作台</span></span> : <span className="truncate text-[13px] font-semibold">影策</span>}
                             </Link>
                             <button
                                 type="button"
@@ -65,28 +69,31 @@ export function AppWorkspaceShell({ children }: { children: ReactNode }) {
                         </div>
 
                         <nav className="flex min-h-0 flex-1 flex-col overflow-y-auto px-2 py-3">
-                            <div className={cn("mb-2 px-2 text-[10px] font-medium text-foreground/34", mobileSidebarExpanded ? "block" : "hidden", compactSidebar ? "lg:hidden" : "lg:block")}>创作空间</div>
-                            {navigationTools.map((tool) => {
+                            {visibleNavigationTools.map((tool, index) => {
                                 const Icon = tool.icon;
                                 const active = tool.slug === activeToolSlug;
+                                const showSection = index === 0 || tool.section !== visibleNavigationTools[index - 1]?.section;
                                 return (
-                                    <Link
-                                        key={tool.slug}
-                                        to={`/${tool.slug}`}
-                                        title={tool.label}
-                                        onClick={() => {
-                                            if (window.innerWidth < 1024) setMobileSidebarExpanded(false);
-                                        }}
-                                        className={cn(
-                                            "app-workspace-nav-link relative mb-1 flex h-9 shrink-0 items-center rounded-md text-[13px] transition-colors",
-                                            mobileSidebarExpanded ? "gap-3 px-2.5" : "justify-center px-0",
-                                            compactSidebar ? "lg:justify-center lg:px-0" : "lg:justify-start lg:gap-3 lg:px-2.5",
-                                            active ? "is-active font-medium" : "text-foreground/55 hover:bg-foreground/[0.045] hover:text-foreground/85",
-                                        )}
-                                    >
-                                        <Icon className="size-4 shrink-0" />
-                                        <span className={cn("truncate", mobileSidebarExpanded ? "inline" : "hidden", compactSidebar ? "lg:hidden" : "lg:inline")}>{tool.label}</span>
-                                    </Link>
+                                    <Fragment key={tool.slug}>
+                                        {showSection ? <div className={cn("mb-2 px-2 text-[10px] font-medium text-foreground/34", index > 0 && "mt-4", mobileSidebarExpanded ? "block" : "hidden", compactSidebar ? "lg:hidden" : "lg:block")}>{tool.section}</div> : null}
+                                        <Link
+                                            to={`/${tool.slug}`}
+                                            title={tool.label}
+                                            onClick={() => {
+                                                if (window.innerWidth < 1024) setMobileSidebarExpanded(false);
+                                            }}
+                                            className={cn(
+                                                "app-workspace-nav-link relative mb-1 flex shrink-0 items-center rounded-md text-[13px] transition-colors",
+                                                spatialWorkbench ? "h-11" : "h-9",
+                                                mobileSidebarExpanded ? "gap-3 px-2.5" : "justify-center px-0",
+                                                compactSidebar ? "lg:justify-center lg:px-0" : "lg:justify-start lg:gap-3 lg:px-2.5",
+                                                active ? "is-active font-medium" : "text-foreground/55 hover:bg-foreground/[0.045] hover:text-foreground/85",
+                                            )}
+                                        >
+                                            <Icon className="size-4 shrink-0" />
+                                            <span className={cn("truncate", mobileSidebarExpanded ? "inline" : "hidden", compactSidebar ? "lg:hidden" : "lg:inline")}>{tool.label}</span>
+                                        </Link>
+                                    </Fragment>
                                 );
                             })}
                         </nav>
@@ -106,7 +113,7 @@ export function AppWorkspaceShell({ children }: { children: ReactNode }) {
                     </aside>
                 ) : null}
 
-                <div className="relative min-h-0 min-w-0 flex-1 overflow-hidden">{children}</div>
+                <div className="app-workspace-stage relative min-h-0 min-w-0 flex-1 overflow-hidden">{children}</div>
             </div>
             <ModelSetupGuide hidden={pathname === "/login" || pathname === "/register" || pathname.startsWith("/admin")} />
         </>

web/src/components/layout/workspace-sidebar-footer.tsx

@@ -1,5 +1,5 @@
 import { App, Popover, Switch } from "antd";
-import { BookOpenCheck, ChevronRight, Coins, LogIn, LogOut, Moon, Settings2, ShieldCheck, Sun, UserRound } from "lucide-react";
+import { ChevronRight, LogIn, LogOut, Moon, ShieldCheck, Sun, UserRound } from "lucide-react";
 import { useEffect, useState, type ReactNode } from "react";
 import { Link, useNavigate } from "react-router";
 
@@ -73,12 +73,11 @@ export function WorkspaceSidebarFooter({ expandedClassName, collapsedClassName,
                                 </div>
                             </div>
 
-                            <nav className="py-2" aria-label="账号与工具">
-                                <MenuLink to="/wallet" icon={<Coins />} label="积分与账单" onNavigate={() => setMenuOpen(false)} />
-                                <MenuLink to="/skills" icon={<BookOpenCheck />} label="技能库" onNavigate={() => setMenuOpen(false)} />
-                                <MenuLink to="/settings" icon={<Settings2 />} label="设置" onNavigate={() => setMenuOpen(false)} />
-                                {user.role === "admin" ? <MenuLink to="/admin" icon={<ShieldCheck />} label="管理员后台" onNavigate={() => setMenuOpen(false)} /> : null}
-                            </nav>
+                            {user.role === "admin" ? (
+                                <nav className="py-2" aria-label="管理工具">
+                                    <MenuLink to="/admin" icon={<ShieldCheck />} label="管理员后台" onNavigate={() => setMenuOpen(false)} />
+                                </nav>
+                            ) : null}
 
                             <div className="border-y border-border/65 py-2">
                                 <AppChangelogButton className="flex h-8 w-full items-center gap-2 rounded px-2 text-[11px] text-foreground/58 hover:bg-foreground/[.055] hover:text-foreground [&_svg]:size-3.5" showLabel showVersion versionClassName="ml-auto text-[9px] tabular-nums text-foreground/32" />
@@ -89,7 +88,7 @@ export function WorkspaceSidebarFooter({ expandedClassName, collapsedClassName,
                                 <span className="ml-2 flex-1 text-xs text-foreground/65">深色模式</span>
                                 <Switch size="small" checked={theme === "dark"} onChange={(checked) => setTheme(checked ? "dark" : "light")} aria-label="深色模式" />
                             </div>
-                            <button type="button" className="flex h-9 w-full items-center gap-2 rounded px-2 text-xs text-foreground/55 hover:bg-red-500/[.08] hover:text-red-600" onClick={() => void handleLogout()}><LogOut className="size-3.5" />退出登录</button>
+                            <button type="button" className="flex h-9 w-full items-center gap-2 rounded px-2 text-xs text-foreground/55 hover:bg-foreground/[.055] hover:text-foreground" onClick={() => void handleLogout()}><LogOut className="size-3.5" />退出登录</button>
                         </div>
                     )}
                 >