feat(table): custom pagesize

app/project/detail/TaskTableContainer.tsx

@@ -24,6 +24,7 @@ import {
   Collapse,
   Flex,
   Group,
+  Modal,
   MultiSelect,
   Select,
   SimpleGrid,
@@ -73,6 +74,8 @@ function createInitialFilters(): FilterFormRecord {
   }
 }
 
+const DEFAULT_RECORDS_PER_PAGE_OPTIONS = [10, 15, 20]
+
 export interface selectedDataProps {
   status: number
   uid: number | null
@@ -148,6 +151,12 @@ export default function TaskTableContainer(props: {
 
   const [pageNumber, setPageNumber] = useState(1)
   const [pageSize, setPageSize] = useState(15)
+  const [recordsPerPageOptions, setRecordsPerPageOptions] = useState<number[]>(
+    () => [...DEFAULT_RECORDS_PER_PAGE_OPTIONS]
+  )
+  const [customPageSizeInput, setCustomPageSizeInput] = useState("")
+  const [customPageSizeModalOpened, setCustomPageSizeModalOpened] =
+    useState(false)
 
   const [searchExpanded, setSearchExpanded] = useState(false)
 
@@ -259,6 +268,53 @@ export default function TaskTableContainer(props: {
     })
   }, [])
 
+  const openCustomPageSizeModal = useCallback(() => {
+    setCustomPageSizeModalOpened(true)
+  }, [])
+
+  const closeCustomPageSizeModal = useCallback(() => {
+    setCustomPageSizeModalOpened(false)
+    setCustomPageSizeInput("")
+  }, [])
+
+  const handleAddCustomPageSize = useCallback(() => {
+    const rawValue = customPageSizeInput.trim()
+    if (!rawValue) return
+    const size = Number(rawValue)
+    if (!Number.isInteger(size) || size <= 0) {
+      notifications.show({
+        color: "red",
+        title: "输入无效",
+        message: "请填写大于 0 的整数条数",
+      })
+      return
+    }
+    if (recordsPerPageOptions.includes(size)) {
+      notifications.show({
+        color: "blue",
+        title: "已存在",
+        message: `每页 ${size} 条已在可选项中`,
+      })
+      return
+    }
+    setRecordsPerPageOptions((prev) => [...prev, size].sort((a, b) => a - b))
+    closeCustomPageSizeModal()
+    notifications.show({
+      color: "green",
+      title: "添加成功",
+      message: `已新增每页 ${size} 条`,
+    })
+  }, [closeCustomPageSizeModal, customPageSizeInput, recordsPerPageOptions])
+
+  const handleCustomPageSizeEnter = useCallback(
+    (event: React.KeyboardEvent<HTMLInputElement>) => {
+      if (event.key !== "Enter") return
+      event.preventDefault()
+      handleAddCustomPageSize()
+    },
+    [handleAddCustomPageSize]
+  )
+
   const clickDispatchTask = () => {
     if (!selectedRecords.length) {
       notifications.show({
@@ -992,12 +1048,58 @@ export default function TaskTableContainer(props: {
               }}
               selectedRecords={selectedRecords}
               onSelectedRecordsChange={setSelectedRecords}
-              recordsPerPageOptions={[10, 15, 20]}
+              recordsPerPageOptions={recordsPerPageOptions}
+              renderPagination={({ Controls }) => (
+                <Group
+                  justify="space-between"
+                  align="center"
+                  w="100%"
+                  gap="sm"
+                  wrap="wrap">
+                  <Group gap="xs" align="center" wrap="wrap">
+                    <Controls.Text />
+                    <Controls.PageSizeSelector />
+                    <Button
+                      variant="light"
+                      color="gray"
+                      size="xs"
+                      onClick={openCustomPageSizeModal}>
+                      自定义每页条数
+                    </Button>
+                  </Group>
+                  <Controls.Pagination />
+                </Group>
+              )}
             />
           </Stack>
         </SettingContentPanel>
       </Stack>
 
+      <Modal
+        opened={customPageSizeModalOpened}
+        onClose={closeCustomPageSizeModal}
+        title="添加每页条数"
+        centered>
+        <Stack gap="sm">
+          <TextInput
+            data-autofocus
+            label="每页条数"
+            placeholder="请输入大于 0 的整数，例如 99"
+            value={customPageSizeInput}
+            onChange={(event) =>
+              setCustomPageSizeInput(event.currentTarget.value)
+            }
+            onKeyDown={handleCustomPageSizeEnter}
+          />
+          <Group justify="flex-end">
+            <Button variant="default" onClick={closeCustomPageSizeModal}>
+              取消
+            </Button>
+            <Button onClick={handleAddCustomPageSize}>添加</Button>
+          </Group>
+        </Stack>
+      </Modal>
+
       <WorkflowModal
         opened={workflowTaskId !== null}
         taskId={workflowTaskId}