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,7 +394,15 @@ function MainContent(): React.JSX.Element {
     >
       {contextHolder}
       <Layout style={{ height: "100%", flexDirection: "row", overflow: "hidden" }}>
-        {!immersiveMode && (
+        {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}
@@ -376,6 +412,7 @@ function MainContent(): React.JSX.Element {
               floatingExpanded={floatingSidebarExpanded}
               onFloatingExpandedChange={setFloatingSidebarExpanded}
             />
+          </div>
         )}
         <ContentArea
           permission={permission}

src/assets/main.css

@@ -225,3 +225,45 @@ html.platform-macos #root {
 .ss-group-board-modal .ant-modal-body {
   overflow: hidden;
 }
+
+.ss-immersive-sidebar {
+  --ss-sidebar-width: 200px;
+  width: var(--ss-sidebar-width);
+  overflow: hidden;
+  opacity: 1;
+  transform: translateX(0);
+  transition:
+    width 260ms cubic-bezier(0.22, 1, 0.36, 1),
+    opacity 220ms ease,
+    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
+  will-change: width, opacity, transform;
+}
+
+.ss-immersive-sidebar.is-hidden {
+  width: 0;
+  opacity: 0;
+  transform: translateX(-10px);
+  pointer-events: none;
+}
+
+.ss-immersive-toolbar {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0) scale(1);
+  transition:
+    opacity 200ms ease,
+    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
+  will-change: opacity, transform;
+}
+
+.ss-immersive-toolbar.is-hidden {
+  opacity: 0;
+  transform: translateX(-50%) translateY(16px) scale(0.98);
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ss-immersive-sidebar,
+  .ss-immersive-toolbar {
+    transition: none !important;
+  }
+}

src/components/Home.tsx

@@ -2472,10 +2472,11 @@ export const Home: React.FC<HomeProps> = ({
         )}
       </Modal>
 
-      {immersiveMode && (
       <div
         ref={immersiveToolbarRef}
         data-immersive-toolbar="true"
+        className={`ss-immersive-toolbar ${immersiveMode ? "is-visible" : "is-hidden"}`}
+        aria-hidden={!immersiveMode}
         style={{
           position: "fixed",
           left: "50%",
@@ -2635,7 +2636,6 @@ export const Home: React.FC<HomeProps> = ({
             )}
           </div>
       </div>
-      )}
 
       {isPortraitMode ? (
         <Drawer