<!DOCTYPE html>
<html lang="zh-CN">
<head>
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#545BE8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="apple-touch-icon" href="/icons/icon-192.png">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录 - 超协体</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
background: linear-gradient(135deg, var(--brand-purple) 0%, var(--brand-purple-dark) 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.login-container {
background: var(--surface-50);
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
width: 100%;
max-width: 400px;
padding: 40px;
animation: slideUp 0.5s ease-out;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.logo {
text-align: center;
margin-bottom: 30px;
}
.logo h1 {
font-size: 32px;
background: linear-gradient(135deg, var(--brand-purple) 0%, var(--brand-purple-dark) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 10px;
}
.logo p {
color: var(--text-secondary);
font-size: 14px;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
color: var(--text-main);
font-weight: 500;
}
.form-group input {
width: 100%;
padding: 12px 16px;
border: 2px solid var(--surface-200);
border-radius: 10px;
font-size: 14px;
transition: all 0.3s;
}
.form-group input:focus {
outline: none;
border-color: var(--brand-purple);
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.btn-login {
width: 100%;
padding: 14px;
background: linear-gradient(135deg, var(--brand-purple) 0%, var(--brand-purple-dark) 100%);
color: var(--surface-50);
border: none;
border-radius: 10px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
}
.btn-login:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
}
.btn-login:active {
transform: translateY(0);
}
.btn-login:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.register-link {
text-align: center;
margin-top: 20px;
color: var(--text-secondary);
font-size: 14px;
}
.register-link a {
color: var(--brand-purple);
text-decoration: none;
font-weight: 600;
}
.register-link a:hover {
text-decoration: underline;
}
.error-message {
background: rgba(239, 68, 68, 0.08);
color: var(--error);
padding: 12px;
border-radius: 8px;
margin-bottom: 20px;
font-size: 14px;
display: none;
}
.success-message {
background: rgba(34, 197, 94, 0.08);
color: var(--success);
padding: 12px;
border-radius: 8px;
margin-bottom: 20px;
font-size: 14px;
display: none;
}
.loading {
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid var(--surface-50);
border-radius: 50%;
border-top-color: transparent;
animation: spin 0.8s linear infinite;
margin-left: 8px;
vertical-align: middle;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
</style>
<link rel="stylesheet" href="https://unpkg.com/@phosphor-icons/web@2.1.1/src/bold/style.css">
<link rel="stylesheet" href="https://unpkg.com/@phosphor-icons/web@2.1.1/src/fill/style.css">
<link rel="stylesheet" href="/css/theme.css">
</head>
<body>
<div class="login-container">
<div class="logo">
<h1>超协体</h1>
<p>人机协同 · 五行飞轮</p>
</div>
<div id="errorMessage" class="error-message"></div>
<div id="successMessage" class="success-message"></div>
<form id="loginForm">
<div class="form-group">
<label for="email">邮箱</label>
<input type="email" id="email" name="email" placeholder="your@email.com" required>
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" id="password" name="password" placeholder="至少6位字符" required>
</div>
<button type="submit" class="btn-login" id="loginBtn">
<span id="btnText">登录</span>
</button>
</form>
<div class="register-link">
还没有账号？<a href="/register.html">立即注册</a>
</div>
</div>
<script>
const API_BASE = window.location.origin;
const loginForm = document.getElementById('loginForm');
const loginBtn = document.getElementById('loginBtn');
const btnText = document.getElementById('btnText');
const errorMessage = document.getElementById('errorMessage');
const successMessage = document.getElementById('successMessage');
// 检查是否已登录（验证token有效性）
async function checkExistingSession() {
const token = localStorage.getItem('token');
if (!token) return;
try {
const response = await fetch(`${API_BASE}/api/auth/me`, {
headers: {
'Authorization': `Bearer ${token}`
}
});
if (response.ok) {
window.location.href = '/dashboard.html';
return;
}
} catch (error) {
console.warn('检查登录状态失败:', error);
}
// token无效时清理，允许重新登录
localStorage.removeItem('token');
localStorage.removeItem('user');
}
checkExistingSession();
loginForm.addEventListener('submit', async (e) => {
e.preventDefault();
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
// 隐藏之前的消息
errorMessage.style.display = 'none';
successMessage.style.display = 'none';
// 禁用按钮，显示加载状态
loginBtn.disabled = true;
btnText.innerHTML = '登录中<span class="loading"></span>';
try {
const response = await fetch(`${API_BASE}/api/auth/login`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ email, password })
});
const data = await response.json();
if (data.success) {
// 保存token和用户信息
localStorage.setItem('token', data.token);
localStorage.setItem('user', JSON.stringify(data.user));
// 显示成功消息
successMessage.textContent = '登录成功！正在跳转...';
successMessage.style.display = 'block';
// 跳转到工作台
setTimeout(() => {
window.location.href = '/dashboard.html';
}, 1000);
} else {
// 显示错误消息
errorMessage.textContent = data.message || '登录失败，请重试';
errorMessage.style.display = 'block';
// 恢复按钮
loginBtn.disabled = false;
btnText.textContent = '登录';
}
} catch (error) {
console.error('登录错误:', error);
errorMessage.textContent = '网络错误，请检查连接后重试';
errorMessage.style.display = 'block';
// 恢复按钮
loginBtn.disabled = false;
btnText.textContent = '登录';
}
});
</script>
<script src="/js/pwa.js" defer></script>
</body>
</html>
