feat: 完善延期申请状态展示与流程标识

src/pages/problem_rectification/flow-table/index.jsx

 import { Button } from '@/catalyst-ui-kit/javascript/button';
+import { Badge } from '@/catalyst-ui-kit/javascript/badge';
 import { Input } from '@/catalyst-ui-kit/javascript/input';
 import { Select } from '@/catalyst-ui-kit/javascript/select';
 import {
@@ -23,7 +24,12 @@ import {
 import { normalizeText, toArray } from '@/utils/subjectView';
 import clsx from 'clsx';
 import dayjs from 'dayjs';
-import { LockClosedIcon } from '@heroicons/react/24/outline';
+import {
+  ArrowPathIcon,
+  CalendarDaysIcon,
+  ClipboardDocumentCheckIcon,
+  LockClosedIcon,
+} from '@heroicons/react/24/outline';
 import { useContext, useEffect, useMemo, useState } from 'react';
 import { useSearchParams } from 'umi';
 import { UserContext } from '@/wrapper/Auth';
@@ -1231,24 +1237,83 @@ export default function ProblemRectificationFlowTablePage() {
     rows.every((row) => !row.isLocked && row.auditStatus === AUDIT_STATUS_APPROVED) &&
     senderId === currentUserId &&
     rows.some((row) => row.finalAuditStatus !== AUDIT_STATUS_APPROVED);
+  const flowModeLabel = isDelayFlow
+    ? flowMode === FLOW_MODE_DELAY_DEPARTMENT
+      ? '按责任部门'
+      : '问题级申请'
+    : flowMode === FLOW_MODE_DEPARTMENT
+      ? '按责任部门'
+      : '批量处理';
+  const flowPresentation = isDelayFlow
+    ? {
+        badge: '延期申请流程',
+        title: '问题延期申请',
+        detailTitle: '延期申请明细',
+        description: '申请新的整改完成时间，并记录延期事由',
+        accentClass: 'bg-amber-500',
+        iconClass: 'bg-amber-100 text-amber-700 ring-amber-200',
+        sectionClass: 'border-amber-200/80 bg-amber-50/50',
+        badgeColor: 'amber',
+        icon: CalendarDaysIcon,
+      }
+    : {
+        badge: '问题整改流程',
+        title: '问题整改处理',
+        detailTitle: '问题整改明细',
+        description: '更新整改进度、预计完成时间、整改情况与证明材料',
+        accentClass: 'bg-sky-600',
+        iconClass: 'bg-sky-100 text-sky-700 ring-sky-200',
+        sectionClass: 'border-sky-200/80 bg-sky-50/50',
+        badgeColor: 'sky',
+        icon: ClipboardDocumentCheckIcon,
+      };
+  const FlowIcon = flowPresentation.icon;
 
   return (
     <div className="space-y-6 p-6">
-      <section className="rounded-[30px] border border-white/80 bg-white/95 px-6 py-5 shadow-sm">
-        <div className="flex flex-wrap items-start justify-between gap-4">
-          <div>
-            <div className="text-xs font-semibold uppercase tracking-[0.24em] text-rose-600">
-              Problem Rectification Flow
+      <section
+        className={clsx(
+          'overflow-hidden rounded-[30px] border bg-white/95 shadow-sm',
+          isDelayFlow ? 'border-amber-200/80' : 'border-sky-200/80',
+        )}
+      >
+        <div className={clsx('h-1.5 w-full', flowPresentation.accentClass)} />
+        <div className="flex flex-wrap items-start justify-between gap-4 px-6 py-5">
+          <div className="flex min-w-0 items-start gap-4">
+            <span
+              className={clsx(
+                'inline-flex size-11 shrink-0 items-center justify-center rounded-lg ring-1',
+                flowPresentation.iconClass,
+              )}
+            >
+              <FlowIcon className="size-6" aria-hidden="true" />
+            </span>
+            <div className="min-w-0">
+              <Badge color={flowPresentation.badgeColor}>
+                {flowPresentation.badge}
+              </Badge>
+              <h1 className="mt-2 text-2xl font-semibold tracking-tight text-slate-950">
+                {flowPresentation.title}
+              </h1>
+              <p className="mt-1 text-sm font-medium text-slate-600">
+                {flowPresentation.description}
+              </p>
+              <dl className="mt-3 flex flex-wrap gap-x-6 gap-y-2 text-xs text-slate-500">
+                <div className="flex min-w-0 items-center gap-2">
+                  <dt>流程编号</dt>
+                  <dd className="min-w-0 break-all font-mono text-slate-700">
+                    {messageId || '-'}
+                  </dd>
+                </div>
+                <div className="flex items-center gap-2">
+                  <dt>处理方式</dt>
+                  <dd className="font-medium text-slate-700">{flowModeLabel}</dd>
+                </div>
+              </dl>
             </div>
-            <h1 className="mt-2 text-2xl font-semibold tracking-tight text-slate-950">
-              {isDelayFlow ? '延期申请处理' : '问题整改表格处理'}
-            </h1>
-            <p className="mt-2 text-sm text-slate-500">
-              当前流程：{messageId || '-'}；流程模式：
-              {isDelayFlow ? '问题延期申请' : flowMode === FLOW_MODE_DEPARTMENT ? '按责任部门' : '批量简单推送'}
-            </p>
           </div>
           <Button outline onClick={loadFlow} disabled={loading || Boolean(submittingKey)}>
+            <ArrowPathIcon data-slot="icon" />
             刷新
           </Button>
         </div>
@@ -1262,6 +1327,29 @@ export default function ProblemRectificationFlowTablePage() {
       ) : null}
 
       <section className="overflow-hidden rounded-[30px] border border-white/80 bg-white/96 shadow-sm">
+        <div
+          className={clsx(
+            'flex flex-wrap items-center justify-between gap-3 border-b px-5 py-4',
+            flowPresentation.sectionClass,
+          )}
+        >
+          <div className="flex min-w-0 items-center gap-3">
+            <FlowIcon className="size-5 shrink-0" aria-hidden="true" />
+            <div className="min-w-0">
+              <h2 className="text-sm font-semibold text-slate-900">
+                {flowPresentation.detailTitle}
+              </h2>
+              <p className="mt-0.5 text-xs text-slate-600">
+                {flowPresentation.description}
+              </p>
+            </div>
+          </div>
+          <Badge color={flowPresentation.badgeColor}>
+            {loading
+              ? '加载中'
+              : `${rows.length} 条${isDelayFlow ? '延期申请' : '整改明细'}`}
+          </Badge>
+        </div>
         {loading ? (
           <div className="px-6 py-14 text-center text-sm text-slate-500">正在加载流程表格...</div>
         ) : rows.length === 0 ? (

src/pages/problem_rectification/problem-rectification.business-flow.md

@@ -79,6 +79,9 @@
 - 主列表提供“检查报告出具月份”筛选，用户选择 `YYYY-MM` 后，仅查询 `metadata.inspection_report_date` 位于该月份的记录；该筛选不使用其它检查或整改日期兜底
 - 主列表支持每页 `10 / 20 / 50 / 100` 条，切换视图、修改筛选或清空筛选时回到第 1 页；表头勾选只选择当前页记录，跨页批量处理需用户逐页确认选择范围
 - 主列表视图页签数量通过 `/record/count` 按各视图限制和当前筛选条件计算，表格标题区展示服务端筛选后的总数与当前页记录数
+- 主列表标题列直接展示可点击的延期申请状态：存在历史问题级延期或部门级延期明细时，按当前阶段显示“延期已发起 / 延期待审批 / 延期待终审 / 延期处理中 / 延期已生效 / 延期已退回”日历徽标，不能等用户再次点击推送后才提示已发起；状态同时使用图标和文字，不只依赖颜色
+- 点击延期状态后打开“延期申请详情”弹窗，按责任部门展示原预计完成时间、申请完成时间、延期事由、填写人、一级审批人、最终审批人以及三级流程状态；申请完成时间或延期事由尚未提交时明确显示“待填写”，历史问题级延期按“整条问题”展示；行操作区同时提供“查看延期申请”日历按钮，保证窄屏下标题列被固定列压缩时仍可进入详情
+- 用户单选已有延期申请的记录时，顶部“推送延期申请”按钮改为显示当前延期状态并禁用，避免形成看似可以重复推送的入口
 - 主列表滚动到表格区域后，表格工作台吸顶展示；标题栏、操作区、列分组和分页固定在工作台内，数据表格区域独立滚动，表头列名在数据区域内继续吸顶，折叠 / 展开列分组时保留当前表格滚动位置
 - 详情侧栏统一复用 `RecordDetailDrawer`，通过 `recordName`、`subjectName`、`preferredViewName` 驱动，不再在各页面重复实现抽屉骨架
 - 详情侧栏顶部不展示记录标题、状态和摘要卡片，只保留详情视图切换与全屏 / 关闭操作，字段主体作为主要阅读区域
@@ -350,7 +353,8 @@
 
 推荐新交互：
 
-- 页面顶部显示本次流程步骤和当前身份
+- 页面顶部必须以图标、文字标签和独立色调明确区分“问题整改流程”与“延期申请流程”，不能只在流程模式说明中体现；问题整改页提示其处理整改进度、预计完成时间、整改情况和证明材料，延期页提示其处理新的整改完成时间和延期事由
+- 明细表顶部再次显示“问题整改明细”或“延期申请明细”及当前行数，用户从 OA 待办直接进入页面或横向浏览表格时仍能识别当前处理类型；流程类型不能只靠颜色表达
 - 主体统一使用表格，不再使用旧填写页的详情式编辑
 - 长文本、附件、预计完成时间和整改进度均在表格行内维护
 - 部门流程的“送审”和各阶段审批作为行级操作展示；多选简单推送的送审、复核和最终审批按钮统一放在表格上方，行内只保留“保存”