fix(daily): fix style

app/person/report/page.tsx

@@ -7,15 +7,24 @@ import {
 import { Daily } from "@/components/label/api/daily/typing"
 import { getSelfProjectList } from "@/components/label/api/project"
 import { useAllUserStore } from "@/components/label/store/auth"
+import {
+  SettingContentPanel,
+  SettingDataTable,
+  SettingFilterActions,
+  SettingFilterPanel,
+  SettingHeaderActions,
+  SettingListHeader,
+  SettingPage,
+  SettingPanel,
+} from "@/components/setting/PageSurface"
 import {
   ActionIcon,
   Badge,
   Button,
   Collapse,
-  Flex,
   Group,
+  Modal,
   MultiSelect,
-  Paper,
   SimpleGrid,
   Stack,
   Text,
@@ -34,11 +43,7 @@ import {
 } from "@tabler/icons-react"
 
 import dayjs from "dayjs"
-import {
-  DataTable,
-  DataTableColumn,
-  DataTableSortStatus,
-} from "mantine-datatable"
+import { DataTableColumn, DataTableSortStatus } from "mantine-datatable"
 import { useCallback, useEffect, useMemo, useState } from "react"
 import DailyReportModal from "./components/DailyReportModal"
 import {
@@ -105,6 +110,8 @@ function toNumber(value?: string) {
   return Number.isFinite(n) ? n : undefined
 }
 
+const DEFAULT_RECORDS_PER_PAGE_OPTIONS = [10, 15, 20, 50]
+
 export default function PersonReportPage() {
   const treeData = useAllUserStore((s) => s.treeData)
 
@@ -137,6 +144,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 [totalItems, setTotalItems] = useState(0)
   const [loading, setLoading] = useState(false)
   const [records, setRecords] = useState<Daily.DailyWorkList[]>([])
@@ -229,6 +242,53 @@ 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 columns = useMemo(() => {
     const cols: DataTableColumn<Daily.DailyWorkList>[] = [
       { accessor: "id", title: "ID", width: 80, sortable: true },
@@ -429,21 +489,13 @@ export default function PersonReportPage() {
   }, [asyncGetSelfProjectList])
 
   return (
-    <Stack w="100%" h="calc(100vh - 56px)" p="md" gap="md">
-      <Paper
-        withBorder
-        p="md"
-        radius="md"
-        style={{
-          borderColor:
-            "light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4))",
-        }}>
+    <SettingPage>
+      <SettingFilterPanel>
         <Stack gap="sm">
           <Group justify="space-between" wrap="wrap" gap="sm">
             <Group gap="xs">
-              <Text fw={700}>搜索条件</Text>
+              <Text fw={700}>筛选条件</Text>
               <Button
-                size="xs"
                 variant="transparent"
                 rightSection={
                   searchExpanded ? (
@@ -457,11 +509,9 @@ export default function PersonReportPage() {
               </Button>
             </Group>
 
-            <Group gap="sm">
+            <SettingFilterActions mt={0}>
               <Button
                 variant="default"
-                size="xs"
-                radius="xs"
                 leftSection={<IconRefresh size={16} />}
                 onClick={() => {
                   setFilters(defaultFilters)
@@ -472,8 +522,6 @@ export default function PersonReportPage() {
                 重置
               </Button>
               <Button
-                size="xs"
-                radius="xs"
                 leftSection={<IconSearch size={16} />}
                 onClick={() => {
                   setAppliedFilters(filters)
@@ -482,18 +530,12 @@ export default function PersonReportPage() {
                 }}>
                 查询
               </Button>
-            </Group>
+            </SettingFilterActions>
           </Group>
-          <Collapse
-            in={searchExpanded}
-            transitionDuration={150}
-            transitionTimingFunction="ease"
-            animateOpacity>
+          <Collapse in={searchExpanded} transitionDuration={150} animateOpacity>
             <SimpleGrid cols={{ base: 1, sm: 2, md: 3, lg: 4 }} spacing="sm">
               <TextInput
                 label="开始日期"
-                size="xs"
-                radius="xs"
                 type="date"
                 value={filters.date_start}
                 onChange={(e) =>
@@ -505,8 +547,6 @@ export default function PersonReportPage() {
               />
               <TextInput
                 label="结束日期"
-                size="xs"
-                radius="xs"
                 type="date"
                 value={filters.date_end}
                 onChange={(e) => {
@@ -515,8 +555,6 @@ export default function PersonReportPage() {
               />
               <MultiSelect
                 label="项目名称"
-                size="xs"
-                radius="xs"
                 data={projectOptions}
                 searchable
                 clearable
@@ -525,8 +563,6 @@ export default function PersonReportPage() {
               />
               <MultiSelect
                 label="任务组长"
-                size="xs"
-                radius="xs"
                 data={leaderOptions}
                 searchable
                 clearable
@@ -535,8 +571,6 @@ export default function PersonReportPage() {
               />
               <MultiSelect
                 label="规定类型"
-                size="xs"
-                radius="xs"
                 data={setTypeOpts}
                 searchable
                 clearable
@@ -547,8 +581,6 @@ export default function PersonReportPage() {
               />
               <MultiSelect
                 label="出勤类型"
-                size="xs"
-                radius="xs"
                 data={actualTypeOpts}
                 searchable
                 clearable
@@ -559,8 +591,6 @@ export default function PersonReportPage() {
               />
               <MultiSelect
                 label="工作类别"
-                size="xs"
-                radius="xs"
                 data={workTypeOpts}
                 searchable
                 clearable
@@ -571,8 +601,6 @@ export default function PersonReportPage() {
               />
               <MultiSelect
                 label="核算方式"
-                size="xs"
-                radius="xs"
                 data={accountTypeOpts}
                 searchable
                 clearable
@@ -583,8 +611,6 @@ export default function PersonReportPage() {
               />
               <MultiSelect
                 label="绩效核算"
-                size="xs"
-                radius="xs"
                 data={performanceOpts}
                 searchable
                 clearable
@@ -602,8 +628,6 @@ export default function PersonReportPage() {
               />
               <MultiSelect
                 label="对象类型"
-                size="xs"
-                radius="xs"
                 data={objTypeOpts}
                 searchable
                 clearable
@@ -615,42 +639,44 @@ export default function PersonReportPage() {
             </SimpleGrid>
           </Collapse>
         </Stack>
-      </Paper>
+      </SettingFilterPanel>
 
-      <Paper
-        withBorder
-        p="md"
-        radius="md"
+      <SettingContentPanel
         style={{
-          borderColor:
-            "light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4))",
           flex: 1,
           minHeight: 0,
           display: "flex",
           flexDirection: "column",
           gap: 12,
         }}>
+        <SettingListHeader
+          title="我的日报"
+          count={`${totalItems} 条`}
+          actions={
+            <SettingHeaderActions>
+              <Button
+                leftSection={<IconPlus size={16} />}
+                onClick={() => {
+                  setEditingRecord(null)
+                  setModalOpened(true)
+                }}>
+                填写日报
+              </Button>
+              <Button
+                variant="default"
+                leftSection={<IconRefresh size={16} />}
+                onClick={load}
+                loading={loading}>
+                刷新
+              </Button>
+            </SettingHeaderActions>
+          }
+        />
         <Stack gap={12} align="stretch" style={{ flex: 1, minHeight: 0 }}>
-          <Flex justify={"space-between"} align="center" w="100%">
-            <Button
-              leftSection={<IconPlus size={12} />}
-              size="xs"
-              radius={"xs"}
-              onClick={() => {
-                setEditingRecord(null)
-                setModalOpened(true)
-              }}>
-              填写日报
-            </Button>
-            <ActionIcon onClick={load} variant="transparent">
-              <IconRefresh size={16} />
-            </ActionIcon>
-          </Flex>
-          <DataTable<Daily.DailyWorkList>
+          <SettingDataTable<Daily.DailyWorkList>
             width="100%"
-            style={{ width: "100%" }}
-            withTableBorder
-            withRowBorders
+            minHeight={0}
+            style={{ width: "100%", flex: 1 }}
             pinFirstColumn
             pinLastColumn
             scrollAreaProps={{ type: "auto" }}
@@ -665,16 +691,35 @@ export default function PersonReportPage() {
               setPageSize(v)
               setPage(1)
             }}
-            recordsPerPageOptions={[10, 15, 20, 50]}
-            noRecordsText="暂无数据"
-            recordsPerPageLabel="当前页数"
+            recordsPerPageOptions={recordsPerPageOptions}
             sortStatus={sortStatus}
             onSortStatusChange={(s) => {
               setSortStatus(s)
               setPage(1)
             }}
+            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>
+            )}
           />
-          <Paper withBorder radius="xs" p="sm">
+          <SettingPanel radius="md" p="sm">
             <Group justify="space-between" wrap="wrap">
               <Text size="sm" fw={700}>
                 当前页总计
@@ -691,9 +736,9 @@ export default function PersonReportPage() {
                 </Text>
               </Group>
             </Group>
-          </Paper>
+          </SettingPanel>
         </Stack>
-      </Paper>
+      </SettingContentPanel>
 
       <DailyReportModal
         opened={modalOpened}
@@ -705,6 +750,31 @@ export default function PersonReportPage() {
           if (refresh) load()
         }}
       />
-    </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>
+    </SettingPage>
   )
 }