添加系统绑的功能

2026-01-05 16:34:42 +08:00
parent 75987c0c6f
commit d25f16bcc7
13 changed files with 502 additions and 401 deletions
--- a/src/layouts/admin/components/menus/menuVertical.vue
+++ b/src/layouts/admin/components/menus/menuVertical.vue
@@ -1,81 +1,81 @@
-<template>
-    <el-scrollbar ref="verticalMenusRef" class="vertical-menus-scrollbar">
-        <el-menu
-            class="layouts-menu-vertical"
-            :collapse-transition="false"
-            :unique-opened="config.layout.menuUniqueOpened"
-            :default-active="state.defaultActive"
-            :collapse="config.layout.menuCollapse"
-        >
-            <MenuTree :menus="navTabs.state.tabsViewRoutes" />
-        </el-menu>
-    </el-scrollbar>
-</template>
-
-<script setup lang="ts">
-import { computed, nextTick, onMounted, reactive, ref } from 'vue'
-import MenuTree from '@/layouts/admin/components/menus/menuTree.vue'
-import { useRoute, onBeforeRouteUpdate, type RouteLocationNormalizedLoaded } from 'vue-router'
-import type { ScrollbarInstance } from 'element-plus'
-import { useConfig } from '@/stores/config'
-import { useNavTabs } from '@/stores/navTabs'
-
-const config = useConfig()
-const navTabs = useNavTabs()
-const route = useRoute()
-
-const verticalMenusRef = ref<ScrollbarInstance>()
-
-const state = reactive({
-    defaultActive: '',
-})
-
-const verticalMenusScrollbarHeight = computed(() => {
-    let menuTopBarHeight = 0
-    if (config.layout.menuShowTopBar) {
-        menuTopBarHeight = 50
-    }
-    if (config.layout.layoutMode == 'Default') {
-        return 'calc(100vh - ' + (32 + menuTopBarHeight) + 'px)'
-    } else {
-        return 'calc(100vh - ' + menuTopBarHeight + 'px)'
-    }
-})
-
-// 激活当前路由的菜单
-const currentRouteActive = (currentRoute: RouteLocationNormalizedLoaded) => {
-    state.defaultActive = currentRoute.path
-}
-
-// 滚动条滚动到激活菜单所在位置
-const verticalMenusScroll = () => {
-    nextTick(() => {
-        let activeMenu: HTMLElement | null = document.querySelector('.el-menu.layouts-menu-vertical li.is-active')
-        if (!activeMenu) return false
-        verticalMenusRef.value?.setScrollTop(activeMenu.offsetTop)
-    })
-}
-
-onMounted(() => {
-    currentRouteActive(route)
-    verticalMenusScroll()
-})
-
-onBeforeRouteUpdate((to) => {
-    currentRouteActive(to)
-})
-</script>
-<style>
-.vertical-menus-scrollbar {
-    height: v-bind(verticalMenusScrollbarHeight);
-    background-color: v-bind('config.getColorVal("menuBackground")');
-}
-.layouts-menu-vertical {
-    border: 0;
-    padding-bottom: 30px;
-    --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")');
-}
-</style>
+<template>
+    <el-scrollbar ref="verticalMenusRef" class="vertical-menus-scrollbar">
+        <el-menu
+            class="layouts-menu-vertical"
+            :collapse-transition="false"
+            :unique-opened="config.layout.menuUniqueOpened"
+            :default-active="state.defaultActive"
+            :collapse="config.layout.menuCollapse"
+        >
+            <MenuTree :menus="navTabs.state.tabsViewRoutes" />
+        </el-menu>
+    </el-scrollbar>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onMounted, reactive, ref } from 'vue'
+import MenuTree from '@/layouts/admin/components/menus/menuTree.vue'
+import { useRoute, onBeforeRouteUpdate, type RouteLocationNormalizedLoaded } from 'vue-router'
+import type { ScrollbarInstance } from 'element-plus'
+import { useConfig } from '@/stores/config'
+import { useNavTabs } from '@/stores/navTabs'
+
+const config = useConfig()
+const navTabs = useNavTabs()
+const route = useRoute()
+
+const verticalMenusRef = ref<ScrollbarInstance>()
+
+const state = reactive({
+    defaultActive: '',
+})
+
+const verticalMenusScrollbarHeight = computed(() => {
+    let menuTopBarHeight = 0
+    if (config.layout.menuShowTopBar) {
+        menuTopBarHeight = 50
+    }
+    if (config.layout.layoutMode == 'Default') {
+        return 'calc(100vh - ' + (32 + menuTopBarHeight) + 'px)'
+    } else {
+        return 'calc(100vh - ' + menuTopBarHeight + 'px)'
+    }
+})
+
+// 激活当前路由的菜单
+const currentRouteActive = (currentRoute: RouteLocationNormalizedLoaded) => {
+    state.defaultActive = currentRoute.path
+}
+
+// 滚动条滚动到激活菜单所在位置
+const verticalMenusScroll = () => {
+    nextTick(() => {
+        let activeMenu: HTMLElement | null = document.querySelector('.el-menu.layouts-menu-vertical li.is-active')
+        if (!activeMenu) return false
+        verticalMenusRef.value?.setScrollTop(activeMenu.offsetTop)
+    })
+}
+
+onMounted(() => {
+    currentRouteActive(route)
+    verticalMenusScroll()
+})
+
+onBeforeRouteUpdate((to) => {
+    currentRouteActive(to)
+})
+</script>
+<style>
+.vertical-menus-scrollbar {
+    height: v-bind(verticalMenusScrollbarHeight);
+    background-color: v-bind('config.getColorVal("menuBackground")');
+}
+.layouts-menu-vertical {
+    border: 0;
+    padding-bottom: 30px;
+    --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")');
+}
+</style>