Merge branch 'main' of https://bdgit.educoder.net/pizvue73f/unilife

Front/vue-unilife/src/components/MessageNav.vue

@@ -0,0 +1,76 @@
+<template>
+    <div class="left-nav">
+      <div class="nav-title">消息中心</div>
+      <ul class="nav-list">
+        <li 
+          v-for="(item, index) in navItems" 
+          :key="index"
+          :class="['nav-item', { active: activeIndex === index }]"
+          @click="handleNavClick(index)"
+        >
+          <span>{{ item.text }}</span>
+        </li>
+      </ul>
+    </div>
+  </template>
+  
+  <script setup lang="ts">
+  import { ref } from 'vue';
+  
+  const emit = defineEmits(['nav-change']);
+  
+  const activeIndex = ref(0);
+  
+  const navItems = [
+    { text: '私信消息' },
+    { text: '评论回复' },
+    { text: '收到的赞' },
+    { text: '系统通知' }
+  ];
+  
+  const handleNavClick = (index: number) => {
+    activeIndex.value = index;
+    emit('nav-change', index);
+  };
+  </script>
+  
+  <style scoped>
+  .left-nav {
+    width: 15%;
+    background: rgba(255, 255, 255, 0.5);
+    backdrop-filter: blur(10px);
+    border: 2px solid rgba(133, 88, 207, 0.5);
+    border-radius: 10px;
+    padding: 20px 0;
+    margin-right: 20px;
+    margin-left: 100px;
+    height: 90%;
+  }
+  
+  .nav-title {
+    font-size: 32px;
+    font-weight: bold;
+    padding: 0 20px;
+    margin-bottom: 20px;
+    color: #333;
+  }
+  
+  .nav-item {
+    padding: 15px 20px;
+    cursor: pointer;
+    transition: all 0.3s;
+    margin: 5px 10px;
+    border-radius: 8px;
+    font-size: 24px;
+  }
+  
+  .nav-item.active {
+    background: rgba(156, 136, 255, 0.2);
+    color: #9c88ff;
+    font-size: 24px;
+  }
+  
+  .nav-item:hover {
+    background: rgba(156, 136, 255, 0.1);
+  }
+  </style>