src/components/Auth/Register.jsx

// import React, { useState } from 'react';
// import '../../pages/AuthPage/AuthPage.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;

// import React, { useState } from 'react';
// import '../../pages/AuthPage/AuthPage.css';
// import image from './logo.svg';

// const API_BASE = process.env.REACT_APP_API_BASE || '/echo';

// const Register = ({ onLoginClick }) => {
//   const [formData, setFormData] = useState({
//     username: '',
//     email: '',
//     password: '',
//     role: 'user',
//     inviteCode: ''
//   });
//   const [error, setError] = useState('');
//   const [isSubmitting, setIsSubmitting] = useState(false);

//   const handleSubmit = async (e) => {
//     e.preventDefault();
//     setIsSubmitting(true);
//     setError('');

//     try {
//       const response = await fetch(`${API_BASE}/user/register`, {
//         method: 'POST',
//         headers: {
//           'Content-Type': 'application/json',
//         },
//         body: JSON.stringify(formData),
//       });

//       const result = await response.json();
      
//       if (!response.ok) {
//         throw new Error(result.message || '注册失败');
//       }

//       console.log('注册成功:', result);
//       // 这里可以添加注册成功后的跳转逻辑
//       alert('注册成功！');
//     } catch (error) {
//       console.error('注册错误:', error);
//       setError(error.message || '注册过程中出现错误');
//     } finally {
//       setIsSubmitting(false);
//     }
//   };

//   const handleChange = (e) => {
//     const { name, value } = e.target;
//     setFormData(prev => ({ ...prev, [name]: value }));
//   };

//   return (
//     <div className="auth-container">
//       <img
//         src={image}
//         alt="网站Logo"
//         style={{ width: '30%', height: 'auto' }}
//       />
//       <div className="auth-form-section">
//         <h3>用户注册</h3>
//         {error && <div className="error-message">{error}</div>}
//         <form onSubmit={handleSubmit}>
//           <div className="form-group">
//             <label>用户名</label>
//             <input
//               type="text"
//               name="username"
//               className="form-input"
//               placeholder="请输入用户名"
//               value={formData.username}
//               onChange={handleChange}
//               required
//               minLength="3"
//               maxLength="20"
//             />
//           </div>
//           <div className="form-group">
//             <label>邮箱</label>
//             <input
//               type="email"
//               name="email"
//               className="form-input"
//               placeholder="请输入邮箱"
//               value={formData.email}
//               onChange={handleChange}
//               required
//             />
//           </div>
//           <div className="form-group">
//             <label>密码</label>
//             <input
//               type="password"
//               name="password"
//               className="form-input"
//               placeholder="请输入密码"
//               value={formData.password}
//               onChange={handleChange}
//               required
//               minLength="6"
//             />
//           </div>
//           <div className="form-group">
//             <label>邀请码</label>
//             <input
//               type="text"
//               name="inviteCode"
//               className="form-input"
//               placeholder="请输入邀请码"
//               value={formData.inviteCode}
//               onChange={handleChange}
//               required
//             />
//           </div>
//           <button 
//             type="submit" 
//             className="auth-button"
//             disabled={isSubmitting}
//           >
//             {isSubmitting ? '注册中...' : '注册'}
//           </button>
//           <p className="login-link">
//             已有账号?{' '}
//             <button 
//               type="button"
//               onClick={onLoginClick} 
//               className="link-button"
//             >
//               点击登录
//             </button>
//           </p>
//         </form>
//       </div>
//     </div>
//   );
// };

// export default Register;