fix(table): pagesize

app/person/dashboard/components/PersonalProjectTable.tsx

@@ -2,8 +2,17 @@
 
 import { getPersonProjectDashBoard } from "@/components/label/api/project"
 import { Project } from "@/components/label/api/project/typing"
-import { Button, Flex, Group, Text } from "@mantine/core"
+import {
+  Button,
+  Flex,
+  Group,
+  Modal,
+  Stack,
+  Text,
+  TextInput,
+} from "@mantine/core"
 import { DatePickerInput, type DatesRangeValue } from "@mantine/dates"
+import { notifications } from "@mantine/notifications"
 
 import { IconRefresh } from "@tabler/icons-react"
 import dayjs from "dayjs"
@@ -39,6 +48,8 @@ function createInitialFilters(): FilterFormRecord {
   }
 }
 
+const DEFAULT_RECORDS_PER_PAGE_OPTIONS = [10, 15, 20, 50]
+
 export default function PersonalProjectTable() {
   const router = useRouter()
   const [records, setRecords] = useState<
@@ -48,6 +59,12 @@ export default function PersonalProjectTable() {
 
   const [page, setPage] = useState(1)
   const [pageSize, setPageSize] = useState(50)
+  const [recordsPerPageOptions, setRecordsPerPageOptions] = useState<number[]>(
+    () => [...DEFAULT_RECORDS_PER_PAGE_OPTIONS]
+  )
+  const [customPageSizeInput, setCustomPageSizeInput] = useState("")
+  const [customPageSizeModalOpened, setCustomPageSizeModalOpened] =
+    useState(false)
   const [totalItems, setTotalItems] = useState(0)
 
   const [filters, setFilters] = useState(() => createInitialFilters())
@@ -112,6 +129,53 @@ export default function PersonalProjectTable() {
 
   const [currentRowId, setCurrentRowId] = useState<number>(0)
 
+  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 originColumn = useMemo(() => {
     let column: DataTableColumn<Project.PersonProjectDashboardResponseItem>[] =
       [
@@ -267,7 +331,7 @@ export default function PersonalProjectTable() {
           scrollAreaProps={{ type: "auto" }}
           records={pageRecords}
           onRecordsPerPageChange={setPageSize}
-          recordsPerPageOptions={[10, 15, 20]}
+          recordsPerPageOptions={recordsPerPageOptions}
           columns={originColumn}
           totalRecords={totalItems}
           recordsPerPage={pageSize}
@@ -275,8 +339,53 @@ export default function PersonalProjectTable() {
           onPageChange={setPage}
           noRecordsText="暂无数据"
           recordsPerPageLabel="当前页数"
+          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>
+          )}
         />
       </Group>
+      <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>
     </Group>
   )
 }