gen2d/frontend/src/components/Layout.tsx

import { Link, Outlet } from 'react-router-dom'
import { useAuthStore } from '../stores/auth'
import { useThemeStore } from '../stores/theme'
import ToastContainer from './Toast'

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>
      <ToastContainer />
    </>
  )
}