refactor: 前端重构控制台用户状态管理

apps/frontend/components/app-sidebar.tsx

@@ -28,7 +28,7 @@ import Link from "next/link"
 import { User } from "@/lib/types/user"
 import { Role } from "@/lib/types/role"
 
-export function AppSidebar({ user, isUserLoading, ...props }: React.ComponentProps<typeof Sidebar> & { user: User | undefined, isUserLoading: boolean }) {
+export function AppSidebar({ user, ...props }: React.ComponentProps<typeof Sidebar> & { user: User | null }) {
   const data = {
     user: {
       name: "shadcn",
@@ -49,76 +49,74 @@ export function AppSidebar({ user, isUserLoading, ...props }: React.ComponentPro
     }[],
   }
 
-  if (!isUserLoading) {
-    data.navMain = [
-      {
-        title: "网站管理",
-        url: "/console/web",
-        icon: SquareTerminal,
-        isHidden: !user?.roles.includes(Role.Admin),
-        items: [
-          {
-            title: "资源",
-            url: "/console/web/resource",
-          },
-          {
-            title: "博客",
-            url: "/console/web/blog",
-          },
-        ],
-      },
-      {
-        title: "用户管理",
-        url: "/console/user/list",
-        icon: UsersRound,
-        isHidden: !user?.roles.includes(Role.Admin),
-      },
-      {
-        title: "邮件系统",
-        url: "/console/mail",
-        icon: Mail,
-        items: [
-          {
-            title: "收件箱",
-            url: "/console/mail/inbox",
-          },
-          {
-            title: "已发送",
-            url: "/console/mail/sent",
-          },
-          {
-            title: "发送邮件",
-            url: "/console/mail/send",
-          },
-          {
-            title: "邮件管理",
-            url: "/console/mail/manage",
-            isHidden: !user?.roles.includes(Role.Admin),
-          },
-        ],
-      },
-      {
-        title: "文件存储",
-        url: "/console/storage",
-        icon: CloudUpload,
-      },
-      {
-        title: "虚拟云空间",
-        url: "/console/vspace",
-        icon: Inbox,
-      },
-      {
-        title: "虚拟主机",
-        url: "/console/vserver",
-        icon: Server,
-      },
-      {
-        title: "前往首页",
-        url: "/",
-        icon: Undo2,
-      },
-    ]
-  }
+  data.navMain = [
+    {
+      title: "网站管理",
+      url: "/console/web",
+      icon: SquareTerminal,
+      isHidden: !user?.roles.includes(Role.Admin),
+      items: [
+        {
+          title: "资源",
+          url: "/console/web/resource",
+        },
+        {
+          title: "博客",
+          url: "/console/web/blog",
+        },
+      ],
+    },
+    {
+      title: "用户管理",
+      url: "/console/user/list",
+      icon: UsersRound,
+      isHidden: !user?.roles.includes(Role.Admin),
+    },
+    {
+      title: "邮件系统",
+      url: "/console/mail",
+      icon: Mail,
+      items: [
+        {
+          title: "收件箱",
+          url: "/console/mail/inbox",
+        },
+        {
+          title: "已发送",
+          url: "/console/mail/sent",
+        },
+        {
+          title: "发送邮件",
+          url: "/console/mail/send",
+        },
+        {
+          title: "邮件管理",
+          url: "/console/mail/manage",
+          isHidden: !user?.roles.includes(Role.Admin),
+        },
+      ],
+    },
+    {
+      title: "文件存储",
+      url: "/console/storage",
+      icon: CloudUpload,
+    },
+    {
+      title: "虚拟云空间",
+      url: "/console/vspace",
+      icon: Inbox,
+    },
+    {
+      title: "虚拟主机",
+      url: "/console/vserver",
+      icon: Server,
+    },
+    {
+      title: "前往首页",
+      url: "/",
+      icon: Undo2,
+    },
+  ]
 
   return (
     <Sidebar collapsible="icon" {...props}>
@@ -145,7 +143,7 @@ export function AppSidebar({ user, isUserLoading, ...props }: React.ComponentPro
         <NavMain items={data.navMain} />
       </SidebarContent>
       <SidebarFooter>
-        <NavUser user={user} isUserLoading={isUserLoading} />
+        <NavUser user={user} />
       </SidebarFooter>
       <SidebarRail />
     </Sidebar>

apps/frontend/components/nav-user.tsx

@@ -26,7 +26,6 @@ import {
   SidebarMenuItem,
   useSidebar,
 } from "@/components/ui/sidebar"
-import { authApi, UserApi } from "@/lib/api"
 import { Skeleton } from "./ui/skeleton"
 import { toast } from "sonner"
 import { useRouter } from "next/navigation"
@@ -35,20 +34,20 @@ import { useState } from "react"
 import { User } from "@/lib/types/user"
 import UserProfile from "./nav-user/UserProfile"
 
-export function NavUser({ user, isUserLoading }: { user: User | undefined, isUserLoading: boolean }) {
+export function NavUser({ user }: { user: User | null }) {
   const { isMobile } = useSidebar();
   const router = useRouter();
 
   async function logout() {
-    try {
-      await authApi.logout();
-      localStorage.removeItem('token');
-      localStorage.removeItem(UserApi.USER_ME_CACHE_KEY)
-      toast.success('登出成功');
-      router.replace('/console/login');
-    } catch {
-      toast.error('登出失败，请稍后再试');
-    }
+    // try {
+    //   await authApi.logout();
+    //   localStorage.removeItem('token');
+    //   localStorage.removeItem(UserApi.USER_ME_CACHE_KEY)
+    //   toast.success('登出成功');
+    //   router.replace('/console/login');
+    // } catch {
+    //   toast.error('登出失败，请稍后再试');
+    // }
   }
 
   const [userProfileOpen, setUserProfileOpen] = useState(false);
@@ -65,25 +64,24 @@ export function NavUser({ user, isUserLoading }: { user: User | undefined, isUse
                 className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
               >
                 {
-                  user && <>
-                    <Avatar className="h-8 w-8 rounded-lg">
-                      <AvatarImage src={user.avatar} />
-                      <AvatarFallback className="rounded-lg">U</AvatarFallback>
-                    </Avatar>
-                    <div className="grid flex-1 text-left text-sm leading-tight">
-                      <span className="truncate font-medium">{user.nickname}</span>
-                      <span className="truncate text-xs">{user.username}</span>
+                  user ?
+                    <>
+                      <Avatar className="h-8 w-8 rounded-lg">
+                        <AvatarImage src={user.avatar} />
+                        <AvatarFallback className="rounded-lg">U</AvatarFallback>
+                      </Avatar>
+                      <div className="grid flex-1 text-left text-sm leading-tight">
+                        <span className="truncate font-medium">{user.nickname}</span>
+                        <span className="truncate text-xs">{user.username}</span>
+                      </div>
+                    </> :
+                    <div className="w-full flex items-center gap-2">
+                      <Skeleton className="h-8 w-8 rounded-full" />
+                      <div className="flex-1 flex flex-col gap-1">
+                        <Skeleton className="w-full h-4" />
+                        <Skeleton className="w-full h-4" />
+                      </div>
                     </div>
-                  </>
-                }
-                {
-                  isUserLoading && <div className="w-full flex items-center gap-2">
-                    <Skeleton className="h-8 w-8 rounded-full" />
-                    <div className="flex-1 flex flex-col gap-1">
-                      <Skeleton className="w-full h-4" />
-                      <Skeleton className="w-full h-4" />
-                    </div>
-                  </div>
                 }
                 <ChevronsUpDown className="ml-auto size-4" />
               </SidebarMenuButton>
@@ -96,26 +94,24 @@ export function NavUser({ user, isUserLoading }: { user: User | undefined, isUse
             >
               <DropdownMenuLabel className="p-0 font-normal">
                 {
-                  user &&
-                  <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-                    <Avatar className="h-8 w-8 rounded-lg">
-                      <AvatarImage src={user.avatar} />
-                      <AvatarFallback className="rounded-lg">U</AvatarFallback>
-                    </Avatar>
-                    <div className="grid flex-1 text-left text-sm leading-tight">
-                      <span className="truncate font-medium">{user.nickname}</span>
-                      <span className="truncate text-xs">{user.username}</span>
+                  user ?
+                    <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                      <Avatar className="h-8 w-8 rounded-lg">
+                        <AvatarImage src={user.avatar} />
+                        <AvatarFallback className="rounded-lg">U</AvatarFallback>
+                      </Avatar>
+                      <div className="grid flex-1 text-left text-sm leading-tight">
+                        <span className="truncate font-medium">{user.nickname}</span>
+                        <span className="truncate text-xs">{user.username}</span>
+                      </div>
+                    </div> :
+                    <div className="flex items-center gap-2">
+                      <Skeleton className="h-8 w-8 rounded-full" />
+                      <div className="flex-1 flex flex-col gap-1">
+                        <Skeleton className="w-full h-4" />
+                        <Skeleton className="w-full h-4" />
+                      </div>
                     </div>
-                  </div>
-                }
-                {
-                  isUserLoading && <div className="flex items-center gap-2">
-                    <Skeleton className="h-8 w-8 rounded-full" />
-                    <div className="flex-1 flex flex-col gap-1">
-                      <Skeleton className="w-full h-4" />
-                      <Skeleton className="w-full h-4" />
-                    </div>
-                  </div>
                 }
               </DropdownMenuLabel>
               <DropdownMenuSeparator />

apps/frontend/components/nav-user/SetPassword.tsx

@@ -14,7 +14,6 @@ import { Label } from "@/components/ui/label"
 import { FC } from "react";
 import { DialogProps } from "@radix-ui/react-dialog";
 import { toast } from "sonner";
-import { UserApi } from "@/lib/api";
 import { ApiError } from "next/dist/server/api-utils";
 
 export default function SetPassword({ onOpenChange, ...props }: React.ComponentProps<FC<DialogProps>>) {
@@ -24,13 +23,13 @@ export default function SetPassword({ onOpenChange, ...props }: React.ComponentP
             return;
         }
 
-        try {
-            await UserApi.updatePassword(password);
-            toast.success('新密码设置成功');
-            onOpenChange?.(false);
-        } catch (error) {
-            toast.error((error as ApiError).message || '新密码设置失败');
-        }
+        // try {
+        //     await UserApi.updatePassword(password);
+        //     toast.success('新密码设置成功');
+        //     onOpenChange?.(false);
+        // } catch (error) {
+        //     toast.error((error as ApiError).message || '新密码设置失败');
+        // }
     }
 
     return (