feat: 实现前端管理看板与移动端扫码视图组件

frontend/src/pages/admin/AdminDashboard.tsx

@@ -0,0 +1,81 @@
+import { useEffect, useState } from "react";
+import { Package, ClipboardList, Loader2, AlertCircle } from "lucide-react";
+import { fetchDashboardStats, type DashboardStats } from "../../services/dashboardApi";
+
+function StatCard({
+  label,
+  total,
+  pending,
+  progress,
+  done,
+  icon: Icon,
+}: {
+  label: string;
+  total: number;
+  pending: number;
+  progress: number;
+  done: number;
+  icon: React.ComponentType<{ className?: string }>;
+}) {
+  return (
+    <div className="rounded-xl bg-white p-5 shadow-sm">
+      <div className="mb-4 flex items-center gap-2">
+        <Icon className="h-5 w-5 text-blue-600" />
+        <h3 className="font-semibold text-gray-800">{label}</h3>
+        <span className="ml-auto text-2xl font-bold text-gray-800">{total}</span>
+      </div>
+      <div className="flex h-2 overflow-hidden rounded-full bg-gray-100">
+        {pending > 0 && (
+          <div className="bg-yellow-400" style={{ width: `${(pending / Math.max(total, 1)) * 100}%` }} />
+        )}
+        {progress > 0 && (
+          <div className="bg-blue-500" style={{ width: `${(progress / Math.max(total, 1)) * 100}%` }} />
+        )}
+        {done > 0 && (
+          <div className="bg-green-500" style={{ width: `${(done / Math.max(total, 1)) * 100}%` }} />
+        )}
+      </div>
+      <div className="mt-3 flex gap-4 text-xs text-gray-500">
+        <span className="flex items-center gap-1"><span className="inline-block h-2 w-2 rounded-full bg-yellow-400" />待处理 {pending}</span>
+        <span className="flex items-center gap-1"><span className="inline-block h-2 w-2 rounded-full bg-blue-500" />进行中 {progress}</span>
+        <span className="flex items-center gap-1"><span className="inline-block h-2 w-2 rounded-full bg-green-500" />已完成 {done}</span>
+      </div>
+    </div>
+  );
+}
+
+export default function AdminDashboard() {
+  const [stats, setStats] = useState<DashboardStats | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetchDashboardStats()
+      .then(setStats)
+      .catch(() => setError("加载统计数据失败，请确认后端已启动"))
+      .finally(() => setLoading(false));
+  }, []);
+
+  if (loading) {
+    return <div className="flex items-center justify-center py-20"><Loader2 className="h-8 w-8 animate-spin text-blue-500" /></div>;
+  }
+
+  if (error) {
+    return <div className="flex items-center gap-2 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700"><AlertCircle className="h-4 w-4" />{error}</div>;
+  }
+
+  if (!stats) return null;
+
+  return (
+    <div>
+      <div className="mb-6">
+        <h2 className="text-xl font-bold text-gray-800">全局生产概览</h2>
+        <p className="mt-1 text-sm text-gray-500">PC端与移动端共享同一后台数据</p>
+      </div>
+      <div className="grid gap-5 md:grid-cols-2">
+        <StatCard label="产品统计" total={stats.products_total} pending={stats.products_pending} progress={stats.products_in_progress} done={stats.products_completed} icon={Package} />
+        <StatCard label="任务统计" total={stats.tasks_total} pending={stats.tasks_pending} progress={stats.tasks_in_progress} done={stats.tasks_completed} icon={ClipboardList} />
+      </div>
+    </div>
+  );
+}