376 lines
14 KiB
HTML
376 lines
14 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; }
|
|
|
|
/* 登录页面容器 / Login page container */
|
|
.login-container {
|
|
min-height: 100vh;
|
|
background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 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;
|
|
right: -100px;
|
|
}
|
|
.bg-decoration-2 {
|
|
position: absolute;
|
|
width: 400px;
|
|
height: 400px;
|
|
border-radius: 50%;
|
|
background: rgba(255,255,255,0.03);
|
|
bottom: -150px;
|
|
left: -50px;
|
|
}
|
|
|
|
/* 浮动图标动画 / Floating icon animation */
|
|
.floating-icon {
|
|
position: absolute;
|
|
font-size: 48px;
|
|
color: rgba(255,255,255,0.08);
|
|
animation: float 6s ease-in-out infinite;
|
|
}
|
|
.floating-icon:nth-child(3) { top: 20%; left: 10%; animation-delay: 0s; }
|
|
.floating-icon:nth-child(4) { top: 60%; right: 15%; animation-delay: 2s; }
|
|
.floating-icon:nth-child(5) { bottom: 25%; left: 20%; animation-delay: 4s; }
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0) rotate(0deg); }
|
|
50% { transform: translateY(-20px) rotate(10deg); }
|
|
}
|
|
|
|
/* 登录卡片 / Login card */
|
|
.login-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, #2563eb, #1d4ed8);
|
|
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(37,99,235,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: 25px;
|
|
}
|
|
.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(37,99,235,0.2);
|
|
}
|
|
.el-input__wrapper.is-focus {
|
|
box-shadow: 0 0 0 2px rgba(37,99,235,0.4);
|
|
border-color: #2563eb;
|
|
}
|
|
|
|
/* 登录按钮 / Login button */
|
|
.login-btn {
|
|
width: 100%;
|
|
height: 50px;
|
|
border-radius: 12px;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
|
|
border: none;
|
|
transition: all 0.3s ease;
|
|
margin-top: 10px;
|
|
}
|
|
.login-btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 25px rgba(37,99,235,0.4);
|
|
}
|
|
.login-btn:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* 注册链接 / Register link */
|
|
.register-link {
|
|
text-align: center;
|
|
margin-top: 25px;
|
|
font-size: 14px;
|
|
color: #64748b;
|
|
}
|
|
.register-link a {
|
|
color: #2563eb;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
transition: color 0.3s;
|
|
}
|
|
.register-link a:hover {
|
|
color: #1d4ed8;
|
|
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;
|
|
}
|
|
|
|
.el-message {
|
|
top: 20px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<div class="login-container">
|
|
<div class="bg-decoration"></div>
|
|
<div class="bg-decoration-2"></div>
|
|
<i class="fa-solid fa-cloud floating-icon"></i>
|
|
<i class="fa-solid fa-database floating-icon"></i>
|
|
<i class="fa-solid fa-folder-open floating-icon"></i>
|
|
|
|
<div class="login-card">
|
|
<div class="logo-section">
|
|
<div class="logo">
|
|
<i class="fa-solid fa-cloud"></i>
|
|
</div>
|
|
<div class="logo-title">CloudNest</div>
|
|
<div class="logo-subtitle">轻量级个人云存储平台</div>
|
|
</div>
|
|
|
|
<el-form :model="loginForm" :rules="rules" ref="loginFormRef" class="form-container">
|
|
<el-form-item prop="username" class="form-item">
|
|
<el-input
|
|
v-model="loginForm.username"
|
|
placeholder="请输入用户名"
|
|
size="large"
|
|
prefix-icon="User"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item prop="password" class="form-item">
|
|
<el-input
|
|
v-model="loginForm.password"
|
|
type="password"
|
|
placeholder="请输入密码"
|
|
size="large"
|
|
prefix-icon="Lock"
|
|
show-password
|
|
/>
|
|
</el-form-item>
|
|
<div class="captcha-row">
|
|
<el-form-item prop="captcha_answer" class="form-item captcha-input-item">
|
|
<el-input
|
|
v-model="loginForm.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>
|
|
<el-button
|
|
type="primary"
|
|
class="login-btn"
|
|
@click="handleLogin"
|
|
:loading="loading"
|
|
>
|
|
<i class="fa-solid fa-right-to-bracket"></i> 登 录
|
|
</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<div class="register-link">
|
|
还没有账号？<a href="/register">立即注册</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const { createApp, ref, reactive, onMounted } = Vue;
|
|
|
|
createApp({
|
|
setup() {
|
|
const loginFormRef = ref(null);
|
|
const loading = ref(false);
|
|
const captchaImage = ref('');
|
|
const captchaLoading = ref(false);
|
|
const captchaError = ref('');
|
|
|
|
// 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 loginForm = reactive({
|
|
username: '',
|
|
password: '',
|
|
captcha_id: '',
|
|
captcha_answer: ''
|
|
});
|
|
|
|
const rules = {
|
|
username: [
|
|
{ required: true, message: '请输入用户名', trigger: 'blur' },
|
|
{ min: 3, max: 50, message: '用户名长度为3-50个字符', trigger: 'blur' }
|
|
],
|
|
password: [
|
|
{ required: true, message: '请输入密码', trigger: 'blur' },
|
|
{ min: 6, message: '密码长度至少为6个字符', trigger: 'blur' }
|
|
],
|
|
captcha_answer: [
|
|
{ required: true, message: '请输入图形验证码', trigger: 'blur' }
|
|
]
|
|
};
|
|
|
|
// 加载图形验证码 / Load captcha
|
|
const loadCaptcha = async () => {
|
|
captchaLoading.value = true;
|
|
captchaError.value = '';
|
|
try {
|
|
console.log('[Captcha] 开始加载验证码...');
|
|
const response = await axios.get(`${CAPTCHA_API_BASE}/captcha`);
|
|
console.log('[Captcha] 响应:', response.data);
|
|
if (response.data && response.data.code === 0 && response.data.data) {
|
|
loginForm.captcha_id = response.data.data.captcha_id || '';
|
|
captchaImage.value = response.data.data.image_url || '';
|
|
console.log('[Captcha] 设置图片URL:', captchaImage.value);
|
|
} else {
|
|
captchaError.value = '验证码加载失败';
|
|
console.error('[Captcha] 响应格式不正确:', response.data);
|
|
}
|
|
} catch (error) {
|
|
captchaError.value = '验证码加载失败，请刷新页面重试';
|
|
console.error('[Captcha] 加载验证码失败:', error);
|
|
} finally {
|
|
captchaLoading.value = false;
|
|
}
|
|
};
|
|
|
|
// 刷新图形验证码 / Refresh captcha
|
|
const refreshCaptcha = () => {
|
|
loadCaptcha();
|
|
};
|
|
|
|
// 处理登录 / Handle login
|
|
// API路由: POST /api/v1/auth/login
|
|
const handleLogin = async () => {
|
|
const valid = await loginFormRef.value.validate().catch(() => false);
|
|
if (!valid) return;
|
|
|
|
loading.value = true;
|
|
try {
|
|
const response = await axios.post(`${AUTH_API_BASE}/login`, {
|
|
username: loginForm.username,
|
|
password: loginForm.password,
|
|
captcha_id: loginForm.captcha_id,
|
|
captcha_answer: loginForm.captcha_answer
|
|
});
|
|
|
|
if (response.data.code === 0 && response.data.data?.token) {
|
|
localStorage.setItem('cloudnest_token', response.data.data.token);
|
|
localStorage.setItem('cloudnest_username', loginForm.username);
|
|
ElementPlus.ElMessage.success('登录成功');
|
|
setTimeout(() => {
|
|
window.location.href = '/';
|
|
}, 500);
|
|
} 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 {
|
|
loginFormRef,
|
|
loading,
|
|
loginForm,
|
|
rules,
|
|
captchaImage,
|
|
handleLogin,
|
|
refreshCaptcha
|
|
};
|
|
}
|
|
}).use(ElementPlus).mount('#app');
|
|
</script>
|
|
</body>
|
|
</html> |