Metrix/CapacityReport
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 登录页后端级别隔离，未登录时服务器不返回主页面源码

Browse Source
This commit is contained in:
nixevol
2026-04-23 11:56:45 +08:00
parent 224de1bd69
commit a378943ec0
6 changed files with 240 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/style.css
-73
View File
@@ -123,79 +123,6 @@ body {
transition: background-color var(--td-transition), color var(--td-transition);
}
/* ==================== 登录页面 ==================== */
.login-page {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: var(--td-bg-color-page);
z-index: 10001;
}
.login-container {
width: 380px;
padding: 48px 40px;
background: var(--td-bg-color-container);
border-radius: var(--td-radius-large);
box-shadow: var(--td-shadow-3);
text-align: center;
}
.login-logo {
font-size: 56px;
margin-bottom: 8px;
line-height: 1;
}
.login-title {
font-size: 22px;
font-weight: 700;
color: var(--td-text-color-primary);
margin-bottom: 4px;
letter-spacing: 0.5px;
}
.login-subtitle {
font-size: 14px;
color: var(--td-text-color-secondary);
margin-bottom: 32px;
}
.login-form {
text-align: left;
}
.login-form .form-group label {
display: block;
margin-bottom: 6px;
font-size: 13px;
font-weight: 500;
color: var(--td-text-color-primary);
}
.login-form .form-input {
width: 100%;
height: 40px;
padding: 0 12px;
border: 1px solid var(--td-border-color);
border-radius: var(--td-radius-default);
font-size: 14px;
color: var(--td-text-color-primary);
background: var(--td-bg-color-container);
transition: all var(--td-transition);
}
.login-form .form-input:focus {
outline: none;
border-color: var(--td-brand-color);
box-shadow: 0 0 0 2px var(--td-brand-color-focus);
}
/* ==================== 退出登录按钮 ==================== */
.logout-btn {
width: 32px;
static/index.html
+1 -21
View File
@@ -12,27 +12,7 @@
<script src="/static/lib/monaco/vs/loader.js"></script>
</head>
<body>
<!-- 登录页面（未登录时显示） -->
<div class="login-page" id="loginPage">
<div class="login-container">
<div class="login-logo">📊</div>
<h2 class="login-title">CapacityReport</h2>
<p class="login-subtitle">容量报表处理系统</p>
<div class="login-form">
<div class="form-group">
<label>账号</label>
<input type="text" id="loginUsername" class="form-input" value="root" readonly style="background-color: var(--td-bg-color-component); color: var(--td-text-color-secondary); cursor: not-allowed;">
</div>
<div class="form-group" style="margin-top: 16px;">
<label>密码</label>
<input type="password" id="loginPassword" class="form-input" placeholder="请输入密码" autofocus>
</div>
<button class="btn btn-primary btn-lg" id="loginBtn" style="width: 100%; margin-top: 24px;">登录</button>
</div>
</div>
</div>
<div class="app" id="appContainer" style="display: none;">
<div class="app" id="appContainer">
<!-- 侧边栏导航 -->
<aside class="sidebar" id="sidebar">
<div class="logo">
static/js/app.js
+5 -101
View File
@@ -147,83 +147,16 @@ async function api(endpoint, options = {}) {
return response.json();
}
function showLoginPage() {
const loginPage = $('#loginPage');
const appContainer = $('#appContainer');
if (loginPage) loginPage.style.display = 'flex';
if (appContainer) appContainer.style.display = 'none';
const loginInput = $('#loginPassword');
if (loginInput) {
loginInput.value = '';
loginInput.focus();
}
}
function hideLoginPage() {
const loginPage = $('#loginPage');
const appContainer = $('#appContainer');
if (loginPage) loginPage.style.display = 'none';
if (appContainer) appContainer.style.display = '';
}
function initLoginEvents() {
const loginBtn = $('#loginBtn');
const loginInput = $('#loginPassword');
if (!loginBtn || !loginInput) return;
loginInput.addEventListener('keydown', (e) => {
if (e.key === 'Enter') loginBtn.click();
});
loginBtn.addEventListener('click', async () => {
const usernameInput = $('#loginUsername');
const username = usernameInput ? usernameInput.value : 'root';
const password = loginInput.value;
if (!password) {
showToast('请输入密码', 'warning');
return;
}
try {
loginBtn.disabled = true;
loginBtn.textContent = '登录中...';
const res = await fetch('/api/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username, password })
});
if (!res.ok) {
const err = await res.json().catch(() => ({ detail: '登录失败' }));
throw new Error(err.detail || '账号或密码错误');
}
const data = await res.json();
if (data.success && data.token) {
localStorage.setItem('token', data.token);
hideLoginPage();
showToast('登录成功', 'success');
loginInput.value = '';
// 如果应用尚未初始化，执行初始化
if (!window.fileUploader) {
initApp();
}
}
} catch (err) {
showToast(err.message, 'error');
} finally {
loginBtn.disabled = false;
loginBtn.textContent = '登录';
}
});
}
function showLoginModal() {
localStorage.removeItem('token');
showLoginPage();
document.cookie = 'token=; path=/; max-age=0';
window.location.href = '/';
}
function logout() {
localStorage.removeItem('token');
showLoginPage();
showToast('已退出登录', 'info');
document.cookie = 'token=; path=/; max-age=0';
window.location.href = '/';
}
@@ -2275,36 +2208,7 @@ async function updateCacheSize() {
}
document.addEventListener('DOMContentLoaded', () => {
// 初始化登录事件（始终注册，不依赖登录状态）
initLoginEvents();
// 检查 token 有效性
const token = localStorage.getItem('token');
if (!token) {
showLoginPage();
// 主题管理在登录页也需要
new ThemeManager();
return;
}
// 用一个轻量接口验证 token 是否仍然有效
fetch('/api/config', {
headers: { 'Authorization': `Bearer ${token}` }
}).then(res => {
if (res.status === 401) {
localStorage.removeItem('token');
showLoginPage();
new ThemeManager();
return;
}
// token 有效，初始化应用
hideLoginPage();
initApp();
}).catch(() => {
// 网络错误时也尝试初始化（可能稍后恢复）
hideLoginPage();
initApp();
});
initApp();
});
function initApp() {
static/login.html
+215
View File
@@ -0,0 +1,215 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录 - 容量报表处理程序</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📊</text></svg>">
<style>
:root {
--brand-color: #0052d9;
--brand-hover: #0034b5;
--text-primary: rgba(0, 0, 0, 0.9);
--text-secondary: rgba(0, 0, 0, 0.6);
--text-placeholder: rgba(0, 0, 0, 0.4);
--bg-page: #f3f3f3;
--bg-container: #ffffff;
--bg-component: #f3f3f3;
--border-color: #dcdcdc;
--shadow: 0 6px 30px 5px rgba(0,0,0,0.05), 0 16px 24px 2px rgba(0,0,0,0.04), 0 8px 10px -5px rgba(0,0,0,0.08);
--radius: 12px;
--transition: 0.2s cubic-bezier(0.38, 0, 0.24, 1);
--error-color: #e34d59;
--success-color: #00a870;
--warning-color: #ed7b2f;
--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}
@media (prefers-color-scheme: dark) {
:root {
--brand-color: #4787f0;
--brand-hover: #618dff;
--text-primary: rgba(255, 255, 255, 0.9);
--text-secondary: rgba(255, 255, 255, 0.55);
--text-placeholder: rgba(255, 255, 255, 0.35);
--bg-page: #1b1b1b;
--bg-container: #242424;
--bg-component: #2c2c2c;
--border-color: #5e5e5e;
--shadow: 0 6px 30px 5px rgba(0,0,0,0.15), 0 16px 24px 2px rgba(0,0,0,0.12), 0 8px 10px -5px rgba(0,0,0,0.24);
}
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
font-family: var(--font-family);
background: var(--bg-page);
color: var(--text-primary);
display: flex;
align-items: center;
justify-content: center;
}
.login-container {
width: 380px;
padding: 48px 40px;
background: var(--bg-container);
border-radius: var(--radius);
box-shadow: var(--shadow);
text-align: center;
}
.login-logo { font-size: 56px; margin-bottom: 8px; line-height: 1; }
.login-title { font-size: 22px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; letter-spacing: 0.5px; }
.login-subtitle { font-size: 14px; color: var(--text-secondary); margin-bottom: 32px; }
.login-form { text-align: left; }
.form-group { margin-bottom: 0; }
.form-group label {
display: block;
margin-bottom: 6px;
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
}
.form-input {
width: 100%;
height: 40px;
padding: 0 12px;
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 14px;
color: var(--text-primary);
background: var(--bg-container);
transition: all var(--transition);
outline: none;
}
.form-input:focus {
border-color: var(--brand-color);
box-shadow: 0 0 0 2px rgba(0, 82, 217, 0.2);
}
.form-input[readonly] {
background: var(--bg-component);
color: var(--text-secondary);
cursor: not-allowed;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
height: 40px;
margin-top: 24px;
padding: 0 24px;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
border: none;
cursor: pointer;
background: var(--brand-color);
color: #fff;
transition: all var(--transition);
}
.btn:hover { background: var(--brand-hover); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.toast {
position: fixed;
top: 24px;
left: 50%;
transform: translateX(-50%) translateY(-120%);
padding: 10px 20px;
border-radius: 6px;
font-size: 13px;
color: #fff;
opacity: 0;
transition: all 0.3s ease;
z-index: 9999;
white-space: nowrap;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast.error { background: var(--error-color); }
.toast.success { background: var(--success-color); }
.toast.warning { background: var(--warning-color); }
</style>
</head>
<body>
<div class="login-container">
<div class="login-logo">📊</div>
<h2 class="login-title">CapacityReport</h2>
<p class="login-subtitle">容量报表处理系统</p>
<form class="login-form" id="loginForm" autocomplete="on">
<div class="form-group">
<label for="username">账号</label>
<input type="text" id="username" name="username" class="form-input" value="root" readonly>
</div>
<div class="form-group" style="margin-top: 16px;">
<label for="password">密码</label>
<input type="password" id="password" name="password" class="form-input" placeholder="请输入密码" autofocus>
</div>
<button type="submit" class="btn" id="loginBtn">登录</button>
</form>
</div>
<div class="toast" id="toast"></div>
<script>
function showToast(msg, type) {
const t = document.getElementById('toast');
t.textContent = msg;
t.className = 'toast ' + (type || 'error');
t.classList.add('show');
setTimeout(() => { t.classList.remove('show'); }, 3000);
}
document.getElementById('loginForm').addEventListener('submit', async (e) => {
e.preventDefault();
const btn = document.getElementById('loginBtn');
const password = document.getElementById('password').value;
const username = document.getElementById('username').value;
if (!password) {
showToast('请输入密码', 'warning');
return;
}
btn.disabled = true;
btn.textContent = '登录中...';
try {
const res = await fetch('/api/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username, password })
});
if (!res.ok) {
const err = await res.json().catch(() => ({ detail: '登录失败' }));
throw new Error(err.detail || '账号或密码错误');
}
const data = await res.json();
if (data.success && data.token) {
localStorage.setItem('token', data.token);
// 设置 cookie 供后端 / 路由判断
document.cookie = `token=${data.token}; path=/; max-age=${86400 * 30}; SameSite=Lax`;
showToast('登录成功', 'success');
setTimeout(() => { window.location.href = '/'; }, 300);
}
} catch (err) {
showToast(err.message, 'error');
} finally {
btn.disabled = false;
btn.textContent = '登录';
}
});
</script>
</body>
</html>