DG9 统一全站 UI 布局样板迁移

关联 Issue: DG9-0..DG9-12

client/src/pages/WorkflowTaskDetailPage.tsx

@@ -1,3 +1,4 @@
+import type { ReactNode } from "react";
 import { useMemo, useState } from "react";
 import { Link, Navigate, useNavigate, useParams } from "react-router-dom";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
@@ -19,6 +20,8 @@ import { CardSkeleton } from "../components/common/CardSkeleton";
 import { StatusBadge } from "../components/common/StatusBadge";
 import { DetailSideMeta } from "../components/patterns/DetailSideMeta";
 import { EntityOverviewHero } from "../components/patterns/EntityOverviewHero";
+import { StatStrip } from "../components/patterns/ListWorkspace";
+import { MetricCard } from "../components/patterns/MetricCard";
 import { PageScaffold } from "../components/patterns/PageScaffold";
 import { SectionPanel } from "../components/patterns/SectionPanel";
 import { Button } from "../components/ui/button";
@@ -48,22 +51,6 @@ function formatDateTime(value: string | null | undefined) {
   return value.slice(0, 19).replace("T", " ");
 }
 
-function workflowStatusLabel(status: string | undefined) {
-  if (!status) {
-    return "-";
-  }
-
-  const labels: Record<string, string> = {
-    pending: "待处理",
-    completed: "已处理",
-    rejected: "已驳回",
-    cancelled: "已取消",
-    skipped: "已跳过",
-  };
-
-  return labels[status] ?? status;
-}
-
 function workflowInstanceStatusLabel(status: string | undefined | null) {
   if (!status) {
     return "-";
@@ -103,6 +90,15 @@ function workflowActionLabel(action: string | undefined | null) {
   return labels[action] ?? action;
 }
 
+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>
+  );
+}
+
 function isAlreadyProcessedTaskError(error: unknown) {
   return isApiError(error) && error.details?.task === "already_processed";
 }
@@ -240,7 +236,6 @@ export function WorkflowTaskDetailPage() {
         meta={(
           <>
             <StatusBadge status={detail.task.status} />
-            <span className="info-chip">对象类型：{entityTitle(detail.workflowInstance?.entityType)}</span>
             <span className="info-chip">业务状态：{businessStatusLabel}</span>
           </>
         )}
@@ -255,87 +250,78 @@ export function WorkflowTaskDetailPage() {
         <div className="space-y-6">
           <SectionPanel title="审批对象摘要">
             <div className="space-y-4" data-testid="workflow-task-overview">
-              <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
-                <div className="rounded-lg border border-zinc-200 px-4 py-3 text-sm">
-                  <div className="text-zinc-500">当前状态</div>
-                  <div className="mt-2"><StatusBadge status={detail.task.status} /></div>
-                </div>
-                <div className="rounded-lg border border-zinc-200 px-4 py-3 text-sm">
-                  <div className="text-zinc-500">当前节点</div>
-                  <div className="mt-2 font-medium text-zinc-900">{detail.task.stepName}</div>
-                </div>
-                <div className="rounded-lg border border-zinc-200 px-4 py-3 text-sm">
-                  <div className="text-zinc-500">对象类型</div>
-                  <div className="mt-2 font-medium text-zinc-900">{entityTitle(detail.workflowInstance?.entityType)}</div>
-                </div>
-                <div className="rounded-lg border border-zinc-200 px-4 py-3 text-sm">
-                  <div className="text-zinc-500">可执行动作</div>
-                  <div className="mt-2 font-medium text-zinc-900">{allowedActionLabels || "-"}</div>
-                </div>
-              </div>
+              <StatStrip columns={4}>
+                <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>
 
-              <div className="rounded-lg border border-zinc-200 p-4 text-sm" data-testid="workflow-task-summary">
-                <div>状态：{workflowStatusLabel(detail.task.status)}</div>
-                <div>业务状态：{businessStatusLabel}</div>
-                <div>对象类型：{entityTitle(detail.workflowInstance?.entityType)}</div>
+              <dl className="grid gap-3 md:grid-cols-2" data-testid="workflow-task-summary">
                 {detail.reimbursement ? (
                   <>
-                    <div>报销单号：{detail.reimbursement.formNumber ?? "-"}</div>
-                    <div>报销金额：{detail.reimbursement.totalAmount ?? "-"}</div>
-                    <div>提交人：{detail.reimbursement.submitter?.name ?? "-"}</div>
-                    <div>报销人：{detail.reimbursement.owner?.name ?? "-"}</div>
+                    <DetailField label="报销单号" value={detail.reimbursement.formNumber ?? "-"} />
+                    <DetailField label="报销金额" value={detail.reimbursement.totalAmount ?? "-"} />
+                    <DetailField label="提交人" value={detail.reimbursement.submitter?.name ?? "-"} />
+                    <DetailField label="报销人" value={detail.reimbursement.owner?.name ?? "-"} />
                   </>
                 ) : null}
                 {detail.leaveRequest ? (
                   <>
-                    <div>假期类型：{detail.leaveRequest.leaveType?.name ?? "-"}</div>
-                    <div>申请人：{detail.leaveRequest.owner?.name ?? "-"}</div>
-                    <div>
-                      时间段：
+                    <DetailField label="假期类型" value={detail.leaveRequest.leaveType?.name ?? "-"} />
+                    <DetailField label="申请人" value={detail.leaveRequest.owner?.name ?? "-"} />
+                    <DetailField
+                      label="时间段"
+                      value={
+                        <>
                       {detail.leaveRequest.startDate ?? "-"} {detail.leaveRequest.startSession === "am" ? "上午" : "下午"}
                       {" → "}
                       {detail.leaveRequest.endDate ?? "-"} {detail.leaveRequest.endSession === "am" ? "上午" : "下午"}
-                    </div>
-                    <div>请假天数：{detail.leaveRequest.requestedDays}</div>
-                    <div>说明：{detail.leaveRequest.reason ?? "-"}</div>
-                    <div>附件：{detail.leaveRequest.attachment?.originalName ?? "-"}</div>
+                        </>
+                      }
+                    />
+                    <DetailField label="请假天数" value={detail.leaveRequest.requestedDays} />
+                    <DetailField label="说明" value={detail.leaveRequest.reason ?? "-"} />
+                    <DetailField label="附件" value={detail.leaveRequest.attachment?.originalName ?? "-"} />
                   </>
                 ) : null}
                 {detail.purchaseRequest ? (
                   <>
-                    <div>采购单号：{resolvePurchaseDisplayCode(detail.purchaseRequest)}</div>
-                    <div>标题：{detail.purchaseRequest.title || "-"}</div>
-                    <div>申请人：{detail.purchaseRequest.applicant?.name ?? "-"}</div>
-                    <div>供应商：{detail.purchaseRequest.supplier?.name ?? "-"}</div>
-                    <div>法体：{detail.purchaseRequest.legalEntity?.name ?? "-"}</div>
-                    <div>成本中心：{detail.purchaseRequest.costCenter?.name ?? "-"}</div>
-                    <div>单据分类：{detail.purchaseRequest.documentCategory?.name ?? "-"}</div>
-                    <div>金额：{detail.purchaseRequest.totalAmount ?? "-"} {detail.purchaseRequest.currencyCode}</div>
-                    <div>预计到货：{detail.purchaseRequest.expectedDeliveryDate ?? "-"}</div>
-                    <div>说明：{detail.purchaseRequest.reason ?? "-"}</div>
+                    <DetailField label="采购单号" value={resolvePurchaseDisplayCode(detail.purchaseRequest)} />
+                    <DetailField label="标题" value={detail.purchaseRequest.title || "-"} />
+                    <DetailField label="申请人" value={detail.purchaseRequest.applicant?.name ?? "-"} />
+                    <DetailField label="供应商" value={detail.purchaseRequest.supplier?.name ?? "-"} />
+                    <DetailField label="法体" value={detail.purchaseRequest.legalEntity?.name ?? "-"} />
+                    <DetailField label="成本中心" value={detail.purchaseRequest.costCenter?.name ?? "-"} />
+                    <DetailField label="单据分类" value={detail.purchaseRequest.documentCategory?.name ?? "-"} />
+                    <DetailField label="金额" value={`${detail.purchaseRequest.totalAmount ?? "-"} ${detail.purchaseRequest.currencyCode}`} />
+                    <DetailField label="预计到货" value={detail.purchaseRequest.expectedDeliveryDate ?? "-"} />
+                    <DetailField label="说明" value={detail.purchaseRequest.reason ?? "-"} />
                   </>
                 ) : null}
                 {detail.travelRequest ? (
                   <>
-                    <div>差旅单号：{detail.travelRequest.requestNo ?? "暂未生成"}</div>
-                    <div>申请人：{detail.travelRequest.applicant?.name ?? "-"}</div>
-                    <div>出差类型：{detail.travelRequest.tripType === "international" ? "国际" : "国内"}</div>
-                    <div>法体：{detail.travelRequest.legalEntity?.name ?? "-"}</div>
-                    <div>成本中心：{detail.travelRequest.costCenter?.name ?? "-"}</div>
-                    <div>起止日期：{detail.travelRequest.startDate ?? "-"} → {detail.travelRequest.endDate ?? "-"}</div>
-                    <div>预估金额：{detail.travelRequest.estimatedAmount ?? "-"}</div>
-                    <div>出差目的：{detail.travelRequest.purpose || "-"}</div>
-                    <div>
-                      行程段：
-                      {detail.travelRequest.segments.length
-                        ? detail.travelRequest.segments
-                            .map((item) => `${item.fromCity}→${item.toCity}(${item.segmentRole})`)
-                            .join("；")
-                        : "-"}
-                    </div>
+                    <DetailField label="差旅单号" value={detail.travelRequest.requestNo ?? "暂未生成"} />
+                    <DetailField label="申请人" value={detail.travelRequest.applicant?.name ?? "-"} />
+                    <DetailField label="出差类型" value={detail.travelRequest.tripType === "international" ? "国际" : "国内"} />
+                    <DetailField label="法体" value={detail.travelRequest.legalEntity?.name ?? "-"} />
+                    <DetailField label="成本中心" value={detail.travelRequest.costCenter?.name ?? "-"} />
+                    <DetailField label="起止日期" value={`${detail.travelRequest.startDate ?? "-"} → ${detail.travelRequest.endDate ?? "-"}`} />
+                    <DetailField label="预估金额" value={detail.travelRequest.estimatedAmount ?? "-"} />
+                    <DetailField label="出差目的" value={detail.travelRequest.purpose || "-"} />
+                    <DetailField
+                      label="行程段"
+                      value={
+                        detail.travelRequest.segments.length
+                          ? detail.travelRequest.segments
+                              .map((item) => `${item.fromCity}→${item.toCity}(${item.segmentRole})`)
+                              .join("；")
+                          : "-"
+                      }
+                    />
                   </>
                 ) : null}
-              </div>
+              </dl>
             </div>
           </SectionPanel>