mirror of
https://gitee.com/bootx/dax-pay-ui
synced 2026-08-12 23:45:39 +08:00
refactor(admin,merchant): 通知中心详情弹窗补齐元信息并固定高度
This commit is contained in:
DaxPay Dev
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user