修改个人消息页

src/pages/message/index.scss

@@ -1,80 +1,277 @@
 @use '~@/scss/images.scss' as img;
 
-$--Backgrounds-Primary: '#fff';
-
 .message-container {
   width: 100%;
   height: 100vh;
-  background: radial-gradient(227.15% 100% at 50% 0%, #EEFFDC 0%, #FFF 36.58%), var(--Backgrounds-Primary, #FFF);
-  // padding-top: 100px;
   box-sizing: border-box;
-
-  .custom-navbar {
-    height: 56px; /* 通常与原生导航栏高度一致 */
   display: flex;
-    align-items: center;
+  flex-direction: column;
-    justify-content: flex-start;
+
-    // background-color: #fff;
+  // 导航栏
-    color: #000;
+  .navbar {
-    padding-top: 44px; /* 适配状态栏 */
+    height: 100px;
+    background: #FFFFFF;
+    padding-top: 44px;
     position: sticky;
     top: 0;
     z-index: 100;
 
-    .message-navigator {
+    .navbar-content {
-      position: relative;
+      height: 56px;
-      left: 15px;
-      top: -2px;
-      width: 80px;
-      height: 32px;
       display: flex;
       align-items: center;
-      justify-content: center;
+      justify-content: space-between;
-      gap: 10px;
+      padding: 0 15px;
 
-      .message-navigator-avatar {
+      .navbar-left {
-        width: 32px;
+        display: flex;
-        height: 32px;
+        align-items: center;
+        gap: 8px;
+
+        .navbar-avatar {
+          width: 28px;
+          height: 28px;
         }
 
-      .message-navigator-title {
+        .navbar-title {
+          font-family: 'PingFang SC';
+          font-weight: 600;
+          font-size: 20px;
+          line-height: 1.4;
+          color: #000000;
+        }
+      }
+    }
+  }
+
+
+  // 消息列表
+  .message-list {
+    flex: 1;
+    overflow: hidden;
+    box-sizing: border-box;
+    margin-bottom:100px;
+    background-color: none !important;
+
+    .message-list-content {
+      display: flex;
+      flex-direction: column;
+      padding: 0 12px;
+      gap: 8px;
+    }
+
+    // 系统消息样式
+    .system-message {
+      background: #FFFFFF;
+      border: 0.5px solid rgba(0, 0, 0, 0.08);
+      border-radius: 20px;
+      padding: 0 0 12px;
+      box-shadow: 0px 4px 36px 0px rgba(0, 0, 0, 0.06);
+      box-sizing: border-box;
+
+      .message-header {
+        display: flex;
+        align-items: center;
+        padding: 12px 15px 0;
+
+        .message-title {
+          font-family: 'PingFang SC';
+          font-weight: 600;
           font-size: 16px;
-        font-weight: 500;
+          line-height: 1.5;
-        color: #000;
+          color: #000000;
+          flex: 1;
         }
+
+        .message-time {
+          font-family: 'PingFang SC';
+          font-weight: 400;
+          font-size: 12px;
+          line-height: 1.5;
+          color: rgba(60, 60, 67, 0.6);
         }
       }
 
       .message-content {
+        padding: 8px 15px 0;
 
-    .message-content-list {
+        .message-text {
-      display: flex;
+          font-family: 'PingFang SC';
-      flex-direction: column;
+          font-weight: 400;
-      padding: 10px 15px;
-      box-sizing: border-box;
-      gap: 12px;
-
-      .message-item {
-        padding: 10px;
-        // border: 1px solid rgba(0, 0, 0, 0.1);
-        display: flex;
-        flex-direction: column;
-        gap: 10px;
-        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
-        background-color: rgba(255, 255, 255, 0.5);
-        border-radius: 10px;
-      }
-
-      .message-item-title {
-        font-size: 16px;
-        font-weight: 500;
-        color: #000;
-      }
-
-      .message-item-content {
           font-size: 14px;
-        color: #666;
+          line-height: 1.43;
+          color: rgba(0, 0, 0, 0.7);
         }
       }
+
+      .message-action {
+        padding: 12px 15px 0;
+
+        .action-divider {
+          height: 0.5px;
+          background: rgba(0, 0, 0, 0.08);
+          margin-bottom: 12px;
+        }
+
+        .action-button {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          .action-text {
+            font-family: 'PingFang SC';
+            font-weight: 600;
+            font-size: 14px;
+            line-height: 1.43;
+            color: rgba(0, 0, 0, 0.85);
+          }
+
+          .action-arrow {
+            width: 16px;
+            height: 16px;
+          }
+        }
+      }
+    }
+
+    // 用户消息样式
+    .user-message {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px 15px;
+      background: #FFFFFF;
+      border: 0.5px solid rgba(0, 0, 0, 0.08);
+      border-radius: 20px;
+      box-shadow: 0px 4px 36px 0px rgba(0, 0, 0, 0.06);
+      box-sizing: border-box;
+
+      .message-avatar {
+        position: relative;
+        flex-shrink: 0;
+
+        .unread-dot {
+          position: absolute;
+          top: -2px;
+          right: -2px;
+          width: 10px;
+          height: 10px;
+          background: #FF4848;
+          border-radius: 50%;
+        }
+      }
+
+      .message-info {
+        flex: 1;
+        min-width: 0;
+
+        .message-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 4px;
+
+          .message-title {
+            font-family: 'PingFang SC';
+            font-weight: 600;
+            font-size: 16px;
+            line-height: 1.5;
+            color: #000000;
+          }
+
+          .message-time {
+            font-family: 'PingFang SC';
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 1.71;
+            color: rgba(0, 0, 0, 0.35);
+          }
+        }
+
+        .message-content {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          min-width: 0;
+
+          .message-text {
+            font-family: 'PingFang SC';
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 1.29;
+            color: rgba(0, 0, 0, 0.35);
+            flex: 1;
+            min-width: 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .unread-indicator {
+            width: 10px;
+            height: 10px;
+            background: #FF4848;
+            border-radius: 50%;
+            flex-shrink: 0;
+          }
+        }
+      }
+    }
+  }
+
+  // 空状态
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 124px 16px;
+    height: 746px;
+
+    .empty-icon {
+      width: 300px;
+      height: 225px;
+      margin-bottom: 12px;
+      position: relative;
+
+      .empty-message-icon {
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
+        border-radius: 12px;
+        position: relative;
+
+        &::before {
+          content: '';
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          width: 60px;
+          height: 60px;
+          background: #d0d0d0;
+          border-radius: 50%;
+        }
+
+        &::after {
+          content: '';
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          width: 30px;
+          height: 30px;
+          background: #a0a0a0;
+          border-radius: 50%;
+        }
+      }
+    }
+
+    .empty-text {
+      font-family: 'PingFang SC';
+      font-weight: 500;
+      font-size: 14px;
+      line-height: 1.71;
+      color: rgba(0, 0, 0, 0.85);
+    }
   }
 }

src/pages/message/index.tsx

@@ -1,41 +1,181 @@
-import React from 'react'
+import { useState } from 'react'
-import { View, Text, ScrollView } from '@tarojs/components'
+import { View, Text, ScrollView, Image } from '@tarojs/components'
 import { Avatar } from '@nutui/nutui-react-taro'
-import Taro from '@tarojs/taro'
 import GuideBar from '@/components/GuideBar'
 import { withAuth } from '@/components'
-// import img from '@/config/images'
 import './index.scss'
 
+// 消息类型定义
+interface MessageItem {
+  id: string
+  type: 'system' | 'user' | 'like' | 'comment' | 'follow'
+  title: string
+  content: string
+  time: string
+  avatar?: string
+  isRead: boolean
+  hasAction?: boolean
+  actionText?: string
+}
+
 const Message = () => {
-  const messageList = Array(10).fill(0).map((_, index) => ({
+  const [activeTab] = useState<'all' | 'like' | 'comment' | 'follow'>('all')
-    id: index + 1,
+
-    title: `消息${index + 1}消息${index + 1}消息${index + 1}消息${index + 1}`,
+  // 模拟消息数据
-    content: Array(Math.round(Math.random() * 40)).fill(0).map((_, index) => `消息${index + 1}`).join(''),
+  const messageList: MessageItem[] = [
-  }))
+    {
+      id: '1',
+      type: 'system',
+      title: '球局报名确认',
+      content: '恭喜，你成功报名"世纪公园混双 · 8月20日"球局！请提前15分钟到达，球场门口等你。',
+      time: '今天 09:12',
+      isRead: false,
+      hasAction: true,
+      actionText: '查看详情'
+    },
+    {
+      id: '2',
+      type: 'system',
+      title: '新球友加入提醒',
+      content: 'Fiona 已加入"徐汇双打 · 今晚7点"的群聊，快去和她打个招呼吧～',
+      time: '昨天 09:12',
+      isRead: false,
+      hasAction: true,
+      actionText: '打个招呼'
+    },
+    {
+      id: '3',
+      type: 'system',
+      title: '场地变更通知',
+      content: '请注意，"张江中午快打"已改至世纪园区 3 号场集合。',
+      time: '2025-08-17 18:30',
+      isRead: true
+    },
+    {
+      id: '4',
+      type: 'system',
+      title: '系统维护提醒',
+      content: '系统将于 2025-08-20 凌晨 00:00–02:00 暂停服务，届时活动发布、消息中心等功能可能无法使用，敬请谅解。',
+      time: '2025-08-17 18:30',
+      isRead: true
+    },
+    {
+      id: '5',
+      type: 'system',
+      title: '活动将近提醒',
+      content: '你的"宝山初学者约球"将在 2 小时后开始。快准备好球拍、毛巾和运动鞋，我们赛场见！',
+      time: '2025-08-17 18:30',
+      isRead: true
+    },
+    {
+      id: '6',
+      type: 'user',
+      title: '王晨',
+      content: '你好，昨天约的球场还在吗',
+      time: '09:34',
+      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
+      isRead: false
+    },
+    {
+      id: '7',
+      type: 'user',
+      title: '阿斌',
+      content: '七点到世纪公园东门集合可以吗？',
+      time: '昨天 22:10',
+      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
+      isRead: false
+    },
+    {
+      id: '8',
+      type: 'user',
+      title: 'Lili',
+      content: '我刚问了，还有一个小时的空场！',
+      time: '昨天 18:47',
+      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
+      isRead: true
+    }
+  ]
+
+  // 过滤消息
+  const filteredMessages = messageList.filter(message => {
+    if (activeTab === 'all') return true
+    return message.type === activeTab
+  })
+
+  // 渲染消息项
+  const renderMessageItem = (message: MessageItem) => {
+    if (message.type === 'system') {
+      return (
+        <View className='message-item system-message' key={message.id}>
+          <View className='message-header'>
+            <Text className='message-title'>{message.title}</Text>
+            <Text className='message-time'>{message.time}</Text>
+          </View>
+          <View className='message-content'>
+            <Text className='message-text'>{message.content}</Text>
+          </View>
+          {message.hasAction && (
+            <View className='message-action'>
+              <View className='action-divider'></View>
+              <View className='action-button'>
+                <Text className='action-text'>{message.actionText}</Text>
+                <Image className='action-arrow' src={require('../../static/message/icon-message-arrow.svg')} />
+              </View>
+            </View>
+          )}
+        </View>
+      )
+    }
+
+    return (
+      <View className='message-item user-message' key={message.id}>
+        <View className='message-avatar'>
+          <Avatar src={message.avatar} size='48px' />
+        </View>
+        <View className='message-info'>
+          <View className='message-header'>
+            <Text className='message-title'>{message.title}</Text>
+            <Text className='message-time'>{message.time}</Text>
+          </View>
+          <View className='message-content'>
+            <Text className='message-text'>{message.content}</Text>
+            {!message.isRead && <View className='unread-indicator'></View>}
+          </View>
+        </View>
+      </View>
+    )
+  }
 
   return (
     <View className='message-container'>
-      <View className='custom-navbar'>
+      {/* 导航栏 */}
-        <View className='message-navigator'>
+      <View className='navbar'>
-          <Avatar className='message-navigator-avatar' src="https://img.yzcdn.cn/vant/cat.jpeg" />
+        <View className='navbar-content'>
-          <Text className='message-navigator-title'>消息</Text>
+          <View className='navbar-left'>
+            <Avatar className='navbar-avatar' src="https://img.yzcdn.cn/vant/cat.jpeg" />
+            <Text className='navbar-title'>消息</Text>
           </View>
         </View>
-      <ScrollView scrollY className='message-content'>
-        <View className='message-content-list'>
-          {messageList.map((item) => (
-            <View className='message-item' key={item.id}>
-              <View className='message-item-title'>
-                <Text>{item.title}</Text>
       </View>
-              <View className='message-item-content'>
+
-                <Text>{item.content}</Text>
+
+      {/* 消息列表 */}
+      <ScrollView scrollY className='message-list'>
+        {filteredMessages.length > 0 ? (
+          <View className='message-list-content'>
+            {filteredMessages.map(renderMessageItem)}
           </View>
+        ) : (
+          <View className='empty-state'>
+            <View className='empty-icon'>
+              <View className='empty-message-icon'></View>
             </View>
-          ))}
+            <Text className='empty-text'>暂无消息</Text>
           </View>
+        )}
       </ScrollView>
+
+      {/* 底部导航 */}
       <GuideBar currentPage='message' />
     </View>
   )

src/static/message/icon-message-arrow.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.33334 4L10.3333 8L6.33334 12" stroke="#3C3C43" stroke-opacity="0.6" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>