From e1ae0605513c0bff8fed7258c44fad8166265725 Mon Sep 17 00:00:00 2001
From: ovo <ovo@ovo.com>
Date: Sat, 7 Dec 2024 22:26:09 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AF=B9=E6=8E=A5=E5=90=8E=E7=AB=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/TopBar.vue | 185 +++++++++++++++++--------------
 src/stores/user.ts               |  13 ++-
 2 files changed, 108 insertions(+), 90 deletions(-)

diff --git a/src/components/layout/TopBar.vue b/src/components/layout/TopBar.vue
index ee4f5d1..cbf18d6 100644
--- a/src/components/layout/TopBar.vue
+++ b/src/components/layout/TopBar.vue
@@ -1,58 +1,72 @@
 <template>
-  <div class="top-bar">
+  <div class="topbar">
     <div class="left">
-      <el-icon class="menu-icon" @click="toggleSidebar">
-        <Expand v-if="isCollapsed" />
-        <Fold v-else />
-      </el-icon>
+      <router-link to="/" class="logo">智慧养老平台</router-link>
     </div>
-
+    
     <div class="right">
-      <el-dropdown trigger="click" @command="handleCommand">
-        <div class="user-info">
-          <el-avatar :src="userInfo.avatar" />
-          <span class="username">{{ userInfo.nickname }}</span>
-        </div>
-        <template #dropdown>
-          <el-dropdown-menu>
-            <el-dropdown-item command="profile">
-              <el-icon><User /></el-icon>个人中心
-            </el-dropdown-item>
-            <el-dropdown-item command="settings">
-              <el-icon><Setting /></el-icon>个人设置
-            </el-dropdown-item>
-            <el-dropdown-item divided command="logout">
-              <el-icon><SwitchButton /></el-icon>退出登录
-            </el-dropdown-item>
-          </el-dropdown-menu>
-        </template>
-      </el-dropdown>
+      <template v-if="userStore.userInfo">
+        <!-- 已登录状态 -->
+        <el-dropdown @command="handleCommand">
+          <div class="user-info">
+            <el-avatar 
+              :size="32" 
+              :src="userStore.userInfo.avatar || defaultAvatar"
+            />
+            <span class="nickname">{{ userStore.userInfo.nickname || '用户' }}</span>
+          </div>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item command="profile">
+                <el-icon><User /></el-icon>
+                个人中心
+              </el-dropdown-item>
+              <el-dropdown-item command="settings">
+                <el-icon><Setting /></el-icon>
+                设置
+              </el-dropdown-item>
+              <el-dropdown-item divided command="logout">
+                <el-icon><SwitchButton /></el-icon>
+                退出登录
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </template>
+      <template v-else>
+        <!-- 未登录状态 -->
+        <router-link to="/login" class="login-btn">
+          <el-button type="primary">登录</el-button>
+        </router-link>
+        <router-link to="/register" class="register-btn">
+          <el-button>注册</el-button>
+        </router-link>
+      </template>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, inject, onMounted } from 'vue'
+import { onMounted } from 'vue'
 import { useRouter } from 'vue-router'
-import { ElMessageBox } from 'element-plus'
-import { User, Setting, SwitchButton, Expand, Fold } from '@element-plus/icons-vue'
+import { useUserStore } from '@/stores/user'
+import { ElMessage } from 'element-plus'
+import { User, Setting, SwitchButton } from '@element-plus/icons-vue'
+import defaultAvatar from '@/assets/default-avatar.png'
 
 const router = useRouter()
-const isCollapsed = inject('isCollapsed', ref(false))
+const userStore = useUserStore()
 
-// 模拟用户信息
-const userInfo = ref({
-  nickname: '张三',
-  avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
+// 初始化时获取用户信息
+onMounted(async () => {
+  const token = localStorage.getItem('token')
+  if (token && !userStore.userInfo) {
+    userStore.setToken(token)
+    await userStore.getUserInfo()
+  }
 })
 
-
-
-
-const toggleSidebar = () => {
-  isCollapsed.value = !isCollapsed.value
-}
-
+// 处理下拉菜单命令
 const handleCommand = async (command: string) => {
   switch (command) {
     case 'profile':
@@ -62,68 +76,69 @@ const handleCommand = async (command: string) => {
       router.push('/settings')
       break
     case 'logout':
-      await handleLogout()
+      userStore.clearUserInfo()
+      ElMessage.success('退出登录成功')
+      router.push('/login')
       break
   }
 }
-
-const handleLogout = async () => {
-  try {
-    await ElMessageBox.confirm('确定要退出登录吗？', '提示', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning'
-    })
-
-    // 清除本地存储的用户信息和token
-    localStorage.removeItem('token')
-    localStorage.removeItem('userInfo')
-
-    // 跳转到登录页
-    router.push('/login')
-  } catch {
-    // 用户取消操作
-  }
-}
 </script>
 
 <style scoped>
-.top-bar {
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: 0;
-  height: 60px;
-  background: #fff;
-  box-shadow: 0 1px 4px rgba(0,21,41,.08);
+.topbar {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0 20px;
-  z-index: 1000;
+  height: 60px;
+  background-color: #fff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
-.menu-icon {
+.logo {
   font-size: 20px;
-  cursor: pointer;
-  color: #666;
-}
-
-.user-info {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-}
-
-.username {
-  margin-left: 8px;
-  font-size: 14px;
-  color: #666;
+  font-weight: bold;
+  color: #333;
+  text-decoration: none;
 }
 
 .right {
   display: flex;
   align-items: center;
-  gap: 20px;
+  gap: 16px;
+}
+
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  padding: 2px 8px;
+  border-radius: 4px;
+  transition: background-color 0.3s;
+}
+
+.user-info:hover {
+  background-color: #f5f7fa;
+}
+
+.nickname {
+  font-size: 14px;
+  color: #333;
+}
+
+.login-btn,
+.register-btn {
+  text-decoration: none;
+}
+
+.el-dropdown-menu__item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.el-icon {
+  margin-right: 4px;
 }
 </style>
diff --git a/src/stores/user.ts b/src/stores/user.ts
index 3520a76..6a2db6a 100644
--- a/src/stores/user.ts
+++ b/src/stores/user.ts
@@ -2,6 +2,7 @@ import { defineStore } from 'pinia'
 import { ref } from 'vue'
 import type { UserInfo } from '@/api/user'
 import { userApi } from '@/api/user'
+import { ElMessage } from 'element-plus'
 
 export const useUserStore = defineStore('user', () => {
   const userInfo = ref<UserInfo | null>(null)
@@ -10,8 +11,9 @@ export const useUserStore = defineStore('user', () => {
   // 获取用户信息
   const getUserInfo = async () => {
     try {
-      console.log(1111)
-      await userApi.getCurrentUser()
+      const data = await userApi.getCurrentUser()
+      userInfo.value = data
+      return data
     } catch (error) {
       console.error('获取用户信息失败:', error)
       return null
@@ -19,8 +21,9 @@ export const useUserStore = defineStore('user', () => {
   }
 
   // 设置token
-  const setToken = (token: string) => {
-    localStorage.setItem('token', token)
+  const setToken = (newToken: string) => {
+    token.value = newToken
+    localStorage.setItem('token', newToken)
   }
 
   // 清除用户信息
@@ -35,6 +38,6 @@ export const useUserStore = defineStore('user', () => {
     token,
     getUserInfo,
     setToken,
-    clearUserInfo,
+    clearUserInfo
   }
 })