feat: 增加沉浸模式切换过渡动画

src/App.tsx

@@ -7,6 +7,8 @@ import { ContentArea } from "./components/ContentArea"
 import { OOBE } from "./components/OOBE/OOBE"
 import { ThemeProvider, useTheme } from "./contexts/ThemeContext"
 
+const IMMERSIVE_TRANSITION_MS = 260
+
 function MainContent(): React.JSX.Element {
   const { t } = useTranslation()
   const navigate = useNavigate()
@@ -15,6 +17,8 @@ function MainContent(): React.JSX.Element {
   const [messageApi, contextHolder] = message.useMessage()
   const { isIosDevice, isAndroidDevice, defaultPortraitMode } = useMemo(getMobileDeviceInfo, [])
   const [immersiveMode, setImmersiveMode] = useState(false)
+  const [sidebarVisible, setSidebarVisible] = useState(true)
+  const sidebarTransitionTimerRef = useRef<number | null>(null)
 
   useEffect(() => {
     const api = (window as any).api
@@ -350,6 +354,30 @@ function MainContent(): React.JSX.Element {
     })
   }
 
+  useEffect(() => {
+    if (sidebarTransitionTimerRef.current) {
+      window.clearTimeout(sidebarTransitionTimerRef.current)
+      sidebarTransitionTimerRef.current = null
+    }
+
+    if (!immersiveMode) {
+      setSidebarVisible(true)
+      return
+    }
+
+    sidebarTransitionTimerRef.current = window.setTimeout(() => {
+      setSidebarVisible(false)
+      sidebarTransitionTimerRef.current = null
+    }, IMMERSIVE_TRANSITION_MS)
+
+    return () => {
+      if (sidebarTransitionTimerRef.current) {
+        window.clearTimeout(sidebarTransitionTimerRef.current)
+        sidebarTransitionTimerRef.current = null
+      }
+    }
+  }, [immersiveMode])
+
   const isDark = currentTheme?.mode === "dark"
   const brandColor = currentTheme?.config?.tdesign?.brandColor || "#0052D9"
 
@@ -366,16 +394,25 @@ function MainContent(): React.JSX.Element {
     >
       {contextHolder}
       <Layout style={{ height: "100%", flexDirection: "row", overflow: "hidden" }}>
-        {!immersiveMode && (
-          <Sidebar
-            activeMenu={activeMenu}
-            permission={permission}
-            onMenuChange={onMenuChange}
-            collapsed={sidebarCollapsed}
-            floatingExpand={isPortraitMode}
-            floatingExpanded={floatingSidebarExpanded}
-            onFloatingExpandedChange={setFloatingSidebarExpanded}
-          />
+        {sidebarVisible && (
+          <div
+            className={`ss-immersive-sidebar ${immersiveMode ? "is-hidden" : "is-visible"}`}
+            style={
+              {
+                "--ss-sidebar-width": `${sidebarCollapsed ? 64 : 200}px`,
+              } as React.CSSProperties
+            }
+          >
+            <Sidebar
+              activeMenu={activeMenu}
+              permission={permission}
+              onMenuChange={onMenuChange}
+              collapsed={sidebarCollapsed}
+              floatingExpand={isPortraitMode}
+              floatingExpanded={floatingSidebarExpanded}
+              onFloatingExpandedChange={setFloatingSidebarExpanded}
+            />
+          </div>
         )}
         <ContentArea
           permission={permission}