feat(admin): 商品列表底部增加每页数量与跳页控制

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

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/ProductList.tsx

@@ -32,7 +32,8 @@ export default function ProductList({
   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);
@@ -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

@@ -81,7 +81,7 @@ 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">
               目前已收录
@@ -91,8 +91,7 @@ export default function App() {
               条合格商品档案
             </div>
           )}
-          天工商品档案公共仓 是公益性「商品事实库」，仅收录客观商品信息（条码、品牌、品类、营养、官方建议零售价快照等），不含任何购买/交易功能。
+          天工是一个公益性商品档案库。主要收录商品名称，条码，品类，配料等官方快照。不涉及任何交易行为。
-          公众投稿须经人工审核后方可收纳。
           <button onClick={() => setView({ name: "api" })} className="ml-1 text-emerald-600 hover:underline">
             API 调用说明
           </button>