统一业务台账首屏布局（05-30-fix-payment-ledger-layout-consistency）

client/src/pages/ReimbursementsPage.tsx

@@ -1,7 +1,7 @@
 import { useMemo, useState } from "react";
 import { Link, useNavigate, useSearchParams } from "react-router-dom";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { ArrowRight, Clock3, FilePenLine, RotateCcw, Wrench } from "lucide-react";
+import { Clock3, FilePenLine, RotateCcw, Wrench } from "lucide-react";
 import { isApiError } from "../api/types";
 import { mapApiErrorMessage } from "../api/errorMessages";
 import { fetchMyDelegations } from "../api/delegations";
@@ -53,32 +53,24 @@ const REIMBURSEMENT_TASK_STATUS_OPTIONS = [
   {
     value: "rejected",
     title: "被驳回待补正",
-    idleNote: "暂无需要补正的报销",
-    activeNote: "优先补齐说明或附件后重新提交",
     icon: RotateCcw,
     accentClass: "border-red-200 bg-red-50 text-red-700",
   },
   {
     value: "draft",
     title: "草稿待完善",
-    idleNote: "还没有报销草稿",
-    activeNote: "继续完善明细、发票和附件",
     icon: FilePenLine,
     accentClass: "border-amber-200 bg-amber-50 text-amber-700",
   },
   {
     value: "reviewing",
     title: "审批中进度",
-    idleNote: "暂无审批中的报销",
-    activeNote: "查看当前节点和处理进度",
     icon: Clock3,
     accentClass: "border-sky-200 bg-sky-50 text-sky-700",
   },
 ] satisfies Array<{
   value: ReimbursementStatus;
   title: string;
-  idleNote: string;
-  activeNote: string;
   icon: typeof RotateCcw;
   accentClass: string;
 }>;
@@ -360,7 +352,7 @@ export function ReimbursementsPage() {
         </p>
       ) : null}
 
-      <section className="grid gap-3 md:grid-cols-3" aria-label="我的报销任务">
+      <section className="flex flex-wrap gap-2" aria-label="我的报销任务">
         {REIMBURSEMENT_TASK_STATUS_OPTIONS.map((item) => {
           const Icon = item.icon;
           const count = taskSummaryTotalByStatus[item.value];
@@ -369,29 +361,19 @@ export function ReimbursementsPage() {
 
           return (
             <button
-              className={`card-std min-h-[124px] p-4 text-left transition hover:border-primary/40 hover:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-200 ${
-                active ? "border-primary/40 bg-primary/5" : ""
+              className={`inline-flex min-h-10 items-center gap-2 rounded-full border px-3 py-1.5 text-sm transition hover:border-primary/40 hover:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-200 ${
+                active ? "border-primary/40 bg-primary/5 text-primary" : "border-zinc-200 bg-white text-zinc-700"
               }`}
               data-testid={`reimbursements-task-card-${item.value}`}
               key={item.value}
               onClick={() => setSearchParams({ status: item.value, page: "1", scope: "own" })}
               type="button"
             >
-              <div className="flex items-start justify-between gap-3">
-                <span className={`flex size-9 items-center justify-center rounded-lg border ${item.accentClass}`}>
-                  <Icon aria-hidden className="size-4" />
-                </span>
-                <ArrowRight aria-hidden className="mt-1 size-4 text-zinc-300" />
-              </div>
-              <div className="mt-4 flex items-end justify-between gap-3">
-                <div className="min-w-0">
-                  <div className="text-sm font-semibold text-zinc-900">{item.title}</div>
-                  <div className="mt-1 text-xs leading-5 text-zinc-500">
-                    {typeof count === "number" && count > 0 ? item.activeNote : item.idleNote}
-                  </div>
-                </div>
-                <div className="text-3xl font-semibold tabular-nums text-zinc-950">{displayCount}</div>
-              </div>
+              <span className={`flex size-7 items-center justify-center rounded-full border ${item.accentClass}`}>
+                <Icon aria-hidden className="size-3.5" />
+              </span>
+              <span className="font-medium">{item.title}</span>
+              <span className="font-semibold tabular-nums text-zinc-950">{displayCount}</span>
             </button>
           );
         })}