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

client/src/components/navigation/Sidebar.tsx

@@ -11,7 +11,7 @@ export function Sidebar() {
             <span className="size-2 rounded-full bg-primary" />
             今日优先
           </div>
-          <div className="mt-1.5 leading-6">先处理待办，再进入报销、项目和财务流程。</div>
+          <div className="mt-1.5 leading-6">待办、报销、项目和财务流程按优先级进入。</div>
         </div>
       </div>
 

client/src/pages/ContractsRegistryPage.tsx

@@ -25,6 +25,8 @@ import { PageHeader } from "../components/common/PageHeader";
 import { StatusBadge } from "../components/common/StatusBadge";
 import { DateTextInput } from "../components/common/DateTextInput";
 import { WorkspaceNotice } from "../components/patterns/ListWorkspace";
+import { MetricCard } from "../components/patterns/MetricCard";
+import { PageScaffold } from "../components/patterns/PageScaffold";
 import { Button } from "../components/ui/button";
 import { Input } from "../components/ui/input";
 import { Label } from "../components/ui/label";
@@ -244,6 +246,10 @@ export function ContractsRegistryPage() {
       ? "保留现有责任人"
       : "默认当前用户";
   const amountInvalid = Boolean(editor.amount.trim()) && !AMOUNT_PATTERN.test(editor.amount.trim());
+  const activeContractCount = visibleContracts.filter((item) => item.status === "active").length;
+  const draftContractCount = visibleContracts.filter((item) => item.status === "draft").length;
+  const archivedContractCount = visibleContracts.filter((item) => item.status === "archived").length;
+  const expiringContractCount = expiringQuery.data?.total ?? expiringItems.length;
 
   const refreshAll = async () => {
     await Promise.all([
@@ -305,10 +311,18 @@ export function ContractsRegistryPage() {
   });
 
   return (
-    <div className="space-y-6">
+    <PageScaffold>
       <PageHeader
+        eyebrow="合同"
         title="合同台账"
         subtitle="维护合同元数据、生命周期、到期预警与导出，不在 OA 存放涉密正文附件。"
+        meta={
+          <>
+            <span className="info-chip">可见 {visibleContracts.length} 份</span>
+            <span className="info-chip">30 天到期 {expiringContractCount} 份</span>
+            <span className="info-chip">私密正文不入库</span>
+          </>
+        }
         actions={
           <div className="flex flex-wrap gap-2">
             <Button
@@ -334,12 +348,21 @@ export function ContractsRegistryPage() {
         }
       />
 
-      <div className="card-std space-y-4 p-6">
+      <section className="ops-status-strip grid gap-4 md:grid-cols-2 xl:grid-cols-4" data-testid="contracts-registry-summary">
+        <MetricCard title="可见合同" value={visibleContracts.length} note={filters.projectId ? "已按项目过滤" : "当前筛选结果"} />
+        <MetricCard title="生效中" value={activeContractCount} note="需要关注到期和责任人" />
+        <MetricCard title="草稿" value={draftContractCount} note="补齐摘要、金额和归档位置" tone={draftContractCount > 0 ? "warning" : "neutral"} />
+        <MetricCard title="已归档" value={archivedContractCount} note="只保留台账和线下档案索引" />
+      </section>
+
+      <div className="detail-command-panel space-y-4" data-testid="contracts-registry-command">
         <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
           <div>
-            <div className="text-sm text-zinc-500">到期预警</div>
+            <div className="text-sm text-zinc-500">生命周期焦点</div>
             <div className="mt-1 text-3xl font-semibold text-zinc-900">{expiringQuery.data?.total ?? 0}</div>
-            <div className="text-sm text-zinc-600">份合同将在 {EXPIRING_DAYS} 天内到期</div>
+            <div className="text-sm text-zinc-600">
+              份合同将在 {EXPIRING_DAYS} 天内到期；续约会生成草稿合同，导出仅用于授权复核。
+            </div>
           </div>
           <div className="flex flex-wrap gap-2">
             <Button
@@ -759,7 +782,7 @@ export function ContractsRegistryPage() {
 
           <div className="space-y-3">
             {visibleContracts.map((item) => (
-              <div key={item.id} className="rounded-lg border border-zinc-200 p-4">
+              <div key={item.id} className="detail-evidence-card bg-white" data-testid="contracts-registry-row">
                 <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
                   <div className="space-y-2">
                     <div className="flex flex-wrap items-center gap-3">
@@ -832,7 +855,7 @@ export function ContractsRegistryPage() {
           </div>
         </div>
       </div>
-    </div>
+    </PageScaffold>
   );
 }
 

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">

client/src/pages/MobileNotificationsPage.tsx

@@ -116,12 +116,14 @@ export function MobileNotificationsPage() {
 
   const notificationItems = listQuery.data?.items ?? [];
   const totalPages = Math.max(1, Math.ceil((listQuery.data?.total ?? 0) / PAGE_SIZE));
+  const targetableNotificationCount = notificationItems.filter((item) => resolveMobileNotificationTargetLink(item)).length;
 
   return (
     <PageScaffold className="pb-4">
       <div className="mobile-page-stack" data-testid="mobile-notifications-page">
         <PageHeader
           title="通知"
+          subtitle="事件收件箱：未读优先，点击后回到对应业务页。"
           meta={<span className="badge-neutral">未读 {listQuery.data?.unreadCount ?? 0}</span>}
           actions={
             <Button
@@ -136,6 +138,32 @@ export function MobileNotificationsPage() {
           }
         />
 
+      <section className="mobile-card mobile-focus-card mobile-page-stack" data-testid="mobile-notifications-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">
+              {unreadOnly ? "只看未读，处理后会自动回到业务详情。" : "全部事件按时间排列，业务操作仍在详情页完成。"}
+            </p>
+          </div>
+          <span className="mobile-section-meta">{selectedType ? "已筛选" : "全部类型"}</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">{listQuery.data?.unreadCount ?? 0}</div>
+          </div>
+          <div>
+            <div className="text-xs text-zinc-500">当前页</div>
+            <div className="mt-1 text-xl font-semibold text-zinc-900">{notificationItems.length}</div>
+          </div>
+          <div>
+            <div className="text-xs text-zinc-500">可直达</div>
+            <div className="mt-1 text-xl font-semibold text-zinc-900">{targetableNotificationCount}</div>
+          </div>
+        </div>
+      </section>
+
       <section className="mobile-card mobile-page-stack" data-testid="mobile-notifications-list">
         <div className="mobile-section-header">
           <div>

client/src/pages/MobilePurchaseRequestDetailPage.tsx

@@ -54,6 +54,11 @@ export function MobilePurchaseRequestDetailPage() {
 
   const detail = detailQuery.data ?? null;
   const displayCode = detail ? resolvePurchaseDisplayCode(detail) : "采购详情";
+  const nextStepText = detail
+    ? detail.pendingWorkflow?.task?.stepName
+      ? `当前在 ${detail.pendingWorkflow.task.stepName}，可从审批详情处理；本页用于核对采购依据。`
+      : resolvePurchaseStatusHint(detail)
+    : "";
 
   return (
     <PageScaffold className="space-y-3 pb-4">
@@ -77,7 +82,7 @@ export function MobilePurchaseRequestDetailPage() {
 
       {detail ? (
         <>
-          <section className="mobile-card" data-testid="mobile-purchase-detail-summary">
+          <section className="mobile-card mobile-focus-card mobile-page-stack" data-testid="mobile-purchase-detail-summary">
             <div className="flex items-start justify-between gap-3">
               <div className="min-w-0">
                 <h2 className="truncate text-base font-semibold text-zinc-900">{displayCode}</h2>
@@ -96,9 +101,14 @@ export function MobilePurchaseRequestDetailPage() {
                 <div className="text-xs text-zinc-500">申请人</div>
                 <div className="mt-1 truncate font-medium text-zinc-900">{detail.applicant?.name ?? "-"}</div>
               </div>
+              <div>
+                <div className="text-xs text-zinc-500">当前节点</div>
+                <div className="mt-1 truncate font-medium text-zinc-900">{detail.pendingWorkflow?.task?.stepName ?? "-"}</div>
+              </div>
             </div>
-            <div className="mt-3 rounded-lg bg-zinc-50 px-3 py-2 text-xs leading-5 text-zinc-600">
-              {resolvePurchaseStatusHint(detail)}
+            <div className="mobile-subcard bg-white text-sm">
+              <div className="text-xs font-semibold text-zinc-500">下一步</div>
+              <div className="mt-1 leading-6 text-zinc-700">{nextStepText}</div>
             </div>
           </section>
 

client/src/pages/MobileReimbursementDetailPage.tsx

@@ -169,6 +169,34 @@ function itemLabel(item: ReimbursementItem) {
   return desc ? `${typeName} · ${desc}` : typeName;
 }
 
+function resolveMobileReimbursementNextStep(input: {
+  status: ReimbursementStatus;
+  canEdit: boolean;
+  itemCount: number;
+  invoiceCount: number;
+  attachmentCount: number;
+}) {
+  if (input.canEdit && input.itemCount === 0) {
+    return "先添加报销明细，再绑定发票或补充附件。";
+  }
+  if (input.canEdit && input.invoiceCount === 0) {
+    return "建议先添加或上传发票，提交前会做完整性检查。";
+  }
+  if (input.status === "draft" || input.status === "rejected") {
+    return "核对金额、发票和附件后，使用底部按钮提交审批。";
+  }
+  if (input.status === "reviewing") {
+    return "正在审批中，可查看节点和历史；需要补材料时按审批意见处理。";
+  }
+  if (input.status === "approved") {
+    return "已通过审批，等待财务付款和归档。";
+  }
+  if (input.status === "paid") {
+    return "已完成付款，本页用于查看发票、附件和审批留痕。";
+  }
+  return input.attachmentCount > 0 ? "查看附件、发票和审批记录。" : "查看当前报销状态和审批记录。";
+}
+
 export function MobileReimbursementDetailPage() {
   const { reimbursementId = "" } = useParams();
   const navigate = useNavigate();
@@ -813,6 +841,13 @@ export function MobileReimbursementDetailPage() {
   const showSubmitAction = Boolean(canEdit && canSubmitExpense);
   const showStickyActions = Boolean(showSubmitAction || canOpenInvoiceDialog);
   const showSecondaryActions = Boolean(actionError || canDeleteDraft || !canEdit);
+  const detailNextStep = resolveMobileReimbursementNextStep({
+    status: detail.status,
+    canEdit,
+    itemCount: detail.items.length,
+    invoiceCount: detail.invoices.length,
+    attachmentCount: detail.attachments?.length ?? 0,
+  });
 
   return (
     <PageScaffold
@@ -838,9 +873,20 @@ export function MobileReimbursementDetailPage() {
         testId="mobile-reimbursement-detail-header"
       />
 
-      <section className="mobile-card">
-        <div className="text-xs text-zinc-500">合计金额</div>
-        <div className="mt-1 text-3xl font-semibold text-zinc-900">{formatCurrency(detail.totalAmount)}</div>
+      <section className="mobile-card mobile-focus-card mobile-page-stack" data-testid="mobile-reimbursement-detail-focus">
+        <div className="mobile-section-header mobile-section-header--top">
+          <div className="min-w-0">
+            <h2 className="mobile-section-title">当前办理摘要</h2>
+            <p className="mobile-list-card__subtitle mt-1">{detailNextStep}</p>
+          </div>
+          <span className={cn("rounded-full px-2.5 py-1 text-xs font-medium", STATUS_TONE[detail.status])}>
+            {STATUS_LABEL[detail.status]}
+          </span>
+        </div>
+        <div>
+          <div className="text-xs text-zinc-500">合计金额</div>
+          <div className="mt-1 text-3xl font-semibold text-zinc-900">{formatCurrency(detail.totalAmount)}</div>
+        </div>
         <div className="mobile-metric-grid mt-4 text-sm">
           <div className="rounded-lg bg-zinc-50 px-3 py-2">
             <div className="text-xs text-zinc-500">明细</div>

client/src/pages/MobileReimbursementsPage.tsx

@@ -54,6 +54,15 @@ function formatDate(value: string | null | undefined) {
   return value || "未填写日期";
 }
 
+function reimbursementListNextStep(status: ReimbursementStatus) {
+  if (status === "draft") return "补齐明细、发票和附件后提交审批。";
+  if (status === "reviewing") return "查看审批节点，必要时补充材料或催办。";
+  if (status === "approved") return "等待财务付款，核对金额和附件是否完整。";
+  if (status === "paid") return "已付款单据用于查询和归档，不再编辑。";
+  if (status === "rejected") return "按审批意见修改后重新提交。";
+  return "查看当前报销状态和可执行操作。";
+}
+
 function ReimbursementCard({
   item,
   canDeleteDraft,
@@ -208,6 +217,7 @@ export function MobileReimbursementsPage() {
     <PageScaffold className="space-y-4">
       <PageHeader
         title="移动报销"
+        subtitle="手机端只处理新建、补材料、查状态和草稿删除。"
         meta={<span className="badge-neutral">{STATUS_LABEL[status]}</span>}
         actions={
           canCreateExpense ? (
@@ -223,7 +233,14 @@ export function MobileReimbursementsPage() {
         }
       />
 
-      <section className="mobile-card mobile-focus-card">
+      <section className="mobile-card mobile-focus-card mobile-page-stack" data-testid="mobile-reimbursements-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">{reimbursementListNextStep(status)}</p>
+          </div>
+          <span className="mobile-section-meta">{STATUS_LABEL[status]}</span>
+        </div>
         <div className="mobile-info-grid">
           <div>
             <div className="text-xs text-zinc-500">当前列表</div>
@@ -233,6 +250,10 @@ export function MobileReimbursementsPage() {
             <div className="text-xs text-zinc-500">当前金额</div>
             <div className="mt-1 text-2xl font-semibold text-zinc-900">{formatCurrency(String(totalAmount))}</div>
           </div>
+          <div>
+            <div className="text-xs text-zinc-500">下一步</div>
+            <div className="mt-1 text-sm font-semibold leading-5 text-zinc-900">{status === "draft" ? "补材料" : status === "reviewing" ? "看进度" : "查归档"}</div>
+          </div>
         </div>
       </section>
 

client/src/pages/PortalHomePage.tsx

@@ -719,7 +719,7 @@ function TodoAggregatePanel({ items }: { items: TodoAggregateItem[] }) {
 
   return (
     <SectionPanel
-      title="今天先处理"
+      title="今日待办焦点"
       description="审批、TODO 和异常提醒集中在这里。"
       className="portal-panel-fill"
     >
@@ -1127,7 +1127,7 @@ export function PortalHomePage() {
             : roleCapabilities.canManageSystem
             ? "先看待处理，再进入配置、审计和通知。"
             : isManagerView
-              ? "先处理审批，再看团队状态和周报缺口。"
+              ? "审批待办、团队状态和周报缺口集中查看。"
               : "先看待办，再提交申请、补材料或查看状态。"}
         actions={
           !payload.workspace.persisted && canSetupWorkspace ? (

client/src/pages/ProjectDetailPage.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { Link, useParams } from "react-router-dom";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { fetchEmployees } from "../api/employees";
-import { archiveProject, createConfidentialDocumentRef, createProjectCommunicationLog, createProjectDelivery, createProjectMember, createProjectMilestone, createProjectRisk, createProjectTask, fetchProject, fetchProjectClosureChecklist, fetchProjectCommunicationLogs, fetchProjectDeliveries, fetchProjectDocumentRefs, fetchProjectExpensesSummary, fetchProjectMembers, fetchProjectMilestones, fetchProjectPurchaseSummary, fetchProjectRisks, fetchProjectTasks, fetchProjectTravelSummary, fetchProjectWeeklyReports, patchProject, patchProjectClosureChecklistItem, patchProjectCommunicationLog, patchProjectMember, patchProjectMilestone, patchProjectRisk, patchProjectTask, type ConfidentialityLevel, type DocumentStorageType, type ProjectCommunicationChannel, type ProjectClosureChecklistStatus, type ProjectDeliveryRecordType, type ProjectMilestoneStatus, type ProjectRiskLevel, type ProjectStatus, type ProjectTaskPriority, type ProjectTaskStatus } from "../api/projects";
+import { archiveProject, createConfidentialDocumentRef, createProjectCommunicationLog, createProjectDelivery, createProjectMember, createProjectMilestone, createProjectRisk, createProjectTask, fetchProject, fetchProjectClosureChecklist, fetchProjectCommunicationLogs, fetchProjectDeliveries, fetchProjectDocumentRefs, fetchProjectExpensesSummary, fetchProjectMembers, fetchProjectMilestones, fetchProjectPurchaseSummary, fetchProjectRisks, fetchProjectTasks, fetchProjectTravelSummary, fetchProjectWeeklyReports, patchProject, patchProjectClosureChecklistItem, patchProjectCommunicationLog, patchProjectMember, patchProjectMilestone, patchProjectRisk, patchProjectTask, type ConfidentialityLevel, type DocumentStorageType, type ProjectCommunicationChannel, type ProjectClosureChecklistStatus, type ProjectDeliveryRecordType, type ProjectDetail, type ProjectMilestoneStatus, type ProjectRiskLevel, type ProjectStatus, type ProjectTaskPriority, type ProjectTaskStatus } from "../api/projects";
 import { fetchContractsRegistry } from "../api/contractsRegistry";
 import { mapApiErrorMessage } from "../api/errorMessages";
 import { DetailSideMeta } from "../components/patterns/DetailSideMeta";
@@ -136,6 +136,30 @@ function formatDateTime(value: string | null) {
   return formatDisplayDateTime(value);
 }
 
+function resolveProjectNextAction(detail: ProjectDetail) {
+  if (detail.status === "archived") {
+    return "项目已归档，主要用于查询合同、交付、费用和资料引用。";
+  }
+  if (detail.closureSummary.pendingCount > 0) {
+    return `优先补齐 ${detail.closureSummary.pendingCount} 项收口清单，再执行完成或归档。`;
+  }
+  if (detail.closureSummary.facts.openRiskCount > 0) {
+    return `当前有 ${detail.closureSummary.facts.openRiskCount} 个未关闭风险，建议指定责任人和截止时间。`;
+  }
+  if (detail.counts.milestones > 0 && detail.status === "active") {
+    return "按里程碑和任务推进项目，客户沟通、交付记录和周报都在本页留痕。";
+  }
+  if (detail.status === "draft") {
+    return "先补齐负责人、项目经理、时间范围和摘要，再进入执行。";
+  }
+  return "当前项目可继续维护执行记录、费用关联和归档资料引用。";
+}
+
+function resolveProjectEvidenceText(detail: ProjectDetail) {
+  const facts = detail.closureSummary.facts;
+  return `交付 ${facts.deliveryRecordCount} · 合同 ${facts.contractCount} · 资料引用 ${facts.confidentialDocRefCount}`;
+}
+
 export function ProjectDetailPage() {
   const { projectId = "" } = useParams();
   const queryClient = useQueryClient();
@@ -538,13 +562,15 @@ export function ProjectDetailPage() {
   const milestoneItems = milestonesQuery.data?.items ?? detail.milestones;
   const taskItems = tasksQuery.data?.items ?? detail.tasks;
   const riskItems = risksQuery.data?.items ?? detail.risks;
+  const projectNextAction = resolveProjectNextAction(detail);
+  const projectEvidenceText = resolveProjectEvidenceText(detail);
 
   return (
     <>
     <PageScaffold>
       <EntityOverviewHero
         title={`${detail.projectNo} · ${detail.name}`}
-        subtitle="项目概览、执行、留痕与归档在同一工作台内查看和处理。"
+        subtitle="项目状态、下一步、执行留痕和归档边界集中在一个工作台内处理。"
         meta={
           <>
             <StatusBadge status={detail.status} />
@@ -569,7 +595,31 @@ export function ProjectDetailPage() {
         }
       />
 
-      <section className="grid gap-4 md:grid-cols-2 xl:grid-cols-6">
+      <section className="detail-command-panel" data-testid="project-current-command">
+        <div className="grid gap-4 xl:grid-cols-[minmax(0,1.1fr),minmax(260px,0.9fr)]">
+          <div className="min-w-0">
+            <div className="text-xs font-semibold text-zinc-500">当前办理焦点</div>
+            <p className="mt-1 text-sm leading-6 text-zinc-700">{projectNextAction}</p>
+            <div className="mt-3 flex flex-wrap gap-2">
+              <span className="info-chip">状态：{projectStatusLabel(detail.status)}</span>
+              <span className="info-chip">证据：{projectEvidenceText}</span>
+              {detail.isConfidential ? <span className="badge-warning">涉密资料仅登记引用</span> : null}
+            </div>
+          </div>
+          <div className="detail-fact-grid">
+            <div className="detail-fact-card">
+              <div className="detail-fact-card__label">收口待处理</div>
+              <div className="detail-fact-card__value">{detail.closureSummary.pendingCount}</div>
+            </div>
+            <div className="detail-fact-card">
+              <div className="detail-fact-card__label">未关闭风险</div>
+              <div className="detail-fact-card__value">{detail.closureSummary.facts.openRiskCount}</div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className="ops-status-strip grid gap-4 md:grid-cols-2 xl:grid-cols-4">
         <MetricCard title="成员" value={counts?.members ?? 0} note="执行角色与观察者" />
         <MetricCard title="里程碑" value={counts?.milestones ?? 0} note="用于跟踪关键节点" />
         <MetricCard title="任务" value={counts?.tasks ?? 0} note="按优先级与状态推进" />
@@ -580,7 +630,7 @@ export function ProjectDetailPage() {
       </section>
 
       {(detail.status === "completed" || detail.status === "archived") && detail.closureSummary.pendingCount > 0 ? (
-        <div className="card-std border-amber-200 bg-amber-50 p-4" data-testid="project-closure-warning">
+        <div className="ops-inline-alert border-amber-200 bg-amber-50 text-amber-800" data-testid="project-closure-warning">
           <div className="font-medium text-zinc-900">项目已进入收口状态，但仍有 {detail.closureSummary.pendingCount} 项待处理</div>
           <div className="mt-1 text-sm text-zinc-600">本轮是软约束：允许完成或归档，但请尽快补齐交付、费用、合同与交接说明。</div>
         </div>

client/src/pages/WorkflowTaskDetailPage.tsx

@@ -115,6 +115,32 @@ function isAlreadyProcessedTaskError(error: unknown) {
   return isApiError(error) && error.details?.task === "already_processed";
 }
 
+function resolveWorkflowNextActionText(input: {
+  taskStatus: string;
+  entityType?: string | null;
+  allowedActions: string[];
+}) {
+  if (input.taskStatus !== "pending") {
+    return "当前审批任务已结束，本页用于查看摘要、依据和处理历史。";
+  }
+
+  const entityName = entityTitle(input.entityType ?? undefined);
+  if (input.allowedActions.includes("approve")) {
+    return `先核对${entityName}摘要、金额/时间和附件依据；确认无误后通过，存在缺口时退回补充。`;
+  }
+  if (input.allowedActions.includes("return")) {
+    return `当前节点可退回，请说明需要补充的${entityName}材料或字段。`;
+  }
+  if (input.allowedActions.includes("reject")) {
+    return `当前节点可驳回，请写清业务原因，便于申请人和后续审计理解。`;
+  }
+  if (input.allowedActions.includes("transfer")) {
+    return "当前节点可转审，请选择更合适的审批人并说明原因。";
+  }
+
+  return "当前账号没有可执行动作，请返回待办列表或联系管理员核对权限。";
+}
+
 export function WorkflowTaskDetailPage() {
   const { taskId = "" } = useParams();
   const navigate = useNavigate();
@@ -257,17 +283,23 @@ export function WorkflowTaskDetailPage() {
   const canTransfer = allowedActions.has("transfer");
   const allowedActionLabels = detail.allowedActions.map(workflowActionLabel).join(" / ");
   const businessStatusLabel = workflowInstanceStatusLabel(detail.workflowInstance?.currentStatus);
+  const nextActionText = resolveWorkflowNextActionText({
+    taskStatus: detail.task.status,
+    entityType: detail.workflowInstance?.entityType,
+    allowedActions: detail.allowedActions,
+  });
 
   return (
     <>
     <PageScaffold>
       <EntityOverviewHero
-        title={`任务详情 ${detail.task.stepName}`}
-        subtitle="摘要、动作和处理历史集中办理。"
+        title={`任务详情 · ${detail.task.stepName}`}
+        subtitle="先核对业务摘要和证据，再处理通过、退回、驳回或转审。"
         meta={(
           <>
             <StatusBadge status={detail.task.status} />
             <span className="info-chip">业务状态：{businessStatusLabel}</span>
+            <span className="info-chip">类型：{entityTitle(detail.workflowInstance?.entityType)}</span>
           </>
         )}
         actions={(
@@ -279,8 +311,20 @@ export function WorkflowTaskDetailPage() {
 
       <div className="detail-workspace-grid">
         <div className="space-y-5">
-          <SectionPanel title="审批对象摘要">
+          <SectionPanel title="当前状态与审批对象" description="首屏只放判断审批所需的状态、摘要和下一步。">
             <div className="space-y-4" data-testid="workflow-task-overview">
+              <div className="detail-command-panel" data-testid="workflow-task-next-action">
+                <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
+                  <div className="min-w-0">
+                    <div className="text-xs font-semibold text-zinc-500">下一步</div>
+                    <p className="mt-1 text-sm leading-6 text-zinc-700">{nextActionText}</p>
+                  </div>
+                  <div className="shrink-0 rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-700">
+                    可执行：<span className="font-semibold text-zinc-900">{allowedActionLabels || "无"}</span>
+                  </div>
+                </div>
+              </div>
+
               <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>} />
@@ -400,7 +444,7 @@ export function WorkflowTaskDetailPage() {
             </SectionPanel>
           ) : null}
 
-          <SectionPanel title="审批动作">
+          <SectionPanel title="审批动作" description="高风险动作会再次确认；驳回、退回和转审需要留下可复核说明。">
             <div className="detail-action-stack">
               {actionError ? (
                 <p
@@ -521,13 +565,16 @@ export function WorkflowTaskDetailPage() {
         </div>
 
         <div className="space-y-5">
-          <DetailSideMeta title="任务摘要">
+          <DetailSideMeta title="任务摘要" description="保留审批留痕所需的节点、角色和时间。">
             <div>节点：{detail.task.stepName}</div>
             <div>实例状态：{workflowInstanceStatusLabel(detail.workflowInstance?.currentStatus)}</div>
             <div>当前审批角色：{detail.task.assigneeRole ?? "-"}</div>
             <div>创建时间：{formatDateTime(detail.task.createdAt)}</div>
             <div>完成时间：{formatDateTime(detail.task.completedAt)}</div>
             <div>发起时间：{formatDateTime(detail.workflowInstance?.startedAt)}</div>
+            <div className="rounded-lg border border-zinc-200 bg-zinc-50 p-3 text-zinc-700">
+              {nextActionText}
+            </div>
           </DetailSideMeta>
         </div>
       </div>