fix(): 修改布局

src/App.css

@@ -216,8 +216,12 @@ a{color:inherit; text-decoration:none}
 .main{flex:1; display:flex; flex-direction:column; min-width:0; height:100vh; overflow:hidden; width:100%}
 .subnav{
   background:var(--panel);
-  padding:12px 22px; border-bottom:1px solid var(--border); flex-shrink:0;
+  padding:16px 24px;
-  overflow-x:auto; -webkit-overflow-scrolling:touch;
+  border-bottom:1px solid var(--border);
+  flex-shrink:0;
+  overflow-x:auto;
+  -webkit-overflow-scrolling:touch;
+  margin-top: 20px;
 }
 .segment{
   display:flex; gap:8px; background:var(--soft); padding:6px; border-radius:12px; border:1px solid var(--border); width:max-content;
@@ -229,7 +233,7 @@ a{color:inherit; text-decoration:none}
   background:var(--panel); color:var(--text); box-shadow:var(--shadow);
 }
 
-.content{padding:22px; display:flex; flex-direction:column; gap:16px; flex:1; overflow-y:auto; min-height:0; box-sizing:border-box}
+.content{padding:28px 24px; display:flex; flex-direction:column; gap:20px; flex:1; overflow-y:auto; min-height:0; box-sizing:border-box}
 
 .panel{
   background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:18px; box-shadow:var(--shadow);

src/components/Layout.tsx

@@ -165,13 +165,62 @@ const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
           <DynamicMenu collapsed={collapsed} />
         </div>
 
+        {/* 用户登录状态和登出按钮 */}
+        <div style={{
+          padding: collapsed ? '12px 8px' : '12px 16px',
+          borderTop: '1px solid var(--border)',
+          display: 'flex',
+          flexDirection: collapsed ? 'column' : 'row',
+          alignItems: 'center',
+          justifyContent: collapsed ? 'center' : 'space-between',
+          gap: collapsed ? '8px' : '12px'
+        }}>
+          {token && (
+            <>
+              {!collapsed && (
+                <span style={{
+                  fontSize: '12px',
+                  color: 'var(--muted)',
+                  whiteSpace: 'nowrap'
+                }}>
+                  已登录
+                </span>
+              )}
+              <button
+                onClick={handleLogout}
+                style={{
+                  padding: collapsed ? '8px' : '6px 12px',
+                  borderRadius: '8px',
+                  border: '1px solid var(--border)',
+                  background: 'var(--soft)',
+                  color: 'var(--text)',
+                  cursor: 'pointer',
+                  fontSize: '12px',
+                  transition: 'all 0.2s',
+                  whiteSpace: 'nowrap',
+                  width: collapsed ? '100%' : 'auto'
+                }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.background = 'var(--panel)';
+                  e.currentTarget.style.borderColor = 'var(--accent)';
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.background = 'var(--soft)';
+                  e.currentTarget.style.borderColor = 'var(--border)';
+                }}
+              >
+                登出
+              </button>
+            </>
+          )}
+        </div>
+
         <div style={{
           fontSize: '12px',
           color: 'var(--muted)',
           textAlign: collapsed ? 'center' : 'left',
-          padding: '16px',
+          padding: '12px 16px',
-          borderTop: '1px solid var(--border)',
+          borderTop: '1px solid var(--border-subtle)'
-          marginTop: 'auto'
         }}>
           {!collapsed ? 'v1.1 · React Admin' : 'v1.1'}
         </div>
@@ -179,28 +228,6 @@ const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
 
       {/* 主内容区 */}
       <section className="main">
-        <header className="header">
-          <div style={{display:'flex', alignItems:'center', gap:'10px'}}>
-            <button
-              className="btn mobile-toggle"
-              onClick={() => setMobileOpen(true)}
-              aria-label="打开菜单"
-            >
-              <MenuUnfoldOutlined />
-            </button>
-          </div>
-          <div className="actions">
-            <div style={{display:'flex', alignItems:'center', gap:'8px'}}>
-              {token ? (
-                <>
-                  <span style={{fontSize:12,color:'var(--muted)'}}>已登录</span>
-                  <button className="btn" onClick={handleLogout}>登出</button>
-                </>
-              ) : null}
-            </div>
-          </div>
-        </header>
-
         {/* 监控页面的子导航 */}
         {activeTab === 'monitoring' && (
           <nav className="subnav">