更新升级

src/layout/navBars/breadcrumb/setings.vue

@@ -599,14 +599,16 @@ const onColumnsMenuBarGradualChange = () => {
 }
 // 2、菜单 / 顶栏 --> 背景渐变函数
 const setGraduaFun = (el: string, bool: boolean, color: string) => {
-  setTimeout(() => {
-    let els = document.querySelector(el)
-    if (!els) return false
-    document.documentElement.style.setProperty('--el-menu-bg-color', document.documentElement.style.getPropertyValue('--next-bg-menuBar'))
-    if (bool) els.setAttribute('style', `background:linear-gradient(to bottom left , ${color}, ${getLightColor(color, 0.6)}) !important;`)
-    else els.setAttribute('style', ``)
-    setLocalThemeConfig()
-  }, 200)
+  nextTick(() => {
+    setTimeout(() => {
+      let els = document.querySelector(el)
+      if (!els) return false
+      document.documentElement.style.setProperty('--el-menu-bg-color', document.documentElement.style.getPropertyValue('--next-bg-menuBar'))
+      if (bool) els.setAttribute('style', `background:linear-gradient(to bottom , ${color}, ${getLightColor(color, 0.5)})`)
+      else els.setAttribute('style', ``)
+      setLocalThemeConfig()
+    }, 300)
+  })
 }
 // 2、分栏设置 ->
 const onColumnsMenuHoverPreloadChange = () => {

src/layout/navBars/tagsView/tagsView.vue

@@ -56,6 +56,7 @@ import pinia from '/@/stores/index'
 import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes'
 import { useThemeConfig } from '/@/stores/themeConfig'
 import { useKeepALiveNames } from '/@/stores/keepAliveNames'
+import { useRoutesList } from '/@/stores/routesList'
 import { Session } from '/@/utils/storage'
 import { isObjectValueEqual } from '/@/utils/arrayOperation'
 import other from '/@/utils/other'
@@ -72,8 +73,10 @@ const tagsUlRef = ref()
 const stores = useTagsViewRoutes()
 const storesThemeConfig = useThemeConfig()
 const storesTagsViewRoutes = useTagsViewRoutes()
+const storesRoutesList = useRoutesList()
 const { themeConfig } = storeToRefs(storesThemeConfig)
 const { tagsViewRoutes } = storeToRefs(storesTagsViewRoutes)
+const { routesList } = storeToRefs(storesRoutesList)
 const storesKeepALiveNames = useKeepALiveNames()
 const route = useRoute()
 const router = useRouter()
@@ -379,6 +382,11 @@ const onMousedownMenu = (v: RouteItem, e: MouseEvent) => {
 const onTagsClick = (v: RouteItem, k: number) => {
   state.tagsRefsIndex = k
   router.push(v)
+  // 分栏布局时，收起/展开菜单
+  if (getThemeConfig.value.layout === 'columns') {
+    const item: RouteItem = routesList.value.find((r: RouteItem) => r.path.indexOf(`/${v.path.split('/')[1]}`) > -1)
+    !item.children ? (getThemeConfig.value.isCollapse = true) : (getThemeConfig.value.isCollapse = false)
+  }
 }
 // 处理 url，地址栏链接有参数时，tagsview 右键菜单刷新功能失效问题，感谢 @ZzZz-RIPPER、@dejavuuuuu
 const transUrlParams = (v: RouteItem) => {

src/layout/navMenu/horizontal.vue

@@ -1,37 +1,35 @@
 <template>
   <div class="el-menu-horizontal-warp">
-    <el-scrollbar @wheel.native.prevent="onElMenuHorizontalScroll" ref="elMenuHorizontalScrollRef">
-      <el-menu router :default-active="state.defaultActive" :ellipsis="false" 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>
+    <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" />
-              <span>{{ $t(val.meta.title) }}</span>
+              {{ $t(val.meta.title) }}
             </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)">
+            <template #title v-else>
+              <a class="w100" @click.prevent="onALinkClick(val)">
                 <SvgIcon :name="val.meta.icon" />
                 {{ $t(val.meta.title) }}
-              </template>
-              <template #title v-else>
-                <a class="w100" @click.prevent="onALinkClick(val)">
-                  <SvgIcon :name="val.meta.icon" />
-                  {{ $t(val.meta.title) }}
-                </a>
-              </template>
-            </el-menu-item>
-          </template>
+              </a>
+            </template>
+          </el-menu-item>
         </template>
-      </el-menu>
-    </el-scrollbar>
+      </template>
+    </el-menu>
   </div>
 </template>
 
 <script setup lang="ts" name="navMenuHorizontal">
-import { defineAsyncComponent, reactive, computed, onMounted, nextTick, onBeforeMount, ref } from 'vue'
+import { defineAsyncComponent, reactive, computed, onBeforeMount } from 'vue'
 import { useRoute, onBeforeRouteUpdate, RouteRecordRaw } from 'vue-router'
 import { storeToRefs } from 'pinia'
 import { useRoutesList } from '/@/stores/routesList'
@@ -52,7 +50,6 @@ const props = defineProps({
 })
 
 // 定义变量内容
-const elMenuHorizontalScrollRef = ref()
 const stores = useRoutesList()
 const storesThemeConfig = useThemeConfig()
 const { routesList } = storeToRefs(stores)
@@ -66,19 +63,6 @@ const state = reactive({
 const menuLists = computed(() => {
   return <RouteItems>props.menuList
 })
-// 设置横向滚动条可以鼠标滚轮滚动
-const onElMenuHorizontalScroll = (e: WheelEventType) => {
-  const eventDelta = e.wheelDelta || -e.deltaY * 40
-  elMenuHorizontalScrollRef.value.$refs.wrapRef.scrollLeft = elMenuHorizontalScrollRef.value.$refs.wrapRef.scrollLeft + eventDelta / 4
-}
-// 初始化数据，页面刷新时，滚动条滚动到对应位置
-const initElMenuOffsetLeft = () => {
-  nextTick(() => {
-    let els = <HTMLElement>document.querySelector('.el-menu.el-menu--horizontal li.is-active')
-    if (!els) return false
-    elMenuHorizontalScrollRef.value.$refs.wrapRef.scrollLeft = els.offsetLeft
-  })
-}
 // 路由过滤递归函数
 const filterRoutesFun = <T extends RouteItem>(arr: T[]): T[] => {
   return arr
@@ -122,12 +106,9 @@ const onALinkClick = (val: RouteItem) => {
 onBeforeMount(() => {
   setCurrentRouterHighlight(route)
 })
-// 页面加载时
-onMounted(() => {
-  initElMenuOffsetLeft()
-})
 // 路由更新时
 onBeforeRouteUpdate((to) => {
+  // 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
   setCurrentRouterHighlight(to)
   // 修复经典布局开启切割菜单时，点击tagsView后左侧导航菜单数据不变的问题
   let { layout, isClassicSplitMenu } = themeConfig.value

src/main.ts

@@ -1,13 +1,12 @@
 import { createApp } from 'vue'
 import pinia from '/@/stores/index'
-import App from './App.vue'
-import router from './router'
+import App from '/@/App.vue'
+import router from '/@/router'
 import { directive } from '/@/directive/index'
 import { i18n } from '/@/i18n/index'
 import other from '/@/utils/other'
 
 import ElementPlus from 'element-plus'
-import 'element-plus/dist/index.css'
 import '/@/theme/index.scss'
 import VueGridLayout from 'vue-grid-layout'
 import globalProperties from '/@/globalProperties'
@@ -17,4 +16,4 @@ const app = createApp(App)
 directive(app)
 other.elSvg(app)
 
-app.use(pinia).use(router).use(ElementPlus, { i18n: i18n.global.t }).use(i18n).use(VueGridLayout).use(globalProperties).mount('#app')
+app.use(pinia).use(router).use(ElementPlus).use(i18n).use(VueGridLayout).use(globalProperties).mount('#app')

src/theme/dark.scss

@@ -107,9 +107,15 @@
     background-color: var(--next-color-disabled) !important;
   }
 
+  // topBar
+  .layout-navbars-breadcrumb-index {
+    background: none !important;
+  }
+
   // menu
   .layout-aside {
     border-right: 1px solid var(--next-border-color-light) !important;
+    @extend .layout-navbars-breadcrumb-index;
   }
 
   // colorPicker

src/theme/element.scss

@@ -147,12 +147,12 @@
     background: var(--next-bg-topBar);
     .el-menu-item,
     .el-sub-menu {
-      height: 50px !important;
-      line-height: 50px !important;
+      height: 48px !important;
+      line-height: 48px !important;
       color: var(--next-bg-topBarColor);
       .el-sub-menu__title {
-        height: 50px !important;
-        line-height: 50px !important;
+        height: 48px !important;
+        line-height: 48px !important;
         color: var(--next-bg-topBarColor);
       }
       .el-popper.is-pure.is-light {
@@ -179,7 +179,7 @@
   width: 100% !important;
   .el-menu-item,
   .el-sub-menu__title {
-    height: 50px !important;
+    height: 48px !important;
     color: var(--next-bg-topBarColor);
   }
   .el-menu-item:not(.is-active):hover,

src/theme/index.scss

@@ -1,3 +1,4 @@
+@import 'element-plus/dist/index.css';
 @import './app.scss';
 @import './my-app.scss';
 @import 'common/transition.scss';

src/types/global.d.ts

@@ -6,6 +6,7 @@ declare module 'js-cookie'
 declare module '@wangeditor/editor-for-vue'
 declare module 'js-table2excel'
 declare module 'qs'
+declare module 'sortablejs'
 
 // 声明一个模块，防止引入文件时报错
 declare module '*.json'

src/views/example/system/menu/dialog.vue

@@ -56,7 +56,7 @@
             </el-col>
             <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
               <el-form-item label="组件路径">
-                <el-input v-model="state.ruleForm.component" placeholder="组件路径" clearable></el-input>
+                <el-input v-model="state.ruleForm.componentAlias" placeholder="组件路径" clearable></el-input>
               </el-form-item>
             </el-col>
             <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
@@ -168,7 +168,7 @@ const state = reactive({
     menuSuperior: [], // 上级菜单
     menuType: 'menu', // 菜单类型
     name: '', // 路由名称
-    component: '', // 组件路径
+    componentAlias: '', // 组件路径别名
     isLink: false, // 是否外链
     menuSort: 0, // 菜单排序
     path: '', // 路由路径
@@ -209,12 +209,8 @@ const openDialog = (type: string, row?: any) => {
   if (type === 'edit') {
     // 模拟数据，实际请走接口
     row.menuType = 'menu'
-    row.menuSort = Math.random()
-    row.component = `${row.component} `
-      .match(/\'(.+)\'/g)
-      ?.join('')
-      .replace(/\'/g, '')
-    state.ruleForm = row
+    row.menuSort = Math.floor(Math.random() * 100)
+    state.ruleForm = JSON.parse(JSON.stringify(row))
     state.dialog.title = '修改菜单'
     state.dialog.submitTxt = '修 改'
   } else {