web/pages/login.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>