feat(admin): 分类管理（分类树增删改移 + 后台页面）

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>

admin-frontend/src/App.tsx

@@ -5,9 +5,10 @@ import ProductList from "./components/ProductList";
 import ProductDetail from "./components/ProductDetail";
 import SubmissionsPage from "./components/SubmissionsPage";
 import ApiKeysPage from "./components/ApiKeysPage";
-import { Inbox, KeyRound, LogOut, Package } from "lucide-react";
+import CategoriesPage from "./components/CategoriesPage";
+import { FolderTree, Inbox, KeyRound, LogOut, Package } from "lucide-react";
 
-type Tab = "products" | "submissions" | "keys";
+type Tab = "products" | "submissions" | "categories" | "keys";
 type View = { name: "list" } | { name: "detail"; id: string };
 
 export default function App() {
@@ -100,6 +101,19 @@ export default function App() {
                 </span>
               )}
             </button>
+            <button
+              onClick={() => {
+                setTab("categories");
+                setView({ name: "list" });
+              }}
+              className={`px-3 py-1.5 rounded-md flex items-center gap-1.5 ${
+                tab === "categories"
+                  ? "bg-emerald-50 text-emerald-700"
+                  : "text-gray-600 hover:bg-gray-100"
+              }`}
+            >
+              <FolderTree className="h-4 w-4" /> 分类管理
+            </button>
             <button
               onClick={() => setTab("keys")}
               className={`px-3 py-1.5 rounded-md flex items-center gap-1.5 ${
@@ -125,6 +139,8 @@ export default function App() {
       <main className="flex-1 overflow-auto p-6">
         {tab === "keys" ? (
           <ApiKeysPage />
+        ) : tab === "categories" ? (
+          <CategoriesPage />
         ) : tab === "submissions" ? (
           <SubmissionsPage onPending={setPending} />
         ) : view.name === "list" ? (

admin-frontend/src/api.ts

@@ -104,6 +104,18 @@ export const api = {
     request<{ items: import("./types").Brand[] }>("/brands"),
   listCategories: () =>
     request<{ items: import("./types").Category[] }>("/categories"),
+  createCategory: (body: import("./types").CategoryInput) =>
+    request<import("./types").Category>("/categories", {
+      method: "POST",
+      body: JSON.stringify(body),
+    }),
+  updateCategory: (id: string, body: import("./types").CategoryInput) =>
+    request<import("./types").Category>(`/categories/${id}`, {
+      method: "PUT",
+      body: JSON.stringify(body),
+    }),
+  deleteCategory: (id: string) =>
+    request<{ status: string }>(`/categories/${id}`, { method: "DELETE" }),
   listSubmissions: (status: string, page: number, size: number) =>
     request<{
       items: import("./types").SubmissionRow[];

admin-frontend/src/components/CategoriesPage.tsx

@@ -0,0 +1,311 @@
+import { useEffect, useMemo, useState } from "react";
+import { api, ApiError } from "../api";
+import type { Category, CategoryInput } from "../types";
+import { FolderTree, Pencil, Plus, Trash2 } from "lucide-react";
+
+type FormState = {
+  mode: "create" | "edit";
+  id?: string;
+  name_zh: string;
+  name_en: string;
+  slug: string;
+  parent_id: string; // "" = top level
+  gpc_brick_code: string;
+};
+
+function emptyForm(parentId = ""): FormState {
+  return {
+    mode: "create",
+    name_zh: "",
+    name_en: "",
+    slug: "",
+    parent_id: parentId,
+    gpc_brick_code: "",
+  };
+}
+
+export default function CategoriesPage() {
+  const [rows, setRows] = useState<Category[]>([]);
+  const [error, setError] = useState("");
+  const [form, setForm] = useState<FormState | null>(null);
+
+  async function load() {
+    setError("");
+    try {
+      const res = await api.listCategories();
+      setRows(res.items);
+    } catch (e) {
+      setError(e instanceof ApiError ? e.message : "加载失败");
+    }
+  }
+
+  useEffect(() => {
+    load();
+  }, []);
+
+  async function remove(c: Category) {
+    if (!confirm(`确认删除分类「${c.name_zh}」(${c.path})？`)) return;
+    setError("");
+    try {
+      await api.deleteCategory(c.id);
+      await load();
+    } catch (e) {
+      setError(e instanceof ApiError ? e.message : "删除失败");
+    }
+  }
+
+  return (
+    <div className="max-w-5xl">
+      <div className="flex items-center justify-between mb-4">
+        <div>
+          <h2 className="text-lg font-semibold text-gray-800 flex items-center gap-2">
+            <FolderTree className="h-5 w-5 text-emerald-600" /> 分类管理
+          </h2>
+          <p className="text-sm text-gray-500 mt-1">
+            维护商品分类树。英文标识(slug)用于分类路径，新建后不可修改；可重命名、移动层级、删除空分类。
+          </p>
+        </div>
+        <button
+          onClick={() => setForm(emptyForm())}
+          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>
+      )}
+
+      {form && (
+        <CategoryForm
+          form={form}
+          categories={rows}
+          onClose={() => setForm(null)}
+          onSaved={() => {
+            setForm(null);
+            load();
+          }}
+          onError={setError}
+        />
+      )}
+
+      <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">GPC</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">
+            {rows.length === 0 ? (
+              <tr>
+                <td colSpan={5} className="px-4 py-8 text-center text-gray-400">
+                  暂无分类
+                </td>
+              </tr>
+            ) : (
+              rows.map((c) => (
+                <tr key={c.id} className="hover:bg-gray-50">
+                  <td className="px-4 py-2 text-gray-800">
+                    <span style={{ paddingLeft: `${c.level * 18}px` }} className="inline-flex items-center gap-2">
+                      {c.level > 0 && <span className="text-gray-300">└</span>}
+                      <span className="font-medium">{c.name_zh}</span>
+                      {c.name_en && <span className="text-xs text-gray-400">{c.name_en}</span>}
+                    </span>
+                  </td>
+                  <td className="px-4 py-2 text-gray-500">
+                    <code className="text-xs">{c.path}</code>
+                  </td>
+                  <td className="px-4 py-2 text-gray-500 text-xs">{c.gpc_brick_code || "—"}</td>
+                  <td className="px-4 py-2 text-gray-600">{c.product_count}</td>
+                  <td className="px-4 py-2 text-right whitespace-nowrap">
+                    <button
+                      onClick={() => setForm(emptyForm(c.id))}
+                      className="text-gray-400 hover:text-emerald-600 mr-3"
+                      title="新增子分类"
+                    >
+                      <Plus className="h-4 w-4" />
+                    </button>
+                    <button
+                      onClick={() =>
+                        setForm({
+                          mode: "edit",
+                          id: c.id,
+                          name_zh: c.name_zh,
+                          name_en: c.name_en ?? "",
+                          slug: c.path,
+                          parent_id: c.parent_id ?? "",
+                          gpc_brick_code: c.gpc_brick_code ?? "",
+                        })
+                      }
+                      className="text-gray-400 hover:text-emerald-600 mr-3"
+                      title="编辑"
+                    >
+                      <Pencil className="h-4 w-4" />
+                    </button>
+                    <button
+                      onClick={() => remove(c)}
+                      className="text-gray-400 hover:text-red-600"
+                      title="删除"
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </button>
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+function CategoryForm({
+  form,
+  categories,
+  onClose,
+  onSaved,
+  onError,
+}: {
+  form: FormState;
+  categories: Category[];
+  onClose: () => void;
+  onSaved: () => void;
+  onError: (msg: string) => void;
+}) {
+  const [state, setState] = useState<FormState>(form);
+  const [busy, setBusy] = useState(false);
+
+  // When editing, the node itself and its descendants are not valid parents.
+  const parentOptions = useMemo(() => {
+    if (state.mode === "create") return categories;
+    const self = categories.find((c) => c.id === state.id);
+    if (!self) return categories;
+    return categories.filter(
+      (c) => c.id !== self.id && !c.path.startsWith(self.path + "."),
+    );
+  }, [categories, state.mode, state.id]);
+
+  function set<K extends keyof FormState>(key: K, value: FormState[K]) {
+    setState((s) => ({ ...s, [key]: value }));
+  }
+
+  async function submit() {
+    if (!state.name_zh.trim()) {
+      onError("分类名称不能为空");
+      return;
+    }
+    setBusy(true);
+    onError("");
+    const body: CategoryInput = {
+      name_zh: state.name_zh.trim(),
+      name_en: state.name_en.trim() || null,
+      parent_id: state.parent_id || null,
+      gpc_brick_code: state.gpc_brick_code.trim() || null,
+    };
+    if (state.mode === "create") body.slug = state.slug.trim() || null;
+    try {
+      if (state.mode === "create") {
+        await api.createCategory(body);
+      } else if (state.id) {
+        await api.updateCategory(state.id, body);
+      }
+      onSaved();
+    } catch (e) {
+      onError(e instanceof ApiError ? e.message : "保存失败");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="mb-4 bg-white border rounded-lg p-5">
+      <h3 className="font-medium text-gray-700 mb-3">
+        {state.mode === "create" ? "新建分类" : "编辑分类"}
+      </h3>
+      <div className="grid grid-cols-2 gap-4">
+        <label className="block">
+          <span className="text-xs text-gray-500">中文名称 *</span>
+          <input
+            className="w-full border rounded-md px-3 py-2 text-sm mt-1"
+            value={state.name_zh}
+            onChange={(e) => set("name_zh", e.target.value)}
+            placeholder="例如：饮料"
+          />
+        </label>
+        <label className="block">
+          <span className="text-xs text-gray-500">英文名称（可选）</span>
+          <input
+            className="w-full border rounded-md px-3 py-2 text-sm mt-1"
+            value={state.name_en}
+            onChange={(e) => set("name_en", e.target.value)}
+            placeholder="Beverages"
+          />
+        </label>
+        <label className="block">
+          <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={state.parent_id}
+            onChange={(e) => set("parent_id", e.target.value)}
+          >
+            <option value="">（顶级分类）</option>
+            {parentOptions.map((c) => (
+              <option key={c.id} value={c.id}>
+                {"\u00A0".repeat(c.level * 2)}
+                {c.name_zh} ({c.path})
+              </option>
+            ))}
+          </select>
+        </label>
+        {state.mode === "create" ? (
+          <label className="block">
+            <span className="text-xs text-gray-500">英文标识 slug（可选，留空自动生成）</span>
+            <input
+              className="w-full border rounded-md px-3 py-2 text-sm mt-1"
+              value={state.slug}
+              onChange={(e) => set("slug", e.target.value)}
+              placeholder="beverages"
+            />
+          </label>
+        ) : (
+          <label className="block">
+            <span className="text-xs text-gray-500">路径（不可修改）</span>
+            <input
+              className="w-full border rounded-md px-3 py-2 text-sm mt-1 bg-gray-50 text-gray-400"
+              value={state.slug}
+              disabled
+            />
+          </label>
+        )}
+        <label className="block">
+          <span className="text-xs text-gray-500">GPC Brick 编码（可选）</span>
+          <input
+            className="w-full border rounded-md px-3 py-2 text-sm mt-1"
+            value={state.gpc_brick_code}
+            onChange={(e) => set("gpc_brick_code", e.target.value)}
+            placeholder="10000224"
+          />
+        </label>
+      </div>
+      <div className="mt-4 flex gap-2">
+        <button
+          onClick={submit}
+          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={onClose} className="px-4 py-2 rounded border text-sm text-gray-600">
+          取消
+        </button>
+      </div>
+    </div>
+  );
+}

admin-frontend/src/types.ts

@@ -74,6 +74,17 @@ export interface Category {
   name_en: string | null;
   path: string;
   level: number;
+  parent_id: string | null;
+  gpc_brick_code: string | null;
+  product_count: number;
+}
+
+export interface CategoryInput {
+  name_zh: string;
+  name_en?: string | null;
+  slug?: string | null;
+  parent_id?: string | null;
+  gpc_brick_code?: string | null;
 }
 
 export interface AuditEntry {