src/components/Home.tsx

@@ -1,10 +1,22 @@
 import React from 'react'
 import '@/assets/css/home.scss'
+import { MainFrameworkContext } from '@/pages/MainFramework'
 
 const Home: React.FC = () => {
+    const {
+        navbarHiddenState: { navbarHidden, setNavbarHidden }
+    } = useContext(MainFrameworkContext)
+    const handleButtonClick = () => {
+        setNavbarHidden(!navbarHidden)
+    }
     return (
         <>
             <h1>Home</h1>
+            <div style={{ marginTop: '100px' }}>
+                <AntdButton onClick={handleButtonClick}>
+                    {navbarHidden ? '显示' : '隐藏'}
+                </AntdButton>
+            </div>
         </>
     )
 }

src/pages/MainFramework.tsx

@@ -3,20 +3,24 @@ import '@/assets/css/header.scss'
 import LoadingMask from '@/components/LoadingMask.tsx'
 
 export const MainFrameworkContext = createContext<{
-    hideNavbar: boolean
+    navbarHiddenState: {
-    setHideNavbar: (newValue: boolean) => void
+        navbarHidden: boolean
+        setNavbarHidden: (newValue: boolean) => void
+    }
 }>({
-    hideNavbar: false,
+    navbarHiddenState: {
-    setHideNavbar: () => undefined
+        navbarHidden: false,
+        setNavbarHidden: () => undefined
+    }
 })
 
 const MainFramework: React.FC = () => {
-    const [hideNavbar, setHideNavbar] = useState(false)
+    const [navbarHidden, setNavbarHidden] = useState(false)
 
     return (
         <>
             <div className={'body'}>
-                <header className={'nav ' + (hideNavbar ? 'hide' : '')}>
+                <header className={'nav ' + (navbarHidden ? 'hide' : '')}>
                     <a className={'logo'} href={'https://fatweb.top'}>
                         <span className={'title'}>FatWeb</span>
                     </a>
@@ -56,7 +60,9 @@ const MainFramework: React.FC = () => {
                     </nav>
                 </header>
 
-                <MainFrameworkContext.Provider value={{ hideNavbar, setHideNavbar }}>
+                <MainFrameworkContext.Provider
+                    value={{ navbarHiddenState: { navbarHidden, setNavbarHidden } }}
+                >
                     <Suspense
                         fallback={
                             <>