sulaimaannaasif6866
01593dcbdc
Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
312 lines
10 KiB
TypeScript
312 lines
10 KiB
TypeScript
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="mx-auto 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>
|
||
);
|
||
}
|