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

2026-04-28 14:36:36 +08:00
parent 2e33b6fd7e
commit 9d9bf4ff7f
20 changed files with 2672 additions and 812 deletions
--- a/app/person/dashboard/components/PersonalProjectTable.tsx
+++ b/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>
  )
 }
--- a/app/person/dashboard/components/PersonalTaskTable.tsx
+++ b/app/person/dashboard/components/PersonalTaskTable.tsx
@@ -2,13 +2,17 @@

 import { getUserTaskList } from "@/components/label/api/task"
 import { Task } from "@/components/label/api/task/typing"
+import TaskStatusTag from "@/components/label/components/TaskStatusTag"
 import {
  useBackUrlStore,
  usePermissionStore,
 } from "@/components/label/store/auth"
-import { TaskStatusEnum } from "@/components/label/utils/constants"
 import {
-  Badge,
+  SettingDataTable,
+  SettingHeaderActions,
+  SettingListHeader,
+} from "@/components/setting/PageSurface"
+import {
  Button,
  Group,
  Modal,
@@ -19,25 +23,9 @@ import {
 } from "@mantine/core"
 import { notifications } from "@mantine/notifications"
 import { IconRefresh } from "@tabler/icons-react"
-import { DataTable, DataTableColumn } from "mantine-datatable"
+import { DataTableColumn } from "mantine-datatable"
 import { useCallback, useEffect, useMemo, useState } from "react"
-
-function getStatusColor(status?: number | null) {
-  switch (status) {
-    case 2:
-      return "blue"
-    case 4:
-      return "yellow"
-    case 6:
-      return "orange"
-    case 7:
-      return "green"
-    case 8:
-      return "red"
-    default:
-      return "gray"
-  }
-}
+import classes from "../page.module.css"

 const DEFAULT_RECORDS_PER_PAGE_OPTIONS = [10, 15, 20, 50]

@@ -46,7 +34,7 @@ export default function PersonalTaskTable() {
  const setBackProps = useBackUrlStore((s) => s.setBackProps)

  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]
  )
@@ -148,13 +136,7 @@ export default function PersonalTaskTable() {
          return (
            <Text
              title={record.project_name ?? "-"}
-              style={{
-                fontSize: "14px",
-                maxWidth: "100%",
-                whiteSpace: "nowrap",
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-              }}>
+              className={classes.ellipsisText}>
              {record.project_name ?? "-"}
            </Text>
          )
@@ -167,8 +149,6 @@ export default function PersonalTaskTable() {
        render: (record: Task.SimpleTaskItem) => {
          return (
            <UnstyledButton
-              px={6}
-              variant="transparent"
              onClick={async () => {
                setCurrentRowId(record.id)
                if ([4, 5, 6, 7].includes(record.label_type)) {
@@ -193,14 +173,7 @@ export default function PersonalTaskTable() {
                }
              }}
              title={record.id.toString()}
-              c={"brand"}
-              style={{
-                fontSize: "14px",
-                maxWidth: "100%",
-                whiteSpace: "nowrap",
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-              }}>
+              className={classes.tableLink}>
              {record.id}
            </UnstyledButton>
          )
@@ -211,86 +184,84 @@ export default function PersonalTaskTable() {
        title: "对象数",
        width: 80,
        render: (record: Task.SimpleTaskItem) => {
-          return <>{record.label_object_size?.object_size || "-"}</>
+          return (
+            <Text className={classes.tableCellText}>
+              {record.label_object_size?.object_size || "-"}
+            </Text>
+          )
        },
      },
      {
        accessor: "label_status",
        title: "状态",
-        width: 80,
-        render: (record: Task.SimpleTaskItem) => {
-          return (
-            <Badge
-              color={getStatusColor(record.label_status)}
-              style={{
-                fontSize: "12px",
-                padding: "2px 6px",
-              }}>
-              {TaskStatusEnum.get(record.label_status)}
-            </Badge>
-          )
-        },
+        width: 160,
+        render: (record) => (
+          <TaskStatusTag
+            status={record.label_status}
+            rejected={record.rejected}
+          />
+        ),
      },
      {
        accessor: "label_username",
        title: "标注员",
        width: 80,
+        render: (record: Task.SimpleTaskItem) => (
+          <Text className={classes.tableCellText}>
+            {record.label_username || "-"}
+          </Text>
+        ),
      },
      {
        accessor: "review1_username",
        title: "审核员",
        width: 80,
+        render: (record: Task.SimpleTaskItem) => (
+          <Text className={classes.tableCellText}>
+            {record.review1_username || "-"}
+          </Text>
+        ),
      },
      {
        accessor: "review2_username",
        title: "复审员",
        width: 80,
+        render: (record: Task.SimpleTaskItem) => (
+          <Text className={classes.tableCellText}>
+            {record.review2_username || "-"}
+          </Text>
+        ),
      },
    ]
    return column
  }, [setBackProps])

  return (
-    <Group
-      gap="sm"
-      h="100%"
-      align="stretch"
-      style={{ flexDirection: "column" }}>
-      <Group justify="space-between" align="center">
-        <Text fw={700} fz="lg" style={{ marginBottom: 8 }}>
-          我的任务
-        </Text>
-        <Button
-          size={"xs"}
-          fz={"sm"}
-          fw={500}
-          radius="sm"
-          onClick={resetData}
-          loading={loading}
-          leftSection={<IconRefresh size={16} />}>
-          更新
-        </Button>
-      </Group>
-      <Group
-        gap={0}
-        align="stretch"
-        style={{ flex: 1, minHeight: 0, width: "100%" }}>
-        <DataTable<Task.SimpleTaskItem>
+    <Stack className={classes.dashboardSection}>
+      <SettingListHeader
+        title="我的任务"
+        count={`共 ${totalItems} 条记录`}
+        actions={
+          <SettingHeaderActions>
+            <Button
+              variant="default"
+              onClick={resetData}
+              disabled={loading}
+              leftSection={<IconRefresh size={16} />}>
+              刷新
+            </Button>
+          </SettingHeaderActions>
+        }
+      />
+      <div className={classes.dashboardTableArea}>
+        <SettingDataTable<Task.SimpleTaskItem>
          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
-          pinLastColumn
+          fetching={loading}
          rowBackgroundColor={({ id }) => {
-            if (id === currentRowId)
-              return "var(--mantine-datatable-highlight-on-hover-color-light, var(--mantine-datatable-highlight-on-hover-color))"
+            if (id === currentRowId) return "#F7FBFF"
          }}
          scrollAreaProps={{ type: "auto" }}
          records={records}
@@ -302,7 +273,10 @@ export default function PersonalTaskTable() {
          page={page}
          onPageChange={setPage}
          noRecordsText="暂无数据"
-          recordsPerPageLabel="当前页数"
+          recordsPerPageLabel="每页条数"
+          paginationText={({ from, to, totalRecords }) =>
+            `显示 ${from}-${to} 条，共 ${totalRecords} 条记录`
+          }
          renderPagination={({ Controls }) => (
            <Group
              justify="space-between"
@@ -314,9 +288,8 @@ export default function PersonalTaskTable() {
                <Controls.Text />
                <Controls.PageSizeSelector />
                <Button
-                  variant="light"
-                  color="gray"
-                  size="xs"
+                  variant="default"
+                  size="sm"
                  onClick={openCustomPageSizeModal}>
                  自定义每页条数
                </Button>
@@ -325,7 +298,7 @@ export default function PersonalTaskTable() {
            </Group>
          )}
        />
-      </Group>
+      </div>
      <Modal
        opened={customPageSizeModalOpened}
        onClose={closeCustomPageSizeModal}
@@ -346,10 +319,12 @@ export default function PersonalTaskTable() {
            <Button variant="default" onClick={closeCustomPageSizeModal}>
              取消
            </Button>
-            <Button onClick={handleAddCustomPageSize}>添加</Button>
+            <Button color="#1874ff" onClick={handleAddCustomPageSize}>
+              添加
+            </Button>
          </Group>
        </Stack>
      </Modal>
-    </Group>
+    </Stack>
  )
 }