From 7176174b9df887617dd35b39fc71f7430a3de4c6 Mon Sep 17 00:00:00 2001
From: shay7sev <shay7sev@gmail.com>
Date: Tue, 3 Feb 2026 18:41:37 +0800
Subject: [PATCH] fix(/management/person/dashboard): component change

---
 .../components/PersonalProjectTable.tsx       |   6 +-
 .../components/PersonalTaskTable.tsx          | 219 ++++++++++--------
 .../person/dashboard/components/util.ts       |  41 ++++
 components/label/api/task/index.ts            |   2 +-
 components/label/api/task/typing.ts           |  18 ++
 package.json                                  |   2 +
 6 files changed, 195 insertions(+), 93 deletions(-)
 create mode 100644 app/management/person/dashboard/components/util.ts

diff --git a/app/management/person/dashboard/components/PersonalProjectTable.tsx b/app/management/person/dashboard/components/PersonalProjectTable.tsx
index 2bc3391..2af6f19 100644
--- a/app/management/person/dashboard/components/PersonalProjectTable.tsx
+++ b/app/management/person/dashboard/components/PersonalProjectTable.tsx
@@ -9,6 +9,7 @@ import {
   Select,
   Table,
 } from "@mantine/core"
+
 import { IconRefresh } from "@tabler/icons-react"
 import dayjs from "dayjs"
 import duration from "dayjs/plugin/duration"
@@ -73,7 +74,10 @@ export default function PersonalProjectTable() {
       style={{ flexDirection: "column" }}>
       <Group justify="flex-end">
         <Button
-          variant="filled"
+          size={"xs"}
+          fz={"sm"}
+          fw={500}
+          radius="sm"
           onClick={load}
           loading={loading}
           leftSection={<IconRefresh size={16} />}>
diff --git a/app/management/person/dashboard/components/PersonalTaskTable.tsx b/app/management/person/dashboard/components/PersonalTaskTable.tsx
index 2045604..c38997a 100644
--- a/app/management/person/dashboard/components/PersonalTaskTable.tsx
+++ b/app/management/person/dashboard/components/PersonalTaskTable.tsx
@@ -1,27 +1,18 @@
 "use client"
 
 import { getUserTaskList } from "@/components/label/api/task"
+import { Task } from "@/components/label/api/task/typing"
 import {
   useBackUrlStore,
   usePermissionStore,
 } from "@/components/label/store/auth"
 import { TaskStatusEnum } from "@/components/label/utils/constants"
-import {
-  Anchor,
-  Badge,
-  Button,
-  Group,
-  Pagination,
-  ScrollArea,
-  Select,
-  Table,
-  Text,
-} from "@mantine/core"
+import { Badge, Button, Group, Text, UnstyledButton } from "@mantine/core"
 import { IconRefresh } from "@tabler/icons-react"
+import { DataTable, DataTableColumn } from "mantine-datatable"
 import { useRouter } from "next/navigation"
 import { useCallback, useEffect, useMemo, useState } from "react"
-
-const pageSizeOptions = [50, 100, 200]
+import { runCommand } from "./util"
 
 function getStatusColor(status?: number | null) {
   switch (status) {
@@ -49,7 +40,7 @@ export default function PersonalTaskTable() {
   const [page, setPage] = useState(1)
   const [pageSize, setPageSize] = useState(50)
   const [totalItems, setTotalItems] = useState(0)
-  const [records, setRecords] = useState<any[]>([])
+  const [records, setRecords] = useState<Task.SimpleTaskItem[]>([])
   const [loading, setLoading] = useState(false)
 
   const totalPages = useMemo(() => {
@@ -84,6 +75,92 @@ export default function PersonalTaskTable() {
     else setPage(1)
   }
 
+  const [currentRowId, setCurrentRowId] = useState<number>(0)
+
+  const originColumn = useMemo(() => {
+    let column: DataTableColumn<Task.SimpleTaskItem>[] = [
+      {
+        accessor: "project_name",
+        title: "项目名称",
+        width: 150,
+        render: (record: Task.SimpleTaskItem) => {
+          return <Text>{record.project_name}</Text>
+        },
+      },
+      {
+        accessor: "id",
+        title: "任务ID",
+        width: 150,
+        render: (record: Task.SimpleTaskItem) => {
+          return (
+            <UnstyledButton
+              px={6}
+              variant="transparent"
+              onClick={async () => {
+                setCurrentRowId(record.id)
+                if ([4, 5, 6].includes(record.label_type)) {
+                  setBackProps(`/project/person`)
+                  router.push(
+                    `/label?project_id=${record.project_id}&task_id=${record.id}`
+                  )
+                } else {
+                  await runCommand(
+                    record.id.toString(),
+                    user_name,
+                    user_password
+                  )
+                }
+              }}
+              title={record.id.toString()}
+              c={"brand"}
+              style={{
+                fontSize: "14px",
+                maxWidth: "100%",
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+              }}>
+              {record.id}
+            </UnstyledButton>
+          )
+        },
+      },
+      {
+        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>
+          )
+        },
+      },
+      {
+        accessor: "label_username",
+        title: "标注员",
+        width: 80,
+      },
+      {
+        accessor: "review1_username",
+        title: "审核员",
+        width: 80,
+      },
+      {
+        accessor: "review2_username",
+        title: "复审员",
+        width: 80,
+      },
+    ]
+    return column
+  }, [router, setBackProps, user_name, user_password])
+
   return (
     <Group
       gap="sm"
@@ -92,89 +169,49 @@ export default function PersonalTaskTable() {
       style={{ flexDirection: "column" }}>
       <Group justify="flex-end">
         <Button
-          variant="filled"
+          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 }}>
-        <ScrollArea style={{ flex: 1 }}>
-          <Table withTableBorder withColumnBorders striped highlightOnHover>
-            <Table.Thead>
-              <Table.Tr>
-                <Table.Th style={{ width: 260 }}>项目名称</Table.Th>
-                <Table.Th style={{ width: 110 }}>任务ID</Table.Th>
-                <Table.Th style={{ width: 160 }}>状态</Table.Th>
-                <Table.Th style={{ width: 90 }}>标注员</Table.Th>
-                <Table.Th style={{ width: 90 }}>审核员</Table.Th>
-                <Table.Th style={{ width: 90 }}>复审员</Table.Th>
-              </Table.Tr>
-            </Table.Thead>
-            <Table.Tbody>
-              {records.map((record) => (
-                <Table.Tr key={record.id}>
-                  <Table.Td>
-                    <Text lineClamp={1}>{record.project_name ?? "-"}</Text>
-                  </Table.Td>
-                  <Table.Td>
-                    <Anchor
-                      onClick={async (e) => {
-                        e.preventDefault()
-                        const labelType = record.label_type
-                        if ([4, 5, 6].includes(labelType)) {
-                          setBackProps("/management/person/dashboard")
-                          router.push(
-                            `/label?project_id=${record.project_id}&task_id=${record.id}`
-                          )
-                          return
-                        }
-                        if (user_name && user_password) {
-                          setBackProps("/management/person/dashboard")
-                          router.push(
-                            `/label?project_id=${record.project_id}&task_id=${record.id}`
-                          )
-                        }
-                      }}
-                      style={{ cursor: "pointer" }}>
-                      {record.id ?? "-"}
-                    </Anchor>
-                  </Table.Td>
-                  <Table.Td>
-                    <Badge
-                      color={getStatusColor(record.label_status)}
-                      variant="light">
-                      {`${TaskStatusEnum.get(record.label_status) ?? "-"}${
-                        record.rejected ? "返工" : ""
-                      }`}
-                    </Badge>
-                  </Table.Td>
-                  <Table.Td>{record.label_username ?? "-"}</Table.Td>
-                  <Table.Td>{record.review1_username ?? "-"}</Table.Td>
-                  <Table.Td>{record.review2_username ?? "-"}</Table.Td>
-                </Table.Tr>
-              ))}
-            </Table.Tbody>
-          </Table>
-        </ScrollArea>
-      </Group>
-      <Group justify="space-between">
-        <Group gap="xs">
-          <Select
-            w={120}
-            value={String(pageSize)}
-            data={pageSizeOptions.map((v) => String(v))}
-            allowDeselect={false}
-            onChange={(value) => {
-              const next = Number(value)
-              if (!Number.isFinite(next)) return
-              setPageSize(next)
-              setPage(1)
-            }}
-          />
-        </Group>
-        <Pagination value={page} onChange={setPage} total={totalPages} />
+      <Group
+        gap={0}
+        align="stretch"
+        style={{ flex: 1, minHeight: 0, width: "100%" }}>
+        <DataTable<Task.SimpleTaskItem>
+          width="100%"
+          style={{ width: "100%" }}
+          styles={{
+            header: {
+              color: "var(--mantine-color-grey-text)",
+              backgroundColor: "var(--mantine-datatable-striped-color)",
+            },
+          }}
+          withTableBorder
+          withRowBorders
+          pinFirstColumn
+          pinLastColumn
+          rowBackgroundColor={({ id }) => {
+            if (id === currentRowId)
+              return "var(--mantine-datatable-highlight-on-hover-color-light, var(--mantine-datatable-highlight-on-hover-color))"
+          }}
+          scrollAreaProps={{ type: "auto" }}
+          records={records}
+          onRecordsPerPageChange={setPageSize}
+          recordsPerPageOptions={[10, 15, 20]}
+          columns={originColumn}
+          totalRecords={totalItems}
+          recordsPerPage={pageSize}
+          page={page}
+          onPageChange={setPage}
+          noRecordsText="暂无数据"
+          recordsPerPageLabel="当前页数"
+        />
       </Group>
     </Group>
   )
diff --git a/app/management/person/dashboard/components/util.ts b/app/management/person/dashboard/components/util.ts
new file mode 100644
index 0000000..7aafa25
--- /dev/null
+++ b/app/management/person/dashboard/components/util.ts
@@ -0,0 +1,41 @@
+import { platform } from "@tauri-apps/plugin-os"
+import { Command } from "@tauri-apps/plugin-shell"
+
+export const runCommand = async (
+  taskId: string,
+  name: string,
+  password: string
+) => {
+  const platformName = platform()
+  const cmdStr = /^win/i.test(platformName)
+    ? "labeltool_windows"
+    : "labeltool_linux"
+
+  let dStr = process.env.NEXT_PUBLIC_URL || ""
+
+  const command = Command.create(cmdStr, [
+    "--t",
+    taskId,
+    "--u",
+    name,
+    "--p",
+    password,
+    "--d",
+    dStr,
+  ])
+  // command.on("close", (data) => {
+  //   console.log(
+  //     `command finished with code ${data.code} and signal ${data.signal}`
+  //   );
+  // });
+  // command.on("error", (error) => console.error(`command error: "${error}"`));
+  // command.stdout.on("data", (line) =>
+  //   console.log(`command stdout: "${line}"`)
+  // );
+  // command.stderr.on("data", (line) =>
+  //   console.log(`command stderr: "${line}"`)
+  // );
+
+  await command.execute()
+  // console.log("pid:", child);
+}
diff --git a/components/label/api/task/index.ts b/components/label/api/task/index.ts
index d227842..5e99934 100644
--- a/components/label/api/task/index.ts
+++ b/components/label/api/task/index.ts
@@ -98,7 +98,7 @@ export const getUserTaskList = (params: {
   page_size: number
   page_number: number
 }) => {
-  return httpFetch<{ simple_task_list: any[]; total_items: number }>({
+  return httpFetch<Task.ResGetUserTaskList>({
     url: BASE_LABEL_API + `/api/v1/label_server/task/list_by_user`,
     method: "GET",
     data: params,
diff --git a/components/label/api/task/typing.ts b/components/label/api/task/typing.ts
index 46fb383..1d14edb 100644
--- a/components/label/api/task/typing.ts
+++ b/components/label/api/task/typing.ts
@@ -156,4 +156,22 @@ export namespace Task {
     work_time: number
     comment_question_size?: number
   }
+
+  export interface ResGetUserTaskList {
+    simple_task_list: SimpleTaskItem[]
+    total_items: number
+    total_pages: number
+  }
+
+  export interface SimpleTaskItem {
+    id: number
+    label_status: number
+    label_type: number
+    label_username?: string
+    project_id: number
+    project_name: string
+    rejected: boolean
+    review1_username?: string
+    review2_username?: string
+  }
 }
diff --git a/package.json b/package.json
index 0806b7f..1152c86 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,8 @@
     "@monaco-editor/react": "^4.7.0",
     "@tabler/icons-react": "^3.35.0",
     "@tauri-apps/api": "^2.9.1",
+    "@tauri-apps/plugin-os": "^2.3.2",
+    "@tauri-apps/plugin-shell": "^2.3.4",
     "@tiptap/extension-image": "^3.15.3",
     "@tiptap/extension-link": "^3.15.3",
     "@tiptap/extension-placeholder": "^3.15.3",