feat: layout components (Sidebar, Header, MobileNav, TabBar, AppLayout) with routing

Co-Authored-By: Claude <noreply@anthropic.com>
2026-07-22 16:33:42 +08:00
parent bd3d0147f5
commit 7441546804
18 changed files with 589 additions and 3 deletions
@@ -0,0 +1,45 @@
+import { useNavigate } from 'react-router-dom'
+
+const tabs = [
+  { label: '总览', icon: '📊', path: '/dashboard' },
+  { label: 'Gateway', icon: '📡', path: '/gateway' },
+  { label: 'Kanban', icon: '📋', path: '/kanban' },
+  { label: 'Cron', icon: '⏰', path: '/cron' },
+]
+
+export interface TabBarProps {
+  activePath: string
+}
+
+export default function TabBar({ activePath }: TabBarProps) {
+  const navigate = useNavigate()
+
+  return (
+    <div
+      className="fixed bottom-0 left-0 right-0 flex items-center z-50"
+      style={{
+        height: 56,
+        background: 'var(--bg-nav)',
+        borderTop: '1px solid var(--border)',
+      }}
+    >
+      {tabs.map(tab => {
+        const isActive = activePath === tab.path
+        return (
+          <button
+            key={tab.path}
+            onClick={() => navigate(tab.path)}
+            className="flex-1 flex flex-col items-center justify-center gap-[2px] cursor-pointer bg-transparent border-none transition-colors duration-100"
+            style={{
+              color: isActive ? 'var(--honey)' : 'var(--text-dim)',
+              fontWeight: isActive ? 600 : 400,
+            }}
+          >
+            <span style={{ fontSize: 20 }}>{tab.icon}</span>
+            <span style={{ fontSize: 11 }}>{tab.label}</span>
+          </button>
+        )
+      })}
+    </div>
+  )
+}