From e417d3c77104dcca6136eb5460066af972656e90 Mon Sep 17 00:00:00 2001
From: Supra4E8C <tan13318527080@163.com>
Date: Tue, 9 Dec 2025 00:59:40 +0800
Subject: [PATCH] feat: refactor MainLayout component to implement sidebar
 collapse functionality, enhance navigation item display, and improve layout
 responsiveness

---
 src/components/layout/MainLayout.tsx | 48 ++++++++--------------------
 src/styles/layout.scss               | 39 +++++++++++++++++++++-
 2 files changed, 51 insertions(+), 36 deletions(-)

diff --git a/src/components/layout/MainLayout.tsx b/src/components/layout/MainLayout.tsx
index bfa23d4..fc0c21e 100644
--- a/src/components/layout/MainLayout.tsx
+++ b/src/components/layout/MainLayout.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
-import { NavLink, Outlet, useNavigate } from 'react-router-dom';
+import { NavLink, Outlet } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { Button } from '@/components/ui/Button';
 import { useAuthStore, useConfigStore, useLanguageStore, useNotificationStore, useThemeStore } from '@/stores';
@@ -34,15 +34,12 @@ const compareVersions = (latest?: string | null, current?: string | null) => {
 
 export function MainLayout() {
   const { t, i18n } = useTranslation();
-  const navigate = useNavigate();
   const { showNotification } = useNotificationStore();
 
   const apiBase = useAuthStore((state) => state.apiBase);
   const serverVersion = useAuthStore((state) => state.serverVersion);
   const serverBuildDate = useAuthStore((state) => state.serverBuildDate);
   const connectionStatus = useAuthStore((state) => state.connectionStatus);
-  const checkAuth = useAuthStore((state) => state.checkAuth);
-  const logout = useAuthStore((state) => state.logout);
 
   const config = useConfigStore((state) => state.config);
   const fetchConfig = useConfigStore((state) => state.fetchConfig);
@@ -54,7 +51,7 @@ export function MainLayout() {
   const toggleLanguage = useLanguageStore((state) => state.toggleLanguage);
 
   const [sidebarOpen, setSidebarOpen] = useState(false);
-  const [checkingConnection, setCheckingConnection] = useState(false);
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
   const [checkingVersion, setCheckingVersion] = useState(false);
 
   const isLocal = useMemo(() => isLocalhost(window.location.hostname), []);
@@ -96,22 +93,6 @@ export function MainLayout() {
     }
   };
 
-  const handleCheckConnection = async () => {
-    setCheckingConnection(true);
-    try {
-      const ok = await checkAuth();
-      if (ok) {
-        showNotification(t('common.connected_status'), 'success');
-      } else {
-        showNotification(t('common.disconnected_status'), 'warning');
-      }
-    } catch (error: any) {
-      showNotification(`${t('notification.login_failed')}: ${error?.message || ''}`, 'error');
-    } finally {
-      setCheckingConnection(false);
-    }
-  };
-
   const handleVersionCheck = async () => {
     setCheckingVersion(true);
     try {
@@ -141,15 +122,10 @@ export function MainLayout() {
     }
   };
 
-  const handleLogout = () => {
-    logout();
-    navigate('/login', { replace: true });
-  };
-
   return (
     <div className="app-shell">
-      <aside className={`sidebar ${sidebarOpen ? 'open' : ''}`}>
-        <div className="brand">{t('title.abbr')}</div>
+      <aside className={`sidebar ${sidebarOpen ? 'open' : ''} ${sidebarCollapsed ? 'collapsed' : ''}`}>
+        <div className="brand">{sidebarCollapsed ? t('title.abbr').charAt(0) : t('title.abbr')}</div>
         <div className="nav-section">
           {navItems.map((item) => (
             <NavLink
@@ -157,11 +133,19 @@ export function MainLayout() {
               to={item.path}
               className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}
               onClick={() => setSidebarOpen(false)}
+              title={sidebarCollapsed ? item.label : undefined}
             >
-              {item.label}
+              {sidebarCollapsed ? item.label.charAt(0) : item.label}
             </NavLink>
           ))}
         </div>
+        <button
+          className="sidebar-toggle"
+          onClick={() => setSidebarCollapsed((prev) => !prev)}
+          title={sidebarCollapsed ? t('sidebar.expand', { defaultValue: '展开' }) : t('sidebar.collapse', { defaultValue: '收起' })}
+        >
+          {sidebarCollapsed ? '»' : '«'}
+        </button>
       </aside>
 
       <div className="content">
@@ -185,9 +169,6 @@ export function MainLayout() {
           </div>
 
           <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-            <Button variant="secondary" size="sm" onClick={handleCheckConnection} loading={checkingConnection}>
-              {t('header.check_connection')}
-            </Button>
             <Button variant="secondary" size="sm" onClick={handleRefreshAll}>
               {t('header.refresh_all')}
             </Button>
@@ -200,9 +181,6 @@ export function MainLayout() {
             <Button variant="ghost" size="sm" onClick={toggleTheme}>
               {t('theme.switch')}: {theme === 'dark' ? t('theme.dark') : t('theme.light')}
             </Button>
-            <Button variant="danger" size="sm" onClick={handleLogout}>
-              {t('header.logout')}
-            </Button>
           </div>
         </header>
 
diff --git a/src/styles/layout.scss b/src/styles/layout.scss
index 58161fe..51fa22b 100644
--- a/src/styles/layout.scss
+++ b/src/styles/layout.scss
@@ -15,7 +15,25 @@
   display: flex;
   flex-direction: column;
   gap: $spacing-lg;
-  transition: transform $transition-normal;
+  transition: width $transition-normal, transform $transition-normal;
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  overflow-y: auto;
+
+  &.collapsed {
+    width: 60px;
+    padding: $spacing-lg $spacing-sm;
+
+    .brand {
+      text-align: center;
+    }
+
+    .nav-item {
+      justify-content: center;
+      padding: 10px;
+    }
+  }
 
   .brand {
     font-weight: 800;
@@ -27,6 +45,7 @@
     display: flex;
     flex-direction: column;
     gap: $spacing-sm;
+    flex: 1;
   }
 
   .nav-item {
@@ -51,6 +70,24 @@
     }
   }
 
+  .sidebar-toggle {
+    margin-top: auto;
+    padding: $spacing-sm;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: $radius-md;
+    color: var(--text-secondary);
+    cursor: pointer;
+    font-size: 16px;
+    font-weight: bold;
+    transition: background $transition-fast, color $transition-fast;
+
+    &:hover {
+      background: var(--bg-tertiary, var(--border-color));
+      color: var(--text-primary);
+    }
+  }
+
   @media (max-width: $breakpoint-mobile) {
     position: fixed;
     z-index: $z-dropdown;