feat(page): size

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>
   )
 }