后台

src/views/index.vue

@@ -1,15 +1,35 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, onMounted } from 'vue'
+import { getUserInfo } from '../utils/jwt'
 
 const isLoggedIn = computed(() => {
-  return !!localStorage.getItem('access_token')
+  return !!localStorage.getItem('access_token') && !!currentUserData.value
 })
 
 const showMobileMenu = ref(false)
+const currentUserData = ref(null)
+
+const userAvatarUrl = computed(() => {
+  if (currentUserData.value && currentUserData.value.qq_code) {
+    return `http://q1.qlogo.cn/g?b=qq&nk=${currentUserData.value.qq_code}&s=40`
+  }
+  return null
+})
 
 const toggleMobileMenu = () => {
   showMobileMenu.value = !showMobileMenu.value
 }
+
+onMounted(async () => {
+  if (localStorage.getItem('access_token')) {
+    const userInfo = await getUserInfo()
+    if (userInfo) {
+      currentUserData.value = userInfo
+    } else {
+      console.log('Index.vue: Failed to get user info, token might be invalid.')
+    }
+  }
+})
 </script>
 
 <template>
@@ -32,6 +52,10 @@ const toggleMobileMenu = () => {
             <i class="fas fa-user"></i>
             {{ isLoggedIn ? '管理后台' : '登录' }}
           </router-link>
+          <div v-if="isLoggedIn && currentUserData" class="user-info-nav">
+            <img v-if="userAvatarUrl" :src="userAvatarUrl" alt="User Avatar" class="nav-avatar" />
+            <span class="nav-username">{{ currentUserData.username }}</span>
+          </div>
         </div>
       </div>
     </nav>
@@ -104,6 +128,7 @@ const toggleMobileMenu = () => {
   margin: 0 auto;
   padding: 0 20px;
   height: auto;
+  min-height: 60px;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -135,6 +160,7 @@ const toggleMobileMenu = () => {
 .nav-right {
   display: flex;
   align-items: center;
+  gap: 15px;
   width: 100%;
   justify-content: center;
   display: none;
@@ -192,7 +218,28 @@ const toggleMobileMenu = () => {
   font-size: 14px;
 }
 
-/* 移动端菜单按钮 */
+.user-info-nav {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-left: 15px;
+  padding: 5px 0;
+}
+
+.nav-avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  object-fit: cover;
+}
+
+.nav-username {
+  color: white;
+  font-weight: 500;
+  font-size: 0.9rem;
+}
+
 .mobile-menu-toggle {
   display: block;
   font-size: 1.5rem;
@@ -203,7 +250,6 @@ const toggleMobileMenu = () => {
   padding: 10px;
 }
 
-/* Footer 样式 */
 .footer-bottom {
   width: 100%;
   max-width: 1200px;
@@ -246,47 +292,29 @@ const toggleMobileMenu = () => {
   color: white;
 }
 
-/* ----------- 桌面端样式 ----------- */
 @media (min-width: 769px) {
-  .nav-container {
-    height: 60px;
-    flex-wrap: nowrap;
-    padding: 0 20px;
-  }
-  
-  .nav-brand {
-    font-size: 1.5rem;
-    padding: 0;
-  }
-  
-  .nav-left {
-    flex-direction: row;
-    width: auto;
-    display: flex;
-    margin-left: 30px;
-    gap: 20px;
-  }
-  
-  .nav-right {
-    width: auto;
-    display: flex;
-    padding: 0;
-  }
-  
-  .nav-link {
-    width: auto;
-    padding: 8px 16px;
-    font-size: 0.95rem;
-    text-align: left;
-  }
-  
   .mobile-menu-toggle {
     display: none;
   }
-  
-  .login-btn {
-    padding: 8px 16px;
+
+  .nav-left, .nav-right {
+    display: flex !important;
+    flex-direction: row;
     width: auto;
+    padding-bottom: 0;
+  }
+
+  .nav-left {
+  }
+
+  .nav-link {
+    width: auto;
+    padding: 15px 16px;
+    font-size: 0.95rem;
+  }
+
+  .nav-container {
+    flex-wrap: nowrap;
   }
 }
 </style>