doctor-mail/apps/web/src/app/auth/register.tsx

import AvatarUploader from "@web/src/components/common/uploader/AvatarUploader";
import DepartmentSelect from "@web/src/components/models/department/department-select";
import { Form, Input, Button, Select } from "antd";
import { motion } from "framer-motion";

export interface RegisterFormData {
	deptId: string;
	username: string;
	showname: string;
	officerId: string;
	password: string;
	repeatPass: string;
}

interface RegisterFormProps {
	onSubmit: (data: RegisterFormData) => void;
	isLoading: boolean;
}

export const RegisterForm = ({ onSubmit, isLoading }: RegisterFormProps) => {
	const [form] = Form.useForm<RegisterFormData>();

	return (
		<motion.div
			initial={{ opacity: 0 }}
			animate={{ opacity: 1 }}
			exit={{ opacity: 0 }}>
			<Form
				form={form}
				layout="vertical"
				onFinish={onSubmit}
				scrollToFirstError>
				<div className=" flex items-center gap-4 mb-2">
					<div>
						<Form.Item name="photoUrl" label="头像" noStyle>
							<AvatarUploader
								placeholder="点击上传头像"
								style={{
									height: 120,
									width: 100,
								}}></AvatarUploader>
						</Form.Item>
					</div>
					<div className="grid  grid-cols-1  gap-2  flex-1">
						<Form.Item
							name="username"
							label="用户名"
							noStyle
							rules={[
								{ required: true, message: "请输入用户名" },
								{ min: 2, message: "用户名至少需要2个字符" },
							]}>
							<Input placeholder="用户名" />
						</Form.Item>
						<Form.Item
							name="showname"
							label="姓名"
							noStyle
							rules={[
								{ required: true, message: "请输入姓名" },
								{ min: 2, message: "姓名至少需要2个字符" },
							]}>
							<Input placeholder="姓名" />
						</Form.Item>
						<Form.Item
							name="deptId"
							noStyle
							label="部门"
							rules={[{ required: true, message: "请选择部门" }]}>
							<DepartmentSelect></DepartmentSelect>
						</Form.Item>
					</div>
				</div>

				<Form.Item
					name="officerId"
					label="证件号"
					rules={[
						{ required: true, message: "请输入证件号" },
						{
							pattern: /^\d{5,12}$/,
							message: "请输入有效的证件号（5-12位数字）",
						},
					]}>
					<Input placeholder="证件号" />
				</Form.Item>

				<Form.Item
					name="password"
					label="密码"
					rules={[
						{ required: true, message: "请输入密码" },
						{ min: 8, message: "密码至少需要8个字符" },
						{
							pattern:
								/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/,
							message: "密码必须包含大小写字母、数字和特殊字符",
						},
					]}>
					<Input.Password placeholder="密码" />
				</Form.Item>

				<Form.Item
					name="repeatPass"
					label="确认密码"
					dependencies={["password"]}
					rules={[
						{ required: true, message: "请确认密码" },
						({ getFieldValue }) => ({
							validator(_, value) {
								if (
									!value ||
									getFieldValue("password") === value
								) {
									return Promise.resolve();
								}
								return Promise.reject(
									new Error("两次输入的密码不一致")
								);
							},
						}),
					]}>
					<Input.Password placeholder="确认密码" />
				</Form.Item>

				<Form.Item>
					<Button
						type="primary"
						htmlType="submit"
						loading={isLoading}
						className="w-full h-10 rounded-lg">
						{isLoading ? "正在注册..." : "注册"}
					</Button>
				</Form.Item>
			</Form>
		</motion.div>
	);
};