优化详情与移动关键页视觉 Wave3（05-27-pc-detail-mobile-visual-wave3）

client/src/index.css

@@ -429,6 +429,104 @@
     @apply grid gap-6 xl:grid-cols-[minmax(0,1.4fr),minmax(320px,0.8fr)];
   }
 
+  .detail-workspace-grid {
+    @apply grid gap-5 xl:grid-cols-[minmax(0,1.45fr),minmax(300px,0.72fr)];
+  }
+
+  .detail-command-panel {
+    border-color: rgba(203, 213, 225, 0.92);
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.9));
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-xs);
+    @apply border p-3.5 md:p-4;
+  }
+
+  .detail-fact-grid {
+    @apply grid gap-2.5 md:grid-cols-2;
+  }
+
+  .detail-fact-card {
+    border-color: rgba(226, 232, 240, 0.94);
+    background: rgba(255, 255, 255, 0.92);
+    border-radius: var(--radius-sm);
+    @apply border px-3 py-2.5 text-sm;
+  }
+
+  .detail-fact-card__label {
+    color: var(--color-text-tertiary);
+    @apply text-xs font-semibold;
+  }
+
+  .detail-fact-card__value {
+    color: var(--color-text-primary);
+    @apply mt-1 break-words font-medium;
+  }
+
+  .detail-evidence-card {
+    border-color: rgba(226, 232, 240, 0.94);
+    background: rgba(248, 250, 252, 0.72);
+    border-radius: var(--radius-sm);
+    @apply border px-3.5 py-3 text-sm;
+  }
+
+  .detail-evidence-card--accent {
+    border-color: rgba(0, 57, 138, 0.2);
+    background: rgba(0, 57, 138, 0.045);
+  }
+
+  .detail-timeline {
+    @apply space-y-2.5;
+  }
+
+  .detail-timeline-item {
+    border-color: rgba(226, 232, 240, 0.94);
+    background: rgba(255, 255, 255, 0.94);
+    border-radius: var(--radius-sm);
+    @apply border px-3 py-2.5 text-sm;
+  }
+
+  .detail-timeline-item--current {
+    border-color: rgba(0, 57, 138, 0.28);
+    background: rgba(0, 57, 138, 0.055);
+  }
+
+  .detail-timeline-item--done {
+    border-color: rgba(16, 185, 129, 0.28);
+    background: rgba(236, 253, 245, 0.88);
+  }
+
+  .detail-action-stack {
+    @apply grid gap-3;
+  }
+
+  .detail-action-card {
+    border-color: rgba(226, 232, 240, 0.94);
+    background: rgba(255, 255, 255, 0.96);
+    border-radius: var(--radius-sm);
+    @apply border p-3.5;
+  }
+
+  .notification-inbox {
+    @apply space-y-3;
+  }
+
+  .notification-row-card {
+    border-color: rgba(226, 232, 240, 0.94);
+    background: rgba(255, 255, 255, 0.96);
+    border-radius: var(--radius-sm);
+    @apply border px-4 py-3 transition-colors hover:border-slate-300 hover:bg-slate-50/50;
+  }
+
+  .notification-row-card--unread {
+    border-color: rgba(0, 57, 138, 0.22);
+    background: rgba(0, 57, 138, 0.035);
+  }
+
+  .notification-row-card__meta {
+    color: var(--color-text-tertiary);
+    @apply text-xs font-medium;
+  }
+
   .badge-success {
     @apply inline-flex items-center rounded-full bg-emerald-50 px-2.5 py-0.5 text-xs font-semibold text-emerald-700 ring-1 ring-inset ring-emerald-600/15;
   }

client/src/pages/MobileApprovalsPage.tsx

@@ -1022,7 +1022,7 @@ export function MobileApprovalsPage() {
       ) : (
         <PageHeader
           title={canAccessRemoteApprovals ? "审批" : "审批进度"}
-          subtitle={canAccessRemoteApprovals ? "待我审批和已处理。" : "查看我发起的申请进度。"}
+          subtitle={canAccessRemoteApprovals ? "处理待办，查看已处理。" : "查看我发起的申请进度。"}
         />
       )}
 
@@ -1104,14 +1104,14 @@ export function MobileApprovalsPage() {
           <span className={`mobile-section-meta ${isOnline ? "text-emerald-600" : "text-orange-600"}`}>{isOnline ? "在线" : "离线"}</span>
         </div>
 
-        <Tabs value={taskTab} onValueChange={handleTaskTabChange}>
-          <TabsList className="flex w-full justify-start gap-1">
-            <TabsTrigger value="pending">待我审批</TabsTrigger>
-            <TabsTrigger value="completed" disabled={!canUseRemote}>已处理</TabsTrigger>
-          </TabsList>
-        </Tabs>
+        <div className="mobile-command-surface">
+          <Tabs value={taskTab} onValueChange={handleTaskTabChange}>
+            <TabsList className="flex w-full justify-start gap-1">
+              <TabsTrigger value="pending">待我审批</TabsTrigger>
+              <TabsTrigger value="completed" disabled={!canUseRemote}>已处理</TabsTrigger>
+            </TabsList>
+          </Tabs>
 
-        <div className="space-y-3">
           <Input
             data-testid="mobile-approvals-search"
             value={searchInput}
@@ -1119,7 +1119,7 @@ export function MobileApprovalsPage() {
             placeholder="搜索审批"
           />
 
-          <details className="mobile-subcard bg-zinc-50/70 text-sm">
+          <details className="mobile-subcard bg-white text-sm">
             <summary className="cursor-pointer select-none font-medium text-zinc-700">
               筛选与批量
             </summary>
@@ -1318,7 +1318,7 @@ export function MobileApprovalsPage() {
       ) : null}
 
       {isPushDetail ? (
-      <section className="mobile-card mobile-page-stack scroll-mt-4" data-testid="mobile-approvals-detail">
+      <section className="mobile-card mobile-focus-card mobile-page-stack scroll-mt-4" data-testid="mobile-approvals-detail">
         <h3 className="mobile-section-title">处理</h3>
 
         {!selectedTaskId ? <p className="text-sm text-zinc-500">请先选择任务。</p> : null}

client/src/pages/MobileMePage.tsx

@@ -89,9 +89,9 @@ export function MobileMePage() {
 
   return (
     <PageScaffold className="space-y-3 pb-4">
-      <PageHeader title="我的" />
+      <PageHeader title="我的" meta={<span className="badge-neutral">账号与入口</span>} />
 
-      <SectionPanel title="个人信息">
+      <SectionPanel title="个人信息" className="mobile-focus-card">
         <div className="mobile-slot-row mobile-me-profile-row" data-testid="mobile-me-profile-row">
           <div className="mobile-slot-avatar mobile-me-avatar-slot" data-testid="mobile-me-avatar-slot">
             <EmployeeAvatar name={me?.name ?? "员工"} src={profile?.avatarUrl} size="md" />
@@ -122,7 +122,7 @@ export function MobileMePage() {
         </div>
       </SectionPanel>
 
-      <SectionPanel title="更多入口">
+      <SectionPanel title="更多入口" description="常用移动入口集中在这里。">
         <div className="mobile-entry-grid mobile-me-entry-grid" data-testid="mobile-more-links">
           <MobileActionLink to="/mobile/notifications" label="通知中心" icon="notifications" />
           <MobileActionLink to="/mobile/leave" label="请假" icon="event_available" />

client/src/pages/MobileNotificationsPage.tsx

@@ -137,7 +137,14 @@ export function MobileNotificationsPage() {
         />
 
       <section className="mobile-card mobile-page-stack" data-testid="mobile-notifications-list">
-        <div className="mobile-page-stack">
+        <div className="mobile-section-header">
+          <div>
+            <h3 className="mobile-section-title">通知流</h3>
+            <p className="mobile-list-card__subtitle mt-1">未读优先，点击直达业务详情</p>
+          </div>
+        </div>
+
+        <div className="mobile-command-surface">
           <Tabs
             data-testid="mobile-notifications-filter-tabs"
             value={unreadOnly ? "unread" : "all"}
@@ -201,7 +208,7 @@ export function MobileNotificationsPage() {
               <button
                 data-testid="mobile-notification-card"
                 key={item.id}
-                className="mobile-list-card w-full text-left"
+                className={`mobile-list-card w-full text-left ${item.readAt ? "" : "mobile-list-card--unread"}`}
                 type="button"
                 onClick={() => void openNotificationTarget(item, targetLink)}
               >

client/src/pages/MobilePortalPage.tsx

@@ -251,11 +251,14 @@ export function MobilePortalPage() {
 
   return (
     <PageScaffold className="mobile-page-stack">
-      <PageHeader title="今天" />
+      <PageHeader
+        title="今天待办"
+        meta={<span className="badge-neutral">移动工作台</span>}
+      />
 
       {canAccessApprovals && pendingApprovalCount > 0 ? (
-        <section className="mobile-card mobile-page-stack" data-testid="mobile-pending-summary">
-          <div className="mobile-section-header">
+        <section className="mobile-card mobile-focus-card mobile-page-stack" data-testid="mobile-pending-summary">
+          <div className="mobile-section-header mobile-section-header--top">
             <div className="min-w-0">
               <div className="mobile-section-title">待处理</div>
               <div className="mobile-list-card__subtitle mt-1">待我审批</div>
@@ -343,7 +346,7 @@ export function MobilePortalPage() {
 
       <section className="mobile-card mobile-page-stack" data-testid="mobile-today-focus">
         <div className="mobile-section-header">
-          <div className="mobile-section-title">常用</div>
+          <div className="mobile-section-title">常用动作</div>
         </div>
         <div className="mobile-icon-grid" data-testid="mobile-action-grid">
           {actions.map((action) => (

client/src/pages/MobileReimbursementsPage.tsx

@@ -70,7 +70,10 @@ function ReimbursementCard({
   const displayCode = resolveReimbursementDisplayCode(item);
 
   return (
-    <article className="mobile-card" data-testid="mobile-reimbursement-card">
+    <article
+      className={`mobile-list-card ${item.status === "draft" || item.status === "reviewing" ? "mobile-list-card--focus" : ""}`}
+      data-testid="mobile-reimbursement-card"
+    >
       <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">
@@ -204,7 +207,8 @@ export function MobileReimbursementsPage() {
   return (
     <PageScaffold className="space-y-4">
       <PageHeader
-        title="报销"
+        title="移动报销"
+        meta={<span className="badge-neutral">{STATUS_LABEL[status]}</span>}
         actions={
           canCreateExpense ? (
             <Button
@@ -219,7 +223,7 @@ export function MobileReimbursementsPage() {
         }
       />
 
-      <section className="mobile-card">
+      <section className="mobile-card mobile-focus-card">
         <div className="mobile-info-grid">
           <div>
             <div className="text-xs text-zinc-500">当前列表</div>
@@ -232,7 +236,14 @@ export function MobileReimbursementsPage() {
         </div>
       </section>
 
-      <section className="mobile-card" data-testid="mobile-reimbursements-list">
+      <section className="mobile-card mobile-page-stack" data-testid="mobile-reimbursements-list">
+        <div className="mobile-section-header">
+          <div>
+            <h3 className="mobile-section-title">报销记录</h3>
+            <p className="mobile-list-card__subtitle mt-1">按状态查看草稿、审批和付款进度</p>
+          </div>
+        </div>
+        <div className="mobile-command-surface">
         <Tabs value={status} onValueChange={handleStatusChange}>
           <TabsList className="grid h-auto w-full grid-cols-4">
             {STATUS_TABS.map((item) => (
@@ -242,8 +253,9 @@ export function MobileReimbursementsPage() {
             ))}
           </TabsList>
         </Tabs>
+        </div>
 
-        <div className="mt-4 space-y-3">
+        <div className="mobile-page-stack">
           {listQuery.isLoading ? <div className="mobile-empty-state">加载中...</div> : null}
           {listQuery.isError ? (
             <div className="rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-600">

client/src/pages/NotificationsPage.tsx

@@ -8,16 +8,9 @@ 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 { PageScaffold } from "../components/patterns/PageScaffold";
 import { resolveNotificationTargetLink } from "../lib/notificationLinks";
 import { resolveErrorMessage } from "../lib/resolveErrorMessage";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "../components/ui/table";
 import { Tabs, TabsList, TabsTrigger } from "../components/ui/tabs";
 
 const PAGE_SIZE = 20;
@@ -86,10 +79,10 @@ export function NotificationsPage() {
   const notificationItems = listQuery.data?.items ?? [];
 
   return (
-    <div className="space-y-6">
+    <PageScaffold>
       <PageHeader
         title="通知"
-        subtitle="站内通知与待办提醒。"
+        subtitle="事件、待办和业务直达入口。"
         actions={
           <>
             <Button
@@ -108,7 +101,7 @@ export function NotificationsPage() {
         }
       />
 
-      <div className="card-std p-6 space-y-4">
+      <div className="card-std space-y-4 p-4 md:p-5">
         <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
           <div className="flex flex-col gap-3 md:flex-row md:items-center">
             <Tabs
@@ -121,7 +114,7 @@ export function NotificationsPage() {
                 })
               }
             >
-              <TabsList className="flex w-full flex-wrap justify-start gap-1 md:w-auto">
+              <TabsList className="ops-command-bar__tabs !w-full md:!w-auto">
                 <TabsTrigger data-testid="notifications-filter-all" value="all">
                   全部
                 </TabsTrigger>
@@ -153,8 +146,9 @@ export function NotificationsPage() {
             </label>
           </div>
 
-          <div className="text-sm text-zinc-600">
-            未读 {listQuery.data?.unreadCount ?? 0} 条
+          <div className="detail-evidence-card text-sm">
+            <span className="font-semibold text-zinc-900">未读 {listQuery.data?.unreadCount ?? 0}</span>
+            <span className="ml-2 text-zinc-500">/ 共 {listQuery.data?.total ?? 0}</span>
           </div>
         </div>
 
@@ -174,12 +168,12 @@ export function NotificationsPage() {
 
         {!listQuery.isLoading && !listQuery.isError ? (
           <>
-            <div className="space-y-3 md:hidden">
+            <div className="notification-inbox md:hidden">
               {notificationItems.length ? (
                 notificationItems.map((item) => {
                   const targetLink = resolveNotificationTargetLink(item);
                   return (
-                    <div data-testid="notification-mobile-card" key={item.id} className="rounded-lg border border-zinc-200 bg-white p-4">
+                    <div data-testid="notification-mobile-card" key={item.id} className={`notification-row-card ${item.readAt ? "" : "notification-row-card--unread"}`}>
                       <div className="flex items-start justify-between gap-3">
                         <div className="min-w-0">
                           <div className="text-sm font-semibold text-zinc-900">{item.title}</div>
@@ -217,68 +211,56 @@ export function NotificationsPage() {
                 <div className="rounded-lg border border-zinc-200 p-4 text-sm text-zinc-500">暂无通知</div>
               )}
             </div>
-            <div className="hidden rounded-lg border border-zinc-200 md:block">
-            <Table data-testid="notifications-table">
-              <TableHeader>
-                <tr>
-                  <TableHead>标题</TableHead>
-                  <TableHead>时间</TableHead>
-                  <TableHead>状态</TableHead>
-                  <TableHead className="w-40">操作</TableHead>
-                </tr>
-              </TableHeader>
-              <TableBody>
-                {notificationItems.length ? (
-                  notificationItems.map((item) => {
-                    const targetLink = resolveNotificationTargetLink(item);
-                    return (
-                      <TableRow data-testid="notification-row" key={item.id}>
-                        <TableCell>
-                          <div className="font-medium text-zinc-900">{item.title}</div>
-                          {item.body ? (
-                            <div className="mt-1 text-xs text-zinc-500">{item.body}</div>
-                          ) : null}
-                        </TableCell>
-                        <TableCell className="text-xs text-zinc-600">
-                          {item.createdAt.slice(0, 19).replace("T", " ")}
-                        </TableCell>
-                        <TableCell className="text-xs text-zinc-600">
-                          {item.readAt ? "已读" : "未读"}
-                        </TableCell>
-                        <TableCell>
-                          <div className="flex flex-wrap gap-2">
-                            {targetLink ? (
-                              <Button asChild size="sm" variant="secondary" data-testid="notification-target-link">
-                                <Link to={targetLink}>查看</Link>
-                              </Button>
-                            ) : null}
-
-                            {!item.readAt ? (
-                              <Button
-                                data-testid="notification-mark-read"
-                                size="sm"
-                                type="button"
-                                variant="secondary"
-                                disabled={markReadMutation.isPending}
-                                onClick={() => markReadMutation.mutate(item.id)}
-                              >
-                                标为已读
-                              </Button>
-                            ) : null}
+            <div className="notification-inbox hidden md:block" data-testid="notifications-table">
+              {notificationItems.length ? (
+                notificationItems.map((item) => {
+                  const targetLink = resolveNotificationTargetLink(item);
+                  return (
+                    <article
+                      data-testid="notification-row"
+                      key={item.id}
+                      className={`notification-row-card ${item.readAt ? "" : "notification-row-card--unread"}`}
+                    >
+                      <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
+                        <div className="min-w-0">
+                          <div className="flex flex-wrap items-center gap-2">
+                            <div className="font-semibold text-zinc-900">{item.title}</div>
+                            <span className={item.readAt ? "badge-neutral" : "badge-warning"}>
+                              {item.readAt ? "已读" : "未读"}
+                            </span>
                           </div>
-                        </TableCell>
-                      </TableRow>
-                    );
-                  })
-                ) : (
-                  <TableRow>
-                    <TableCell className="py-3 text-zinc-500" colSpan={4}>
-                      暂无通知
-                    </TableCell>
-                  </TableRow>
-                )}
-              </TableBody>
-            </Table>
+                          {item.body ? <div className="mt-1 text-sm text-zinc-500">{item.body}</div> : null}
+                          <div className="notification-row-card__meta mt-2">
+                            {item.createdAt.slice(0, 19).replace("T", " ")}
+                          </div>
+                        </div>
+                        <div className="flex shrink-0 flex-wrap gap-2">
+                          {targetLink ? (
+                            <Button asChild size="sm" variant="secondary" data-testid="notification-target-link">
+                              <Link to={targetLink}>查看</Link>
+                            </Button>
+                          ) : null}
+
+                          {!item.readAt ? (
+                            <Button
+                              data-testid="notification-mark-read"
+                              size="sm"
+                              type="button"
+                              variant="secondary"
+                              disabled={markReadMutation.isPending}
+                              onClick={() => markReadMutation.mutate(item.id)}
+                            >
+                              标为已读
+                            </Button>
+                          ) : null}
+                        </div>
+                      </div>
+                    </article>
+                  );
+                })
+              ) : (
+                <div className="rounded-lg border border-zinc-200 p-4 text-sm text-zinc-500">暂无通知</div>
+              )}
             </div>
           </>
         ) : null}
@@ -294,6 +276,6 @@ export function NotificationsPage() {
           testIdPrefix="notifications"
         />
       </div>
-    </div>
+    </PageScaffold>
   );
 }

client/src/pages/ReimbursementDetailPage.tsx

@@ -961,7 +961,7 @@ export function ReimbursementDetailPage() {
     <PageScaffold>
       <EntityOverviewHero
         title={`报销详情 ${displayCode}`}
-        subtitle="明细、发票和审批。"
+        subtitle="状态、票据、审批和付款集中处理。"
         meta={(
           <>
             <StatusBadge status={detail.status} />
@@ -1005,11 +1005,11 @@ export function ReimbursementDetailPage() {
         )}
       />
 
-      <div className="detail-shell-grid">
-        <div className="space-y-6">
-          <SectionPanel title="概览与关联">
-            <div className="space-y-6" data-testid="reimbursement-overview">
-              <StatStrip columns={4}>
+      <div className="detail-workspace-grid">
+        <div className="space-y-5">
+          <SectionPanel title="办理摘要">
+            <div className="space-y-4" data-testid="reimbursement-overview">
+              <StatStrip columns={4} className="ops-status-strip">
                 <MetricCard
                   title="关联项目"
                   value={
@@ -1026,20 +1026,32 @@ export function ReimbursementDetailPage() {
                 />
               </StatStrip>
 
-              <div className="rounded-lg border border-zinc-200 p-4 text-sm" data-testid="reimbursement-summary">
-                <div>报销编号：{displayCode}</div>
-                <div>报销日期：{detail.reimbursementDate ?? "-"}</div>
-                <div>金额：{detail.totalAmount ?? "-"}</div>
-                <div>提交人：{detail.submitter?.name ?? "-"}</div>
-                <div>报销人：{detail.owner?.name ?? "-"}</div>
-                <div>说明：{detail.description || "-"}</div>
+              <div className="detail-command-panel" data-testid="reimbursement-summary">
+                <div className="detail-fact-grid">
+                  <div className="detail-fact-card">
+                    <div className="detail-fact-card__label">报销编号</div>
+                    <div className="detail-fact-card__value">{displayCode}</div>
+                  </div>
+                  <div className="detail-fact-card">
+                    <div className="detail-fact-card__label">报销日期</div>
+                    <div className="detail-fact-card__value">{detail.reimbursementDate ?? "-"}</div>
+                  </div>
+                  <div className="detail-fact-card">
+                    <div className="detail-fact-card__label">提交人 / 报销人</div>
+                    <div className="detail-fact-card__value">{detail.submitter?.name ?? "-"} / {detail.owner?.name ?? "-"}</div>
+                  </div>
+                  <div className="detail-fact-card">
+                    <div className="detail-fact-card__label">说明</div>
+                    <div className="detail-fact-card__value">{detail.description || "-"}</div>
+                  </div>
+                </div>
               </div>
 
-              <div className="rounded-lg border border-zinc-200 p-4 text-sm" data-testid="reimbursement-payment-status">
+              <div className="detail-command-panel" data-testid="reimbursement-payment-status">
                 <div className="flex items-center justify-between gap-3">
                   <div>
                     <h4 className="text-base font-semibold text-zinc-900">付款状态</h4>
-                    <p className="text-xs text-zinc-500">付款备注写入审计日志，凭证、日期和操作人用于财务台账核对。</p>
+                    <p className="text-xs text-zinc-500">凭证、日期和操作人用于财务台账核对。</p>
                   </div>
                   <span
                     className={`inline-flex rounded-full border px-2 py-0.5 text-xs font-medium ${
@@ -1051,22 +1063,22 @@ export function ReimbursementDetailPage() {
                     {detail.status === "paid" ? "已付款" : "未付款"}
                   </span>
                 </div>
-                <div className="mt-3 grid gap-3 md:grid-cols-2 xl:grid-cols-4">
-                  <div className="rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2">
-                    <div className="text-xs text-zinc-500">付款日期</div>
-                    <div className="mt-1 font-medium text-zinc-900">{payment.paymentDate ?? "-"}</div>
+                <div className="detail-fact-grid mt-3 xl:grid-cols-4">
+                  <div className="detail-fact-card">
+                    <div className="detail-fact-card__label">付款日期</div>
+                    <div className="detail-fact-card__value">{payment.paymentDate ?? "-"}</div>
                   </div>
-                  <div className="rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2">
-                    <div className="text-xs text-zinc-500">付款凭证号</div>
-                    <div className="mt-1 font-medium text-zinc-900">{payment.paymentVoucherNo ?? "-"}</div>
+                  <div className="detail-fact-card">
+                    <div className="detail-fact-card__label">付款凭证号</div>
+                    <div className="detail-fact-card__value">{payment.paymentVoucherNo ?? "-"}</div>
                   </div>
-                  <div className="rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2">
-                    <div className="text-xs text-zinc-500">付款渠道</div>
-                    <div className="mt-1 font-medium text-zinc-900">{payment.paymentChannel ?? "-"}</div>
+                  <div className="detail-fact-card">
+                    <div className="detail-fact-card__label">付款渠道</div>
+                    <div className="detail-fact-card__value">{payment.paymentChannel ?? "-"}</div>
                   </div>
-                  <div className="rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2">
-                    <div className="text-xs text-zinc-500">操作人 / 时间</div>
-                    <div className="mt-1 font-medium text-zinc-900">
+                  <div className="detail-fact-card">
+                    <div className="detail-fact-card__label">操作人 / 时间</div>
+                    <div className="detail-fact-card__value">
                       {payment.paidBy?.name ?? "-"} · {formatDateTime(payment.paidAt)}
                     </div>
                   </div>
@@ -1110,11 +1122,11 @@ export function ReimbursementDetailPage() {
                 </div>
               ) : null}
 
-              <div className="rounded-lg border border-zinc-200 p-4 text-sm">
+              <div className="detail-command-panel">
                 <div className="flex items-center justify-between gap-3">
                   <div>
                     <h4 className="text-base font-semibold text-zinc-900">关联项目</h4>
-                    <p className="text-xs text-zinc-500">报销可选挂到项目，用于项目执行面板汇总。</p>
+                    <p className="text-xs text-zinc-500">用于项目执行面板汇总。</p>
                   </div>
                   {detail.project ? (
                     <Link to={`/projects/${detail.project.id}`} className="text-sm text-primary hover:underline">
@@ -1179,7 +1191,7 @@ export function ReimbursementDetailPage() {
               {(detail.attachments ?? []).length ? (
                 <div className="space-y-2">
                   {(detail.attachments ?? []).map((attachment) => (
-                    <div key={attachment.id} className="flex flex-col gap-3 rounded-lg border border-zinc-200 px-4 py-3 md:flex-row md:items-center md:justify-between">
+                    <div key={attachment.id} className="detail-evidence-card flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
                       <div className="min-w-0">
                         <div className="truncate font-medium text-zinc-900">{attachment.originalName}</div>
                         <div className="text-xs text-zinc-500">
@@ -1254,7 +1266,7 @@ export function ReimbursementDetailPage() {
           <p className="text-sm text-zinc-500">正在刷新费用标准校验结果...</p>
         ) : null}
 
-        <div className="rounded-lg border border-zinc-200">
+        <div className="ops-table-focus overflow-x-auto border border-zinc-200">
           <Table data-testid="reimbursement-items-table">
             <TableHeader>
               <tr>
@@ -1401,7 +1413,7 @@ export function ReimbursementDetailPage() {
                       const invoiceHint = resolveInvoiceNextStepText(item);
                       return (
                         <div
-                          className="rounded-lg border border-zinc-200 px-4 py-3"
+                          className="detail-evidence-card"
                           key={item.id}
                         >
                           <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
@@ -1421,7 +1433,7 @@ export function ReimbursementDetailPage() {
                             </div>
                             <div className="flex flex-col items-start gap-2 md:items-end">
                               <div className="flex items-center gap-2">
-                                <span className="rounded-full bg-zinc-100 px-2 py-1 text-xs text-zinc-600">
+                                <span className="badge-neutral">
                                   {resolveInvoiceStatusLabel(item.status)}
                                 </span>
                                 {canUnbindInvoices ? (
@@ -1455,7 +1467,7 @@ export function ReimbursementDetailPage() {
           <SectionPanel title="预算与审核提示">
             <div className="space-y-6">
               {budgetHint ? (
-                <div className="rounded-lg border border-zinc-200 p-4 text-sm" data-testid="reimbursement-budget-hint">
+                <div className="detail-command-panel text-sm" data-testid="reimbursement-budget-hint">
                   <h3 className="text-base font-semibold text-zinc-900">预算提示</h3>
                   <div className="mt-3">预算池：{budgetHint.budgetCode} / {budgetHint.budgetName}</div>
                   <div>
@@ -1519,22 +1531,22 @@ export function ReimbursementDetailPage() {
                     </p>
                   ) : null}
 
-                  <div className="grid gap-3 text-sm md:grid-cols-2 xl:grid-cols-4" data-testid="reimbursement-erp-export">
-                    <div className="rounded-lg border border-zinc-200 bg-zinc-50 p-3">
-                      <div className="text-xs text-zinc-500">导出状态</div>
-                      <div className="mt-1 font-medium text-zinc-900">{erpSyncStatus}</div>
+                  <div className="detail-fact-grid text-sm xl:grid-cols-4" data-testid="reimbursement-erp-export">
+                    <div className="detail-fact-card">
+                      <div className="detail-fact-card__label">导出状态</div>
+                      <div className="detail-fact-card__value">{erpSyncStatus}</div>
                     </div>
-                    <div className="rounded-lg border border-zinc-200 bg-zinc-50 p-3">
-                      <div className="text-xs text-zinc-500">最近导出</div>
-                      <div className="mt-1 font-medium text-zinc-900">{formatDateTime(erpPreviewQuery.data?.exportState.exportedAt ?? null)}</div>
+                    <div className="detail-fact-card">
+                      <div className="detail-fact-card__label">最近导出</div>
+                      <div className="detail-fact-card__value">{formatDateTime(erpPreviewQuery.data?.exportState.exportedAt ?? null)}</div>
                     </div>
-                    <div className="rounded-lg border border-zinc-200 bg-zinc-50 p-3">
-                      <div className="text-xs text-zinc-500">导出任务</div>
-                      <div className="mt-1 break-all font-medium text-zinc-900">{erpPreviewQuery.data?.exportState.lastOutboxId ?? "-"}</div>
+                    <div className="detail-fact-card">
+                      <div className="detail-fact-card__label">导出任务</div>
+                      <div className="detail-fact-card__value break-all">{erpPreviewQuery.data?.exportState.lastOutboxId ?? "-"}</div>
                     </div>
-                    <div className="rounded-lg border border-zinc-200 bg-zinc-50 p-3">
-                      <div className="text-xs text-zinc-500">外部凭证号</div>
-                      <div className="mt-1 break-all font-medium text-zinc-900">{erpPreviewQuery.data?.exportState.externalId ?? "-"}</div>
+                    <div className="detail-fact-card">
+                      <div className="detail-fact-card__label">外部凭证号</div>
+                      <div className="detail-fact-card__value break-all">{erpPreviewQuery.data?.exportState.externalId ?? "-"}</div>
                     </div>
                   </div>
 
@@ -1549,7 +1561,7 @@ export function ReimbursementDetailPage() {
           </SectionPanel>
         </div>
 
-        <div className="space-y-6">
+        <div className="space-y-5">
           <DetailSideMeta title="报销摘要">
             <div>报销编号：{displayCode}</div>
             <div>报销人：{detail.owner?.name ?? "-"}</div>
@@ -1565,16 +1577,16 @@ export function ReimbursementDetailPage() {
               title="审批进度"
               description={`当前位于第 ${detail.workflowProgress.currentStepIndex + 1} / ${detail.workflowProgress.totalSteps} 步。`}
             >
-              <div className="space-y-3" data-testid={TEST_IDS.reimbursement.workflowProgress}>
+              <div className="detail-timeline" data-testid={TEST_IDS.reimbursement.workflowProgress}>
                 {detail.workflowProgress.steps.map((step, index) => (
                   <div
                     key={step.id}
                     className={
                       step.status === "current"
-                        ? "rounded-lg border border-primary-200 bg-primary-50 px-3 py-2"
+                        ? "detail-timeline-item detail-timeline-item--current"
                         : step.status === "completed"
-                          ? "rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2"
-                          : "rounded-lg border border-zinc-200 bg-white px-3 py-2"
+                          ? "detail-timeline-item detail-timeline-item--done"
+                          : "detail-timeline-item"
                     }
                   >
                     <div className="flex items-center justify-between gap-3 text-sm">
@@ -1593,9 +1605,9 @@ export function ReimbursementDetailPage() {
 
           <DetailSideMeta title="审批记录">
             {detail.approvalHistory.length ? (
-              <div className="space-y-3" data-testid="reimbursement-approval-history">
+              <div className="detail-timeline" data-testid="reimbursement-approval-history">
                 {detail.approvalHistory.map((item) => (
-                  <div key={item.id} className="rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm">
+                  <div key={item.id} className="detail-timeline-item">
                     <div className="flex items-center justify-between gap-3">
                       <span className="font-medium text-zinc-900">{workflowActionLabel(item.action)}</span>
                       <span className="text-xs text-zinc-500">{formatDateTime(item.createdAt)}</span>

client/src/pages/WorkflowTaskDetailPage.tsx

@@ -104,9 +104,9 @@ function workflowActionLabel(action: string | undefined | null) {
 
 function DetailField({ label, value }: { label: string; value: ReactNode }) {
   return (
-    <div className="rounded-lg border border-zinc-200 bg-white px-4 py-3 text-sm">
-      <dt className="text-xs font-medium text-zinc-500">{label}</dt>
-      <dd className="mt-1 break-words font-medium text-zinc-900">{value || "-"}</dd>
+    <div className="detail-fact-card">
+      <dt className="detail-fact-card__label">{label}</dt>
+      <dd className="detail-fact-card__value">{value || "-"}</dd>
     </div>
   );
 }
@@ -263,7 +263,7 @@ export function WorkflowTaskDetailPage() {
     <PageScaffold>
       <EntityOverviewHero
         title={`任务详情 ${detail.task.stepName}`}
-        subtitle="查看摘要并处理。"
+        subtitle="摘要、动作和处理历史集中办理。"
         meta={(
           <>
             <StatusBadge status={detail.task.status} />
@@ -277,18 +277,18 @@ export function WorkflowTaskDetailPage() {
         )}
       />
 
-      <div className="detail-shell-grid">
-        <div className="space-y-6">
+      <div className="detail-workspace-grid">
+        <div className="space-y-5">
           <SectionPanel title="审批对象摘要">
             <div className="space-y-4" data-testid="workflow-task-overview">
-              <StatStrip columns={4}>
+              <StatStrip columns={4} className="ops-status-strip">
                 <MetricCard title="当前节点" value={<span className="text-base">{detail.task.stepName}</span>} />
                 <MetricCard title="业务类型" value={<span className="text-base">{entityTitle(detail.workflowInstance?.entityType)}</span>} />
                 <MetricCard title="可执行动作" value={<span className="text-base">{allowedActionLabels || "-"}</span>} />
                 <MetricCard title="创建时间" value={<span className="text-base">{formatDateTime(detail.task.createdAt)}</span>} />
               </StatStrip>
 
-              <dl className="grid gap-3 md:grid-cols-2" data-testid="workflow-task-summary">
+              <dl className="detail-fact-grid" data-testid="workflow-task-summary">
                 {detail.reimbursement ? (
                   <>
                     <DetailField label="报销单号" value={detail.reimbursement.formNumber ?? "-"} />
@@ -401,7 +401,7 @@ export function WorkflowTaskDetailPage() {
           ) : null}
 
           <SectionPanel title="审批动作">
-            <div className="space-y-4">
+            <div className="detail-action-stack">
               {actionError ? (
                 <p
                   className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600"
@@ -411,7 +411,7 @@ export function WorkflowTaskDetailPage() {
                 </p>
               ) : null}
 
-              <div className="flex flex-wrap gap-2">
+              <div className="detail-action-card flex flex-wrap gap-2">
                 <Button
                   data-testid="workflow-task-approve"
                   disabled={!allowedActions.has("approve") || mutation.isPending}
@@ -422,7 +422,7 @@ export function WorkflowTaskDetailPage() {
                 </Button>
               </div>
 
-              <div className="space-y-2 rounded-lg border border-zinc-200 p-4">
+              <div className="detail-action-card space-y-2">
                 <p className="text-sm font-medium text-zinc-800">驳回</p>
                 <Textarea
                   data-testid="workflow-task-reject-comment"
@@ -441,7 +441,7 @@ export function WorkflowTaskDetailPage() {
                 </Button>
               </div>
 
-              <div className="space-y-2 rounded-lg border border-zinc-200 p-4">
+              <div className="detail-action-card space-y-2">
                 <p className="text-sm font-medium text-zinc-800">退回</p>
                 <Textarea
                   data-testid="workflow-task-return-comment"
@@ -461,7 +461,7 @@ export function WorkflowTaskDetailPage() {
               </div>
 
               {canTransfer ? (
-                <div className="space-y-2 rounded-lg border border-zinc-200 p-4">
+                <div className="detail-action-card space-y-2">
                   <p className="text-sm font-medium text-zinc-800">转审</p>
                   <select
                     className="select-std"
@@ -502,10 +502,10 @@ export function WorkflowTaskDetailPage() {
           </SectionPanel>
 
           <SectionPanel title="处理历史">
-            <div className="space-y-2">
+            <div className="detail-timeline">
               {detail.history.length ? (
                 detail.history.map((item) => (
-                  <div className="rounded-lg border border-zinc-200 px-3 py-2 text-sm" key={item.id}>
+                  <div className="detail-timeline-item" key={item.id}>
                     <div className="font-medium text-zinc-900">
                       {workflowActionLabel(item.action)} · {item.actorName || item.actorId}
                     </div>
@@ -520,7 +520,7 @@ export function WorkflowTaskDetailPage() {
           </SectionPanel>
         </div>
 
-        <div className="space-y-6">
+        <div className="space-y-5">
           <DetailSideMeta title="任务摘要">
             <div>节点：{detail.task.stepName}</div>
             <div>实例状态：{workflowInstanceStatusLabel(detail.workflowInstance?.currentStatus)}</div>

client/src/styles/mobile-touch.css

@@ -41,6 +41,21 @@
   padding: var(--mobile-card-padding);
 }
 
+.mobile-focus-card {
+  border-color: rgb(191 219 254);
+  background: linear-gradient(180deg, rgb(239 246 255), rgb(255 255 255));
+}
+
+.mobile-command-surface {
+  display: grid;
+  gap: var(--mobile-card-gap);
+  min-width: 0;
+  border: 1px solid rgb(228 228 231);
+  border-radius: 12px;
+  background: rgb(250 250 250);
+  padding: 10px;
+}
+
 .hyb-mobile-shell .section-panel::before {
   display: none;
 }
@@ -222,6 +237,16 @@
   padding: var(--mobile-card-padding);
 }
 
+.mobile-list-card--focus {
+  border-color: rgb(191 219 254);
+  background: rgb(239 246 255);
+}
+
+.mobile-list-card--unread {
+  border-color: rgb(191 219 254);
+  background: rgb(239 246 255);
+}
+
 .mobile-page-stack {
   display: grid;
   gap: var(--mobile-card-gap);
@@ -236,6 +261,10 @@
   min-width: 0;
 }
 
+.mobile-section-header--top {
+  align-items: flex-start;
+}
+
 .mobile-section-title {
   min-width: 0;
   color: rgb(24 24 27);