src/pages/Home.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import '@/assets/css/components/home/home.scss'
 import FitFullScreen from '@/components/common/FitFullScreen'
-import { MainFrameworkContext } from '@/pages/MainFramework'
+import { HomeFrameworkContext } from '@/pages/HomeFramework'
 import Slogan from '@/components/home/Slogan'
 import OxygenToolbox from '@/components/home/OxygenToolbox'
 import Indicator from '@/components/common/Indicator'
@@ -13,7 +13,7 @@ const Home: React.FC = () => {
         navbarHiddenState: { navbarHidden, setNavbarHidden },
         showDropdownMenuState: { setShowDropdownMenu },
         preventScrollState: { setPreventScroll }
-    } = useContext(MainFrameworkContext)
+    } = useContext(HomeFrameworkContext)
 
     const fitFullScreenRef = useRef<HTMLDivElement>(null)
     const scrollTimeout = useRef(0)

src/pages/HomeFramework.tsx

@@ -7,7 +7,7 @@ import Icon from '@ant-design/icons'
 import { COLOR_FONT_SECONDARY } from '@/constants/Common.constants.ts'
 import { NavLink } from 'react-router-dom'
 
-export const MainFrameworkContext = createContext<{
+export const HomeFrameworkContext = createContext<{
     navbarHiddenState: {
         navbarHidden: boolean
         setNavbarHidden: (newValue: boolean) => void
@@ -53,7 +53,7 @@ export const MainFrameworkContext = createContext<{
     hideScrollbarRef: createRef()
 })
 
-const MainFramework: React.FC = () => {
+const HomeFramework: React.FC = () => {
     const routeId = useMatches()[1].id
     const routeChildren = router.routes[0].children?.find((value) => value.id === routeId)?.children
 
@@ -187,7 +187,7 @@ const MainFramework: React.FC = () => {
                         </div>
                     </div>
 
-                    <MainFrameworkContext.Provider
+                    <HomeFrameworkContext.Provider
                         value={{
                             navbarHiddenState: { navbarHidden, setNavbarHidden },
                             preventScrollState: { preventScroll, setPreventScroll },
@@ -215,11 +215,11 @@ const MainFramework: React.FC = () => {
                         >
                             <Outlet />
                         </Suspense>
-                    </MainFrameworkContext.Provider>
+                    </HomeFrameworkContext.Provider>
                 </div>
             </HideScrollbar>
         </>
     )
 }
 
-export default MainFramework
+export default HomeFramework

src/router/index.tsx

@@ -15,10 +15,32 @@ const routes: RouteObject[] = [
                 id: 'loading',
                 Component: React.lazy(() => import('@/components/common/LoadingMask'))
             },
+            {
+                path: '/tools',
+                id: 'tools',
+                Component: React.lazy(() => import('@/pages/Tools')),
+                children: [
+                    {
+                        path: 'translation',
+                        id: 'tools-translation',
+                        Component: React.lazy(() => import('@/pages/tools/Translation')),
+                        handle: {
+                            name: '翻译',
+                            menu: true,
+                            auth: true
+                        }
+                    }
+                ],
+                handle: {
+                    name: '工具',
+                    title: '工具',
+                    auth: false
+                }
+            },
             {
                 path: '',
-                id: 'mainFramework',
+                id: 'homeFramework',
-                Component: React.lazy(() => import('@/pages/MainFramework')),
+                Component: React.lazy(() => import('@/pages/HomeFramework')),
                 children: [
                     {
                         path: '',
@@ -32,33 +54,28 @@ const routes: RouteObject[] = [
                     },
                     {
                         path: 'https://blog.fatweb.top',
-                        id: 'blog',
+                        id: 'url-blog',
                         handle: {
                             name: '博客',
-                            menu: true,
+                            menu: true
-                            auth: false
                         }
                     },
                     {
-                        path: 'tools',
+                        path: '/tools',
-                        id: 'tools',
+                        id: 'url-tools',
-                        Component: React.lazy(() => import('@/pages/Tools')),
                         children: [
                             {
                                 path: 'translation',
-                                id: 'tools-translation',
+                                id: 'url-tools-translation',
-                                Component: React.lazy(() => import('@/pages/tools/Translation')),
                                 handle: {
                                     name: '翻译',
-                                    menu: true,
+                                    menu: true
-                                    auth: false
                                 }
                             }
                         ],
                         handle: {
                             name: '工具',
-                            menu: true,
+                            menu: true
-                            auth: false
                         }
                     }
                 ]