diff --git a/View/src/layouts/MainLayout.tsx b/View/src/layouts/MainLayout.tsx index 5752cc3..a28b3d0 100644 --- a/View/src/layouts/MainLayout.tsx +++ b/View/src/layouts/MainLayout.tsx @@ -1,48 +1,47 @@ -import { useState, useEffect } from 'react'; -import { Outlet, useNavigate, useLocation, matchPath } from 'react-router'; -import { Layout, theme } from 'antd'; -import { clearAuthData, getStoredUser, isAuthenticated } from '../api'; +import {useState, useEffect} from 'react'; +import {Outlet, useNavigate, useLocation, matchPath} from 'react-router'; +import {Layout, theme} from 'antd'; +import {clearAuthData, isAuthenticated} from '../api'; import useIsMobile from '../hooks/useIsMobile'; - +import {useAuth} from '../api/AuthContext'; import Sidebar from './components/Sidebar'; import Header from './components/Header'; import Footer from './components/Footer'; -import routes, { type RouteConfig } from '../config/routeConfig'; +import routes, {type RouteConfig} from '../config/routeConfig'; -const { Content } = Layout; +const {Content} = Layout; function MainLayout() { + const {refreshUser} = useAuth(); const isMobile = useIsMobile(); - const [collapsed, setCollapsed] = useState(isMobile); // 移动设备默认折叠侧边栏 - // 重命名避免未使用警告,或用于未来扩展 - const [, setUser] = useState(null); + const [collapsed, setCollapsed] = useState(isMobile); const [currentRouteData, setCurrentRouteData] = useState<{ routeInfo: RouteConfig | undefined; params: Record; title?: string; - }>({ - routeInfo: undefined, - params: {} + }>({ + routeInfo: undefined, + params: {} }); - + const navigate = useNavigate(); const location = useLocation(); - + const { - token: { colorBgContainer }, + token: {colorBgContainer}, } = theme.useToken(); // 查找当前路由信息 const findCurrentRoute = () => { const pathname = location.pathname; - + // 测试每个路由是否匹配当前路径 for (const route of routes) { const match = matchPath( - { path: `/${route.path}`, end: true }, + {path: `/${route.path}`, end: true}, pathname ); - + if (match) { return { routeInfo: route, @@ -55,19 +54,19 @@ function MainLayout() { }; } } - + // 如果没有完全匹配,尝试找到包含参数的路由 for (const route of routes) { - const pattern = route.path.includes(':') - ? `/${route.path.split('/:')[0]}` + const pattern = route.path.includes(':') + ? `/${route.path.split('/:')[0]}` : `/${route.path}`; - + if (pathname.startsWith(pattern)) { const match = matchPath( - { path: `/${route.path}`, end: false }, + {path: `/${route.path}`, end: false}, pathname ); - + if (match) { return { routeInfo: route, @@ -81,10 +80,10 @@ function MainLayout() { } } } - - return { - routeInfo: undefined, - params: {} + + return { + routeInfo: undefined, + params: {} }; }; @@ -93,11 +92,8 @@ function MainLayout() { navigate('/login'); return; } - const storedUser = getStoredUser(); - if (storedUser) { - setUser(storedUser); - } - }, [navigate]); + refreshUser(); + }, [navigate, refreshUser]); // 监听路由变化,更新当前路由信息 useEffect(() => { @@ -127,10 +123,10 @@ function MainLayout() { fontWeight: 400 }}> {/* 侧边栏组件 - 添加onClose回调 */} - @@ -161,16 +157,13 @@ function MainLayout() { overflow: 'hidden' }}> {/* 渲染子路由组件 */} - { - setCurrentRouteData(prev => ({ ...prev, title })); - }, + + }}/> {/* 页脚组件 */} -