feat(layout): username

components/layout/AppLayout.tsx

@@ -11,20 +11,14 @@ import {
   ScrollArea,
   Space,
   Stack,
+  Text,
   Tooltip,
   UnstyledButton,
   useComputedColorScheme,
   useMantineColorScheme,
 } from "@mantine/core"
 import { useDisclosure, useMediaQuery } from "@mantine/hooks"
-import {
-  IconLogout,
-  IconMessageCircle,
-  IconMoon,
-  IconSettings,
-  IconSun,
-  IconUser,
-} from "@tabler/icons-react"
+import { IconLogout, IconMoon, IconSun, IconUser } from "@tabler/icons-react"
 import cx from "clsx"
 import { Suspense, useEffect, useMemo, useState } from "react"
 import actionToggleClasses from "./ActionToggle.module.css"
@@ -32,6 +26,7 @@ import headerLinkClasses from "./HeaderLink.module.css"
 
 import { useUserStore } from "@/app/store/user"
 import { usePathname, useRouter } from "next/navigation"
+import { usePermissionStore } from "../label/store/auth"
 import { deleteCookie } from "../login/api"
 import { MenuItem, withoutLayoutRoutes } from "./common"
 import { ClientIcon } from "./components/ClientIcon"
@@ -147,6 +142,7 @@ export default function AppLayout({
     window.location.reload()
   }
   const matches = useMediaQuery("(min-width: 48em)")
+  const userName = usePermissionStore((s) => s.user_name)
 
   return isClient ? (
     withoutLayout ? (
@@ -199,7 +195,7 @@ export default function AppLayout({
                 />
               </UnstyledButton>
               <Divider orientation="vertical" mx={"0.5rem"} display="none" />
-              <Menu shadow="md" width={200}>
+              <Menu shadow="md" width={220}>
                 <Menu.Target>
                   <UnstyledButton>
                     <IconUser
@@ -210,13 +206,12 @@ export default function AppLayout({
                   </UnstyledButton>
                 </Menu.Target>
                 <Menu.Dropdown>
-                  <Menu.Label>个人信息</Menu.Label>
-                  <Menu.Item leftSection={<IconSettings size={14} />}>
-                    设置
-                  </Menu.Item>
-                  <Menu.Item leftSection={<IconMessageCircle size={14} />}>
-                    通知
-                  </Menu.Item>
+                  <Menu.Label>用户信息</Menu.Label>
+                  <Box px="sm" py={4}>
+                    <Text size="sm" fw={500} style={{ wordBreak: "break-all" }}>
+                      {userName || "-"}
+                    </Text>
+                  </Box>
                   <Menu.Divider />
                   <Menu.Label>操作</Menu.Label>
                   <Menu.Item