polish(admin): 抽出后台控件包并统一各页布局与交互

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/components/admin/AdminStatCard.tsx

@@ -0,0 +1,46 @@
+import type { ReactNode } from "react";
+
+/** KPI：图标软底 + 数字 + 说明 */
+export default function AdminStatCard({
+  label,
+  value,
+  sub,
+  hint,
+  icon,
+  color = "var(--accent)",
+  soft = "var(--accent-soft)",
+}: {
+  label: string;
+  value: ReactNode;
+  sub?: string;
+  hint?: string;
+  icon: ReactNode;
+  color?: string;
+  soft?: string;
+}) {
+  return (
+    <div className="panel p-4 sm:p-5 flex items-center gap-3">
+      <span
+        className="w-9 h-9 rounded-lg flex items-center justify-center shrink-0"
+        style={{ background: soft, color }}
+        aria-hidden
+      >
+        {icon}
+      </span>
+      <div className="min-w-0 leading-tight">
+        <p className="text-[11.5px] truncate" style={{ color: "var(--ink-3)" }}>
+          {label}
+        </p>
+        <p className="text-[19px] sm:text-[22px] font-extrabold tabular-nums leading-none mt-1" style={{ color: "var(--ink)" }}>
+          {value}
+          {sub ? (
+            <span className="ml-1.5 text-[11px] font-medium" style={{ color: "var(--ink-3)" }}>
+              {sub}
+            </span>
+          ) : null}
+        </p>
+        {hint ? <p className="meta text-[12px] mt-1.5">{hint}</p> : null}
+      </div>
+    </div>
+  );
+}