perf(style): codex-skills/cowa-admin-list-ui

app/person/dashboard/components/PersonalProjectTable.tsx

@@ -3,24 +3,20 @@
 import { getPersonProjectDashBoard } from "@/components/label/api/project"
 import { Project } from "@/components/label/api/project/typing"
 import {
-  Button,
-  Flex,
-  Group,
-  Modal,
-  Stack,
-  Text,
-  TextInput,
-} from "@mantine/core"
+  SettingDataTable,
+  SettingListHeader,
+} from "@/components/setting/PageSurface"
+import { Button, 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 { IconRefresh, IconSearch } from "@tabler/icons-react"
 import dayjs from "dayjs"
 import "dayjs/locale/zh-cn"
 import duration from "dayjs/plugin/duration"
-import { DataTable, DataTableColumn } from "mantine-datatable"
-import { useRouter } from "next/navigation"
+import { DataTableColumn } from "mantine-datatable"
 import { useCallback, useEffect, useMemo, useState } from "react"
+import classes from "../page.module.css"
 
 dayjs.extend(duration)
 
@@ -51,14 +47,13 @@ function createInitialFilters(): FilterFormRecord {
 const DEFAULT_RECORDS_PER_PAGE_OPTIONS = [10, 15, 20, 50]
 
 export default function PersonalProjectTable() {
-  const router = useRouter()
   const [records, setRecords] = useState<
     Project.PersonProjectDashboardResponseItem[]
   >([])
   const [loading, setLoading] = useState(false)
 
   const [page, setPage] = useState(1)
-  const [pageSize, setPageSize] = useState(50)
+  const [pageSize, setPageSize] = useState(10)
   const [recordsPerPageOptions, setRecordsPerPageOptions] = useState<number[]>(
     () => [...DEFAULT_RECORDS_PER_PAGE_OPTIONS]
   )
@@ -123,12 +118,18 @@ export default function PersonalProjectTable() {
     setQueryTrigger((v) => v + 1)
   }
 
+  const handleReset = useCallback(() => {
+    const next = createInitialFilters()
+    setFilters(next)
+    setForm(next)
+    setPage(1)
+    setQueryTrigger((v) => v + 1)
+  }, [])
+
   useEffect(() => {
     if (page > totalPages) setPage(totalPages)
   }, [page, totalPages])
 
-  const [currentRowId, setCurrentRowId] = useState<number>(0)
-
   const openCustomPageSizeModal = useCallback(() => {
     setCustomPageSizeModalOpened(true)
   }, [])
@@ -186,22 +187,8 @@ export default function PersonalProjectTable() {
           render: (record: Project.PersonProjectDashboardResponseItem) => {
             return (
               <Text
-                px={6}
-                variant="transparent"
-                onClick={async () => {
-                  false && setCurrentRowId(record.project_id)
-                  false &&
-                    router.push(`/project/info/detail?id=${record.project_id}`)
-                }}
                 title={record.project_id.toString()}
-                // c={"brand"}
-                style={{
-                  fontSize: "14px",
-                  maxWidth: "100%",
-                  whiteSpace: "nowrap",
-                  overflow: "hidden",
-                  textOverflow: "ellipsis",
-                }}>
+                className={classes.ellipsisText}>
                 {record.project_id}
               </Text>
             )
@@ -215,13 +202,7 @@ export default function PersonalProjectTable() {
             return (
               <Text
                 title={record.project_name ?? "-"}
-                style={{
-                  fontSize: "14px",
-                  maxWidth: "100%",
-                  whiteSpace: "nowrap",
-                  overflow: "hidden",
-                  textOverflow: "ellipsis",
-                }}>
+                className={classes.ellipsisText}>
                 {record.project_name ?? "-"}
               </Text>
             )
@@ -235,13 +216,7 @@ export default function PersonalProjectTable() {
             return (
               <Text
                 title={record.project_id.toString()}
-                style={{
-                  fontSize: "14px",
-                  maxWidth: "100%",
-                  whiteSpace: "nowrap",
-                  overflow: "hidden",
-                  textOverflow: "ellipsis",
-                }}>
+                className={classes.ellipsisText}>
                 {record.project_type ?? "-"}
               </Text>
             )
@@ -252,7 +227,11 @@ export default function PersonalProjectTable() {
           title: "任务耗时",
           width: 140,
           render: (record: Project.PersonProjectDashboardResponseItem) => {
-            return formatDurationSeconds(record.work_time)
+            return (
+              <Text className={classes.tableCellText}>
+                {formatDurationSeconds(record.work_time)}
+              </Text>
+            )
           },
         },
         {
@@ -260,74 +239,63 @@ export default function PersonalProjectTable() {
           title: "标注类别",
           width: 160,
           render: (record: Project.PersonProjectDashboardResponseItem) => {
-            return record.project_label_type ?? "-"
+            return (
+              <Text className={classes.tableCellText}>
+                {record.project_label_type ?? "-"}
+              </Text>
+            )
           },
         },
       ]
     return column
-  }, [router])
+  }, [])
 
   return (
-    <Group
-      gap="sm"
-      h="100%"
-      align="stretch"
-      style={{ flexDirection: "column" }}>
-      <Group justify="space-between" align="center">
-        <Flex align={"center"} gap={8}>
-          <Text fw={700} fz="lg">
-            参与项目
-          </Text>
-          <DatePickerInput
-            type="range"
-            label=""
-            placeholder="请选择时间范围，默认一周"
-            miw={208}
-            valueFormat="YYYY-MM-DD"
-            locale="zh-cn"
-            clearable
-            value={filters.query_date}
-            onChange={(value: DatesRangeValue) =>
-              setFilters((s) => ({
-                ...s,
-                query_date: value,
-              }))
-            }
-          />
-        </Flex>
-
-        <Button
-          size={"xs"}
-          fz={"sm"}
-          fw={500}
-          radius="sm"
-          onClick={handleSearch}
-          loading={loading}
-          leftSection={<IconRefresh size={16} />}>
-          更新
-        </Button>
-      </Group>
-      <Group
-        gap={0}
-        align="stretch"
-        style={{ flex: 1, minHeight: 0, width: "100%" }}>
-        <DataTable<Project.PersonProjectDashboardResponseItem>
+    <Stack className={classes.dashboardSection}>
+      <SettingListHeader title="参与项目" count={`共 ${totalItems} 条记录`} />
+      <div className={classes.dashboardFilterBar}>
+        <div className={classes.dashboardFilterField}>
+          <Text className={classes.dashboardFilterLabel}>统计周期</Text>
+          <div className={classes.dashboardFilterControl}>
+            <DatePickerInput
+              type="range"
+              placeholder="请选择时间范围，默认一周"
+              valueFormat="YYYY-MM-DD"
+              locale="zh-cn"
+              clearable
+              value={filters.query_date}
+              onChange={(value: DatesRangeValue) =>
+                setFilters((s) => ({
+                  ...s,
+                  query_date: value,
+                }))
+              }
+            />
+          </div>
+        </div>
+        <div className={classes.dashboardFilterActions}>
+          <Button
+            variant="default"
+            leftSection={<IconRefresh size={16} />}
+            onClick={handleReset}>
+            重置
+          </Button>
+          <Button
+            color="#1874ff"
+            leftSection={<IconSearch size={16} />}
+            onClick={handleSearch}
+            disabled={loading}>
+            查询
+          </Button>
+        </div>
+      </div>
+      <div className={classes.dashboardTableArea}>
+        <SettingDataTable<Project.PersonProjectDashboardResponseItem>
           width="100%"
-          style={{ width: "100%" }}
-          styles={{
-            header: {
-              color: "var(--mantine-color-grey-text)",
-              backgroundColor: "var(--mantine-datatable-striped-color)",
-            },
-          }}
-          withTableBorder
-          withRowBorders
+          minHeight={0}
+          style={{ width: "100%", flex: 1 }}
           pinFirstColumn
-          rowBackgroundColor={(record) => {
-            if (record.project_id === currentRowId)
-              return "var(--mantine-datatable-highlight-on-hover-color-light, var(--mantine-datatable-highlight-on-hover-color))"
-          }}
-          idAccessor="project_id"
+          fetching={loading}
           scrollAreaProps={{ type: "auto" }}
           records={pageRecords}
           onRecordsPerPageChange={setPageSize}
@@ -338,7 +306,10 @@ export default function PersonalProjectTable() {
           page={page}
           onPageChange={setPage}
           noRecordsText="暂无数据"
-          recordsPerPageLabel="当前页数"
+          recordsPerPageLabel="每页条数"
+          paginationText={({ from, to, totalRecords }) =>
+            `显示 ${from}-${to} 条，共 ${totalRecords} 条记录`
+          }
           renderPagination={({ Controls }) => (
             <Group
               justify="space-between"
@@ -350,9 +321,8 @@ export default function PersonalProjectTable() {
                 <Controls.Text />
                 <Controls.PageSizeSelector />
                 <Button
-                  variant="light"
-                  color="gray"
-                  size="xs"
+                  variant="default"
+                  size="sm"
                   onClick={openCustomPageSizeModal}>
                   自定义每页条数
                 </Button>
@@ -361,7 +331,7 @@ export default function PersonalProjectTable() {
             </Group>
           )}
         />
-      </Group>
+      </div>
       <Modal
         opened={customPageSizeModalOpened}
         onClose={closeCustomPageSizeModal}
@@ -382,10 +352,12 @@ export default function PersonalProjectTable() {
             <Button variant="default" onClick={closeCustomPageSizeModal}>
               取消
             </Button>
-            <Button onClick={handleAddCustomPageSize}>添加</Button>
+            <Button color="#1874ff" onClick={handleAddCustomPageSize}>
+              添加
+            </Button>
           </Group>
         </Stack>
       </Modal>
-    </Group>
+    </Stack>
   )
 }