add 一级菜单样式修改

src/layout/navBars/topBar/index.vue

@@ -2,11 +2,9 @@
   <div class="layout-navbars-breadcrumb-index" :class="setBreadcrumbStyle">
     <div class="left-section">
       <Logo v-if="setIsShowLogo" />
-      <Breadcrumb />
     </div>
-
-    <Horizontal :menuList="state.menuList" />
     <div class="right-section">
+      <Horizontal :menuList="state.menuList" />
       <User />
     </div>
   </div>
@@ -82,6 +80,7 @@ const filterRoutesFun = <T extends RouteItem>(arr: T[]): T[] => {
     .filter((item: T) => !item.meta?.isHide)
     .map((item: T) => {
       item = Object.assign({}, item)
+      // 恢复子菜单数据处理，支持下拉菜单功能
       if (item.children) item.children = filterRoutesFun(item.children)
       return item
     })

src/layout/navBars/topBar/user.vue

@@ -32,6 +32,10 @@
       </template>
     </el-dropdown>
 
+    <div class="layout-navbars-breadcrumb-user-icon" @click="onLayoutSetingClick">
+      <i class="icon-skin iconfont" :title="$t('message.user.title3')"></i>
+    </div>
+
     <div class="layout-navbars-breadcrumb-user-icon" @click="onMsgClick">
       <el-badge :is-dot="state.unread">
         <el-icon :title="$t('message.user.title4')">
@@ -61,7 +65,6 @@ import { WebSocketClient } from '/@/utils/ws'
 
 // 引入组件
 const Msg = defineAsyncComponent(() => import('/@/layout/navBars/topBar/msg.vue'))
-const Search = defineAsyncComponent(() => import('/@/layout/navBars/topBar/search.vue'))
 
 // 定义变量内容
 const { locale, t } = useI18n()

src/layout/navMenu/horizontal.vue

@@ -1,24 +1,34 @@
 <template>
   <div class="el-menu-horizontal-warp">
-    <el-menu router :default-active="state.defaultActive" background-color="transparent" mode="horizontal">
-      <template v-for="val in menuLists">
-        <el-sub-menu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
-          <template #title>
-            <SvgIcon :name="val.meta.icon" />
-            <span>{{ $t(val.meta.title) }}</span>
-          </template>
-          <SubItem :chil="val.children" />
-        </el-sub-menu>
-        <template v-else>
-          <el-menu-item :index="val.path" :key="val.path">
-            <template #title v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)">
-              <SvgIcon :name="val.meta.icon" />
-              {{ $t(val.meta.title) }}
-            </template>
-          </el-menu-item>
-        </template>
+    <!-- 将四个模块合并为一个下拉菜单，类似语言切换 -->
+    <el-dropdown 
+      :show-timeout="70" 
+      :hide-timeout="50" 
+      trigger="click"
+      @command="onModuleCommand"
+      class="module-dropdown"
+    >
+      <div class="module-selector">
+        <SvgIcon :name="currentModule.icon" />
+        <span class="module-title">{{ currentModule.title }}</span>
+        <el-icon class="el-icon--right">
+          <ele-ArrowDown />
+        </el-icon>
+      </div>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item 
+            v-for="module in moduleList" 
+            :key="module.path"
+            :command="module.path"
+            :class="{ 'is-active': isCurrentModule(module.path) }"
+          >
+            <SvgIcon :name="module.icon" class="dropdown-icon" />
+            {{ module.title }}
+          </el-dropdown-item>
+        </el-dropdown-menu>
       </template>
-    </el-menu>
+    </el-dropdown>
   </div>
 </template>
 
@@ -26,6 +36,7 @@
 import { defineAsyncComponent, reactive, computed, onBeforeMount } from 'vue'
 import { useRoute, onBeforeRouteUpdate, RouteRecordRaw, useRouter } from 'vue-router'
 import { storeToRefs } from 'pinia'
+import { useI18n } from 'vue-i18n'
 import { useRoutesList } from '/@/stores/routesList'
 import { useThemeConfig } from '/@/stores/themeConfig'
 import other from '/@/utils/other'
@@ -34,9 +45,10 @@ import { treeToList, listToTree, filterList } from '/@/utils/tree'
 import { cloneDeep } from 'lodash-es'
 
 const router = useRouter()
+const { t } = useI18n()
 
 // 引入组件
-const SubItem = defineAsyncComponent(() => import('/@/layout/navMenu/subItem.vue'))
+// const SubItem = defineAsyncComponent(() => import('/@/layout/navMenu/subItem.vue')) // 使用el-dropdown替代
 
 // 定义父组件传过来的值
 const props = defineProps({
@@ -55,12 +67,35 @@ const { themeConfig } = storeToRefs(storesThemeConfig)
 const route = useRoute()
 const state = reactive({
   defaultActive: '' as string | undefined,
+  currentModulePath: '' as string,
 })
 
 // 获取父级菜单数据
 const menuLists = computed(() => {
   return <RouteItems>props.menuList
 })
+
+// 模块列表 - 将顶级菜单转换为模块选项
+const moduleList = computed(() => {
+  return menuLists.value.map(item => ({
+    path: item.path,
+    title: item.meta?.title ? t(item.meta.title) : '未命名模块',
+    icon: item.meta?.icon || 'ele-Menu'
+  }))
+})
+
+// 当前选中的模块
+const currentModule = computed(() => {
+  const current = moduleList.value.find(module => 
+    state.currentModulePath === module.path || 
+    route.path.startsWith(module.path)
+  )
+  return current || moduleList.value[0] || { 
+    path: '', 
+    title: '选择模块', 
+    icon: 'ele-Menu' 
+  }
+})
 // 路由过滤递归函数
 const filterRoutesFun = <T extends RouteItem>(arr: T[]): T[] => {
   return arr
@@ -107,12 +142,8 @@ const setSendClassicChildren = (path: string) => {
 }
 // 设置页面当前路由高亮
 const setCurrentRouterHighlight = (currentRoute: RouteToFrom) => {
-  console.log('currentRoute', currentRoute)
-
   const { path, meta } = currentRoute
   if (themeConfig.value.layout === 'classic') {
-    console.log('themeConfig.value.layout', themeConfig.value.layout)
-
     let rootPath = getRootPath(path || '')
     rootPath = rootPath || path || ''
     state.defaultActive = `/${rootPath?.split('/')[1]}`
@@ -127,15 +158,80 @@ const setCurrentRouterHighlight = (currentRoute: RouteToFrom) => {
 const onALinkClick = (val: RouteItem) => {
   other.handleOpenLink(val)
 }
+
+// 处理模块切换命令
+const onModuleCommand = (path: string) => {
+  // 更新当前模块路径
+  state.currentModulePath = path
+  
+  // 查找选中的模块
+  const selectedModule = menuLists.value.find(item => item.path === path)
+  if (!selectedModule) return
+  
+  // 如果是外部链接，使用原有的处理方式
+  if (selectedModule.meta?.isLink && !selectedModule.meta?.isIframe) {
+    onALinkClick(selectedModule)
+    return
+  }
+
+  // 如果模块有子菜单，跳转到第一个可用的子菜单
+  if (selectedModule.children && selectedModule.children.length > 0) {
+    const firstChild = selectedModule.children.find((child: RouteItem) => !child.meta?.isHide)
+    if (firstChild) {
+      router.push(firstChild.path)
+    } else {
+      router.push(selectedModule.path)
+    }
+  } else {
+    // 没有子菜单，直接跳转到模块根路径
+    router.push(selectedModule.path)
+  }
+
+  // 触发相关事件，保持原有的菜单切换效果
+  mittBus.emit('getBreadcrumbIndexSetFilterRoutes')
+  if (themeConfig.value.layout === 'classic' && themeConfig.value.isClassicSplitMenu) {
+    mittBus.emit('setSendClassicChildren', setSendClassicChildren(path))
+  }
+}
+
+// 判断是否为当前模块
+const isCurrentModule = (path: string): boolean => {
+  return state.currentModulePath === path || route.path.startsWith(path)
+}
 // 页面加载前
 onBeforeMount(() => {
   setCurrentRouterHighlight(route)
+  // 初始化当前模块
+  initCurrentModule()
 })
+
+// 初始化当前模块
+const initCurrentModule = () => {
+  // 根据当前路由确定所属模块
+  const currentPath = route.path
+  const matchedModule = menuLists.value.find(module => 
+    currentPath.startsWith(module.path) && module.path !== '/'
+  )
+  if (matchedModule) {
+    state.currentModulePath = matchedModule.path
+  } else if (menuLists.value.length > 0) {
+    // 如果没有匹配的模块，默认选择第一个
+    state.currentModulePath = menuLists.value[0].path
+  }
+}
 // 路由更新时
 onBeforeRouteUpdate((to) => {
-  console.log('to', to)
   // 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
   setCurrentRouterHighlight(to)
+  
+  // 更新当前模块
+  const matchedModule = menuLists.value.find(module => 
+    to.path.startsWith(module.path) && module.path !== '/'
+  )
+  if (matchedModule) {
+    state.currentModulePath = matchedModule.path
+  }
+  
   // 修复经典布局开启切割菜单时，点击tagsView后左侧导航菜单数据不变的问题
   let { layout, isClassicSplitMenu } = themeConfig.value
   if (layout === 'classic' && isClassicSplitMenu) {
@@ -149,17 +245,100 @@ onBeforeRouteUpdate((to) => {
   flex: 1;
   overflow: hidden;
   margin-right: 30px;
+  display: flex;
+  align-items: center;
+  height: 100%;
+
+  .module-dropdown {
+    .module-selector {
+      height: 50px;
+      line-height: 50px;
+      padding: 0 10px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      color: var(--next-bg-topBarColor);
+      background: transparent;
+      border: none;
+      border-radius: 6px;
+      font-size: 14px;
+      transition: all 0.3s;
+      white-space: nowrap;
+
+      .module-title {
+        font-weight: 500;
+      }
+
+      &:hover {
+        background: var(--next-color-user-hover);
+        color: var(--next-bg-topBarColor);
+      }
+    }
+  }
+
+  // 下拉菜单样式
+  :deep(.el-dropdown-menu) {
+    border-radius: 8px;
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
+    border: 1px solid var(--el-border-color-light);
+    min-width: 180px;
+    
+    .el-dropdown-menu__item {
+      display: flex;
+      align-items: center;
+      padding: 12px 16px;
+      transition: all 0.3s;
+      border-radius: 6px;
+      margin: 4px 6px;
+      
+      .dropdown-icon {
+        margin-right: 10px;
+        font-size: 16px;
+        width: 16px;
+        height: 16px;
+      }
+      
+      &:hover {
+        background: var(--next-color-user-hover);
+        color: var(--next-bg-topBarColor);
+      }
+      
+      &.is-active {
+        background: var(--next-color-user-hover);
+        color: var(--next-bg-topBarColor);
+        font-weight: 600;
+
+        .dropdown-icon {
+          color: var(--next-bg-topBarColor);
+        }
+      }
+    }
+  }
+
+  // 兼容原有样式
   :deep(.el-scrollbar__bar.is-vertical) {
     display: none;
   }
   :deep(a) {
     width: 100%;
   }
-  .el-menu.el-menu--horizontal {
-    display: flex;
-    height: 100%;
-    width: 100%;
-    box-sizing: border-box;
+
+  // 响应式设计
+  @media (max-width: 768px) {
+    .module-dropdown {
+      .module-selector {
+        padding: 0 12px;
+        height: 40px;
+        line-height: 40px;
+        font-size: 14px;
+        
+        .module-title {
+          margin-left: 6px;
+          margin-right: 6px;
+        }
+      }
+    }
   }
 }
 </style>

src/stores/themeConfig.ts

@@ -9,145 +9,54 @@ import { defineStore } from 'pinia'
 export const useThemeConfig = defineStore('themeConfig', {
   state: (): ThemeConfigState => ({
     themeConfig: {
-      // 是否开启布局配置抽屉
-      isDrawer: false,
-      // 是否创建一个h5历史，否则创建一个 hash 历史记录
-      isCreateWebHistory: true,
-
-      /**
-       * 全局主题
-       */
-      // 默认 primary 主题颜色 蓝色 #409eff 红色 #F34D37 紫色 #6954f0 绿色 #41b584
-      primary: '#409eff',
-      // 是否开启深色模式
-      isDark: false,
-
-      /**
-       * 顶栏设置
-       */
-      // 默认顶栏导航背景颜色 #FFFFFF #323233
-      topBar: '#FFFFFF',
-      // 默认顶栏导航字体颜色
-      topBarColor: '#eaeaea',
-      // 是否开启顶栏背景颜色渐变
-      isTopBarColorGradual: false,
-
-      /**
-       * 菜单设置
-       */
-      // 默认菜单导航背景颜色 #FFFFFF #252526
-      menuBar: '#FFFFFF',
-      // 默认菜单导航字体颜色
-      menuBarColor: '#eaeaea',
-      // 默认菜单高亮背景色
-      menuBarActiveColor: 'rgba(0, 0, 0, 0.2)',
-      // 是否开启菜单背景颜色渐变
-      isMenuBarColorGradual: false,
-
-      /**
-       * 分栏设置
-       */
-      // 默认分栏菜单背景颜色
-      columnsMenuBar: '#333333',
-      // 默认分栏菜单字体颜色
-      columnsMenuBarColor: '#eaeaea',
-      // 默认分栏菜单高亮字体颜色
-      columnsMenuBarActiveColor: '#ffffff',
-      // 是否开启分栏菜单背景颜色渐变
-      isColumnsMenuBarColorGradual: false,
-      // 是否开启分栏菜单鼠标悬停预加载(预览菜单)
-      isColumnsMenuHoverPreload: false,
-
-      /**
-       * 界面设置
-       */
-      // 是否开启菜单水平折叠效果
-      isCollapse: false,
-      // 是否开启菜单手风琴效果
-      isUniqueOpened: true,
-      // 是否开启固定 Header
-      isFixedHeader: true,
-      // 初始化变量，用于更新菜单 el-scrollbar 的高度，请勿删除
-      isFixedHeaderChange: false,
-      // 是否开启经典布局分割菜单（仅经典布局生效）
-      isClassicSplitMenu: true,
-      // 是否开启自动锁屏
-      isLockScreen: false,
-      // 开启自动锁屏倒计时(s/秒)
-      lockScreenTime: 30,
-
-      /**
-       * 界面显示
-       */
-      // 是否开启侧边栏 Logo
-      isShowLogo: true,
-      // 初始化变量，用于 el-scrollbar 的高度更新，请勿删除
-      isShowLogoChange: false,
-      // 是否开启 Breadcrumb，强制经典、横向布局不显示
-      isBreadcrumb: true,
-      // 是否开启 Tagsview
-      isTagsview: true,
-      // 是否开启 Breadcrumb 图标
-      isBreadcrumbIcon: false,
-      // 是否开启 Tagsview 图标
-      isTagsviewIcon: false,
-      // 是否开启 TagsView 缓存
-      isCacheTagsView: true,
-      // 是否开启 TagsView 拖拽
-      isSortableTagsView: true,
-      // 是否开启 TagsView 共用
-      isShareTagsView: false,
-      // 是否开启 Footer 底部版权信息
-      isFooter: false,
-      // 是否开启灰色模式
-      isGrayscale: false,
-      // 是否开启色弱模式
-      isInvert: false,
-      // 是否开启水印
-      isWatermark: false,
-      // 水印文案
-      watermarkText: 'NPP',
-
-      /**
-       * 其它设置
-       */
-      // Tagsview 风格：可选值"<tags-style-one|tags-style-four|tags-style-five>"，默认 tags-style-five
-      // 定义的值与 `/src/layout/navBars/tagsView/tagsView.vue` 中的 class 同名
-      tagsStyle: 'tags-style-five',
-      // 主页面切换动画：可选值"<slide-right|slide-left|opacitys>"，默认 slide-right
-      animation: 'opacitys',
-      // 分栏高亮风格：可选值"<columns-round|columns-card>"，默认 columns-round
-      columnsAsideStyle: 'columns-round',
-      // 分栏布局风格：可选值"<columns-horizontal|columns-vertical>"，默认 columns-horizontal
-      columnsAsideLayout: 'columns-horizontal',
-
-      /**
-       * 布局切换
-       * 注意：为了演示，切换布局时，颜色会被还原成默认，代码位置：/@/layout/navBars/topBar/setings.vue
-       * 中的 `initSetLayoutChange(设置布局切换，重置主题样式)` 方法
-       */
-      // 布局切换：可选值"<默认 defaults | 经典 classic | 横向 transverse | 分栏 columns>"，默认 defaults
-      layout: 'columns',
-
-      /**
-       * 后端控制路由
-       */
-      // 是否开启后端控制路由
-      isRequestRoutes: true,
-
-      /**
-       * 全局网站标题 / 副标题
-       */
-      // 网站主标题（菜单导航、浏览器当前网页标题）
-      globalTitle: 'NPP',
-      // 网站副标题（登录页顶部文字）
-      globalViceTitle: 'Smart Pilot',
-      // 网站副标题（登录页顶部文字）
-      globalViceTitleMsg: 'NPP Smart Pilot',
-      // 默认初始语言，可选值"<zh-cn|en|zh-tw>"，默认 zh-cn
-      globalI18n: 'zh-cn',
-      // 默认全局组件大小，可选值"<large|'default'|small>"，默认 'large'
-      globalComponentSize: 'default',
+      "isDrawer": false,
+      "isCreateWebHistory": true,
+      "primary": "#41b584",
+      "isDark": false,
+      "topBar": "#FFFFFF",
+      "topBarColor": "#606266",
+      "isTopBarColorGradual": false,
+      "menuBar": "#FFFFFF",
+      "menuBarColor": "#606266",
+      "menuBarActiveColor": "#ecf7f2",
+      "isMenuBarColorGradual": false,
+      "columnsMenuBar": "#333333",
+      "columnsMenuBarColor": "#eaeaea",
+      "columnsMenuBarActiveColor": "#ffffff",
+      "isColumnsMenuBarColorGradual": false,
+      "isColumnsMenuHoverPreload": true,
+      "isCollapse": false,
+      "isUniqueOpened": false,
+      "isFixedHeader": true,
+      "isFixedHeaderChange": false,
+      "isClassicSplitMenu": false,
+      "isLockScreen": false,
+      "lockScreenTime": 30,
+      "isShowLogo": true,
+      "isShowLogoChange": false,
+      "isBreadcrumb": true,
+      "isTagsview": false,
+      "isBreadcrumbIcon": false,
+      "isTagsviewIcon": false,
+      "isCacheTagsView": true,
+      "isSortableTagsView": true,
+      "isShareTagsView": false,
+      "isFooter": false,
+      "isGrayscale": false,
+      "isInvert": false,
+      "isWatermark": false,
+      "watermarkText": "NPP",
+      "tagsStyle": "tags-style-five",
+      "animation": "opacitys",
+      "columnsAsideStyle": "columns-round",
+      "columnsAsideLayout": "columns-horizontal",
+      "layout": "classic",
+      "isRequestRoutes": true,
+      "globalTitle": "NPP",
+      "globalViceTitle": "Smart Pilot",
+      "globalViceTitleMsg": "NPP Smart Pilot",
+      "globalI18n": "zh-cn",
+      "globalComponentSize": "default"
     },
   }),
   actions: {

src/theme/element.scss

@@ -384,3 +384,14 @@
 .el-segmented {
   padding: 0px;
 }
+
+/* 水平菜单下拉样式优化 */
+.el-menu--horizontal {
+  .el-sub-menu .el-sub-menu__icon-arrow {
+    transition: transform 0.3s;
+  }
+  
+  .el-sub-menu.is-opened .el-sub-menu__icon-arrow {
+    transform: rotate(180deg);
+  }
+}