feat(page): size

app/person/dashboard/components/PersonalProjectTable.tsx

@@ -5,10 +5,11 @@ import { Project } from "@/components/label/api/project/typing"
 import {
   SettingDataTable,
   SettingListHeader,
+  SettingCustomPageSizeControl,
+  usePersistentPageSizeOptions,
 } from "@/components/setting/PageSurface"
-import { Button, Group, Modal, Stack, Text, TextInput } from "@mantine/core"
+import { Button, Group, Stack, Text } from "@mantine/core"
 import { DatePickerInput, type DatesRangeValue } from "@mantine/dates"
-import { notifications } from "@mantine/notifications"
 
 import { IconRefresh, IconSearch } from "@tabler/icons-react"
 import dayjs from "dayjs"
@@ -66,12 +67,12 @@ export default function PersonalProjectTable() {
 
   const [page, setPage] = useState(1)
   const [pageSize, setPageSize] = useState(10)
-  const [recordsPerPageOptions, setRecordsPerPageOptions] = useState<number[]>(
-    () => [...DEFAULT_RECORDS_PER_PAGE_OPTIONS]
-  )
-  const [customPageSizeInput, setCustomPageSizeInput] = useState("")
-  const [customPageSizeModalOpened, setCustomPageSizeModalOpened] =
-    useState(false)
+  const {
+    recordsPerPageOptions,
+    addCustomPageSize,
+    clearCustomPageSizeCache,
+    hasCustomPageSizeCache,
+  } = usePersistentPageSizeOptions(DEFAULT_RECORDS_PER_PAGE_OPTIONS, pageSize)
   const [totalItems, setTotalItems] = useState(0)
 
   const [filters, setFilters] = useState(() => createInitialFilters())
@@ -138,53 +139,6 @@ export default function PersonalProjectTable() {
     if (page > totalPages) setPage(totalPages)
   }, [page, totalPages])
 
-  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>[] =
       [
@@ -329,44 +283,19 @@ export default function PersonalProjectTable() {
               <Group gap="xs" align="center" wrap="wrap">
                 <Controls.Text />
                 <Controls.PageSizeSelector />
-                <Button
-                  variant="default"
-                  size="sm"
-                  onClick={openCustomPageSizeModal}>
-                  自定义每页条数
-                </Button>
+                <SettingCustomPageSizeControl
+                  addCustomPageSize={addCustomPageSize}
+                  clearCustomPageSizeCache={clearCustomPageSizeCache}
+                  hasCustomPageSizeCache={hasCustomPageSizeCache}
+                  triggerButtonProps={{ variant: "default", size: "sm" }}
+                  confirmButtonProps={{ color: "#1874ff" }}
+                />
               </Group>
               <Controls.Pagination />
             </Group>
           )}
         />
       </div>
-      <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 color="#1874ff" onClick={handleAddCustomPageSize}>
-              添加
-            </Button>
-          </Group>
-        </Stack>
-      </Modal>
     </Stack>
   )
 }

app/person/dashboard/components/PersonalTaskTable.tsx

@@ -11,17 +11,10 @@ import {
   SettingDataTable,
   SettingHeaderActions,
   SettingListHeader,
+  SettingCustomPageSizeControl,
+  usePersistentPageSizeOptions,
 } from "@/components/setting/PageSurface"
-import {
-  Button,
-  Group,
-  Modal,
-  Stack,
-  Text,
-  TextInput,
-  UnstyledButton,
-} from "@mantine/core"
-import { notifications } from "@mantine/notifications"
+import { Button, Group, Stack, Text, UnstyledButton } from "@mantine/core"
 import { IconRefresh } from "@tabler/icons-react"
 import { DataTableColumn } from "mantine-datatable"
 import { useCallback, useEffect, useMemo, useState } from "react"
@@ -35,12 +28,12 @@ export default function PersonalTaskTable() {
 
   const [page, setPage] = useState(1)
   const [pageSize, setPageSize] = useState(10)
-  const [recordsPerPageOptions, setRecordsPerPageOptions] = useState<number[]>(
-    () => [...DEFAULT_RECORDS_PER_PAGE_OPTIONS]
-  )
-  const [customPageSizeInput, setCustomPageSizeInput] = useState("")
-  const [customPageSizeModalOpened, setCustomPageSizeModalOpened] =
-    useState(false)
+  const {
+    recordsPerPageOptions,
+    addCustomPageSize,
+    clearCustomPageSizeCache,
+    hasCustomPageSizeCache,
+  } = usePersistentPageSizeOptions(DEFAULT_RECORDS_PER_PAGE_OPTIONS, pageSize)
   const [totalItems, setTotalItems] = useState(0)
   const [records, setRecords] = useState<Task.SimpleTaskItem[]>([])
   const [loading, setLoading] = useState(false)
@@ -79,53 +72,6 @@ export default function PersonalTaskTable() {
 
   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<Task.SimpleTaskItem>[] = [
       {
@@ -287,44 +233,19 @@ export default function PersonalTaskTable() {
               <Group gap="xs" align="center" wrap="wrap">
                 <Controls.Text />
                 <Controls.PageSizeSelector />
-                <Button
-                  variant="default"
-                  size="sm"
-                  onClick={openCustomPageSizeModal}>
-                  自定义每页条数
-                </Button>
+                <SettingCustomPageSizeControl
+                  addCustomPageSize={addCustomPageSize}
+                  clearCustomPageSizeCache={clearCustomPageSizeCache}
+                  hasCustomPageSizeCache={hasCustomPageSizeCache}
+                  triggerButtonProps={{ variant: "default", size: "sm" }}
+                  confirmButtonProps={{ color: "#1874ff" }}
+                />
               </Group>
               <Controls.Pagination />
             </Group>
           )}
         />
       </div>
-      <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 color="#1874ff" onClick={handleAddCustomPageSize}>
-              添加
-            </Button>
-          </Group>
-        </Stack>
-      </Modal>
     </Stack>
   )
 }

app/person/report/page.tsx

@@ -9,24 +9,24 @@ import { getSelfProjectList } from "@/components/label/api/project"
 import { useAllUserStore } from "@/components/label/store/auth"
 import {
   SettingContentPanel,
+  SettingCustomPageSizeControl,
   SettingDataTable,
   SettingFilterActions,
   SettingFilterPanel,
   SettingHeaderActions,
   SettingListHeader,
   SettingPage,
+  usePersistentPageSizeOptions,
 } from "@/components/setting/PageSurface"
 import {
   Badge,
   Button,
   Collapse,
   Group,
-  Modal,
   MultiSelect,
   Select,
   Stack,
   Text,
-  TextInput,
 } from "@mantine/core"
 import { modals } from "@mantine/modals"
 import { notifications } from "@mantine/notifications"
@@ -127,12 +127,12 @@ export default function PersonReportPage() {
 
   const [page, setPage] = useState(1)
   const [pageSize, setPageSize] = useState(20)
-  const [recordsPerPageOptions, setRecordsPerPageOptions] = useState<number[]>(
-    () => [...DEFAULT_RECORDS_PER_PAGE_OPTIONS]
-  )
-  const [customPageSizeInput, setCustomPageSizeInput] = useState("")
-  const [customPageSizeModalOpened, setCustomPageSizeModalOpened] =
-    useState(false)
+  const {
+    recordsPerPageOptions,
+    addCustomPageSize,
+    clearCustomPageSizeCache,
+    hasCustomPageSizeCache,
+  } = usePersistentPageSizeOptions(DEFAULT_RECORDS_PER_PAGE_OPTIONS, pageSize)
   const [totalItems, setTotalItems] = useState(0)
   const [loading, setLoading] = useState(false)
   const [records, setRecords] = useState<Daily.DailyWorkList[]>([])
@@ -225,53 +225,6 @@ export default function PersonReportPage() {
     })
   }, [])
 
-  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 sum = (arr: number[]) =>
     arr.reduce((accumulator, currentValue) => {
       const value = Number(currentValue ?? 0)
@@ -754,12 +707,13 @@ export default function PersonReportPage() {
                   <Group gap="xs" align="center" wrap="wrap">
                     <Controls.Text />
                     <Controls.PageSizeSelector />
-                    <Button
-                      variant="default"
-                      size="sm"
-                      onClick={openCustomPageSizeModal}>
-                      自定义每页条数
-                    </Button>
+                    <SettingCustomPageSizeControl
+                      addCustomPageSize={addCustomPageSize}
+                      clearCustomPageSizeCache={clearCustomPageSizeCache}
+                      hasCustomPageSizeCache={hasCustomPageSizeCache}
+                      triggerButtonProps={{ variant: "default", size: "sm" }}
+                      confirmButtonProps={{ color: "#1874ff" }}
+                    />
                   </Group>
                   <Controls.Pagination />
                 </Group>
@@ -797,33 +751,6 @@ export default function PersonReportPage() {
           if (refresh) load()
         }}
       />
-
-      <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 color="#1874ff" onClick={handleAddCustomPageSize}>
-              添加
-            </Button>
-          </Group>
-        </Stack>
-      </Modal>
     </SettingPage>
   )
 }

components/setting/PageSurface.tsx

@@ -1,20 +1,40 @@
 "use client"
 
 import {
+  Button,
   Group,
+  Modal,
   Paper,
   Stack,
   Text,
+  TextInput,
+  type ButtonProps,
   type GroupProps,
   type PaperProps,
   type StackProps,
 } from "@mantine/core"
+import { notifications } from "@mantine/notifications"
 import {
   DataTable,
   type DataTableDefaultColumnProps,
   type DataTableProps,
 } from "mantine-datatable"
-import type { CSSProperties, PropsWithChildren, ReactNode } from "react"
+import {
+  type CSSProperties,
+  type KeyboardEvent,
+  type PropsWithChildren,
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react"
+import { create } from "zustand"
+import {
+  persist,
+  type PersistStorage,
+  type StorageValue,
+} from "zustand/middleware"
 import classes from "./PageSurface.module.css"
 
 function mergeClassName(...classNames: Array<string | undefined>) {
@@ -33,6 +53,339 @@ export const settingModalActionsClassName = classes.modalActions
 export const settingModalMetaTextClassName = classes.modalMetaText
 export const settingSurfaceClassNames = classes
 
+const CUSTOM_PAGE_SIZE_STORAGE_KEY = "cowa:custom-records-per-page-options:v1"
+
+function normalizePageSizeOptions(values: number[]) {
+  return Array.from(
+    new Set(values.filter((value) => Number.isInteger(value) && value > 0))
+  ).sort((a, b) => a - b)
+}
+
+type AddCustomPageSizeResult = "added" | "exists" | "invalid"
+
+type CustomPageSizePersistedState = {
+  customPageSizeCache: number[]
+}
+
+type CustomPageSizeStoreState = CustomPageSizePersistedState & {
+  appendCustomPageSize: (size: number) => void
+  clearCustomPageSizeCache: () => void
+}
+
+function normalizeCustomPageSizePersistedState(
+  value: unknown
+): CustomPageSizePersistedState {
+  if (!value || typeof value !== "object") {
+    return { customPageSizeCache: [] }
+  }
+
+  const { customPageSizeCache } = value as {
+    customPageSizeCache?: unknown
+  }
+  if (!Array.isArray(customPageSizeCache)) {
+    return { customPageSizeCache: [] }
+  }
+
+  return {
+    customPageSizeCache: normalizePageSizeOptions(
+      customPageSizeCache.map((item) => Number(item))
+    ),
+  }
+}
+
+const customPageSizeStorage: PersistStorage<CustomPageSizePersistedState> = {
+  getItem: (name) => {
+    if (typeof window === "undefined") return null
+
+    try {
+      const rawValue = window.localStorage.getItem(name)
+      if (!rawValue) return null
+
+      const parsedValue = JSON.parse(rawValue) as
+        | StorageValue<CustomPageSizePersistedState>
+        | number[]
+        | null
+
+      if (Array.isArray(parsedValue)) {
+        return {
+          state: {
+            customPageSizeCache: normalizePageSizeOptions(
+              parsedValue.map((item) => Number(item))
+            ),
+          },
+          version: 0,
+        }
+      }
+
+      if (!parsedValue || typeof parsedValue !== "object") return null
+
+      return {
+        ...parsedValue,
+        state: normalizeCustomPageSizePersistedState(parsedValue.state),
+      }
+    } catch {
+      return null
+    }
+  },
+  setItem: (name, value) => {
+    if (typeof window === "undefined") return
+
+    try {
+      const normalizedValue: StorageValue<CustomPageSizePersistedState> = {
+        ...value,
+        state: normalizeCustomPageSizePersistedState(value.state),
+      }
+
+      if (normalizedValue.state.customPageSizeCache.length === 0) {
+        window.localStorage.removeItem(name)
+        return
+      }
+
+      window.localStorage.setItem(name, JSON.stringify(normalizedValue))
+    } catch {
+      // Ignore persistence failures and keep the UI usable.
+    }
+  },
+  removeItem: (name) => {
+    if (typeof window === "undefined") return
+
+    try {
+      window.localStorage.removeItem(name)
+    } catch {
+      // Ignore persistence failures and keep the UI usable.
+    }
+  },
+}
+
+const useCustomPageSizeStore = create<CustomPageSizeStoreState>()(
+  persist(
+    (set) => ({
+      customPageSizeCache: [],
+      appendCustomPageSize: (size) =>
+        set((state) => ({
+          customPageSizeCache: normalizePageSizeOptions([
+            ...state.customPageSizeCache,
+            size,
+          ]),
+        })),
+      clearCustomPageSizeCache: () => set({ customPageSizeCache: [] }),
+    }),
+    {
+      name: CUSTOM_PAGE_SIZE_STORAGE_KEY,
+      storage: customPageSizeStorage,
+      partialize: (state) => ({
+        customPageSizeCache: state.customPageSizeCache,
+      }),
+    }
+  )
+)
+
+export function usePersistentPageSizeOptions(
+  defaultOptions: number[],
+  currentPageSize?: number
+) {
+  const normalizedDefaultOptions = useMemo(
+    () => normalizePageSizeOptions(defaultOptions),
+    [defaultOptions]
+  )
+  const customPageSizeCache = useCustomPageSizeStore(
+    (state) => state.customPageSizeCache
+  )
+  const appendCustomPageSize = useCustomPageSizeStore(
+    (state) => state.appendCustomPageSize
+  )
+  const clearCustomPageSizeCache = useCustomPageSizeStore(
+    (state) => state.clearCustomPageSizeCache
+  )
+
+  useEffect(() => {
+    void useCustomPageSizeStore.persist.rehydrate()
+
+    const handleStorage = (event: StorageEvent) => {
+      if (event.key !== CUSTOM_PAGE_SIZE_STORAGE_KEY) return
+      void useCustomPageSizeStore.persist.rehydrate()
+    }
+
+    window.addEventListener("storage", handleStorage)
+    return () => {
+      window.removeEventListener("storage", handleStorage)
+    }
+  }, [])
+
+  const persistedRecordsPerPageOptions = useMemo(
+    () =>
+      normalizePageSizeOptions([
+        ...normalizedDefaultOptions,
+        ...customPageSizeCache,
+      ]),
+    [customPageSizeCache, normalizedDefaultOptions]
+  )
+
+  const recordsPerPageOptions = useMemo(() => {
+    const nextOptions = [...persistedRecordsPerPageOptions]
+    if (
+      typeof currentPageSize === "number" &&
+      Number.isInteger(currentPageSize) &&
+      currentPageSize > 0
+    ) {
+      nextOptions.push(currentPageSize)
+    }
+    return normalizePageSizeOptions(nextOptions)
+  }, [currentPageSize, persistedRecordsPerPageOptions])
+
+  const addCustomPageSize = useCallback(
+    (size: number): AddCustomPageSizeResult => {
+      if (!Number.isInteger(size) || size <= 0) return "invalid"
+      if (persistedRecordsPerPageOptions.includes(size)) return "exists"
+
+      appendCustomPageSize(size)
+      return "added"
+    },
+    [appendCustomPageSize, persistedRecordsPerPageOptions]
+  )
+
+  return {
+    recordsPerPageOptions,
+    hasCustomPageSizeCache: customPageSizeCache.length > 0,
+    addCustomPageSize,
+    clearCustomPageSizeCache,
+  }
+}
+
+type SettingCustomPageSizeControlProps = {
+  addCustomPageSize: (size: number) => AddCustomPageSizeResult
+  clearCustomPageSizeCache: () => void
+  hasCustomPageSizeCache: boolean
+  triggerButtonProps?: Omit<ButtonProps, "children" | "onClick">
+  confirmButtonProps?: Omit<ButtonProps, "children" | "onClick">
+  triggerLabel?: ReactNode
+}
+
+export function SettingCustomPageSizeControl({
+  addCustomPageSize,
+  clearCustomPageSizeCache,
+  hasCustomPageSizeCache,
+  triggerButtonProps,
+  confirmButtonProps,
+  triggerLabel = "自定义每页条数",
+}: SettingCustomPageSizeControlProps) {
+  const [opened, setOpened] = useState(false)
+  const [customPageSizeInput, setCustomPageSizeInput] = useState("")
+
+  const closeCustomPageSizeModal = useCallback(() => {
+    setOpened(false)
+    setCustomPageSizeInput("")
+  }, [])
+
+  const handleAddCustomPageSize = useCallback(() => {
+    const rawValue = customPageSizeInput.trim()
+    if (!rawValue) return
+
+    const size = Number(rawValue)
+    const result = addCustomPageSize(size)
+
+    if (result === "invalid") {
+      notifications.show({
+        color: "red",
+        title: "输入无效",
+        message: "请填写大于 0 的整数条数",
+      })
+      return
+    }
+
+    if (result === "exists") {
+      notifications.show({
+        color: "blue",
+        title: "已存在",
+        message: `每页 ${size} 条已在可选项中`,
+      })
+      return
+    }
+
+    closeCustomPageSizeModal()
+    notifications.show({
+      color: "green",
+      title: "添加成功",
+      message: `已新增每页 ${size} 条`,
+    })
+  }, [addCustomPageSize, closeCustomPageSizeModal, customPageSizeInput])
+
+  const handleCustomPageSizeEnter = useCallback(
+    (event: KeyboardEvent<HTMLInputElement>) => {
+      if (event.key !== "Enter") return
+      event.preventDefault()
+      handleAddCustomPageSize()
+    },
+    [handleAddCustomPageSize]
+  )
+
+  const handleClearCachedPageSizes = useCallback(() => {
+    clearCustomPageSizeCache()
+    closeCustomPageSizeModal()
+    notifications.show({
+      color: "green",
+      title: "清除成功",
+      message: "已清除自定义每页条数缓存",
+    })
+  }, [clearCustomPageSizeCache, closeCustomPageSizeModal])
+
+  return (
+    <>
+      <Button
+        variant="light"
+        color="gray"
+        size="xs"
+        onClick={() => setOpened(true)}
+        {...triggerButtonProps}>
+        {triggerLabel}
+      </Button>
+      <Modal
+        opened={opened}
+        onClose={closeCustomPageSizeModal}
+        title="添加每页条数"
+        classNames={settingModalClassNames}
+        centered>
+        <Stack gap={12} className={settingModalFormClassName}>
+          <TextInput
+            data-autofocus
+            label="每页条数"
+            placeholder="请输入大于 0 的整数，例如 99"
+            value={customPageSizeInput}
+            onChange={(event) =>
+              setCustomPageSizeInput(event.currentTarget.value)
+            }
+            onKeyDown={handleCustomPageSizeEnter}
+          />
+          <Text className={settingModalMetaTextClassName}>
+            已添加的自定义条数会缓存在当前浏览器中，可随时清除。
+          </Text>
+          <Group
+            justify={hasCustomPageSizeCache ? "space-between" : "flex-end"}
+            className={settingModalActionsClassName}
+            wrap="wrap">
+            {hasCustomPageSizeCache ? (
+              <Button
+                variant="subtle"
+                color="red"
+                onClick={handleClearCachedPageSizes}>
+                清除缓存
+              </Button>
+            ) : null}
+            <Group gap={12}>
+              <Button variant="default" onClick={closeCustomPageSizeModal}>
+                取消
+              </Button>
+              <Button onClick={handleAddCustomPageSize} {...confirmButtonProps}>
+                添加
+              </Button>
+            </Group>
+          </Group>
+        </Stack>
+      </Modal>
+    </>
+  )
+}
+
 type SettingTableViewportProps = PropsWithChildren<{
   maxHeight: number | string
   className?: string