From 219809c320444a4bce32fe00fd925e213265a6e5 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: Sun, 2 Aug 2026 16:17:54 +0800 Subject: [PATCH] =?UTF-8?q?feat(platform):=20=E5=B7=A5=E4=BD=9C=E5=8F=B0?= =?UTF-8?q?=E4=BE=A7=E8=BE=B9=E6=A0=8F=20-=20=E6=96=B0=E5=A2=9E=E6=BB=9A?= =?UTF-8?q?=E5=8A=A8=E6=B8=90=E5=8F=98=E9=81=AE=E7=BD=A9=E4=B8=8E=E9=9A=90?= =?UTF-8?q?=E8=BA=AB=E6=BB=9A=E5=8A=A8=E6=9D=A1=EF=BC=8C=E6=8F=90=E5=8D=87?= =?UTF-8?q?=E5=8F=AF=E6=BB=9A=E5=8A=A8=E6=8F=90=E7=A4=BA=20(#80)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: sikongyue <3155157671@qq.com> --- web/src/components/layout/app-top-nav.tsx | 32 ++++++++++- web/src/styles/globals.css | 68 +++++++++++++++++++++++ 2 files changed, 98 insertions(+), 2 deletions(-) diff --git a/web/src/components/layout/app-top-nav.tsx b/web/src/components/layout/app-top-nav.tsx index 13595fe48..25a45840d 100644 --- a/web/src/components/layout/app-top-nav.tsx +++ b/web/src/components/layout/app-top-nav.tsx @@ -1,5 +1,5 @@ import { Infinity as InfinityIcon } from "lucide-react"; -import { Fragment, useEffect, useState, type ReactNode } from "react"; +import { Fragment, useEffect, useRef, useState, type ReactNode } from "react"; import { Link, useLocation, useNavigate } from "react-router"; import { ModelSetupGuide } from "@/components/layout/model-setup-guide"; @@ -12,6 +12,11 @@ export function AppWorkspaceShell({ children }: { children: ReactNode }) { const { pathname } = useLocation(); const navigate = useNavigate(); const [mobileSidebarExpanded, setMobileSidebarExpanded] = useState(false); + const scrollRef = useRef(null); + const [scrollState, setScrollState] = useState({ + hasTopFade: false, + hasBottomFade: false, + }); const hideChrome = pathname.startsWith("/admin") || /^\/canvas\/[^/]+/.test(pathname); const spatialWorkbench = isSpatialWorkbenchPath(pathname); const creationWorkspace = pathname === "/create"; @@ -19,6 +24,16 @@ export function AppWorkspaceShell({ children }: { children: ReactNode }) { const activeToolSlug = navigationTools.some((tool) => tool.slug === slug) ? (slug as NavigationToolSlug) : undefined; const visibleNavigationTools = spatialWorkbench ? navigationTools : navigationTools.filter((tool) => tool.section === "创作空间"); + const handleScroll = () => { + const element = scrollRef.current; + if (!element) return; + const { scrollTop, scrollHeight, clientHeight } = element; + setScrollState({ + hasTopFade: scrollTop > 0, + hasBottomFade: scrollTop + clientHeight < scrollHeight - 1, + }); + }; + useEffect(() => { const handleWorkspaceNavigation = (rawEvent: Event) => { const event = rawEvent as CustomEvent<{ to?: string }>; @@ -30,6 +45,11 @@ export function AppWorkspaceShell({ children }: { children: ReactNode }) { return () => window.removeEventListener("workspace:navigate", handleWorkspaceNavigation); }, [navigate]); + useEffect(() => { + // 初始化滚动状态 + handleScroll(); + }, [visibleNavigationTools.length, mobileSidebarExpanded]); + return ( <>
@@ -49,7 +69,15 @@ export function AppWorkspaceShell({ children }: { children: ReactNode }) {
-