perf(style): codex-skills/cowa-admin-list-ui

components/layout/AppLayout.tsx

@@ -20,7 +20,12 @@ import {
 import Avvvatars from "avvvatars-react"
 
 import { useDisclosure, useMediaQuery } from "@mantine/hooks"
-import { IconLogout, IconMoon, IconSun } from "@tabler/icons-react"
+import {
+  IconChevronDown,
+  IconLogout,
+  IconMoon,
+  IconSun,
+} from "@tabler/icons-react"
 import cx from "clsx"
 import { Suspense, useEffect, useMemo, useState } from "react"
 import actionToggleClasses from "./ActionToggle.module.css"
@@ -30,9 +35,11 @@ import { useUserStore } from "@/app/store/user"
 import { usePathname, useRouter } from "next/navigation"
 import { usePermissionStore } from "../label/store/auth"
 import { deleteCookie } from "../login/api"
+import classes from "./AppLayout.module.css"
 import { MenuItem, withoutLayoutRoutes } from "./common"
 import { ClientIcon } from "./components/ClientIcon"
 import { LinksGroup } from "./components/NavbarLinks"
+import { getShellNavLinkStyles } from "./navStyles"
 import { useAppLayoutStore } from "./store"
 
 const COMPOUND_SURNAMES = new Set([
@@ -182,7 +189,7 @@ export default function AppLayout({
         window.location.href = toPathname
         // router.replace(toPathname)
       }}>
-      <ClientIcon icon={item.icon} style={{ width: "1rem", height: "1rem" }} />
+      <ClientIcon icon={item.icon} style={{ width: 14, height: 14 }} />
       {item.title}
     </a>
   ))
@@ -243,6 +250,7 @@ export default function AppLayout({
   }
   const matches = useMediaQuery("(min-width: 48em)")
   const userName = usePermissionStore((s) => s.user_name)
+  const detailInfo = usePermissionStore((s) => s.detailInfo)
   const avatarDisplayValue = useMemo(
     () => getAvatarDisplayValue(userName),
     [userName]
@@ -253,28 +261,32 @@ export default function AppLayout({
       <Suspense fallback={<></>}>{children}</Suspense>
     ) : (
       <AppShell
-        header={{ height: 55 }}
+        header={{ height: 60 }}
         navbar={{
-          width: isOpen ? 200 : 40,
+          width: isOpen ? 196 : 48,
           breakpoint: "sm",
           collapsed: { mobile: !mobileOpened },
         }}>
-        <AppShell.Header>
-          <Flex h="100%" px="md" align="center">
+        <AppShell.Header className={classes.header}>
+          <Flex className={classes.headerInner} align="center">
             <Burger
               opened={mobileOpened}
               onClick={toggleMobile}
               hiddenFrom="sm"
               size="sm"
             />
-            <Flex flex={1} gap={0} h="100%" align="center">
-              <Box w={184} visibleFrom="sm">
+            <Flex className={classes.headerNav}>
+              <Box className={classes.brand} visibleFrom="sm">
+                <span className={classes.brandMark}>C</span>
                 标注平台
               </Box>
               <Space w={"1rem"} hiddenFrom="sm" />
               {headItems}
             </Flex>
-            <Flex justify="center" align="center" w={"max-content"}>
+            <Flex
+              className={classes.headerUser}
+              justify="center"
+              w={"max-content"}>
               <UnstyledButton
                 display="none"
                 onClick={() =>
@@ -301,12 +313,28 @@ export default function AppLayout({
               <Divider orientation="vertical" mx={"0.5rem"} display="none" />
               <Menu shadow="md" width={220}>
                 <Menu.Target>
-                  <UnstyledButton>
+                  <Flex
+                    align="center"
+                    gap={12}
+                    style={{
+                      cursor: "pointer",
+                    }}>
                     <Avvvatars
                       value={userName || "-"}
                       displayValue={avatarDisplayValue}
+                      size={32}
                     />
-                  </UnstyledButton>
+                    <Stack gap={1}>
+                      <Text className={classes.userName}>{userName}</Text>
+                      <Text className={classes.userBaseCity}>
+                        {detailInfo?.base_city || "-"}
+                      </Text>
+                    </Stack>
+                    <IconChevronDown
+                      className={classes.userBaseCity}
+                      size={12}
+                    />
+                  </Flex>
                 </Menu.Target>
                 <Menu.Dropdown>
                   <Menu.Label>用户信息</Menu.Label>
@@ -327,9 +355,9 @@ export default function AppLayout({
             </Flex>
           </Flex>
         </AppShell.Header>
-        <AppShell.Navbar style={{ transition: "width 0.2s ease" }}>
+        <AppShell.Navbar className={classes.navbar}>
           <Stack justify="start" gap={4} flex={1}>
-            <ScrollArea h="calc(100vh - 95px)">
+            <ScrollArea className={classes.navbarScroll}>
               {activeHeaderMenu?.items?.map((item) => {
                 if (item.items?.length) {
                   if (matches) {
@@ -359,11 +387,12 @@ export default function AppLayout({
                                 item.icon && (
                                   <ClientIcon
                                     icon={item.icon}
-                                    style={{ width: "1rem", height: "1rem" }}
+                                    style={{ width: 14, height: 14 }}
                                   />
                                 )
                               }
                               label={item.title}
+                              styles={getShellNavLinkStyles(false)}
                             />
                           </Menu.Target>
                           <Menu.Dropdown>
@@ -390,6 +419,10 @@ export default function AppLayout({
                     )
                   }
                 } else {
+                  const isActive = pathname.startsWith(
+                    `/${activeHeaderMenu.url}/${item.url}`
+                  )
+
                   return (
                     <Tooltip
                       key={item.url}
@@ -410,16 +443,15 @@ export default function AppLayout({
                           router.push(`/${activeHeaderMenu.url}/${item.url}`)
                         }}
                         noWrap={true}
-                        active={pathname.startsWith(
-                          `/${activeHeaderMenu.url}/${item.url}`
-                        )}
+                        active={isActive}
                         leftSection={
                           <ClientIcon
                             icon={item.icon}
-                            style={{ width: "1rem", height: "1rem" }}
+                            style={{ width: 14, height: 14 }}
                           />
                         }
                         label={item.title}
+                        styles={getShellNavLinkStyles(isActive)}
                       />
                     </Tooltip>
                   )
@@ -427,7 +459,7 @@ export default function AppLayout({
               })}
             </ScrollArea>
           </Stack>
-          <Stack justify="center" gap={0}>
+          <Stack justify="center" gap={0} className={classes.navbarFooter}>
             <Flex
               justify={isOpen ? "flex-end" : "center"}
               align="center"
@@ -442,8 +474,7 @@ export default function AppLayout({
             </Flex>
           </Stack>
         </AppShell.Navbar>
-        <AppShell.Main
-          bg={computedColorScheme === "light" ? "gray.0" : "gray.8"}>
+        <AppShell.Main className={classes.main}>
           <Suspense fallback={<></>}>{children}</Suspense>
         </AppShell.Main>
       </AppShell>