完善个人中心及退出登录

layouts/admin/components/AdminHeader.uvue

@@ -1,43 +1,51 @@
 <template>
   <view class="header">
     <view class="header-left">
-      <!-- 移动端菜单切换按钮 (CSS 控制显隐) -->
+      <!-- 移动端菜单切换按钮(CSS 控制显隐) -->
       <view class="menu-toggle mobile-only" @click="onToggleSubSider">
         <text class="menu-icon">☰</text>
       </view>
 
-      <!-- Desktop/Tablet Hamburger (1:1 复刻 CRMEB 切换二级侧边栏) -->
+      <!-- Desktop/Tablet Hamburger -->
       <view class="menu-toggle desktop-only" @click="onToggleSubSider">
         <text class="menu-icon">☰</text>
       </view>
 
       <view class="breadcrumb-container desktop-only">
-        <text class="crumb" v-for="(item, index) in breadcrumb" :key="item.id">
+        <text class="crumb" v-for="(item, index) in breadcrumb" :key="item.id"> 
           {{ item.title }}
           <text v-if="index < breadcrumb.length - 1" class="separator"> / </text>
         </text>
       </view>
-      
-      <!-- 移动端简单标题 (CSS 控制显隐) -->
+
       <text class="mobile-title mobile-only">{{ currentTitle }}</text>
     </view>
 
     <view class="header-right">
-      <view class="hbtn" @click="$emit('search')"><text>🔍</text></view>
-      <view v-if="!isMobile" class="hbtn" @click="$emit('refresh')"><text>⟳</text></view>
-            <view class="hbtn" @click="$emit('notify')">
+      <view class="hbtn" @click="$emit('search')"><text>🔍</text></view>        
+      <view v-if="!isMobile" class="hbtn" @click="$emit('refresh')"><text>🔄</text></view>                                                                                  
+      <view class="hbtn" @click="$emit('notify')">
         <text>🔔</text>
         <view class="dot" v-if="hasNotification"></view>
       </view>
-      
+
       <!-- 用户个人中心 / 下拉菜单 -->
-      <view class="user-profile-container" @click="goToUserCenter">
-        <text class="user-name">crmeb demo</text>
-        <text class="user-arrow">▼</text>
-        
-        <view class="user-dropdown" v-if="showUserMenu">
-          <view class="dropdown-item" @click.stop="goToUserCenter">个人中心</view>
-          <view class="dropdown-item" @click.stop="handleLogout">退出登录</view>
+      <view class="admin-user-menu"
+        @mouseenter="handleUserMenuOver"
+        @mouseleave="handleUserMenuLeave"
+      >
+        <view class="admin-user-trigger" @click="toggleUserMenu">
+          <text class="user-name">{{ userName }}</text>
+          <text class="user-arrow">▼</text>
+        </view>
+
+        <view v-if="showUserMenu" class="admin-user-dropdown">
+          <view class="admin-user-dropdown-item" @click.stop="goToUserCenter">
+            <text class="admin-user-dropdown-text">个人中心</text>
+          </view>
+          <view class="admin-user-dropdown-item" @click.stop="handleLogout">
+            <text class="admin-user-dropdown-text">退出登录</text>
+          </view>
         </view>
       </view>
     </view>
@@ -48,46 +56,74 @@
 import { ref, computed } from 'vue'
 import {
   toggleSubSider,
-  showSubSider,
   layoutMode,
   isOverlayVisible,
   isMobileMenuOpen,
   openRoute
 } from '@/layouts/admin/store/adminNavStore.uts'
+import { state, logout } from '@/utils/store.uts'
 
 const showUserMenu = ref(false)
+const userName = computed((): string => state.userProfile.username || state.userProfile.email || 'admin')
 
-function closeUserMenu() {
-  showUserMenu.value = false
+let hideMenuTimer: number | null = null
+
+function handleUserMenuOver(e: any) {
+  // #ifdef H5
+  if (hideMenuTimer !== null) {
+    clearTimeout(hideMenuTimer as number)
+    hideMenuTimer = null
+  }
+  showUserMenu.value = true
+  // #endif
 }
 
-function toggleUserMenu() {
+function handleUserMenuLeave(e: any) {
+  // #ifdef H5
+  if (hideMenuTimer !== null) {
+    clearTimeout(hideMenuTimer as number)
+  }
+  hideMenuTimer = setTimeout(() => {
+    showUserMenu.value = false
+    hideMenuTimer = null
+  }, 150) as number
+  // #endif
+}
+
+function toggleUserMenu(e: any) {
+  if (e && typeof e.stopPropagation === 'function') {
+    e.stopPropagation()
+  }
   showUserMenu.value = !showUserMenu.value
 }
 
-function goToUserCenter() {
-  uni.showToast({ title: "尝试打开个人中心...", icon: "none", duration: 2000 });
-  
-  uni.showToast({ title: "尝试打开个人中心...", icon: "none", duration: 2000 });
-  
-  console.log("[AdminHeader] goToUserCenter called");
-  console.log("[AdminHeader] goToUserCenter called");
+function goToUserCenter(e: any) {
+  if (e && typeof e.stopPropagation === 'function') {
+    e.stopPropagation()
+  }
   showUserMenu.value = false
   openRoute('home_user_center')
 }
 
-function handleLogout() {
+function handleLogout(e: any) {
+  if (e && typeof e.stopPropagation === 'function') {
+    e.stopPropagation()
+  }
   showUserMenu.value = false
   uni.showModal({
     title: '提示',
     content: '确定要退出登录吗？',
     success: (res) => {
       if (res.confirm) {
+        logout()
         uni.removeStorageSync('adminRole')
         uni.removeStorageSync('token')
-        uni.reLaunch({
-          url: '/pages/user/login'
-        })
+        // Force the layout cleanup to wait for the dialog to disappear 
+        setTimeout(() => {
+          uni.reLaunch({
+            url: '/pages/user/login'
+          })
+        }, 300)
       }
     }
   })
@@ -106,12 +142,6 @@ defineEmits<{
   (e:'toggle-mobile-menu'): void
 }>()
 
-/**
- * 核心切换逻辑：
- * 1. Desktop: 切换 showSubSider (Dock状态)
- * 2. Tablet: 切换 isOverlayVisible (Overlay状态)
- * 3. Mobile: 切换 isMobileMenuOpen (Mobile Aside)
- */
 function onToggleSubSider(): void {
   if (layoutMode.value === 'desktop') {
     toggleSubSider()
@@ -131,17 +161,16 @@ const currentTitle = computed((): string => {
 </script>
 
 <style>
-.header{
-  position: relative;
-  z-index: 1001;
+.header {
+  overflow: visible;
   position: relative;
   z-index: 1001;
   height: 56px;
-  background:#fff;
+  background: #fff;
   border-bottom: 1px solid #eef2f7;
-  display:flex;
-  flex-direction:row;
-  align-items:center;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
   justify-content: space-between;
   padding: 0 16px;
 }
@@ -159,6 +188,7 @@ const currentTitle = computed((): string => {
   display: flex;
   align-items: center;
   justify-content: center;
+  cursor: pointer;
 }
 
 .menu-icon {
@@ -178,9 +208,9 @@ const currentTitle = computed((): string => {
   align-items: center;
 }
 
-.crumb { 
-  color: #374151; 
-  font-size: 14px; 
+.crumb {
+  color: #374151;
+  font-size: 14px;
 }
 
 /* 响应式控制 */
@@ -196,12 +226,6 @@ const currentTitle = computed((): string => {
     display: flex !important;
   }
   .header-right {
-  position: relative;
-  z-index: 100;
-  pointer-events: auto;
-  position: relative;
-  z-index: 100;
-  pointer-events: auto;
     gap: 5px;
   }
 }
@@ -211,45 +235,57 @@ const currentTitle = computed((): string => {
   margin: 0 8px;
 }
 
-.header-right{
+.header-right {
+  overflow: visible;
   position: relative;
   z-index: 100;
   pointer-events: auto;
-  position: relative;
-  z-index: 100;
-  pointer-events: auto; 
-  display:flex; 
-  flex-direction:row;
-  align-items:center; 
-  gap: 10px; 
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+  height: 100%;
 }
-.hbtn{
+
+.hbtn {
   width: 34px;
   height: 34px;
   border-radius: 8px;
-  display:flex;
-  align-items:center;
-  justify-content:center;
-  background:#f6f7fb;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f6f7fb;
   position: relative;
+  cursor: pointer;
 }
-.dot{
+
+.dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background:#ff4d4f;
-  position:absolute;
+  background: #ff4d4f;
+  position: absolute;
   top: 6px;
   right: 6px;
 }
 
-.user-profile-container {
+/* 后台用户菜单部分 */
+.admin-user-menu {
   position: relative;
   display: flex;
   flex-direction: row;
   align-items: center;
-  margin-left: 10px;
+  height: 100%; /* 和 header 高度一致，确保悬停不中断 */
+  overflow: visible;
+}
+
+.admin-user-trigger {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
   cursor: pointer;
+  padding: 0 10px;
+  height: 100%;
 }
 
 .user-name {
@@ -263,43 +299,44 @@ const currentTitle = computed((): string => {
   margin-left: 4px;
 }
 
-.user-dropdown {
-  z-index: 1002;
-  z-index: 1002;
+.admin-user-dropdown {
   position: absolute;
-  top: 40px;
+  top: 56px;
   right: 0;
-  width: 120px;
+  min-width: 120px;
   background-color: #fff;
-  border-radius: 4px;
-  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
-  z-index: 1000;
+  border-radius: 8px;
+  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
+  z-index: 10000;
+  overflow: visible;
   display: flex;
   flex-direction: column;
+  padding: 5px 0;
 }
 
-.dropdown-item {
+.admin-user-dropdown-item {
   height: 40px;
-  line-height: 40px;
-  text-align: center;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 0 20px;
+}
+
+.admin-user-dropdown-text {
   font-size: 14px;
   color: #333;
-  cursor: pointer;
+  line-height: 40px;
 }
 
-.dropdown-item:hover {
+/* #ifdef H5 */
+.admin-user-dropdown-item:hover {
   background-color: #f5f7fa;
+}
+.admin-user-dropdown-item:hover .admin-user-dropdown-text {
   color: #1890ff;
 }
-
-.user-dropdown-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1000;
-  background-color: transparent;
-}
+/* #endif */
 
 </style>