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,7 +85,6 @@ export const Component: React.FC = () => {
 
   return (
     <DndProvider backend={HTML5Backend}>
-      <ConfigProvider theme={theme}>
       <Background />
       <div className={styles.layout} style={{ width: "100%" }}>
         <div className={styles.sider}>
@@ -132,7 +122,6 @@ export const Component: React.FC = () => {
           </div>
         </div>
       </div>
-      </ConfigProvider>
     </DndProvider>
   );
 };
@@ -257,6 +246,10 @@ const Search: React.FC = () => {
     setSearchResult(() => result);
   };
 
+  useEffect(() => {
+    handleSearch();
+  }, []);
+
   const [_, dropRef] = useDrop({
     accept: ["Card"], // 指明该区域允许接收的拖放物。可以是单个，也可以是数组
     // 里面的值就是useDrag所定义的type
@@ -422,9 +415,22 @@ 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) => (
+        {currentData.map((card) => (
           <Card
             value={card}
             key={card.id}
@@ -433,6 +439,17 @@ const SearchResults: React.FC<{
           />
         ))}
       </div>
+      <div style={{ textAlign: "center", padding: "10px 0 20px" }}>
+        <Pagination
+          current={currentPage}
+          onChange={(page) => setCurrentPage(page)}
+          total={results.length}
+          showSizeChanger={false}
+          showLessItems
+          hideOnSinglePage
+        />
+      </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",
+    },
   },
 };