From e8dc6abb97509e087a20177970dccb6d8e30b7a5 Mon Sep 17 00:00:00 2001
From: zhangheng <zhangheng@cowarobot.com>
Date: Sat, 11 Apr 2026 16:54:21 +0800
Subject: [PATCH] fix(project): page

---
 components/project/index.tsx | 147 ++++++++++++++++++-----------------
 1 file changed, 75 insertions(+), 72 deletions(-)

diff --git a/components/project/index.tsx b/components/project/index.tsx
index e5b652d..c175355 100644
--- a/components/project/index.tsx
+++ b/components/project/index.tsx
@@ -19,6 +19,7 @@ import {
   useProjectStore,
 } from "@/components/label/store/auth"
 import {
+  ALL_CODE,
   projectLabelTypeOpts,
   projectStatusOpts,
   STATUS_CODE,
@@ -36,7 +37,6 @@ import {
   Modal,
   MultiSelect,
   Pagination,
-  Paper,
   Select,
   SimpleGrid,
   Stack,
@@ -46,6 +46,15 @@ import {
   Tooltip,
   UnstyledButton,
 } from "@mantine/core"
+import {
+  SettingContentPanel,
+  SettingFilterActions,
+  SettingFilterPanel,
+  SettingHeaderActions,
+  SettingListHeader,
+  SettingPage,
+  SettingPanel,
+} from "@/components/setting/PageSurface"
 import { useForm } from "@mantine/form"
 import { notifications } from "@mantine/notifications"
 import {
@@ -134,6 +143,7 @@ export default function ProjectInfoPage({
   type: "dynamic" | "collect" | ""
 }) {
   const router = useRouter()
+  const storeType = type || "all"
 
   const { userOpts } = useAllUserStore()
   const userName = usePermissionStore((s) => s.user_name)
@@ -150,20 +160,20 @@ export default function ProjectInfoPage({
   }: any = useProjectStore()
 
   const storeParams = useMemo(() => {
-    return type === "collect"
+    return storeType === "collect"
       ? collectParams
-      : type === "dynamic"
+      : storeType === "dynamic"
         ? dynamicParams
         : allParams
-  }, [allParams, collectParams, dynamicParams, type])
+  }, [allParams, collectParams, dynamicParams, storeType])
 
   const total = useMemo(() => {
-    return type === "collect"
+    return storeType === "collect"
       ? collectTotal
-      : type === "dynamic"
+      : storeType === "dynamic"
         ? dynamicTotal
         : allTotal
-  }, [allTotal, collectTotal, dynamicTotal, type])
+  }, [allTotal, collectTotal, dynamicTotal, storeType])
 
   const [typeOpts, setTypeOpts] = useState<
     Array<{ label: string; value: string }>
@@ -179,7 +189,7 @@ export default function ProjectInfoPage({
       status: "",
       owner: "",
       label_type: "",
-      admin_user: "",
+      admin_user: [] as string[],
       start_date: dayjs().subtract(6, "day").format("YYYY-MM-DD"),
       end_date: dayjs().format("YYYY-MM-DD"),
     }
@@ -200,9 +210,9 @@ export default function ProjectInfoPage({
 
   const queryParams = useMemo(() => {
     const base =
-      type === "collect"
+      storeType === "collect"
         ? { ...initCollectParams }
-        : type === "dynamic"
+        : storeType === "dynamic"
           ? { ...initDynamicParams }
           : { ...initAllParams }
 
@@ -214,7 +224,9 @@ export default function ProjectInfoPage({
       project_name: appliedFilters.project_name || undefined,
       project_type: appliedFilters.project_type || undefined,
       owner: appliedFilters.owner || undefined,
-      admin_user: appliedFilters.admin_user || undefined,
+      admin_user: appliedFilters.admin_user?.length
+        ? appliedFilters.admin_user.map((n) => Number(n))
+        : undefined,
       start_date: appliedFilters.start_date || undefined,
       end_date: appliedFilters.end_date || undefined,
       label_type: appliedFilters.label_type
@@ -222,11 +234,11 @@ export default function ProjectInfoPage({
         : undefined,
       // 0: 图片标注 1: 点云标注 2: 视频标注
       project_data_type: 0,
-      status: parseStatusValue(appliedFilters.status),
+      status: parseStatusValue(appliedFilters.status) ?? [...ALL_CODE],
     }
 
     return params
-  }, [appliedFilters, storeParams, type])
+  }, [appliedFilters, storeParams, storeType])
 
   const load = useCallback(async () => {
     if (!queryTrigger) return
@@ -234,10 +246,10 @@ export default function ProjectInfoPage({
     try {
       const res = await getProjectList(queryParams)
       setRecords(res?.project_list ?? [])
-      setTotal(res?.total_items ?? 0, type)
+      setTotal(res?.total_items ?? 0, storeType)
     } catch (e) {
       setRecords([])
-      setTotal(0, type)
+      setTotal(0, storeType)
       notifications.show({
         color: "red",
         title: "加载失败",
@@ -246,7 +258,7 @@ export default function ProjectInfoPage({
     } finally {
       setLoading(false)
     }
-  }, [queryParams, queryTrigger, setTotal, type])
+  }, [queryParams, queryTrigger, setTotal, storeType])
 
   useEffect(() => {
     load()
@@ -345,11 +357,10 @@ export default function ProjectInfoPage({
     const canDoAction = !!actionKey
 
     return (
-      <Paper
+      <SettingPanel
         key={record.id}
-        withBorder
         radius="md"
-        shadow="sm"
+        shadow="xs"
         style={{
           height: 160,
           padding: 14,
@@ -357,6 +368,9 @@ export default function ProjectInfoPage({
           display: "flex",
           flexDirection: "column",
           justifyContent: "space-between",
+          borderColor: "#E8EDF3",
+          background:
+            "linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(247,250,252,0.96) 100%)",
         }}>
         <Group justify="space-between" wrap="nowrap" align="flex-start">
           <Flex flex={1}>
@@ -551,7 +565,7 @@ export default function ProjectInfoPage({
             </div>
           </div>
         </Stack>
-      </Paper>
+      </SettingPanel>
     )
   }
 
@@ -604,19 +618,12 @@ export default function ProjectInfoPage({
   }
 
   return (
-    <Stack w="100%" h="calc(100vh - 56px)" p="md" gap="md">
-      <Paper withBorder p="md" radius="md">
+    <SettingPage>
+      <SettingFilterPanel>
         <Group justify="space-between" wrap="wrap" gap="sm">
           <Group gap="xs">
-            <Text fw={700}>
-              {type === "collect"
-                ? "我的收藏"
-                : type === "dynamic"
-                  ? "动态项目"
-                  : "我的项目"}
-            </Text>
+            <Text fw={700}>筛选条件</Text>
             <Button
-              size="xs"
               variant="transparent"
               rightSection={
                 searchExpanded ? (
@@ -629,21 +636,19 @@ export default function ProjectInfoPage({
               {searchExpanded ? "收起筛选" : "展开筛选"}
             </Button>
           </Group>
-          <Group gap="xs">
+          <SettingFilterActions mt={0}>
             <Button
-              size="xs"
-              radius="xs"
               variant="default"
               leftSection={<IconRefresh size={16} />}
               onClick={() => {
-                resetParams(type)
+                resetParams(storeType)
                 const next = {
                   project_name: "",
                   project_type: "",
                   status: "",
                   owner: "",
                   label_type: "",
-                  admin_user: "",
+                  admin_user: [],
                   start_date: dayjs().subtract(6, "day").format("YYYY-MM-DD"),
                   end_date: dayjs().format("YYYY-MM-DD"),
                 }
@@ -654,17 +659,15 @@ export default function ProjectInfoPage({
               重置
             </Button>
             <Button
-              size="xs"
-              radius="xs"
               leftSection={<IconSearch size={16} />}
               onClick={() => {
-                setSearchParams({ ...storeParams, page_number: 1 }, type)
+                setSearchParams({ ...storeParams, page_number: 1 }, storeType)
                 setAppliedFilters(filters)
                 setQueryTrigger((v) => v + 1)
               }}>
               查询
             </Button>
-          </Group>
+          </SettingFilterActions>
         </Group>
 
         <Collapse
@@ -676,8 +679,6 @@ export default function ProjectInfoPage({
             <SimpleGrid cols={{ base: 1, sm: 2, md: 3, lg: 4 }} spacing="sm">
               <TextInput
                 label="项目名称"
-                size="xs"
-                radius="xs"
                 value={filters.project_name}
                 onChange={(e) =>
                   setFilters((s) => ({
@@ -688,8 +689,6 @@ export default function ProjectInfoPage({
               />
               <Select
                 label="所属业务"
-                size="xs"
-                radius="xs"
                 searchable
                 clearable
                 data={typeOpts}
@@ -700,20 +699,16 @@ export default function ProjectInfoPage({
               />
               <Select
                 label="状态"
-                size="xs"
-                radius="xs"
                 searchable
                 data={projectStatusOpts.map((o) => ({
                   label: o.label,
-                  value: o.label,
+                  value: o.value.toString(),
                 }))}
                 value={filters.status}
                 onChange={(v) => setFilters((s) => ({ ...s, status: v ?? "" }))}
               />
               <TextInput
                 label="负责人"
-                size="xs"
-                radius="xs"
                 value={filters.owner}
                 onChange={(e) =>
                   setFilters((s) => ({ ...s, owner: e.currentTarget.value }))
@@ -721,8 +716,6 @@ export default function ProjectInfoPage({
               />
               <Select
                 label="标注类型"
-                size="xs"
-                radius="xs"
                 searchable
                 clearable
                 data={projectLabelTypeOpts.map((o) => ({
@@ -734,25 +727,19 @@ export default function ProjectInfoPage({
                   setFilters((s) => ({ ...s, label_type: v ?? "" }))
                 }
               />
-              <Select
+              <MultiSelect
                 label="标注管理员"
-                size="xs"
-                radius="xs"
-                searchable
-                clearable
                 data={userOpts.map((o) => ({
                   label: o.label,
                   value: String(o.value),
                 }))}
-                value={filters.admin_user || null}
-                onChange={(v) =>
-                  setFilters((s) => ({ ...s, admin_user: v ?? "" }))
-                }
+                value={filters.admin_user}
+                onChange={(v) => setFilters((s) => ({ ...s, admin_user: v }))}
+                searchable
+                clearable
               />
               <TextInput
                 label="开始日期"
-                size="xs"
-                radius="xs"
                 type="date"
                 value={filters.start_date}
                 onChange={(e) =>
@@ -764,8 +751,6 @@ export default function ProjectInfoPage({
               />
               <TextInput
                 label="结束日期"
-                size="xs"
-                radius="xs"
                 type="date"
                 value={filters.end_date}
                 onChange={(e) =>
@@ -775,18 +760,36 @@ export default function ProjectInfoPage({
             </SimpleGrid>
           </Stack>
         </Collapse>
-      </Paper>
+      </SettingFilterPanel>
 
-      <Paper
-        withBorder
-        p="md"
-        radius="md"
+      <SettingContentPanel
         style={{
           flex: 1,
           minHeight: 0,
           display: "flex",
           flexDirection: "column",
         }}>
+        <SettingListHeader
+          title={
+            type === "collect"
+              ? "我的收藏"
+              : type === "dynamic"
+                ? "动态项目"
+                : "全部项目"
+          }
+          count={`${total ?? 0} 条`}
+          actions={
+            <SettingHeaderActions>
+              <Button
+                variant="default"
+                leftSection={<IconRefresh size={16} />}
+                onClick={() => setQueryTrigger((v) => v + 1)}
+                loading={loading}>
+                刷新
+              </Button>
+            </SettingHeaderActions>
+          }
+        />
         <div
           style={{
             flex: 1,
@@ -839,19 +842,19 @@ export default function ProjectInfoPage({
             pageSize={pageSize}
             total={total ?? 0}
             onChangePage={(p) => {
-              setSearchParams({ ...storeParams, page_number: p }, type)
+              setSearchParams({ ...storeParams, page_number: p }, storeType)
               setQueryTrigger((v) => v + 1)
             }}
             onChangePageSize={(s) => {
               setSearchParams(
                 { ...storeParams, page_number: 1, page_size: s },
-                type
+                storeType
               )
               setQueryTrigger((v) => v + 1)
             }}
           />
         </div>
-      </Paper>
+      </SettingContentPanel>
 
       <Modal
         opened={infoModalRecord !== null}
@@ -1139,6 +1142,6 @@ export default function ProjectInfoPage({
           </Group>
         </Stack>
       </Modal>
-    </Stack>
+    </SettingPage>
   )
 }