add pagination

ui/src/pages/DashboardLayout.tsx

@@ -22,6 +22,7 @@ import { cn } from "@/lib/utils";
 import { ConfigProvider } from "@/providers/config";
 import { getPb } from "@/repository/api";
 import { ThemeToggle } from "@/components/ThemeToggle";
+import { Separator } from "@/components/ui/separator";
 
 export default function Dashboard() {
   const navigate = useNavigate();
@@ -184,12 +185,16 @@ export default function Dashboard() {
 
               <div className="fixed right-0 bottom-0 w-full flex justify-between p-5">
                 <div className=""></div>
-                <div className="text-muted-foreground text-sm hover:text-stone-900 dark:hover:text-stone-200">
+                <div className="text-muted-foreground text-sm hover:text-stone-900 dark:hover:text-stone-200 flex">
+                  <a href="https://docs.certimate.me" target="_blank">
+                    文档
+                  </a>
+                  <Separator orientation="vertical" className="mx-2" />
                   <a
                     href="https://github.com/usual2970/certimate/releases"
                     target="_blank"
                   >
-                    Certimate v0.0.10
+                    Certimate v0.0.14
                   </a>
                 </div>
               </div>

ui/src/pages/access/Access.tsx

@@ -1,4 +1,5 @@
 import { AccessEdit } from "@/components/certimate/AccessEdit";
+import XPagination from "@/components/certimate/XPagination";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
 import { Access as AccessType, accessTypeMap } from "@/domain/access";
@@ -6,11 +7,25 @@ import { convertZulu2Beijing } from "@/lib/time";
 import { useConfig } from "@/providers/config";
 import { remove } from "@/repository/access";
 import { Key } from "lucide-react";
+import { useLocation, useNavigate } from "react-router-dom";
 
 const Access = () => {
   const { config, deleteAccess } = useConfig();
   const { accesses } = config;
 
+  const perPage = 10;
+
+  const totalPages = Math.ceil(accesses.length / perPage);
+
+  const navigate = useNavigate();
+  const location = useLocation();
+  const query = new URLSearchParams(location.search);
+  const page = query.get("page");
+  const pageNumber = page ? Number(page) : 1;
+
+  const startIndex = (pageNumber - 1) * perPage;
+  const endIndex = startIndex + perPage;
+
   const handleDelete = async (data: AccessType) => {
     const rs = await remove(data);
     deleteAccess(rs.id);
@@ -50,7 +65,7 @@ const Access = () => {
           <div className="sm:hidden flex text-sm text-muted-foreground">
             授权列表
           </div>
-          {accesses.map((access) => (
+          {accesses.slice(startIndex, endIndex).map((access) => (
             <div
               className="flex flex-col sm:flex-row text-secondary-foreground border-b dark:border-stone-500 sm:p-2 hover:bg-muted/50 text-sm"
               key={access.id}
@@ -95,6 +110,14 @@ const Access = () => {
               </div>
             </div>
           ))}
+          <XPagination
+            totalPages={totalPages}
+            currentPage={pageNumber}
+            onPageChange={(page) => {
+              query.set("page", page.toString());
+              navigate({ search: query.toString() });
+            }}
+          />
         </>
       )}
     </div>

ui/src/pages/domains/Home.tsx

@@ -1,5 +1,5 @@
 import DeployProgress from "@/components/certimate/DeployProgress";
-import Pagination from "@/components/certimate/Pagination";
+import XPagination from "@/components/certimate/XPagination";
 import Show from "@/components/Show";
 import {
   AlertDialogAction,
@@ -33,16 +33,28 @@ import {
 import { TooltipContent, TooltipProvider } from "@radix-ui/react-tooltip";
 import { CircleCheck, CircleX, Earth } from "lucide-react";
 import { useEffect, useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 
 const Home = () => {
   const toast = useToast();
 
   const navigate = useNavigate();
+
+  const location = useLocation();
+  const query = new URLSearchParams(location.search);
+  const page = query.get("page");
+
+  const [totalPage, setTotalPage] = useState(0);
+
   const handleCreateClick = () => {
     navigate("/edit");
   };
 
+  const setPage = (newPage: number) => {
+    query.set("page", newPage.toString());
+    navigate(`?${query.toString()}`);
+  };
+
   const handleEditClick = (id: string) => {
     navigate(`/edit?id=${id}`);
   };
@@ -64,11 +76,16 @@ const Home = () => {
 
   useEffect(() => {
     const fetchData = async () => {
-      const data = await list();
-      setDomains(data);
+      const data = await list({
+        page: page ? Number(page) : 1,
+        perPage: 10,
+      });
+
+      setDomains(data.items);
+      setTotalPage(data.totalPages);
     };
     fetchData();
-  }, []);
+  }, [page]);
 
   const handelCheckedChange = async (id: string) => {
     const checkedDomains = domains.filter((domain) => domain.id === id);
@@ -325,11 +342,11 @@ const Home = () => {
               </div>
             ))}
 
-            <Pagination
-              totalPages={1000}
-              currentPage={3}
+            <XPagination
+              totalPages={totalPage}
+              currentPage={page ? Number(page) : 1}
               onPageChange={(page) => {
-                console.log(page);
+                setPage(page);
               }}
             />
           </>