fix: 鉴权改为全屏登录页模式，未登录不再暴露主页面内容，增加退出登录按钮

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 接口没有使用授权控制，要求快速增加鉴权。
 - **架构变更**:

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;

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">

static/js/app.js

@@ -147,15 +147,35 @@ async function api(endpoint, options = {}) {
     return response.json();
 }
 
-function showLoginModal() {
+function showLoginPage() {
-    const modal = $('#loginModal');
+    const loginPage = $('#loginPage');
-    if (modal) {
+    const appContainer = $('#appContainer');
-        modal.classList.add('active');
+    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');
-        loginInput.focus();
+    if (!loginBtn || !loginInput) return;
 
-        const handleLogin = async () => {
+    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;
@@ -166,16 +186,25 @@ function showLoginModal() {
         try {
             loginBtn.disabled = true;
             loginBtn.textContent = '登录中...';
-                const res = await api('/login', {
+            const res = await fetch('/api/login', {
                 method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({ username, password })
             });
-                if (res.success && res.token) {
+            if (!res.ok) {
-                    localStorage.setItem('token', res.token);
+                const err = await res.json().catch(() => ({ detail: '登录失败' }));
-                    modal.classList.remove('active');
+                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 = '';
-                    window.location.reload();
+                // 如果应用尚未初始化，执行初始化
+                if (!window.fileUploader) {
+                    initApp();
+                }
             }
         } catch (err) {
             showToast(err.message, 'error');
@@ -183,10 +212,18 @@ function showLoginModal() {
             loginBtn.disabled = false;
             loginBtn.textContent = '登录';
         }
-        };
+    });
+}
 
-        loginBtn.onclick = handleLogin;
+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')) {