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

app/person/report/page.tsx

@@ -17,7 +17,6 @@ import {
   SettingPage,
 } from "@/components/setting/PageSurface"
 import {
-  ActionIcon,
   Badge,
   Button,
   Collapse,
@@ -25,7 +24,6 @@ import {
   Modal,
   MultiSelect,
   Select,
-  SimpleGrid,
   Stack,
   Text,
   TextInput,
@@ -35,11 +33,9 @@ import { notifications } from "@mantine/notifications"
 import {
   IconChevronDown,
   IconChevronUp,
-  IconPencil,
   IconPlus,
   IconRefresh,
   IconSearch,
-  IconTrash,
 } from "@tabler/icons-react"
 
 import { DateInput } from "@mantine/dates"
@@ -58,6 +54,7 @@ import {
   setTypeOpts,
   workTypeOpts,
 } from "./config"
+import classes from "./page.module.css"
 
 type LeaderTreeNode = {
   title?: string
@@ -114,6 +111,21 @@ function toNumber(value?: string) {
 
 const DEFAULT_RECORDS_PER_PAGE_OPTIONS = [10, 15, 20, 50]
 
+function InlineFilterField({
+  label,
+  children,
+}: {
+  label: string
+  children: React.ReactNode
+}) {
+  return (
+    <div className={classes.filterField}>
+      <Text className={classes.filterLabel}>{label}</Text>
+      <div className={classes.filterControl}>{children}</div>
+    </div>
+  )
+}
+
 export default function PersonReportPage() {
   const treeData = useAllUserStore((s) => s.treeData)
 
@@ -342,12 +354,8 @@ export default function PersonReportPage() {
         render: (record) => (
           <Text
             size="sm"
-            style={{
-              maxWidth: 220,
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-              whiteSpace: "nowrap",
-            }}>
+            className={classes.ellipsisText}
+            style={{ maxWidth: 220 }}>
             {record.project_name ?? "-"}
           </Text>
         ),
@@ -358,9 +366,19 @@ export default function PersonReportPage() {
         width: 110,
         render: (record) => {
           if (record.performance_accounting === true)
-            return <Badge color="green">{performanceTextMap.get(true)}</Badge>
+            return (
+              <Badge
+                className={`${classes.statusBadge} ${classes.statusPositive}`}>
+                {performanceTextMap.get(true)}
+              </Badge>
+            )
           if (record.performance_accounting === false)
-            return <Badge color="gray">{performanceTextMap.get(false)}</Badge>
+            return (
+              <Badge
+                className={`${classes.statusBadge} ${classes.statusNegative}`}>
+                {performanceTextMap.get(false)}
+              </Badge>
+            )
           return "-"
         },
       },
@@ -419,12 +437,8 @@ export default function PersonReportPage() {
         render: (record) => (
           <Text
             size="sm"
-            style={{
-              maxWidth: 200,
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-              whiteSpace: "nowrap",
-            }}>
+            className={classes.ellipsisText}
+            style={{ maxWidth: 200 }}>
             {record.remarks ?? "-"}
           </Text>
         ),
@@ -437,47 +451,54 @@ export default function PersonReportPage() {
         render: (record) => {
           const disabled = !!record.lock_status
           return (
-            <Group gap={6} justify="center" wrap="nowrap">
-              <ActionIcon
-                variant="subtle"
-                color="blue"
-                disabled={disabled}
-                onClick={() => {
-                  if (disabled) return
-                  setEditingRecord(record)
-                  setModalOpened(true)
-                }}>
-                <IconPencil size={16} />
-              </ActionIcon>
-              <ActionIcon
-                variant="subtle"
-                color="red"
-                disabled={disabled}
-                onClick={() => {
-                  if (disabled || !record.id) return
-                  modals.openConfirmModal({
-                    title: "删除日报",
-                    centered: true,
-                    children: (
-                      <Text size="sm">
-                        删除后不可恢复，你确定删除该日报吗？
-                      </Text>
-                    ),
-                    labels: { confirm: "删除", cancel: "取消" },
-                    confirmProps: { color: "red" },
-                    onConfirm: async () => {
-                      await deleteDailyWorkData(record.id as number)
-                      notifications.show({
-                        color: "green",
-                        title: "操作成功",
-                        message: "已删除日报",
-                      })
-                      load()
-                    },
-                  })
-                }}>
-                <IconTrash size={16} />
-              </ActionIcon>
+            <Group gap={0} justify="center" wrap="nowrap">
+              <div className={classes.operationGroup}>
+                <button
+                  type="button"
+                  className={`${classes.operationLink} ${
+                    disabled ? classes.operationLinkDisabled : ""
+                  }`}
+                  disabled={disabled}
+                  onClick={() => {
+                    if (disabled) return
+                    setEditingRecord(record)
+                    setModalOpened(true)
+                  }}>
+                  编辑
+                </button>
+                <span className={classes.operationDivider} />
+                <button
+                  type="button"
+                  className={`${classes.operationLink} ${classes.operationLinkDanger} ${
+                    disabled ? classes.operationLinkDisabled : ""
+                  }`}
+                  disabled={disabled}
+                  onClick={() => {
+                    if (disabled || !record.id) return
+                    modals.openConfirmModal({
+                      title: "删除日报",
+                      centered: true,
+                      children: (
+                        <Text size="sm">
+                          删除后不可恢复，你确定删除该日报吗？
+                        </Text>
+                      ),
+                      labels: { confirm: "删除", cancel: "取消" },
+                      confirmProps: { color: "red" },
+                      onConfirm: async () => {
+                        await deleteDailyWorkData(record.id as number)
+                        notifications.show({
+                          color: "green",
+                          title: "操作成功",
+                          message: "已删除日报",
+                        })
+                        load()
+                      },
+                    })
+                  }}>
+                  删除
+                </button>
+              </div>
             </Group>
           )
         },
@@ -509,13 +530,55 @@ export default function PersonReportPage() {
 
   return (
     <SettingPage>
+      <Stack className={classes.pageIntro}>
+        <Text className={classes.breadcrumb}>
+          个人工作台 / 日报管理 /{" "}
+          <span className={classes.breadcrumbCurrent}>我的日报</span>
+        </Text>
+      </Stack>
+
       <SettingFilterPanel>
-        <Stack gap="sm">
-          <Group justify="space-between" wrap="wrap" gap="sm">
-            <Group gap="xs">
-              <Text fw={700}>筛选条件</Text>
+        <Stack gap={12}>
+          <div className={classes.filterTopRow}>
+            <InlineFilterField label="开始日期">
+              <DateInput
+                locale="zh-cn"
+                value={filters.date_start}
+                onChange={(e) =>
+                  setFilters((s) => ({
+                    ...s,
+                    date_start: dayjs(e).format("YYYY-MM-DD"),
+                  }))
+                }
+              />
+            </InlineFilterField>
+            <InlineFilterField label="结束日期">
+              <DateInput
+                locale="zh-cn"
+                value={filters.date_end}
+                onChange={(e) => {
+                  setFilters((s) => ({
+                    ...s,
+                    date_end: dayjs(e).format("YYYY-MM-DD"),
+                  }))
+                }}
+              />
+            </InlineFilterField>
+            <InlineFilterField label="项目名称">
+              <MultiSelect
+                data={projectOptions}
+                searchable
+                clearable
+                placeholder="请选择项目"
+                value={filters.project_id}
+                onChange={(v) => setFilters((s) => ({ ...s, project_id: v }))}
+              />
+            </InlineFilterField>
+
+            <SettingFilterActions mt={0} className={classes.filterActions}>
               <Button
                 variant="transparent"
+                className={classes.collapseToggle}
                 rightSection={
                   searchExpanded ? (
                     <IconChevronUp size={16} />
@@ -526,9 +589,6 @@ export default function PersonReportPage() {
                 onClick={() => setSearchExpanded((v) => !v)}>
                 {searchExpanded ? "收起" : "展开"}
               </Button>
-            </Group>
-
-            <SettingFilterActions mt={0}>
               <Button
                 variant="default"
                 leftSection={<IconRefresh size={16} />}
@@ -541,6 +601,7 @@ export default function PersonReportPage() {
                 重置
               </Button>
               <Button
+                color="#1874ff"
                 leftSection={<IconSearch size={16} />}
                 onClick={() => {
                   setAppliedFilters(filters)
@@ -550,111 +611,98 @@ export default function PersonReportPage() {
                 查询
               </Button>
             </SettingFilterActions>
-          </Group>
+          </div>
           <Collapse in={searchExpanded} transitionDuration={150} animateOpacity>
-            <SimpleGrid cols={{ base: 1, sm: 2, md: 3, lg: 4 }} spacing="sm">
-              <DateInput
-                label="开始日期"
-                locale="zh-cn"
-                value={filters.date_start}
-                onChange={(e) =>
-                  setFilters((s) => ({
-                    ...s,
-                    date_start: dayjs(e).format("YYYY-MM-DD"),
-                  }))
-                }
-              />
-              <DateInput
-                label="结束日期"
-                locale="zh-cn"
-                value={filters.date_end}
-                onChange={(e) => {
-                  setFilters((s) => ({
-                    ...s,
-                    date_end: dayjs(e).format("YYYY-MM-DD"),
-                  }))
-                }}
-              />
-              <MultiSelect
-                label="项目名称"
-                data={projectOptions}
-                searchable
-                clearable
-                value={filters.project_id}
-                onChange={(v) => setFilters((s) => ({ ...s, project_id: v }))}
-              />
-              <MultiSelect
-                label="任务组长"
-                data={leaderOptions}
-                searchable
-                clearable
-                value={filters.leader_uid}
-                onChange={(v) => setFilters((s) => ({ ...s, leader_uid: v }))}
-              />
-              <Select
-                label="规定类型"
-                data={setTypeOpts}
-                searchable
-                clearable
-                value={filters.set_type || null}
-                onChange={(value) =>
-                  setFilters((s) => ({ ...s, set_type: value ?? "" }))
-                }
-              />
-              <Select
-                label="出勤类型"
-                data={actualTypeOpts}
-                searchable
-                clearable
-                value={filters.actual_type || null}
-                onChange={(value) =>
-                  setFilters((s) => ({ ...s, actual_type: value ?? "" }))
-                }
-              />
-              <Select
-                label="工作类别"
-                data={workTypeOpts}
-                searchable
-                clearable
-                value={filters.work_type || null}
-                onChange={(value) =>
-                  setFilters((s) => ({ ...s, work_type: value ?? "" }))
-                }
-              />
-              <Select
-                label="核算方式"
-                data={accountTypeOpts}
-                searchable
-                clearable
-                value={filters.accounting_type || null}
-                onChange={(value) =>
-                  setFilters((s) => ({ ...s, accounting_type: value ?? "" }))
-                }
-              />
-              <Select
-                label="绩效核算"
-                data={performanceOpts}
-                searchable
-                clearable
-                value={filters.performance_accounting || null}
-                onChange={(value) =>
-                  setFilters((s) => ({
-                    ...s,
-                    performance_accounting: value ?? "",
-                  }))
-                }
-              />
-              <Select
-                label="对象类型"
-                data={objTypeOpts}
-                searchable
-                clearable
-                value={filters.obj_type || null}
-                onChange={(value) =>
-                  setFilters((s) => ({ ...s, obj_type: value ?? "" }))
-                }
-              />
-            </SimpleGrid>
+            <div className={classes.filterExpandedGrid}>
+              <InlineFilterField label="任务组长">
+                <MultiSelect
+                  data={leaderOptions}
+                  searchable
+                  clearable
+                  placeholder="请选择组长"
+                  value={filters.leader_uid}
+                  onChange={(v) => setFilters((s) => ({ ...s, leader_uid: v }))}
+                />
+              </InlineFilterField>
+              <InlineFilterField label="规定类型">
+                <Select
+                  data={setTypeOpts}
+                  searchable
+                  clearable
+                  placeholder="请选择"
+                  value={filters.set_type || null}
+                  onChange={(value) =>
+                    setFilters((s) => ({ ...s, set_type: value ?? "" }))
+                  }
+                />
+              </InlineFilterField>
+              <InlineFilterField label="出勤类型">
+                <Select
+                  data={actualTypeOpts}
+                  searchable
+                  clearable
+                  placeholder="请选择"
+                  value={filters.actual_type || null}
+                  onChange={(value) =>
+                    setFilters((s) => ({ ...s, actual_type: value ?? "" }))
+                  }
+                />
+              </InlineFilterField>
+              <InlineFilterField label="工作类别">
+                <Select
+                  data={workTypeOpts}
+                  searchable
+                  clearable
+                  placeholder="请选择"
+                  value={filters.work_type || null}
+                  onChange={(value) =>
+                    setFilters((s) => ({ ...s, work_type: value ?? "" }))
+                  }
+                />
+              </InlineFilterField>
+              <InlineFilterField label="核算方式">
+                <Select
+                  data={accountTypeOpts}
+                  searchable
+                  clearable
+                  placeholder="请选择"
+                  value={filters.accounting_type || null}
+                  onChange={(value) =>
+                    setFilters((s) => ({
+                      ...s,
+                      accounting_type: value ?? "",
+                    }))
+                  }
+                />
+              </InlineFilterField>
+              <InlineFilterField label="绩效核算">
+                <Select
+                  data={performanceOpts}
+                  searchable
+                  clearable
+                  placeholder="请选择"
+                  value={filters.performance_accounting || null}
+                  onChange={(value) =>
+                    setFilters((s) => ({
+                      ...s,
+                      performance_accounting: value ?? "",
+                    }))
+                  }
+                />
+              </InlineFilterField>
+              <InlineFilterField label="对象类型">
+                <Select
+                  data={objTypeOpts}
+                  searchable
+                  clearable
+                  placeholder="请选择"
+                  value={filters.obj_type || null}
+                  onChange={(value) =>
+                    setFilters((s) => ({ ...s, obj_type: value ?? "" }))
+                  }
+                />
+              </InlineFilterField>
+            </div>
           </Collapse>
         </Stack>
       </SettingFilterPanel>
@@ -663,81 +711,87 @@ export default function PersonReportPage() {
         style={{
           flex: 1,
           minHeight: 0,
+          padding: 0,
           display: "flex",
           flexDirection: "column",
-          gap: 12,
         }}>
-        <SettingListHeader
-          title="我的日报"
-          count={`${totalItems} 条`}
-          actions={
-            <SettingHeaderActions>
-              <Button
-                leftSection={<IconPlus size={16} />}
-                onClick={() => {
-                  setEditingRecord(null)
-                  setModalOpened(true)
-                }}>
-                填写日报
-              </Button>
-              <Button
-                variant="default"
-                leftSection={<IconRefresh size={16} />}
-                onClick={load}
-                loading={loading}>
-                刷新
-              </Button>
-            </SettingHeaderActions>
-          }
-        />
-        <Stack gap={12} align="stretch" style={{ flex: 1, minHeight: 0 }}>
-          <SettingDataTable<Daily.DailyWorkList>
-            width="100%"
-            minHeight={0}
-            style={{ width: "100%", flex: 1 }}
-            pinFirstColumn
-            pinLastColumn
-            scrollAreaProps={{ type: "auto" }}
-            fetching={loading}
-            records={records}
-            columns={columns}
-            totalRecords={totalItems}
-            recordsPerPage={pageSize}
-            page={page}
-            onPageChange={setPage}
-            onRecordsPerPageChange={(v) => {
-              setPageSize(v)
-              setPage(1)
-            }}
-            recordsPerPageOptions={recordsPerPageOptions}
-            sortStatus={sortStatus}
-            onSortStatusChange={(s) => {
-              setSortStatus(s)
-              setPage(1)
-            }}
-            renderPagination={({ Controls }) => (
-              <Group
-                justify="space-between"
-                align="center"
-                w="100%"
-                gap="sm"
-                wrap="wrap">
-                <Group gap="xs" align="center" wrap="wrap">
-                  <Controls.Text />
-                  <Controls.PageSizeSelector />
+        <div className={classes.contentPanelBody}>
+          <div className={classes.tableActionBar}>
+            <SettingListHeader
+              title="日报列表"
+              count={`共 ${totalItems} 条记录`}
+              actions={
+                <SettingHeaderActions>
                   <Button
-                    variant="light"
-                    color="gray"
-                    size="xs"
-                    onClick={openCustomPageSizeModal}>
-                    自定义每页条数
+                    color="#1874ff"
+                    leftSection={<IconPlus size={16} />}
+                    onClick={() => {
+                      setEditingRecord(null)
+                      setModalOpened(true)
+                    }}>
+                    新建日报
                   </Button>
+                  <Button
+                    variant="default"
+                    leftSection={<IconRefresh size={16} />}
+                    onClick={load}
+                    loading={loading}>
+                    刷新
+                  </Button>
+                </SettingHeaderActions>
+              }
+            />
+          </div>
+          <Stack gap={12} align="stretch" style={{ flex: 1, minHeight: 0 }}>
+            <SettingDataTable<Daily.DailyWorkList>
+              width="100%"
+              minHeight={0}
+              style={{ width: "100%", flex: 1 }}
+              pinFirstColumn
+              pinLastColumn
+              scrollAreaProps={{ type: "auto" }}
+              fetching={loading}
+              records={records}
+              columns={columns}
+              totalRecords={totalItems}
+              recordsPerPage={pageSize}
+              page={page}
+              paginationText={({ from, to, totalRecords }) =>
+                `显示 ${from}-${to} 条，共 ${totalRecords} 条记录`
+              }
+              onPageChange={setPage}
+              onRecordsPerPageChange={(v) => {
+                setPageSize(v)
+                setPage(1)
+              }}
+              recordsPerPageOptions={recordsPerPageOptions}
+              sortStatus={sortStatus}
+              onSortStatusChange={(s) => {
+                setSortStatus(s)
+                setPage(1)
+              }}
+              renderPagination={({ Controls }) => (
+                <Group
+                  justify="space-between"
+                  align="center"
+                  w="100%"
+                  gap="sm"
+                  wrap="wrap">
+                  <Group gap="xs" align="center" wrap="wrap">
+                    <Controls.Text />
+                    <Controls.PageSizeSelector />
+                    <Button
+                      variant="default"
+                      size="sm"
+                      onClick={openCustomPageSizeModal}>
+                      自定义每页条数
+                    </Button>
+                  </Group>
+                  <Controls.Pagination />
                 </Group>
-                <Controls.Pagination />
-              </Group>
-            )}
-          />
-          {/* <SettingPanel radius="md" p="sm">
+              )}
+            />
+            {/* <SettingPanel radius="md" p="sm">
             <Group justify="space-between" wrap="wrap">
               <Text size="sm" fw={700}>
                 当前页总计
@@ -755,7 +809,8 @@ export default function PersonReportPage() {
               </Group>
             </Group>
           </SettingPanel> */}
-        </Stack>
+          </Stack>
+        </div>
       </SettingContentPanel>
 
       <DailyReportModal
@@ -789,7 +844,9 @@ export default function PersonReportPage() {
             <Button variant="default" onClick={closeCustomPageSizeModal}>
               取消
             </Button>
-            <Button onClick={handleAddCustomPageSize}>添加</Button>
+            <Button color="#1874ff" onClick={handleAddCustomPageSize}>
+              添加
+            </Button>
           </Group>
         </Stack>
       </Modal>