fix(auth): align restricted header and logout state

src/components/auth/RoutePermissionGuard.tsx

@@ -1,23 +1,17 @@
 "use client";
 
 import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
-import LogoutIcon from "@mui/icons-material/Logout";
-import SwapHorizIcon from "@mui/icons-material/SwapHoriz";
 import {
   Alert,
-  AppBar,
-  Avatar,
   Box,
-  Button,
   CircularProgress,
   Stack,
-  Toolbar,
   Typography,
 } from "@mui/material";
 import { usePathname } from "next/navigation";
 import type { ReactNode } from "react";
 
-import { Title } from "@/components/title";
+import { Header } from "@/components/header";
 import { permissionForPath } from "@/lib/permissions";
 import { useAccessStore } from "@/store/accessStore";
 import { useAuthStore } from "@/store/authStore";
@@ -26,16 +20,10 @@ export const RoutePermissionGuard = ({
   children,
   authenticated,
   accessDeniedReason = null,
-  userName,
-  onLogout,
-  onChooseAnotherProject,
 }: {
   children: ReactNode;
   authenticated: boolean;
   accessDeniedReason?: "account" | "project" | null;
-  userName?: string | null;
-  onLogout?: () => void;
-  onChooseAnotherProject?: () => void;
 }) => {
   const pathname = usePathname();
   const permissions = useAccessStore((state) => state.permissions);
@@ -59,70 +47,11 @@ export const RoutePermissionGuard = ({
   }
 
   if (accessDeniedReason) {
-    const displayName = userName?.trim() || "已登录账号";
     const accountPending = accessDeniedReason === "account";
 
     return (
       <Box sx={{ minHeight: "100vh", bgcolor: "background.default" }}>
-        <AppBar
-          color="inherit"
-          elevation={0}
-          position="static"
-          sx={{ borderBottom: 1, borderColor: "divider" }}
-        >
-          <Toolbar sx={{ gap: 2, justifyContent: "space-between" }}>
-            <Title />
-            <Stack direction="row" spacing={1.5} alignItems="center">
-              <Avatar sx={{ width: 32, height: 32, bgcolor: "primary.main" }}>
-                {displayName.slice(0, 1).toUpperCase()}
-              </Avatar>
-              <Box sx={{ display: { xs: "none", sm: "block" } }}>
-                <Typography variant="caption" color="text.secondary">
-                  当前登录账号
-                </Typography>
-                <Typography variant="body2" fontWeight={600}>
-                  {displayName}
-                </Typography>
-              </Box>
-              {!accountPending && (
-                <Button
-                  aria-label="切换项目"
-                  color="inherit"
-                  onClick={onChooseAnotherProject}
-                  sx={{
-                    gap: { xs: 0, sm: 1 },
-                    minWidth: { xs: 40, sm: "auto" },
-                    px: { xs: 1, sm: 2 },
-                    "&:active": { transform: "translateY(1px)" },
-                  }}
-                  variant="outlined"
-                >
-                  <SwapHorizIcon fontSize="small" />
-                  <Box component="span" sx={{ display: { xs: "none", sm: "inline" } }}>
-                    切换项目
-                  </Box>
-                </Button>
-              )}
-              <Button
-                aria-label="退出登录"
-                color="inherit"
-                onClick={onLogout}
-                sx={{
-                  gap: { xs: 0, sm: 1 },
-                  minWidth: { xs: 40, sm: "auto" },
-                  px: { xs: 1, sm: 2 },
-                  "&:active": { transform: "translateY(1px)" },
-                }}
-                variant="outlined"
-              >
-                <LogoutIcon fontSize="small" />
-                <Box component="span" sx={{ display: { xs: "none", sm: "inline" } }}>
-                  退出登录
-                </Box>
-              </Button>
-            </Stack>
-          </Toolbar>
-        </AppBar>
+        <Header accessMode={accessDeniedReason} />
         <Box
           component="main"
           sx={{