From fe55848f7567d77d53def1be0fa5997247656fc4 Mon Sep 17 00:00:00 2001
From: shunli <shunli@qq.com>
Date: Fri, 6 Mar 2026 09:54:14 +0800
Subject: [PATCH] =?UTF-8?q?refactor(ui):=20=E6=B7=B1=E5=BA=A6=E7=BF=BB?=
 =?UTF-8?q?=E6=96=B0=E4=BB=AA=E8=A1=A8=E7=9B=98=E4=B8=8E=E8=BE=B9=E7=BC=98?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=E9=A1=B5=E7=9A=84=E9=AA=A8=E6=9E=B6=E4=B8=8E?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/pages/ApprovalRulesPage.tsx  |  9 +++----
 client/src/pages/BudgetsPage.tsx        | 30 +++++++++++-----------
 client/src/pages/DashboardPage.tsx      | 34 ++++++++++++-------------
 client/src/pages/DelegationsPage.tsx    | 23 ++++++++---------
 client/src/pages/DepartmentsPage.tsx    |  9 +++----
 client/src/pages/FeatureFlagsPage.tsx   |  5 ++--
 client/src/pages/NotificationsPage.tsx  |  5 ++--
 client/src/pages/ReimbursementsPage.tsx |  4 +--
 client/src/pages/WorkflowTasksPage.tsx  |  5 ++--
 9 files changed, 58 insertions(+), 66 deletions(-)

diff --git a/client/src/pages/ApprovalRulesPage.tsx b/client/src/pages/ApprovalRulesPage.tsx
index 0d0efddd..662608e3 100644
--- a/client/src/pages/ApprovalRulesPage.tsx
+++ b/client/src/pages/ApprovalRulesPage.tsx
@@ -11,7 +11,6 @@ import {
 } from "../api/approvalRules";
 import { PageHeader } from "../components/common/PageHeader";
 import { Button } from "../components/ui/button";
-import { Card } from "../components/ui/card";
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "../components/ui/dialog";
 import { Input } from "../components/ui/input";
 import { Label } from "../components/ui/label";
@@ -156,7 +155,7 @@ export function ApprovalRulesPage() {
         </p>
       ) : null}
 
-      <Card className="space-y-4 p-6">
+      <div className="card-std space-y-4">
         <h3 className="text-base font-semibold text-zinc-900">新建审批规则</h3>
 
         <div className="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
@@ -279,9 +278,9 @@ export function ApprovalRulesPage() {
             </Button>
           </div>
         </div>
-      </Card>
+      </div>
 
-      <Card className="space-y-4 p-6">
+      <div className="card-std space-y-4">
         <h3 className="text-base font-semibold text-zinc-900">规则列表</h3>
 
         {listQuery.isLoading ? <TableSkeleton columns={6} rows={5} /> : null}
@@ -368,7 +367,7 @@ export function ApprovalRulesPage() {
             </Table>
           </div>
         ) : null}
-      </Card>
+      </div>
 
       <ConfirmDialog
         open={confirmToggleRule !== null}
diff --git a/client/src/pages/BudgetsPage.tsx b/client/src/pages/BudgetsPage.tsx
index a87911ed..9b3337cd 100644
--- a/client/src/pages/BudgetsPage.tsx
+++ b/client/src/pages/BudgetsPage.tsx
@@ -138,11 +138,11 @@ export function BudgetsPage() {
         </p>
       ) : null}
 
-      <Card className="space-y-3 p-6">
+      <div className="card-std space-y-3">
         <h3 className="text-base font-semibold text-zinc-900">筛选条件</h3>
         <div className="grid gap-3 md:grid-cols-3">
           <select
-            className="h-11 rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm"
+            className="select-std"
             value={status}
             onChange={(event) => {
               setStatus(event.target.value as "active" | "archived" | "");
@@ -155,7 +155,7 @@ export function BudgetsPage() {
           </select>
 
           <select
-            className="h-11 rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm"
+            className="select-std"
             value={departmentId}
             onChange={(event) => {
               setDepartmentId(event.target.value);
@@ -178,26 +178,26 @@ export function BudgetsPage() {
             刷新列表
           </Button>
         </div>
-      </Card>
+      </div>
 
       {canManageBudget ? (
-        <Card className="space-y-3 p-6">
+        <div className="card-std space-y-3">
           <h3 className="text-base font-semibold text-zinc-900">新建预算池</h3>
           <div className="grid gap-3 md:grid-cols-3">
             <input
-              className="h-11 rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm"
+              className="input-std"
               placeholder="编码（例如 BGT-2026-RD）"
               value={code}
               onChange={(event) => setCode(event.target.value)}
             />
             <input
-              className="h-11 rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm"
+              className="input-std"
               placeholder="名称"
               value={name}
               onChange={(event) => setName(event.target.value)}
             />
             <select
-              className="h-11 rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm"
+              className="select-std"
               value={formDepartmentId}
               onChange={(event) => setFormDepartmentId(event.target.value)}
             >
@@ -209,25 +209,25 @@ export function BudgetsPage() {
               ))}
             </select>
             <input
-              className="h-11 rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm"
+              className="input-std"
               type="date"
               value={periodStart}
               onChange={(event) => setPeriodStart(event.target.value)}
             />
             <input
-              className="h-11 rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm"
+              className="input-std"
               type="date"
               value={periodEnd}
               onChange={(event) => setPeriodEnd(event.target.value)}
             />
             <input
-              className="h-11 rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm"
+              className="input-std"
               placeholder="预算总额（例如 100000.00）"
               value={allocatedAmount}
               onChange={(event) => setAllocatedAmount(event.target.value)}
             />
             <input
-              className="h-11 rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm"
+              className="input-std"
               type="number"
               min={1}
               max={100}
@@ -250,10 +250,10 @@ export function BudgetsPage() {
           >
             {createMutation.isPending ? "创建中..." : "创建预算池"}
           </Button>
-        </Card>
+        </div>
       ) : null}
 
-      <Card className="space-y-3 p-6">
+      <div className="card-std space-y-3">
         <h3 className="text-base font-semibold text-zinc-900">预算池列表</h3>
 
         {budgetsQuery.isLoading ? <TableSkeleton columns={7} rows={4} /> : null}
@@ -319,7 +319,7 @@ export function BudgetsPage() {
             <Pagination page={page} totalPages={totalPages} onPageChange={setPage} />
           </>
         ) : null}
-      </Card>
+      </div>
 
       <ConfirmDialog
         open={Boolean(confirmArchiveId)}
diff --git a/client/src/pages/DashboardPage.tsx b/client/src/pages/DashboardPage.tsx
index 33b384a3..d9195a6e 100644
--- a/client/src/pages/DashboardPage.tsx
+++ b/client/src/pages/DashboardPage.tsx
@@ -171,7 +171,7 @@ export function DashboardPage() {
             </label>
             <input
               id="dashboard-date-from"
-              className="h-11 w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm"
+              className="input-std"
               type="date"
               value={dateFrom}
               onChange={(event) => setDateFrom(event.target.value)}
@@ -183,7 +183,7 @@ export function DashboardPage() {
             </label>
             <input
               id="dashboard-date-to"
-              className="h-11 w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm"
+              className="input-std"
               type="date"
               value={dateTo}
               onChange={(event) => setDateTo(event.target.value)}
@@ -195,7 +195,7 @@ export function DashboardPage() {
             </label>
             <select
               id="dashboard-department-id"
-              className="h-11 w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm"
+              className="select-std"
               value={departmentId}
               onChange={(event) => setDepartmentId(event.target.value)}
             >
@@ -229,34 +229,34 @@ export function DashboardPage() {
       </Card>
 
       <div className="grid gap-4 md:grid-cols-4">
-        <Card className="p-4">
+        <div className="card-std space-y-1">
           <p className="text-xs text-zinc-500">报销单总数</p>
           <p className="mt-1 text-2xl font-semibold text-zinc-900">
             {loading ? "..." : overviewQuery.data?.totalCount ?? 0}
           </p>
-        </Card>
-        <Card className="p-4">
+        </div>
+        <div className="card-std space-y-1">
           <p className="text-xs text-zinc-500">报销总金额</p>
           <p className="mt-1 text-2xl font-semibold text-zinc-900">
             {loading ? "..." : toCurrency(overviewQuery.data?.totalAmount)}
           </p>
-        </Card>
-        <Card className="p-4">
+        </div>
+        <div className="card-std space-y-1">
           <p className="text-xs text-zinc-500">已付款金额</p>
           <p className="mt-1 text-2xl font-semibold text-zinc-900">
             {loading ? "..." : toCurrency(overviewQuery.data?.paidAmount)}
           </p>
-        </Card>
-        <Card className="p-4">
+        </div>
+        <div className="card-std space-y-1">
           <p className="text-xs text-zinc-500">审批中数量</p>
           <p className="mt-1 text-2xl font-semibold text-zinc-900">
             {loading ? "..." : overviewQuery.data?.reviewingCount ?? 0}
           </p>
-        </Card>
+        </div>
       </div>
 
       <div className="grid gap-4 lg:grid-cols-2">
-        <Card className="space-y-3 p-6">
+        <div className="card-std space-y-4">
           <h3 className="text-base font-semibold text-zinc-900">费用趋势</h3>
           {trendPoints.length ? (
             <div className="space-y-2">
@@ -281,9 +281,9 @@ export function DashboardPage() {
           ) : (
             <p className="text-sm text-zinc-500">暂无趋势数据</p>
           )}
-        </Card>
+        </div>
 
-        <Card className="space-y-3 p-6">
+        <div className="card-std space-y-4">
           <h3 className="text-base font-semibold text-zinc-900">费用分类 TopN</h3>
           {topCategories.length ? (
             <div className="space-y-2">
@@ -310,10 +310,10 @@ export function DashboardPage() {
           ) : (
             <p className="text-sm text-zinc-500">暂无分类统计</p>
           )}
-        </Card>
+        </div>
       </div>
 
-      <Card className="space-y-2 p-6 text-sm">
+      <div className="card-std space-y-2 text-sm">
         <h3 className="text-base font-semibold text-zinc-900">审批效率</h3>
         <p className="text-zinc-700">
           已统计通过单据：
@@ -327,7 +327,7 @@ export function DashboardPage() {
             {approvalEfficiencyQuery.data?.averageHours?.toFixed(2) ?? "0.00"}
           </span>
         </p>
-      </Card>
+      </div>
     </div>
   );
 }
diff --git a/client/src/pages/DelegationsPage.tsx b/client/src/pages/DelegationsPage.tsx
index 882d4fdb..fe99562a 100644
--- a/client/src/pages/DelegationsPage.tsx
+++ b/client/src/pages/DelegationsPage.tsx
@@ -9,7 +9,6 @@ import { PageHeader } from "../components/common/PageHeader";
 import { TableSkeleton } from "../components/common/TableSkeleton";
 import { StatusBadge } from "../components/common/StatusBadge";
 import { Button } from "../components/ui/button";
-import { Card } from "../components/ui/card";
 import { Input } from "../components/ui/input";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../components/ui/table";
 
@@ -80,14 +79,14 @@ export function DelegationsPage() {
         <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">{error}</p>
       ) : null}
 
-      <Card className="space-y-4 p-6">
+      <div className="card-std space-y-4">
         <h3 className="text-base font-semibold text-zinc-900">创建委派</h3>
 
         <div className="grid gap-3 md:grid-cols-2">
           <label className="space-y-1 text-sm">
             <span className="font-medium text-zinc-700">委派给（审批人候选）</span>
             <select
-              className="h-11 w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm"
+              className="select-std"
               data-testid="delegations-create-delegate"
               onChange={(event) => setDelegateEmployeeId(event.target.value)}
               value={delegateEmployeeId}
@@ -107,7 +106,7 @@ export function DelegationsPage() {
           <label className="space-y-1 text-sm">
             <span className="font-medium text-zinc-700">范围</span>
             <select
-              className="h-11 w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm"
+              className="select-std"
               data-testid="delegations-create-scope"
               onChange={(event) => setScope(event.target.value as "all" | "reimbursement_submit")}
               value={scope}
@@ -138,13 +137,13 @@ export function DelegationsPage() {
             {createMutation.isPending ? "创建中..." : "创建委派"}
           </Button>
         </div>
-      </Card>
+      </div>
 
-      <Card className="space-y-4 p-6">
+      <div className="card-std space-y-4">
         <div className="flex flex-wrap items-center justify-between gap-2">
           <h3 className="text-base font-semibold text-zinc-900">我的委派</h3>
           <select
-            className="h-11 rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm"
+            className="select-std w-auto"
             data-testid="delegations-status-filter"
             onChange={(event) =>
               setStatus(event.target.value as "active" | "scheduled" | "expired" | "revoked" | "all")
@@ -164,10 +163,10 @@ export function DelegationsPage() {
           <p className="text-sm text-red-600">
             {isApiError(listQuery.error)
               ? `${listQuery.error.code}: ${mapApiErrorMessage(
-                  listQuery.error.code,
-                  listQuery.error.details,
-                  listQuery.error.message,
-                )}`
+                listQuery.error.code,
+                listQuery.error.details,
+                listQuery.error.message,
+              )}`
               : "加载委派列表失败"}
           </p>
         ) : null}
@@ -256,7 +255,7 @@ export function DelegationsPage() {
             </div>
           </div>
         ) : null}
-      </Card>
+      </div>
     </div>
   );
 }
diff --git a/client/src/pages/DepartmentsPage.tsx b/client/src/pages/DepartmentsPage.tsx
index b7174c59..c11e079f 100644
--- a/client/src/pages/DepartmentsPage.tsx
+++ b/client/src/pages/DepartmentsPage.tsx
@@ -11,7 +11,6 @@ import {
 } from "../api/departments";
 import { PageHeader } from "../components/common/PageHeader";
 import { Button } from "../components/ui/button";
-import { Card } from "../components/ui/card";
 import { Input } from "../components/ui/input";
 import { Label } from "../components/ui/label";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../components/ui/table";
@@ -102,7 +101,7 @@ export function DepartmentsPage() {
         </p>
       ) : null}
 
-      <Card className="space-y-4 p-6">
+      <div className="card-std space-y-4">
         <div className="flex items-center justify-between gap-3">
           <h3 className="text-base font-semibold text-zinc-900">新建部门</h3>
           <Button
@@ -162,9 +161,9 @@ export function DepartmentsPage() {
             </Button>
           </div>
         </div>
-      </Card>
+      </div>
 
-      <Card className="space-y-4 p-6">
+      <div className="card-std space-y-4">
         <h3 className="text-base font-semibold text-zinc-900">部门列表</h3>
 
         {listQuery.isLoading ? <TableSkeleton columns={4} rows={4} /> : null}
@@ -236,7 +235,7 @@ export function DepartmentsPage() {
             </Table>
           </div>
         ) : null}
-      </Card>
+      </div>
 
       <ConfirmDialog
         open={Boolean(confirmArchive)}
diff --git a/client/src/pages/FeatureFlagsPage.tsx b/client/src/pages/FeatureFlagsPage.tsx
index 45f030c2..d4559a59 100644
--- a/client/src/pages/FeatureFlagsPage.tsx
+++ b/client/src/pages/FeatureFlagsPage.tsx
@@ -14,7 +14,6 @@ import { isApiError } from "../api/types";
 import { PageHeader } from "../components/common/PageHeader";
 import { TableSkeleton } from "../components/common/TableSkeleton";
 import { Button } from "../components/ui/button";
-import { Card } from "../components/ui/card";
 import { Label } from "../components/ui/label";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../components/ui/table";
 
@@ -139,7 +138,7 @@ export function FeatureFlagsPage() {
         <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">{error}</p>
       ) : null}
 
-      <Card className="space-y-4 p-6">
+      <div className="card-std space-y-4">
         <h3 className="text-base font-semibold text-zinc-900">开关列表</h3>
 
         {flagsQuery.isLoading ? <TableSkeleton columns={6} rows={2} /> : null}
@@ -346,7 +345,7 @@ export function FeatureFlagsPage() {
             </Table>
           </div>
         ) : null}
-      </Card>
+      </div>
     </div>
   );
 }
diff --git a/client/src/pages/NotificationsPage.tsx b/client/src/pages/NotificationsPage.tsx
index 1896dde4..a176ae0a 100644
--- a/client/src/pages/NotificationsPage.tsx
+++ b/client/src/pages/NotificationsPage.tsx
@@ -7,7 +7,6 @@ import { PageHeader } from "../components/common/PageHeader";
 import { TableSkeleton } from "../components/common/TableSkeleton";
 import { Pagination } from "../components/common/Pagination";
 import { Button } from "../components/ui/button";
-import { Card } from "../components/ui/card";
 import {
   Table,
   TableBody,
@@ -80,7 +79,7 @@ export function NotificationsPage() {
         }
       />
 
-      <Card className="space-y-4 p-6">
+      <div className="card-std space-y-4">
         <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
           <Tabs
             data-testid="notifications-filter-tabs"
@@ -193,7 +192,7 @@ export function NotificationsPage() {
           onPageChange={(p) => setSearchParams({ unreadOnly: unreadOnly ? "1" : "0", page: String(p) })}
           testIdPrefix="notifications"
         />
-      </Card>
+      </div>
     </div>
   );
 }
diff --git a/client/src/pages/ReimbursementsPage.tsx b/client/src/pages/ReimbursementsPage.tsx
index b79e275a..b97893ca 100644
--- a/client/src/pages/ReimbursementsPage.tsx
+++ b/client/src/pages/ReimbursementsPage.tsx
@@ -15,9 +15,7 @@ import { TableSkeleton } from "../components/common/TableSkeleton";
 import { StatusBadge } from "../components/common/StatusBadge";
 import { Pagination } from "../components/common/Pagination";
 import { Button } from "../components/ui/button";
-import { Card } from "../components/ui/card";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../components/ui/dropdown-menu";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../components/ui/table";
 import { Tabs, TabsList, TabsTrigger } from "../components/ui/tabs";
 
 const PAGE_SIZE = 20;
@@ -290,7 +288,7 @@ export function ReimbursementsPage() {
                     <td className="table-td"><StatusBadge status={item.status} /></td>
                     <td className="table-td-strong">
                       {item.totalAmount != null
-                        ? new Intl.NumberFormat("zh-CN", { style: "currency", currency: "CNY" }).format(item.totalAmount)
+                        ? new Intl.NumberFormat("zh-CN", { style: "currency", currency: "CNY" }).format(Number(item.totalAmount))
                         : "-"}
                     </td>
                     <td className="table-td">
diff --git a/client/src/pages/WorkflowTasksPage.tsx b/client/src/pages/WorkflowTasksPage.tsx
index 26951168..e3f5a6b9 100644
--- a/client/src/pages/WorkflowTasksPage.tsx
+++ b/client/src/pages/WorkflowTasksPage.tsx
@@ -8,7 +8,6 @@ import { Pagination } from "../components/common/Pagination";
 import { StatusBadge } from "../components/common/StatusBadge";
 import { TableSkeleton } from "../components/common/TableSkeleton";
 import { Button } from "../components/ui/button";
-import { Card } from "../components/ui/card";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../components/ui/table";
 import { Tabs, TabsList, TabsTrigger } from "../components/ui/tabs";
 
@@ -38,7 +37,7 @@ export function WorkflowTasksPage() {
     <div className="space-y-6">
       <PageHeader title="待我处理" subtitle="审批待办列表（支持筛选与详情动作联动）。" />
 
-      <Card className="space-y-4 p-6">
+      <div className="card-std space-y-4">
         <Tabs
           data-testid="workflow-tasks-status-tabs"
           value={status}
@@ -132,7 +131,7 @@ export function WorkflowTasksPage() {
           onPageChange={(p) => setSearchParams({ status, page: String(p) })}
           testIdPrefix="workflow-tasks"
         />
-      </Card>
+      </div>
     </div>
   );
 }