feat: simple pagination

src/ui/BuildDeck/index.tsx

@@ -10,12 +10,11 @@ import {
 import {
   App,
   Button,
-  ConfigProvider,
   Dropdown,
   Input,
   type MenuProps,
+  Pagination,
   Space,
-  type ThemeConfig,
 } from "antd";
 import classNames from "classnames";
 import { isEqual } from "lodash-es";
@@ -45,14 +44,6 @@ import { Filter } from "./Filter";
 import styles from "./index.module.scss";
 import { editingDeckToIDeck, iDeckToEditingDeck, type Type } from "./utils";
 
-const theme: ThemeConfig = {
-  components: {
-    Layout: {
-      colorBgBody: "transparent",
-    },
-  },
-};
-
 export const loader: LoaderFunction = async () => {
   // 必须先加载卡组，不然页面会崩溃
   if (!initStore.decks) {
@@ -94,45 +85,43 @@ export const Component: React.FC = () => {
 
   return (
     <DndProvider backend={HTML5Backend}>
-      <ConfigProvider theme={theme}>
-        <Background />
-        <div className={styles.layout} style={{ width: "100%" }}>
-          <div className={styles.sider}>
-            <ScrollableArea className={styles["deck-select-container"]}>
-              <DeckSelect
-                decks={snapDecks.decks}
-                selected={selectedDeck.deckName}
-                onSelect={(name) =>
-                  setSelectedDeck(deckStore.get(name) ?? deckStore.decks[0])
-                }
-                onDelete={(id) => console.log(id)}
-                onDownload={(id) => console.log(id)}
-                onAdd={() => console.log("add")}
-              />
-            </ScrollableArea>
-            <CardDetail code={123} open={false} onClose={() => {}} />
+      <Background />
+      <div className={styles.layout} style={{ width: "100%" }}>
+        <div className={styles.sider}>
+          <ScrollableArea className={styles["deck-select-container"]}>
+            <DeckSelect
+              decks={snapDecks.decks}
+              selected={selectedDeck.deckName}
+              onSelect={(name) =>
+                setSelectedDeck(deckStore.get(name) ?? deckStore.decks[0])
+              }
+              onDelete={(id) => console.log(id)}
+              onDownload={(id) => console.log(id)}
+              onAdd={() => console.log("add")}
+            />
+          </ScrollableArea>
+          <CardDetail code={123} open={false} onClose={() => {}} />
+        </div>
+        <div className={styles.content}>
+          <div className={styles.deck}>
+            <DeckEditor
+              deck={selectedDeck}
+              onClear={editDeckStore.clear}
+              onReset={handleDeckEditorReset}
+              onSave={handleDeckEditorSave}
+            />
           </div>
-          <div className={styles.content}>
-            <div className={styles.deck}>
-              <DeckEditor
-                deck={selectedDeck}
-                onClear={editDeckStore.clear}
-                onReset={handleDeckEditorReset}
-                onSave={handleDeckEditorSave}
-              />
-            </div>
-            <div className={styles.select}>
-              {sqlite.progress === 1 ? (
-                <Search />
-              ) : (
-                <div className={styles.container}>
-                  <Loading />
-                </div>
-              )}
-            </div>
+          <div className={styles.select}>
+            {sqlite.progress === 1 ? (
+              <Search />
+            ) : (
+              <div className={styles.container}>
+                <Loading />
+              </div>
+            )}
           </div>
         </div>
-      </ConfigProvider>
+      </div>
     </DndProvider>
   );
 };
@@ -257,6 +246,10 @@ const Search: React.FC = () => {
     setSearchResult(() => result);
   };
 
+  useEffect(() => {
+    handleSearch();
+  }, []);
+
   const [_, dropRef] = useDrop({
     accept: ["Card"], // 指明该区域允许接收的拖放物。可以是单个，也可以是数组
     // 里面的值就是useDrag所定义的type
@@ -422,17 +415,41 @@ const SearchResults: React.FC<{
     const type = isExtraDeckCard(card.data.type ?? 0) ? "extra" : "main";
     editDeckStore.canAdd(card, type).result && editDeckStore.add(type, card);
   };
+
+  const itemsPerPage = 200; // 每页显示的数据数量
+  const [currentPage, setCurrentPage] = useState(1);
+
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [results]);
+
+  const startIndex = (currentPage - 1) * itemsPerPage;
+  const endIndex = startIndex + itemsPerPage;
+  const currentData = results.slice(startIndex, endIndex);
+
   return (
-    <div className={styles["search-cards"]}>
-      {results.map((card) => (
-        <Card
-          value={card}
-          key={card.id}
-          source="search"
-          onClick={() => handleClick(card)}
+    <>
+      <div className={styles["search-cards"]}>
+        {currentData.map((card) => (
+          <Card
+            value={card}
+            key={card.id}
+            source="search"
+            onClick={() => handleClick(card)}
+          />
+        ))}
+      </div>
+      <div style={{ textAlign: "center", padding: "10px 0 20px" }}>
+        <Pagination
+          current={currentPage}
+          onChange={(page) => setCurrentPage(page)}
+          total={results.length}
+          showSizeChanger={false}
+          showLessItems
+          hideOnSinglePage
         />
-      ))}
-    </div>
+      </div>
+    </>
   );
 });
 

src/ui/theme.ts

@@ -34,5 +34,12 @@ export const theme: ThemeConfig = {
       boxShadow:
         "0 6px 16px 0 rgb(51 51 51 / 80%), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)",
     },
+    Pagination: {
+      lineWidth: 0,
+      colorBgContainer: "hsla(0, 0%, 100%, 0.05)",
+    },
+    Layout: {
+      colorBgBody: "transparent",
+    },
   },
 };