'admin-21.01.05:新增vuex，编写布局配置相对应功能'

vue-admin-wonderful-next/package.json

@@ -10,7 +10,8 @@
     "mitt": "^2.1.0",
     "sortablejs": "^1.10.2",
     "vue": "^3.0.5",
-    "vue-router": "^4.0.2"
+    "vue-router": "^4.0.2",
+    "vuex": "^4.0.0-rc.2"
   },
   "devDependencies": {
     "@types/sortablejs": "^1.10.6",

vue-admin-wonderful-next/src/main.ts

@@ -1,6 +1,7 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
+import { store, key } from './store'
 
 import ElementPlus from 'element-plus'
 import 'element-plus/lib/theme-chalk/index.css'
@@ -9,5 +10,5 @@ import lang from 'element-plus/lib/locale/lang/zh-cn'
 import mitt from "mitt"
 
 const app = createApp(App)
-app.use(router).use(ElementPlus, { locale: lang }).mount('#app')
+app.use(router).use(store, key).use(ElementPlus, { locale: lang }).mount('#app')
 app.config.globalProperties.mittBus = mitt()

vue-admin-wonderful-next/src/store/index.ts

@@ -1 +1,47 @@
-const bb: string = ''
+import { InjectionKey } from 'vue'
+import { createStore, useStore as baseUseStore, Store } from 'vuex'
+import themeConfig from '../utils/themeConfig'
+export interface RootStateTypes {
+    themeConfig: {
+        isDrawer: boolean,
+        primary: string,
+        success: string,
+        info: string,
+        warning: string,
+        danger: string,
+        topBar: string,
+        menuBar: string,
+        topBarColor: string,
+        menuBarColor: string,
+        isTopBarColorGradual: boolean,
+        isMenuBarColorGradual: boolean,
+        isMenuBarColorHighlight: boolean,
+        isCollapse: boolean,
+        isUniqueOpened: boolean,
+        isFixedHeader: boolean,
+        isCollapse1: boolean,
+        menuWidth: number,
+    }
+}
+
+export const key: InjectionKey<Store<RootStateTypes>> = Symbol()
+
+export const store = createStore<RootStateTypes>({
+    state: {
+        themeConfig
+    },
+    mutations: {
+        getThemeConfig(state: any, data: object) {
+            state.themeConfig = Object.assign({}, data)
+        }
+    },
+    actions: {
+        setThemeConfig({ commit }, data: object) {
+            commit('getThemeConfig', data)
+        }
+    }
+})
+
+export function useStore() {
+    return baseUseStore(key)
+}

vue-admin-wonderful-next/src/theme/app.scss

@@ -41,13 +41,23 @@ body,
   }
   .el-main {
     padding: 0 !important;
+  }
+  .el-main-overflow-unset {
     overflow: unset !important;
   }
+  .el-main-overflow-auto {
+    overflow: auto !important;
+  }
   .el-scrollbar {
     width: 100%;
   }
-  .layout-aside-width {
+  .layout-aside-width240 {
     width: 240px !important;
+    transition: width 0.3s ease;
+  }
+  .layout-aside-width64 {
+    width: 64px !important;
+    transition: width 0.3s ease;
   }
   .layout-scrollbar {
     @extend .el-scrollbar;

vue-admin-wonderful-next/src/utils/themeConfig.ts

@@ -0,0 +1,21 @@
+// 布局配置
+export default {
+    isDrawer: false,
+    primary: "#409eff",
+    success: "#67c23a",
+    info: "#909399",
+    warning: "#e6a23c",
+    danger: "#f56c6c",
+    topBar: "#ffffff",
+    menuBar: "#29384d",
+    topBarColor: "#606266",
+    menuBarColor: "#e6e6e6",
+    isTopBarColorGradual: false,
+    isMenuBarColorGradual: false,
+    isMenuBarColorHighlight: false,
+    isCollapse: false,
+    isUniqueOpened: false,
+    isFixedHeader: false,
+    isCollapse1: false,
+    menuWidth: 240,
+}

vue-admin-wonderful-next/src/views/layout/component/aside.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-aside class="layout-aside-width">
+  <el-aside :class="isCollapse ? 'layout-aside-width64' : 'layout-aside-width240'">
     <el-scrollbar>
       <Vertical :menuList="menuList" />
     </el-scrollbar>
@@ -8,11 +8,13 @@
 
 <script lang="ts">
 import Vertical from "/@/views/layout/navMenu/vertical.vue";
-import { toRefs, reactive } from "vue";
+import { toRefs, reactive, computed } from "vue";
+import { useStore } from "/@/store/index.ts";
 export default {
   name: "layoutAside",
   components: { Vertical },
   setup() {
+    const store = useStore();
     const state = reactive({
       menuList: [
         {
@@ -62,7 +64,11 @@ export default {
         },
       ],
     });
+    const isCollapse = computed(() => {
+      return store.state.themeConfig.isCollapse;
+    });
     return {
+      isCollapse,
       ...toRefs(state),
     };
   },

vue-admin-wonderful-next/src/views/layout/component/main.vue

@@ -1,8 +1,9 @@
 <template>
-  <el-main>
+  <el-main :class="getThemeConfig.isFixedHeader ? 'el-main-overflow-auto' : 'el-main-overflow-unset'">
-    <el-scrollbar class="layout-scrollbar" style="min-height: calc(100vh - 84px);">
+    <!-- <el-main> -->
+    <el-scrollbar class="layout-scrollbar" style="min-height: calc(100vh - 84px);" ref="layoutScrollbarRef">
       <router-view v-slot="{ Component }">
-        <transition appear :name="transitionName" mode="out-in">
+        <transition :name="transitionName" mode="out-in">
           <div :key="key">
             <keep-alive>
               <component :is="Component" />
@@ -15,21 +16,41 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, toRefs, reactive } from "vue";
+import {
+  computed,
+  defineComponent,
+  toRefs,
+  reactive,
+  getCurrentInstance,
+  watch,
+} from "vue";
 import { useRoute, onBeforeRouteUpdate } from "vue-router";
+import { useStore } from "/@/store/index.ts";
 export default defineComponent({
   name: "layoutMain",
   setup() {
+    const { proxy } = getCurrentInstance();
+    const store = useStore();
     const route = useRoute();
     const state = reactive({
       transitionName: "slide-right",
     });
+    const getThemeConfig = computed(() => {
+      return store.state.themeConfig;
+    });
     const key = computed(() => route.path);
     onBeforeRouteUpdate((to, from) => {
       state.transitionName =
         to.meta.index > from.meta.index ? "slide-right" : "slide-left";
     });
-    return { key, ...toRefs(state) };
+    watch(store.state.themeConfig, (val) => {
+      proxy.$refs.layoutScrollbarRef.update();
+    });
+    return {
+      getThemeConfig,
+      key,
+      ...toRefs(state),
+    };
   },
 });
 </script>

vue-admin-wonderful-next/src/views/layout/defaults.vue

@@ -3,7 +3,7 @@
     <Aside />
     <el-container>
       <el-scrollbar>
-        <div class="layout-container-header-main">
+        <div class="layout-container-header-main" :class="{'vh100': getThemeConfig.isFixedHeader}">
           <Header />
           <Main />
         </div>
@@ -13,11 +13,22 @@
 </template>
 
 <script>
+import { computed } from 'vue'
+import { useStore } from "/@/store/index.ts";
 import Aside from '/@/views/layout/component/aside.vue';
 import Header from '/@/views/layout/component/header.vue';
 import Main from '/@/views/layout/component/main.vue';
 export default {
   name: 'layoutFashion',
-  components: { Aside, Header, Main }
+  components: { Aside, Header, Main },
+  setup() {
+    const store = useStore();
+    const getThemeConfig = computed(() => {
+      return store.state.themeConfig;
+    });
+    return {
+      getThemeConfig
+    }
+  }
 }
 </script>

vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/breadcrumb.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="layout-navbars-breadcrumb">
-    <i class="el-icon-s-fold layout-navbars-breadcrumb-icon"></i>
+    <i class="layout-navbars-breadcrumb-icon" :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
+      @click="onThemeConfigChange"></i>
     <el-breadcrumb>
       <transition-group name="breadcrumb" mode="out-in">
         <el-breadcrumb-item v-for="(v,k) in breadcrumbList" :key="v.meta.title">
@@ -13,11 +14,20 @@
 </template>
 
 <script lang="ts">
-import { toRefs, reactive, onBeforeMount } from "vue";
+import {
+  toRefs,
+  reactive,
+  onBeforeMount,
+  computed,
+  getCurrentInstance,
+} from "vue";
 import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
+import { useStore } from "/@/store/index.ts";
 export default {
   name: "layoutBreadcrumb",
   setup() {
+    const { proxy } = getCurrentInstance();
+    const store = useStore();
     const route = useRoute();
     const router = useRouter();
     const state = reactive({
@@ -31,6 +41,14 @@ export default {
       if (redirect) router.push(redirect);
       else router.push(path);
     };
+    const onThemeConfigChange = () => {
+      proxy.mittBus.emit("onMenuClick");
+      store.state.themeConfig.isCollapse = !store.state.themeConfig.isCollapse;
+      store.dispatch("setThemeConfig", store.state.themeConfig);
+    };
+    const isCollapse = computed(() => {
+      return store.state.themeConfig.isCollapse;
+    });
     onBeforeMount(() => {
       state.breadcrumbList = route.matched;
     });
@@ -38,6 +56,8 @@ export default {
       getBreadcrumbList(to.matched);
     });
     return {
+      onThemeConfigChange,
+      isCollapse,
       onBreadcrumbClick,
       ...toRefs(state),
     };

vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/setings.vue

@@ -1,41 +1,41 @@
 <template>
   <div class="layout-breadcrumb-seting">
-    <el-drawer title="布局配置" v-model="isDrawer" direction="rtl" destroy-on-close size="240px">
+    <el-drawer title="布局配置" v-model="getThemeConfig.isDrawer" direction="rtl" destroy-on-close size="240px">
       <el-scrollbar class="layout-breadcrumb-seting-bar">
         <!-- 全局主题 -->
         <el-divider content-position="left">全局主题</el-divider>
         <div class="layout-breadcrumb-seting-bar-flex">
           <div class="layout-breadcrumb-seting-bar-flex-label">primary</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-color-picker v-model="primary" size="small" @change="onColorPickerChange('primary')">
+            <el-color-picker v-model="getThemeConfig.primary" size="small" @change="onColorPickerChange('primary')">
             </el-color-picker>
           </div>
         </div>
         <div class="layout-breadcrumb-seting-bar-flex">
           <div class="layout-breadcrumb-seting-bar-flex-label">success</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-color-picker v-model="success" size="small" @change="onColorPickerChange('success')">
+            <el-color-picker v-model="getThemeConfig.success" size="small" @change="onColorPickerChange('success')">
             </el-color-picker>
           </div>
         </div>
         <div class="layout-breadcrumb-seting-bar-flex">
           <div class="layout-breadcrumb-seting-bar-flex-label">info</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-color-picker v-model="info" size="small" @change="onColorPickerChange('info')">
+            <el-color-picker v-model="getThemeConfig.info" size="small" @change="onColorPickerChange('info')">
             </el-color-picker>
           </div>
         </div>
         <div class="layout-breadcrumb-seting-bar-flex">
           <div class="layout-breadcrumb-seting-bar-flex-label">warning</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-color-picker v-model="warning" size="small" @change="onColorPickerChange('warning')">
+            <el-color-picker v-model="getThemeConfig.warning" size="small" @change="onColorPickerChange('warning')">
             </el-color-picker>
           </div>
         </div>
         <div class="layout-breadcrumb-seting-bar-flex">
           <div class="layout-breadcrumb-seting-bar-flex-label">danger</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-color-picker v-model="danger" size="small" @change="onColorPickerChange('danger')">
+            <el-color-picker v-model="getThemeConfig.danger" size="small" @change="onColorPickerChange('danger')">
             </el-color-picker>
           </div>
         </div>
@@ -43,47 +43,49 @@
         <div class="layout-breadcrumb-seting-bar-flex">
           <div class="layout-breadcrumb-seting-bar-flex-label">顶栏背景</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-color-picker v-model="topBar" size="small" @change="onBgColorPickerChange('topBar')">
+            <el-color-picker v-model="getThemeConfig.topBar" size="small" @change="onBgColorPickerChange('topBar')">
             </el-color-picker>
           </div>
         </div>
         <div class="layout-breadcrumb-seting-bar-flex">
           <div class="layout-breadcrumb-seting-bar-flex-label">菜单背景</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-color-picker v-model="menuBar" size="small" @change="onBgColorPickerChange('menuBar')">
+            <el-color-picker v-model="getThemeConfig.menuBar" size="small" @change="onBgColorPickerChange('menuBar')">
             </el-color-picker>
           </div>
         </div>
         <div class="layout-breadcrumb-seting-bar-flex">
           <div class="layout-breadcrumb-seting-bar-flex-label">顶栏默认字体颜色</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-color-picker v-model="topBarColor" size="small" @change="onBgColorPickerChange('topBarColor')">
+            <el-color-picker v-model="getThemeConfig.topBarColor" size="small"
+              @change="onBgColorPickerChange('topBarColor')">
             </el-color-picker>
           </div>
         </div>
         <div class="layout-breadcrumb-seting-bar-flex">
           <div class="layout-breadcrumb-seting-bar-flex-label">菜单默认字体颜色</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-color-picker v-model="menuBarColor" size="small" @change="onBgColorPickerChange('menuBarColor')">
+            <el-color-picker v-model="getThemeConfig.menuBarColor" size="small"
+              @change="onBgColorPickerChange('menuBarColor')">
             </el-color-picker>
           </div>
         </div>
         <div class="layout-breadcrumb-seting-bar-flex mt10">
           <div class="layout-breadcrumb-seting-bar-flex-label">顶栏背景渐变</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-switch v-model="isTopBarColorGradual" @change="onTopBarGradualChange"></el-switch>
+            <el-switch v-model="getThemeConfig.isTopBarColorGradual" @change="onTopBarGradualChange"></el-switch>
           </div>
         </div>
         <div class="layout-breadcrumb-seting-bar-flex mt14">
           <div class="layout-breadcrumb-seting-bar-flex-label">菜单背景渐变</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-switch v-model="isMenuBarColorGradual" @change="onMenuBarGradualChange"></el-switch>
+            <el-switch v-model="getThemeConfig.isMenuBarColorGradual" @change="onMenuBarGradualChange"></el-switch>
           </div>
         </div>
         <div class="layout-breadcrumb-seting-bar-flex mt14">
           <div class="layout-breadcrumb-seting-bar-flex-label">菜单字体背景高亮</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-switch v-model="isMenuBarColorHighlight" @change="onMenuBarHighlightChange"></el-switch>
+            <el-switch v-model="getThemeConfig.isMenuBarColorHighlight" @change="onMenuBarHighlightChange"></el-switch>
           </div>
         </div>
 
@@ -92,46 +94,40 @@
         <div class="layout-breadcrumb-seting-bar-flex">
           <div class="layout-breadcrumb-seting-bar-flex-label">菜单水平折叠</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-switch v-model="isCollapse"></el-switch>
+            <el-switch v-model="getThemeConfig.isCollapse" @change="onThemeConfigChange"></el-switch>
           </div>
         </div>
         <div class="layout-breadcrumb-seting-bar-flex mt15">
           <div class="layout-breadcrumb-seting-bar-flex-label">菜单手风琴</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-switch v-model="isCollapse"></el-switch>
+            <el-switch v-model="getThemeConfig.isUniqueOpened" @change="onsetThemeConfigChange"></el-switch>
-          </div>
-        </div>
-        <div class="layout-breadcrumb-seting-bar-flex mt15">
-          <div class="layout-breadcrumb-seting-bar-flex-label">菜单折叠动画</div>
-          <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-switch v-model="isCollapse"></el-switch>
           </div>
         </div>
         <div class="layout-breadcrumb-seting-bar-flex mt15">
           <div class="layout-breadcrumb-seting-bar-flex-label">固定 Header</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-switch v-model="isCollapse"></el-switch>
+            <el-switch v-model="getThemeConfig.isFixedHeader"></el-switch>
           </div>
         </div>
         <div class="layout-breadcrumb-seting-bar-flex mt15">
           <div class="layout-breadcrumb-seting-bar-flex-label">自动分割菜单</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-switch v-model="isCollapse"></el-switch>
+            <el-switch v-model="getThemeConfig.isCollapse1"></el-switch>
           </div>
         </div>
         <div class="layout-breadcrumb-seting-bar-flex mt15">
           <div class="layout-breadcrumb-seting-bar-flex-label">菜单展开宽度</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-input-number v-model="menuWidth" controls-position="right" :min="1" :max="999" size="mini"
+            <el-input-number v-model="getThemeConfig.menuWidth" controls-position="right" :min="1" :max="999"
-              style="width:90px;">
+              size="mini" style="width:90px;">
             </el-input-number>
           </div>
         </div>
         <div class="layout-breadcrumb-seting-bar-flex mt11">
           <div class="layout-breadcrumb-seting-bar-flex-label">自动锁屏</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-input-number v-model="menuWidth" controls-position="right" :min="1" :max="999" size="mini"
+            <el-input-number v-model="getThemeConfig.menuWidth" controls-position="right" :min="1" :max="999"
-              style="width:90px;">
+              size="mini" style="width:90px;">
             </el-input-number>
           </div>
         </div>
@@ -141,49 +137,49 @@
         <div class="layout-breadcrumb-seting-bar-flex mt15">
           <div class="layout-breadcrumb-seting-bar-flex-label">侧边栏 Logo</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-switch v-model="isCollapse"></el-switch>
+            <el-switch v-model="getThemeConfig.isCollapse1"></el-switch>
           </div>
         </div>
         <div class="layout-breadcrumb-seting-bar-flex mt15">
           <div class="layout-breadcrumb-seting-bar-flex-label">面包屑 Breadcrumb</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-switch v-model="isCollapse"></el-switch>
+            <el-switch v-model="getThemeConfig.isCollapse1"></el-switch>
           </div>
         </div>
         <div class="layout-breadcrumb-seting-bar-flex mt15">
           <div class="layout-breadcrumb-seting-bar-flex-label">开启 Tagsview</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-switch v-model="isCollapse"></el-switch>
+            <el-switch v-model="getThemeConfig.isCollapse1"></el-switch>
           </div>
         </div>
         <div class="layout-breadcrumb-seting-bar-flex mt15">
           <div class="layout-breadcrumb-seting-bar-flex-label">开启 Footer</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-switch v-model="isCollapse"></el-switch>
+            <el-switch v-model="getThemeConfig.isCollapse1"></el-switch>
           </div>
         </div>
         <div class="layout-breadcrumb-seting-bar-flex mt15">
           <div class="layout-breadcrumb-seting-bar-flex-label">灰色模式</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-switch v-model="isCollapse"></el-switch>
+            <el-switch v-model="getThemeConfig.isCollapse1"></el-switch>
           </div>
         </div>
         <div class="layout-breadcrumb-seting-bar-flex mt15">
           <div class="layout-breadcrumb-seting-bar-flex-label">色弱模式</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-switch v-model="isCollapse"></el-switch>
+            <el-switch v-model="getThemeConfig.isCollapse1"></el-switch>
           </div>
         </div>
         <div class="layout-breadcrumb-seting-bar-flex mt15">
           <div class="layout-breadcrumb-seting-bar-flex-label">开启水印</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-switch v-model="isCollapse"></el-switch>
+            <el-switch v-model="getThemeConfig.isCollapse1"></el-switch>
           </div>
         </div>
         <div class="layout-breadcrumb-seting-bar-flex mt15">
           <div class="layout-breadcrumb-seting-bar-flex-label">水印文案</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-input v-model="menuWidth" size="mini" style="width:90px;"></el-input>
+            <el-input v-model="getThemeConfig.menuWidth" size="mini" style="width:90px;"></el-input>
           </div>
         </div>
 
@@ -270,43 +266,31 @@
 
 <script lang="ts">
 import {
-  toRefs,
-  reactive,
   nextTick,
   onBeforeMount,
   onUnmounted,
   getCurrentInstance,
+  defineComponent,
+  computed,
 } from "vue";
+import { useStore } from "/@/store/index.ts";
 import { getLightColor } from "/@/utils/theme.ts";
-export default {
+export default defineComponent({
   name: "layoutBreadcrumbSeting",
   setup() {
     const { proxy } = getCurrentInstance();
-    const state = reactive({
+    const store = useStore();
-      isDrawer: false,
+    const getThemeConfig = computed(() => {
-      primary: "#409eff",
+      return store.state.themeConfig;
-      success: "#67c23a",
-      info: "#909399",
-      warning: "#e6a23c",
-      danger: "#f56c6c",
-      topBar: "#ffffff",
-      menuBar: "#29384d",
-      topBarColor: "#606266",
-      menuBarColor: "#e6e6e6",
-      isTopBarColorGradual: false,
-      isMenuBarColorGradual: false,
-      isMenuBarColorHighlight: false,
-      isCollapse: false,
-      menuWidth: 240,
     });
     const openDrawer = () => {
-      state.isDrawer = true;
+      getThemeConfig.value.isDrawer = true;
     };
     const closeDrawer = () => {
-      state.isDrawer = false;
+      getThemeConfig.value.isDrawer = false;
     };
     const onColorPickerChange = (color: string) => {
-      setPropertyFun(`--color-${color}`, state[color]);
+      setPropertyFun(`--color-${color}`, getThemeConfig.value[color]);
     };
     const setPropertyFun = (color: string, targetVal: any) => {
       document.documentElement.style.setProperty(color, targetVal);
@@ -318,22 +302,25 @@ export default {
       }
     };
     const onBgColorPickerChange = (bg: string) => {
-      document.documentElement.style.setProperty(`--bg-${bg}`, state[bg]);
+      document.documentElement.style.setProperty(
+        `--bg-${bg}`,
+        getThemeConfig.value[bg]
+      );
       onTopBarGradualChange();
       onMenuBarGradualChange();
     };
     const onTopBarGradualChange = () => {
       setGraduaFun(
         ".layout-navbars-breadcrumb-index",
-        state.isTopBarColorGradual,
+        getThemeConfig.value.isTopBarColorGradual,
-        state.topBar
+        getThemeConfig.value.topBar
       );
     };
     const onMenuBarGradualChange = () => {
       setGraduaFun(
         ".layout-container .el-aside",
-        state.isMenuBarColorGradual,
+        getThemeConfig.value.isMenuBarColorGradual,
-        state.menuBar
+        getThemeConfig.value.menuBar
       );
     };
     const setGraduaFun = (el: string, bool: boolean, color: string) => {
@@ -352,13 +339,22 @@ export default {
     };
     const onMenuBarHighlightChange = () => {
       nextTick(() => {
-        let els = document.querySelector(".el-menu-item.is-active");
+        setTimeout(() => {
-        let attr = "el-menu-item is-active";
+          let els = document.querySelector(".el-menu-item.is-active");
-        if (state.isMenuBarColorHighlight)
+          let attr = "el-menu-item is-active";
-          els.setAttribute("class", `${attr} add-is-active`);
+          if (getThemeConfig.value.isMenuBarColorHighlight)
-        else els.setAttribute("class", `${attr}`);
+            els.setAttribute("class", `${attr} add-is-active`);
+          else els.setAttribute("class", `${attr}`);
+        }, 0);
       });
     };
+    const onThemeConfigChange = () => {
+      store.dispatch("setThemeConfig", getThemeConfig.value);
+      onMenuBarHighlightChange();
+    };
+    const onsetThemeConfigChange = () => {
+      store.dispatch("setThemeConfig", getThemeConfig.value);
+    };
     onBeforeMount(() => {
       proxy.mittBus.on("onMenuClick", () => {
         onMenuBarHighlightChange();
@@ -375,10 +371,12 @@ export default {
       onTopBarGradualChange,
       onMenuBarGradualChange,
       onMenuBarHighlightChange,
-      ...toRefs(state),
+      onThemeConfigChange,
+      onsetThemeConfigChange,
+      getThemeConfig,
     };
   },
-};
+});
 </script>
 
 <style scoped lang="scss">

vue-admin-wonderful-next/src/views/layout/navMenu/vertical.vue

@@ -1,5 +1,6 @@
 <template>
-  <el-menu router :default-active="defaultActive" background-color="transparent" @select="onMenuClick">
+  <el-menu router :default-active="defaultActive" background-color="transparent" :collapse="getThemeConfig.isCollapse"
+    :unique-opened="getThemeConfig.isUniqueOpened" :collapse-transition="false">
     <template v-for="val in menuList">
       <el-submenu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
         <template #title>
@@ -26,6 +27,7 @@ import {
   getCurrentInstance,
 } from "vue";
 import { useRoute, onBeforeRouteUpdate } from "vue-router";
+import { useStore } from "/@/store/index.ts";
 import SubItem from "/@/views/layout/navMenu/subItem.vue";
 export default defineComponent({
   name: "navMenuVertical",
@@ -40,6 +42,7 @@ export default defineComponent({
   },
   setup(props) {
     const { proxy } = getCurrentInstance();
+    const store = useStore();
     const route = useRoute();
     const state = reactive({
       defaultActive: route.path,
@@ -47,15 +50,16 @@ export default defineComponent({
     const menuList = computed(() => {
       return props.menuList;
     });
+    const getThemeConfig = computed(() => {
+      return store.state.themeConfig;
+    });
     onBeforeRouteUpdate((to) => {
       state.defaultActive = to.path;
-    });
-    const onMenuClick = (index, path) => {
       proxy.mittBus.emit("onMenuClick");
-    };
+    });
     return {
       menuList,
-      onMenuClick,
+      getThemeConfig,
       ...toRefs(state),
     };
   },