From cb6bce5ced3125d46b74690fa12249fce5f912a1 Mon Sep 17 00:00:00 2001
From: Nixevol <guaotiantang@gmail.com>
Date: Thu, 23 Apr 2026 11:35:05 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E9=89=B4=E6=9D=83=E6=94=B9=E4=B8=BA?=
 =?UTF-8?q?=E5=85=A8=E5=B1=8F=E7=99=BB=E5=BD=95=E9=A1=B5=E6=A8=A1=E5=BC=8F?=
 =?UTF-8?q?=EF=BC=8C=E6=9C=AA=E7=99=BB=E5=BD=95=E4=B8=8D=E5=86=8D=E6=9A=B4?=
 =?UTF-8?q?=E9=9C=B2=E4=B8=BB=E9=A1=B5=E9=9D=A2=E5=86=85=E5=AE=B9=EF=BC=8C?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E9=80=80=E5=87=BA=E7=99=BB=E5=BD=95=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/project_context.md |  10 +++
 static/css/style.css    |  96 ++++++++++++++++++++++++
 static/index.html       |  47 +++++++-----
 static/js/app.js        | 157 ++++++++++++++++++++++++++++++----------
 4 files changed, 250 insertions(+), 60 deletions(-)

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 @@
     <script src="/static/lib/monaco/vs/loader.js"></script>
 </head>
 <body>
-    <div class="app">
+    <!-- 登录页面（未登录时显示） -->
+    <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;">
         <!-- 侧边栏导航 -->
         <aside class="sidebar" id="sidebar">
             <div class="logo">
@@ -73,6 +93,7 @@
                                 <line x1="8" y1="4" x2="8" y2="6.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                             </svg>
                         </button>
+                        <button class="logout-btn" id="logoutBtn" title="退出登录">⏻</button>
                     </div>
                 </header>
 
@@ -183,6 +204,7 @@
                                 <line x1="8" y1="4" x2="8" y2="6.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                             </svg>
                         </button>
+                        <button class="logout-btn" id="logoutBtn" title="退出登录">⏻</button>
                     </div>
                 </header>
                 <div class="page-body">
@@ -217,6 +239,7 @@
                                 <line x1="8" y1="4" x2="8" y2="6.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                             </svg>
                         </button>
+                        <button class="logout-btn" id="logoutBtn" title="退出登录">⏻</button>
                     </div>
                 </header>
                 <div class="page-body" style="display: flex; flex-direction: column; height: calc(100% - 64px);">
@@ -316,6 +339,7 @@
                                 <line x1="8" y1="4" x2="8" y2="6.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                             </svg>
                         </button>
+                        <button class="logout-btn" id="logoutBtn" title="退出登录">⏻</button>
                     </div>
                 </header>
                 <div class="page-body script-page-body">
@@ -381,6 +405,7 @@
                                 <line x1="8" y1="4" x2="8" y2="6.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                             </svg>
                         </button>
+                        <button class="logout-btn" id="logoutBtn" title="退出登录">⏻</button>
                     </div>
                 </header>
                 <div class="page-body settings-page-body">
@@ -490,25 +515,7 @@
         </div>
     </div>
 
-    <!-- 登录对话框 -->
-    <div class="modal" id="loginModal">
-        <div class="modal-backdrop"></div>
-        <div class="modal-content">
-            <h3 id="loginTitle">系统登录</h3>
-            <p>由于安全原因，请先验证您的身份</p>
-            <div class="form-group" style="margin-top: 16px;">
-                <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="请输入密码以继续" onkeydown="if(event.key==='Enter') document.getElementById('loginBtn').click()">
-            </div>
-            <div class="modal-actions" style="margin-top: 24px;">
-                <button class="btn btn-primary" id="loginBtn" style="width: 100%;">登录</button>
-            </div>
-        </div>
-    </div>
+
 
     <!-- 确认对话框 -->
     <div class="modal" id="confirmModal">
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')) {