- 暂时移除未使用的变量
- 配置项目依赖
- 组织项目基础结构
- 完成auth页面书写
Change-Id: I132c32f131111121619eb69240ece0a39e295c36
diff --git a/src/feature/auth/Register.tsx b/src/feature/auth/Register.tsx
new file mode 100644
index 0000000..5b90c59
--- /dev/null
+++ b/src/feature/auth/Register.tsx
@@ -0,0 +1,149 @@
+import { useEffect, useState } from 'react';
+import { LockOutlined, MailOutlined, NumberOutlined, UserOutlined } from '@ant-design/icons';
+import { Button, Checkbox, Form, Input, Space } from 'antd';
+import { NavLink } from 'react-router';
+
+interface FormValues {
+ name: string;
+ email: string;
+ verifyCode: string;
+ password: string;
+ confirmPassword: string;
+ agreement: boolean;
+}
+
+function Register() {
+ const [countdown, setCountdown] = useState(0);
+ const [form] = Form.useForm<FormValues>();
+ const [emailStatues] = useState(false);
+
+ const sendVerificationCode = () => {
+ setCountdown(60)
+ }
+
+ // 发送表单倒计时
+ useEffect(() => {
+ if (countdown > 0) {
+ const timer = setTimeout(() => {
+ setCountdown(prev => prev - 1);
+ }, 1000);
+
+ return () => clearTimeout(timer);
+ }
+ }, [countdown]);
+
+
+ // 表单提交
+ const onFinish = (values: FormValues) => {
+ console.log('注册成功:', values);
+ };
+
+ return (
+ <Form
+ form={form}
+ style={{ maxWidth: 360 }}
+ onFinish={onFinish}
+ scrollToFirstError
+ >
+ <h2>注册</h2>
+
+ <Form.Item
+ name="name"
+ rules={[{ required: true, message: '请输入用户名' }]}
+ >
+ <Input prefix={<UserOutlined />} placeholder="请输入用户名" />
+ </Form.Item>
+
+ <Form.Item
+ name="email"
+
+ rules={[{ required: true, message: '请输入邮箱' }, { type: 'email', message: '邮箱格式错误' }]}
+ >
+ <Input
+ prefix={<MailOutlined />}
+ placeholder="请输入邮箱"
+ />
+ </Form.Item>
+
+ <Form.Item
+ name="verifyCode"
+ rules={[{ required: true, message: '请填写验证码' }]}
+ >
+ <Space direction="horizontal" size="small">
+ <Input
+ prefix={<NumberOutlined />}
+ placeholder="请输入验证码"
+ style={{ flex: 1 }}
+ />
+ <Button
+ disabled={countdown > 0 || !emailStatues}
+ onClick={sendVerificationCode}
+ style={{ width: 120 }}
+ >
+ {countdown > 0 ? `${countdown}s后重试` : '发送验证码'}
+ </Button>
+ </Space>
+ </Form.Item>
+
+ <Form.Item
+ name="password"
+ rules={[
+ { required: true, message: '请输入密码' },
+ { min: 6, message: '密码长度至少为6位' },
+ ]}
+ >
+ <Input.Password
+ prefix={<LockOutlined />}
+ placeholder="请输入密码"
+ />
+ </Form.Item>
+
+ <Form.Item
+ name="confirmPassword"
+ dependencies={['password']}
+ rules={[
+ { required: true, message: '请确认密码' },
+ ({ getFieldValue }) => ({
+ validator(_, value) {
+ if (!value || getFieldValue('password') === value) {
+ return Promise.resolve();
+ }
+ return Promise.reject('两次输入的密码不一致');
+ },
+ }),
+ ]}
+ >
+ <Input.Password
+ prefix={<LockOutlined />}
+ placeholder="请确认密码"
+ />
+ </Form.Item>
+
+ <Form.Item
+ name="agreement"
+ valuePropName="checked"
+ rules={[
+ {
+ validator: (_, value) =>
+ value ? Promise.resolve() : Promise.reject('请阅读并同意用户协议'),
+ },
+ ]}
+ >
+ <Checkbox>我已阅读并同意用户协议：<a>《创驿平台用户协议》</a></Checkbox>
+ </Form.Item>
+
+ <Form.Item>
+ <Button
+ type="primary"
+ htmlType="submit"
+ style={{ width: '100%' }}
+ >
+ 注册
+ </Button>
+ 或 <NavLink to='/login'>返回登录</NavLink>
+ </Form.Item>
+ </Form>
+ );
+}
+
+export default Register;
\ No newline at end of file