feat(admin): 品牌管理 + 新建商品

品牌管理：列出品牌及引用商品数，支持改名、合并重复品牌（把源品牌的商品并入目标后删除源）、删除未被引用的品牌。新建商品：商品列表新增「新建商品」入口，填写名称/条码/品牌/品类后创建并进入详情页继续补全。 Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
2026-06-21 01:31:07 +00:00
parent 4a693c8fe9
commit a36700076e
9 changed files with 926 additions and 11 deletions
@@ -6,9 +6,10 @@ import ProductDetail from "./components/ProductDetail";
 import SubmissionsPage from "./components/SubmissionsPage";
 import ApiKeysPage from "./components/ApiKeysPage";
 import CategoriesPage from "./components/CategoriesPage";
-import { FolderTree, Inbox, KeyRound, LogOut, Package } from "lucide-react";
+import BrandsPage from "./components/BrandsPage";
+import { FolderTree, Inbox, KeyRound, LogOut, Package, Tag } from "lucide-react";

-type Tab = "products" | "submissions" | "categories" | "keys";
+type Tab = "products" | "submissions" | "categories" | "brands" | "keys";
 type View = { name: "list" } | { name: "detail"; id: string };

 export default function App() {
@@ -114,6 +115,16 @@ export default function App() {
            >
              <FolderTree className="h-4 w-4" /> 分类管理
            </button>
+            <button
+              onClick={() => setTab("brands")}
+              className={`px-3 py-1.5 rounded-md flex items-center gap-1.5 ${
+                tab === "brands"
+                  ? "bg-emerald-50 text-emerald-700"
+                  : "text-gray-600 hover:bg-gray-100"
+              }`}
+            >
+              <Tag className="h-4 w-4" /> 品牌管理
+            </button>
            <button
              onClick={() => setTab("keys")}
              className={`px-3 py-1.5 rounded-md flex items-center gap-1.5 ${
@@ -141,6 +152,8 @@ export default function App() {
          <ApiKeysPage />
        ) : tab === "categories" ? (
          <CategoriesPage />
+        ) : tab === "brands" ? (
+          <BrandsPage />
        ) : tab === "submissions" ? (
          <SubmissionsPage onPending={setPending} />
        ) : view.name === "list" ? (
@@ -61,6 +61,11 @@ export const api = {
    }>(`/products?q=${encodeURIComponent(q)}&page=${page}&size=${size}`),
  getProduct: (id: string) =>
    request<import("./types").ProductDetail>(`/products/${id}`),
+  createProduct: (body: unknown) =>
+    request<import("./types").ProductDetail>("/products", {
+      method: "POST",
+      body: JSON.stringify(body),
+    }),
  updateProduct: (id: string, body: unknown) =>
    request<import("./types").ProductDetail>(`/products/${id}`, {
      method: "PUT",
@@ -102,6 +107,23 @@ export const api = {
    ),
  listBrands: () =>
    request<{ items: import("./types").Brand[] }>("/brands"),
+  createBrand: (name: string) =>
+    request<import("./types").Brand>("/brands", {
+      method: "POST",
+      body: JSON.stringify({ name }),
+    }),
+  updateBrand: (id: string, name: string) =>
+    request<import("./types").Brand>(`/brands/${id}`, {
+      method: "PUT",
+      body: JSON.stringify({ name }),
+    }),
+  mergeBrands: (id: string, targetId: string) =>
+    request<import("./types").Brand>(`/brands/${id}/merge`, {
+      method: "POST",
+      body: JSON.stringify({ target_id: targetId }),
+    }),
+  deleteBrand: (id: string) =>
+    request<{ status: string }>(`/brands/${id}`, { method: "DELETE" }),
  listCategories: () =>
    request<{ items: import("./types").Category[] }>("/categories"),
  createCategory: (body: import("./types").CategoryInput) =>
@@ -0,0 +1,305 @@
+import { useEffect, useMemo, useState } from "react";
+import { api, ApiError } from "../api";
+import type { Brand } from "../types";
+import { Tag, Pencil, Plus, Trash2, GitMerge, Search } from "lucide-react";
+
+type EditState = { id: string; name: string };
+type MergeState = { source: Brand; targetId: string };
+
+export default function BrandsPage() {
+  const [rows, setRows] = useState<Brand[]>([]);
+  const [error, setError] = useState("");
+  const [query, setQuery] = useState("");
+  const [creating, setCreating] = useState(false);
+  const [newName, setNewName] = useState("");
+  const [edit, setEdit] = useState<EditState | null>(null);
+  const [merge, setMerge] = useState<MergeState | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  async function load() {
+    setError("");
+    try {
+      const res = await api.listBrands();
+      setRows(res.items);
+    } catch (e) {
+      setError(e instanceof ApiError ? e.message : "加载失败");
+    }
+  }
+
+  useEffect(() => {
+    load();
+  }, []);
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return rows;
+    return rows.filter((b) => b.name.toLowerCase().includes(q));
+  }, [rows, query]);
+
+  function fail(e: unknown, fallback: string) {
+    setError(e instanceof ApiError ? e.message : fallback);
+  }
+
+  async function create() {
+    if (!newName.trim()) return;
+    setBusy(true);
+    setError("");
+    try {
+      await api.createBrand(newName.trim());
+      setNewName("");
+      setCreating(false);
+      await load();
+    } catch (e) {
+      fail(e, "新建失败");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function saveEdit() {
+    if (!edit || !edit.name.trim()) return;
+    setBusy(true);
+    setError("");
+    try {
+      await api.updateBrand(edit.id, edit.name.trim());
+      setEdit(null);
+      await load();
+    } catch (e) {
+      fail(e, "保存失败");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function remove(b: Brand) {
+    if (!confirm(`确认删除品牌「${b.name}」？`)) return;
+    setError("");
+    try {
+      await api.deleteBrand(b.id);
+      await load();
+    } catch (e) {
+      fail(e, "删除失败");
+    }
+  }
+
+  async function doMerge() {
+    if (!merge || !merge.targetId) return;
+    const target = rows.find((b) => b.id === merge.targetId);
+    if (
+      !confirm(
+        `将「${merge.source.name}」的 ${merge.source.product_count} 个商品并入「${target?.name}」，并删除「${merge.source.name}」？`,
+      )
+    )
+      return;
+    setBusy(true);
+    setError("");
+    try {
+      await api.mergeBrands(merge.source.id, merge.targetId);
+      setMerge(null);
+      await load();
+    } catch (e) {
+      fail(e, "合并失败");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="max-w-4xl">
+      <div className="flex items-center justify-between mb-4">
+        <div>
+          <h2 className="text-lg font-semibold text-gray-800 flex items-center gap-2">
+            <Tag className="h-5 w-5 text-emerald-600" /> 品牌管理
+          </h2>
+          <p className="text-sm text-gray-500 mt-1">
+            维护品牌名录。可重命名、删除未被引用的品牌，或将重复品牌合并到一起。
+          </p>
+        </div>
+        <button
+          onClick={() => {
+            setCreating(true);
+            setNewName("");
+          }}
+          className="px-4 py-2 rounded-lg bg-emerald-600 text-white text-sm font-medium hover:bg-emerald-700 flex items-center gap-1.5"
+        >
+          <Plus className="h-4 w-4" /> 新建品牌
+        </button>
+      </div>
+
+      {error && (
+        <div className="mb-3 bg-red-50 text-red-700 text-sm rounded px-4 py-2">{error}</div>
+      )}
+
+      <div className="mb-3 relative w-72">
+        <Search className="absolute left-2 top-2.5 h-4 w-4 text-gray-400" />
+        <input
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder="筛选品牌名"
+          className="w-full rounded border border-gray-300 py-2 pl-8 pr-3 text-sm focus:border-emerald-500 focus:outline-none"
+        />
+      </div>
+
+      {creating && (
+        <div className="mb-4 bg-white border rounded-lg p-5">
+          <h3 className="font-medium text-gray-700 mb-3">新建品牌</h3>
+          <div className="flex items-end gap-2">
+            <label className="block flex-1">
+              <span className="text-xs text-gray-500">品牌名称 *</span>
+              <input
+                autoFocus
+                className="w-full border rounded-md px-3 py-2 text-sm mt-1"
+                value={newName}
+                onChange={(e) => setNewName(e.target.value)}
+                onKeyDown={(e) => e.key === "Enter" && create()}
+                placeholder="例如：可口可乐"
+              />
+            </label>
+            <button
+              onClick={create}
+              disabled={busy}
+              className="px-4 py-2 rounded bg-emerald-600 text-white text-sm hover:bg-emerald-700 disabled:opacity-60"
+            >
+              保存
+            </button>
+            <button
+              onClick={() => setCreating(false)}
+              className="px-4 py-2 rounded border text-sm text-gray-600"
+            >
+              取消
+            </button>
+          </div>
+        </div>
+      )}
+
+      {merge && (
+        <div className="mb-4 bg-white border rounded-lg p-5">
+          <h3 className="font-medium text-gray-700 mb-3 flex items-center gap-1.5">
+            <GitMerge className="h-4 w-4 text-emerald-600" /> 合并品牌
+          </h3>
+          <p className="text-sm text-gray-500 mb-3">
+            把「{merge.source.name}」（{merge.source.product_count} 个商品）合并到下面选择的品牌，源品牌将被删除。
+          </p>
+          <div className="flex items-end gap-2">
+            <label className="block flex-1">
+              <span className="text-xs text-gray-500">合并到</span>
+              <select
+                className="w-full border rounded-md px-3 py-2 text-sm mt-1 bg-white"
+                value={merge.targetId}
+                onChange={(e) => setMerge({ ...merge, targetId: e.target.value })}
+              >
+                <option value="">（请选择目标品牌）</option>
+                {rows
+                  .filter((b) => b.id !== merge.source.id)
+                  .map((b) => (
+                    <option key={b.id} value={b.id}>
+                      {b.name}（{b.product_count}）
+                    </option>
+                  ))}
+              </select>
+            </label>
+            <button
+              onClick={doMerge}
+              disabled={busy || !merge.targetId}
+              className="px-4 py-2 rounded bg-emerald-600 text-white text-sm hover:bg-emerald-700 disabled:opacity-60"
+            >
+              合并
+            </button>
+            <button
+              onClick={() => setMerge(null)}
+              className="px-4 py-2 rounded border text-sm text-gray-600"
+            >
+              取消
+            </button>
+          </div>
+        </div>
+      )}
+
+      <div className="bg-white border rounded-lg overflow-hidden">
+        <table className="w-full text-sm">
+          <thead className="bg-gray-50 text-gray-500 text-left">
+            <tr>
+              <th className="px-4 py-2 font-medium">品牌</th>
+              <th className="px-4 py-2 font-medium">商品数</th>
+              <th className="px-4 py-2 font-medium"></th>
+            </tr>
+          </thead>
+          <tbody className="divide-y">
+            {filtered.length === 0 ? (
+              <tr>
+                <td colSpan={3} className="px-4 py-8 text-center text-gray-400">
+                  {rows.length === 0 ? "暂无品牌" : "无匹配品牌"}
+                </td>
+              </tr>
+            ) : (
+              filtered.map((b) => (
+                <tr key={b.id} className="hover:bg-gray-50">
+                  <td className="px-4 py-2 text-gray-800">
+                    {edit && edit.id === b.id ? (
+                      <input
+                        autoFocus
+                        className="border rounded px-2 py-1 text-sm w-64"
+                        value={edit.name}
+                        onChange={(e) => setEdit({ ...edit, name: e.target.value })}
+                        onKeyDown={(e) => {
+                          if (e.key === "Enter") saveEdit();
+                          if (e.key === "Escape") setEdit(null);
+                        }}
+                      />
+                    ) : (
+                      <span className="font-medium">{b.name}</span>
+                    )}
+                  </td>
+                  <td className="px-4 py-2 text-gray-600">{b.product_count}</td>
+                  <td className="px-4 py-2 text-right whitespace-nowrap">
+                    {edit && edit.id === b.id ? (
+                      <>
+                        <button
+                          onClick={saveEdit}
+                          disabled={busy}
+                          className="text-emerald-600 hover:text-emerald-700 text-xs mr-3"
+                        >
+                          保存
+                        </button>
+                        <button
+                          onClick={() => setEdit(null)}
+                          className="text-gray-400 hover:text-gray-600 text-xs"
+                        >
+                          取消
+                        </button>
+                      </>
+                    ) : (
+                      <>
+                        <button
+                          onClick={() => setEdit({ id: b.id, name: b.name })}
+                          className="text-gray-400 hover:text-emerald-600 mr-3"
+                          title="重命名"
+                        >
+                          <Pencil className="h-4 w-4" />
+                        </button>
+                        <button
+                          onClick={() => setMerge({ source: b, targetId: "" })}
+                          className="text-gray-400 hover:text-emerald-600 mr-3"
+                          title="合并到其它品牌"
+                        >
+                          <GitMerge className="h-4 w-4" />
+                        </button>
+                        <button
+                          onClick={() => remove(b)}
+                          className="text-gray-400 hover:text-red-600"
+                          title="删除"
+                        >
+                          <Trash2 className="h-4 w-4" />
+                        </button>
+                      </>
+                    )}
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
-import { api } from "../api";
-import { FIELD_LABELS, ProductRow } from "../types";
-import { Search, AlertCircle } from "lucide-react";
+import { api, ApiError } from "../api";
+import { Brand, Category, FIELD_LABELS, ProductRow } from "../types";
+import { Search, AlertCircle, Plus } from "lucide-react";

 const STATUS_LABEL: Record<string, string> = {
  active: "在用",
@@ -37,6 +37,7 @@ export default function ProductList({
  const [total, setTotal] = useState(0);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
+  const [creating, setCreating] = useState(false);

  useEffect(() => {
    setLoading(true);
@@ -79,9 +80,26 @@ export default function ProductList({
          <button className="rounded bg-emerald-600 px-3 py-2 text-sm text-white hover:bg-emerald-700">
            搜索
          </button>
+          <button
+            type="button"
+            onClick={() => setCreating(true)}
+            className="flex items-center gap-1 rounded bg-gray-700 px-3 py-2 text-sm text-white hover:bg-gray-800"
+          >
+            <Plus className="h-4 w-4" /> 新建商品
+          </button>
        </form>
      </div>

+      {creating && (
+        <CreateProductModal
+          onClose={() => setCreating(false)}
+          onCreated={(id) => {
+            setCreating(false);
+            onOpen(id);
+          }}
+        />
+      )}
+
      {error && (
        <div className="mb-3 rounded bg-red-50 px-3 py-2 text-sm text-red-600">
          {error}
@@ -176,3 +194,130 @@ export default function ProductList({
    </div>
  );
 }
+
+function CreateProductModal({
+  onClose,
+  onCreated,
+}: {
+  onClose: () => void;
+  onCreated: (id: string) => void;
+}) {
+  const [name, setName] = useState("");
+  const [gtin, setGtin] = useState("");
+  const [brand, setBrand] = useState("");
+  const [categoryId, setCategoryId] = useState("");
+  const [brands, setBrands] = useState<Brand[]>([]);
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    api.listBrands().then((r) => setBrands(r.items)).catch(() => {});
+    api.listCategories().then((r) => setCategories(r.items)).catch(() => {});
+  }, []);
+
+  async function submit() {
+    if (!name.trim()) {
+      setError("名称不能为空");
+      return;
+    }
+    setBusy(true);
+    setError("");
+    try {
+      const created = await api.createProduct({
+        name: name.trim(),
+        gtin: gtin.trim() || null,
+        brand_name: brand.trim() || null,
+        category_id: categoryId || null,
+        status: "active",
+      });
+      onCreated(created.id);
+    } catch (e) {
+      setError(e instanceof ApiError ? e.message : "新建失败");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 z-20 flex items-center justify-center bg-black/30">
+      <div className="w-full max-w-md rounded-lg bg-white p-6 shadow-lg">
+        <h3 className="mb-4 text-base font-semibold text-gray-800">新建商品</h3>
+        {error && (
+          <div className="mb-3 rounded bg-red-50 px-3 py-2 text-sm text-red-600">
+            {error}
+          </div>
+        )}
+        <div className="space-y-3">
+          <label className="block">
+            <span className="text-xs text-gray-500">名称 *</span>
+            <input
+              autoFocus
+              className="mt-1 w-full rounded border border-gray-300 px-3 py-2 text-sm"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="商品名称"
+            />
+          </label>
+          <label className="block">
+            <span className="text-xs text-gray-500">条码 (GTIN，可选)</span>
+            <input
+              className="mt-1 w-full rounded border border-gray-300 px-3 py-2 text-sm"
+              value={gtin}
+              onChange={(e) => setGtin(e.target.value)}
+              placeholder="8/12/13/14 位"
+            />
+          </label>
+          <label className="block">
+            <span className="text-xs text-gray-500">品牌（不存在将自动创建，可选）</span>
+            <input
+              list="create-brand-list"
+              className="mt-1 w-full rounded border border-gray-300 px-3 py-2 text-sm"
+              value={brand}
+              onChange={(e) => setBrand(e.target.value)}
+            />
+            <datalist id="create-brand-list">
+              {brands.map((b) => (
+                <option key={b.id} value={b.name} />
+              ))}
+            </datalist>
+          </label>
+          <label className="block">
+            <span className="text-xs text-gray-500">品类（可选）</span>
+            <select
+              className="mt-1 w-full rounded border border-gray-300 bg-white px-3 py-2 text-sm"
+              value={categoryId}
+              onChange={(e) => setCategoryId(e.target.value)}
+            >
+              <option value="">（未分类）</option>
+              {categories.map((c) => (
+                <option key={c.id} value={c.id}>
+                  {"\u00A0".repeat(c.level * 2)}
+                  {c.name_zh} ({c.path})
+                </option>
+              ))}
+            </select>
+          </label>
+        </div>
+        <p className="mt-3 text-xs text-gray-400">
+          创建后将进入详情页，可继续补全营养、图片、多条码等信息。
+        </p>
+        <div className="mt-4 flex justify-end gap-2">
+          <button
+            onClick={onClose}
+            className="rounded border px-4 py-2 text-sm text-gray-600"
+          >
+            取消
+          </button>
+          <button
+            onClick={submit}
+            disabled={busy}
+            className="rounded bg-emerald-600 px-4 py-2 text-sm text-white hover:bg-emerald-700 disabled:opacity-60"
+          >
+            {busy ? "创建中…" : "创建并编辑"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -66,6 +66,7 @@ export interface ProductDetail {
 export interface Brand {
  id: string;
  name: string;
+  product_count: number;
 }

 export interface Category {