feat(admin): 商品编辑页增加上一个/下一个导航

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

admin-frontend/src/App.tsx

@@ -28,6 +28,7 @@ export default function App() {
   const [tab, setTab] = useState<Tab>("products");
   const [pending, setPending] = useState<number | null>(null);
   const [view, setView] = useState<View>({ name: "list" });
+  const [navIds, setNavIds] = useState<string[]>([]);
 
   useEffect(() => {
     if (!authed) return;
@@ -190,9 +191,19 @@ export default function App() {
         ) : tab === "submissions" ? (
           <SubmissionsPage onPending={setPending} />
         ) : view.name === "list" ? (
-          <ProductList onOpen={(id) => setView({ name: "detail", id })} />
+          <ProductList
+            onOpen={(id, ids) => {
+              setNavIds(ids);
+              setView({ name: "detail", id });
+            }}
+          />
         ) : (
-          <ProductDetail id={view.id} onBack={() => setView({ name: "list" })} />
+          <ProductDetail
+            id={view.id}
+            ids={navIds}
+            onNavigate={(id) => setView({ name: "detail", id })}
+            onBack={() => setView({ name: "list" })}
+          />
         )}
       </main>
     </div>

admin-frontend/src/components/ApiKeysPage.tsx

@@ -44,7 +44,7 @@ export default function ApiKeysPage() {
   }
 
   return (
-    <div className="max-w-4xl">
+    <div className="mx-auto 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">

admin-frontend/src/components/AuditLogPage.tsx

@@ -40,7 +40,7 @@ export default function AuditLogPage() {
   const pages = Math.max(1, Math.ceil(total / size));
 
   return (
-    <div className="max-w-5xl">
+    <div className="mx-auto max-w-5xl">
       <h2 className="mb-4 flex items-center gap-2 text-lg font-semibold text-gray-800">
         <ScrollText className="h-5 w-5 text-emerald-600" /> 操作日志
         <span className="text-sm font-normal text-gray-400">共 {total} 条</span>

admin-frontend/src/components/BrandsPage.tsx

@@ -105,7 +105,7 @@ export default function BrandsPage() {
   }
 
   return (
-    <div className="max-w-4xl">
+    <div className="mx-auto 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">

admin-frontend/src/components/CategoriesPage.tsx

@@ -55,7 +55,7 @@ export default function CategoriesPage() {
   }
 
   return (
-    <div className="max-w-5xl">
+    <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">

admin-frontend/src/components/ProductDetail.tsx

@@ -9,6 +9,8 @@ import {
 } from "../types";
 import {
   ArrowLeft,
+  ChevronLeft,
+  ChevronRight,
   Plus,
   Save,
   Trash2,
@@ -88,10 +90,18 @@ const inputCls =
 export default function ProductDetail({
   id,
   onBack,
+  ids = [],
+  onNavigate,
 }: {
   id: string;
   onBack: () => void;
+  ids?: string[];
+  onNavigate?: (id: string) => void;
 }) {
+  const navIndex = ids.indexOf(id);
+  const prevId = navIndex > 0 ? ids[navIndex - 1] : null;
+  const nextId =
+    navIndex >= 0 && navIndex < ids.length - 1 ? ids[navIndex + 1] : null;
   const [d, setD] = useState<Detail | null>(null);
   const [brands, setBrands] = useState<Brand[]>([]);
   const [categories, setCategories] = useState<Category[]>([]);
@@ -226,12 +236,35 @@ export default function ProductDetail({
   return (
     <div className="mx-auto max-w-5xl space-y-5">
       <div className="flex items-center justify-between">
-        <button
+        <div className="flex items-center gap-2">
-          onClick={onBack}
+          <button
-          className="flex items-center gap-1 text-sm text-gray-600 hover:text-gray-900"
+            onClick={onBack}
-        >
+            className="flex items-center gap-1 text-sm text-gray-600 hover:text-gray-900"
-          <ArrowLeft className="h-4 w-4" /> 返回列表
+          >
-        </button>
+            <ArrowLeft className="h-4 w-4" /> 返回列表
+          </button>
+          {ids.length > 1 && navIndex >= 0 && (
+            <div className="ml-2 flex items-center gap-1 text-sm">
+              <button
+                onClick={() => prevId && onNavigate?.(prevId)}
+                disabled={!prevId}
+                className="flex items-center gap-1 rounded border border-gray-300 px-2 py-1 text-gray-600 hover:bg-gray-50 disabled:opacity-40"
+              >
+                <ChevronLeft className="h-4 w-4" /> 上一个
+              </button>
+              <span className="text-xs text-gray-400">
+                {navIndex + 1} / {ids.length}
+              </span>
+              <button
+                onClick={() => nextId && onNavigate?.(nextId)}
+                disabled={!nextId}
+                className="flex items-center gap-1 rounded border border-gray-300 px-2 py-1 text-gray-600 hover:bg-gray-50 disabled:opacity-40"
+              >
+                下一个 <ChevronRight className="h-4 w-4" />
+              </button>
+            </div>
+          )}
+        </div>
         <div className="flex items-center gap-3">
           {msg && <span className="text-sm text-emerald-600">{msg}</span>}
           {error && <span className="text-sm text-red-600">{error}</span>}

admin-frontend/src/components/ProductList.tsx

@@ -27,12 +27,13 @@ function QualityBadge({ score }: { score: number }) {
 export default function ProductList({
   onOpen,
 }: {
-  onOpen: (id: string) => void;
+  onOpen: (id: string, ids: string[]) => void;
 }) {
   const [q, setQ] = useState("");
   const [input, setInput] = useState("");
   const [page, setPage] = useState(1);
-  const [size] = useState(20);
+  const [size, setSize] = useState(20);
+  const [jump, setJump] = useState("");
   const [rows, setRows] = useState<ProductRow[]>([]);
   const [total, setTotal] = useState(0);
   const [loading, setLoading] = useState(false);
@@ -164,7 +165,7 @@ export default function ProductList({
           onClose={() => setCreating(false)}
           onCreated={(id) => {
             setCreating(false);
-            onOpen(id);
+            onOpen(id, [id]);
           }}
         />
       )}
@@ -270,7 +271,7 @@ export default function ProductList({
               rows.map((r) => (
                 <tr
                   key={r.id}
-                  onClick={() => onOpen(r.id)}
+                  onClick={() => onOpen(r.id, rows.map((x) => x.id))}
                   className={`cursor-pointer hover:bg-emerald-50/50 ${
                     selected.has(r.id) ? "bg-emerald-50/60" : ""
                   }`}
@@ -319,7 +320,25 @@ export default function ProductList({
         </table>
       </div>
 
-      <div className="mt-4 flex items-center justify-end gap-2 text-sm text-gray-600">
+      <div className="mt-4 flex flex-wrap items-center justify-end gap-2 text-sm text-gray-600">
+        <div className="mr-auto flex items-center gap-1">
+          <span>每页</span>
+          <select
+            value={size}
+            onChange={(e) => {
+              setSize(Number(e.target.value));
+              setPage(1);
+            }}
+            className="rounded border border-gray-300 px-2 py-1"
+          >
+            {[20, 50, 100].map((n) => (
+              <option key={n} value={n}>
+                {n}
+              </option>
+            ))}
+          </select>
+          <span>条 · 共 {total} 条</span>
+        </div>
         <button
           disabled={page <= 1}
           onClick={() => setPage((p) => p - 1)}
@@ -337,6 +356,32 @@ export default function ProductList({
         >
           下一页
         </button>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            const n = Number(jump);
+            if (Number.isFinite(n) && n >= 1) {
+              setPage(Math.min(Math.max(1, Math.trunc(n)), pages));
+              setJump("");
+            }
+          }}
+          className="flex items-center gap-1"
+        >
+          <span>跳至</span>
+          <input
+            value={jump}
+            onChange={(e) => setJump(e.target.value.replace(/[^0-9]/g, ""))}
+            placeholder={String(page)}
+            className="w-14 rounded border border-gray-300 px-2 py-1 text-center"
+            aria-label="跳转页码"
+          />
+          <button
+            type="submit"
+            className="rounded border border-gray-300 px-3 py-1 hover:bg-gray-50"
+          >
+            前往
+          </button>
+        </form>
       </div>
     </div>
   );

admin-frontend/src/components/StatsPage.tsx

@@ -44,7 +44,7 @@ export default function StatsPage() {
   }, []);
 
   return (
-    <div className="max-w-5xl">
+    <div className="mx-auto max-w-5xl">
       <h2 className="mb-4 flex items-center gap-2 text-lg font-semibold text-gray-800">
         <BarChart3 className="h-5 w-5 text-emerald-600" /> 数据概览
       </h2>

admin-frontend/src/components/SubmissionsPage.tsx

@@ -56,7 +56,7 @@ export default function SubmissionsPage({ onPending }: { onPending?: (n: number)
   }
 
   return (
-    <div>
+    <div className="mx-auto max-w-5xl">
       <div className="flex items-center gap-2 mb-4">
         {STATUS_TABS.map((t) => (
           <button
@@ -193,7 +193,7 @@ function SubmissionView({ id, onBack }: { id: string; onBack: () => void }) {
   const nutri = Object.entries(p.nutriments || {});
 
   return (
-    <div className="max-w-3xl">
+    <div className="mx-auto max-w-3xl">
       <button onClick={onBack} className="text-sm text-gray-500 flex items-center gap-1 mb-4">
         <ArrowLeft className="h-4 w-4" /> 返回投稿队列
       </button>

public-frontend/src/App.tsx

@@ -1,9 +1,10 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Boxes, Search, PlusCircle, Code2 } from "lucide-react";
 import Home from "./components/Home";
 import ProductView from "./components/ProductView";
 import Contribute from "./components/Contribute";
 import ApiDocs from "./components/ApiDocs";
+import { api } from "./api";
 
 type View =
   | { name: "home" }
@@ -13,6 +14,14 @@ type View =
 
 export default function App() {
   const [view, setView] = useState<View>({ name: "home" });
+  const [qualified, setQualified] = useState<number | null>(null);
+
+  useEffect(() => {
+    api
+      .stats()
+      .then((s) => setQualified(s.qualified))
+      .catch(() => setQualified(null));
+  }, []);
 
   return (
     <div className="min-h-full flex flex-col">
@@ -72,9 +81,17 @@ export default function App() {
       </main>
 
       <footer className="border-t bg-white">
-        <div className="max-w-5xl mx-auto px-4 py-4 text-xs text-gray-400 leading-relaxed">
+        <div className="max-w-5xl mx-auto px-4 py-4 text-xs text-gray-400 leading-relaxed text-center">
-          天工商品档案公共仓 是公益性「商品事实库」，仅收录客观商品信息（条码、品牌、品类、营养、官方建议零售价快照等），不含任何购买/交易功能。
+          {qualified != null && (
-          公众投稿须经人工审核后方可收纳。
+            <div className="mb-2 text-gray-500">
+              目前已收录
+              <span className="mx-1 font-semibold text-emerald-600">
+                {qualified.toLocaleString()}
+              </span>
+              条合格商品档案
+            </div>
+          )}
+          天工是一个公益性商品档案库。主要收录商品名称，条码，品类，配料等官方快照。不涉及任何交易行为。
           <button onClick={() => setView({ name: "api" })} className="ml-1 text-emerald-600 hover:underline">
             API 调用说明
           </button>

public-frontend/src/components/Home.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { Search, PlusCircle, Code2 } from "lucide-react";
 import { api } from "../api";
 import type { ProductSummary } from "../types";
@@ -13,31 +13,18 @@ export default function Home({
   onApi: () => void;
 }) {
   const [q, setQ] = useState("");
-  const [brand, setBrand] = useState("");
-  const [country, setCountry] = useState("");
   const [items, setItems] = useState<ProductSummary[]>([]);
   const [total, setTotal] = useState(0);
   const [searched, setSearched] = useState(false);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
-  const [qualified, setQualified] = useState<number | null>(null);
-
-  useEffect(() => {
-    api
-      .stats()
-      .then((s) => setQualified(s.qualified))
-      .catch(() => setQualified(null));
-  }, []);
 
   async function run(e?: React.FormEvent) {
     e?.preventDefault();
     setLoading(true);
     setError("");
     try {
-      const res = await api.search(q.trim(), 1, 30, {
+      const res = await api.search(q.trim(), 1, 30);
-        brand: brand.trim() || undefined,
-        country: country.trim() || undefined,
-      });
       setItems(res.items);
       setTotal(res.total);
       setSearched(true);
@@ -55,15 +42,6 @@ export default function Home({
         <p className="mt-2 text-gray-500">
           输入商品名称或条码，检索客观、可溯源的商品资料。人人可查，人人可贡献。
         </p>
-        {qualified != null && (
-          <p className="mt-3 text-sm text-gray-500">
-            目前已收录
-            <span className="mx-1 font-semibold text-emerald-600">
-              {qualified.toLocaleString()}
-            </span>
-            条合格商品档案
-          </p>
-        )}
         <form onSubmit={run} className="mt-6 max-w-2xl mx-auto flex gap-2">
           <div className="flex-1 flex items-center gap-2 bg-white border rounded-lg px-3 shadow-sm focus-within:ring-2 focus-within:ring-emerald-400">
             <Search className="w-5 h-5 text-gray-400" />
@@ -83,20 +61,6 @@ export default function Home({
             {loading ? "检索中…" : "检索"}
           </button>
         </form>
-        <div className="mt-3 max-w-2xl mx-auto flex flex-wrap items-center justify-center gap-2 text-sm">
-          <input
-            value={brand}
-            onChange={(e) => setBrand(e.target.value)}
-            placeholder="按品牌筛选（如 Ferrero）"
-            className="flex-1 min-w-[14rem] bg-white border rounded-lg px-3 py-2 outline-none focus:ring-2 focus:ring-emerald-300"
-          />
-          <input
-            value={country}
-            onChange={(e) => setCountry(e.target.value)}
-            placeholder="按产地筛选（如 China）"
-            className="flex-1 min-w-[14rem] bg-white border rounded-lg px-3 py-2 outline-none focus:ring-2 focus:ring-emerald-300"
-          />
-        </div>
         <button
           onClick={onApi}
           className="mt-4 inline-flex items-center gap-1.5 text-sm text-emerald-700 hover:underline"