From e0c438dcd646b16e87a88267a4ed2a430787c5dd Mon Sep 17 00:00:00 2001
From: ye1023 <12588209+ye1023@user.noreply.gitee.com>
Date: Tue, 18 Aug 2026 10:13:38 +0800
Subject: [PATCH] =?UTF-8?q?yxk-20260818=20=E6=8A=8A=E6=8A=8A=E8=84=89?=
 =?UTF-8?q?=E3=80=81=E6=89=80=E5=8A=A1=E4=BC=9A=E3=80=81=E5=85=9A=E5=A7=94?=
 =?UTF-8?q?=E4=BC=9A=E7=9A=84=E6=9F=A5=E7=9C=8B=E8=AF=A6=E6=83=85=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bg/bgpartymatter/BgPartymatterList.vue    |   4 +-
 .../components/BgPartymatterDetailModal.vue   | 478 +++++++++++++++--
 .../components/BgTakepulseDetailModal.vue     | 486 +++++++++++++++---
 3 files changed, 846 insertions(+), 122 deletions(-)

diff --git a/src/views/bg/bgpartymatter/BgPartymatterList.vue b/src/views/bg/bgpartymatter/BgPartymatterList.vue
index 58343af..2be7ce6 100644
--- a/src/views/bg/bgpartymatter/BgPartymatterList.vue
+++ b/src/views/bg/bgpartymatter/BgPartymatterList.vue
@@ -159,7 +159,7 @@
     <!-- 表单区域 -->
     <BgPartymatterModal ref="registerModal" @success="handleSuccess" />
     <!-- 双 tab 详情弹窗 -->
-    <BgPartymatterDetailModal ref="detailModalRef" />
+    <BgPartymatterDetailModal ref="detailModalRef" :meeting-type="props.meetingType" />
     <!-- 审批记录 -->
     <BpmPictureModal @register="registerBpmModal" />
     <FlowScheduleStartModalForBG ref="flowScheduleModalRef" @confirm="handleFlowScheduleConfirm" />
@@ -195,7 +195,7 @@
 
   const props = withDefaults(
     defineProps<{
-      meetingType?: string;
+      meetingType?: 'party' | 'office';
       ledgerTitle?: string;
       flowName?: string;
       permissionPrefix?: string;
diff --git a/src/views/bg/bgpartymatter/components/BgPartymatterDetailModal.vue b/src/views/bg/bgpartymatter/components/BgPartymatterDetailModal.vue
index c5206b1..0f20508 100644
--- a/src/views/bg/bgpartymatter/components/BgPartymatterDetailModal.vue
+++ b/src/views/bg/bgpartymatter/components/BgPartymatterDetailModal.vue
@@ -7,20 +7,81 @@
     :footer="null"
     :maskClosable="false"
     :bodyStyle="{ maxHeight: '70vh', overflowY: 'auto', padding: '16px 24px 20px' }"
+    wrapClassName="partymatter-detail-modal"
     destroyOnClose
   >
     <a-tabs v-model:activeKey="activeKey">
       <a-tab-pane key="item" tab="事项信息">
-        <div class="detail-grid">
-          <div
-            v-for="field in detailFields"
-            :key="field.label"
-            class="detail-row"
-            :class="{ 'detail-row-full': field.fullWidth, 'detail-row-bold': field.bold }"
-          >
-            <span class="detail-label">{{ field.label }}</span>
-            <span class="detail-value">{{ field.value }}</span>
-          </div>
+        <div class="matter-detail">
+          <section class="matter-summary">
+            <div class="summary-heading">
+              <span class="summary-heading-icon">
+                <Icon :icon="meetingPresentation.icon" />
+              </span>
+              <div class="summary-heading-content">
+                <span class="summary-kicker">{{ meetingPresentation.summaryLabel }}</span>
+                <h3 class="summary-title">{{ detailSummary.title }}</h3>
+              </div>
+            </div>
+
+            <div class="summary-meta">
+              <div class="summary-meta-item">
+                <Icon icon="ant-design:calendar-outlined" />
+                <span class="summary-meta-label">年份</span>
+                <span class="summary-meta-value">{{ detailSummary.year }}</span>
+              </div>
+              <div class="summary-meta-item">
+                <Icon icon="ant-design:clock-circle-outlined" />
+                <span class="summary-meta-label">会议时间</span>
+                <span class="summary-meta-value">{{ detailSummary.matterTime }}</span>
+              </div>
+              <div class="summary-tag-group">
+                <a-tag class="summary-tag" :color="statusTagColor">完成状态：{{ detailSummary.bpmStatus }}</a-tag>
+                <a-tag class="summary-tag">密级：{{ detailSummary.secretLevel }}</a-tag>
+                <a-tag class="summary-tag" :color="urgencyTagColor">是否急件：{{ detailSummary.urgencyLevel }}</a-tag>
+              </div>
+            </div>
+          </section>
+
+          <section class="detail-section resolution-section">
+            <div class="detail-section-header">
+              <span class="detail-section-icon">
+                <Icon icon="ant-design:read-outlined" />
+              </span>
+              <h3>会议决议</h3>
+            </div>
+            <div class="resolution-content">{{ meetingResolution }}</div>
+          </section>
+
+          <section class="detail-section">
+            <div class="detail-section-header">
+              <span class="detail-section-icon">
+                <Icon icon="ant-design:profile-outlined" />
+              </span>
+              <h3>会议与编号</h3>
+            </div>
+            <div class="detail-grid">
+              <div v-for="field in meetingFields" :key="field.key" class="detail-item" :class="{ 'detail-item-full': field.fullWidth }">
+                <span class="detail-label">{{ field.label }}</span>
+                <span class="detail-value">{{ field.value }}</span>
+              </div>
+            </div>
+          </section>
+
+          <section class="detail-section">
+            <div class="detail-section-header">
+              <span class="detail-section-icon">
+                <Icon icon="ant-design:team-outlined" />
+              </span>
+              <h3>责任与落实</h3>
+            </div>
+            <div class="detail-grid">
+              <div v-for="field in responsibilityFields" :key="field.key" class="detail-item" :class="{ 'detail-item-full': field.fullWidth }">
+                <span class="detail-label">{{ field.label }}</span>
+                <span class="detail-value" :class="{ 'detail-value-strong': field.strong }">{{ field.value }}</span>
+              </div>
+            </div>
+          </section>
         </div>
       </a-tab-pane>
 
@@ -48,12 +109,12 @@
           :scroll="{ x: 1600 }"
           :loading="feedbackLoading"
         >
-          <template #bodyCell="{ column, record }">
+          <template #bodyCell="{ column, record: feedbackRecord }">
             <template v-if="column.key === 'attachments'">
               <SUploadFile
-                v-if="record.id"
+                v-if="feedbackRecord.id"
                 class="feedback-attachment-list"
-                :bussiness-id="record.id"
+                :bussiness-id="feedbackRecord.id"
                 :disabled="true"
                 :multiple="true"
               />
@@ -75,6 +136,15 @@
   import type { BasicColumn } from '/@/components/Table';
   import { countFeedbackStatus } from '/@/views/bg/utils/feedbackStatusCount';
 
+  const props = withDefaults(
+    defineProps<{
+      meetingType?: 'party' | 'office';
+    }>(),
+    {
+      meetingType: 'party',
+    }
+  );
+
   const visible = ref(false);
   const title = ref('详情');
   const width = 1100;
@@ -84,6 +154,22 @@
   const feedbackList = ref<Recordable[]>([]);
   const feedbackLoading = ref(false);
 
+  // 由台账入口决定详情的会议身份，避免依赖旧数据中可能缺失的 meetingType 字段。
+  const meetingPresentation = computed(() => {
+    if (props.meetingType === 'office') {
+      return {
+        detailTitle: '所务会详情',
+        summaryLabel: '所务会事项',
+        icon: 'ant-design:team-outlined',
+      };
+    }
+    return {
+      detailTitle: '党委会详情',
+      summaryLabel: '党委会事项',
+      icon: 'ant-design:bank-outlined',
+    };
+  });
+
   function fmt(value: any): string {
     return value === undefined || value === null || value === '' ? '-' : String(value);
   }
@@ -101,32 +187,61 @@
     return fmt(record[`${key}_dictText`] || record[key]);
   }
 
-  const detailFields = computed(() => {
+  // 摘要区只承载最常用于快速判断事项状态的信息，详细字段放入下方分组，避免重复平铺。
+  const detailSummary = computed(() => {
+    const r = record.value || {};
+    return {
+      title: fmt(r.title),
+      year: fmt(r.year),
+      matterTime: fmtDate(r.matterTime),
+      bpmStatus: dictText(r, 'bpmStatus'),
+      secretLevel: dictText(r, 'secretLevel'),
+      urgencyLevel: dictText(r, 'urgencyLevel'),
+    };
+  });
+
+  const meetingFields = computed(() => {
     const r = record.value || {};
     return [
-      { label: '年份', value: fmt(r.year), bold: true },
-      { label: '会议时间', value: fmtDate(r.matterTime), bold: true },
-      { label: '议题序号', value: fmt(r.itemNumber) },
-      { label: '序号', value: fmt(r.number) },
-      { label: '密级', value: dictText(r, 'secretLevel') },
-      { label: '事项名称', value: fmt(r.title), bold: true },
-      { label: '会议决议', value: fmt(r.content), fullWidth: true },
-      { label: '分管所领导', value: dictText(r, 'manageSuoleader'), bold: true },
-      { label: '事项目录编码', value: fmt(r.matterCode) },
-      { label: '抄告单编号', value: fmt(r.noticeNumber) },
-      { label: '是否为三重一大决策', value: dictText(r, 'isImportant') },
-      { label: '主办部门', value: dictText(r, 'responDeptid'), bold: true },
-      { label: '协办部门', value: dictText(r, 'assistDeptid'), bold: true },
-      { label: '实际执行情况', value: fmt(r.actualExect) },
-      { label: '完成状态', value: dictText(r, 'bpmStatus') },
-      { label: '督办次数', value: fmt(r.superviseCount) },
-      { label: '要求完成日期', value: fmtDate(r.deadline) },
-      { label: '是否急件', value: dictText(r, 'urgencyLevel') },
-      { label: '需所办负责人审批', value: ynText(r.isNeedAppro) },
-      { label: '所办负责人', value: dictText(r, 'supDeptleaderid') },
+      { key: 'itemNumber', label: '议题序号', value: fmt(r.itemNumber) },
+      { key: 'number', label: '序号', value: fmt(r.number) },
+      { key: 'matterCode', label: '事项目录编码', value: fmt(r.matterCode) },
+      { key: 'noticeNumber', label: '抄告单编号', value: fmt(r.noticeNumber) },
+      { key: 'isImportant', label: '是否为三重一大决策', value: dictText(r, 'isImportant'), fullWidth: true },
     ];
   });
 
+  const meetingResolution = computed(() => fmt(record.value?.content));
+
+  const responsibilityFields = computed(() => {
+    const r = record.value || {};
+    return [
+      { key: 'manageSuoleader', label: '分管所领导', value: dictText(r, 'manageSuoleader'), strong: true },
+      { key: 'responDeptid', label: '主办部门', value: dictText(r, 'responDeptid'), strong: true },
+      { key: 'assistDeptid', label: '协办部门', value: dictText(r, 'assistDeptid'), strong: true },
+      { key: 'deadline', label: '要求完成日期', value: fmtDate(r.deadline) },
+      { key: 'superviseCount', label: '督办次数', value: fmt(r.superviseCount) },
+      { key: 'isNeedAppro', label: '需所办负责人审批', value: ynText(r.isNeedAppro) },
+      { key: 'supDeptleaderid', label: '所办负责人', value: dictText(r, 'supDeptleaderid'), fullWidth: true },
+      { key: 'actualExect', label: '实际执行情况', value: fmt(r.actualExect), fullWidth: true },
+    ];
+  });
+
+  // 同时兼容字典文本和原始状态编码，保证列表传入的数据是否已翻译都能得到一致颜色。
+  const statusTagColor = computed(() => {
+    const rawStatus = String(record.value?.bpmStatus ?? '');
+    const statusText = detailSummary.value.bpmStatus;
+    if (rawStatus === '3' || statusText.includes('已完成')) return 'success';
+    if (rawStatus === '2' || statusText.includes('督办中') || statusText.includes('进行中')) return 'processing';
+    if (rawStatus === '1' || statusText.includes('未开始')) return 'warning';
+    return undefined;
+  });
+
+  const urgencyTagColor = computed(() => {
+    const rawUrgency = String(record.value?.urgencyLevel ?? '');
+    return rawUrgency === '1' || detailSummary.value.urgencyLevel === '是' ? 'error' : undefined;
+  });
+
   const feedbackColumns: BasicColumn[] = [
     ...bgPartymatterFeedbackColumns,
     {
@@ -159,7 +274,7 @@
 
   function open(currentRecord: Recordable) {
     record.value = currentRecord || {};
-    title.value = '详情';
+    title.value = meetingPresentation.value.detailTitle;
     activeKey.value = 'item';
     visible.value = true;
     if (currentRecord?.id !== undefined && currentRecord?.id !== null && currentRecord?.id !== '') {
@@ -171,40 +286,275 @@
 </script>
 
 <style lang="less" scoped>
-  .detail-grid {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 12px 32px;
-    padding: 4px 0;
+  // 弹窗内容会 Teleport 到 body，通过专属类限定公共组件的字号，避免影响其他页面。
+  :global(.partymatter-detail-modal .ant-modal-title) {
+    font-size: 18px;
+    line-height: 26px;
   }
 
-  .detail-row {
+  :global(.partymatter-detail-modal .ant-tabs-tab-btn) {
+    font-size: 15px;
+    line-height: 24px;
+  }
+
+  :global(.partymatter-detail-modal .ant-table) {
+    font-size: 15px;
+  }
+
+  :global(.partymatter-detail-modal .ant-table-thead > tr > th),
+  :global(.partymatter-detail-modal .ant-table-tbody > tr > td) {
+    font-size: 15px;
+    line-height: 24px;
+  }
+
+  .matter-detail {
+    padding: 4px 2px 10px;
+  }
+
+  .matter-summary {
+    position: relative;
+    overflow: hidden;
+    margin-bottom: 16px;
+    padding: 20px 22px;
+    background: linear-gradient(135deg, #f2f8ff 0%, #f8fbff 48%, #ffffff 100%);
+    border: 1px solid #d6e8ff;
+    border-radius: 10px;
+    box-shadow: 0 4px 14px rgb(22 119 255 / 8%);
+
+    &::after {
+      position: absolute;
+      top: -46px;
+      right: -24px;
+      width: 132px;
+      height: 132px;
+      background: rgb(22 119 255 / 5%);
+      border-radius: 50%;
+      content: '';
+      pointer-events: none;
+    }
+  }
+
+  .summary-heading {
+    position: relative;
+    z-index: 1;
     display: flex;
     align-items: flex-start;
     gap: 12px;
+  }
+
+  .summary-heading-icon {
+    display: inline-flex;
+    flex: 0 0 40px;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    color: #1677ff;
+    font-size: 20px;
+    background: #e6f4ff;
+    border-radius: 10px;
+  }
+
+  .summary-heading-content {
     min-width: 0;
   }
 
-  .detail-row-full {
+  .summary-kicker {
+    display: block;
+    margin-bottom: 2px;
+    color: #64748b;
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  .summary-title {
+    margin: 0;
+    color: #172033;
+    font-size: 21px;
+    font-weight: 600;
+    line-height: 30px;
+    overflow-wrap: anywhere;
+  }
+
+  .summary-meta {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 10px 18px;
+    margin-top: 16px;
+    padding-top: 14px;
+    border-top: 1px solid #deebfa;
+  }
+
+  .summary-meta-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    min-height: 24px;
+    color: #64748b;
+
+    > :first-child {
+      color: #1677ff;
+      font-size: 15px;
+    }
+  }
+
+  .summary-meta-label {
+    font-size: 14px;
+  }
+
+  .summary-meta-value {
+    color: #1f2937;
+    font-size: 15px;
+    font-weight: 600;
+  }
+
+  .summary-tag-group {
+    display: inline-flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 8px;
+    min-width: 0;
+  }
+
+  .summary-tag {
+    margin-inline-end: 0;
+    padding: 2px 10px;
+    font-size: 14px;
+    line-height: 22px;
+    white-space: normal;
+  }
+
+  .detail-section {
+    overflow: hidden;
+    margin-top: 14px;
+    background: #ffffff;
+    border: 1px solid #e7edf4;
+    border-radius: 8px;
+  }
+
+  .detail-section-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-height: 44px;
+    padding: 10px 16px;
+    background: #f8fbff;
+    border-bottom: 1px solid #e7edf4;
+
+    h3 {
+      margin: 0;
+      color: #27364b;
+      font-size: 16px;
+      font-weight: 600;
+      line-height: 24px;
+    }
+  }
+
+  .detail-section-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 26px;
+    height: 26px;
+    color: #1677ff;
+    background: #e6f4ff;
+    border-radius: 6px;
+  }
+
+  .detail-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 1px;
+    background: #edf1f5;
+  }
+
+  .detail-item {
+    display: grid;
+    grid-template-columns: 142px minmax(0, 1fr);
+    align-items: start;
+    gap: 12px;
+    min-width: 0;
+    min-height: 54px;
+    padding: 14px 16px;
+    background: #ffffff;
+  }
+
+  .detail-item-full {
     grid-column: 1 / -1;
   }
 
   .detail-label {
-    flex: 0 0 150px;
-    color: #8c8c8c;
-    line-height: 22px;
+    color: #7b8798;
+    font-size: 14px;
+    line-height: 26px;
   }
 
   .detail-value {
-    flex: 1;
-    color: #1f2937;
-    line-height: 22px;
-    word-break: break-all;
+    min-width: 0;
+    color: #27364b;
+    font-size: 15px;
+    line-height: 26px;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
   }
 
-  .detail-row-bold .detail-value {
-    font-weight: 700;
+  .detail-value-strong {
+    color: #172033;
+    font-weight: 600;
+  }
+
+  .resolution-content {
+    min-height: 90px;
+    padding: 16px 18px 18px;
+    color: #27364b;
     font-size: 15px;
+    line-height: 1.9;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+
+  @media (max-width: 768px) {
+    .matter-summary {
+      padding: 16px;
+    }
+
+    .summary-meta {
+      align-items: flex-start;
+    }
+
+    .summary-tag-group {
+      flex-basis: 100%;
+    }
+
+    .detail-grid {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    .detail-item-full {
+      grid-column: auto;
+    }
+  }
+
+  @media (max-width: 576px) {
+    .summary-title {
+      font-size: 19px;
+      line-height: 27px;
+    }
+
+    .summary-meta {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr);
+      gap: 8px;
+    }
+
+    .detail-item {
+      grid-template-columns: minmax(0, 1fr);
+      gap: 2px;
+      padding: 11px 14px;
+    }
   }
 
   .feedback-summary-header {
@@ -226,9 +576,9 @@
     flex-wrap: wrap;
     min-width: 0;
     color: #1f2937;
-    font-size: 14px;
+    font-size: 15px;
     font-weight: 600;
-    line-height: 24px;
+    line-height: 26px;
   }
 
   .feedback-summary-icon {
@@ -245,12 +595,14 @@
 
   .feedback-summary-tag {
     margin-left: 10px;
+    font-size: 14px;
+    line-height: 22px;
   }
 
   .feedback-summary-desc {
     color: #64748b;
-    font-size: 13px;
-    line-height: 22px;
+    font-size: 14px;
+    line-height: 24px;
     white-space: nowrap;
   }
 
@@ -273,11 +625,23 @@
       padding-bottom: 6px;
     }
 
+    :deep(.file-list-header .file-count) {
+      font-size: 14px;
+    }
+
     :deep(.file-list .file-item) {
       padding: 8px;
       margin-bottom: 6px;
     }
 
+    :deep(.file-list .file-name) {
+      font-size: 15px;
+    }
+
+    :deep(.file-list .file-size) {
+      font-size: 13px;
+    }
+
     :deep(.ant-empty) {
       margin: 0 !important;
       display: flex;
@@ -292,8 +656,8 @@
 
     :deep(.ant-empty-description) {
       color: #94a3b8;
-      font-size: 12px;
-      line-height: 20px;
+      font-size: 13px;
+      line-height: 22px;
     }
   }
 </style>
diff --git a/src/views/bg/bqtakepulse/components/BgTakepulseDetailModal.vue b/src/views/bg/bqtakepulse/components/BgTakepulseDetailModal.vue
index 361b7ee..f1ef2f8 100644
--- a/src/views/bg/bqtakepulse/components/BgTakepulseDetailModal.vue
+++ b/src/views/bg/bqtakepulse/components/BgTakepulseDetailModal.vue
@@ -7,20 +7,96 @@
     :footer="null"
     :maskClosable="false"
     :bodyStyle="{ maxHeight: '70vh', overflowY: 'auto', padding: '16px 24px 20px' }"
+    wrapClassName="takepulse-detail-modal"
     destroyOnClose
   >
     <a-tabs v-model:activeKey="activeKey">
       <a-tab-pane key="item" tab="事项信息">
-        <div class="detail-grid">
-          <div
-            v-for="field in detailFields"
-            :key="field.label"
-            class="detail-row"
-            :class="{ 'detail-row-full': field.fullWidth, 'detail-row-bold': field.bold }"
-          >
-            <span class="detail-label">{{ field.label }}</span>
-            <span class="detail-value">{{ field.value }}</span>
-          </div>
+        <div class="matter-detail">
+          <section class="matter-summary">
+            <div class="summary-heading">
+              <span class="summary-heading-icon">
+                <Icon icon="ant-design:bulb-outlined" />
+              </span>
+              <div class="summary-heading-content">
+                <span class="summary-kicker">把把脉事项</span>
+                <h3 class="summary-title">{{ detailSummary.title }}</h3>
+              </div>
+            </div>
+
+            <div class="summary-meta">
+              <div class="summary-meta-item">
+                <Icon icon="ant-design:calendar-outlined" />
+                <span class="summary-meta-label">年份</span>
+                <span class="summary-meta-value">{{ detailSummary.year }}</span>
+              </div>
+              <div class="summary-meta-item">
+                <Icon icon="ant-design:appstore-outlined" />
+                <span class="summary-meta-label">会议类型</span>
+                <span class="summary-meta-value">{{ detailSummary.taskType }}</span>
+              </div>
+              <div class="summary-tag-group">
+                <a-tag class="summary-tag" :color="statusTagColor">完成状态：{{ detailSummary.bpmStatus }}</a-tag>
+                <a-tag class="summary-tag">密级：{{ detailSummary.secretLevel }}</a-tag>
+                <a-tag class="summary-tag" :color="urgencyTagColor">是否急件：{{ detailSummary.urgencyLevel }}</a-tag>
+              </div>
+            </div>
+          </section>
+
+          <section class="detail-section">
+            <div class="detail-section-header">
+              <span class="detail-section-icon">
+                <Icon icon="ant-design:profile-outlined" />
+              </span>
+              <h3>意见信息</h3>
+            </div>
+            <div class="detail-grid">
+              <div v-for="field in opinionFields" :key="field.key" class="detail-item">
+                <span class="detail-label">{{ field.label }}</span>
+                <span class="detail-value">{{ field.value }}</span>
+              </div>
+            </div>
+          </section>
+
+          <section class="detail-section">
+            <div class="detail-section-header">
+              <span class="detail-section-icon">
+                <Icon icon="ant-design:message-outlined" />
+              </span>
+              <h3>具体意见</h3>
+            </div>
+            <div class="long-text-content">{{ specificOpinion }}</div>
+          </section>
+
+          <section class="detail-section">
+            <div class="detail-section-header">
+              <span class="detail-section-icon">
+                <Icon icon="ant-design:team-outlined" />
+              </span>
+              <h3>责任与落实</h3>
+            </div>
+            <div class="detail-grid">
+              <div v-for="field in responsibilityFields" :key="field.key" class="detail-item">
+                <span class="detail-label">{{ field.label }}</span>
+                <span class="detail-value" :class="{ 'detail-value-strong': field.strong }">{{ field.value }}</span>
+              </div>
+            </div>
+          </section>
+
+          <section class="detail-section">
+            <div class="detail-section-header">
+              <span class="detail-section-icon">
+                <Icon icon="ant-design:check-circle-outlined" />
+              </span>
+              <h3>落实与成果</h3>
+            </div>
+            <div class="detail-grid">
+              <div v-for="field in resultFields" :key="field.key" class="detail-item" :class="{ 'detail-item-full': field.fullWidth }">
+                <span class="detail-label">{{ field.label }}</span>
+                <span class="detail-value">{{ field.value }}</span>
+              </div>
+            </div>
+          </section>
         </div>
       </a-tab-pane>
 
@@ -48,12 +124,12 @@
           :scroll="{ x: 1800 }"
           :loading="feedbackLoading"
         >
-          <template #bodyCell="{ column, record }">
+          <template #bodyCell="{ column, record: feedbackRecord }">
             <template v-if="column.key === 'attachments'">
               <SUploadFile
-                v-if="record.id"
+                v-if="feedbackRecord.id"
                 class="feedback-attachment-list"
-                :bussiness-id="record.id"
+                :bussiness-id="feedbackRecord.id"
                 :disabled="true"
                 :multiple="true"
               />
@@ -100,38 +176,73 @@
     return fmt(record[`${key}_dictText`] || record[key]);
   }
 
-  const detailFields = computed(() => {
+  // 摘要区聚合最常用的识别与状态信息，其余字段按业务含义分组展示。
+  const detailSummary = computed(() => {
+    const r = record.value || {};
+    return {
+      title: fmt(r.title),
+      year: dictText(r, 'year'),
+      taskType: dictText(r, 'taskType'),
+      bpmStatus: dictText(r, 'bpmStatus'),
+      secretLevel: dictText(r, 'secretLevel'),
+      urgencyLevel: dictText(r, 'urgencyLevel'),
+    };
+  });
+
+  const opinionFields = computed(() => {
     const r = record.value || {};
     return [
-      { label: '年份', value: dictText(r, 'year'), bold: true },
-      { label: '会议类型', value: dictText(r, 'taskType') },
-      { label: '序号', value: fmt(r.number) },
-      { label: '密级', value: dictText(r, 'secretLevel') },
-      { label: '意见主题', value: fmt(r.title), bold: true },
-      { label: '类别', value: fmt(r.type) },
-      { label: '提出人', value: dictText(r, 'proposer') },
-      { label: '具体意见', value: fmt(r.content), fullWidth: true },
-      { label: '分管所领导', value: dictText(r, 'manageSuoleader'), bold: true },
-      { label: '责任领导', value: dictText(r, 'suoleader') },
-      { label: '牵头部门', value: dictText(r, 'responDeptid'), bold: true },
-      { label: '协办部门', value: dictText(r, 'assistDeptid'), bold: true },
-      { label: '落实部门', value: dictText(r, 'implementDeptid') },
-      { label: '是否采纳', value: ynText(r.isAdopt) },
-      { label: '落实措施/解释说明', value: fmt(r.measure), fullWidth: true },
-      { label: '措施数量', value: fmt(r.measureNumber) },
-      { label: '成果形式', value: fmt(r.achievement), fullWidth: true },
-      { label: '要求完成日期', value: fmtDate(r.deadline) },
-      { label: '备注', value: fmt(r.remark) },
-      { label: '实际完成时间', value: fmtDate(r.actualTime) },
-      { label: '提出人确认', value: fmt(r.proposerConfirm) },
-      { label: '完成状态', value: dictText(r, 'bpmStatus') },
-      { label: '督办次数', value: fmt(r.superviseCount) },
-      { label: '是否急件', value: dictText(r, 'urgencyLevel') },
-      { label: '是否需要所办负责人审批', value: ynText(r.isNeedAppro) },
-      { label: '所办负责人', value: dictText(r, 'supDeptleaderid') },
+      { key: 'number', label: '序号', value: fmt(r.number) },
+      { key: 'type', label: '类别', value: fmt(r.type) },
+      { key: 'proposer', label: '提出人', value: dictText(r, 'proposer') },
+      { key: 'isAdopt', label: '是否采纳', value: ynText(r.isAdopt) },
     ];
   });
 
+  const specificOpinion = computed(() => fmt(record.value?.content));
+
+  const responsibilityFields = computed(() => {
+    const r = record.value || {};
+    return [
+      { key: 'manageSuoleader', label: '分管所领导', value: dictText(r, 'manageSuoleader'), strong: true },
+      { key: 'suoleader', label: '责任领导', value: dictText(r, 'suoleader'), strong: true },
+      { key: 'responDeptid', label: '牵头部门', value: dictText(r, 'responDeptid'), strong: true },
+      { key: 'assistDeptid', label: '协办部门', value: dictText(r, 'assistDeptid'), strong: true },
+      { key: 'implementDeptid', label: '落实部门', value: dictText(r, 'implementDeptid') },
+      { key: 'deadline', label: '要求完成日期', value: fmtDate(r.deadline) },
+      { key: 'measureNumber', label: '措施数量', value: fmt(r.measureNumber) },
+      { key: 'superviseCount', label: '督办次数', value: fmt(r.superviseCount) },
+      { key: 'isNeedAppro', label: '是否需要所办负责人审批', value: ynText(r.isNeedAppro) },
+      { key: 'supDeptleaderid', label: '所办负责人', value: dictText(r, 'supDeptleaderid') },
+    ];
+  });
+
+  const resultFields = computed(() => {
+    const r = record.value || {};
+    return [
+      { key: 'actualTime', label: '实际完成时间', value: fmtDate(r.actualTime) },
+      { key: 'proposerConfirm', label: '提出人确认', value: fmt(r.proposerConfirm) },
+      { key: 'measure', label: '落实措施/解释说明', value: fmt(r.measure), fullWidth: true },
+      { key: 'achievement', label: '成果形式', value: fmt(r.achievement), fullWidth: true },
+      { key: 'remark', label: '备注', value: fmt(r.remark), fullWidth: true },
+    ];
+  });
+
+  // 同时兼容字典文本和原始编码，确保状态标签在不同列表数据形态下保持一致。
+  const statusTagColor = computed(() => {
+    const rawStatus = String(record.value?.bpmStatus ?? '');
+    const statusText = detailSummary.value.bpmStatus;
+    if (rawStatus === '3' || statusText.includes('已完成')) return 'success';
+    if (rawStatus === '2' || statusText.includes('督办中') || statusText.includes('进行中')) return 'processing';
+    if (rawStatus === '1' || statusText.includes('未开始')) return 'warning';
+    return undefined;
+  });
+
+  const urgencyTagColor = computed(() => {
+    const rawUrgency = String(record.value?.urgencyLevel ?? '');
+    return rawUrgency === '1' || detailSummary.value.urgencyLevel === '是' ? 'error' : undefined;
+  });
+
   const feedbackColumns: BasicColumn[] = [
     { title: '责任部门名称', dataIndex: 'responDeptname', align: 'center', width: 160 },
     { title: '反馈人姓名', dataIndex: 'responPersonname', align: 'center', width: 110 },
@@ -189,7 +300,7 @@
 
   function open(currentRecord: Recordable) {
     record.value = currentRecord || {};
-    title.value = '详情';
+    title.value = '把把脉详情';
     activeKey.value = 'item';
     visible.value = true;
     if (currentRecord?.id !== undefined && currentRecord?.id !== null && currentRecord?.id !== '') {
@@ -201,40 +312,275 @@
 </script>
 
 <style lang="less" scoped>
-  .detail-grid {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 12px 32px;
-    padding: 4px 0;
+  // 弹窗内容会 Teleport 到 body，通过专属类限定公共组件的字号，避免影响其他页面。
+  :global(.takepulse-detail-modal .ant-modal-title) {
+    font-size: 18px;
+    line-height: 26px;
   }
 
-  .detail-row {
+  :global(.takepulse-detail-modal .ant-tabs-tab-btn) {
+    font-size: 15px;
+    line-height: 24px;
+  }
+
+  :global(.takepulse-detail-modal .ant-table) {
+    font-size: 15px;
+  }
+
+  :global(.takepulse-detail-modal .ant-table-thead > tr > th),
+  :global(.takepulse-detail-modal .ant-table-tbody > tr > td) {
+    font-size: 15px;
+    line-height: 24px;
+  }
+
+  .matter-detail {
+    padding: 4px 2px 10px;
+  }
+
+  .matter-summary {
+    position: relative;
+    overflow: hidden;
+    margin-bottom: 16px;
+    padding: 20px 22px;
+    background: linear-gradient(135deg, #f2f8ff 0%, #f8fbff 48%, #ffffff 100%);
+    border: 1px solid #d6e8ff;
+    border-radius: 10px;
+    box-shadow: 0 4px 14px rgb(22 119 255 / 8%);
+
+    &::after {
+      position: absolute;
+      top: -46px;
+      right: -24px;
+      width: 132px;
+      height: 132px;
+      background: rgb(22 119 255 / 5%);
+      border-radius: 50%;
+      content: '';
+      pointer-events: none;
+    }
+  }
+
+  .summary-heading {
+    position: relative;
+    z-index: 1;
     display: flex;
     align-items: flex-start;
     gap: 12px;
+  }
+
+  .summary-heading-icon {
+    display: inline-flex;
+    flex: 0 0 40px;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    color: #1677ff;
+    font-size: 20px;
+    background: #e6f4ff;
+    border-radius: 10px;
+  }
+
+  .summary-heading-content {
     min-width: 0;
   }
 
-  .detail-row-full {
+  .summary-kicker {
+    display: block;
+    margin-bottom: 2px;
+    color: #64748b;
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  .summary-title {
+    margin: 0;
+    color: #172033;
+    font-size: 21px;
+    font-weight: 600;
+    line-height: 30px;
+    overflow-wrap: anywhere;
+  }
+
+  .summary-meta {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 10px 18px;
+    margin-top: 16px;
+    padding-top: 14px;
+    border-top: 1px solid #deebfa;
+  }
+
+  .summary-meta-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    min-height: 24px;
+    color: #64748b;
+
+    > :first-child {
+      color: #1677ff;
+      font-size: 15px;
+    }
+  }
+
+  .summary-meta-label {
+    font-size: 14px;
+  }
+
+  .summary-meta-value {
+    color: #1f2937;
+    font-size: 15px;
+    font-weight: 600;
+  }
+
+  .summary-tag-group {
+    display: inline-flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 8px;
+    min-width: 0;
+  }
+
+  .summary-tag {
+    margin-inline-end: 0;
+    padding: 2px 10px;
+    font-size: 14px;
+    line-height: 22px;
+    white-space: normal;
+  }
+
+  .detail-section {
+    overflow: hidden;
+    margin-top: 14px;
+    background: #ffffff;
+    border: 1px solid #e7edf4;
+    border-radius: 8px;
+  }
+
+  .detail-section-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-height: 44px;
+    padding: 10px 16px;
+    background: #f8fbff;
+    border-bottom: 1px solid #e7edf4;
+
+    h3 {
+      margin: 0;
+      color: #27364b;
+      font-size: 16px;
+      font-weight: 600;
+      line-height: 24px;
+    }
+  }
+
+  .detail-section-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 26px;
+    height: 26px;
+    color: #1677ff;
+    background: #e6f4ff;
+    border-radius: 6px;
+  }
+
+  .detail-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 1px;
+    background: #edf1f5;
+  }
+
+  .detail-item {
+    display: grid;
+    grid-template-columns: 150px minmax(0, 1fr);
+    align-items: start;
+    gap: 12px;
+    min-width: 0;
+    min-height: 54px;
+    padding: 14px 16px;
+    background: #ffffff;
+  }
+
+  .detail-item-full {
     grid-column: 1 / -1;
   }
 
   .detail-label {
-    flex: 0 0 150px;
-    color: #8c8c8c;
-    line-height: 22px;
+    color: #7b8798;
+    font-size: 14px;
+    line-height: 26px;
   }
 
   .detail-value {
-    flex: 1;
-    color: #1f2937;
-    line-height: 22px;
-    word-break: break-all;
+    min-width: 0;
+    color: #27364b;
+    font-size: 15px;
+    line-height: 26px;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
   }
 
-  .detail-row-bold .detail-value {
-    font-weight: 700;
+  .detail-value-strong {
+    color: #172033;
+    font-weight: 600;
+  }
+
+  .long-text-content {
+    min-height: 90px;
+    padding: 16px 18px 18px;
+    color: #27364b;
     font-size: 15px;
+    line-height: 1.9;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+
+  @media (max-width: 768px) {
+    .matter-summary {
+      padding: 16px;
+    }
+
+    .summary-meta {
+      align-items: flex-start;
+    }
+
+    .summary-tag-group {
+      flex-basis: 100%;
+    }
+
+    .detail-grid {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    .detail-item-full {
+      grid-column: auto;
+    }
+  }
+
+  @media (max-width: 576px) {
+    .summary-title {
+      font-size: 19px;
+      line-height: 27px;
+    }
+
+    .summary-meta {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr);
+      gap: 8px;
+    }
+
+    .detail-item {
+      grid-template-columns: minmax(0, 1fr);
+      gap: 2px;
+      padding: 11px 14px;
+    }
   }
 
   .feedback-summary-header {
@@ -256,9 +602,9 @@
     flex-wrap: wrap;
     min-width: 0;
     color: #1f2937;
-    font-size: 14px;
+    font-size: 15px;
     font-weight: 600;
-    line-height: 24px;
+    line-height: 26px;
   }
 
   .feedback-summary-icon {
@@ -275,12 +621,14 @@
 
   .feedback-summary-tag {
     margin-left: 10px;
+    font-size: 14px;
+    line-height: 22px;
   }
 
   .feedback-summary-desc {
     color: #64748b;
-    font-size: 13px;
-    line-height: 22px;
+    font-size: 14px;
+    line-height: 24px;
     white-space: nowrap;
   }
 
@@ -303,11 +651,23 @@
       padding-bottom: 6px;
     }
 
+    :deep(.file-list-header .file-count) {
+      font-size: 14px;
+    }
+
     :deep(.file-list .file-item) {
       padding: 8px;
       margin-bottom: 6px;
     }
 
+    :deep(.file-list .file-name) {
+      font-size: 15px;
+    }
+
+    :deep(.file-list .file-size) {
+      font-size: 13px;
+    }
+
     :deep(.ant-empty) {
       margin: 0 !important;
       display: flex;
@@ -322,8 +682,8 @@
 
     :deep(.ant-empty-description) {
       color: #94a3b8;
-      font-size: 12px;
-      line-height: 20px;
+      font-size: 13px;
+      line-height: 22px;
     }
   }
 </style>