重构 Wave3 详情与移动体验（05-28-frontend-ux-wave3-business-mobile）

client/src/pages/MobileApprovalsPage.tsx

@@ -996,6 +996,18 @@ export function MobileApprovalsPage() {
     filteredTaskCards.length > 0 && filteredTaskCards.every((task) => selectedBatchTaskIds.includes(task.id));
   const shouldShowDraftQueue = !isOnline || currentQueueItems.length > 0;
   const showMobileApprovalActions = Boolean(isPushDetail && selectedTask && selectedTaskAllowsActions);
+  const approvalFocusText = taskTab === "pending"
+    ? filteredTaskCards.length
+      ? `当前有 ${filteredTaskCards.length} 条待处理，可优先查看金额、时效或退回风险最高的事项。`
+      : "暂无待处理审批，收到企业微信或站内通知后可从这里直达详情。"
+    : "最近 30 天已处理审批用于复核，不支持再次审批。";
+  const selectedActionText = selectedTask
+    ? selectedTaskAllowsActions
+      ? canUseRemote
+        ? "核对摘要和历史后，可在底部直接通过、驳回或退回。"
+        : "当前离线，仅支持保存通过或驳回草稿，联网后再同步。"
+      : "当前任务已处理，本页只展示业务摘要和处理历史。"
+    : "";
 
   return (
     <>
@@ -1094,6 +1106,34 @@ export function MobileApprovalsPage() {
         </section>
       ) : null}
 
+      {!isPushDetail && canAccessRemoteApprovals ? (
+      <section className="mobile-card mobile-focus-card mobile-page-stack" data-testid="mobile-approvals-focus">
+        <div className="mobile-section-header">
+          <div className="min-w-0">
+            <h3 className="mobile-section-title">当前办理焦点</h3>
+            <p className="mobile-list-card__subtitle mt-1">{approvalFocusText}</p>
+          </div>
+          <span className={`mobile-section-meta ${isOnline ? "text-emerald-600" : "text-orange-600"}`}>
+            {isOnline ? "在线" : "离线"}
+          </span>
+        </div>
+        <div className="mobile-info-grid text-sm">
+          <div>
+            <div className="text-xs text-zinc-500">当前筛选</div>
+            <div className="mt-1 text-xl font-semibold text-zinc-900">{filteredTaskCards.length}</div>
+          </div>
+          <div>
+            <div className="text-xs text-zinc-500">离线草稿</div>
+            <div className="mt-1 text-xl font-semibold text-zinc-900">{currentQueueItems.length}</div>
+          </div>
+          <div>
+            <div className="text-xs text-zinc-500">批量模式</div>
+            <div className="mt-1 text-sm font-semibold text-zinc-900">{batchMode ? `已选 ${selectedBatchTaskIds.length}` : "未开启"}</div>
+          </div>
+        </div>
+      </section>
+      ) : null}
+
       {!isPushDetail && canAccessRemoteApprovals ? (
       <section className="mobile-card mobile-page-stack" data-testid="mobile-approvals-list">
         <div className="mobile-section-header">
@@ -1341,6 +1381,11 @@ export function MobileApprovalsPage() {
 
         {selectedTask ? (
           <>
+            <div className="mobile-subcard bg-white text-sm" data-testid="mobile-approvals-detail-focus">
+              <div className="text-xs font-semibold text-zinc-500">下一步</div>
+              <div className="mt-1 leading-6 text-zinc-700">{selectedActionText}</div>
+            </div>
+
             <div className="mobile-list-card text-sm">
               <div className="mobile-list-card__header mobile-list-card__header--approval">
                 <div className="min-w-0">