初始化

2026-03-09 17:35:53 +08:00
commit 74f322b7c2
577 changed files with 57404 additions and 0 deletions
--- a/web/src/layouts/backend/components/menus/menuVerticalChildren.vue
+++ b/web/src/layouts/backend/components/menus/menuVerticalChildren.vue
@@ -0,0 +1,99 @@
+<template>
+    <el-scrollbar ref="layoutMenuScrollbarRef" class="children-vertical-menus-scrollbar">
+        <el-menu
+            class="layouts-menu-vertical-children"
+            :collapse-transition="false"
+            :unique-opened="config.layout.menuUniqueOpened"
+            :default-active="state.defaultActive"
+            :collapse="config.layout.menuCollapse"
+            ref="layoutMenuRef"
+        >
+            <MenuTree v-if="state.routeChildren.length > 0" :menus="state.routeChildren" />
+        </el-menu>
+    </el-scrollbar>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, reactive, useTemplateRef } from 'vue'
+import type { RouteLocationNormalizedLoaded, RouteRecordRaw } from 'vue-router'
+import { onBeforeRouteUpdate, useRoute } from 'vue-router'
+import MenuTree from '/@/layouts/backend/components/menus/menuTree.vue'
+import { useConfig } from '/@/stores/config'
+import { useNavTabs } from '/@/stores/navTabs'
+import { layoutMenuRef } from '/@/stores/refs'
+import { getMenuKey } from '/@/utils/router'
+
+const config = useConfig()
+const navTabs = useNavTabs()
+const route = useRoute()
+
+const layoutMenuScrollbarRef = useTemplateRef('layoutMenuScrollbarRef')
+
+const state: {
+    defaultActive: string
+    routeChildren: RouteRecordRaw[]
+} = reactive({
+    defaultActive: '',
+    routeChildren: [],
+})
+
+const verticalMenusScrollbarHeight = computed(() => {
+    const menuTopBarHeight = config.layout.menuShowTopBar ? 50 : 0
+    return 'calc(100% - ' + menuTopBarHeight + 'px)'
+})
+
+/**
+ * 激活当前路由的菜单
+ */
+const currentRouteActive = (currentRoute: RouteLocationNormalizedLoaded) => {
+    // 以路由 fullPath 匹配的菜单优先，且 fullPath 无匹配时，回退到 path 的匹配菜单
+    const tabView = navTabs.getTabsViewDataByRoute(currentRoute)
+    if (tabView) {
+        state.defaultActive = getMenuKey(tabView, tabView.meta!.matched as string)
+    }
+
+    let routeChildren = navTabs.getTabsViewDataByRoute(currentRoute, 'above')
+    if (routeChildren) {
+        if (routeChildren.children && routeChildren.children.length > 0) {
+            state.routeChildren = routeChildren.children
+        } else {
+            state.routeChildren = [routeChildren]
+        }
+    } else if (!state.routeChildren) {
+        state.routeChildren = navTabs.state.tabsViewRoutes
+    }
+}
+
+/**
+ * 侧栏菜单滚动条滚动到激活菜单所在位置
+ */
+const verticalMenusScroll = () => {
+    setTimeout(() => {
+        let activeMenu: HTMLElement | null = document.querySelector('.el-menu.layouts-menu-vertical-children li.is-active')
+        if (activeMenu) {
+            layoutMenuScrollbarRef.value?.setScrollTop(activeMenu.offsetTop)
+        }
+    }, 500)
+}
+
+onMounted(() => {
+    currentRouteActive(route)
+    verticalMenusScroll()
+})
+
+onBeforeRouteUpdate((to) => {
+    currentRouteActive(to)
+})
+</script>
+<style>
+.children-vertical-menus-scrollbar {
+    height: v-bind(verticalMenusScrollbarHeight);
+    background-color: v-bind('config.getColorVal("menuBackground")');
+}
+.layouts-menu-vertical-children {
+    border: 0;
+    --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")');
+}
+</style>