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

apps/frontend/app/console/(with-menu)/layout.tsx

@@ -12,37 +12,23 @@ import {
     SidebarProvider,
     SidebarTrigger,
 } from "@/components/ui/sidebar"
-import { useUserMe } from "@/hooks/user/use-user-me";
+import { useUserStore } from "@/store/useUserStore";
-import { UserApi } from "@/lib/api";
+// import { useUserMe } from "@/hooks/user/use-user-me";
-import { useRouter } from "next/navigation";
+// import { useRouter } from "next/navigation";
-import { toast } from "sonner";
+// import { toast } from "sonner";
 
 export default function ConsoleMenuLayout({
     children,
 }: {
     children: React.ReactNode
 }) {
-    const router = useRouter();
+    // const router = useRouter();
 
-    const { user, isLoading, error } = useUserMe({
+    const user = useUserStore().user;
-        onError: (e) => {
-            if (e.statusCode === 401) {
-                toast.info('登录凭证已失效，请重新登录');
-                router.replace('/console/login');
-            }
-        }
-    });
-
-    if (!isLoading && !error && !user) {
-        router.replace('/console/login');
-        localStorage.removeItem('token');
-        localStorage.removeItem(UserApi.USER_ME_CACHE_KEY);
-        toast.error('账户状态异常，请重新登录');
-    }
 
     return (
         <SidebarProvider>
-            <AppSidebar user={user} isUserLoading={isLoading} />
+            <AppSidebar user={user} />
             <SidebarInset>
                 <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
                     <div className="flex items-center gap-2 px-4">

apps/frontend/app/console/login/components/types.ts

@@ -1,16 +0,0 @@
-export type SubmitMode = 'password' | 'phone' | 'email';
-export type LoginFormData = {
-  type: SubmitMode;
-  account?: string;
-  password?: string;
-  phone?: string;
-  email?: string;
-  code?: string;
-}
-
-export type SendCodeMode = 'phone' | 'email';
-export type SendCodeFormData = {
-  type: SendCodeMode;
-  phone?: string;
-  email?: string;
-}

apps/frontend/app/console/login/page.tsx

@@ -1,5 +1,4 @@
 'use client';
-// import { authApi, verificationApi } from "@/lib/api";
 import { useRouter } from "next/navigation";
 import { toast } from "sonner";
 import Header from "@/components/Header";
@@ -11,58 +10,18 @@ import { KeyRound, Phone, FileKey2 } from "lucide-react";
 import EmailLoginMode from "./components/EmailLoginMode";
 import PasswordLoginMode from "./components/PasswordLoginMode";
 import PhoneLoginMode from "./components/PhoneLoginMode";
-import { LoginFormData, SendCodeFormData, SubmitMode } from "./components/types";
+import { useState } from "react";
-import { useCallback, useState } from "react";
 import LoginBG from './components/login-bg.jpg';
 import Image from "next/image";
 import { handleAPIError } from "@/lib/api/common";
-// import { ApiError } from "@/lib/api/fetcher";
+import { useUserStore } from "@/store/useUserStore";
+
+export type SubmitMode = 'password' | 'phone' | 'passkey';
 
 export default function Login() {
     const router = useRouter();
     const [loginMode, setLoginMode] = useState<SubmitMode>('password');
 
-    // const handleSendCode = async (data: SendCodeFormData) => {
-    //     try {
-    //         const res = await verificationApi.send({
-    //             type: 'login',
-    //             targetType: data.type,
-    //             phone: data.phone,
-    //             email: data.email,
-    //         })
-
-    //         if (res) {
-    //             toast.success('验证码已发送，请注意查收');
-    //             return true;
-    //         } else {
-    //             throw new Error();
-    //         }
-    //     } catch (error) {
-    //         toast.error((error as ApiError).message || '验证码发送失败，请稍后再试');
-    //         return false;
-    //     }
-    // }
-
-    // const handleSubmit = async (data: LoginFormData) => {
-    //     try {
-    //         const res = await authApi.login({
-    //             ...data,
-    //         });
-
-    //         if (res.token) {
-    //             toast.success('登录成功');
-    //             localStorage.setItem('token', res.token);
-    //             router.replace('/console');
-    //             return true;
-    //         } else {
-    //             throw new Error();
-    //         }
-    //     } catch (error) {
-    //         toast.error((error as ApiError).message || '登录失败，请稍后再试');
-    //         return false;
-    //     }
-    // }
-
     return (
         <>
             <Header />
@@ -84,9 +43,10 @@ export default function Login() {
                                         return toast.error('登陆状态异常');
                                     }
 
-                                    handler(formData).then((user) => {
+                                    handler(formData).then((data) => {
-                                        localStorage.setItem('user_profile', JSON.stringify(user));
+                                        useUserStore.getState().setUser(data.user);
                                         // to main page
+                                        router.replace('/console');
                                     }, (e) => {
                                         handleAPIError(e, ({ message }) => toast.error(message))
                                     })
@@ -103,15 +63,13 @@ export default function Login() {
                                             </span>
                                         </div>
                                         <div className="grid grid-cols-3 gap-4">
-                                            <Button variant={loginMode === 'password' ? 'default' : 'outline'} type="button" className="w-full" onClick={() => setLoginMode('password')}>
+                                            {
-                                                <KeyRound />
+                                                ([['password', KeyRound], ['phone', Phone], ['passkey', FileKey2]] as const).map(([mode, Icon]) => (
-                                            </Button>
+                                                    <Button key={mode} variant={loginMode === mode ? 'default' : 'outline'} type="button" className="w-full" onClick={() => setLoginMode(mode)}>
-                                            <Button variant={loginMode === 'phone' ? 'default' : 'outline'} type="button" className="w-full" onClick={() => setLoginMode('phone')}>
+                                                        <Icon />
-                                                <Phone />
-                                            </Button>
-                                            <Button variant={loginMode === 'email' ? 'default' : 'outline'} type="button" className="w-full" onClick={() => setLoginMode('email')}>
-                                                <FileKey2 />
                                                     </Button>
+                                                ))
+                                            }
                                         </div>
 
                                         <div className="text-center text-sm">

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,7 +49,6 @@ export function AppSidebar({ user, isUserLoading, ...props }: React.ComponentPro
     }[],
   }
 
-  if (!isUserLoading) {
   data.navMain = [
     {
       title: "网站管理",
@@ -118,7 +117,6 @@ export function AppSidebar({ user, isUserLoading, ...props }: React.ComponentPro
       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 {
+    // try {
-      await authApi.logout();
+    //   await authApi.logout();
-      localStorage.removeItem('token');
+    //   localStorage.removeItem('token');
-      localStorage.removeItem(UserApi.USER_ME_CACHE_KEY)
+    //   localStorage.removeItem(UserApi.USER_ME_CACHE_KEY)
-      toast.success('登出成功');
+    //   toast.success('登出成功');
-      router.replace('/console/login');
+    //   router.replace('/console/login');
-    } catch {
+    // } catch {
-      toast.error('登出失败，请稍后再试');
+    //   toast.error('登出失败，请稍后再试');
-    }
+    // }
   }
 
   const [userProfileOpen, setUserProfileOpen] = useState(false);
@@ -65,7 +64,8 @@ export function NavUser({ user, isUserLoading }: { user: User | undefined, isUse
                 className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
               >
                 {
-                  user && <>
+                  user ?
+                    <>
                       <Avatar className="h-8 w-8 rounded-lg">
                         <AvatarImage src={user.avatar} />
                         <AvatarFallback className="rounded-lg">U</AvatarFallback>
@@ -74,10 +74,8 @@ export function NavUser({ user, isUserLoading }: { user: User | undefined, isUse
                         <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">
-                {
-                  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" />
@@ -96,7 +94,7 @@ export function NavUser({ user, isUserLoading }: { user: User | undefined, isUse
             >
               <DropdownMenuLabel className="p-0 font-normal">
                 {
-                  user &&
+                  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} />
@@ -106,10 +104,8 @@ export function NavUser({ user, isUserLoading }: { user: User | undefined, isUse
                         <span className="truncate font-medium">{user.nickname}</span>
                         <span className="truncate text-xs">{user.username}</span>
                       </div>
-                  </div>
+                    </div> :
-                }
+                    <div className="flex items-center gap-2">
-                {
-                  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" />

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 {
+        // try {
-            await UserApi.updatePassword(password);
+        //     await UserApi.updatePassword(password);
-            toast.success('新密码设置成功');
+        //     toast.success('新密码设置成功');
-            onOpenChange?.(false);
+        //     onOpenChange?.(false);
-        } catch (error) {
+        // } catch (error) {
-            toast.error((error as ApiError).message || '新密码设置失败');
+        //     toast.error((error as ApiError).message || '新密码设置失败');
-        }
+        // }
     }
 
     return (