feat: 完成前端业务闭环与后端联调

pages/notification/message-detail.vue

@@ -7,7 +7,7 @@
         :action="notificationDetail.readStatus === '0' ? (markReadSubmitting ? '正在设置' : '设为已读') : ''"
         custom-back
         @action="requestMarkRead"
-        @back="backToMessages"
+        @back="requestBack"
     /></view>
     <view class="page-content">
       <view v-if="notificationDetailState === 'loading'" class="state-card"
@@ -80,7 +80,7 @@
 
 <script setup>
 import { computed, ref } from "vue";
-import { onLoad, onUnload } from "@dcloudio/uni-app";
+import { onBackPress, onLoad, onUnload } from "@dcloudio/uni-app";
 import AppButton from "@/components/AppButton.vue";
 import AppDialog from "@/components/AppDialog.vue";
 import AppLoading from "@/components/AppLoading.vue";
@@ -92,7 +92,7 @@ import {
 } from "@/services/api/request-controller.js";
 import { notificationApi } from "@/services/api/notification-service.js";
 import { getRequestErrorMessage } from "@/services/api/request-error-message.js";
-import { openNoticeTarget, returnTo } from "@/utils/navigation/gateway.js";
+import { handleBackPress, openNoticeTarget, returnTo } from "@/utils/navigation/gateway.js";
 
 const notificationId = ref("");
 const notificationDetail = ref({});
@@ -172,6 +172,14 @@ const confirmMarkRead = async () => {
     if (isPageActive) markReadSubmitting.value = false;
   }
 };
+const requestBack = () => {
+  if (markReadSubmitting.value) return true;
+  if (markReadVisible.value) {
+    markReadVisible.value = false;
+    return true;
+  }
+  return backToMessages();
+};
 
 onLoad((options) => {
   notificationId.value = String(options?.id || "");
@@ -186,6 +194,7 @@ onUnload(() => {
   notificationDetailController.abort();
   markReadController.abort();
 });
+onBackPress((event) => handleBackPress(event, requestBack));
 </script>
 
 <style scoped lang="scss">
@@ -202,12 +211,13 @@ onUnload(() => {
 }
 .page-content {
   flex: 1;
-  padding: 18rpx 24rpx 72rpx;
+  padding: 18rpx 24rpx calc(72rpx + env(safe-area-inset-bottom));
 }
 .state-card,
 .detail-card {
   box-sizing: border-box;
   @include adaptive-notification-content;
+  background-color: rgba($paper, 0.82);
 }
 .state-card {
   min-height: 340rpx;
@@ -239,6 +249,8 @@ onUnload(() => {
 .detail-title,
 .detail-time {
   display: block;
+  min-width: 0;
+  overflow-wrap: anywhere;
 }
 .detail-time {
   margin-top: 16rpx;
@@ -250,6 +262,7 @@ onUnload(() => {
   color: $ink;
   font-size: clamp(16px, 29rpx, 20px);
   line-height: 1.8;
+  overflow-wrap: anywhere;
   white-space: pre-wrap;
 }
 .detail-meta {
@@ -269,8 +282,10 @@ onUnload(() => {
   flex: 0 0 116rpx;
 }
 .detail-meta__row text:last-child {
+  min-width: 0;
   flex: 1;
   color: $ink;
+  overflow-wrap: anywhere;
 }
 .detail-operation-error {
   display: block;