Update API request formatting and routing structure

pages/personal-Center/index/message-center.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="system-message">
+    <!-- 顶部导航 -->
+    <div class="nav-tabs">
+      <el-tabs v-model="activeTab">
+        <el-tab-pane label="系统消息" name="system"></el-tab-pane>
+        <el-tab-pane label="交易消息" name="trade"></el-tab-pane>
+        <el-tab-pane label="论坛社区互动" name="forum"></el-tab-pane>
+      </el-tabs>
+      <div class="read-all">
+        <el-button type="primary" link>全部已读</el-button>
+      </div>
+    </div>
+
+    <!-- 消息列表 -->
+    <div class="message-list">
+      <div v-for="(message, index) in messages" :key="index" class="message-item">
+        <div class="message-icon">
+          <el-icon size="24">
+            <Bell />
+          </el-icon>
+        </div>
+        <div class="message-content">
+          <div class="message-title">
+            <span>{{ message.title }}</span>
+          </div>
+          <div class="message-desc">{{ message.description }}</div>
+        </div>
+        <div class="message-time">{{ message.time }}</div>
+      </div>
+    </div>
+
+    <!-- 查看更多 -->
+    <div class="view-more">
+      <el-button type="primary" link>查看更多 >></el-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+  import { Bell } from '@element-plus/icons-vue'
+
+  const activeTab = ref('system')
+
+  interface Message {
+    title: string
+    description: string
+    time: string
+  }
+
+  const messages = ref<Message[]>([
+    {
+      title: '国庆夕金币充值优惠！',
+      description: '国庆夕限时优惠，微信满500送50金币，充200送10金币',
+      time: '2025-03-05 17:00:57',
+    },
+    {
+      title: '国庆夕金币充值优惠！',
+      description: '国庆夕限时优惠，微信满500送50金币，充200送10金币',
+      time: '2025-03-05 17:00:57',
+    },
+  ])
+</script>
+
+<style scoped>
+  .system-message {
+    /* background-color: #f0f6ff; */
+    width: 913px;
+    padding: 20px 25px;
+    box-sizing: border-box;
+    background: #ffffff;
+    border-radius: 6px;
+    border: 1px solid #eeeeee;
+  }
+
+  .nav-tabs {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: white;
+    border-radius: 8px;
+    margin-bottom: 20px;
+    width: 100%;
+  }
+
+  .read-all {
+    padding-right: 20px;
+  }
+
+  .message-list {
+    background: white;
+    border-radius: 8px;
+    width: 100%;
+  }
+
+  .message-item {
+    display: flex;
+    align-items: flex-start;
+    padding: 15px 20px;
+    border-bottom: 1px solid #eee;
+  }
+
+  .message-item:last-child {
+    border-bottom: none;
+  }
+
+  .message-icon {
+    color: #409eff;
+    margin-right: 15px;
+    flex-shrink: 0;
+  }
+
+  .message-content {
+    flex: 1;
+    min-width: 0; /* 防止文本溢出 */
+  }
+
+  .message-title {
+    font-weight: bold;
+    margin-bottom: 5px;
+  }
+
+  .message-desc {
+    color: #666;
+    font-size: 14px;
+  }
+
+  .message-time {
+    color: #999;
+    font-size: 12px;
+    flex-shrink: 0;
+    margin-left: 15px;
+  }
+
+  .view-more {
+    text-align: center;
+    padding: 10px 0;
+    color: #409eff;
+    background: white;
+    margin-top: 20px;
+    border-radius: 8px;
+    width: 100%;
+  }
+
+  :deep(.el-tabs__header) {
+    margin-bottom: 0;
+    padding-left: 20px;
+  }
+
+  :deep(.el-tabs__nav-wrap) {
+    padding-right: 20px;
+  }
+</style>