177 lines
8.1 KiB
HTML
177 lines
8.1 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>远光软件微调平台 - 登录</title>
|
||
<script src="../lib/tailwindcss/tailwind.js"></script>
|
||
<link href="../lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
||
<style>
|
||
.login-card-shadow {
|
||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||
}
|
||
.input-focus {
|
||
transition: border-color 0.2s, outline 0.2s;
|
||
}
|
||
.input-focus:focus {
|
||
border-color: #1890ff;
|
||
outline: none;
|
||
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
||
}
|
||
.text-primary { color: #1890ff; }
|
||
.text-danger { color: #f5222d; }
|
||
.bg-primary { background-color: #1890ff; }
|
||
.bg-danger\/5 { background-color: rgba(245, 34, 45, 0.05); }
|
||
:root { --primary: #1890ff; --danger: #f5222d; --success: #52c41a; }
|
||
</style>
|
||
</head>
|
||
<body class="login-page antialiased bg-gray-50 min-h-screen flex items-center justify-center p-4" style="background-color: #DBE0F9;">
|
||
<!-- 登录主容器 -->
|
||
<div class="w-full max-w-md">
|
||
<!-- 登录卡片 -->
|
||
<div class="bg-white rounded-xl p-8 login-card-shadow">
|
||
<!-- 平台LOGO和标题 -->
|
||
<div class="text-center mb-8">
|
||
<div class="inline-flex items-center justify-center w-16 h-16 mb-4">
|
||
<img src="../assets/logo/logo.png" alt="Logo" class="w-12 h-12 object-contain">
|
||
</div>
|
||
<h1 class="text-[clamp(1.5rem,3vw,2rem)] font-medium text-gray-800 mb-1">远光软件微调平台</h1>
|
||
<p class="text-gray-500">模型管理平台</p>
|
||
</div>
|
||
|
||
<!-- 登录表单 -->
|
||
<form id="loginForm" class="space-y-5">
|
||
<!-- 账号输入框 -->
|
||
<div>
|
||
<label for="username" class="block text-sm font-medium text-gray-700 mb-1">
|
||
<i class="fa fa-user-o mr-1 text-gray-400"></i>账号
|
||
</label>
|
||
<div class="relative">
|
||
<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
|
||
<i class="fa fa-user-o"></i>
|
||
</span>
|
||
<input
|
||
type="text"
|
||
id="username"
|
||
class="w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-lg input-focus transition-colors"
|
||
placeholder="请输入账号/手机号/邮箱"
|
||
value="admin"
|
||
required
|
||
>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 密码输入框 -->
|
||
<div>
|
||
<div class="flex items-center justify-between mb-1">
|
||
<label for="password" class="block text-sm font-medium text-gray-700">
|
||
<i class="fa fa-lock-o mr-1 text-gray-400"></i>密码
|
||
</label>
|
||
<a href="#" class="text-xs text-primary hover:text-primary/80 transition-colors">忘记密码？</a>
|
||
</div>
|
||
<div class="relative">
|
||
<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
|
||
<i class="fa fa-lock-o"></i>
|
||
</span>
|
||
<input
|
||
type="password"
|
||
id="password"
|
||
class="w-full pl-10 pr-10 py-2.5 border border-gray-300 rounded-lg input-focus transition-colors"
|
||
placeholder="请输入密码"
|
||
value="admin"
|
||
required
|
||
>
|
||
<button type="button" id="togglePassword" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-600 transition-colors">
|
||
<i class="fa fa-eye-slash"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 记住密码 & 验证码登录 -->
|
||
<div class="flex items-center justify-between">
|
||
<label class="flex items-center text-sm text-gray-600 cursor-pointer">
|
||
<input type="checkbox" class="w-4 h-4 text-primary rounded border-gray-300 focus:ring-primary">
|
||
<span class="ml-2">记住密码</span>
|
||
</label>
|
||
<a href="#" class="text-xs text-primary hover:text-primary/80 transition-colors">验证码登录</a>
|
||
</div>
|
||
|
||
<!-- 错误提示 -->
|
||
<div id="errorMsg" class="hidden text-danger text-sm bg-danger/5 p-2 rounded-lg">
|
||
<i class="fa fa-exclamation-circle mr-1"></i>
|
||
<span>账号或密码错误，请重新输入</span>
|
||
</div>
|
||
|
||
<!-- 登录按钮 -->
|
||
<button
|
||
type="submit"
|
||
class="w-full bg-primary text-white py-2.5 rounded-lg hover:bg-primary/90 active:bg-primary/95 transition-colors font-medium flex items-center justify-center"
|
||
>
|
||
<i class="fa fa-sign-in mr-2"></i>登 录
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 简单的交互脚本 -->
|
||
<script>
|
||
// API 基础地址 - 使用 config.yaml 中的 app.port (7861)
|
||
const getApiBase = () => {
|
||
const protocol = window.location.protocol;
|
||
const hostname = window.location.hostname;
|
||
return `${protocol}//${hostname}:7861/api`;
|
||
};
|
||
const API_BASE = getApiBase();
|
||
|
||
// 密码显示/隐藏切换
|
||
const togglePassword = document.getElementById('togglePassword');
|
||
const password = document.getElementById('password');
|
||
|
||
togglePassword.addEventListener('click', () => {
|
||
const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
|
||
password.setAttribute('type', type);
|
||
// 切换图标
|
||
togglePassword.innerHTML = type === 'password' ? '<i class="fa fa-eye-slash"></i>' : '<i class="fa fa-eye"></i>';
|
||
});
|
||
|
||
// 表单提交处理
|
||
const loginForm = document.getElementById('loginForm');
|
||
const errorMsg = document.getElementById('errorMsg');
|
||
|
||
loginForm.addEventListener('submit', async (e) => {
|
||
e.preventDefault();
|
||
const username = document.getElementById('username').value;
|
||
const passwordVal = document.getElementById('password').value;
|
||
|
||
if (!username || !passwordVal) {
|
||
errorMsg.textContent = '账号和密码不能为空';
|
||
errorMsg.classList.remove('hidden');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const response = await fetch(`${API_BASE}/login`, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ username, password: passwordVal })
|
||
});
|
||
const result = await response.json();
|
||
|
||
if (result.code === 0) {
|
||
errorMsg.classList.add('hidden');
|
||
// 保存登录时间戳（5分钟超时）
|
||
localStorage.setItem('loginTime', Date.now());
|
||
localStorage.setItem('username', username);
|
||
window.location.href = 'main.html';
|
||
} else {
|
||
errorMsg.textContent = result.message || '账号或密码错误';
|
||
errorMsg.classList.remove('hidden');
|
||
}
|
||
} catch (error) {
|
||
errorMsg.textContent = '无法连接到服务器，请确保后端服务已启动';
|
||
errorMsg.classList.remove('hidden');
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |