web-usercenter更新

schoolNewsWeb/src/components/base/UserDropdown.vue

@@ -1,5 +1,12 @@
 <template>
-  <div class="user-dropdown" @click="toggleDropdown" v-click-outside="closeDropdown">
+  <div 
+    ref="dropdownRef"
+    class="user-dropdown" 
+    @click="toggleDropdown"
+    @mouseenter="openDropdown"
+    @mouseleave="closeDropdown"
+    v-click-outside="forceCloseDropdown"
+  >
     <!-- 未登录状态 -->
     <div class="login-info" v-if="!isLoggedIn">
       <div class="login-text">
@@ -23,8 +30,15 @@
     </div>
     
     <!-- 下拉菜单 -->
-    <transition name="dropdown">
-      <div class="dropdown-menu" v-if="dropdownVisible">
+    <Teleport to="body">
+      <div 
+        class="dropdown-menu" 
+        :class="{ 'show': dropdownVisible }"
+        :style="dropdownStyle"
+        v-if="dropdownVisible"
+        @mouseenter="openDropdown"
+        @mouseleave="closeDropdown"
+      >
         <!-- 未登录时的菜单 -->
         <template v-if="!isLoggedIn">
           <div class="dropdown-item" @click="goToLogin">
@@ -39,22 +53,24 @@
         
         <!-- 已登录时的菜单 -->
         <template v-else>
-          <div class="dropdown-item" @click="goToProfile">
-            <i class="item-icon icon-profile"></i>
-            <span>个人资料</span>
+          <!-- 动态菜单项（个人中心、账号中心） -->
+          <div 
+            v-for="menu in userMenus" 
+            :key="menu.menuID"
+            class="dropdown-item" 
+            @click="goToMenu(menu)"
+          >
+            <i class="item-icon">{{ getMenuIcon(menu) }}</i>
+            <span>{{ menu.name }}</span>
           </div>
-          <div class="dropdown-item" @click="goToSettings">
-            <i class="item-icon icon-settings"></i>
-            <span>账户设置</span>
-          </div>
-          <div class="dropdown-divider"></div>
+          <div class="dropdown-divider" v-if="userMenus.length > 0"></div>
           <div class="dropdown-item danger" @click="handleLogout">
             <i class="item-icon icon-logout"></i>
             <span>退出登录</span>
           </div>
         </template>
       </div>
-    </transition>
+    </Teleport>
   </div>
 </template>
 
@@ -62,7 +78,7 @@
 import { ref, computed } from 'vue';
 import { useRouter } from 'vue-router';
 import { useStore } from 'vuex';
-import type { UserVO } from '@/types';
+import type { UserVO, SysMenu } from '@/types';
 
 // Props
 interface Props {
@@ -79,6 +95,9 @@ const emit = defineEmits<{
 
 // 状态
 const dropdownVisible = ref(false);
+const dropdownRef = ref<HTMLElement | null>(null);
+const dropdownPosition = ref({ top: 0, left: 0 });
+const closeTimer = ref<number | null>(null);
 
 // Composition API
 const router = useRouter();
@@ -103,39 +122,106 @@ const primaryRole = computed(() => {
   return '管理员'; // 暂时硬编码
 });
 
+// 获取用户下拉菜单（个人中心和账号中心）
+const userMenus = computed(() => {
+  const allMenus = store.getters['auth/menuTree'] as SysMenu[];
+  
+  // 查找"用户下拉菜单"容器
+  const userDropdownMenu = allMenus.find((menu: SysMenu) => menu.menuID === 'menu_user_dropdown');
+  
+  if (!userDropdownMenu || !userDropdownMenu.children) {
+    return [];
+  }
+  
+  // 返回用户下拉菜单下的所有NAVIGATION类型子菜单（个人中心、账号中心）
+  return userDropdownMenu.children.filter((menu: SysMenu) => menu.type === 1); // MenuType.NAVIGATION = 1
+});
+
+// 下拉菜单样式
+const dropdownStyle = computed(() => {
+  return {
+    position: 'fixed' as const,
+    top: `${dropdownPosition.value.top}px`,
+    left: `${dropdownPosition.value.left}px`,
+    minWidth: '160px',
+  };
+});
+
 // 方法 - 使用 function 声明
+function openDropdown() {
+  // 清除关闭定时器
+  if (closeTimer.value) {
+    clearTimeout(closeTimer.value);
+    closeTimer.value = null;
+  }
+  
+  dropdownVisible.value = true;
+  
+  // 计算下拉菜单位置
+  if (dropdownRef.value) {
+    const rect = dropdownRef.value.getBoundingClientRect();
+    dropdownPosition.value = {
+      top: rect.bottom + 4, // 距离触发器底部4px
+      left: rect.right - 160, // 右对齐：触发器右边缘减去下拉菜单宽度
+    };
+  }
+}
+
 function toggleDropdown() {
-  dropdownVisible.value = !dropdownVisible.value;
+  if (dropdownVisible.value) {
+    forceCloseDropdown();
+  } else {
+    openDropdown();
+  }
 }
 
 function closeDropdown() {
+  // 延迟关闭，给用户时间移动到下拉菜单
+  closeTimer.value = setTimeout(() => {
+    dropdownVisible.value = false;
+    closeTimer.value = null;
+  }, 200);
+}
+
+function forceCloseDropdown() {
+  if (closeTimer.value) {
+    clearTimeout(closeTimer.value);
+    closeTimer.value = null;
+  }
   dropdownVisible.value = false;
 }
 
 // 未登录时的操作
 function goToLogin() {
-  closeDropdown();
+  forceCloseDropdown();
   router.push('/login');
 }
 
 function goToRegister() {
-  closeDropdown();
+  forceCloseDropdown();
   router.push('/register');
 }
 
 // 已登录时的操作
-function goToProfile() {
-  closeDropdown();
-  router.push('/profile');
+function goToMenu(menu: SysMenu) {
+  forceCloseDropdown();
+  if (menu.url) {
+    router.push(menu.url);
+  }
 }
 
-function goToSettings() {
-  closeDropdown();
-  router.push('/profile/settings');
+function getMenuIcon(menu: SysMenu) {
+  // 根据菜单ID返回对应图标
+  if (menu.menuID === 'menu_user_center') {
+    return '👤';
+  } else if (menu.menuID === 'menu_profile') {
+    return '⚙️';
+  }
+  return '📋';
 }
 
 function handleLogout() {
-  closeDropdown();
+  forceCloseDropdown();
   emit('logout');
 }
 
@@ -252,16 +338,21 @@ const vClickOutside = {
 }
 
 .dropdown-menu {
-  position: absolute;
-  top: 100%;
-  right: 0;
-  min-width: 160px;
   background: white;
   border-radius: 4px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
   border: 1px solid #e8e8e8;
-  z-index: 1000;
+  z-index: 10000;
   overflow: hidden;
+  opacity: 0;
+  transform: scaleY(0);
+  transform-origin: top center;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+  
+  &.show {
+    opacity: 1;
+    transform: scaleY(1);
+  }
 }
 
 .dropdown-item {
@@ -299,18 +390,6 @@ const vClickOutside = {
   margin: 4px 0;
 }
 
-/* 动画效果 */
-.dropdown-enter-active,
-.dropdown-leave-active {
-  transition: all 0.2s ease;
-}
-
-.dropdown-enter-from,
-.dropdown-leave-to {
-  opacity: 0;
-  transform: translateY(-4px);
-}
-
 /* 图标字体类 */
 .icon-login::before { content: "🔑"; }
 .icon-register::before { content: "📝"; }