feat(router): 添加消息中心和消息详情页面的路由配置

新增消息中心和消息详情页面的路由配置，并创建相应的Vue组件文件。消息中心页面展示用户消息列表，消息详情页面展示具体消息内容，支持消息已读状态的更新。

@@ -116,6 +116,18 @@ const routes = [
     meta: { title: '我的收藏' },
   },
   {
+    path: '/profile/messages',
+    name: 'Messages',
+    component: () => import('../views/profile/MessagesPage.vue'),
+    meta: { title: '消息中心' },
+  },
+  {
+    path: '/profile/messages/:id',
+    name: 'MessageDetail',
+    component: () => import('../views/profile/MessageDetailPage.vue'),
+    meta: { title: '消息详情' },
+  },
+  {
     path: '/test',
     name: 'test',
     component: () => import('../views/test.vue'),

+<!--
+ * @Date: 2025-03-24 12:56:24
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2025-03-24 12:56:26
+ * @FilePath: /mlaj/src/views/profile/MessageDetailPage.vue
+ * @Description: 文件描述
+-->
+<template>
+  <AppLayout title="消息详情">
+    <div class="bg-gradient-to-br from-green-50 via-green-100/30 to-blue-50/30 min-h-screen">
+      <div class="p-4">
+        <FrostedGlass class="p-4 rounded-xl">
+          <div class="mb-4">
+            <h1 class="text-xl font-medium mb-2">{{ message.title }}</h1>
+            <div class="text-xs text-gray-500">{{ message.time }}</div>
+          </div>
+          <div class="text-gray-700 leading-relaxed whitespace-pre-wrap">
+            {{ message.content }}
+          </div>
+        </FrostedGlass>
+      </div>
+    </div>
+  </AppLayout>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import AppLayout from '@/components/layout/AppLayout.vue';
+import FrostedGlass from '@/components/ui/FrostedGlass.vue';
+
+const route = useRoute();
+const message = ref({
+  title: '',
+  content: '',
+  time: '',
+  isRead: false
+});
+
+// 模拟获取消息详情
+const mockMessage = {
+  id: 1,
+  title: '课程更新通知',
+  content: '亲爱的用户：\n\n您关注的课程《亲子教育入门》已更新最新一期内容！\n\n本次更新包含以下内容：\n1. 亲子沟通的技巧与方法\n2. 如何培养孩子的学习兴趣\n3. 处理孩子叛逆期的建议\n\n快来查看最新内容，提升您的育儿技能吧！',
+  time: '2024-01-10 10:30',
+  isRead: false
+};
+
+onMounted(() => {
+  // 模拟异步获取消息详情
+  setTimeout(() => {
+    const messageId = parseInt(route.params.id);
+    message.value = { ...mockMessage, id: messageId };
+    // 更新消息已读状态
+    message.value.isRead = true;
+  }, 500);
+});
+</script>

+<!--
+ * @Date: 2025-03-24 12:56:07
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2025-03-24 12:56:09
+ * @FilePath: /mlaj/src/views/profile/MessagesPage.vue
+ * @Description: 消息中心页面
+-->
+<template>
+  <AppLayout title="消息中心">
+    <div class="bg-gradient-to-br from-green-50 via-green-100/30 to-blue-50/30 min-h-screen">
+      <van-list
+        v-model:loading="loading"
+        :finished="finished"
+        finished-text="没有更多了"
+        @load="onLoad"
+        class="px-4 py-4"
+      >
+        <FrostedGlass
+          v-for="message in messages"
+          :key="message.id"
+          class="mb-4 rounded-xl overflow-hidden"
+          @click="handleMessageClick(message)"
+        >
+          <div class="p-4">
+            <div class="flex justify-between items-start mb-2">
+              <h3 class="text-base font-medium flex items-center">
+                <span
+                  v-if="!message.isRead"
+                  class="w-2 h-2 bg-red-500 rounded-full mr-2"
+                ></span>
+                {{ message.title }}
+              </h3>
+              <span class="text-xs text-gray-500">{{ message.time }}</span>
+            </div>
+            <p class="text-sm text-gray-600 line-clamp-2">{{ message.content }}</p>
+          </div>
+        </FrostedGlass>
+      </van-list>
+    </div>
+  </AppLayout>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+import AppLayout from '@/components/layout/AppLayout.vue';
+import FrostedGlass from '@/components/ui/FrostedGlass.vue';
+
+const router = useRouter();
+const loading = ref(false);
+const finished = ref(false);
+const messages = ref([]);
+const page = ref(1);
+
+// 模拟消息数据
+const mockMessages = [
+  {
+    id: 1,
+    title: '课程更新通知',
+    content: '您关注的课程《亲子教育入门》已更新最新一期内容，快来查看吧！',
+    time: '2024-01-10 10:30',
+    isRead: false
+  },
+  {
+    id: 2,
+    title: '活动提醒',
+    content: '您报名的「亲子互动工作坊」将于本周六下午2点开始，请准时参加。',
+    time: '2024-01-09 15:20',
+    isRead: true
+  },
+  {
+    id: 3,
+    title: '系统通知',
+    content: '为了给您提供更好的服务，我们的App将于今晚凌晨2点进行系统升级维护。',
+    time: '2024-01-08 18:00',
+    isRead: false
+  }
+];
+
+// 加载更多
+const onLoad = () => {
+  // 模拟异步加载数据
+  setTimeout(() => {
+    if (page.value === 1) {
+      messages.value = mockMessages;
+    } else {
+      // 模拟没有更多数据
+      finished.value = true;
+    }
+    loading.value = false;
+    page.value++;
+  }, 1000);
+};
+
+// 更新消息已读状态
+const updateMessageReadStatus = (messageId) => {
+  const index = messages.value.findIndex(msg => msg.id === messageId);
+  if (index !== -1) {
+    messages.value[index].isRead = true;
+  }
+};
+
+// 处理消息点击
+const handleMessageClick = (message) => {
+  updateMessageReadStatus(message.id);
+  router.push(`/profile/messages/${message.id}`);
+};
+</script>