add pagination

src/ui/BuildDeck/DeckDatabase/CardResults/index.tsx

@@ -88,7 +88,7 @@ export const CardResults: React.FC<{
             ))}
           </div>
           {results.length > itemsPerPage && (
-            <div style={{ textAlign: "center", padding: "10px 0 20px" }}>
+            <div style={{ textAlign: "center", padding: "0.625rem 0 1.25rem" }}>
               <Pagination
                 current={currentPage}
                 onChange={(page) => {

src/ui/BuildDeck/DeckDatabase/DeckResults/index.module.scss

+.container {
+}
+
 .empty {
   gap: 1.25rem;
   width: 100%;

src/ui/BuildDeck/DeckDatabase/DeckResults/index.tsx

+import { message, Pagination } from "antd";
 import React, { memo, useEffect } from "react";
 import { proxy, useSnapshot } from "valtio";
 
@@ -11,13 +12,14 @@ interface Props {
   query: string;
   page: number;
   decks: MdproDeck[];
-  pages: number;
+  total: number;
 }
 
 // TODO: useConfig
 const PAGE_SIZE = 20;
+const SORT_LIKE = true;
 
-const store = proxy<Props>({ query: "", page: 1, decks: [], pages: 0 });
+const store = proxy<Props>({ query: "", page: 1, decks: [], total: 0 });
 
 export const DeckResults: React.FC = memo(() => {
   const snap = useSnapshot(store);
@@ -28,12 +30,12 @@ export const DeckResults: React.FC = memo(() => {
         page: snap.page,
         size: PAGE_SIZE,
         keyWord: snap.query !== "" ? snap.query : undefined,
-        sortLike: true,
+        sortLike: SORT_LIKE,
       });
 
       if (resp?.data) {
-        const { pages, records: newDecks } = resp.data;
-        store.pages = pages;
+        const { total, records: newDecks } = resp.data;
+        store.total = total;
         store.decks = newDecks;
       } else {
         store.decks = [];
@@ -43,10 +45,41 @@ export const DeckResults: React.FC = memo(() => {
     update();
   }, [snap.query, snap.page]);
 
+  const onchangePage = async (page: number) => {
+    const resp = await pullDecks({
+      page,
+      size: PAGE_SIZE,
+      keyWord: store.query !== "" ? store.query : undefined,
+      sortLike: SORT_LIKE,
+    });
+
+    console.log(resp);
+
+    if (resp?.data) {
+      const { current, total, records } = resp.data;
+      store.page = current;
+      store.total = total;
+      store.decks = records;
+    } else {
+      message.error("翻页失败，请检查您的网络状况。");
+    }
+  };
+
   return (
     <>
       {snap.decks.length ? (
-        <div></div>
+        <div className={styles.container}>
+          <div style={{ textAlign: "center", padding: "0.625rem 0 1.25rem" }}>
+            <Pagination
+              current={snap.page}
+              onChange={onchangePage}
+              total={snap.total}
+              pageSize={PAGE_SIZE}
+              showLessItems
+              hideOnSinglePage
+            />
+          </div>
+        </div>
       ) : (
         <div className={styles.empty}>
           <IconFont type="icon-empty" size={40} />