YY_MP_REFACTOR/src/pages-mine/notification/detail.vue

<template>
  <view class="notification-detail-page">
    <view v-if="loading" class="loading-state">
      <wd-loading size="36rpx" />
      <text class="loading-text">加载中</text>
    </view>

    <view v-else-if="!msgDetail" class="empty-state">
      <wd-empty icon="no-content" tip="暂无通知内容" />
    </view>

    <view v-else class="detail-card">
      <view class="detail-header">
        <view class="icon-box">
          <wd-icon name="notification" size="24px" />
        </view>

        <view class="header-content">
          <text class="title">{{ msgDetail.title || '消息通知' }}</text>
          <text v-if="msgDetail.sendTime" class="time">{{ msgDetail.sendTime }}</text>
        </view>
      </view>

      <view class="divider" />

      <view class="content">
        <!-- #ifdef MP-WEIXIN -->
        <rich-text v-if="safeContent" class="rich-content" space="nbsp" :nodes="safeContent" />
        <!-- #endif -->

        <!-- #ifndef MP-WEIXIN -->
        <rich-text v-if="safeContent" class="rich-content" :nodes="safeContent" />
        <!-- #endif -->

        <view v-else class="empty-content">
          <text>暂无内容</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

import { onLoad } from '@dcloudio/uni-app'

import { internalMsgReadApi } from '@/services/modules/mine/notification'
import type { NotificationRecord } from '@/services/modules/mine/notification/type'

const loading = ref(false)
const msgDetail = ref<NotificationRecord | null>(null)

const safeContent = computed(() => {
  return formatRichTextContent(msgDetail.value?.content ?? '')
})

const formatRichTextContent = (html: string): string => {
  if (!html) return ''

  return html
    .replace(/<style[\s\S]*?<\/style>/gi, '')
    .replace(/<script[\s\S]*?<\/script>/gi, '')
    .replace(/<img\b([^>]*)>/gi, (_match: string, attrs: string) => {
      const normalizedAttrs = normalizeImageAttrs(attrs)

      return `<img${normalizedAttrs} />`
    })
}

const normalizeImageAttrs = (attrs: string): string => {
  const attrsWithoutSize = attrs
    .replace(/\swidth=(['"]).*?\1/gi, '')
    .replace(/\sheight=(['"]).*?\1/gi, '')
    .replace(/\sstyle=(['"]).*?\1/gi, '')

  const attrsWithClass = appendImageClass(attrsWithoutSize)

  return `${attrsWithClass} style="max-width:100%;height:auto;display:block;margin:16px auto;"`
}

const appendImageClass = (attrs: string): string => {
  const classMatch = attrs.match(/\sclass=(['"])(.*?)\1/i)

  if (!classMatch) {
    return `${attrs} class="rich-content__image"`
  }

  const quote = classMatch[1]
  const className = classMatch[2]

  if (className.split(/\s+/).includes('rich-content__image')) {
    return attrs
  }

  return attrs.replace(
    /\sclass=(['"])(.*?)\1/i,
    ` class=${quote}${className} rich-content__image${quote}`
  )
}

const getMsgDetail = async (id: number): Promise<void> => {
  loading.value = true

  try {
    const res = await internalMsgReadApi({
      id,
      sendType: 2,
    })

    msgDetail.value = res.data
  } finally {
    loading.value = false
  }
}

onLoad((options) => {
  const id = Number(options?.id)

  if (!Number.isFinite(id) || id <= 0) {
    uni.showToast({
      title: '消息参数错误',
      icon: 'none',
    })
    return
  }

  void getMsgDetail(id)
})
</script>

<style lang="scss" scoped>
.notification-detail-page {
  min-height: 100vh;
  box-sizing: border-box;
  padding: 24rpx;
  background: #f6f7fb;
}

.detail-card {
  box-sizing: border-box;
  width: 100%;
  padding: 32rpx;
  background: #ffffff;
  border: 1rpx solid rgba(230, 234, 242, 0.95);
  border-radius: 28rpx;
  box-shadow: 0 10rpx 30rpx rgba(15, 23, 42, 0.045);
}

.detail-header {
  display: flex;
  align-items: flex-start;
}

.icon-box {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72rpx;
  height: 72rpx;
  margin-right: 22rpx;
  color: #2f80ed;
  background: #eef5ff;
  border-radius: 22rpx;
}

.header-content {
  flex: 1;
  min-width: 0;
}

.title {
  display: block;
  color: #111827;
  font-size: 34rpx;
  font-weight: 700;
  line-height: 48rpx;
  word-break: break-word;
}

.time {
  display: block;
  margin-top: 10rpx;
  color: #98a2b3;
  font-size: 24rpx;
  line-height: 34rpx;
}

.divider {
  width: 100%;
  height: 1rpx;
  margin: 30rpx 0;
  background: #eef0f4;
}

.content {
  color: #374151;
  font-size: 30rpx;
  line-height: 1.8;
  word-break: break-word;
}

.rich-content {
  display: block;
  width: 100%;
  color: #374151;
  font-size: 30rpx;
  line-height: 1.8;
  word-break: break-word;
  overflow-wrap: break-word;
}

.empty-content {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220rpx;
  color: #98a2b3;
  font-size: 28rpx;
}

.loading-state,
.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72vh;
}

.loading-state {
  gap: 12rpx;
}

.loading-text {
  color: #98a2b3;
  font-size: 26rpx;
}

:deep(.rich-content__image) {
  max-width: 100%;
  height: auto;
  display: block;
}
</style>