优化后端，实现前端添加用户

tone-page-server/src/admin/controller/admin-user.controller.ts

@@ -32,7 +32,16 @@ export class AdminUserController {
     async create(
         @Body() createDto: CreateDto
     ) {
-        return this.userService.create(createDto);
+        return this.userService.create({
+            ...createDto,
+            ...createDto.password && (() => {
+                const salt = this.userService.generateSalt();
+                return {
+                    salt,
+                    password_hash: this.userService.hashPassword(createDto.password, salt),
+                }
+            })(),
+        });
     }
 
     @Put(':userId')

tone-page-server/src/admin/dto/admin-user/create.dto.ts

@@ -1,4 +1,4 @@
-import { IsString, Length, ValidateIf } from "class-validator";
+import { IsString, Length, Matches, ValidateIf } from "class-validator";
 
 export class CreateDto {
     @ValidateIf(o => o.username !== null)
@@ -6,18 +6,24 @@ export class CreateDto {
     @Length(6, 32, { message: '用户名长度只能为6~32' })
     username: string | null;
 
-    @ValidateIf(o => o.username !== null)
+    @ValidateIf(o => o.nickname !== null)
     @IsString({ message: '昵称不得为空' })
     @Length(6, 30, { message: '昵称长度只能为6~30' })
     nickname: string | null;
 
-    @ValidateIf(o => o.username !== null)
+    @ValidateIf(o => o.email !== null)
     @IsString({ message: '邮箱不得为空' })
     @Length(6, 254, { message: '邮箱长度只能为6~254' })
     email: string | null;
 
-    @ValidateIf(o => o.username !== null)
+    @ValidateIf(o => o.phone !== null)
     @IsString({ message: '手机号不得为空' })
     @Length(11, 11, { message: '手机号长度只能为11' })
     phone: string | null;
+
+    @ValidateIf(o => o.password !== null)
+    @IsString({ message: '密码不得为空' })
+    @Length(6, 32)
+    @Matches(/^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d!@#$%^&*()_+\-=\[\]{};:'",.<>/?]{6,32}$/)
+    password: string | null;
 }

tone-page-server/src/user/user.service.ts

@@ -22,8 +22,15 @@ export class UserService {
     }
 
     async create(user: Partial<User>): Promise<User> {
+        try {
             const newUser = this.userRepository.create(user);
             return this.userRepository.save(newUser);
+        } catch (error) {
+            if (error instanceof QueryFailedError) {
+                throw new ConflictException(this.getDuplicateErrorMessage(error));
+            }
+            throw new BadRequestException('创建用户失败');
+        }
     }
 
     async update(userId: string, user: Partial<User>): Promise<User> {

tone-page-web/app/console/(with-menu)/user/components/create-user-editor.tsx

@@ -0,0 +1,88 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+    Drawer,
+    DrawerClose,
+    DrawerContent,
+    DrawerDescription,
+    DrawerFooter,
+    DrawerHeader,
+    DrawerTitle,
+    DrawerTrigger,
+} from "@/components/ui/drawer"
+import { useState } from "react";
+import { AdminApi } from "@/lib/api";
+import { toast } from "sonner";
+import { ApiError } from "next/dist/server/api-utils";
+
+interface CreateUserEditorProps {
+    children: React.ReactNode
+}
+
+export function CreateUserEditor({ children }: CreateUserEditorProps) {
+    const [open, setOpen] = useState(false);
+    const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+        event.preventDefault();
+        const formData = new FormData(event.currentTarget);
+        try {
+            await AdminApi.user.create({
+                username: formData.get("username")?.toString() || null,
+                nickname: formData.get("nickname")?.toString() || null,
+                email: formData.get("email")?.toString() || null,
+                phone: formData.get("phone")?.toString() || null,
+                password: formData.get("password")?.toString() || null,
+            });
+            setOpen(false);
+            toast.success('创建成功')
+        } catch (error) {
+            toast.error((error as ApiError).message || '创建失败')
+        }
+    }
+
+    return (
+        <>
+            <div onClick={() => setOpen(true)} className="cursor-pointer">
+                {children}
+            </div>
+            <Drawer open={open} onClose={() => setOpen(false)}>
+                <DrawerContent>
+                    <DrawerHeader className="text-left">
+                        <DrawerTitle>新增用户</DrawerTitle>
+                        <DrawerDescription>确保你在保存之前检查所有更改</DrawerDescription>
+                    </DrawerHeader>
+
+                    <form className="grid items-start gap-4 px-4" onSubmit={handleSubmit}>
+                        <div className="grid gap-2">
+                            <Label htmlFor="username">账户</Label>
+                            <Input id="username" name="username" />
+                        </div>
+                        <div className="grid gap-2">
+                            <Label htmlFor="nickname">昵称</Label>
+                            <Input id="nickname" name="nickname" />
+                        </div>
+                        <div className="grid gap-2">
+                            <Label htmlFor="email">电子邮箱</Label>
+                            <Input id="email" name="email" />
+                        </div>
+                        <div className="grid gap-2">
+                            <Label htmlFor="phone">手机号</Label>
+                            <Input id="phone" name="phone" />
+                        </div>
+                        <div className="grid gap-2">
+                            <Label htmlFor="phone">密码</Label>
+                            <Input id="phone" name="phone" />
+                        </div>
+                        <Button type="submit">保存</Button>
+                    </form>
+
+                    <DrawerFooter className="pt-2">
+                        <DrawerClose asChild>
+                            <Button variant="outline">关闭</Button>
+                        </DrawerClose>
+                    </DrawerFooter>
+                </DrawerContent>
+            </Drawer>
+        </>
+    )
+}

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

@@ -7,6 +7,7 @@ import { useUserList } from "@/hooks/admin/user/use-user-list";
 import { useState } from "react";
 import { UserInfoEditor } from "./components/user-info-editor";
 import { User } from "@/lib/types/user";
+import { CreateUserEditor } from "./components/create-user-editor";
 
 
 export default function Page() {
@@ -47,6 +48,11 @@ export default function Page() {
 
     return (
         <>
+            <div>
+                <CreateUserEditor >
+                    <Button >新增用户</Button>
+                </CreateUserEditor>
+            </div>
             <Table>
                 {error && <TableCaption>{error.message}</TableCaption>}
                 <TableHeader>

tone-page-web/lib/api/admin/user/create.ts

@@ -1,3 +1,20 @@
-export function create() {
+import { User } from "@/lib/types/user";
+import fetcher from "../../fetcher";
 
+interface createUserParams {
+    username: string | null;
+    nickname: string | null;
+    email: string | null;
+    phone: string | null;
+    password: string | null;
+}
+
+export async function create(data: createUserParams) {
+    return fetcher<User>("/api/admin/user", {
+        method: "POST",
+        body: JSON.stringify(data),
+        headers: {
+            "Content-Type": "application/json",
+        },
+    });
 }