From bd043350b640344b9f09b0f49ecc9ad77b555de0 Mon Sep 17 00:00:00 2001
From: Tim <135014430+nagisa77@users.noreply.github.com>
Date: Sat, 5 Jul 2025 14:13:35 +0800
Subject: [PATCH] Add avatar dropdown in header

---
 .../src/components/HeaderComponent.vue        | 75 ++++++++++++++++++-
 open-isle-cli/src/router/index.js             |  6 ++
 open-isle-cli/src/utils/auth.js               | 14 ++++
 open-isle-cli/src/views/SettingsPageView.vue  | 18 +++++
 4 files changed, 110 insertions(+), 3 deletions(-)
 create mode 100644 open-isle-cli/src/views/SettingsPageView.vue

diff --git a/open-isle-cli/src/components/HeaderComponent.vue b/open-isle-cli/src/components/HeaderComponent.vue
index 686168451..fe2fa3648 100644
--- a/open-isle-cli/src/components/HeaderComponent.vue
+++ b/open-isle-cli/src/components/HeaderComponent.vue
@@ -13,8 +13,14 @@
       </div>
 
       <div v-if="isLogin" class="header-content-right">
-        <div class="header-content-item-main" @click="goToProfile">个人中心</div>
-        <div class="header-content-item-secondary" @click="goToLogout">退出</div>
+        <div class="avatar-container" @click="toggleDropdown">
+          <img class="avatar-img" :src="avatar" alt="avatar">
+          <i class="fas fa-caret-down dropdown-icon"></i>
+          <div v-if="dropdownVisible" class="dropdown-menu">
+            <div class="dropdown-item" @click="goToSettings">设置</div>
+            <div class="dropdown-item" @click="goToLogout">退出</div>
+          </div>
+        </div>
       </div>
 
       <div v-else class="header-content-right">
@@ -26,7 +32,7 @@
 </template>
 
 <script>
-import { isLogin } from '../utils/auth'
+import { isLogin, clearToken, fetchCurrentUser } from '../utils/auth'
 
 export default {
   name: 'HeaderComponent',
@@ -36,21 +42,47 @@ export default {
       default: true
     }
   },
+  data() {
+    return {
+      dropdownVisible: false,
+      avatar: 'https://picsum.photos/40'
+    }
+  },
   computed: {
     isLogin() {
       return isLogin()
     }
   },
+  async mounted() {
+    if (this.isLogin) {
+      const user = await fetchCurrentUser()
+      if (user && user.avatar) {
+        this.avatar = user.avatar
+      }
+    }
+  },
 
   methods: {
+    toggleDropdown() {
+      this.dropdownVisible = !this.dropdownVisible
+    },
     goToHome() {
       this.$router.push('/')
     },
     goToLogin() {
       this.$router.push('/login')
     },
+    goToSettings() {
+      this.$router.push('/settings')
+      this.dropdownVisible = false
+    },
     goToSignup() {
       this.$router.push('/signup')
+    },
+    goToLogout() {
+      clearToken()
+      this.dropdownVisible = false
+      this.$router.push('/login')
     }
   }
 }
@@ -131,4 +163,41 @@ export default {
   cursor: pointer;
 }
 
+.avatar-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.avatar-img {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+}
+
+.dropdown-icon {
+  margin-left: 5px;
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: 40px;
+  right: 0;
+  background-color: white;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+  z-index: 10;
+}
+
+.dropdown-item {
+  padding: 8px 16px;
+  white-space: nowrap;
+}
+
+.dropdown-item:hover {
+  background-color: #f2f2f2;
+}
+
 </style>
diff --git a/open-isle-cli/src/router/index.js b/open-isle-cli/src/router/index.js
index f9326bc65..6d4b476ba 100644
--- a/open-isle-cli/src/router/index.js
+++ b/open-isle-cli/src/router/index.js
@@ -6,6 +6,7 @@ import PostPageView from '../views/PostPageView.vue'
 import LoginPageView from '../views/LoginPageView.vue'
 import SignupPageView from '../views/SignupPageView.vue'
 import NewPostPageView from '../views/NewPostPageView.vue'
+import SettingsPageView from '../views/SettingsPageView.vue'
 
 const routes = [
   {
@@ -42,6 +43,11 @@ const routes = [
     path: '/signup',
     name: 'signup',
     component: SignupPageView
+  },
+  {
+    path: '/settings',
+    name: 'settings',
+    component: SettingsPageView
   }
 ]
 
diff --git a/open-isle-cli/src/utils/auth.js b/open-isle-cli/src/utils/auth.js
index d9036ed7b..66d503a36 100644
--- a/open-isle-cli/src/utils/auth.js
+++ b/open-isle-cli/src/utils/auth.js
@@ -14,6 +14,20 @@ export function clearToken() {
   localStorage.removeItem(TOKEN_KEY)
 }
 
+export async function fetchCurrentUser() {
+  const token = getToken()
+  if (!token) return null
+  try {
+    const res = await fetch(`${API_BASE_URL}/api/users/me`, {
+      headers: { Authorization: `Bearer ${token}` }
+    })
+    if (!res.ok) return null
+    return await res.json()
+  } catch (e) {
+    return null
+  }
+}
+
 export function isLogin() {
   const token = getToken()
   console.log('token', token)
diff --git a/open-isle-cli/src/views/SettingsPageView.vue b/open-isle-cli/src/views/SettingsPageView.vue
new file mode 100644
index 000000000..d2d2fd86c
--- /dev/null
+++ b/open-isle-cli/src/views/SettingsPageView.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="settings-page">
+    <h2>设置</h2>
+    <p>这里是设置页面。</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SettingsPageView'
+}
+</script>
+
+<style scoped>
+.settings-page {
+  padding: 20px;
+}
+</style>