From 795f2965ccc05efc42c733a0bbbfea589e3098f7 Mon Sep 17 00:00:00 2001
From: XiaoMiku01 <xiao@m1ku.de>
Date: Fri, 1 Aug 2025 17:04:37 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=99=BB=E5=BD=95=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD`=20(#1386)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(布局): 在导航栏底部添加退出登录按钮

* fix: 使用本地存储的认证信息检查登录

* style(login): 增强可读性
---
 app/lib/auth-context.tsx     |  3 ++-
 app/lib/auth-guard.tsx       |  3 ++-
 app/lib/protected-layout.tsx | 12 ++++++++++++
 app/login/page.tsx           |  6 +++++-
 4 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/app/lib/auth-context.tsx b/app/lib/auth-context.tsx
index 6564f4f..29fc605 100644
--- a/app/lib/auth-context.tsx
+++ b/app/lib/auth-context.tsx
@@ -39,9 +39,10 @@ export function AuthProvider({ children }: { children: ReactNode }) {
 
   const checkAuthRequired = async () => {
     try {
+      const auth = localStorage.getItem('auth');
       const response = await fetch('/api/basic', {
         headers: {
-          'Authorization': 'Basic dGVzdDp0ZXN0' // 使用测试凭据
+          'Authorization': `Basic ${auth}` // 使用测试凭据
         }
       });
       // 如果返回401，说明需要认证
diff --git a/app/lib/auth-guard.tsx b/app/lib/auth-guard.tsx
index 2a9cec8..5b38300 100644
--- a/app/lib/auth-guard.tsx
+++ b/app/lib/auth-guard.tsx
@@ -14,9 +14,10 @@ export function AuthGuard({ children }: { children: React.ReactNode }) {
     // 如果用户未认证，则检查是否需要认证
     if (!isAuthenticated) {
       // 检查是否需要认证
+      const auth = localStorage.getItem('auth');
       fetch('/api/basic', {
         headers: {
-          'Authorization': 'Basic dGVzdDp0ZXN0' // 使用测试凭据
+          'Authorization': `Basic ${auth}` // 使用测试凭据
         }
       }).then(response => {
         if (response.status !== 401) {
diff --git a/app/lib/protected-layout.tsx b/app/lib/protected-layout.tsx
index 2dcc41f..5d6def9 100644
--- a/app/lib/protected-layout.tsx
+++ b/app/lib/protected-layout.tsx
@@ -279,6 +279,18 @@ export default function ProtectedLayout({ children }: { children: React.ReactNod
           </Nav.Header>
           <Nav.Footer collapseButton={false}>
             <ThemeButton mode={mode} setMode={setMode} systemTheme={systemTheme} />
+            {typeof window !== 'undefined' && localStorage.getItem('auth') && (
+              <Button
+                onClick={() => {
+                  localStorage.removeItem('auth');
+                  window.location.href = '/login';
+                }}
+                type="danger"
+                style={{ marginTop: '10px', width: '100%' }}
+              >
+                退出登录
+              </Button>
+            )}
           </Nav.Footer>
         </Nav>
       </Sider>
diff --git a/app/login/page.tsx b/app/login/page.tsx
index e9b2e30..3f12a7d 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -13,9 +13,10 @@ export default function LoginPage() {
   
   useEffect(() => {
     // 检查是否需要认证
+    const auth = localStorage.getItem('auth');
     fetch('/api/basic', {
       headers: {
-        'Authorization': 'Basic dGVzdDp0ZXN0' // 使用测试凭据
+        'Authorization': `Basic ${auth}` // 使用测试凭据
       }
     }).then(response => {
       if (response.status !== 401) {
@@ -53,6 +54,9 @@ export default function LoginPage() {
       height: '100vh',
       background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
       backgroundSize: 'cover',
+      ['--semi-color-text-0' as any]: 'rgba(0, 0, 0, 1)', 
+      ['--semi-color-text-1' as any]: 'rgba(0, 0, 0, 0.3)',
+      ['--semi-color-text-2' as any]: 'rgba(0, 0, 0, 0.3)',
     }}>
       <Card 
         shadows='always'