diff --git a/docs/project_context.md b/docs/project_context.md
index 4bb1694..6eb452c 100644
--- a/docs/project_context.md
+++ b/docs/project_context.md
@@ -2,6 +2,16 @@
## 最近更新记录
+### 2026-04-23: 鉴权改为全屏登录页模式 + 退出登录
+- **问题**: 之前的鉴权方案只在 API 层拦截 401 后弹出登录弹窗，但主页面 HTML 内容已经完整渲染并暴露给用户（未登录也能看到界面），不符合安全预期。
+- **修复方案**:
+ - **登录页独立化**: 将登录从弹窗模式（`loginModal`）改为独立全屏登录页面（`#loginPage`），未登录时主内容区 `#appContainer` 设为 `display:none`，只显示登录页。
+ - **Token 启动校验**: `DOMContentLoaded` 时先检查 `localStorage` 中的 token，无 token 直接显示登录页；有 token 则用 `/api/config` 接口验证有效性，401 则跳回登录页。
+ - **退出登录功能**: 每个页面 header 右上角新增退出按钮（`⏻` 图标，`.logout-btn` 类），事件委托统一处理，清除 token 后显示登录页。
+ - **登录后免刷新**: 登录成功后如果应用模块未初始化则调用 `initApp()` 完成初始化，无需 `window.location.reload()`。
+- **涉及文件**: `static/index.html`、`static/js/app.js`、`static/css/style.css`
+- **注意事项**: `showLoginModal()` 函数保留作为兼容入口（API 返回 401 时调用），内部已重定向到 `showLoginPage()`。
+
### 2026-04-22: 增加 JWT 鉴权和接口安全控制
- **问题背景**: 网管部门通报安全问题，扫描到项目存在暴露的 API 文档（/docs, /redoc, /openapi.json），并且 API 接口没有使用授权控制，要求快速增加鉴权。
- **架构变更**:
diff --git a/static/css/style.css b/static/css/style.css
index bc4f84f..7f2ce1d 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -123,6 +123,102 @@ 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;
+ height: 32px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border: 1px solid var(--td-border-color);
+ background: var(--td-bg-color-container);
+ color: var(--td-text-color-secondary);
+ border-radius: var(--td-radius-default);
+ cursor: pointer;
+ font-size: 16px;
+ transition: all var(--td-transition);
+ flex-shrink: 0;
+}
+
+.logout-btn:hover {
+ border-color: var(--td-error-color);
+ color: var(--td-error-color);
+ background: var(--td-error-color-light);
+}
+
/* 滚动条 */
::-webkit-scrollbar {
width: 8px;
diff --git a/static/index.html b/static/index.html
index e28c4ac..0b85f35 100644
--- a/static/index.html
+++ b/static/index.html
@@ -12,7 +12,27 @@
-
+
+
+
+
📊
+
CapacityReport
+
容量报表处理系统
+
+
+
+
+
@@ -217,6 +239,7 @@
+
@@ -316,6 +339,7 @@
+
@@ -381,6 +405,7 @@
+
@@ -490,25 +515,7 @@
-
-
-
系统登录
-
由于安全原因，请先验证您的身份
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/static/js/app.js b/static/js/app.js
index 43261e8..5f194cf 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -147,48 +147,85 @@ async function api(endpoint, options = {}) {
return response.json();
}
-function showLoginModal() {
- const modal = $('#loginModal');
- if (modal) {
- modal.classList.add('active');
- const loginBtn = $('#loginBtn');
- const loginInput = $('#loginPassword');
+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();
-
- const handleLogin = 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 api('/login', {
- method: 'POST',
- body: JSON.stringify({ username, password })
- });
- if (res.success && res.token) {
- localStorage.setItem('token', res.token);
- modal.classList.remove('active');
- showToast('登录成功', 'success');
- loginInput.value = '';
- window.location.reload();
- }
- } catch (err) {
- showToast(err.message, 'error');
- } finally {
- loginBtn.disabled = false;
- loginBtn.textContent = '登录';
- }
- };
-
- loginBtn.onclick = handleLogin;
}
}
+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();
+}
+
+function logout() {
+ localStorage.removeItem('token');
+ showLoginPage();
+ showToast('已退出登录', 'info');
+}
+
// ==================== 主题管理 ====================
@@ -2238,6 +2275,39 @@ 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();
+ });
+});
+
+function initApp() {
// 主题管理（最先初始化）
new ThemeManager();
@@ -2251,10 +2321,17 @@ document.addEventListener('DOMContentLoaded', () => {
// 恢复上次访问的页面
navigation.restorePage();
- // 历史数据大小已在处理历史页面显示，不再在侧边栏显示
-
console.log('CapacityReport v2.0.1 已加载');
+ // 退出登录按钮事件（事件委托）
+ document.addEventListener('click', (e) => {
+ if (e.target.closest('.logout-btn') || e.target.closest('#logoutBtn')) {
+ e.preventDefault();
+ e.stopPropagation();
+ logout();
+ }
+ });
+
// 重启服务按钮事件（使用事件委托，支持所有页面的重启按钮）
document.addEventListener('click', async (e) => {
if (e.target.closest('.restart-btn') || e.target.closest('#restartService')) {