feat: 优化手机设置页入口并新增子页面进入动画

Author: PANDAJSR

src/App.tsx

@@ -1,4 +1,5 @@
 import { Layout, Modal, Input, message, ConfigProvider, theme as antTheme } from "antd"
+import { HomeOutlined, SettingOutlined } from "@ant-design/icons"
 import { useEffect, useMemo, useRef, useState } from "react"
 import { HashRouter, useLocation, useNavigate, Routes, Route } from "react-router-dom"
 import { useTranslation } from "react-i18next"
@@ -352,6 +353,7 @@ function MainContent(): React.JSX.Element {
 
   const isDark = currentTheme?.mode === "dark"
   const brandColor = currentTheme?.config?.tdesign?.brandColor || "#0052D9"
+  const showMobileBottomNav = isPortraitMode && !immersiveMode
 
   return (
     <ConfigProvider
@@ -365,25 +367,27 @@ function MainContent(): React.JSX.Element {
       }}
     >
       {contextHolder}
-      <Layout style={{ height: "100%", flexDirection: "row", overflow: "hidden" }}>
-        <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>
+      <Layout style={{ height: "100%", flexDirection: "row", overflow: "hidden", position: "relative" }}>
+        {!isPortraitMode && (
+          <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}
           hasAnyPassword={hasAnyPassword}
@@ -398,7 +402,70 @@ function MainContent(): React.JSX.Element {
           immersiveMode={immersiveMode}
           isHomePage={activeMenu === "home"}
           onToggleImmersiveMode={toggleImmersiveMode}
+          showSidebarToggle={!isPortraitMode}
+          bottomInset={showMobileBottomNav ? 84 : 0}
         />
+        {showMobileBottomNav && (
+          <div
+            style={{
+              position: "fixed",
+              left: 0,
+              right: 0,
+              bottom: 0,
+              background: "var(--ss-header-bg)",
+              borderTop: "1px solid var(--ss-border-color)",
+              zIndex: 1400,
+              paddingBottom: "env(safe-area-inset-bottom, 0px)",
+            }}
+          >
+            <div style={{ display: "flex", height: "60px" }}>
+              <button
+                type="button"
+                onClick={() => onMenuChange("home")}
+                style={{
+                  flex: 1,
+                  border: "none",
+                  background: "transparent",
+                  color:
+                    activeMenu === "home"
+                      ? "var(--ant-color-primary)"
+                      : "var(--ss-text-secondary, var(--ss-text-main))",
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  gap: "2px",
+                  fontSize: "12px",
+                }}
+              >
+                <HomeOutlined style={{ fontSize: "18px" }} />
+                <span>{t("sidebar.home")}</span>
+              </button>
+              <button
+                type="button"
+                onClick={() => onMenuChange("settings")}
+                style={{
+                  flex: 1,
+                  border: "none",
+                  background: "transparent",
+                  color:
+                    activeMenu === "home"
+                      ? "var(--ss-text-secondary, var(--ss-text-main))"
+                      : "var(--ant-color-primary)",
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  gap: "2px",
+                  fontSize: "12px",
+                }}
+              >
+                <SettingOutlined style={{ fontSize: "18px" }} />
+                <span>{t("sidebar.settings")}</span>
+              </button>
+            </div>
+          </div>
+        )}
 
         <OOBE visible={wizardVisible} onComplete={() => setWizardVisible(false)} />
 

src/assets/main.css

@@ -270,9 +270,74 @@ html.platform-macos #root {
   pointer-events: none;
 }
 
+.ss-settings-mobile-nav-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.ss-settings-mobile-nav-item.ant-btn {
+  min-height: 48px;
+  width: 100%;
+  border-radius: 0;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  color: var(--ss-text-main);
+  border-bottom: 1px solid var(--ss-divider, rgba(5, 5, 5, 0.06));
+}
+
+.ss-settings-mobile-nav-item.ant-btn:last-child {
+  border-bottom: none;
+}
+
+.ss-settings-mobile-nav-item.ant-btn:hover,
+.ss-settings-mobile-nav-item.ant-btn:focus-visible {
+  background: var(--ss-item-hover, rgba(0, 0, 0, 0.04));
+}
+
+.ss-settings-mobile-nav-item.ant-btn.is-active {
+  color: var(--ant-color-primary, #1677ff);
+  background: color-mix(in srgb, var(--ant-color-primary, #1677ff) 10%, transparent);
+}
+
+.ss-settings-mobile-nav-item.ant-btn[disabled] {
+  color: var(--ss-text-secondary);
+  opacity: 0.65;
+}
+
+.ss-settings-mobile-nav-item-label {
+  font-size: 15px;
+  font-weight: 500;
+}
+
+.ss-settings-mobile-nav-item-arrow {
+  font-size: 12px;
+}
+
+.ss-route-page {
+  min-height: 100%;
+}
+
+.ss-route-page.is-subpage-enter {
+  animation: ss-subpage-enter 240ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+@keyframes ss-subpage-enter {
+  from {
+    opacity: 0;
+    transform: translate3d(20px, 0, 0);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .ss-immersive-sidebar,
-  .ss-immersive-toolbar {
+  .ss-immersive-toolbar,
+  .ss-route-page.is-subpage-enter {
     transition: none !important;
+    animation: none !important;
   }
 }

src/components/ContentArea.tsx

@@ -6,7 +6,7 @@ import {
   FullscreenOutlined,
   FullscreenExitOutlined,
 } from "@ant-design/icons"
-import { Routes, Route, Navigate } from "react-router-dom"
+import { Routes, Route, Navigate, useLocation } from "react-router-dom"
 import { useTranslation } from "react-i18next"
 import { WindowControls } from "./WindowControls"
 import appLogo from "../assets/logoHD.svg"
@@ -67,6 +67,8 @@ interface ContentAreaProps {
   immersiveMode: boolean
   isHomePage: boolean
   onToggleImmersiveMode: () => void
+  showSidebarToggle?: boolean
+  bottomInset?: number
 }
 
 export function ContentArea({
@@ -83,8 +85,13 @@ export function ContentArea({
   immersiveMode,
   isHomePage,
   onToggleImmersiveMode,
+  showSidebarToggle = true,
+  bottomInset = 0,
 }: ContentAreaProps): React.JSX.Element {
   const { t } = useTranslation()
+  const location = useLocation()
+  const isSubPage = location.pathname !== "/" && !location.pathname.startsWith("/home")
+  const shouldAnimateSubPage = isPortraitMode && isSubPage
 
   useEffect(() => {
     let cancelled = false
@@ -156,7 +163,7 @@ export function ContentArea({
             } as React.CSSProperties
           }
         >
-          {!immersiveMode && (
+          {!immersiveMode && showSidebarToggle && (
             <Button
               type="text"
               size="small"
@@ -246,7 +253,14 @@ export function ContentArea({
         {showWindowControls && <WindowControls />}
       </div>
 
-      <Content style={{ flex: 1, overflowY: "auto", overflowX: "hidden" }}>
+      <Content
+        style={{
+          flex: 1,
+          overflowY: "auto",
+          overflowX: "hidden",
+          paddingBottom: bottomInset ? `${bottomInset}px` : 0,
+        }}
+      >
         <Suspense
           fallback={
             <div
@@ -263,34 +277,47 @@ export function ContentArea({
             </div>
           }
         >
-          <Routes>
-            <Route
-              path="/"
-              element={
-                <Home
-                  canEdit={permission === "admin" || permission === "points"}
-                  isPortraitMode={isPortraitMode}
-                  immersiveMode={immersiveMode}
-                />
-              }
-            />
-            <Route path="/students" element={<StudentManager canEdit={permission === "admin"} />} />
-            <Route
-              path="/score"
-              element={<ScoreManager canEdit={permission === "admin" || permission === "points"} />}
-            />
-            <Route path="/boards" element={<BoardManager canManage={permission === "admin"} />} />
-            <Route path="/leaderboard" element={<Leaderboard />} />
-            <Route path="/settlements" element={<SettlementHistory />} />
-            <Route path="/reasons" element={<ReasonManager canEdit={permission === "admin"} />} />
-            <Route path="/auto-score" element={<AutoScoreManager />} />
-            <Route
-              path="/reward-settings"
-              element={<RewardSettings canEdit={permission === "admin"} />}
-            />
-            <Route path="/settings" element={<Settings permission={permission} />} />
-            <Route path="*" element={<Navigate to="/" replace />} />
-          </Routes>
+          <div
+            key={location.pathname}
+            className={`ss-route-page${shouldAnimateSubPage ? " is-subpage-enter" : ""}`}
+          >
+            <Routes>
+              <Route
+                path="/"
+                element={
+                  <Home
+                    canEdit={permission === "admin" || permission === "points"}
+                    isPortraitMode={isPortraitMode}
+                    immersiveMode={immersiveMode}
+                  />
+                }
+              />
+              <Route
+                path="/students"
+                element={<StudentManager canEdit={permission === "admin"} />}
+              />
+              <Route
+                path="/score"
+                element={
+                  <ScoreManager canEdit={permission === "admin" || permission === "points"} />
+                }
+              />
+              <Route path="/boards" element={<BoardManager canManage={permission === "admin"} />} />
+              <Route path="/leaderboard" element={<Leaderboard />} />
+              <Route path="/settlements" element={<SettlementHistory />} />
+              <Route path="/reasons" element={<ReasonManager canEdit={permission === "admin"} />} />
+              <Route path="/auto-score" element={<AutoScoreManager />} />
+              <Route
+                path="/reward-settings"
+                element={<RewardSettings canEdit={permission === "admin"} />}
+              />
+              <Route
+                path="/settings"
+                element={<Settings permission={permission} mobileNavigationEnabled={isPortraitMode} />}
+              />
+              <Route path="*" element={<Navigate to="/" replace />} />
+            </Routes>
+          </div>
         </Suspense>
       </Content>
     </Layout>