feat: 平台管理员端 — SUPER_ADMIN 角色 + 企业租户管理 + 用户管理 + 数据总览

2026-07-29 11:49:48 +08:00
parent fb36b10402
commit 987a4678f7
17 changed files with 1744 additions and 14 deletions
@@ -0,0 +1,150 @@
+/**
+ * 平台管理端侧边栏导航
+ * 深色主题，amber 主色，区别于企业端
+ */
+import { Link, useLocation, useNavigate } from 'react-router-dom'
+import { useState } from 'react'
+import clsx from 'clsx'
+import {
+  LayoutDashboard, Building2, Users, Shield, LogOut,
+  ChevronDown, ChevronRight,
+} from 'lucide-react'
+import { useAuthStore } from '../../store/authStore'
+
+interface NavItem {
+  path: string
+  label: string
+  icon: typeof LayoutDashboard
+}
+
+const navGroups: { title: string; items: NavItem[] }[] = [
+  {
+    title: '平台管理',
+    items: [
+      { path: '/platform/dashboard', label: '数据总览', icon: LayoutDashboard },
+      { path: '/platform/orgs', label: '企业租户', icon: Building2 },
+      { path: '/platform/users', label: '用户管理', icon: Users },
+    ],
+  },
+]
+
+export default function PlatformSidebar({ mobileOpen, onClose }: { mobileOpen: boolean; onClose: () => void }) {
+  const location = useLocation()
+  const navigate = useNavigate()
+  const { user, logout } = useAuthStore()
+  const [expandedGroups, setExpandedGroups] = useState<Set<string>>(new Set(navGroups.map(g => g.title)))
+
+  const toggleGroup = (title: string) => {
+    setExpandedGroups(prev => {
+      const next = new Set(prev)
+      if (next.has(title)) next.delete(title)
+      else next.add(title)
+      return next
+    })
+  }
+
+  const isActive = (path: string) => location.pathname.startsWith(path)
+
+  const handleLogout = () => {
+    logout()
+    navigate('/platform/login')
+  }
+
+  return (
+    <>
+      {mobileOpen && (
+        <div className="fixed inset-0 bg-black/60 z-40 md:hidden" onClick={onClose} aria-label="关闭侧边栏" />
+      )}
+
+      <aside
+        className={clsx(
+          'fixed md:sticky top-0 left-0 z-50 md:z-auto',
+          'w-56 h-screen flex-shrink-0',
+          'bg-slate-950 border-r border-slate-800',
+          'flex flex-col',
+          'transition-transform duration-200',
+          mobileOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0',
+        )}
+      >
+        {/* Logo 区 */}
+        <div className="h-14 flex items-center gap-2 px-4 border-b border-slate-800 shrink-0">
+          <div className="w-7 h-7 rounded-md bg-amber-400 flex items-center justify-center">
+            <Shield className="w-4 h-4 text-slate-950" />
+          </div>
+          <div>
+            <div className="font-bold text-sm text-white">用工专家平台</div>
+            <div className="text-[10px] text-amber-400 tracking-wider">ADMIN</div>
+          </div>
+        </div>
+
+        {/* 导航菜单 */}
+        <nav className="flex-1 overflow-y-auto py-3 px-2 space-y-3">
+          {navGroups.map((group) => {
+            const isExpanded = expandedGroups.has(group.title)
+            const hasActiveItem = group.items.some(item => isActive(item.path))
+
+            return (
+              <div key={group.title}>
+                <button
+                  onClick={() => toggleGroup(group.title)}
+                  className={clsx(
+                    'flex items-center justify-between w-full px-2 py-1.5 text-xs font-medium rounded-md transition-colors',
+                    hasActiveItem ? 'text-slate-200' : 'text-slate-400 hover:text-slate-200',
+                  )}
+                >
+                  <span>{group.title}</span>
+                  {isExpanded ? <ChevronDown className="w-3 h-3" /> : <ChevronRight className="w-3 h-3" />}
+                </button>
+
+                {isExpanded && (
+                  <div className="mt-0.5 space-y-0.5">
+                    {group.items.map((item) => {
+                      const Icon = item.icon
+                      const active = isActive(item.path)
+                      return (
+                        <Link
+                          key={item.path}
+                          to={item.path}
+                          onClick={onClose}
+                          className={clsx(
+                            'flex items-center gap-2 px-2 py-1.5 rounded-md text-sm transition-colors',
+                            active
+                              ? 'bg-amber-400/10 text-amber-400 font-medium'
+                              : 'text-slate-400 hover:bg-slate-800 hover:text-slate-200',
+                          )}
+                        >
+                          <Icon className="w-4 h-4 flex-shrink-0" />
+                          <span className="truncate">{item.label}</span>
+                        </Link>
+                      )
+                    })}
+                  </div>
+                )}
+              </div>
+            )
+          })}
+        </nav>
+
+        {/* 底部用户区 */}
+        <div className="border-t border-slate-800 p-3 shrink-0">
+          <div className="flex items-center gap-2 mb-2">
+            <div className="w-8 h-8 rounded-full bg-slate-800 flex items-center justify-center text-amber-400 text-sm font-medium">
+              {user?.name?.charAt(0) || 'A'}
+            </div>
+            <div className="flex-1 min-w-0">
+              <div className="text-sm text-white truncate">{user?.name}</div>
+              <div className="text-[10px] text-amber-400">SUPER_ADMIN</div>
+            </div>
+          </div>
+          <button
+            onClick={handleLogout}
+            className="flex items-center gap-2 w-full px-2 py-1.5 rounded-md text-sm text-slate-400 hover:bg-slate-800 hover:text-slate-200 transition-colors"
+          >
+            <LogOut className="w-4 h-4" />
+            <span>退出登录</span>
+          </button>
+        </div>
+      </aside>
+    </>
+  )
+}