first

src/layouts/admin/components/navBar/double.vue

@@ -0,0 +1,102 @@
+<template>
+    <div class="layouts-menu-horizontal-double">
+        <el-scrollbar ref="horizontalMenusRef" class="double-menus-scrollbar">
+            <el-menu
+                class="menu-horizontal"
+                mode="horizontal"
+                :default-active="state.defaultActive"
+                :key="state.menuKey"
+            >
+                <MenuTree :extends="{ position: 'horizontal', level: 1 }" :menus="menus" />
+            </el-menu>
+        </el-scrollbar>
+        <NavMenus />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onMounted, reactive, ref } from 'vue'
+import { useRoute, onBeforeRouteUpdate, type RouteLocationNormalizedLoaded } from 'vue-router'
+import { currentRouteTopActivity } from '@/layouts/admin/components/menus/helper'
+import MenuTree from '@/layouts/admin/components/menus/menuTree.vue'
+import NavMenus from '@/layouts/admin/components/navMenus.vue'
+import type { ScrollbarInstance } from 'element-plus'
+import { useNavTabs } from '@/stores/navTabs'
+import { useConfig } from '@/stores/config'
+import { uuid } from '@/utils/random'
+
+const horizontalMenusRef = ref<ScrollbarInstance>()
+
+const config = useConfig()
+const navTabs = useNavTabs()
+const route = useRoute()
+
+const state = reactive({
+    menuKey: uuid(),
+    defaultActive: ''
+})
+
+const menus = computed(() => {
+    state.menuKey = uuid() // eslint-disable-line
+    return navTabs.state.tabsViewRoutes
+})
+
+// 激活当前路由的菜单
+const currentRouteActive = (currentRoute: RouteLocationNormalizedLoaded) => {
+    let routeChildren = currentRouteTopActivity(currentRoute.path, navTabs.state.tabsViewRoutes)
+    if (routeChildren) state.defaultActive = currentRoute.path
+}
+
+// 滚动条滚动到激活菜单所在位置
+const verticalMenusScroll = () => {
+    nextTick(() => {
+        let activeMenu: HTMLElement | null = document.querySelector('.el-menu.menu-horizontal li.is-active')
+        if (!activeMenu) return false
+        horizontalMenusRef.value?.setScrollTop(activeMenu.offsetTop)
+    })
+}
+
+onMounted(() => {
+    currentRouteActive(route)
+    verticalMenusScroll()
+})
+
+onBeforeRouteUpdate(to => {
+    currentRouteActive(to)
+})
+</script>
+
+<style scoped lang="scss">
+.layouts-menu-horizontal-double {
+    display: flex;
+    align-items: center;
+    height: 50px;
+    background-color: var(--ba-bg-color-overlay);
+    border-bottom: solid 1px var(--el-color-info-light-8);
+}
+.double-menus-scrollbar {
+    width: 70vw;
+}
+.menu-horizontal {
+    border: none;
+    --el-menu-bg-color: v-bind('config.getColorVal("menuBackground")');
+    --el-menu-text-color: v-bind('config.getColorVal("menuColor")');
+    --el-menu-active-color: v-bind('config.getColorVal("menuActiveColor")');
+    --el-menu-hover-color: v-bind('config.getColorVal("menuActiveBackground")');
+}
+
+.el-sub-menu .icon,
+.el-menu-item .icon {
+    vertical-align: middle;
+    margin-right: 5px;
+    width: 24px;
+    text-align: center;
+    flex-shrink: 0;
+}
+.is-active .icon {
+    color: var(--el-menu-active-color) !important;
+}
+.el-menu-item.is-active {
+    background-color: v-bind('config.getColorVal("menuActiveBackground")');
+}
+</style>