diff --git a/src/components/Auth/Register.jsx b/src/components/Auth/Register.jsx
new file mode 100644
index 0000000..417864f
--- /dev/null
+++ b/src/components/Auth/Register.jsx
@@ -0,0 +1,121 @@
+import React, { useState } from 'react';
+import './Auth.css';
+import image from './logo.svg'; // 引入图片
+
+const Register = ({ onLoginClick }) => {
+  const [formData, setFormData] = useState({
+    username: '',
+    password: '',
+    email: ''
+  });
+  const [verificationCode, setVerificationCode] = useState('');
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    // 注册逻辑
+  };
+
+  const verifyEmailCode = async () => {
+    try {
+      const response = await fetch('http://localhost:8080/user/verify-code', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          email: formData.email,
+          code: verificationCode,
+        }),
+      });
+
+      const result = await response.json();
+      if (response.ok && result.code === "0") {
+        console.log('邮箱验证成功:', result.msg);
+        // 处理成功逻辑
+      } else {
+        console.error('邮箱验证失败:', result.msg);
+        // 处理失败逻辑
+      }
+    } catch (error) {
+      console.error('请求错误:', error);
+      // 处理请求错误
+    }
+  };
+
+
+  return (
+    <div className="auth-container">
+      <img 
+        src={image} 
+        alt="描述" 
+        style={{ width: '30%', height: 'auto'}} 
+      />
+      <div className="auth-form-section">
+        <h3>用户注册</h3>
+        <form onSubmit={handleSubmit}>
+          <div className="form-group">
+            <label>用户名</label>
+            <input
+              type="text"
+              className="form-input"
+              placeholder="请输入用户名"
+              value={formData.username}
+              onChange={(e) => setFormData({ ...formData, username: e.target.value })}
+              required
+            />
+          </div>
+          <div className="form-group">
+            <label>密码</label>
+            <input
+              type="password"
+              className="form-input"
+              placeholder="请输入密码"
+              value={formData.password}
+              onChange={(e) => setFormData({ ...formData, password: e.target.value })}
+              required
+            />
+          </div>
+          <div className="form-group">
+            <label>邮箱</label>
+            <div style={{ display: 'flex', alignItems: 'center' }}>
+              <input
+                type="email"
+                className="form-input"
+                placeholder="请输入邮箱"
+                value={formData.email}
+                onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+                required
+                style={{ flex: 1, marginRight: '10px' }}
+              />
+              <button type="button" onClick={verifyEmailCode} className="verify-button">
+                验证邮箱
+              </button>
+            </div>
+          </div>
+          <div className="form-group">
+            <label>验证码</label>
+            <input
+              type="text"
+              className="form-input"
+              placeholder="请输入邮箱验证码"
+              value={verificationCode}
+              onChange={(e) => setVerificationCode(e.target.value)}
+              required
+            />
+          </div>
+          <button type="submit" className="auth-button">
+            注册
+          </button>
+          <p className="login-link">
+            已有账号? 
+            <button onClick={onLoginClick} className="link-button">
+              点击登录
+            </button>
+          </p>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default Register;
\ No newline at end of file