From 6f1d0f2963b8496a7d9ba74bca9193b53addc03e Mon Sep 17 00:00:00 2001
From: lk <kelis@Gmail.com>
Date: Thu, 12 Sep 2024 12:45:32 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8A=A0=E5=85=A5=E6=B3=A8=E5=86=8C=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=20=20=E6=9C=AA=E6=88=90=E5=8A=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/login/register.tsx | 145 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 145 insertions(+)
 create mode 100644 src/pages/login/register.tsx

diff --git a/src/pages/login/register.tsx b/src/pages/login/register.tsx
new file mode 100644
index 0000000..856d161
--- /dev/null
+++ b/src/pages/login/register.tsx
@@ -0,0 +1,145 @@
+import { Layout, Input, Button, Typography, Row, Col, Form } from "antd";
+import { LockOutlined, MailOutlined } from "@ant-design/icons";
+import { createFileRoute } from "@tanstack/react-router";
+import { useAtomValue } from "jotai";
+import React, { memo, useEffect, useState } from "react";
+import {emailCodeAtom} from "@/store/system/user.ts";
+const { Title, Text, Link } = Typography;
+
+const Register = memo(() => {
+  const [registerForm] = Form.useForm();
+  const { mutate: emailCodeMutate } = useAtomValue(emailCodeAtom);
+
+  const handleRegisterSubmit = (values: any) => {
+    console.log(values);
+    // 调用注册API
+  };
+
+  const handleGetCode = () => {
+    const email = registerForm.getFieldValue("email");
+    setCountdown(10);
+    setIsButtonDisabled(true);
+    emailCodeMutate({ email });
+  };
+
+  const [countdown, setCountdown] = useState<number>(0);
+  const [isButtonDisabled, setIsButtonDisabled] = useState<boolean>(false);
+
+  useEffect(() => {
+    let timer: number;
+    if (countdown > 0) {
+      timer = setTimeout(() => setCountdown(countdown - 1), 1000);
+    } else {
+      setIsButtonDisabled(false);
+    }
+    return () => clearTimeout(timer);
+  }, [countdown]);
+
+  useEffect(() => {
+    document.body.className = "register";
+    return () => {
+      document.body.className = document.body.className.replace("register", "");
+    };
+  }, []);
+
+  return (
+          <Layout
+                  style={{
+                    height: "100vh",
+                    background: "url('https://placehold.co/1920x1080') no-repeat center center",
+                    backgroundSize: "cover",
+                  }}
+          >
+            <Row justify="center" align="middle" style={{ height: "100%" }}>
+              <Col>
+                <Row>
+                  <Col span={12} style={{ padding: "20px" }}>
+                    <Title level={3}>向量检索服务免费试用</Title>
+                    <Text>免费试用向量检索服务，玩转大模型生成式检索</Text>
+                    <br />
+                    <Link href="#">查看详情 &gt;</Link>
+                  </Col>
+                  <Col
+                          span={12}
+                          style={{
+                            padding: "20px",
+                            background: "#fff",
+                            borderRadius: "8px",
+                            position: "relative",
+                            width: "500px",
+                            height: "500px",
+                          }}
+                  >
+                    <div
+                            style={{
+                              position: "absolute",
+                              top: 0,
+                              right: 0,
+                              width: 0,
+                              height: 0,
+                              borderLeft: "80px solid transparent",
+                              borderTop: "80px solid #ff9800",
+                              textAlign: "center",
+                              cursor: "pointer", // 设置手型光标
+                            }}
+                    >
+                      <text
+                              style={{
+                                cursor: "pointer", // 设置手型光标
+                                position: "absolute",
+                                top: "-70px",
+                                right: "0px",
+                                color: "#fff",
+                                fontSize: "16px",
+                                transform: "rotate(0deg)",
+                                textAlign: "center",
+                                width: "60px",
+                                display: "block",
+                              }}
+                      >
+                        注册
+                      </text>
+                    </div>
+                    <Form form={registerForm} onFinish={handleRegisterSubmit}>
+                      <Form.Item name="email" rules={[{ required: true, message: "请输入邮箱" }]}>
+                        <Input
+                                size="large"
+                                placeholder="请输入邮箱"
+                                prefix={<MailOutlined />}
+                                addonAfter={
+                                  <Button onClick={handleGetCode} disabled={isButtonDisabled}>
+                                    {isButtonDisabled ? `${countdown}秒后重试` : "获得验证码"}
+                                  </Button>
+                                }
+                        />
+                      </Form.Item>
+                      <Form.Item name="code" rules={[{ required: true, message: "请输入验证码" }]}>
+                        <Input size="large" placeholder="请输入验证码" prefix={<LockOutlined />} />
+                      </Form.Item>
+                      <Form.Item name="password" rules={[{ required: true, message: "请输入密码" }]}>
+                        <Input.Password size="large" placeholder="请输入密码" prefix={<LockOutlined />} />
+                      </Form.Item>
+                      <Form.Item name="confirmPassword" rules={[{ required: true, message: "请确认密码" }]}>
+                        <Input.Password size="large" placeholder="请确认密码" prefix={<LockOutlined />} />
+                      </Form.Item>
+                      <Button type="primary" htmlType="submit" style={{ width: "100%" }}>
+                        注册
+                      </Button>
+                    </Form>
+                    <Row justify="space-between" style={{ marginTop: "10px" }}>
+                      <Link href="#">已有账号？登录</Link>
+                      <Link href="#">忘记密码</Link>
+                    </Row>
+                  </Col>
+                </Row>
+              </Col>
+            </Row>
+          </Layout>
+  );
+});
+
+export const Route = createFileRoute("/register")({
+  component: Register,
+});
+
+export default Register;