fix(style): fix

2026-04-03 15:12:00 +08:00
parent bbde4df329
commit 0eb18943a4
9 changed files with 642 additions and 201 deletions
--- a/app/project/detail/OwnTaskTableContainer.tsx
+++ b/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>
  )
 }
--- a/app/project/detail/TaskTableContainer.tsx
+++ b/app/project/detail/TaskTableContainer.tsx
@@ -12,13 +12,19 @@ import {
  TaskStatusOpts,
 } from "@/components/label/utils/constants"
 import {
-  ActionIcon,
+  SettingContentPanel,
+  SettingDataTable,
+  SettingFilterActions,
+  SettingFilterPanel,
+  SettingHeaderActions,
+  SettingListHeader,
+} from "@/components/setting/PageSurface"
+import {
  Button,
  Collapse,
  Flex,
  Group,
  MultiSelect,
-  Paper,
  Select,
  SimpleGrid,
  Stack,
@@ -35,7 +41,7 @@ import {
 } from "@tabler/icons-react"
 import dayjs from "dayjs"
 import duration from "dayjs/plugin/duration"
-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 * as XLSX from "xlsx-js-style"
@@ -125,7 +131,6 @@ export default function TaskTableContainer(props: {
  }
 }) {
  const { info, userEnums } = props
-  false && console.log(info)

  const { user_id } = usePermissionStore()

@@ -444,6 +449,24 @@ export default function TaskTableContainer(props: {
    } catch {}
  }

+  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 getTime = (time: number) => {
    return dayjs.duration(time, "seconds").format("HH:mm:ss")
  }
@@ -775,12 +798,11 @@ export default function TaskTableContainer(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 ? (
@@ -793,43 +815,20 @@ export default function TaskTableContainer(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) => ({
@@ -839,8 +838,6 @@ export default function TaskTableContainer(props: {
                  }
                />
                <Select
-                  size="xs"
-                  radius="xs"
                  label="任务状态"
                  data={Object.entries(TaskStatusOpts).map(
                    ([value, label]) => ({
@@ -855,8 +852,6 @@ export default function TaskTableContainer(props: {
                  allowDeselect={false}
                />
                <Select
-                  size="xs"
-                  radius="xs"
                  label="是否返工"
                  data={[
                    { label: "全部", value: "" },
@@ -871,8 +866,6 @@ export default function TaskTableContainer(props: {
                />
                <MultiSelect
                  label="当前负责人"
-                  size="xs"
-                  radius="xs"
                  data={Array.from(userEnums.allEnum.entries()).map(
                    ([x, y]) => ({ label: y, value: x.toString() })
                  )}
@@ -885,8 +878,6 @@ export default function TaskTableContainer(props: {
                />
                <MultiSelect
                  label="标注员"
-                  size="xs"
-                  radius="xs"
                  data={Array.from(userEnums.labelEnum.entries()).map(
                    ([x, y]) => ({ label: y, value: x.toString() })
                  )}
@@ -897,8 +888,6 @@ export default function TaskTableContainer(props: {
                />
                <MultiSelect
                  label="审核员"
-                  size="xs"
-                  radius="xs"
                  data={Array.from(userEnums.review1Enum.entries()).map(
                    ([x, y]) => ({ label: y, value: x.toString() })
                  )}
@@ -911,8 +900,6 @@ export default function TaskTableContainer(props: {
                />
                <MultiSelect
                  label="复审员"
-                  size="xs"
-                  radius="xs"
                  data={Array.from(userEnums.review2Enum.entries()).map(
                    ([x, y]) => ({ label: y, value: x.toString() })
                  )}
@@ -926,54 +913,69 @@ export default function TaskTableContainer(props: {
              </SimpleGrid>
            </Stack>
          </Collapse>
-        </Paper>
-        <Paper
-          withBorder
-          p="md"
-          radius="sm"
+          <SettingFilterActions>
+            <Button
+              variant="default"
+              leftSection={<IconRefresh size={16} />}
+              onClick={handleReset}>
+              重置
+            </Button>
+            <Button
+              leftSection={<IconSearch size={16} />}
+              onClick={handleSearch}
+              loading={loading}>
+              查询
+            </Button>
+          </SettingFilterActions>
+        </SettingFilterPanel>
+        <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="outline"
-                  disabled={!selectedRecords.length}
-                  onClick={handleExport}>
-                  下载选中项
-                </Button>
-                <Button
-                  size="xs"
-                  radius="xs"
-                  variant="outline"
-                  disabled={!selectedRecords.length}
-                  onClick={clickDispatchTask}>
-                  调度选中项
-                </Button>
-                <Button
-                  size="xs"
-                  radius="xs"
-                  variant="outline"
-                  disabled={!selectedRecords.length}
-                  onClick={clickReleaseTask}>
-                  释放选中项
-                </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={
+                selectedRecords.length
+                  ? `${total} 条 / 已选 ${selectedRecords.length}`
+                  : `${total} 条`
+              }
+              actions={
+                <SettingHeaderActions>
+                  <Button
+                    variant="default"
+                    leftSection={<IconRefresh size={16} />}
+                    onClick={handleRefresh}
+                    loading={loading}>
+                    刷新
+                  </Button>
+                  <Button
+                    variant="default"
+                    disabled={!selectedRecords.length}
+                    onClick={handleExport}>
+                    下载选中项
+                  </Button>
+                  <Button
+                    variant="default"
+                    disabled={!selectedRecords.length}
+                    onClick={clickDispatchTask}>
+                    调度选中项
+                  </Button>
+                  <Button
+                    variant="default"
+                    disabled={!selectedRecords.length}
+                    onClick={clickReleaseTask}>
+                    释放选中项
+                  </Button>
+                </SettingHeaderActions>
+              }
+            />
+            <SettingDataTable<Task.DataProps>
              width="100%"
-              style={{ width: "100%" }}
-              withTableBorder
-              withRowBorders
+              style={{ width: "100%", flex: 1 }}
              pinFirstColumn
              pinLastColumn
              scrollAreaProps={{ type: "auto" }}
@@ -991,11 +993,9 @@ export default function TaskTableContainer(props: {
              selectedRecords={selectedRecords}
              onSelectedRecordsChange={setSelectedRecords}
              recordsPerPageOptions={[10, 15, 20]}
-              noRecordsText="暂无数据"
-              recordsPerPageLabel="当前页数"
            />
          </Stack>
-        </Paper>
+        </SettingContentPanel>
      </Stack>

      <WorkflowModal
--- a/app/project/detail/components/LabelSchemeContainer.tsx
+++ b/app/project/detail/components/LabelSchemeContainer.tsx
@@ -6,8 +6,9 @@ import {
  selectModeMap,
  staticsColor,
 } from "@/components/label/utils/constants"
+import { SettingDataTable } from "@/components/setting/PageSurface"
 import { Badge, Button, Group, Modal, Paper, Stack, Text } from "@mantine/core"
-import { DataTable, DataTableColumn } from "mantine-datatable"
+import { DataTableColumn } from "mantine-datatable"
 import { useState } from "react"

 type DetailRow = ProjectDetail.SubAttributesDescribe
@@ -188,9 +189,7 @@ export default function LabelSchemeContainer(props: {
        }}>
        <Stack gap="sm">
          <Text fw={700}>标注方案</Text>
-          <DataTable<ProjectDetail.LabelSchemaList>
-            withTableBorder
-            withRowBorders
+          <SettingDataTable<ProjectDetail.LabelSchemaList>
            idAccessor="category_id"
            records={schemas}
            columns={columns}
@@ -209,9 +208,7 @@ export default function LabelSchemeContainer(props: {
        title="子属性描述"
        centered
        size="70%">
-        <DataTable<DetailRow>
-          withTableBorder
-          withRowBorders
+        <SettingDataTable<DetailRow>
          records={detailRows}
          columns={detailColumns}
          noRecordsText="暂无数据"
--- a/app/project/detail/components/NoteRulesTable.tsx
+++ b/app/project/detail/components/NoteRulesTable.tsx
@@ -3,6 +3,7 @@
 import { projectConfig } from "@/components/label/api/project"
 import { ProjectDetail } from "@/components/label/api/project/typing"
 import { usePermissionStore } from "@/components/label/store/auth"
+import { SettingDataTable } from "@/components/setting/PageSurface"
 import {
  ActionIcon,
  Badge,
@@ -18,7 +19,7 @@ import { modals } from "@mantine/modals"
 import { notifications } from "@mantine/notifications"
 import { IconPlus, IconTrash } from "@tabler/icons-react"
 import dayjs from "dayjs"
-import { DataTable, DataTableColumn } from "mantine-datatable"
+import { DataTableColumn } from "mantine-datatable"
 import { useMemo, useState } from "react"

 type RulePayload = {
@@ -221,9 +222,7 @@ export default function NoteRulesTable(props: {
            </Text>
          </Stack>

-          <DataTable<RuleRow>
-            withTableBorder
-            withRowBorders
+          <SettingDataTable<RuleRow>
            records={rows}
            columns={columns}
            noRecordsText="暂无规则"
--- a/app/project/detail/components/TaskStageTabsContainer.tsx
+++ b/app/project/detail/components/TaskStageTabsContainer.tsx
@@ -2,6 +2,7 @@

 import { projectConfig } from "@/components/label/api/project"
 import { Project, ProjectDetail } from "@/components/label/api/project/typing"
+import { SettingDataTable } from "@/components/setting/PageSurface"
 import {
  ActionIcon,
  Badge,
@@ -22,7 +23,7 @@ import {
 import { modals } from "@mantine/modals"
 import { notifications } from "@mantine/notifications"
 import { IconEdit, IconPlus, IconX } from "@tabler/icons-react"
-import { DataTable, DataTableColumn } from "mantine-datatable"
+import { DataTableColumn } from "mantine-datatable"
 import { ReactNode, useEffect, useMemo, useState } from "react"
 import StageUserModal from "./StageUserModal"
 import {
@@ -1429,9 +1430,7 @@ export default function TaskStageTabsContainer(props: {
                批量操作
              </Button>
            </Group>
-            <DataTable<StageUserRow>
-              withTableBorder
-              withRowBorders
+            <SettingDataTable<StageUserRow>
              records={rows}
              columns={userColumns(stage)}
              noRecordsText="暂无人员"
--- a/app/project/detail/components/WorkflowModal.tsx
+++ b/app/project/detail/components/WorkflowModal.tsx
@@ -1,9 +1,10 @@
 "use client"

 import { getTaskWorkFlow } from "@/components/label/api/task"
+import { SettingDataTable } from "@/components/setting/PageSurface"
 import { Button, Group, Modal, ScrollArea, Stack, Text } from "@mantine/core"
 import { notifications } from "@mantine/notifications"
-import { DataTable, DataTableColumn } from "mantine-datatable"
+import { DataTableColumn } from "mantine-datatable"
 import { useEffect, useMemo, useState } from "react"
 import TaskStatusTag from "./TaskStatusTag"

@@ -139,15 +140,13 @@ export default function WorkflowModal(props: {
      size={720}>
      <Stack gap="sm">
        <ScrollArea h={360} type="auto">
-          <DataTable<WorkflowRow>
-            withTableBorder
-            withRowBorders
+          <SettingDataTable<WorkflowRow>
            pinLastColumn
+            fetching={loading}
            idAccessor="__rowId"
            records={rows}
            width={Math.max(columns.length * 140, 640)}
            columns={columns}
-            noRecordsText={loading ? "加载中..." : "暂无数据"}
            minHeight={220}
          />
        </ScrollArea>
--- a/app/project/detail/page.tsx
+++ b/app/project/detail/page.tsx
@@ -7,13 +7,16 @@ import {
  Breadcrumbs,
  Flex,
  Group,
-  Paper,
  Stack,
  Text,
  UnstyledButton,
 } from "@mantine/core"
 import { useRouter, useSearchParams } from "next/navigation"
 import { useEffect, useMemo, useState } from "react"
+import {
+  SettingFilterPanel,
+  SettingPage,
+} from "@/components/setting/PageSurface"
 import InfoSettingContainer from "./InfoSettingContainer"
 import OwnTaskTableContainer from "./OwnTaskTableContainer"
 import TaskBoardContainer from "./TaskBoardContainer"
@@ -193,15 +196,15 @@ export default function CollectionDetailPage() {
  }

  return (
-    <Stack w="100%" h="calc(100vh - 56px)" p="md" gap="md">
-      <Paper withBorder p="md" radius="sm">
+    <SettingPage>
+      <SettingFilterPanel>
        <Group justify="space-between" wrap="wrap" gap="sm">
          <Flex gap="sm" w="100%" justify="space-between">
            <Breadcrumbs separator=">">{breadcrumbsItems}</Breadcrumbs>
            {DetailMenuItems()}
          </Flex>
        </Group>
-      </Paper>
+      </SettingFilterPanel>

      <Stack style={{ flex: 1, minHeight: 0 }} gap="md">
        {selectKey === "own" ? (
@@ -219,6 +222,6 @@ export default function CollectionDetailPage() {
          />
        ) : null}
      </Stack>
-    </Stack>
+    </SettingPage>
  )
 }