调整结构

frontend/src/routes/user-management/components/SummaryCards/index.tsx

@@ -0,0 +1,41 @@
+import { ShieldCheck, UserCheck, Users, UserX } from 'lucide-react'
+import type { LucideIcon } from 'lucide-react'
+
+import type { UserSummary } from '../../../../interfaces/user/model'
+import styles from './index.module.scss'
+
+interface SummaryCardsProps {
+  summary: UserSummary
+}
+
+interface SummaryCard {
+  label: string
+  value: number
+  detail: string
+  icon: LucideIcon
+  tone: string
+}
+
+export default function SummaryCards({ summary }: SummaryCardsProps) {
+  const cards: SummaryCard[] = [
+    { label: '全部用户', value: summary.total, detail: '当前组织账号', icon: Users, tone: 'teal' },
+    { label: '活跃用户', value: summary.active, detail: '可以正常访问', icon: UserCheck, tone: 'green' },
+    { label: '未激活', value: summary.inactive, detail: '等待重新启用', icon: UserX, tone: 'amber' },
+    { label: '管理员', value: summary.admins, detail: '拥有管理权限', icon: ShieldCheck, tone: 'navy' },
+  ]
+
+  return (
+    <section className={`summary-grid ${styles.root}`} aria-label="用户概览">
+      {cards.map((card) => {
+        const Icon = card.icon
+        return (
+          <article className={`summary-card ${card.tone}`} key={card.label}>
+            <div className="summary-card-top"><span>{card.label}</span><b aria-hidden="true"><Icon size={15} /></b></div>
+            <strong>{card.value}</strong>
+            <small>{card.detail}</small>
+          </article>
+        )
+      })}
+    </section>
+  )
+}