添加通知页面

珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/Header.vue

@@ -32,6 +32,7 @@
         </ul>
       </div>
       <router-link to="/feedback" class="nav-btn">反馈站</router-link>
+      <router-link to="/notificationlist" class="nav-btn">通知</router-link>
     </div>
 
     <!-- 登录/注册按钮 -->

珞珈岛-项目相关文件/luojia-island/vue-frontend/src/router/index.js

@@ -4,6 +4,7 @@ import Register from '../components/Register.vue';
 import PostDetail from '@/views/PostDetail.vue';
 import MainPage from '@/views/MainPage.vue';
 import UserPage from '@/views/UserPage.vue';
+import NotificationList from '@/views/NotificationList.vue';
 
 const routes = [
   {
@@ -30,6 +31,17 @@ const routes = [
     path: '/user',
     name: 'UserPage',
     component: UserPage
+  },
+  {//通知页面
+    path: '/notificationlist',
+    name: 'NotificationList',
+    component: NotificationList
+  },
+  {//详细通知页面
+    path: '/notification/:id', 
+    name: 'NotificationDetail',
+    component: () => import('@/views/NotificationDetail.vue'),
+    props: true
   }
 ];
 

珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/NotificationDetail.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="detail-container">
+    <button @click="$router.go(-1)" class="back-btn">返回</button>
+    
+    <div v-if="currentNotice" class="notice-detail">
+      <h1 class="detail-title">{{ currentNotice.title }}</h1>
+      <div class="meta-info">
+        <span class="time">{{ currentNotice.time }}</span>
+        <span class="notice-id">ID: {{ $route.params.id }}</span>
+      </div>
+      <div class="content-box">
+        {{ currentNotice.content }}
+      </div>
+    </div>
+
+    <div v-else class="loading">
+      {{ errorMessage || '正在加载通知详情...' }}
+    </div>
+  </div>
+</template>
+
+<script>
+const mockFetchNotice = (id) => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      const notices = [
+        { id: 1, title: "系统维护通知", /* 其他字段 */ },
+        { id: 2, title: "新功能上线", /* 其他字段 */ }
+      ]
+      resolve(notices.find(n => n.id === Number(id)))
+    }, 500)
+  })
+}
+
+export default {
+  props: ['id'], // 通过路由props接收参数
+  data() {
+    return {
+      currentNotice: null,
+      errorMessage: ''
+    }
+  },
+  async created() {
+    try {
+      const data = await mockFetchNotice(this.id)
+      if (data) {
+        this.currentNotice = data
+      } else {
+        this.errorMessage = '通知不存在'
+      }
+    } catch (error) {
+      this.errorMessage = '加载失败，请稍后重试'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.detail-container {
+  max-width: 800px;
+  margin: 20px auto;
+  padding: 30px;
+  background-color: #fff;
+  border-radius: 12px;
+  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+}
+
+.back-btn {
+  padding: 8px 16px;
+  background-color: #f0f0f0;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  cursor: pointer;
+  margin-bottom: 20px;
+}
+
+.meta-info {
+  color: #666;
+  font-size: 0.9em;
+  margin: 10px 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.content-box {
+  line-height: 1.8;
+  padding: 20px;
+  background-color: #f9f9f9;
+  border-radius: 8px;
+  margin-top: 15px;
+}
+
+.loading {
+  text-align: center;
+  padding: 50px;
+  color: #888;
+}
+</style>

珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/NotificationList.vue

@@ -0,0 +1,90 @@
+<!-- src/views/NotificationPage.vue -->
+<template>
+  <div class="notification-container">
+    <h1>通知中心</h1>
+    <div class="notification-list">
+      <!-- 示例通知数据 -->
+      <div 
+        v-for="(notice, index) in notifications"
+        :key="index"
+        class="notification-item"
+        @click="viewDetail(notice.id)"
+      >
+        <div class="notice-title">{{ notice.title }}</div>
+        <div class="notice-time">{{ notice.time }}</div>
+        <p class="notice-content">{{ notice.content }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      notifications: [
+        {
+          id:1,
+          title: "系统维护通知",
+          time: "2023-08-20 14:00",
+          content: "服务器将于今晚24:00进行例行维护，预计持续2小时"
+        },
+        {
+          id:2,
+          title: "新功能上线",
+          time: "2023-08-19 09:30",
+          content: "消息中心新增批量处理功能，欢迎体验"
+        }
+      ]
+    }
+  },
+  methods: {
+    viewDetail(noticeId) {
+      this.$router.push({
+        name: 'NotificationDetail',
+        params: { id: noticeId } // 传递动态参数
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.notification-container {
+  max-width: 800px;
+  margin: 20px auto;
+  padding: 20px;
+  background-color: #f9f9f9;
+  border-radius: 8px;
+}
+
+.notification-item {
+  cursor: pointer; 
+  transition: transform 0.2s;
+  padding: 15px;
+  margin: 10px 0;
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+.notification-item:hover {
+  transform: translateX(5px);
+  background-color: #f5f5f5;
+}
+.notice-title {
+  font-weight: bold;
+  color: #333;
+  font-size: 1.1em;
+}
+
+.notice-time {
+  color: #666;
+  font-size: 0.9em;
+  margin: 5px 0;
+}
+
+.notice-content {
+  color: #444;
+  line-height: 1.6;
+}
+</style>