修改消息通知页面

miniprogram/pages/notifications/notifications.wxml

@@ -1,54 +1,35 @@
-<view class="notification-page">
-  <!-- 顶部导航栏 -->
-  <view class="navbar">
-    <view class="navbar-title">消息通知</view>
-    <view class="navbar-right" bindtap="markAllAsRead">
-      <text class="mark-read">全部已读</text>
-    </view>
-  </view>
-
-  <!-- 通知分类标签 -->
-  <view class="tabs">
-    <view class="tab-item {{currentTab === 0 ? 'active' : ''}}" bindtap="switchTab" data-tab="0">
-      <text>全部</text>
-      <view class="badge" wx:if="{{totalUnread > 0}}">{{totalUnread}}</view>
-    </view>
-    <view class="tab-item {{currentTab === 1 ? 'active' : ''}}" bindtap="switchTab" data-tab="1">
-      <text>系统</text>
-      <view class="badge" wx:if="{{systemUnread > 0}}">{{systemUnread}}</view>
-    </view>
-    <view class="tab-item {{currentTab === 2 ? 'active' : ''}}" bindtap="switchTab" data-tab="2">
-      <text>活动</text>
-      <view class="badge" wx:if="{{activityUnread > 0}}">{{activityUnread}}</view>
-    </view>
-    <view class="tab-item {{currentTab === 3 ? 'active' : ''}}" bindtap="switchTab" data-tab="3">
-      <text>私信</text>
-      <view class="badge" wx:if="{{messageUnread > 0}}">{{messageUnread}}</view>
-    </view>
-  </view>
-
-  <!-- 通知列表 -->
-  <view class="notification-list">
-    <view wx:for="{{filteredNotifications}}" wx:key="id" class="notification-item" bindtap="openNotification" data-id="{{item.id}}">
-      <view class="avatar-container">
-        <view class="avatar {{item.type === 'system' ? 'system-avatar' : item.type === 'activity' ? 'activity-avatar' : 'message-avatar'}}">
-          <text class="avatar-icon">{{item.type === 'system' ? '系' : item.type === 'activity' ? '活' : '私'}}</text>
+<view class="container">
+  <block wx:for="{{ messageList }}" wx:key="id">
+    <view 
+      class="card" 
+      bind:tap="handleNavigate" 
+      data-target="{{item.target}}"
+      hover-class="card-hover"
+    >
+      <view class="card-header">
+        <view class="card-title-box">
+          <image class="card-icon" src="{{ item.type === 'system' ? systemIcon : userIcon }}"></image>
+          <text class="card-title">{{ item.title }}</text>
+          <view class="unread-dot" wx:if="{{ item.is_read === 0 }}"></view>
         </view>
-        <view class="unread-dot" wx:if="{{!item.read}}"></view>
+        <text class="card-time">{{ item.timestamp }}</text>
       </view>
-      <view class="notification-content">
-        <view class="notification-header">
-          <text class="title">{{item.title}}</text>
-          <text class="time">{{item.time}}</text>
-        </view>
-        <text class="message">{{item.message}}</text>
+
+      <view class="card-body">
+        <text class="card-content">{{ item.content }}</text>
+      </view>
+
+      <view class="divider"></view>
+
+      <view class="card-footer">
+        <text>查看详情</text>
+        <text class="arrow">›</text>
       </view>
     </view>
-    
-    <!-- 空状态 -->
-    <view class="empty-state" wx:if="{{filteredNotifications.length === 0}}">
-      <view class="empty-icon">📭</view>
-      <text class="empty-text">暂无通知</text>
-    </view>
+  </block>
+
+  <view class="no-message" wx:if="{{ messageList.length === 0 }}">
+    <image class="no-message-icon" src="/path/to/your/empty-icon.png"></image>
+    <text>暂无新消息</text>
   </view>
-</view>
+</view>