添加系统绑的功能

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>

src/layouts/admin/components/navMenus.vue

@@ -24,7 +24,7 @@
                 size="18"
             />
         </div>
-      
+
         <el-dropdown style="height: 100%" @command="handleCommand">
             <div class="admin-info" :class="state.currentNavMenu == 'adminInfo' ? 'hover' : ''">
                 <el-avatar :size="25" fit="fill">
@@ -47,8 +47,9 @@
                 name="fa fa-cogs"
                 size="18"
             />
-        </div> -->"
-       
+        </div> -->
+        "
+
         <Config />
         <PopupPwd ref="popupPwd" />
         <AdminInfo ref="popupAdminInfo" />
@@ -71,7 +72,6 @@ import PopupPwd from './popup/password.vue'
 import AdminInfo from './popup/adminInfo.vue'
 import { useNavTabs } from '@/stores/navTabs'
 
-
 const adminInfo = useAdminInfo()
 const navTabs = useNavTabs()
 const configStore = useConfig()
@@ -106,7 +106,7 @@ const onFullScreen = () => {
     })
 }
 
-const handleCommand = (key: string) => {
+const handleCommand = async (key: string) => {
     // console.log(key)
     switch (key) {
         case 'adminInfo':
@@ -116,10 +116,13 @@ const handleCommand = (key: string) => {
             popupPwd.value.open()
             break
         case 'layout':
-            navTabs.closeTabs()
-            window.localStorage.clear()
-            adminInfo.reset()
-            router.push({ name: 'login' })
+            await window.location.reload()
+            setTimeout(() => {
+                navTabs.closeTabs()
+                window.localStorage.clear()
+                adminInfo.reset()
+                router.push({ name: 'login' })
+            }, 0)
             break
         default:
             break