From bad159284eb52ebafaaddd8cbe6a10bdcf9d1aae Mon Sep 17 00:00:00 2001
From: DaxPay Dev <dev@daxpay.com>
Date: Sat, 25 Jul 2026 14:38:42 +0800
Subject: [PATCH] =?UTF-8?q?refactor(admin,merchant):=20=E9=80=9A=E7=9F=A5?=
 =?UTF-8?q?=E4=B8=AD=E5=BF=83=E8=AF=A6=E6=83=85=E5=BC=B9=E7=AA=97=E8=A1=A5?=
 =?UTF-8?q?=E9=BD=90=E5=85=83=E4=BF=A1=E6=81=AF=E5=B9=B6=E5=9B=BA=E5=AE=9A?=
 =?UTF-8?q?=E9=AB=98=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../system/notify/center/NotifyCenter.vue     | 78 ++++++++++++++++++-
 .../system/notify/center/NotifyCenter.vue     | 78 ++++++++++++++++++-
 2 files changed, 152 insertions(+), 4 deletions(-)

diff --git a/apps/daxpay-admin/src/views/system/notify/center/NotifyCenter.vue b/apps/daxpay-admin/src/views/system/notify/center/NotifyCenter.vue
index 20a0e9824..15ba10b99 100644
--- a/apps/daxpay-admin/src/views/system/notify/center/NotifyCenter.vue
+++ b/apps/daxpay-admin/src/views/system/notify/center/NotifyCenter.vue
@@ -5,6 +5,7 @@
 
   import { $t } from '@vben/locales';
 
+  import dayjs from 'dayjs';
   import { MdPreview } from 'md-editor-v3';
 
   import { NotifyUserApi } from '#/api/system/notify/user.api';
@@ -36,6 +37,13 @@
     return v === 'message' ? $t('system.notify.messageType') : $t('system.notify.noticeType');
   }
 
+  /**
+   * 时间格式化(对齐 vxe formatDateTime, 弹窗内非表格场景使用)
+   */
+  function formatDateTime(v?: string) {
+    return v ? dayjs(v).format('YYYY-MM-DD HH:mm:ss') : '-';
+  }
+
   /**
    * 拉取通知列表
    */
@@ -217,8 +225,74 @@
     </div>
 
     <!-- 正文详情 -->
-    <a-modal :open="detailOpen" :title="detail?.title" :footer="null" width="800" @cancel="detailOpen = false">
-      <MdPreview v-if="detail" :model-value="detail.message ?? ''" />
+    <a-modal
+      :open="detailOpen"
+      :title="detail?.title"
+      :footer="null"
+      width="800"
+      :mask-closable="false"
+      :body-style="{ minHeight: '520px' }"
+      @cancel="detailOpen = false"
+    >
+      <div v-if="detail" class="notify-detail">
+        <!-- 元信息区: 类型/重要程度/置顶/创建时间 -->
+        <div class="notify-meta">
+          <!-- 类型 -->
+          <a-tag :color="detail.type === 'message' ? 'blue' : 'green'">{{ typeText(detail.type) }}</a-tag>
+          <!-- 重要程度 -->
+          <a-tag v-if="detail.severity === 'important'" color="red">{{ $t('system.notify.severityImportant') }}</a-tag>
+          <a-tag v-else color="default">{{ $t('system.notify.severityNormal') }}</a-tag>
+          <!-- 置顶 -->
+          <a-tag v-if="detail.isTop" color="gold">{{ $t('system.notify.isTop') }}</a-tag>
+          <!-- 创建时间 -->
+          <span class="meta-time">
+            <IconifyIcon icon="ant-design:clock-circle-outlined" class="meta-time-icon" />
+            {{ formatDateTime(detail.createTime) }}
+          </span>
+        </div>
+        <!-- 正文区(超出滚动) -->
+        <div class="notify-body">
+          <MdPreview :model-value="detail.message ?? ''" />
+        </div>
+      </div>
     </a-modal>
   </div>
 </template>
+
+<style scoped>
+  /* 详情弹窗: 固定最小高度, 内容多时正文区滚动 */
+  .notify-detail {
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* 元信息横排标签流 */
+  .notify-meta {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 16px;
+  }
+
+  .meta-time {
+    display: inline-flex;
+    align-items: center;
+    margin-left: auto;
+    color: #909399;
+    font-size: 13px;
+  }
+
+  .meta-time-icon {
+    margin-right: 4px;
+  }
+
+  /* 正文区: 限高滚动 + 浅灰卡片底 */
+  .notify-body {
+    max-height: calc(70vh - 200px);
+    overflow-y: auto;
+    padding: 16px;
+    background-color: #fafafa;
+    border-radius: 8px;
+  }
+</style>
diff --git a/apps/daxpay-merchant/src/views/system/notify/center/NotifyCenter.vue b/apps/daxpay-merchant/src/views/system/notify/center/NotifyCenter.vue
index 20a0e9824..15ba10b99 100644
--- a/apps/daxpay-merchant/src/views/system/notify/center/NotifyCenter.vue
+++ b/apps/daxpay-merchant/src/views/system/notify/center/NotifyCenter.vue
@@ -5,6 +5,7 @@
 
   import { $t } from '@vben/locales';
 
+  import dayjs from 'dayjs';
   import { MdPreview } from 'md-editor-v3';
 
   import { NotifyUserApi } from '#/api/system/notify/user.api';
@@ -36,6 +37,13 @@
     return v === 'message' ? $t('system.notify.messageType') : $t('system.notify.noticeType');
   }
 
+  /**
+   * 时间格式化(对齐 vxe formatDateTime, 弹窗内非表格场景使用)
+   */
+  function formatDateTime(v?: string) {
+    return v ? dayjs(v).format('YYYY-MM-DD HH:mm:ss') : '-';
+  }
+
   /**
    * 拉取通知列表
    */
@@ -217,8 +225,74 @@
     </div>
 
     <!-- 正文详情 -->
-    <a-modal :open="detailOpen" :title="detail?.title" :footer="null" width="800" @cancel="detailOpen = false">
-      <MdPreview v-if="detail" :model-value="detail.message ?? ''" />
+    <a-modal
+      :open="detailOpen"
+      :title="detail?.title"
+      :footer="null"
+      width="800"
+      :mask-closable="false"
+      :body-style="{ minHeight: '520px' }"
+      @cancel="detailOpen = false"
+    >
+      <div v-if="detail" class="notify-detail">
+        <!-- 元信息区: 类型/重要程度/置顶/创建时间 -->
+        <div class="notify-meta">
+          <!-- 类型 -->
+          <a-tag :color="detail.type === 'message' ? 'blue' : 'green'">{{ typeText(detail.type) }}</a-tag>
+          <!-- 重要程度 -->
+          <a-tag v-if="detail.severity === 'important'" color="red">{{ $t('system.notify.severityImportant') }}</a-tag>
+          <a-tag v-else color="default">{{ $t('system.notify.severityNormal') }}</a-tag>
+          <!-- 置顶 -->
+          <a-tag v-if="detail.isTop" color="gold">{{ $t('system.notify.isTop') }}</a-tag>
+          <!-- 创建时间 -->
+          <span class="meta-time">
+            <IconifyIcon icon="ant-design:clock-circle-outlined" class="meta-time-icon" />
+            {{ formatDateTime(detail.createTime) }}
+          </span>
+        </div>
+        <!-- 正文区(超出滚动) -->
+        <div class="notify-body">
+          <MdPreview :model-value="detail.message ?? ''" />
+        </div>
+      </div>
     </a-modal>
   </div>
 </template>
+
+<style scoped>
+  /* 详情弹窗: 固定最小高度, 内容多时正文区滚动 */
+  .notify-detail {
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* 元信息横排标签流 */
+  .notify-meta {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 16px;
+  }
+
+  .meta-time {
+    display: inline-flex;
+    align-items: center;
+    margin-left: auto;
+    color: #909399;
+    font-size: 13px;
+  }
+
+  .meta-time-icon {
+    margin-right: 4px;
+  }
+
+  /* 正文区: 限高滚动 + 浅灰卡片底 */
+  .notify-body {
+    max-height: calc(70vh - 200px);
+    overflow-y: auto;
+    padding: 16px;
+    background-color: #fafafa;
+    border-radius: 8px;
+  }
+</style>