解决导航栏显示上次打开所有导航栏记录bug

src/layouts/admin/components/menus/menuTree.vue

@@ -73,9 +73,10 @@ const onClickSubMenu = (menu: RouteRecordRaw) => {
     flex-shrink: 0;
 }
 .is-active > .icon {
-    color: var(--el-menu-active-color) !important;
+    color: v-bind('config.getColorVal("menuActiveColor")') !important;
 }
 .el-menu-item.is-active {
     background-color: v-bind('config.getColorVal("menuActiveBackground")');
+    color: v-bind('config.getColorVal("menuActiveColor")');
 }
 </style>

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

@@ -1,21 +1,28 @@
 <template>
-    <div class='nav-bar'>
-        <div v-if='config.layout.shrink && config.layout.menuCollapse' class='unfold'>
-            <Icon @click='onMenuCollapse' name='fa fa-indent' :color="config.getColorVal('menuActiveColor')"
-                  size='18' />
+    <div class="nav-bar">
+        <div v-if="config.layout.shrink && config.layout.menuCollapse" class="unfold">
+            <Icon
+                @click="onMenuCollapse"
+                name="fa fa-indent"
+                :color="config.getColorVal('menuActiveColor')"
+                size="18"
+            />
         </div>
+        <!-- <span class="nav-bar-title">{{ getTheme.name }}</span> -->
         <span class='nav-bar-title'>电能质量数据监测云平台</span>
         <NavMenus />
     </div>
 </template>
 
-<script setup lang='ts'>
+<script setup lang="ts">
+import { onMounted } from 'vue'
 import { useConfig } from '@/stores/config'
 import NavTabs from '@/layouts/admin/components/navBar/tabs.vue'
 import NavMenus from '../navMenus.vue'
 import { showShade } from '@/utils/pageShade'
 
 const config = useConfig()
+const getTheme = JSON.parse(window.localStorage.getItem('getTheme') as string)
 
 const onMenuCollapse = () => {
     showShade('ba-aside-menu-shade', () => {
@@ -23,9 +30,12 @@ const onMenuCollapse = () => {
     })
     config.setLayout('menuCollapse', false)
 }
+// onMounted(() => {
+//     document.title = getTheme.name
+// })
 </script>
 
-<style scoped lang='scss'>
+<style scoped lang="scss">
 .nav-bar {
     display: flex;
     align-items: center;
@@ -37,7 +47,7 @@ const onMenuCollapse = () => {
         color: v-bind('config.getColorVal("headerBarTabColor")');
         font-size: 24px;
         margin-left: 10px;
-        font-weight: 700
+        font-weight: 700;
     }
 
     :deep(.nav-tabs) {
@@ -68,7 +78,7 @@ const onMenuCollapse = () => {
                 color: v-bind('config.getColorVal("headerBarTabActiveColor")');
 
                 .close-icon {
-                    color: v-bind('config.getColorVal("headerBarTabActiveColor")') !important;;
+                    color: v-bind('config.getColorVal("headerBarTabActiveColor")') !important;
                 }
             }
 
@@ -77,7 +87,7 @@ const onMenuCollapse = () => {
                 background-color: v-bind('config.getColorVal("headerBarHoverBackground")');
 
                 .close-icon {
-                    color: v-bind('config.getColorVal("headerBarTabActiveColor")') !important;;
+                    color: v-bind('config.getColorVal("headerBarTabActiveColor")') !important;
                 }
             }
         }

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

@@ -1,31 +1,31 @@
 <template>
-    <div class='nav-tabs' ref='tabScrollbarRef'>
+    <div class="nav-tabs" ref="tabScrollbarRef">
         <div
-            v-for='(item, idx) in navTabs.state.tabsView'
-            @click='onTab(item)'
-            @contextmenu.prevent='onContextmenu(item, $event)'
-            class='ba-nav-tab'
+            v-for="(item, idx) in navTabs.state.tabsView"
+            @click="onTab(item)"
+            @contextmenu.prevent="onContextmenu(item, $event)"
+            class="ba-nav-tab"
             :class="navTabs.state.activeIndex == idx ? 'active' : ''"
-            :ref='tabsRefs.set'
-            :key='idx'
+            :ref="tabsRefs.set"
+            :key="idx"
         >
             {{ item.meta.title }}
-            <transition @after-leave='selectNavTab(tabsRefs[navTabs.state.activeIndex])' name='el-fade-in'>
+            <transition @after-leave="selectNavTab(tabsRefs[navTabs.state.activeIndex])" name="el-fade-in">
                 <Icon
-                    v-show='navTabs.state.tabsView.length > 1'
-                    class='close-icon'
-                    @click.stop='closeTab(item)'
-                    size='15'
-                    name='el-icon-Close'
+                    v-show="navTabs.state.tabsView.length > 1"
+                    class="close-icon"
+                    @click.stop="closeTab(item)"
+                    size="15"
+                    name="el-icon-Close"
                 />
             </transition>
         </div>
-<!--        <div :style='activeBoxStyle' class='nav-tabs-active-box'></div>-->
+        <!--        <div :style='activeBoxStyle' class='nav-tabs-active-box'></div>-->
     </div>
-    <Contextmenu ref='contextmenuRef' :items='state.contextmenuItems' @contextmenuItemClick='onContextmenuItem' />
+    <Contextmenu ref="contextmenuRef" :items="state.contextmenuItems" @contextmenuItemClick="onContextmenuItem" />
 </template>
 
-<script setup lang='ts'>
+<script setup lang="ts">
 import { nextTick, onMounted, reactive, ref } from 'vue'
 import { useRoute, useRouter, onBeforeRouteUpdate, type RouteLocationNormalized } from 'vue-router'
 import { useConfig } from '@/stores/config'
@@ -85,7 +85,7 @@ const onContextmenu = (menu: RouteLocationNormalized, el: MouseEvent) => {
 }
 
 // tab 激活状态切换
-const selectNavTab = function(dom: HTMLDivElement) {
+const selectNavTab = function (dom: HTMLDivElement) {
     if (!dom) {
         return false
     }
@@ -169,7 +169,7 @@ const onContextmenuItem = async (item: ContextmenuItemClickEmitArg) => {
     }
 }
 
-const updateTab = function(newRoute: RouteLocationNormalized) {
+const updateTab = function (newRoute: RouteLocationNormalized) {
     // 添加tab
     navTabs.addTab(newRoute)
     // 激活当前tab
@@ -181,7 +181,10 @@ const updateTab = function(newRoute: RouteLocationNormalized) {
 }
 
 onBeforeRouteUpdate(async to => {
-    updateTab(to)
+   
+
+        updateTab(to)
+   
 })
 
 onMounted(() => {
@@ -190,7 +193,7 @@ onMounted(() => {
 })
 </script>
 
-<style scoped lang='scss'>
+<style scoped lang="scss">
 .dark {
     .close-icon {
         color: v-bind('config.getColorVal("headerBarTabColor")') !important;

src/layouts/admin/components/navMenus.vue

@@ -24,7 +24,7 @@
                 size="18"
             />
         </div>
-        <el-dropdown style='height: 100%;' @command='handleCommand'>
+        <el-dropdown style="height: 100%" @command="handleCommand">
             <div class="admin-info" :class="state.currentNavMenu == 'adminInfo' ? 'hover' : ''">
                 <el-avatar :size="25" fit="fill">
                     <img src="@/assets/avatar.png" alt="" />
@@ -39,18 +39,19 @@
                 </el-dropdown-menu>
             </template>
         </el-dropdown>
-        <div @click="configStore.setLayout('showDrawer', true)" class="nav-menu-item">
+        <!-- <div @click="configStore.setLayout('showDrawer', true)" class="nav-menu-item">
             <Icon
                 :color="configStore.getColorVal('headerBarTabColor')"
                 class="nav-menu-icon"
                 name="fa fa-cogs"
                 size="18"
             />
-        </div>
+        </div> -->
         <Config />
-        <PopupPwd ref='popupPwd' />
-        <AdminInfo ref='popupAdminInfo' />
+        <PopupPwd ref="popupPwd" />
+        <AdminInfo ref="popupAdminInfo" />
         <!-- <TerminalVue /> -->
+        
     </div>
 </template>
 
@@ -67,8 +68,9 @@ import { fullUrl } from '@/utils/common'
 import html2canvas from 'html2canvas'
 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()
 const popupPwd = ref()
 const popupAdminInfo = ref()
@@ -79,7 +81,6 @@ const state = reactive({
     showAdminInfoPopover: false
 })
 
-
 const savePng = () => {
     html2canvas(document.body, {
         scale: 1,
@@ -112,13 +113,13 @@ const handleCommand = (key: string) => {
             popupPwd.value.open()
             break
         case 'layout':
+            navTabs.closeTabs()
             router.push({ name: 'login' })
             break
         default:
             break
     }
 }
-
 </script>
 
 <style scoped lang="scss">

src/layouts/admin/components/popup/adminInfo.vue

@@ -1,35 +1,34 @@
 <template>
-    <el-dialog class='cn-operate-dialog' v-model='dialogVisible' :title='title'>
+    <el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" :title="title">
         <el-scrollbar>
-            <el-form :inline='false' :model='form' label-width='120px'>
-                <el-form-item label='用户名称:'>
-                    <el-input v-model='form.name' :disabled='true'></el-input>
+            <el-form :inline="false" :model="form" label-width="120px">
+                <el-form-item label="用户名称:">
+                    <el-input v-model="form.name" :disabled="true"></el-input>
                 </el-form-item>
-                <el-form-item label='登录名称:' class='top'>
-                    <el-input v-model='form.loginName' :disabled='true'></el-input>
+                <el-form-item label="登录名称:" class="top">
+                    <el-input v-model="form.loginName" :disabled="true"></el-input>
                 </el-form-item>
-                <el-form-item label='归属部门名称:' class='top'>
-                    <el-input v-model='form.deptName' :disabled='true'></el-input>
+                <el-form-item label="归属部门名称:" class="top">
+                    <el-input v-model="form.deptName" :disabled="true"></el-input>
                 </el-form-item>
-                <el-form-item label='拥有的角色:' class='top'>
-                    <el-input v-model='form.role' :disabled='true'></el-input>
+                <el-form-item label="拥有的角色:" class="top">
+                    <el-input v-model="form.role" :disabled="true"></el-input>
                 </el-form-item>
-                <el-form-item label='电话号码:' class='top'>
-                    <el-input v-model='form.phone' :disabled='true'></el-input>
+                <el-form-item label="电话号码:" class="top">
+                    <el-input v-model="form.phone" :disabled="true"></el-input>
                 </el-form-item>
-                <el-form-item label='电子邮箱:' class='top'>
-                    <el-input v-model='form.email' :disabled='true'></el-input>
+                <el-form-item label="电子邮箱:" class="top">
+                    <el-input v-model="form.email" :disabled="true"></el-input>
                 </el-form-item>
             </el-form>
         </el-scrollbar>
     </el-dialog>
 </template>
-<script lang='ts' setup>
+<script lang="ts" setup>
 import { ref, inject } from 'vue'
 import { reactive } from 'vue'
 import { useAdminInfo } from '@/stores/adminInfo'
 
-
 const dialogVisible = ref(false)
 const title = ref('用户信息')
 const adminInfo = useAdminInfo()
@@ -43,7 +42,6 @@ const form = reactive({
     loginName: ''
 })
 
-
 const open = () => {
     dialogVisible.value = true
     for (const key in form) {

src/layouts/admin/components/popup/password.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-dialog class="cn-operate-dialog" v-model="dialogVisible" :title="title">
+    <el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" :title="title">
         <el-scrollbar>
             <el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef">
                 <el-form-item label="校验密码:" prop="password">