tone/tonePage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
tone
2025-12-17 15:38:06 +08:00
parent 86086a7054
commit 0f0b5f227d
6 changed files with 142 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -12,37 +12,23 @@ import {
SidebarProvider,
SidebarTrigger,
} from "@/components/ui/sidebar"
import { useUserMe } from "@/hooks/user/use-user-me";
import { UserApi } from "@/lib/api";
import { useRouter } from "next/navigation";
import { toast } from "sonner";
import { useUserStore } from "@/store/useUserStore";
// import { useUserMe } from "@/hooks/user/use-user-me";
// import { useRouter } from "next/navigation";
// import { toast } from "sonner";
export default function ConsoleMenuLayout({
children,
}: {
children: React.ReactNode
}) {
const router = useRouter();
// const router = useRouter();
const { user, isLoading, error } = useUserMe({
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('账户状态异常，请重新登录');
}
const user = useUserStore().user;
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">

16
apps/frontend/app/console/login/components/types.ts
View File

@@ -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;
}

68
apps/frontend/app/console/login/page.tsx
View File

@@ -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 { useCallback, useState } from "react";
import { 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) => {
localStorage.setItem('user_profile', JSON.stringify(user));
handler(formData).then((data) => {
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 />
</Button>
<Button variant={loginMode === 'phone' ? 'default' : 'outline'} type="button" className="w-full" onClick={() => setLoginMode('phone')}>
<Phone />
</Button>
<Button variant={loginMode === 'email' ? 'default' : 'outline'} type="button" className="w-full" onClick={() => setLoginMode('email')}>
<FileKey2 />
{
([['password', KeyRound], ['phone', Phone], ['passkey', FileKey2]] as const).map(([mode, Icon]) => (
<Button key={mode} variant={loginMode === mode ? 'default' : 'outline'} type="button" className="w-full" onClick={() => setLoginMode(mode)}>
<Icon />
</Button>
))
}
</div>
<div className="text-center text-sm">

6
apps/frontend/components/app-sidebar.tsx
View File

@@ -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>

38
apps/frontend/components/nav-user.tsx
View File

@@ -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,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>
</>
}
{
isUserLoading && <div className="w-full flex items-center gap-2">
</> :
<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>
}
{
isUserLoading && <div className="flex items-center gap-2">
</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" />

15
apps/frontend/components/nav-user/SetPassword.tsx
View File

@@ -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 (