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>
   );