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

fix(canvas): 移动端侧边栏适配 — 抽屉式隐藏 + 汉堡菜单 + 全页面 scrim #89 (#90)

Browse Source 
- 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>
This commit is contained in:
爱笑的毛毛虫
2026-08-03 19:52:32 +08:00
committed by GitHub
parent 68753fa439
commit 46091c8c67
2 changed files with 13 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
web/src/components/layout/app-top-nav.tsx
View File

@@ -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")} />
</>

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

@@ -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;