初始提交：全国记者站管理系统

2026-08-01 23:09:49 +08:00
commit 45fbba0308
96 changed files with 21514 additions and 0 deletions
@@ -0,0 +1,57 @@
+import { Bell, ChevronRight, LogOut, Menu, ShieldCheck } from 'lucide-react'
+import { useRole } from '../../context'
+import type { Role } from '../../types'
+
+const roleLabels: Record<Role, string> = {
+  headquarters: '总部管理员',
+  station: '分站负责人',
+  reporter: '记者',
+}
+
+interface TopBarProps {
+  pageTitle: string
+  onMenuToggle: () => void
+}
+
+export function TopBar({ pageTitle, onMenuToggle }: TopBarProps) {
+  const { role, identity, isAuthenticated, logout } = useRole()
+
+  const handleLogout = () => {
+    if (isAuthenticated) {
+      logout()
+    }
+  }
+
+  return (
+    <header className="topbar">
+      <button className="icon-button mobile-only" onClick={onMenuToggle} aria-label="打开菜单">
+        <Menu size={21} />
+      </button>
+      <div className="breadcrumb">
+        <span>记者站管理</span>
+        <ChevronRight size={15} />
+        <strong>{pageTitle}</strong>
+      </div>
+      <div className="top-actions">
+        <button className="icon-button notification" aria-label="通知">
+          <Bell size={19} />
+          <i />
+        </button>
+        <div className="role-badge">
+          <ShieldCheck size={17} />
+          <span>{roleLabels[role]}</span>
+        </div>
+        <div className="user-box">
+          <div className="avatar">{identity.name[0]}</div>
+          <div>
+            <strong>{identity.name}</strong>
+            <span>{roleLabels[role]}</span>
+          </div>
+        </div>
+        <button className="icon-button" onClick={handleLogout} aria-label="退出登录" title={isAuthenticated ? '退出登录' : '退出演示'}>
+          <LogOut size={17} />
+        </button>
+      </div>
+    </header>
+  )
+}