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

完成管理员user-list

Browse Source
This commit is contained in:
tone
2025-05-12 10:27:50 +08:00
parent 21cee7c3f1
commit e5c0c354e5
16 changed files with 648 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
tone-page-web/app/console/(with-menu)/page.tsx
View File

@@ -1,3 +1,7 @@
export default function Page() {
return <div>console</div>
return (
<div>
page
</div>
)
}

69
tone-page-web/app/console/(with-menu)/user/components/user-info-editor.tsx Normal file
View File

@@ -0,0 +1,69 @@
'use client';
import * as React from "react"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerTitle,
} from "@/components/ui/drawer"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
export function UserInfoEditor({
onClose,
userId,
}: {
onClose: () => void,
userId: string
}) {
return (
<Drawer open={!!userId} onClose={onClose} >
<DrawerContent>
<DrawerHeader className="text-left">
<DrawerTitle>编辑用户信息</DrawerTitle>
<DrawerDescription>确保你在保存之前检查所有更改</DrawerDescription>
</DrawerHeader>
<ProfileForm className="px-4" />
<DrawerFooter className="pt-2">
<DrawerClose asChild>
<Button variant="outline">关闭</Button>
</DrawerClose>
</DrawerFooter>
</DrawerContent>
</Drawer>
)
}
function ProfileForm({ className }: React.ComponentProps<"form">) {
return (
<form className={cn("grid items-start gap-4", className)}>
<div className="grid gap-2">
<Label htmlFor="email">UserId</Label>
<Input id="email" defaultValue="adijasiodjoi2q" disabled />
</div>
<div className="grid gap-2">
<Label htmlFor="username">账户</Label>
<Input id="username" defaultValue="username" />
</div>
<div className="grid gap-2">
<Label htmlFor="nickname">昵称</Label>
<Input id="nickname" defaultValue="nickname" />
</div>
<div className="grid gap-2">
<Label htmlFor="email">电子邮箱</Label>
<Input id="email" defaultValue="email" />
</div>
<div className="grid gap-2">
<Label htmlFor="phone">手机号</Label>
<Input id="phone" defaultValue="phone" />
</div>
<Button type="submit">保存</Button>
</form>
)
}

70
tone-page-web/app/console/(with-menu)/user/page.tsx
View File

@@ -1,5 +1,73 @@
'use client';
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";
import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { TooltipContent, TooltipProvider, TooltipTrigger, Tooltip } from "@/components/ui/tooltip";
import { useUserList } from "@/hooks/admin/user/use-user-list";
import { useState } from "react";
import { UserInfoEditor } from "./components/user-info-editor";
export default function Page() {
const { users, isLoading, error, total, page, pageSize } = useUserList();
const [editorUserId, setEditorUserId] = useState("");
return (
<div>user</div>
<>
<Table>
{error && <TableCaption>{error.message}</TableCaption>}
<TableHeader>
<TableRow>
<TableHead className="w-[100px]">userId</TableHead>
<TableHead>账户</TableHead>
<TableHead>昵称</TableHead>
<TableHead>邮箱</TableHead>
<TableHead>手机号</TableHead>
<TableHead>操作</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{
users.map((user) => (
<TableRow key={user.userId}>
<TableCell className="font-medium">
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<div className="max-w-[100px] overflow-hidden text-ellipsis">{user.userId}</div>
</TooltipTrigger>
<TooltipContent>
<p>{user.userId}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</TableCell>
<TableCell>{user.username}</TableCell>
<TableCell>{user.nickname}</TableCell>
<TableCell>{user.email}</TableCell>
<TableCell>{user.phone}</TableCell>
<TableCell>
<Button className="cursor-pointer" variant='outline' size='sm' onClick={() => setEditorUserId(user.userId)}>编辑</Button>
</TableCell>
</TableRow>
))
}
{isLoading && (
<TableRow>
{
Array.from({ length: 6 }).map((_, index) => (
<TableCell key={index}>
<Skeleton className="h-10 w-full" />
</TableCell>
))
}
</TableRow>
)}
</TableBody>
</Table>
<UserInfoEditor onClose={() => setEditorUserId('')} userId={editorUserId} />
</>
)
}

51
tone-page-web/app/console/login/page.tsx
View File

@@ -15,6 +15,7 @@ import { LoginFormData, SendCodeFormData, SubmitMode } from "./components/types"
import { useCallback, useState } from "react";
import LoginBG from './components/login-bg.jpg';
import Image from "next/image";
import { ApiError } from "@/lib/api/fetcher";
export default function Login() {
const router = useRouter();
@@ -25,34 +26,42 @@ export default function Login() {
}, []);
const handleSendCode = async (data: SendCodeFormData) => {
const res = await verificationApi.send({
type: 'login',
targetType: data.type,
phone: data.phone,
email: data.email,
})
try {
const res = await verificationApi.send({
type: 'login',
targetType: data.type,
phone: data.phone,
email: data.email,
})
if (res.statusCode === 200) {
toast.success('验证码已发送，请注意查收');
return true;
} else {
toast.error(res.message || '验证码发送失败，请稍后再试');
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) => {
const res = await authApi.login({
...data,
});
try {
const res = await authApi.login({
...data,
});
if (res.statusCode === 200 && res.data) {
toast.success('登录成功');
localStorage.setItem('token', res.data.token);
router.replace('/console');
return true;
} else {
toast.error(res.message || '登录失败，请稍后再试');
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;
}
}