refactor(ui): 深度翻新仪表盘与边缘配置页的骨架与组件

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>
   );
 }