src/permission.js

@@ -17,6 +17,7 @@ const { loadStart, loadDone } = usePageLoading()
 const whiteList = [
   '/login',
   '/mp-login',
+  '/nm-detail',
   '/social-login',
   '/auth-redirect',
   '/bind',

src/router/modules/remaining.ts

@@ -181,6 +181,16 @@ const remainingRouter: AppRouteRecordRaw[] = [
       noTagsView: true
     }
   },
+  {
+    path: '/nm-detail',
+    component: () => import('@/views/Profile/NotifyMessageDetail.vue'),
+    name: 'NMDetail',
+    meta: {
+      hidden: true,
+      title: '通知详情',
+      noTagsView: true
+    }
+  },
   {
     path: '/403',
     component: () => import('@/views/Error/403.vue'),

src/views/Profile/NotifyMessage.vue

@@ -80,6 +80,8 @@ import * as NotifyMessageApi from '@/api/system/notify/message'
 import { useUserStore } from '@/store/modules/user'
 import { getGeneralSysDictData } from '@/api/system/dict/dict.data'
 
+const router = useRouter()
+
 const userStore = useUserStore()
 const message = useMessage() // 消息
 
@@ -121,6 +123,12 @@ function handleDetail(row: any) {
   if (!row.readStatus) {
     handleReadOne(row.id)
   }
+
+  const url = router.resolve({
+    path: '/nm-detail',
+    query: { id: row.id }
+  })
+  window.open(url.href, '_blank')
 }
 
 const tableRef = ref() // 表格的 Ref

src/views/Profile/NotifyMessageDetail.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="p-20px">
+    <ContentWrap style="max-width: 1000px; margin: 0 auto">
+      <div class="text-center">
+        <div class="mb-10px" style="font-size: 24px; letter-spacing: 2px">
+          {{ info.title }}
+        </div>
+        <el-text>
+          {{ formatDate(info.createTime, 'YYYY-MM-DD hh:mm:ss') }}
+        </el-text>
+      </div>
+      <el-divider direction="horizontal" />
+
+      <div v-dompurify-html="info.content"></div>
+    </ContentWrap>
+  </div>
+</template>
+
+<script setup name="NMDetail">
+import { getNotifyMessageDetail } from '@/api/system/notify/message'
+import { formatDate } from '@/utils/formatTime'
+
+const route = useRoute()
+const info = ref({})
+
+function init() {
+  getNotifyMessageDetail(route.query.id).then((data) => {
+    info.value = data
+  })
+}
+
+onMounted(() => {
+  init()
+})
+</script>
+
+<style lang="scss" scoped>
+:deep(p) {
+  font-size: 14px;
+}
+:deep(table) {
+  margin-top: 10px;
+  border-collapse: separate;
+  text-indent: initial;
+  border-spacing: 1px;
+  text-align: left;
+  border-width: 1px;
+  box-sizing: border-box;
+}
+:deep(th) {
+  font-size: 14px;
+  text-align: left;
+  border-width: 1px;
+  box-sizing: border-box;
+}
+:deep(td) {
+  font-size: 12px;
+  text-align: left;
+  border-width: 1px;
+  box-sizing: border-box;
+}
+:deep(.el-card__body) {
+  padding: 20px 10px;
+}
+</style>