web-usercenter更新

schoolNewsWeb/src/components/base/TopNavigation.vue

@@ -3,12 +3,12 @@
     <div class="nav-container">
       <!-- Logo区域 -->
       <div class="nav-logo">
-        <img src="../../assets/imgs/logo-icon.svg" alt="Logo" class="logo-icon" />
+        <img src="@/assets/imgs/logo-icon.svg" alt="Logo" class="logo-icon" />
         <span class="logo-text">红色思政学习平台</span>
       </div>
 
       <!-- 导航菜单 -->
-      <div class="nav-menu">
+      <div class="nav-menu" @wheel="handleWheel">
         <div
           v-for="menu in navigationMenus"
           :key="menu.menuID"
@@ -88,9 +88,15 @@ const dropdownPositions = ref<Record<string, { left: number; top: number; width:
 const allMenus = computed(() => store.getters['auth/menuTree']);
 const userInfo = computed(() => store.getters['auth/userInfo']);
 
-// 获取第一层的导航菜单（MenuType.NAVIGATION）
+// 获取第一层的导航菜单（MenuType.NAVIGATION），过滤掉用户相关菜单
 const navigationMenus = computed(() => {
-  const menus = allMenus.value.filter((menu: SysMenu) => menu.type === MenuType.NAVIGATION);
+  const menus = allMenus.value.filter((menu: SysMenu) => {
+    // 过滤掉"用户下拉菜单"容器，这些显示在UserDropdown中
+    if (menu.menuID === 'menu_user_dropdown') {
+      return false;
+    }
+    return menu.type === MenuType.NAVIGATION;
+  });
   console.log('导航菜单数据:', menus);
   menus.forEach((menu: SysMenu) => {
     console.log(`菜单 ${menu.name}:`, {
@@ -190,6 +196,15 @@ function handleMouseLeave() {
   activeDropdown.value = null;
 }
 
+// 处理鼠标滚轮水平滚动
+function handleWheel(event: WheelEvent) {
+  const container = event.currentTarget as HTMLElement;
+  if (container) {
+    event.preventDefault();
+    container.scrollLeft += event.deltaY;
+  }
+}
+
 // 处理导航点击
 function handleNavClick(menu: SysMenu) {
   activeDropdown.value = null;
@@ -227,6 +242,7 @@ function handleLogout() {
   position: sticky;
   top: 0;
   z-index: 1000;
+  overflow: hidden;
 }
 
 .nav-container {
@@ -238,6 +254,7 @@ function handleLogout() {
   gap: 20px;
   width: 100%;
   position: relative;
+  overflow: visible;
 }
 
 .nav-logo {
@@ -268,36 +285,31 @@ function handleLogout() {
   gap: 0;
   flex: 1;
   overflow-x: auto;
-  overflow-y: hidden;
+  overflow-y: visible;
   scroll-behavior: smooth;
-  padding-bottom: 2px; /* 为滚动条留出空间 */
   
   /* 自定义滚动条样式 */
-  scrollbar-width: thin;
+  scrollbar-width: auto;
   scrollbar-color: #C62828 #f5f5f5;
   
   &::-webkit-scrollbar {
-    height: 6px;
+    height: 8px;
   }
   
   &::-webkit-scrollbar-track {
     background: #f5f5f5;
-    border-radius: 3px;
+    border-radius: 4px;
+    margin: 0 10px; /* 滚动条内缩 */
   }
   
   &::-webkit-scrollbar-thumb {
     background: #C62828;
-    border-radius: 3px;
+    border-radius: 4px;
     
     &:hover {
       background: #B71C1C;
     }
   }
-  
-  /* 当内容可以滚动时显示滚动条 */
-  &:hover::-webkit-scrollbar-thumb {
-    background: #C62828;
-  }
 }
 
 .nav-item {