503 lines
20 KiB
HTML
503 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>CloudNest - 注册</title>
|
|
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
|
<script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
|
|
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
|
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; overflow: hidden; }
|
|
|
|
/* 注册页面容器 / Register page container */
|
|
.register-container {
|
|
min-height: 100vh;
|
|
background: linear-gradient(135deg, #0f766e 0%, #14b8a6 50%, #2dd4bf 100%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 背景装饰圆形 / Background decoration circles */
|
|
.bg-decoration {
|
|
position: absolute;
|
|
width: 600px;
|
|
height: 600px;
|
|
border-radius: 50%;
|
|
background: rgba(255,255,255,0.05);
|
|
top: -200px;
|
|
left: -150px;
|
|
}
|
|
.bg-decoration-2 {
|
|
position: absolute;
|
|
width: 450px;
|
|
height: 450px;
|
|
border-radius: 50%;
|
|
background: rgba(255,255,255,0.03);
|
|
bottom: -180px;
|
|
right: -80px;
|
|
}
|
|
|
|
/* 浮动图标动画 / Floating icon animation */
|
|
.floating-icon {
|
|
position: absolute;
|
|
font-size: 52px;
|
|
color: rgba(255,255,255,0.08);
|
|
animation: float 6s ease-in-out infinite;
|
|
}
|
|
.floating-icon:nth-child(3) { top: 15%; right: 12%; animation-delay: 0s; }
|
|
.floating-icon:nth-child(4) { top: 55%; left: 8%; animation-delay: 2s; }
|
|
.floating-icon:nth-child(5) { bottom: 20%; right: 18%; animation-delay: 4s; }
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0) rotate(0deg); }
|
|
50% { transform: translateY(-25px) rotate(10deg); }
|
|
}
|
|
|
|
/* 注册卡片 / Register card */
|
|
.register-card {
|
|
background: white;
|
|
border-radius: 20px;
|
|
padding: 50px 60px;
|
|
box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
|
|
width: 100%;
|
|
max-width: 450px;
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
/* Logo区域 / Logo section */
|
|
.logo-section {
|
|
text-align: center;
|
|
margin-bottom: 35px;
|
|
}
|
|
.logo {
|
|
width: 70px;
|
|
height: 70px;
|
|
background: linear-gradient(135deg, #0f766e, #14b8a6);
|
|
border-radius: 16px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 32px;
|
|
color: white;
|
|
margin-bottom: 15px;
|
|
box-shadow: 0 10px 25px rgba(15,118,110,0.3);
|
|
}
|
|
.logo-title {
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
color: #1e293b;
|
|
letter-spacing: 2px;
|
|
}
|
|
.logo-subtitle {
|
|
font-size: 14px;
|
|
color: #64748b;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
/* 表单项 / Form items */
|
|
.form-item {
|
|
margin-bottom: 22px;
|
|
}
|
|
.el-input__wrapper {
|
|
border-radius: 12px;
|
|
padding: 0 15px;
|
|
height: 48px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.el-input__wrapper:hover {
|
|
box-shadow: 0 0 0 1px rgba(15,118,110,0.2);
|
|
}
|
|
.el-input__wrapper.is-focus {
|
|
box-shadow: 0 0 0 2px rgba(15,118,110,0.4);
|
|
border-color: #0f766e;
|
|
}
|
|
|
|
/* 注册按钮 / Register button */
|
|
.register-btn {
|
|
width: 100%;
|
|
height: 50px;
|
|
border-radius: 12px;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
|
|
border: none;
|
|
transition: all 0.3s ease;
|
|
margin-top: 10px;
|
|
}
|
|
.register-btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 25px rgba(15,118,110,0.4);
|
|
}
|
|
.register-btn:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* 登录链接 / Login link */
|
|
.login-link {
|
|
text-align: center;
|
|
margin-top: 25px;
|
|
font-size: 14px;
|
|
color: #64748b;
|
|
}
|
|
.login-link a {
|
|
color: #0f766e;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
transition: color 0.3s;
|
|
}
|
|
.login-link a:hover {
|
|
color: #0d9488;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* 验证码区域 / Captcha area */
|
|
.captcha-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
.captcha-row .el-input {
|
|
flex: 1;
|
|
}
|
|
.captcha-img {
|
|
width: 120px;
|
|
height: 48px;
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
border: 1px solid #e2e8f0;
|
|
background: #f8fafc;
|
|
object-fit: contain;
|
|
}
|
|
.email-code-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
.email-code-row .el-input {
|
|
flex: 1;
|
|
}
|
|
.email-code-btn {
|
|
width: 120px;
|
|
height: 48px;
|
|
border-radius: 10px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.el-message {
|
|
top: 20px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<div class="register-container">
|
|
<div class="bg-decoration"></div>
|
|
<div class="bg-decoration-2"></div>
|
|
<i class="fa-solid fa-user-plus floating-icon"></i>
|
|
<i class="fa-solid fa-shield-halved floating-icon"></i>
|
|
<i class="fa-solid fa-key floating-icon"></i>
|
|
|
|
<div class="register-card">
|
|
<div class="logo-section">
|
|
<div class="logo">
|
|
<i class="fa-solid fa-user-plus"></i>
|
|
</div>
|
|
<div class="logo-title">CloudNest</div>
|
|
<div class="logo-subtitle">创建您的个人云存储账号</div>
|
|
</div>
|
|
|
|
<el-form :model="registerForm" :rules="rules" ref="registerFormRef" class="form-container">
|
|
<el-form-item prop="username" class="form-item">
|
|
<el-input
|
|
v-model="registerForm.username"
|
|
placeholder="请输入用户名（3-50个字符）"
|
|
size="large"
|
|
prefix-icon="User"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item prop="nickname" class="form-item">
|
|
<el-input
|
|
v-model="registerForm.nickname"
|
|
placeholder="请输入昵称"
|
|
size="large"
|
|
prefix-icon="UserFilled"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item prop="password" class="form-item">
|
|
<el-input
|
|
v-model="registerForm.password"
|
|
type="password"
|
|
placeholder="请输入密码（至少6个字符）"
|
|
size="large"
|
|
prefix-icon="Lock"
|
|
show-password
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item prop="confirmPassword" class="form-item">
|
|
<el-input
|
|
v-model="registerForm.confirmPassword"
|
|
type="password"
|
|
placeholder="请确认密码"
|
|
size="large"
|
|
prefix-icon="Lock"
|
|
show-password
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item prop="email" class="form-item">
|
|
<el-input
|
|
v-model="registerForm.email"
|
|
placeholder="请输入邮箱（可选）"
|
|
size="large"
|
|
prefix-icon="Message"
|
|
/>
|
|
</el-form-item>
|
|
<div class="captcha-row">
|
|
<el-form-item prop="captcha_answer" class="form-item captcha-input-item">
|
|
<el-input
|
|
v-model="registerForm.captcha_answer"
|
|
placeholder="请输入图形验证码"
|
|
size="large"
|
|
prefix-icon="Picture"
|
|
/>
|
|
</el-form-item>
|
|
<img
|
|
:src="captchaImage"
|
|
class="captcha-img"
|
|
@click="refreshCaptcha"
|
|
title="点击刷新验证码"
|
|
:alt="captchaImage ? '验证码' : '加载中...'"
|
|
/>
|
|
</div>
|
|
<el-form-item prop="email_code" class="form-item" v-if="registerForm.email">
|
|
<div class="email-code-row">
|
|
<el-input
|
|
v-model="registerForm.email_code"
|
|
placeholder="请输入邮箱验证码"
|
|
size="large"
|
|
prefix-icon="MessageBox"
|
|
/>
|
|
<el-button
|
|
type="primary"
|
|
class="email-code-btn"
|
|
@click="sendEmailCode"
|
|
:disabled="emailCountdown > 0 || !registerForm.email || !registerForm.captcha_answer"
|
|
:loading="emailCodeLoading"
|
|
>
|
|
{{ emailCountdown > 0 ? emailCountdown + 's' : '获取验证码' }}
|
|
</el-button>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button
|
|
type="primary"
|
|
class="register-btn"
|
|
@click="handleRegister"
|
|
:loading="loading"
|
|
>
|
|
<i class="fa-solid fa-user-plus"></i> 注 册
|
|
</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<div class="login-link">
|
|
已有账号？<a href="/login">立即登录</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const { createApp, ref, reactive, onMounted } = Vue;
|
|
|
|
createApp({
|
|
setup() {
|
|
const registerFormRef = ref(null);
|
|
const loading = ref(false);
|
|
const captchaImage = ref('');
|
|
const emailCountdown = ref(0);
|
|
const emailCountdownTimer = ref(null);
|
|
const emailCodeLoading = ref(false);
|
|
|
|
// API基础路径配置（本地测试使用 localhost）
|
|
// API base path configuration (use localhost for local testing)
|
|
// 认证服务端口: 8081 / Auth service port: 8081
|
|
const AUTH_API_BASE = 'http://localhost:8081/api/v1/auth';
|
|
const CAPTCHA_API_BASE = 'http://localhost:8081/api/v1';
|
|
|
|
const registerForm = reactive({
|
|
username: '',
|
|
nickname: '',
|
|
password: '',
|
|
confirmPassword: '',
|
|
email: '',
|
|
captcha_id: '',
|
|
captcha_answer: '',
|
|
email_code: ''
|
|
});
|
|
|
|
const rules = {
|
|
username: [
|
|
{ required: true, message: '请输入用户名', trigger: 'blur' },
|
|
{ min: 3, max: 50, message: '用户名长度为3-50个字符', trigger: 'blur' }
|
|
],
|
|
nickname: [
|
|
{ required: true, message: '请输入昵称', trigger: 'blur' },
|
|
{ min: 1, max: 50, message: '昵称长度为1-50个字符', trigger: 'blur' }
|
|
],
|
|
password: [
|
|
{ required: true, message: '请输入密码', trigger: 'blur' },
|
|
{ min: 6, message: '密码长度至少为6个字符', trigger: 'blur' }
|
|
],
|
|
confirmPassword: [
|
|
{ required: true, message: '请确认密码', trigger: 'blur' },
|
|
{
|
|
validator: (rule, value, callback) => {
|
|
if (value !== registerForm.password) {
|
|
callback(new Error('两次输入的密码不一致'));
|
|
} else {
|
|
callback();
|
|
}
|
|
},
|
|
trigger: 'blur'
|
|
}
|
|
],
|
|
email: [
|
|
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
|
|
],
|
|
captcha_answer: [
|
|
{ required: true, message: '请输入图形验证码', trigger: 'blur' }
|
|
],
|
|
email_code: [
|
|
{ required: true, message: '请输入邮箱验证码', trigger: 'blur' }
|
|
]
|
|
};
|
|
|
|
// 加载图形验证码 / Load captcha
|
|
const loadCaptcha = async () => {
|
|
try {
|
|
const response = await axios.get(`${CAPTCHA_API_BASE}/captcha`);
|
|
if (response.data.code === 0 && response.data.data) {
|
|
registerForm.captcha_id = response.data.data.captcha_id || '';
|
|
captchaImage.value = `${CAPTCHA_API_BASE}/captcha/${registerForm.captcha_id}/image`;
|
|
}
|
|
} catch (error) {
|
|
console.error('加载验证码失败', error);
|
|
}
|
|
};
|
|
|
|
// 刷新图形验证码 / Refresh captcha
|
|
const refreshCaptcha = () => {
|
|
loadCaptcha();
|
|
};
|
|
|
|
// 发送邮箱验证码 / Send email code
|
|
const sendEmailCode = async () => {
|
|
if (!registerForm.email) {
|
|
ElementPlus.ElMessage.warning('请先输入邮箱');
|
|
return;
|
|
}
|
|
if (!registerForm.captcha_answer) {
|
|
ElementPlus.ElMessage.warning('请先输入图形验证码');
|
|
return;
|
|
}
|
|
emailCodeLoading.value = true;
|
|
try {
|
|
const response = await axios.post(`${AUTH_API_BASE}/email-code`, {
|
|
email: registerForm.email,
|
|
captcha_id: registerForm.captcha_id,
|
|
captcha_answer: registerForm.captcha_answer
|
|
});
|
|
if (response.data.code === 0) {
|
|
ElementPlus.ElMessage.success('邮箱验证码已发送');
|
|
emailCountdown.value = 60;
|
|
emailCountdownTimer.value = setInterval(() => {
|
|
emailCountdown.value--;
|
|
if (emailCountdown.value <= 0) {
|
|
clearInterval(emailCountdownTimer.value);
|
|
emailCountdownTimer.value = null;
|
|
}
|
|
}, 1000);
|
|
} else {
|
|
ElementPlus.ElMessage.error(response.data.message || '发送失败');
|
|
refreshCaptcha();
|
|
}
|
|
} catch (error) {
|
|
const message = error.response?.data?.message || '发送失败，请检查网络连接';
|
|
ElementPlus.ElMessage.error(message);
|
|
refreshCaptcha();
|
|
} finally {
|
|
emailCodeLoading.value = false;
|
|
}
|
|
};
|
|
|
|
// 处理注册 / Handle register
|
|
// API路由: POST /api/v1/auth/register
|
|
const handleRegister = async () => {
|
|
const valid = await registerFormRef.value.validate().catch(() => false);
|
|
if (!valid) return;
|
|
|
|
loading.value = true;
|
|
try {
|
|
const payload = {
|
|
username: registerForm.username,
|
|
password: registerForm.password,
|
|
nickname: registerForm.nickname,
|
|
email: registerForm.email,
|
|
captcha_id: registerForm.captcha_id,
|
|
captcha_answer: registerForm.captcha_answer,
|
|
email_code: registerForm.email_code
|
|
};
|
|
// 如果邮箱为空，不发送邮箱验证码
|
|
if (!registerForm.email) {
|
|
delete payload.email;
|
|
delete payload.email_code;
|
|
}
|
|
const response = await axios.post(`${AUTH_API_BASE}/register`, payload);
|
|
|
|
if (response.data.code === 0) {
|
|
ElementPlus.ElMessage.success(response.data.message || '注册成功');
|
|
setTimeout(() => {
|
|
window.location.href = '/login';
|
|
}, 1500);
|
|
} else {
|
|
ElementPlus.ElMessage.error(response.data.message || '注册失败');
|
|
refreshCaptcha();
|
|
}
|
|
} catch (error) {
|
|
const message = error.response?.data?.message || '注册失败，请检查网络连接';
|
|
ElementPlus.ElMessage.error(message);
|
|
refreshCaptcha();
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
|
|
onMounted(() => {
|
|
loadCaptcha();
|
|
});
|
|
|
|
return {
|
|
registerFormRef,
|
|
loading,
|
|
registerForm,
|
|
rules,
|
|
captchaImage,
|
|
emailCountdown,
|
|
emailCodeLoading,
|
|
handleRegister,
|
|
refreshCaptcha,
|
|
sendEmailCode
|
|
};
|
|
}
|
|
}).use(ElementPlus).mount('#app');
|
|
</script>
|
|
</body>
|
|
</html> |