fix: flatten React Router structure — no nested Routes, each page is a top-level route

2026-07-22 19:21:29 +08:00
parent 07ff8c2a12
commit 1de5fcf698
3720 changed files with 1254827 additions and 49 deletions
@@ -0,0 +1,91 @@
+在 /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"
+```