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

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