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

app/person/dashboard/page.tsx

@@ -2,27 +2,17 @@
 
 import { getCurrentPersonData } from "@/components/label/api/project"
 import {
-  BackgroundImage,
-  Center,
-  Group,
-  Paper,
-  SimpleGrid,
-  Stack,
-  Text,
-  Title,
-} from "@mantine/core"
+  SettingContentPanel,
+  SettingPage,
+  SettingPanel,
+} from "@/components/setting/PageSurface"
+import { Stack, Text } from "@mantine/core"
 import dayjs from "dayjs"
 import duration from "dayjs/plugin/duration"
-import { JSX, useEffect, useMemo, useState } from "react"
-import { DataIcon, HourIcon, ReviewIcon } from "./components/Icon"
+import { useEffect, useMemo, useState } from "react"
 import PersonalProjectTable from "./components/PersonalProjectTable"
 import PersonalTaskTable from "./components/PersonalTaskTable"
-import DataImage from "./resource/images/data.png"
-import DataLogoImage from "./resource/images/data_logo.png"
-import HourImage from "./resource/images/hour.png"
-import HourLogoImage from "./resource/images/hour_logo.png"
-import ReviewImage from "./resource/images/review.png"
-import ReviewLogoImage from "./resource/images/review_logo.png"
+import classes from "./page.module.css"
 
 dayjs.extend(duration)
 
@@ -56,95 +46,6 @@ function formatDurationSeconds(seconds?: number | null) {
   return "-"
 }
 
-function StatCard(props: {
-  title: string
-  timeText: string
-  sizeTitle: string
-  sizeValue: number
-  sizeColor: string
-  background: string
-  backgroundLogo: string
-  Icon: () => JSX.Element
-}) {
-  const {
-    title,
-    timeText,
-    sizeTitle,
-    sizeValue,
-    sizeColor,
-    background,
-    backgroundLogo,
-    Icon,
-  } = props
-  return (
-    <Paper
-      shadow="xs"
-      p="md"
-      withBorder
-      radius={"md"}
-      pos="relative"
-      style={{
-        borderColor:
-          "light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4))",
-        overflow: "hidden",
-        display: "flex",
-      }}>
-      <BackgroundImage
-        src={background}
-        w="100%"
-        h="100%"
-        style={{ position: "absolute", top: 0, left: 0, zIndex: 0 }}
-      />
-      <BackgroundImage
-        src={backgroundLogo}
-        w={108}
-        h={108}
-        style={{
-          position: "absolute",
-          bottom: 0,
-          right: 8,
-          zIndex: 0,
-          backgroundRepeat: "no-repeat",
-        }}
-      />
-      <Group gap="md" align="flex-start" style={{ flex: 1, zIndex: 1 }}>
-        <div style={{ width: 32 }}>
-          <Icon />
-        </div>
-        <Stack gap={6} style={{ flex: 1 }}>
-          <div>
-            <Text fw={700} fz="lg" lh={1.4}>
-              {title}
-            </Text>
-            <Title order={3} style={{ marginTop: 6 }}>
-              {timeText}
-            </Title>
-          </div>
-          <Stack gap={6}>
-            <Text fw={700} fz="lg">
-              {sizeTitle}
-            </Text>
-            <Paper
-              shadow="xs"
-              px={8}
-              py={4}
-              radius="sm"
-              style={{
-                background: "#fff",
-                width: "fit-content",
-                color: sizeColor,
-                fontWeight: 700,
-                fontSize: 16,
-              }}>
-              {sizeValue}
-            </Paper>
-          </Stack>
-        </Stack>
-      </Group>
-    </Paper>
-  )
-}
-
 export default function PersonDashboardPage() {
   const [data, setData] = useState<{
     label_data_size: number
@@ -173,116 +74,86 @@ export default function PersonDashboardPage() {
     }
   }, [data])
 
+  const summaryItems = useMemo(
+    () => [
+      {
+        title: "标注工时",
+        value: dataText.label,
+        metaLabel: "标注数据量",
+        metaValue: data?.label_data_size ?? 0,
+      },
+      {
+        title: "审核工时",
+        value: dataText.review1,
+        metaLabel: "审核数据量",
+        metaValue: data?.review1_data_size ?? 0,
+      },
+      {
+        title: "复审工时",
+        value: dataText.review2,
+        metaLabel: "复审数据量",
+        metaValue: data?.review2_data_size ?? 0,
+      },
+    ],
+    [
+      data?.label_data_size,
+      data?.review1_data_size,
+      data?.review2_data_size,
+      dataText,
+    ]
+  )
+
   return (
-    <Stack w="100%" h="calc(100vh - 56px)" p="md" gap="md">
-      <Group align="stretch" gap="md" wrap="nowrap" h={180}>
-        <Paper
-          shadow="xs"
-          withBorder
-          p="md"
-          style={{
-            width: 160,
-            borderColor:
-              "light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4))",
-            display: "flex",
-            flexDirection: "column",
-            gap: 16,
-          }}>
-          <Text fz="lg" fw={700}>
-            今日
-          </Text>
-          <Center>
-            <Paper
-              radius="md"
-              p="sm"
-              style={{
-                width: 72,
-                height: 72,
-                background: "rgba(0, 161, 255, 0.08)",
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "center",
-                justifyContent: "center",
-                gap: 4,
-              }}>
-              <Text fz={24} fw={700} lh={1}>
-                {dayjs().format("DD")}
-              </Text>
-              <Text fz={16}>{monthText(dayjs().format("MM"))}</Text>
-            </Paper>
-          </Center>
-        </Paper>
+    <SettingPage>
+      <Stack className={classes.pageIntro}>
+        <Text className={classes.breadcrumb}>
+          个人工作台 /{" "}
+          <span className={classes.breadcrumbCurrent}>个人看板</span>
+        </Text>
+      </Stack>
 
-        <SimpleGrid cols={{ base: 1, sm: 3 }} spacing="md" style={{ flex: 1 }}>
-          <StatCard
-            title="标注工时"
-            timeText={dataText.label}
-            sizeTitle="标注数据量"
-            sizeValue={data?.label_data_size ?? 0}
-            sizeColor="#E03131"
-            background={DataImage.src}
-            backgroundLogo={DataLogoImage.src}
-            Icon={DataIcon}
-          />
-          <StatCard
-            title="审核工时"
-            timeText={dataText.review1}
-            sizeTitle="审核数据量"
-            sizeValue={data?.review1_data_size ?? 0}
-            sizeColor="#2F9E44"
-            background={HourImage.src}
-            backgroundLogo={HourLogoImage.src}
-            Icon={HourIcon}
-          />
-          <StatCard
-            title="复审工时"
-            timeText={dataText.review2}
-            sizeTitle="复审数据量"
-            sizeValue={data?.review2_data_size ?? 0}
-            sizeColor="#F08C00"
-            background={ReviewImage.src}
-            backgroundLogo={ReviewLogoImage.src}
-            Icon={ReviewIcon}
-          />
-        </SimpleGrid>
-      </Group>
+      <SettingPanel p={0}>
+        <div className={classes.summaryGrid}>
+          <div className={classes.summaryDateCell}>
+            <Text className={classes.summaryDateLabel}>今日</Text>
+            <Text className={classes.summaryDateValue}>
+              {dayjs().format("DD")}
+            </Text>
+            <Text className={classes.summaryDateMeta}>
+              {monthText(dayjs().format("MM"))} · {dayjs().format("YYYY")}
+            </Text>
+          </div>
 
-      <SimpleGrid
-        cols={{ base: 1, lg: 2 }}
-        spacing="md"
-        style={{ flex: 1, maxHeight: "calc(100% - 194px)" }}>
-        <Paper
-          shadow="xs"
-          withBorder
-          p="md"
-          style={{
-            borderColor:
-              "light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4))",
-            display: "flex",
-            flexDirection: "column",
-            minHeight: 0,
-          }}>
-          <div style={{ flex: 1, minHeight: 0 }}>
+          {summaryItems.map((item) => (
+            <div key={item.title} className={classes.summaryMetricCell}>
+              <Text className={classes.summaryMetricLabel}>{item.title}</Text>
+              <Text className={classes.summaryMetricValue}>{item.value}</Text>
+              <div className={classes.summaryMetricMeta}>
+                <Text className={classes.summaryMetricMetaLabel}>
+                  {item.metaLabel}
+                </Text>
+                <Text className={classes.summaryMetricMetaValue}>
+                  {item.metaValue}
+                </Text>
+              </div>
+            </div>
+          ))}
+        </div>
+      </SettingPanel>
+
+      <div className={classes.tableGrid}>
+        <SettingContentPanel p={0} className={classes.dashboardPanel}>
+          <div className={classes.dashboardPanelBody}>
             <PersonalTaskTable />
           </div>
-        </Paper>
+        </SettingContentPanel>
 
-        <Paper
-          shadow="xs"
-          withBorder
-          p="md"
-          style={{
-            borderColor:
-              "light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4))",
-            display: "flex",
-            flexDirection: "column",
-            minHeight: 0,
-          }}>
-          <div style={{ flex: 1, minHeight: 0 }}>
+        <SettingContentPanel p={0} className={classes.dashboardPanel}>
+          <div className={classes.dashboardPanelBody}>
             <PersonalProjectTable />
           </div>
-        </Paper>
-      </SimpleGrid>
-    </Stack>
+        </SettingContentPanel>
+      </div>
+    </SettingPage>
   )
 }