feat: 数据概览/操作日志/批量操作 + 首页合格档案数

后台新增「数据概览」(商品/合格/按状态/品牌/分类/待审核) 与「操作日志」(全局审计分页)；商品列表支持多选批量改状态/分类。公开首页标题改为「天工」并展示合格档案数；新增公开接口 /api/v1/stats 与后台 /api/stats、/api/audit、/api/products/bulk。合格口径=quality_score≥0.6 且在用。 Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
2026-06-21 01:45:28 +00:00
parent a36700076e
commit f382c27200
15 changed files with 847 additions and 9 deletions
@@ -38,8 +38,13 @@ export default function ProductList({
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
  const [creating, setCreating] = useState(false);
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [bulkStatus, setBulkStatus] = useState("");
+  const [bulkCategory, setBulkCategory] = useState("");
+  const [bulkBusy, setBulkBusy] = useState(false);

-  useEffect(() => {
+  function reload() {
    setLoading(true);
    setError("");
    api
@@ -50,8 +55,72 @@ export default function ProductList({
      })
      .catch((e) => setError(e.message))
      .finally(() => setLoading(false));
+  }
+
+  useEffect(() => {
+    setSelected(new Set());
+    reload();
  }, [q, page, size]);

+  useEffect(() => {
+    api.listCategories().then((r) => setCategories(r.items)).catch(() => {});
+  }, []);
+
+  function toggle(id: string) {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }
+
+  function toggleAll() {
+    setSelected((prev) =>
+      prev.size === rows.length ? new Set() : new Set(rows.map((r) => r.id)),
+    );
+  }
+
+  async function applyBulkStatus() {
+    if (!bulkStatus || selected.size === 0) return;
+    setBulkBusy(true);
+    setError("");
+    try {
+      await api.bulkProducts({
+        ids: [...selected],
+        action: "status",
+        status: bulkStatus,
+      });
+      setSelected(new Set());
+      setBulkStatus("");
+      reload();
+    } catch (e) {
+      setError(e instanceof ApiError ? e.message : "批量操作失败");
+    } finally {
+      setBulkBusy(false);
+    }
+  }
+
+  async function applyBulkCategory() {
+    if (selected.size === 0) return;
+    setBulkBusy(true);
+    setError("");
+    try {
+      await api.bulkProducts({
+        ids: [...selected],
+        action: "category",
+        category_id: bulkCategory || null,
+      });
+      setSelected(new Set());
+      setBulkCategory("");
+      reload();
+    } catch (e) {
+      setError(e instanceof ApiError ? e.message : "批量操作失败");
+    } finally {
+      setBulkBusy(false);
+    }
+  }
+
  const pages = Math.max(1, Math.ceil(total / size));

  return (
@@ -106,10 +175,75 @@ export default function ProductList({
        </div>
      )}

+      {selected.size > 0 && (
+        <div className="mb-3 flex flex-wrap items-center gap-3 rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm">
+          <span className="font-medium text-emerald-800">
+            已选 {selected.size} 项
+          </span>
+          <div className="flex items-center gap-1.5">
+            <span className="text-gray-500">改状态</span>
+            <select
+              value={bulkStatus}
+              onChange={(e) => setBulkStatus(e.target.value)}
+              className="rounded border border-gray-300 bg-white px-2 py-1"
+            >
+              <option value="">选择</option>
+              <option value="active">在用</option>
+              <option value="deprecated">已停用</option>
+              <option value="merged">已合并</option>
+            </select>
+            <button
+              onClick={applyBulkStatus}
+              disabled={bulkBusy || !bulkStatus}
+              className="rounded bg-emerald-600 px-3 py-1 text-white hover:bg-emerald-700 disabled:opacity-50"
+            >
+              应用
+            </button>
+          </div>
+          <div className="flex items-center gap-1.5">
+            <span className="text-gray-500">改分类</span>
+            <select
+              value={bulkCategory}
+              onChange={(e) => setBulkCategory(e.target.value)}
+              className="rounded border border-gray-300 bg-white px-2 py-1"
+            >
+              <option value="">（未分类）</option>
+              {categories.map((c) => (
+                <option key={c.id} value={c.id}>
+                  {"\u00A0".repeat(c.level * 2)}
+                  {c.name_zh}
+                </option>
+              ))}
+            </select>
+            <button
+              onClick={applyBulkCategory}
+              disabled={bulkBusy}
+              className="rounded bg-emerald-600 px-3 py-1 text-white hover:bg-emerald-700 disabled:opacity-50"
+            >
+              应用
+            </button>
+          </div>
+          <button
+            onClick={() => setSelected(new Set())}
+            className="text-gray-500 hover:text-gray-700"
+          >
+            取消选择
+          </button>
+        </div>
+      )}
+
      <div className="overflow-hidden rounded-lg border border-gray-200 bg-white">
        <table className="w-full text-sm">
          <thead className="bg-gray-50 text-left text-xs uppercase text-gray-500">
            <tr>
+              <th className="w-10 px-4 py-3">
+                <input
+                  type="checkbox"
+                  checked={rows.length > 0 && selected.size === rows.length}
+                  onChange={toggleAll}
+                  aria-label="全选"
+                />
+              </th>
              <th className="px-4 py-3">名称</th>
              <th className="px-4 py-3">品牌</th>
              <th className="px-4 py-3">条码</th>
@@ -122,13 +256,13 @@ export default function ProductList({
          <tbody className="divide-y divide-gray-100">
            {loading ? (
              <tr>
-                <td colSpan={7} className="px-4 py-8 text-center text-gray-400">
+                <td colSpan={8} className="px-4 py-8 text-center text-gray-400">
                  加载中…
                </td>
              </tr>
            ) : rows.length === 0 ? (
              <tr>
-                <td colSpan={7} className="px-4 py-8 text-center text-gray-400">
+                <td colSpan={8} className="px-4 py-8 text-center text-gray-400">
                  暂无数据
                </td>
              </tr>
@@ -137,8 +271,21 @@ export default function ProductList({
                <tr
                  key={r.id}
                  onClick={() => onOpen(r.id)}
-                  className="cursor-pointer hover:bg-emerald-50/50"
+                  className={`cursor-pointer hover:bg-emerald-50/50 ${
+                    selected.has(r.id) ? "bg-emerald-50/60" : ""
+                  }`}
                >
+                  <td
+                    className="px-4 py-3"
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    <input
+                      type="checkbox"
+                      checked={selected.has(r.id)}
+                      onChange={() => toggle(r.id)}
+                      aria-label="选择"
+                    />
+                  </td>
                  <td className="px-4 py-3 font-medium text-gray-800">{r.name}</td>
                  <td className="px-4 py-3 text-gray-600">{r.brand || "—"}</td>
                  <td className="px-4 py-3 font-mono text-xs text-gray-500">