选页器支持跳转指定页数

src/components/Paginator.tsx

@@ -1,7 +1,18 @@
-import { Button, HStack, IconButton } from "@hope-ui/solid"
+import {
+  Button,
+  HStack,
+  IconButton,
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverContent,
+  PopoverTrigger,
+  createDisclosure,
+} from "@hope-ui/solid"
 import { createMemo, For, mergeProps, Show } from "solid-js"
 import { createStore } from "solid-js/store"
 import { FaSolidAngleLeft, FaSolidAngleRight } from "solid-icons/fa"
+import { TbSelector } from "solid-icons/tb"
 
 export interface PaginatorProps {
   colorScheme?:
@@ -54,6 +65,9 @@ export const Paginator = (props: PaginatorProps) => {
     )
     return Array.from({ length: max - current }, (_, i) => current + 1 + i)
   })
+  const allPages = createMemo(() => {
+    return Array.from({ length: pages() }, (_, i) => 1 + i)
+  })
   const size = {
     "@initial": "sm",
     "@md": "md",
@@ -62,6 +76,12 @@ export const Paginator = (props: PaginatorProps) => {
     setStore("current", page)
     merged.onChange?.(page)
   }
+  const { isOpen, onClose, onOpen } = createDisclosure()
+  const popoverTriggerProps = {
+    rightIcon: <TbSelector />,
+    iconSpacing: "0",
+  }
+
   return (
     <Show when={!merged.hideOnSinglePage || pages() > 1}>
       <HStack spacing="$1">
@@ -101,14 +121,52 @@ export const Paginator = (props: PaginatorProps) => {
             </Button>
           )}
         </For>
-        <Button
-          size={size}
-          colorScheme={merged.colorScheme}
-          variant="solid"
-          px={store.current > 10 ? "$2_5" : "$3"}
+
+        <Popover
+          closeDelay={0}
+          opened={isOpen()}
+          onClose={onClose}
+          onOpen={pages() > merged.maxShowPage ? onOpen : undefined}
         >
-          {store.current}
-        </Button>
+          <PopoverTrigger
+            as={Button}
+            size={size}
+            colorScheme={merged.colorScheme}
+            variant="solid"
+            px={store.current > 10 ? "$2_5" : "$3"}
+            {...(pages() > merged.maxShowPage
+              ? popoverTriggerProps
+              : undefined)}
+          >
+            {store.current}
+          </PopoverTrigger>
+          <PopoverContent maxW="min(88%, 850px)" w="auto" rounded="$lg">
+            <PopoverArrow />
+            <PopoverBody>
+              <For each={allPages()}>
+                {(page) => {
+                  return (
+                    <Button
+                      m="$0_5"
+                      size={size}
+                      variant={page == store.current ? "solid" : "subtle"}
+                      px={page > 10 ? "$2_5" : "$3"}
+                      onClick={() => {
+                        onClose()
+                        if (page !== store.current) {
+                          onPageChange(page)
+                        }
+                      }}
+                    >
+                      {page}
+                    </Button>
+                  )
+                }}
+              </For>
+            </PopoverBody>
+          </PopoverContent>
+        </Popover>
+
         <For each={rightPages()}>
           {(page) => (
             <Button

src/pages/manage/common/DeletePopover.tsx

@@ -24,7 +24,7 @@ export const DeletePopover = (props: DeletePopoverProps) => {
           <PopoverTrigger as={Button} colorScheme="danger">
             {t("global.delete")}
           </PopoverTrigger>
-          <PopoverContent>
+          <PopoverContent rounded="$lg">
             <PopoverArrow />
             <PopoverHeader>
               {t("global.delete_confirm", {

src/pages/manage/tasks/Task.tsx

@@ -15,7 +15,7 @@ import { PEmptyResp, TaskInfo } from "~/types"
 import { handleResp, notify, r } from "~/utils"
 import { TasksProps } from "./Tasks"
 
-enum TaskStateEnum {
+export enum TaskStateEnum {
   Pending,
   Running,
   Succeeded,

src/pages/manage/tasks/Tasks.tsx

@@ -4,7 +4,7 @@ import { Paginator } from "~/components"
 import { useFetch, useT } from "~/hooks"
 import { PEmptyResp, PResp, TaskInfo } from "~/types"
 import { handleResp, r } from "~/utils"
-import { Task } from "./Task"
+import { Task, TaskStateEnum } from "./Task"
 
 export interface TasksProps {
   type: string
@@ -17,24 +17,23 @@ export const Tasks = (props: TasksProps) => {
     (): PResp<TaskInfo[]> => r.get(`/admin/task/${props.type}/${props.done}`),
   )
   const [tasks, setTasks] = createSignal<TaskInfo[]>([])
+  let compareFn: (a: TaskInfo, b: TaskInfo) => number
   const refresh = async () => {
     const resp = await get()
-    handleResp(resp, (data) =>
-      setTasks(
-        data?.sort((a, b) => {
-          if (a.id > b.id) {
-            return 1
-          }
-          return -1
-        }) ?? [],
-      ),
-    )
+    handleResp(resp, (data) => setTasks(data?.sort(compareFn) ?? []))
   }
-  refresh()
   if (props.done === "undone") {
+    compareFn = (a, b) => {
+      if (a.state === b.state) return a.id > b.id ? 1 : -1
+      if (a.state == TaskStateEnum.Pending) return 1
+      if (b.state == TaskStateEnum.Pending) return -1
+      return a.state > b.state ? 1 : -1
+    }
+
     const interval = setInterval(refresh, 2000)
     onCleanup(() => clearInterval(interval))
-  }
+  } else compareFn = (a, b) => (a.id > b.id ? 1 : -1)
+  refresh()
   const [clearDoneLoading, clearDone] = useFetch(
     (): PEmptyResp => r.post(`/admin/task/${props.type}/clear_done`),
   )