From 46091c8c670afeee97b1a3ec4c7078a816fec630 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, 3 Aug 2026 19:52:32 +0800
Subject: [PATCH] =?UTF-8?q?fix(canvas):=20=E7=A7=BB=E5=8A=A8=E7=AB=AF?=
 =?UTF-8?q?=E4=BE=A7=E8=BE=B9=E6=A0=8F=E9=80=82=E9=85=8D=20=E2=80=94=20?=
 =?UTF-8?q?=E6=8A=BD=E5=B1=89=E5=BC=8F=E9=9A=90=E8=97=8F=20+=20=E6=B1=89?=
 =?UTF-8?q?=E5=A0=A1=E8=8F=9C=E5=8D=95=20+=20=E5=85=A8=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=20scrim=20#89=20(#90)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- app-top-nav.tsx: 移动端侧边栏默认 w-0（完全隐藏），展开时通过 is-mobile-expanded
  变为 absolute 浮层；scrim 移除 spatialWorkbench 条件，全页面通用；
  stage 区域添加 lg:hidden 汉堡菜单按钮切换侧边栏显隐
- globals.css: 移动端 @media 规则通用化，is-mobile-expanded 浮层行为从
  .is-spatial 限定改为 .app-workspace-shell 通用，scrim left 从 202px 改为 0

Co-authored-by: sikongyue <3155157671@qq.com>
---
 web/src/components/layout/app-top-nav.tsx | 16 +++++++++++-----
 web/src/styles/globals.css                |  4 ++--
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/web/src/components/layout/app-top-nav.tsx b/web/src/components/layout/app-top-nav.tsx
index 25a45840d..8affacf19 100644
--- a/web/src/components/layout/app-top-nav.tsx
+++ b/web/src/components/layout/app-top-nav.tsx
@@ -1,4 +1,4 @@
-import { Infinity as InfinityIcon } from "lucide-react";
+import { Infinity as InfinityIcon, PanelLeftClose, PanelLeftOpen } from "lucide-react";
 import { Fragment, useEffect, useRef, useState, type ReactNode } from "react";
 import { Link, useLocation, useNavigate } from "react-router";
 
@@ -46,16 +46,15 @@ export function AppWorkspaceShell({ children }: { children: ReactNode }) {
     }, [navigate]);
 
     useEffect(() => {
-        // 初始化滚动状态
         handleScroll();
     }, [visibleNavigationTools.length, mobileSidebarExpanded]);
 
     return (
         <>
             <div className={cn("app-workspace-shell flex h-dvh min-h-0 w-full overflow-hidden", spatialWorkbench && "is-spatial", creationWorkspace && "is-creation-workspace")}>
-                {spatialWorkbench && mobileSidebarExpanded ? <button type="button" className="app-workspace-sidebar-scrim lg:hidden" aria-label="收起侧栏" onClick={() => setMobileSidebarExpanded(false)} /> : null}
+                {!hideChrome && 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 ? "is-mobile-expanded w-[196px]" : "w-[52px]", "lg:w-[88px]")}>
+                    <aside className={cn("app-workspace-sidebar flex shrink-0 flex-col overflow-hidden transition-all duration-200", mobileSidebarExpanded ? "is-mobile-expanded w-[196px]" : "w-0 lg:w-[88px] lg:shrink-0")}>
                         <div
                             className={cn(
                                 "flex h-14 shrink-0 items-center border-b border-border/55 text-foreground",
@@ -122,7 +121,14 @@ export function AppWorkspaceShell({ children }: { children: ReactNode }) {
                     </aside>
                 ) : null}
 
-                <div className="app-workspace-stage 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">
+                    {!hideChrome ? (
+                        <button type="button" className="app-workspace-sidebar-toggle absolute left-2 top-2 z-30 grid size-8 place-items-center rounded-md border border-border/60 bg-background/75 text-foreground/80 backdrop-blur transition hover:bg-foreground/[0.06] lg:hidden" aria-label={mobileSidebarExpanded ? "收起侧栏" : "展开侧栏"} onClick={() => setMobileSidebarExpanded((current) => !current)}>
+                            {mobileSidebarExpanded ? <PanelLeftClose className="size-4" /> : <PanelLeftOpen className="size-4" />}
+                        </button>
+                    ) : null}
+                    {children}
+                </div>
             </div>
             <ModelSetupGuide hidden={pathname === "/login" || pathname === "/register" || pathname.startsWith("/admin")} />
         </>
diff --git a/web/src/styles/globals.css b/web/src/styles/globals.css
index ac619e2c3..4c3cee1d6 100644
--- a/web/src/styles/globals.css
+++ b/web/src/styles/globals.css
@@ -599,10 +599,10 @@
 
     @media (max-width: 1023px) {
         .app-workspace-sidebar-scrim {
-            left: 202px;
+            left: 0;
         }
 
-        .app-workspace-shell.is-spatial .app-workspace-sidebar.is-mobile-expanded {
+        .app-workspace-shell .app-workspace-sidebar.is-mobile-expanded {
             position: absolute;
             z-index: 40;
             inset: 6px auto 6px 6px;