hive-manage-v3/docs/superpowers/plans/task-0.8-spec.md at master

enzo/hive-manage-v3

Fork 0

Files

T

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

2026-07-22 19:21:29 +08:00

3.0 KiB

Raw Permalink Blame History

在 /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

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

创建完成后提交:

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"

3.0 KiB Raw Permalink Blame History