fix: missing proxy group delay check animations (#788)

* fix: missing proxy group delay check animation

* chore: cleanup

* chore: adjust content style

src/components/setting/setting-verge.tsx

@@ -157,8 +157,8 @@ const SettingVerge = ({ onError }: Props) => {
           onGuard={(e) => patchVerge({ start_page: e })}
         >
           <Select size="small" sx={{ width: 140, "> div": { py: "7.5px" } }}>
-            {routers.map((page: { label: string; link: string }) => {
-              return <MenuItem value={page.link}>{t(page.label)}</MenuItem>;
+            {routers.map((page: { label: string; path: string }) => {
+              return <MenuItem value={page.path}>{t(page.label)}</MenuItem>;
             })}
           </Select>
         </GuardState>

src/pages/_layout.tsx

@@ -4,9 +4,8 @@ import relativeTime from "dayjs/plugin/relativeTime";
 import { SWRConfig, mutate } from "swr";
 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { Route, Routes, useLocation } from "react-router-dom";
-import { CSSTransition, TransitionGroup } from "react-transition-group";
-import { alpha, List, Paper, ThemeProvider } from "@mui/material";
+import { useLocation, useRoutes } from "react-router-dom";
+import { List, Paper, ThemeProvider } from "@mui/material";
 import { listen } from "@tauri-apps/api/event";
 import { appWindow } from "@tauri-apps/api/window";
 import { routers } from "./_routers";
@@ -16,7 +15,7 @@ import LogoSvg from "@/assets/image/logo.svg?react";
 import LogoSvg_dark from "@/assets/image/logo_dark.svg?react";
 import { atomThemeMode } from "@/services/states";
 import { useRecoilState } from "recoil";
-import { BaseErrorBoundary, Notice } from "@/components/base";
+import { Notice } from "@/components/base";
 import { LayoutItem } from "@/components/layout/layout-item";
 import { LayoutControl } from "@/components/layout/layout-control";
 import { LayoutTraffic } from "@/components/layout/layout-traffic";
@@ -27,6 +26,8 @@ import "dayjs/locale/ru";
 import "dayjs/locale/zh-cn";
 import { getPortableFlag } from "@/services/cmds";
 import { useNavigate } from "react-router-dom";
+import React from "react";
+import { TransitionGroup, CSSTransition } from "react-transition-group";
 export let portableFlag = false;
 
 dayjs.extend(relativeTime);
@@ -43,6 +44,8 @@ const Layout = () => {
   const { language, start_page } = verge || {};
   const navigate = useNavigate();
   const location = useLocation();
+  const routersEles = useRoutes(routers);
+  if (!routersEles) return null;
 
   useEffect(() => {
     window.addEventListener("keydown", (e) => {
@@ -142,7 +145,7 @@ const Layout = () => {
               {routers.map((router) => (
                 <LayoutItem
                   key={router.label}
-                  to={router.link}
+                  to={router.path}
                   icon={router.icon}
                 >
                   {t(router.label)}
@@ -173,19 +176,7 @@ const Layout = () => {
                 timeout={300}
                 classNames="page"
               >
-                <Routes>
-                  {routers.map(({ label, link, ele: Ele }) => (
-                    <Route
-                      key={label}
-                      path={link}
-                      element={
-                        <BaseErrorBoundary key={label}>
-                          <Ele />
-                        </BaseErrorBoundary>
-                      }
-                    />
-                  ))}
-                </Routes>
+                {React.cloneElement(routersEles, { key: location.pathname })}
               </CSSTransition>
             </TransitionGroup>
           </div>

src/pages/_routers.tsx

@@ -5,6 +5,7 @@ import ProfilesPage from "./profiles";
 import SettingsPage from "./settings";
 import ConnectionsPage from "./connections";
 import RulesPage from "./rules";
+import { BaseErrorBoundary } from "@/components/base";
 
 import ProxiesSvg from "@/assets/image/itemicon/proxies.svg?react";
 import ProfilesSvg from "@/assets/image/itemicon/profiles.svg?react";
@@ -25,44 +26,49 @@ import SettingsRoundedIcon from "@mui/icons-material/SettingsRounded";
 export const routers = [
   {
     label: "Label-Proxies",
-    link: "/",
+    path: "/",
     icon: [<WifiRoundedIcon />, <ProxiesSvg />],
-    ele: ProxiesPage,
+    element: <ProxiesPage />,
   },
   {
     label: "Label-Profiles",
-    link: "/profile",
+    path: "/profile",
     icon: [<DnsRoundedIcon />, <ProfilesSvg />],
-    ele: ProfilesPage,
+    element: <ProfilesPage />,
   },
   {
     label: "Label-Connections",
-    link: "/connections",
+    path: "/connections",
     icon: [<LanguageRoundedIcon />, <ConnectionsSvg />],
-    ele: ConnectionsPage,
+    element: <ConnectionsPage />,
   },
   {
     label: "Label-Rules",
-    link: "/rules",
+    path: "/rules",
     icon: [<ForkRightRoundedIcon />, <RulesSvg />],
-    ele: RulesPage,
+    element: <RulesPage />,
   },
   {
     label: "Label-Logs",
-    link: "/logs",
+    path: "/logs",
     icon: [<SubjectRoundedIcon />, <LogsSvg />],
-    ele: LogsPage,
+    element: <LogsPage />,
   },
   {
     label: "Label-Test",
-    link: "/test",
+    path: "/test",
     icon: [<WifiTetheringRoundedIcon />, <TestSvg />],
-    ele: TestPage,
+    element: <TestPage />,
   },
   {
     label: "Label-Settings",
-    link: "/settings",
+    path: "/settings",
     icon: [<SettingsRoundedIcon />, <SettingsSvg />],
-    ele: SettingsPage,
+    element: <SettingsPage />,
   },
-];
+].map((router) => ({
+  ...router,
+  element: (
+    <BaseErrorBoundary key={router.label}>{router.element}</BaseErrorBoundary>
+  ),
+}));