92 lines
3.0 KiB
Markdown
92 lines
3.0 KiB
Markdown
在 /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"
|
|
```
|