feat(layout): 认证页面统一导航栏，含主题切换与退出按钮

新增 Layout 组件作为认证路由的公共布局，提供 sticky 导航栏，移除各页面重复的顶栏代码。
2026-05-24 21:12:23 +08:00
parent 323472ab2b
commit eac64105de
5 changed files with 88 additions and 80 deletions
@@ -0,0 +1,64 @@
+import { Link, Outlet } from 'react-router-dom'
+import { useAuthStore } from '../stores/auth'
+import { useThemeStore } from '../stores/theme'
+
+export default function Layout() {
+  const { user, logout } = useAuthStore()
+  const { theme, toggleTheme } = useThemeStore()
+
+  return (
+    <>
+      <nav
+        style={{
+          position: 'sticky',
+          top: 0,
+          zIndex: 100,
+          background: 'var(--nav-bg)',
+          borderBottom: '1px solid var(--nav-border)',
+          height: 56,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          padding: '0 24px',
+          transition: 'background-color 0.3s ease, border-color 0.3s ease',
+        }}
+      >
+        <Link
+          to="/"
+          style={{
+            fontSize: 20,
+            fontWeight: 700,
+            color: 'var(--accent)',
+            textDecoration: 'none',
+          }}
+        >
+          gen2d
+        </Link>
+
+        <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
+          <button
+            onClick={toggleTheme}
+            className="btn-secondary"
+            style={{ padding: '6px 10px', fontSize: 16, lineHeight: 1 }}
+            title={theme === 'light' ? '切换到暗色模式' : '切换到浅色模式'}
+          >
+            {theme === 'light' ? '☾' : '☀'}
+          </button>
+          <span style={{ fontSize: 13, color: 'var(--text-secondary)' }}>
+            {user?.username}
+          </span>
+          <button
+            className="btn-secondary"
+            onClick={logout}
+            style={{ padding: '6px 16px', fontSize: 13 }}
+          >
+            退出
+          </button>
+        </div>
+      </nav>
+      <main>
+        <Outlet />
+      </main>
+    </>
+  )
+}