fix(style): fix

app/project/detail/OwnTaskTableContainer.tsx

@@ -9,12 +9,9 @@ import {
 } from "@/components/label/store/auth"
 import { OwnTaskStatusOpts } from "@/components/label/utils/constants"
 import {
-  ActionIcon,
   Button,
   Collapse,
-  Flex,
   Group,
-  Paper,
   Select,
   SimpleGrid,
   Stack,
@@ -28,9 +25,17 @@ import {
   IconRefresh,
   IconSearch,
 } from "@tabler/icons-react"
-import { DataTable, DataTableColumn } from "mantine-datatable"
+import { DataTableColumn } from "mantine-datatable"
 import { useRouter, useSearchParams } from "next/navigation"
 import { useCallback, useEffect, useMemo, useState } from "react"
+import {
+  SettingContentPanel,
+  SettingDataTable,
+  SettingFilterActions,
+  SettingFilterPanel,
+  SettingHeaderActions,
+  SettingListHeader,
+} from "@/components/setting/PageSurface"
 import TaskStatusTag from "./components/TaskStatusTag"
 
 function createInitialFilters() {
@@ -109,7 +114,6 @@ export default function OwnTaskTableContainer(props: {
     }
     return next
   }, [
-    ,
     form.search_id,
     form.search_status,
     pageNumber,
@@ -173,6 +177,24 @@ export default function OwnTaskTableContainer(props: {
     }
   }
 
+  const handleSearch = () => {
+    setPageNumber(1)
+    setForm({ ...filters })
+    setQueryTrigger((v) => v + 1)
+  }
+
+  const handleReset = () => {
+    const next = createInitialFilters()
+    setFilters(next)
+    setForm(next)
+    setPageNumber(1)
+    setQueryTrigger((v) => v + 1)
+  }
+
+  const handleRefresh = () => {
+    setQueryTrigger((v) => v + 1)
+  }
+
   const columns = useMemo(() => {
     const cols: DataTableColumn<Task.DataProps>[] = [
       {
@@ -267,12 +289,11 @@ export default function OwnTaskTableContainer(props: {
 
   return (
     <Stack gap="sm" style={{ flex: 1, minHeight: 0 }}>
-      <Paper withBorder p="sm" radius="sm">
+      <SettingFilterPanel>
         <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 ? (
@@ -285,43 +306,20 @@ export default function OwnTaskTableContainer(props: {
               {searchExpanded ? "收起筛选" : "展开筛选"}
             </Button>
           </Group>
-          <Group gap="xs">
-            <Button
-              size="xs"
-              radius={"xs"}
-              variant="default"
-              leftSection={<IconRefresh size={16} />}
-              onClick={() => {
-                const next = createInitialFilters()
-                setFilters(next)
-                setForm(next)
-                setPageNumber(1)
-              }}>
-              重置
-            </Button>
-            <Button
-              size="xs"
-              radius={"xs"}
-              leftSection={<IconSearch size={16} />}
-              onClick={() => {
-                setPageNumber(1)
-                setForm({ ...filters })
-              }}>
-              查询
-            </Button>
-          </Group>
         </Group>
         <Collapse
           in={searchExpanded}
           transitionDuration={250}
           transitionTimingFunction="ease"
           animateOpacity>
-          <Stack gap="sm" mt="sm">
-            <SimpleGrid cols={{ base: 1, sm: 2, md: 3, lg: 4 }} spacing="sm">
+          <Stack gap="md" mt="md">
+            <SimpleGrid
+              cols={{ base: 1, sm: 2, md: 3, lg: 4 }}
+              spacing="md"
+              verticalSpacing="md">
               <TextInput
-                size="xs"
-                radius="xs"
                 label="任务ID"
+                placeholder="请输入任务 ID"
                 value={filters.search_id}
                 onChange={(e) =>
                   setFilters((s) => ({
@@ -332,8 +330,6 @@ export default function OwnTaskTableContainer(props: {
                 style={{ width: 160 }}
               />
               <Select
-                size="xs"
-                radius="xs"
                 label="状态"
                 data={Object.entries(OwnTaskStatusOpts).map(
                   ([value, label]) => ({
@@ -346,60 +342,70 @@ export default function OwnTaskTableContainer(props: {
                   setFilters((s) => ({ ...s, search_status: v ?? "0" }))
                 }
                 allowDeselect={false}
-                style={{ width: 160 }}
               />
             </SimpleGrid>
           </Stack>
         </Collapse>
-      </Paper>
+        <SettingFilterActions>
+          <Button
+            variant="default"
+            leftSection={<IconRefresh size={16} />}
+            onClick={handleReset}>
+            重置
+          </Button>
+          <Button
+            leftSection={<IconSearch size={16} />}
+            onClick={handleSearch}
+            loading={loading}>
+            查询
+          </Button>
+        </SettingFilterActions>
+      </SettingFilterPanel>
 
-      <Paper
-        withBorder
-        p="md"
-        radius="sm"
+      <SettingContentPanel
         style={{
           flex: 1,
           minHeight: 0,
           display: "flex",
           flexDirection: "column",
         }}>
-        <Stack gap={12} align="stretch" style={{ flex: 1, minHeight: 0 }}>
-          <Flex justify={"space-between"} align="center" w="100%">
-            <Flex gap={12}>
-              <Button
-                size="xs"
-                radius="xs"
-                variant="default"
-                disabled={!isLabel}
-                onClick={() => handleAcquireTask(1)}>
-                领取标注
-              </Button>
-              <Button
-                size="xs"
-                radius="xs"
-                variant="default"
-                disabled={!isReview1}
-                onClick={() => handleAcquireTask(2)}>
-                领取审核
-              </Button>
-              <Button
-                size="xs"
-                radius="xs"
-                variant="default"
-                disabled={!isReview2}
-                onClick={() => handleAcquireTask(3)}>
-                领取复审
-              </Button>
-            </Flex>
-            <ActionIcon onClick={load} variant="transparent">
-              <IconRefresh size={16} />
-            </ActionIcon>
-          </Flex>
-          <DataTable<Task.DataProps>
+        <Stack gap="sm" align="stretch" style={{ flex: 1, minHeight: 0 }}>
+          <SettingListHeader
+            title="我的任务"
+            count={`${total} 条`}
+            actions={
+              <SettingHeaderActions>
+                <Button
+                  variant="default"
+                  leftSection={<IconRefresh size={16} />}
+                  onClick={handleRefresh}
+                  loading={loading}>
+                  刷新
+                </Button>
+                <Button
+                  variant="default"
+                  disabled={!isLabel}
+                  onClick={() => handleAcquireTask(1)}>
+                  领取标注
+                </Button>
+                <Button
+                  variant="default"
+                  disabled={!isReview1}
+                  onClick={() => handleAcquireTask(2)}>
+                  领取审核
+                </Button>
+                <Button
+                  variant="default"
+                  disabled={!isReview2}
+                  onClick={() => handleAcquireTask(3)}>
+                  领取复审
+                </Button>
+              </SettingHeaderActions>
+            }
+          />
+          <SettingDataTable<Task.DataProps>
             width="100%"
-            style={{ width: "100%" }}
-            withTableBorder
-            withRowBorders
+            style={{ width: "100%", flex: 1 }}
             pinFirstColumn
             pinLastColumn
             scrollAreaProps={{ type: "auto" }}
@@ -415,11 +421,9 @@ export default function OwnTaskTableContainer(props: {
               setPageNumber(1)
             }}
             recordsPerPageOptions={[10, 15, 20]}
-            noRecordsText="暂无数据"
-            recordsPerPageLabel="当前页数"
           />
         </Stack>
-      </Paper>
+      </SettingContentPanel>
     </Stack>
   )
 }