YG-Soft/YG_FT_Platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新分支，重新设计UI

Browse Source
This commit is contained in:
leokaka1
2026-01-18 19:51:22 +08:00
parent 6e1b4b58ba
commit b2f19d9583
15 changed files with 2060 additions and 1785 deletions
Download Patch File Download Diff File Expand all files Collapse all files

248
web/pages/login.html
View File

@@ -1,83 +1,187 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
<link rel="stylesheet" href="../css/login.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>远光软件微调平台 - 登录</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#1890ff',
sidebarBg: '#001529',
sidebarText: '#bfcbd9',
danger: '#f5222d',
success: '#52c41a',
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.input-focus {
@apply focus:border-primary focus:ring-1 focus:ring-primary focus:outline-none;
}
.login-card-shadow {
@apply shadow-lg shadow-primary/10 hover:shadow-xl hover:shadow-primary/15 transition-shadow;
}
}
</style>
</head>
<body>
<div class="svg-top">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="1337" width="1337">
<defs>
<path id="path-1" opacity="1" fill-rule="evenodd" d="M1337,668.5 C1337,1037.455193874239 1037.455193874239,1337 668.5,1337 C523.6725684305388,1337 337,1236 370.50000000000006,1094 C434.03835568300906,824.6732385973953 6.906089672974592e-14,892.6277623047779 0,668.5000000000001 C0,299.5448061257611 299.5448061257609,1.1368683772161603e-13 668.4999999999999,0 C1037.455193874239,0 1337,299.544806125761 1337,668.5Z"/>
<linearGradient id="linearGradient-2" x1="0.79" y1="0.62" x2="0.21" y2="0.86">
<stop offset="0" stop-color="rgb(88,62,213)" stop-opacity="1"/>
<stop offset="1" stop-color="rgb(23,215,250)" stop-opacity="1"/>
</linearGradient>
</defs>
<g opacity="1">
<use xlink:href="#path-1" fill="url(#linearGradient-2)" fill-opacity="1"/>
</g>
</svg>
</div>
<body class="antialiased bg-gray-50 min-h-screen flex items-center justify-center p-4">
<!-- 登录主容器 -->
<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>
<div class="svg-bottom">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="896" width="967.8852157128662">
<defs>
<path id="path-2" opacity="1" fill-rule="evenodd" d="M896,448 C1142.6325445712241,465.5747656464056 695.2579309733121,896 448,896 C200.74206902668806,896 5.684341886080802e-14,695.2579309733121 0,448.0000000000001 C0,200.74206902668806 200.74206902668791,5.684341886080802e-14 447.99999999999994,0 C695.2579309733121,0 475,418 896,448Z"/>
<linearGradient id="linearGradient-3" x1="0.5" y1="0" x2="0.5" y2="1">
<stop offset="0" stop-color="rgb(40,175,240)" stop-opacity="1"/>
<stop offset="1" stop-color="rgb(18,15,196)" stop-opacity="1"/>
</linearGradient>
</defs>
<g opacity="1">
<use xlink:href="#path-2" fill="url(#linearGradient-3)" fill-opacity="1"/>
</g>
</svg>
</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>
<section class="container">
<section class="wrapper">
<header>
<div class="logo">
<img src="../assets/logo/logo.png" alt="Logo">
<!-- 密码输入框 -->
<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>
<h1>欢迎回来！</h1>
<p>用户登录</p>
</header>
<section class="main-content">
<form id="loginForm" onsubmit="handleLogin(event)">
<input type="text" placeholder="用户名" id="username">
<div class="line"></div>
<input type="password" placeholder="密码" id="password">
<button type="submit">登录</button>
</form>
</section>
<footer>
<p><a href="" title="忘记密码">忘记密码？</a></p>
<p><a href="" title="注册">注册</a></p>
</footer>
</section>
</section>
</div>
<script>
function handleLogin(event) {
event.preventDefault();
<!-- 简单的交互脚本 -->
<script>
// 动态获取 API 基础地址（根据当前访问的 IP 自动调整）
const getApiBase = () => {
const protocol = window.location.protocol;
const hostname = window.location.hostname;
return `${protocol}//${hostname}:8080/api`;
};
const API_BASE = getApiBase();
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
// 密码显示/隐藏切换
const togglePassword = document.getElementById('togglePassword');
const password = document.getElementById('password');
// 简单的验证：用户名和密码都不为空
if (username && password) {
// 登录成功，设置登录状态
sessionStorage.setItem('isLoggedIn', 'true');
// 跳转到主页
window.location.href = 'main.html';
} else {
alert('请输入用户名和密码！');
}
}
</script>
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');
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>
</html>