From 995843f34254ff4365ab2b17a01bc9b24783463d Mon Sep 17 00:00:00 2001
From: tangjie <122778500@qq.com>
Date: Fri, 3 Jul 2026 16:50:25 +0800
Subject: [PATCH] feat

---
 src/api/register/index.js               |  13 +
 src/enumerate/namespace/index.js        |   1 +
 src/pages/Container/Register/index.js   | 334 +++++++++++++++++++++++-
 src/pages/Container/Register/index.less | 141 ++++++++++
 src/pages/Container/index.less          |  15 +-
 5 files changed, 486 insertions(+), 18 deletions(-)
 create mode 100644 src/api/register/index.js
 create mode 100644 src/pages/Container/Register/index.less

diff --git a/src/api/register/index.js b/src/api/register/index.js
new file mode 100644
index 0000000..1c3b8de
--- /dev/null
+++ b/src/api/register/index.js
@@ -0,0 +1,13 @@
+import { declareRequest } from "@cqsjjb/jjb-dva-runtime";
+
+// 发送短信验证码
+export const sendMessageAction = declareRequest(
+  "sendMessageLoading",
+  "Post > @/safetyEval/account/sendMessage"
+);
+
+// 新增用户（注册）
+export const registerAction = declareRequest(
+  "registerLoading",
+  "Post > @/account/save"
+);
diff --git a/src/enumerate/namespace/index.js b/src/enumerate/namespace/index.js
index 3233af6..5863b83 100644
--- a/src/enumerate/namespace/index.js
+++ b/src/enumerate/namespace/index.js
@@ -20,3 +20,4 @@ export const NS_EQUIP_INFO = defineNamespace("equipInfo");
 export const NS_QUAL_FILING = defineNamespace("qualFiling");
 export const NS_QUAL_REVIEW = defineNamespace("qualReview");
 export const NS_QUAL_EXPERT = defineNamespace("qualExpert");
+export const NS_REGISTER = defineNamespace("register");
diff --git a/src/pages/Container/Register/index.js b/src/pages/Container/Register/index.js
index 4b8c8d5..852b69c 100644
--- a/src/pages/Container/Register/index.js
+++ b/src/pages/Container/Register/index.js
@@ -1,11 +1,327 @@
-import React from "react";
+import {
+  UserOutlined,
+  LockOutlined,
+  MobileOutlined,
+  SafetyCertificateOutlined,
+} from "@ant-design/icons";
+import { Connect } from "@cqsjjb/jjb-dva-runtime";
+import { Button, Form, Input, message } from "antd";
+import React, { useState } from "react";
+import { NS_REGISTER } from "~/enumerate/namespace";
+import "./index.less";
 
-export default class Register extends React.Component {
-  render() {
-    return (
-      <div>
-        <h1>Regist1er</h1>
+function Register({ sendMessageAction, registerAction, registerLoading }) {
+  const [form] = Form.useForm();
+  const [countdown, setCountdown] = useState(0);
+  const [sending, setSending] = useState(false);
+
+  const handleSendCode = async () => {
+    const phone = form.getFieldValue("phone");
+    if (!phone) {
+      message.error("请输入手机号");
+      return;
+    }
+    const phoneReg = /^1[3-9]\d{9}$/;
+    if (!phoneReg.test(phone)) {
+      message.error("请输入正确的手机号");
+      return;
+    }
+
+    setSending(true);
+    try {
+      const res = await sendMessageAction({ mobile: phone });
+      if (res.success) {
+        message.success("验证码已发送");
+        setCountdown(60);
+        const timer = setInterval(() => {
+          setCountdown((prev) => {
+            if (prev <= 1) {
+              clearInterval(timer);
+              return 0;
+            }
+            return prev - 1;
+          });
+        }, 1000);
+      }
+    } finally {
+      setSending(false);
+    }
+  };
+
+  const handleSubmit = async (values) => {
+    const payload = {
+      account: values.account,
+      phone: values.phone,
+      password: values.password,
+      type: 1,
+    };
+    const res = await registerAction(payload);
+    if (res.success) {
+      message.success("注册成功");
+      form.resetFields();
+    }
+  };
+
+  return (
+    <div className="register-page">
+      <div className="register-top-bar">
+        <div className="register-top-logo">
+          <svg
+            className="register-top-icon"
+            viewBox="0 0 32 32"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <rect
+              x="2"
+              y="12"
+              width="6"
+              height="18"
+              rx="1"
+              fill="#fff"
+              opacity="0.9"
+            />
+            <rect
+              x="10"
+              y="6"
+              width="6"
+              height="24"
+              rx="1"
+              fill="#fff"
+              opacity="0.7"
+            />
+            <rect
+              x="18"
+              y="10"
+              width="6"
+              height="20"
+              rx="1"
+              fill="#fff"
+              opacity="0.8"
+            />
+            <rect
+              x="26"
+              y="4"
+              width="4"
+              height="26"
+              rx="1"
+              fill="#fff"
+              opacity="0.6"
+            />
+            <path
+              d="M4 8 L10 2 L16 8 L22 2 L28 8"
+              stroke="#fff"
+              strokeWidth="2"
+              fill="none"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              opacity="0.5"
+            />
+          </svg>
+          <span className="register-top-title">
+            巫溪县安全评价在线监管一件事
+          </span>
+          <span className="register-top-subtitle">安全评价机构服务系统</span>
+        </div>
       </div>
-    );
-  }
-}
\ No newline at end of file
+      <div className="register-card">
+        <div className="register-left">
+          <svg
+            className="register-logo-icon"
+            viewBox="0 0 200 200"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <defs>
+              <linearGradient
+                id="shieldGrad"
+                x1="0%"
+                y1="0%"
+                x2="100%"
+                y2="100%"
+              >
+                <stop offset="0%" stopColor="#4a9eff" />
+                <stop offset="100%" stopColor="#1677ff" />
+              </linearGradient>
+              <linearGradient id="ringGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+                <stop offset="0%" stopColor="#a8d4ff" />
+                <stop offset="100%" stopColor="#4a9eff" />
+              </linearGradient>
+            </defs>
+            <ellipse
+              cx="100"
+              cy="160"
+              rx="70"
+              ry="15"
+              fill="#e0e0e0"
+              opacity="0.4"
+            />
+            <ellipse
+              cx="100"
+              cy="150"
+              rx="55"
+              ry="10"
+              fill="#c0d8f0"
+              opacity="0.5"
+            />
+            <path
+              d="M100 45 L145 60 L145 110 Q145 140 100 160 Q55 140 55 110 L55 60 Z"
+              fill="url(#shieldGrad)"
+              opacity="0.15"
+            />
+            <path
+              d="M100 50 L140 64 L140 108 Q140 136 100 154 Q60 136 60 108 L60 64 Z"
+              fill="url(#shieldGrad)"
+              opacity="0.25"
+            />
+            <path
+              d="M100 55 L135 68 L135 106 Q135 132 100 148 Q65 132 65 106 L65 68 Z"
+              fill="url(#shieldGrad)"
+            />
+            <path
+              d="M88 95 L96 105 L114 82"
+              stroke="#fff"
+              strokeWidth="5"
+              fill="none"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <ellipse
+              cx="100"
+              cy="148"
+              rx="45"
+              ry="8"
+              fill="none"
+              stroke="url(#ringGrad)"
+              strokeWidth="3"
+            />
+            <ellipse
+              cx="100"
+              cy="148"
+              rx="35"
+              ry="6"
+              fill="none"
+              stroke="#a8d4ff"
+              strokeWidth="2"
+            />
+            <rect
+              x="85"
+              y="155"
+              width="8"
+              height="20"
+              rx="2"
+              fill="#4a9eff"
+              opacity="0.6"
+            />
+            <rect
+              x="107"
+              y="155"
+              width="8"
+              height="20"
+              rx="2"
+              fill="#4a9eff"
+              opacity="0.6"
+            />
+          </svg>
+          <div className="register-left-title">安全评价机构服务系统</div>
+          <div className="register-left-subtitle">创造更值得信赖的世界</div>
+        </div>
+
+        <div className="register-right">
+          <div className="register-header">
+            <div className="register-title">欢迎注册安全评价机构服务系统</div>
+            <div className="register-subtitle">创造更值得信赖的世界</div>
+          </div>
+
+          <Form
+            form={form}
+            className="register-form"
+            onFinish={handleSubmit}
+            autoComplete="off"
+          >
+            <Form.Item
+              name="account"
+              rules={[{ required: true, message: "请输入账号" }]}
+            >
+              <Input
+                prefix={<UserOutlined style={{ color: "#bfbfbf" }} />}
+                placeholder="请输入账号"
+                size="large"
+              />
+            </Form.Item>
+            <Form.Item
+              name="password"
+              rules={[{ required: true, message: "请输入密码" }]}
+            >
+              <Input.Password
+                prefix={<LockOutlined style={{ color: "#bfbfbf" }} />}
+                placeholder="请输入密码"
+                size="large"
+              />
+            </Form.Item>
+
+            <Form.Item
+              name="phone"
+              rules={[
+                { required: true, message: "请输入手机号" },
+                { pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号" },
+              ]}
+            >
+              <Input
+                prefix={<MobileOutlined style={{ color: "#bfbfbf" }} />}
+                placeholder="请输入手机号"
+                size="large"
+                maxLength={11}
+              />
+            </Form.Item>
+
+            <Form.Item
+              name="verifyCode"
+              rules={[{ required: true, message: "请输入验证码" }]}
+            >
+              <div className="register-verify-row">
+                <Form.Item name="verifyCode" noStyle>
+                  <Input
+                    className="register-verify-input"
+                    prefix={
+                      <SafetyCertificateOutlined style={{ color: "#bfbfbf" }} />
+                    }
+                    placeholder="验证码"
+                    size="large"
+                  />
+                </Form.Item>
+                <Button
+                  className="register-verify-btn"
+                  type="primary"
+                  disabled={countdown > 0 || sending}
+                  loading={sending}
+                  onClick={handleSendCode}
+                >
+                  {countdown > 0 ? `${countdown}s后重试` : "获取验证码"}
+                </Button>
+              </div>
+            </Form.Item>
+
+            <Form.Item>
+              <Button
+                className="register-submit-btn"
+                type="primary"
+                htmlType="submit"
+                loading={registerLoading}
+              >
+                注册
+              </Button>
+              <Button
+                className="register-submit-btn"
+                loading={registerLoading}
+                onClick={() => window.location.href = "https://gbs-gateway.qhdsafety.com/login/client/72cf4f659dc54dcfaeecd32eabf483b5"}
+              >
+                登录
+              </Button>
+            </Form.Item>
+          </Form>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Connect([NS_REGISTER], true)(Register);
diff --git a/src/pages/Container/Register/index.less b/src/pages/Container/Register/index.less
new file mode 100644
index 0000000..dbdb8aa
--- /dev/null
+++ b/src/pages/Container/Register/index.less
@@ -0,0 +1,141 @@
+.register-page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  background: linear-gradient(135deg, #1a5fb4 0%, #0d3a7a 100%);
+  height: 100%;
+  box-sizing: border-box;
+  padding: 24px;
+
+  .register-top-bar {
+    margin-bottom: 24px;
+
+    .register-top-logo {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+
+      .register-top-icon {
+        width: 32px;
+        height: 32px;
+      }
+
+      .register-top-title {
+        font-size: 20px;
+        font-weight: 600;
+        color: #fff;
+        letter-spacing: 1px;
+      }
+
+      .register-top-subtitle {
+        font-size: 13px;
+        color: rgba(255, 255, 255, 0.75);
+        margin-left: 4px;
+        padding-left: 10px;
+        border-left: 1px solid rgba(255, 255, 255, 0.4);
+      }
+    }
+  }
+
+  .register-card {
+    display: flex;
+    width: 900px;
+    min-height: 520px;
+    background: #fff;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
+  }
+
+  .register-left {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(180deg, #e8f4ff 0%, #d0e8ff 100%);
+    padding: 40px;
+
+    .register-logo-icon {
+      width: 180px;
+      height: 180px;
+      margin-bottom: 24px;
+    }
+
+    .register-left-title {
+      font-size: 20px;
+      font-weight: 600;
+      color: #1677ff;
+      margin-bottom: 8px;
+    }
+
+    .register-left-subtitle {
+      font-size: 14px;
+      color: #666;
+    }
+  }
+
+  .register-right {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 48px;
+
+    .register-header {
+      text-align: center;
+      margin-bottom: 32px;
+
+      .register-title {
+        font-size: 20px;
+        font-weight: 600;
+        color: #333;
+        margin-bottom: 8px;
+      }
+
+      .register-subtitle {
+        font-size: 13px;
+        color: #999;
+      }
+    }
+
+    .register-form {
+      .ant-form-item {
+        margin-bottom: 20px;
+      }
+
+      .ant-input-affix-wrapper {
+        border-radius: 4px;
+      }
+
+      .ant-input {
+        border-radius: 4px;
+      }
+
+      .register-verify-row {
+        display: flex;
+        gap: 12px;
+
+        .register-verify-input {
+          flex: 1;
+        }
+
+        .register-verify-btn {
+          width: 120px;
+          height: 40px;
+          border-radius: 4px;
+        }
+      }
+
+      .register-submit-btn {
+        width: 100%;
+        height: 40px;
+        border-radius: 4px;
+        font-size: 15px;
+        margin-top: 8px;
+      }
+    }
+  }
+}
diff --git a/src/pages/Container/index.less b/src/pages/Container/index.less
index 4305faa..dc3a626 100644
--- a/src/pages/Container/index.less
+++ b/src/pages/Container/index.less
@@ -1,20 +1,17 @@
-.pageLayout-extra {
 
-  color: rgba(0, 0, 0, 0.45);
-  font-size: 14px;
-  font-weight: 400;
-}
 .micro-temp-modal-body {
   max-height: 630px;
   overflow-y: auto;
   scrollbar-width: thin;
 }
-body {
-  height: 100%;
-  overflow-y: hidden;
-}
+
 .micro-temp-layout-container .micro-temp-lay-container-bottom {
   padding: 10px 24px !important;
   display: flex;
   justify-content: flex-end;
 }
+
+html, body {
+  height: 100%;
+  margin: 0;
+}
\ No newline at end of file