在 /home/enzo/projects/hive-manage-v3/frontend/src/components/layout/ 下创建布局组件，并在 App.tsx 中集成路由框架。

## 组件 1: Sidebar.tsx

导航项结构（参考原型）:
- 蜂群态势: 📊 蜂群总览, 📡 Gateway, 🏥 健康分, 🤖 工蜂列表
- 任务编排: 📋 看板追踪, ⏰ Cron, 🔔 事件管理
- 通信频道: 📶 频道配置
- 运维工具: 🔑 密钥, 📁 文件, 💻 终端, 📜 日志, 🔌 MCP接入, 📤 MCP对外
- 知识库管理: 📚 事件档案
- 系统: ⚙ 设置

Props: activePath, onNavigate(path:string)
- 宽度 220px, bg=var(--bg-nav), 右侧 border
- 顶部 Logo 48px: "🐝 知微蜂巢"
- Section 标题 11px uppercase text-muted
- NavItem: 默认 text-dim, hover bg-hover, active honey-glow + honey 文字 + 600 weight
- Badge: 红色(失败计数)

## 组件 2: Header.tsx

Props: breadcrumb, onlineCount, runningCount, onSearch, theme, onToggleTheme
- 高度 48px, bg=var(--bg-nav), 底部 border
- 左侧: Logo + 面包屑
- 中间: 搜索框 260px, bg=var(--bg-card)
- 右侧: 在线数/运行中 标签 + 主题切换按钮(🌙/☀️) + 用户头像
- useTheme hook: 读取 localStorage 'hive-theme', 默认跟随系统 prefers-color-scheme

## 组件 3/4: MobileNav.tsx + TabBar.tsx

MobileNav: 汉堡菜单 → 左侧抽屉 280px 滑入 + 遮罩
TabBar: 底部固定 56px, 4项(📊总览/📡Gateway/📋Kanban/⏰Cron)等宽分布, 激活态 honey

## 组件 5: AppLayout.tsx

桌面: CSS Grid (sidebar 220px + header 48px + main)
平板: sidebar 180px
移动 (<768px): 顶部 Header + TabBar + 汉堡抽屉
使用 useTheme hook 管理 data-theme 属性

## App.tsx 更新

集成 react-router-dom:
- / → 重定向到 /dashboard
- /dashboard → DashboardPage
- /gateway → GatewayPage
- /health → HealthPage
- /kanban → KanbanPage
- /cron → CronPage
- /keys → KeysPage
- /events → EventArchivePage
- /users → UserManagementPage
- /audit → AuditLogPage
- /login → LoginPage
- 其余 → 404

路由配置用懒加载 React.lazy + Suspense(Skeleton)。

## useTheme hook

```typescript
// hooks/useTheme.ts
import { useState, useEffect } from 'react'

type Theme = 'dark' | 'light' | 'system'

export function useTheme() {
  const [theme, setTheme] = useState<Theme>(() => {
    return (localStorage.getItem('hive-theme') as Theme) || 'system'
  })

  useEffect(() => {
    const root = document.documentElement
    if (theme === 'system') {
      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
      root.setAttribute('data-theme', prefersDark ? 'dark' : 'light')
    } else {
      root.setAttribute('data-theme', theme)
    }
    localStorage.setItem('hive-theme', theme)
  }, [theme])

  const toggle = () => setTheme(t => t === 'dark' ? 'light' : 'dark')
  return { theme, setTheme, toggle }
}
```

创建完成后提交:
```bash
cd /home/enzo/projects/hive-manage-v3 && git add frontend/src/components/layout/ frontend/src/App.tsx frontend/src/hooks/ && git commit -m "feat: layout components (Sidebar, Header, MobileNav, TabBar, AppLayout) with routing"
```