From 63e83c6efbf49f014ccba89c46f629909b77a020 Mon Sep 17 00:00:00 2001
From: yuntian001 <yuntian001z@qq.com>
Date: Sun, 5 Nov 2023 20:28:28 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8A=A0=E4=B8=8A=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E4=BE=A7=E8=BE=B9=E6=A0=8F=E5=92=8C=E5=B7=A6=E4=BE=A7=E6=A8=A1?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/meSettingMenu.vue              | 105 +++++++++++++++++-
 src/config/index.ts                           |   2 +-
 src/config/theme.ts                           |   1 +
 src/layout/components/expand.vue              |  19 ++++
 .../header/components/tagBar/index.vue        |   1 +
 .../components/topBar/components/left.vue     |   8 +-
 .../components/topBar/components/topMenu.vue  |  28 +++++
 .../header/components/topBar/index.vue        |  12 +-
 src/layout/components/header/index.vue        |   1 -
 .../components/menu/components/menuItem.vue   |  47 ++++++--
 src/layout/components/menu/index.vue          |  46 +++++---
 src/layout/components/title.vue               |  21 ++++
 src/layout/index.vue                          |  32 ++++--
 src/store/modules/route.ts                    |   1 +
 src/store/modules/setting.ts                  |   7 ++
 15 files changed, 289 insertions(+), 42 deletions(-)
 create mode 100644 src/layout/components/expand.vue
 create mode 100644 src/layout/components/header/components/topBar/components/topMenu.vue
 create mode 100644 src/layout/components/title.vue

diff --git a/src/components/meSettingMenu.vue b/src/components/meSettingMenu.vue
index c3fbbd9f..96434e6d 100644
--- a/src/components/meSettingMenu.vue
+++ b/src/components/meSettingMenu.vue
@@ -1,6 +1,26 @@
 <template>
   <el-drawer v-model="setting.showSettingMenu" :title="$t('项目配置')" size="300px" append-to-body>
-    <el-form label-position="left" label-width="170px">
+    <el-form class="content" label-position="left" label-width="170px">
+      <div class="title">
+        <div class="title-content">{{ $t('布局') }}</div>
+      </div>
+      <div class="info" :style="{ '--primaryColor': themeConfig.primaryColor }">
+        <div
+          class="layout-base layout-left"
+          :class="{ active: themeConfig.menuType === 'sidebar' }"
+          :title="$t('左侧菜单模式')"
+          @click="themeConfig.menuType = 'sidebar'"
+        ></div>
+        <div
+          class="layout-base layout-top"
+          :class="{ active: themeConfig.menuType === 'top' }"
+          :title="$t('顶部菜单混合模式')"
+          @click="themeConfig.menuType = 'top'"
+        ></div>
+      </div>
+      <div class="title">
+        <div class="title-content">{{ $t('配置') }}</div>
+      </div>
       <el-form-item :label="$t('主题色')">
         <el-color-picker v-model="themeConfig.primaryColor" :predefine="predefinePrimaryColors" />
       </el-form-item>
@@ -79,4 +99,87 @@ const clear = () => {
   setting.clearCache();
   userStore.logOut();
 };
+const activeColor = computed(() => themeConfig.value.primaryColor);
 </script>
+<style lang="scss" scoped>
+.content {
+  margin-top: -32px;
+  .title {
+    display: block;
+    height: 1px;
+    width: 100%;
+    margin: 24px 0;
+    border-top: 1px var(--el-border-color) var(--el-border-style);
+    position: relative;
+    .title-content {
+      position: absolute;
+      background-color: var(--el-bg-color);
+      padding: 0 20px;
+      font-weight: 500;
+      color: var(--el-text-color-primary);
+      font-size: 14px;
+      left: 50%;
+      transform: translate(-50%) translateY(-50%);
+    }
+  }
+  .info {
+    display: flex;
+    justify-content: center;
+    .layout-base {
+      width: 50px;
+      height: 50px;
+      border-radius: 5px;
+      position: relative;
+      background: #e5e7eb;
+      border: 1px solid #e5e7eb;
+      margin-right: 15px;
+      cursor: pointer;
+    }
+    .active {
+      border: 2px solid var(--primaryColor) !important;
+    }
+    .layout-left::before {
+      content: '';
+      background-color: #000;
+      position: absolute;
+      left: 0;
+      width: 10px;
+      top: 0;
+      bottom: 0;
+      border-top-left-radius: 5px;
+      border-bottom-left-radius: 5px;
+    }
+    .layout-left::after {
+      content: '';
+      background-color: #fff;
+      position: absolute;
+      left: 10px;
+      right: 0;
+      top: 0;
+      height: 10px;
+      border-top-right-radius: 5px;
+    }
+    .layout-top::before {
+      content: '';
+      background-color: #000;
+      position: absolute;
+      left: 0;
+      width: 10px;
+      top: 10px;
+      bottom: 0;
+      border-bottom-left-radius: 5px;
+    }
+    .layout-top::after {
+      content: '';
+      background-color: #fff;
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      height: 10px;
+      border-top-right-radius: 5px;
+      border-top-left-radius: 5px;
+    }
+  }
+}
+</style>
diff --git a/src/config/index.ts b/src/config/index.ts
index 6f0c479c..122bd9c7 100644
--- a/src/config/index.ts
+++ b/src/config/index.ts
@@ -4,7 +4,7 @@ import loginConfig from './login';
 import themeConfig from './theme';
 const settingKey = 'me-config';
 const settingConfig = {
-  version: '1.0.3', //版本当版本改变时会清空localStorage和sessionStorage
+  version: '1.0.4', //版本当版本改变时会清空localStorage和sessionStorage
   openKeepAlive: true, // 是否开启KeepAlive缓存
   menuMode: MenuModeEnum.STATIC, // 菜单模式
 };
diff --git a/src/config/theme.ts b/src/config/theme.ts
index 7cba6093..060fb97c 100644
--- a/src/config/theme.ts
+++ b/src/config/theme.ts
@@ -1,6 +1,7 @@
 import { SizeEnum } from '@/dict/configEnum';
 export default {
   primaryColor: '#409eff', // 主题颜色
+  menuType: 'sidebar' as 'top' | 'sidebar', //菜单模式，顶部模式/侧边栏模式
   menuBg: '#1d1e1f', // 菜单背景颜色
   menuWidth: '200px', // 菜单展开宽度
   menuCollapse: true, // 菜单是否折叠
diff --git a/src/layout/components/expand.vue b/src/layout/components/expand.vue
new file mode 100644
index 00000000..48d7e4de
--- /dev/null
+++ b/src/layout/components/expand.vue
@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <mel-icon-expand v-if="themeConfig.menuCollapse" class="fold-expand pointer" @click="setMenuCollapse">
+    </mel-icon-expand>
+    <mel-icon-fold v-else class="fold-expand pointer" @click="setMenuCollapse"></mel-icon-fold>
+  </div>
+</template>
+
+<script setup lang="ts" name="Expand">
+import { useSettingStore } from '@/store';
+const { themeConfig } = storeToRefs(useSettingStore());
+const setMenuCollapse = () => {
+  themeConfig.value.menuCollapse = !themeConfig.value.menuCollapse;
+};
+</script>
+<style lang="scss" scoped>
+.expand {
+}
+</style>
diff --git a/src/layout/components/header/components/tagBar/index.vue b/src/layout/components/header/components/tagBar/index.vue
index b61dae42..7f2ff8ba 100644
--- a/src/layout/components/header/components/tagBar/index.vue
+++ b/src/layout/components/header/components/tagBar/index.vue
@@ -221,6 +221,7 @@ watch(route, () => {
   height: $header-tag-height;
   display: flex;
   align-items: center;
+  background-color: var(--el-bg-color);
 
   .is-disabled {
     color: var(--el-disabled-text-color) !important;
diff --git a/src/layout/components/header/components/topBar/components/left.vue b/src/layout/components/header/components/topBar/components/left.vue
index c197db02..a76d45e7 100644
--- a/src/layout/components/header/components/topBar/components/left.vue
+++ b/src/layout/components/header/components/topBar/components/left.vue
@@ -1,9 +1,7 @@
 <template>
   <el-space class="left">
     <div></div>
-    <mel-icon-expand v-if="themeConfig.menuCollapse" class="fold-expand pointer" @click="setMenuCollapse">
-    </mel-icon-expand>
-    <mel-icon-fold v-else class="fold-expand pointer" @click="setMenuCollapse"></mel-icon-fold>
+    <Expand></Expand>
     <el-scrollbar
       v-if="!globalStore.isMobile && themeConfig.breadcrumb"
       :min-size="10"
@@ -24,11 +22,9 @@
 import { mitter, event } from '@/event';
 import { useSettingStore, useGlobalStore, useRouteStore } from '@/store';
 import { RouteLocationNormalized, RouteRecordRaw } from 'vue-router';
+import Expand from '@/layout/components/expand.vue';
 const { themeConfig } = storeToRefs(useSettingStore());
 const globalStore = useGlobalStore();
-const setMenuCollapse = () => {
-  themeConfig.value.menuCollapse = !themeConfig.value.menuCollapse;
-};
 const breadcrumbList = ref([] as Pick<RouteRecordRaw, 'name' | 'path' | 'meta' | 'redirect'>[]);
 const route = useRoute();
 const { routes } = storeToRefs(useRouteStore());
diff --git a/src/layout/components/header/components/topBar/components/topMenu.vue b/src/layout/components/header/components/topBar/components/topMenu.vue
new file mode 100644
index 00000000..c8c32ae0
--- /dev/null
+++ b/src/layout/components/header/components/topBar/components/topMenu.vue
@@ -0,0 +1,28 @@
+<template>
+  <el-menu class="menu" :default-active="activeMenu" mode="horizontal">
+    <layout-menu-item
+      v-for="item in menus"
+      :key="item.path"
+      :no-child="true"
+      :item="item"
+      :collapse="themeConfig.menuCollapse"
+    />
+  </el-menu>
+</template>
+
+<script setup lang="ts" name="TopMenu">
+const { themeConfig } = storeToRefs(useSettingStore());
+import { useRouteStore, useSettingStore } from '@/store';
+const routeStore = useRouteStore();
+const route = useRoute();
+const menus = computed(() => {
+  return routeStore.routes; //.map(item=>Object.assign({},item,{children:[]}));
+});
+const activeMenu = computed(() => {
+  return route.meta.menuIndex?.[0] + '';
+});
+</script>
+<style lang="scss" scoped>
+.top-menu {
+}
+</style>
diff --git a/src/layout/components/header/components/topBar/index.vue b/src/layout/components/header/components/topBar/index.vue
index 7be55695..7e9a0557 100644
--- a/src/layout/components/header/components/topBar/index.vue
+++ b/src/layout/components/header/components/topBar/index.vue
@@ -1,13 +1,19 @@
 <template>
   <div class="top-bar">
-    <Left></Left>
+    <Title v-if="menuType === 'top'"></Title>
+    <Left v-else></Left>
+    <top-menu v-if="menuType === 'top'"></top-menu>
     <Right></Right>
   </div>
 </template>
 
 <script setup lang="ts" name="TopBar">
+import { useSettingStore } from '@/store';
 import Left from './components/left.vue';
 import Right from './components/right/index.vue';
+import TopMenu from './components/topMenu.vue';
+import Title from '@/layout/components/title.vue';
+const { menuType } = storeToRefs(useSettingStore());
 </script>
 <style lang="scss" scoped>
 .top-bar {
@@ -16,5 +22,9 @@ import Right from './components/right/index.vue';
   align-items: center;
   justify-content: space-between;
   border-bottom: 1px solid var(--el-border-color);
+  overflow: hidden;
+  .menu {
+    flex: 1;
+  }
 }
 </style>
diff --git a/src/layout/components/header/index.vue b/src/layout/components/header/index.vue
index 1e71bf8f..a447b923 100644
--- a/src/layout/components/header/index.vue
+++ b/src/layout/components/header/index.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="layout-header">
     <top-bar v-if="themeConfig.topBar"></top-bar>
-    <tag-bar v-if="themeConfig.tagBar"></tag-bar>
   </div>
 </template>
 <script setup lang="ts" name="LayoutHeader">
diff --git a/src/layout/components/menu/components/menuItem.vue b/src/layout/components/menu/components/menuItem.vue
index 7e748c2d..067f9a36 100644
--- a/src/layout/components/menu/components/menuItem.vue
+++ b/src/layout/components/menu/components/menuItem.vue
@@ -1,21 +1,23 @@
 <template>
   <template v-if="menu">
-    <el-sub-menu v-if="menu.children?.length" :index="menu.path">
+    <el-sub-menu v-if="menu.children?.length && !noChild" :index="menu.path">
       <template v-if="menu.meta" #title>
         <component :is="menu.meta!.icon" v-if="menu.meta!.icon" />
+        <div v-show="collapse" v-else class="icon-text">{{ $t(menu.meta.title).slice(0, 1) }}</div>
         <span class="menu">{{ $t(menu.meta!.title!) }}</span>
       </template>
       <layout-menu-item v-for="child in menu.children" :key="child.path" :item="child"></layout-menu-item>
     </el-sub-menu>
     <template v-else>
       <component
-        :is="menu.meta?.isLink ? 'a' : 'routerLink'"
+        :is="truePathMenu!.meta?.isLink ? 'a' : 'routerLink'"
         v-if="menu.meta && menu.meta.title"
-        :href="menu.path"
-        :to="menu.path"
+        :href="truePathMenu!.path"
+        :to="truePathMenu!.path"
       >
-        <el-menu-item :index="menu.path" :title="$t(menu.meta.title)">
+        <el-menu-item :index="noChild ? item.meta?.menuIndex?.toString() : menu.path" :title="$t(menu.meta.title)">
           <component :is="menu.meta.icon" v-if="menu.meta.icon" />
+          <div v-show="collapse" v-else class="icon-text">{{ $t(menu.meta.title).slice(0, 1) }}</div>
           <template #title>
             <span class="menu">{{ $t(menu.meta.title) }}</span>
           </template>
@@ -26,8 +28,10 @@
 </template>
 
 <script setup lang="ts" name="MenuItem">
+import { useRouteStore, useSettingStore } from '@/store';
 import { RouteRecordRaw } from 'vue-router';
-const props = defineProps<{ item: RouteRecordRaw }>();
+const routeStore = useRouteStore();
+const props = defineProps<{ item: RouteRecordRaw; noChild?: boolean; collapse?: boolean }>();
 const menu = ref<RouteRecordRaw>();
 const getMenu = (item: RouteRecordRaw): RouteRecordRaw => {
   if (!item.children?.length) {
@@ -40,7 +44,36 @@ const getMenu = (item: RouteRecordRaw): RouteRecordRaw => {
   }
   return res;
 };
+const truePathMenu = ref<RouteRecordRaw>();
 if (!props.item.meta?.hideMenu) {
-  menu.value = getMenu(props.item);
+  truePathMenu.value = menu.value = getMenu(props.item);
+}
+if (props.noChild) {
+  const firstChildrenMenu: (children: RouteRecordRaw[]) => RouteRecordRaw | undefined = (
+    children: RouteRecordRaw[],
+  ) => {
+    for (let i = 0; i < children.length; i++) {
+      if (!children[i].meta?.hideMenu) {
+        return children[i];
+      }
+      if (children[i].children) {
+        const item = firstChildrenMenu(children[i].children!);
+        if (item) {
+          return item;
+        }
+      }
+      return undefined;
+    }
+  };
+  if (menu.value?.children?.length) {
+    truePathMenu.value = firstChildrenMenu(menu.value.children) ?? menu.value;
+  }
+  routeStore.childsRoutes[props.item!.meta!.menuIndex![0]] = menu.value?.children ?? [];
 }
 </script>
+<style lang="scss" scoped>
+.icon-text {
+  width: 1em;
+  text-align: center;
+}
+</style>
diff --git a/src/layout/components/menu/index.vue b/src/layout/components/menu/index.vue
index 460a304b..ef581b2e 100644
--- a/src/layout/components/menu/index.vue
+++ b/src/layout/components/menu/index.vue
@@ -1,6 +1,11 @@
 <template>
-  <div class="layout-menu" :class="{ collapse: !globalStore.isMobile && themeConfig.menuCollapse }">
-    <div class="title">M<span>e - Admin</span></div>
+  <div
+    v-if="menus.length"
+    class="layout-menu"
+    :class="{ 'has-title': menuType !== 'top', collapse: !globalStore.isMobile && themeConfig.menuCollapse }"
+  >
+    <Expand v-if="menuType === 'top'" class="expand"></Expand>
+    <Title v-else class="layout-title"></Title>
     <div class="menu-box">
       <el-scrollbar view-class="layout-menu-content">
         <el-menu
@@ -8,7 +13,7 @@
           :default-active="activeMenu"
           :collapse="!globalStore.isMobile && themeConfig.menuCollapse"
         >
-          <layout-menu-item v-for="item in routeStore.routes" :key="item.path" :item="item" />
+          <layout-menu-item v-for="item in menus" :key="item.path" :item="item" :collapse="themeConfig.menuCollapse" />
         </el-menu>
       </el-scrollbar>
     </div>
@@ -17,7 +22,10 @@
 <script setup lang="ts" name="layoutMenu">
 import { useSettingStore, useRouteStore, useGlobalStore } from '@/store';
 import { mixColor, getColorLuma } from '@/utils/helper';
-const { themeConfig } = storeToRefs(useSettingStore());
+import Title from '../title.vue';
+import Expand from '@/layout/components/expand.vue';
+
+const { themeConfig, menuType } = storeToRefs(useSettingStore());
 const routeStore = useRouteStore();
 const globalStore = useGlobalStore();
 const route = useRoute();
@@ -42,6 +50,9 @@ const menuBg1 = computed(() =>
 );
 const menuActiveColor = computed(() => (getColorLuma(themeConfig.value.menuBg) < 100 ? '#ffffff' : '#303133'));
 const menuTextColor = computed(() => mixColor(themeConfig.value.menuBg, menuActiveColor.value, 0.8));
+const menus = computed(() => {
+  return menuType.value === 'top' ? routeStore.childsRoutes[route.meta.menuIndex![0]] : routeStore.routes;
+});
 </script>
 <style lang="scss" scoped>
 .layout-menu {
@@ -51,21 +62,14 @@ const menuTextColor = computed(() => mixColor(themeConfig.value.menuBg, menuActi
   background-color: v-bind('themeConfig.menuBg');
   height: 100%;
   position: relative;
-  padding-top: var(--el-menu-item-height);
-  .title {
-    height: var(--el-menu-item-height);
-    line-height: var(--el-menu-item-height);
-    font-weight: bold;
-    padding: 0 12px;
-    font-size: 1.25em;
-    word-break: break-all;
-    overflow-y: hidden;
-    color: var(--el-menu-active-color);
-    background-color: inherit;
+
+  .layout-title {
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
+    color: var(--el-menu-active-color);
+    width: 100%;
     box-shadow: 0 1px v-bind(menuBg1);
   }
   .menu-box {
@@ -120,6 +124,18 @@ const menuTextColor = computed(() => mixColor(themeConfig.value.menuBg, menuActi
       }
     }
   }
+  .expand {
+    position: absolute;
+    bottom: 20px;
+    right: 12px;
+    padding: 5px;
+    background-color: rgba(255, 255, 255, 0.6);
+    border-radius: 2px;
+    z-index: 1;
+  }
+}
+.has-title {
+  padding-top: $header-top-height;
 }
 .collapse {
   :deep(.layout-menu-content) {
diff --git a/src/layout/components/title.vue b/src/layout/components/title.vue
new file mode 100644
index 00000000..fb1b3871
--- /dev/null
+++ b/src/layout/components/title.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="title">M<span>e - Admin</span></div>
+</template>
+
+<script setup lang="ts" name="Title">
+import { useSettingStore } from '@/store';
+const { themeConfig } = storeToRefs(useSettingStore());
+</script>
+<style lang="scss" scoped>
+.title {
+  height: $header-top-height;
+  line-height: $header-top-height;
+  font-weight: bold;
+  padding: 0 12px;
+  font-size: 1.25em;
+  word-break: break-all;
+  overflow-y: hidden;
+  background-color: inherit;
+  width: v-bind('themeConfig.menuWidth');
+}
+</style>
diff --git a/src/layout/index.vue b/src/layout/index.vue
index f35fbb38..bdd71b01 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,19 +1,25 @@
 <template>
   <el-container class="layout">
-    <el-aside v-if="!globalStore.isMobile" width="max-content">
+    <el-aside v-if="!globalStore.isMobile && menuType !== 'top'" width="max-content">
       <layout-menu></layout-menu>
     </el-aside>
     <el-container>
       <el-header v-if="themeConfig.fixedHeader" class="right-header" height="max-content">
         <layout-header></layout-header>
       </el-header>
-      <el-main class="right-main">
-        <el-scrollbar view-class="me-right-main-view">
-          <layout-header v-if="!themeConfig.fixedHeader"></layout-header>
-          <div id="me-main" class="me-main">
-            <layout-page :transition="{ name: 'fade-transform', mode: 'out-in' }"></layout-page>
-          </div>
-        </el-scrollbar>
+      <el-main class="main">
+        <el-aside v-if="menuType === 'top'" width="max-content">
+          <layout-menu></layout-menu>
+        </el-aside>
+        <el-main class="right-main">
+          <tag-bar v-if="themeConfig.tagBar"></tag-bar>
+          <el-scrollbar view-class="me-right-main-view">
+            <layout-header v-if="!themeConfig.fixedHeader"></layout-header>
+            <div id="me-main" class="me-main">
+              <layout-page :transition="{ name: 'fade-transform', mode: 'out-in' }"></layout-page>
+            </div>
+          </el-scrollbar>
+        </el-main>
       </el-main>
     </el-container>
   </el-container>
@@ -35,8 +41,9 @@
 import LayoutHeader from './components/header/index.vue';
 import LayoutMenu from './components/menu/index.vue';
 import LayoutPage from './components/page.vue';
+import TagBar from './components/header/components/tagBar/index.vue';
 import { useSettingStore, useGlobalStore } from '@/store';
-const { themeConfig } = storeToRefs(useSettingStore());
+const { themeConfig, menuType } = storeToRefs(useSettingStore());
 const globalStore = useGlobalStore();
 onMounted(() => {
   nextTick(() => (globalStore.layoutLoaded = true));
@@ -45,15 +52,20 @@ onMounted(() => {
 <style lang="scss" scoped>
 .layout {
   height: 100%;
-
   .right-header {
     padding: 0;
   }
 
+  .main {
+    padding: 0;
+    display: flex;
+  }
   .right-main {
     padding: 0;
     // background-color: rgb(240, 242, 245);
     background-color: var(--el-bg-color-page);
+    display: flex;
+    flex-direction: column;
   }
 }
 
diff --git a/src/store/modules/route.ts b/src/store/modules/route.ts
index 638e7493..b907f2b1 100644
--- a/src/store/modules/route.ts
+++ b/src/store/modules/route.ts
@@ -11,6 +11,7 @@ export default defineStore('route', {
   state: () => ({
     addRoutes: [] as RouteRecordRaw[],
     cacheFullPath: new Set() as Set<string | RegExp>,
+    childsRoutes: [] as RouteRecordRaw[][],
   }),
   getters: {
     routes: (state) => constantRoutes.concat(state.addRoutes),
diff --git a/src/store/modules/setting.ts b/src/store/modules/setting.ts
index d626f35b..41e3ef3f 100644
--- a/src/store/modules/setting.ts
+++ b/src/store/modules/setting.ts
@@ -2,6 +2,7 @@ import { Language } from 'element-plus/es/locale';
 import { themeConfig, settingKey, localeConfig } from '@/config';
 import { event, mitter } from '@/event';
 import { mixColor } from '@/utils/helper';
+import { useGlobalStore } from '../module';
 const { css } = useStyleTag('');
 const useSettingStore = defineStore('setting', {
   state: () => ({
@@ -11,6 +12,12 @@ const useSettingStore = defineStore('setting', {
     isDark: useDark({ storageKey: 'me-color-dark-scheme' }),
     showSettingMenu: false,
   }),
+  getters: {
+    menuType: (state) => {
+      const globalStore = useGlobalStore();
+      return globalStore.isMobile ? 'sidebar' : state.themeConfig.menuType;
+    },
+  },
   actions: {
     setPrimaryStyle() {
       const style = [];