feat: ui update

miniprogram/pages/notification-detail/notification-detail.ts

@@ -2,6 +2,7 @@ import { request } from '../../utils/request'
 import { NotificationItem } from '../../types/models'
 import { formatDateTime } from '../../utils/format'
 import { syncTabBarUnread } from '../../utils/tabbar'
+import { navPageScroll } from '../../utils/nav'
 import { logger } from '../../utils/logger'
 
 // 日志模块名
@@ -12,8 +13,13 @@ Page({
     uuid: '',
     item: {} as NotificationItem,
     time: '',
+    // 滚动收缩：由 utils/nav.ts 的共享 handler 驱动
+    navScrolled: false,
   },
 
+  // 页面级滚动 → 导航收缩为玻璃小标题
+  onPageScroll: navPageScroll,
+
   onLoad(query: Record<string, string>) {
     const uuid = query.uuid || ''
     logger.debug(LOG, 'onLoad, uuid=', uuid)

miniprogram/pages/notification-detail/notification-detail.wxml

@@ -1,14 +1,18 @@
-<view class="page detail-page">
-  <navigation-bar title="通知详情" />
+<view class="page nd-page">
+  <navigation-bar title="通知详情" scrolled="{{navScrolled}}" />
 
-  <view class="card detail-card">
-    <view class="icon-row">
-      <view class="n-icon {{item.msg_type === 1 ? 'like' : item.msg_type === 2 ? 'order' : 'sys'}}">
-        <view class="icon {{item.msg_type === 1 ? 'icon-heart' : item.msg_type === 2 ? 'icon-doc' : 'icon-bell'}}"></view>
-      </view>
-    </view>
-    <view class="detail-title">{{item.title}}</view>
-    <view class="detail-time">{{time}}</view>
-    <view class="detail-content">{{item.content}}</view>
+  <view class="head">
+    <view class="eyebrow">{{item.msg_type === 1 ? 'Like' : item.msg_type === 2 ? 'Order' : 'System'}}</view>
+    <view class="t-xl nd-title">{{item.title}}</view>
+    <view class="nd-time num">{{time}}</view>
   </view>
+
+  <view class="nd-body">
+    <view class="nd-ic">
+      <view class="icon {{item.msg_type === 1 ? 'icon-heart' : item.msg_type === 2 ? 'icon-doc' : 'icon-bell'}}"></view>
+    </view>
+    <view class="t-bd nd-content">{{item.content}}</view>
+  </view>
+
+  <view class="gap-64"></view>
 </view>

miniprogram/pages/notification-detail/notification-detail.wxss

@@ -1,65 +1,43 @@
-.detail-page {
-  padding: 24rpx;
-  box-sizing: border-box;
+/** 通知详情：衬线标题 + 发丝线正文排版 **/
+.nd-page {
+  padding-bottom: 40rpx;
 }
 
-.detail-card {
-  margin-top: 24rpx;
-  padding: 48rpx 40rpx;
+.nd-title {
+  margin-top: 22rpx;
 }
 
-.icon-row {
-  display: flex;
-  justify-content: center;
-  margin-bottom: 32rpx;
+.nd-time {
+  margin-top: 18rpx;
+  font-size: 23rpx;
+  color: var(--ink-3);
+  letter-spacing: .04em;
 }
 
-.n-icon {
-  width: 120rpx;
-  height: 120rpx;
+.nd-body {
+  margin: 56rpx var(--pad) 0;
+  padding-top: 56rpx;
+  border-top: 1rpx solid var(--hairline);
+}
+
+.nd-ic {
+  width: 96rpx;
+  height: 96rpx;
   border-radius: 50%;
+  background: var(--fill);
+  color: var(--ink-2);
   display: flex;
   align-items: center;
   justify-content: center;
+  margin-bottom: 40rpx;
 }
 
-.n-icon.like {
-  background: #FFE8EC;
-  color: #FF3B30;
+.nd-ic .icon {
+  width: 44rpx;
+  height: 44rpx;
 }
 
-.n-icon.order {
-  background: #E8F2FF;
-  color: #007AFF;
-}
-
-.n-icon.sys {
-  background: #F2F2F7;
-  color: #8E8E93;
-}
-
-.n-icon .icon {
-  width: 64rpx;
-  height: 64rpx;
-}
-
-.detail-title {
-  font-size: 36rpx;
-  font-weight: 700;
-  color: #000;
-  text-align: center;
-}
-
-.detail-time {
-  font-size: 24rpx;
-  color: #C7C7CC;
-  text-align: center;
-  margin-top: 16rpx;
-}
-
-.detail-content {
-  font-size: 28rpx;
-  color: #3C3C43;
-  margin-top: 32rpx;
-  line-height: 1.7;
+.nd-content {
+  line-height: 1.85;
+  color: var(--ink);
 }