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

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>