MIF7T-1/MIF7T-7 收口真机反馈并统一移动体验

client/src/pages/MobileReimbursementsPage.tsx

@@ -67,51 +67,45 @@ function ReimbursementCard({
   isDeleting: boolean;
   onDelete: (item: ReimbursementListItem) => void;
 }) {
-  const actionLabel = item.status === "draft" || item.status === "rejected" ? "继续编辑" : "查看详情";
   const displayCode = resolveReimbursementDisplayCode(item);
 
   return (
     <article className="mobile-card" data-testid="mobile-reimbursement-card">
-      <div className="flex items-start justify-between gap-3">
-        <div className="min-w-0">
-          <div className="truncate text-sm font-semibold text-zinc-900">{displayCode}</div>
-          <div className="mt-1 text-xs text-zinc-500">{formatDate(item.reimbursementDate)}</div>
+      <Link className="block" to={`/mobile/reimbursements/${item.id}`} state={{ from: currentMobileSource }}>
+        <div className="flex items-start justify-between gap-3">
+          <div className="min-w-0">
+            <div className="truncate text-sm font-semibold text-zinc-900">{displayCode}</div>
+            <div className="mt-1 text-xs text-zinc-500">{formatDate(item.reimbursementDate)}</div>
+          </div>
+          <span className="badge-neutral shrink-0">{STATUS_LABEL[item.status]}</span>
         </div>
-        <span className="badge-neutral shrink-0">{STATUS_LABEL[item.status]}</span>
-      </div>
 
-      <div className="mobile-info-grid mt-4 text-sm">
-        <div>
-          <div className="text-xs text-zinc-500">金额</div>
-          <div className="mt-1 text-lg font-semibold text-zinc-900">{formatCurrency(item.totalAmount)}</div>
+        <div className="mt-3 text-sm text-zinc-600">
+          金额：{formatCurrency(item.totalAmount)}
+          {" · "}
+          报销人：{item.owner?.name ?? item.submitter?.name ?? "-"}
         </div>
-        <div>
-          <div className="text-xs text-zinc-500">报销人</div>
-          <div className="mt-1 truncate text-zinc-900">{item.owner?.name ?? item.submitter?.name ?? "-"}</div>
-        </div>
-      </div>
 
-      {item.description ? <p className="mt-3 line-clamp-2 text-sm text-zinc-500">{item.description}</p> : null}
+        {item.description ? <p className="mt-2 line-clamp-2 text-sm text-zinc-500">{item.description}</p> : null}
+      </Link>
 
-      <div className={canDeleteDraft ? "mobile-two-action-grid mt-4" : "mt-4"}>
-        <Button asChild className="w-full" type="button">
-          <Link to={`/mobile/reimbursements/${item.id}`} state={{ from: currentMobileSource }}>
-            {actionLabel}
-          </Link>
-        </Button>
-        {canDeleteDraft ? (
-          <Button
-            className="w-full"
-            data-testid="mobile-reimbursement-delete"
-            disabled={isDeleting}
-            onClick={() => onDelete(item)}
-            type="button"
-            variant="destructive"
-          >
-            删除草稿
-          </Button>
-        ) : null}
-      </div>
+      {canDeleteDraft ? (
+        <details className="mt-3 text-sm">
+          <summary className="cursor-pointer select-none text-zinc-500">更多</summary>
+          <div className="mt-2">
+            <Button
+              data-testid="mobile-reimbursement-delete"
+              disabled={isDeleting}
+              onClick={() => onDelete(item)}
+              size="sm"
+              type="button"
+              variant="destructive"
+            >
+              删除草稿
+            </Button>
+          </div>
+        </details>
+      ) : null}
     </article>
   );
 }