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

2024-12-31 09:12:10 +08:00 · 2021-01-05 18:11:13 +08:00 · 2021-01-05 18:11:13 +08:00 · c0a369c6d0
commit c0a369c6d0
parent e9f6aae01e
11 changed files with 228 additions and 89 deletions
--- a/vue-admin-wonderful-next/package.json
+++ b/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",
--- a/vue-admin-wonderful-next/src/main.ts
+++ b/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()
--- a/vue-admin-wonderful-next/src/store/index.ts
+++ b/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)
+}
--- a/vue-admin-wonderful-next/src/theme/app.scss
+++ b/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;
--- a/vue-admin-wonderful-next/src/utils/themeConfig.ts
+++ b/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,
+}
--- a/vue-admin-wonderful-next/src/views/layout/component/aside.vue
+++ b/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),
    };
  },
--- a/vue-admin-wonderful-next/src/views/layout/component/main.vue
+++ b/vue-admin-wonderful-next/src/views/layout/component/main.vue
@ -1,8 +1,9 @@
 <template>
-  <el-main>
-    <el-scrollbar class="layout-scrollbar" style="min-height: calc(100vh - 84px);">
+  <el-main :class="getThemeConfig.isFixedHeader ? 'el-main-overflow-auto' : 'el-main-overflow-unset'">
+    <!-- <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>
--- a/vue-admin-wonderful-next/src/views/layout/defaults.vue
+++ b/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>
--- a/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/breadcrumb.vue
+++ b/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),
    };
--- a/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/setings.vue
+++ b/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>
-          </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">固定 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"
-              style="width:90px;">
+            <el-input-number v-model="getThemeConfig.menuWidth" controls-position="right" :min="1" :max="999"
+              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"
-              style="width:90px;">
+            <el-input-number v-model="getThemeConfig.menuWidth" controls-position="right" :min="1" :max="999"
+              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({
-      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,
-      menuWidth: 240,
+    const store = useStore();
+    const getThemeConfig = computed(() => {
+      return store.state.themeConfig;
    });
    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,
-        state.topBar
+        getThemeConfig.value.isTopBarColorGradual,
+        getThemeConfig.value.topBar
      );
    };
    const onMenuBarGradualChange = () => {
      setGraduaFun(
        ".layout-container .el-aside",
-        state.isMenuBarColorGradual,
-        state.menuBar
+        getThemeConfig.value.isMenuBarColorGradual,
+        getThemeConfig.value.menuBar
      );
    };
    const setGraduaFun = (el: string, bool: boolean, color: string) => {
@ -352,13 +339,22 @@ export default {
    };
    const onMenuBarHighlightChange = () => {
      nextTick(() => {
+        setTimeout(() => {
          let els = document.querySelector(".el-menu-item.is-active");
          let attr = "el-menu-item is-active";
-        if (state.isMenuBarColorHighlight)
+          if (getThemeConfig.value.isMenuBarColorHighlight)
            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">
--- a/vue-admin-wonderful-next/src/views/layout/navMenu/vertical.vue
+++ b/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),
    };
  },