feat: ui update

miniprogram/pages/notification/notification.wxml

@@ -1,53 +1,64 @@
 <view class="page page-flex">
-  <navigation-bar title="通知" />
+  <navigation-bar title="通知" scrolled="{{navScrolled}}" />
 
-  <scroll-view
-    scroll-y
-    class="scroll-body"
-    bindscrolltolower="onReachBottom"
-  >
-    <!-- 筛选 -->
-    <scroll-view scroll-x class="filter-scroll" show-scrollbar="{{false}}">
-      <view class="filter-row">
+  <scroll-view scroll-y class="scroll-body" bindscrolltolower="onReachBottom" bindscroll="onNavScroll">
+    <!-- 大标题页头 -->
+    <view class="head">
+      <view class="eyebrow">Notifications</view>
+      <view class="display">通知</view>
+    </view>
+
+    <!-- 下划线式筛选 -->
+    <view class="segbar">
+      <view class="seg">
         <view
           wx:for="{{filters}}"
           wx:key="name"
-          class="filter-item {{activeFilter === index ? 'active' : ''}}"
+          class="seg-item {{activeFilter === index ? 'is-on' : ''}}"
           data-index="{{index}}"
           bindtap="onFilterTap"
         >{{item.name}}</view>
       </view>
-    </scroll-view>
+    </view>
+
+    <!-- 骨架屏 -->
+    <view wx:if="{{loading}}" class="nt-skel">
+      <view class="nt-skel-item" wx:for="{{[1, 2, 3]}}" wx:key="*this">
+        <view class="sk sk-ln" style="width: 52%;"></view>
+        <view class="sk sk-ln" style="width: 86%;"></view>
+        <view class="sk sk-ln" style="width: 30%;"></view>
+      </view>
+    </view>
 
     <!-- 空态 -->
     <empty-state
-      wx:if="{{!loading && !list.length}}"
+      wx:elif="{{!list.length}}"
       icon="icon-bell"
       title="还没有消息"
       desc="穿搭被点赞、订单动态都会出现在这里"
     />
 
-    <!-- 列表 -->
-    <view class="list">
+    <!-- 列表：未读左侧黑竖条 + 黑字标题，已读降为 ink-3 -->
+    <view wx:else class="nt-list">
       <view
-        class="n-card card {{item.is_read === 1 ? 'unread' : ''}}"
+        class="nt-item {{item.is_read === 1 ? 'is-unread' : ''}}"
         wx:for="{{list}}"
         wx:key="notification_uuid"
         data-uuid="{{item.notification_uuid}}"
         bindtap="onItemTap"
       >
-        <view class="n-icon {{item.msg_type === 1 ? 'like' : item.msg_type === 2 ? 'order' : 'sys'}}">
+        <view class="nt-ic">
           <view class="icon {{item.msg_type === 1 ? 'icon-heart' : item.msg_type === 2 ? 'icon-doc' : 'icon-bell'}}"></view>
         </view>
-        <view class="n-body">
-          <view class="n-title-row">
-            <view wx:if="{{item.is_read === 1}}" class="n-dot"></view>
-            <text class="n-title {{item.is_read === 2 ? 'read' : ''}}">{{item.title}}</text>
-          </view>
-          <view class="n-content">{{item.content}}</view>
-          <view class="n-time">{{item._time}}</view>
+        <view class="nt-body">
+          <view class="nt-t">{{item.title}}</view>
+          <view class="nt-c">{{item.content}}</view>
+          <view class="nt-time num">{{item._time}}</view>
         </view>
       </view>
     </view>
+
+    <view wx:if="{{list.length && !hasMore}}" class="foot-note">没有更多了</view>
+    <view class="gap-32"></view>
   </scroll-view>
 </view>