Merge branch 'main' into example

src/layouts/modules/global-menu/index.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import type { Component } from 'vue';
+import { useAppStore } from '@/store/modules/app';
 import { useThemeStore } from '@/store/modules/theme';
 import VerticalMenu from './modules/vertical-menu.vue';
 import VerticalMixMenu from './modules/vertical-mix-menu.vue';
@@ -12,6 +13,7 @@ defineOptions({
   name: 'GlobalMenu'
 });
 
+const appStore = useAppStore();
 const themeStore = useThemeStore();
 
 const activeMenu = computed(() => {
@@ -24,10 +26,12 @@ const activeMenu = computed(() => {
 
   return menuMap[themeStore.layout.mode];
 });
+
+const reRenderVertical = computed(() => themeStore.layout.mode === 'vertical' && appStore.isMobile);
 </script>
 
 <template>
-  <component :is="activeMenu" />
+  <component :is="activeMenu" :key="reRenderVertical" />
 </template>
 
 <style scoped></style>

src/layouts/modules/global-menu/modules/horizontal-mix-menu.vue

@@ -18,8 +18,6 @@ const themeStore = useThemeStore();
 const { allMenus, childLevelMenus, activeFirstLevelMenuKey, setActiveFirstLevelMenuKey } = useMixMenuContext();
 const { routerPushByKeyWithMetaQuery } = useRouterPush();
 
-const inverted = computed(() => !themeStore.darkMode && themeStore.sider.inverted);
-
 const selectedKey = computed(() => {
   const { hideInMenu, activeMenu } = route.meta;
   const name = route.name as string;
@@ -53,7 +51,6 @@ function handleSelectMixMenu(menu: App.Global.Menu) {
     <FirstLevelMenu
       :menus="allMenus"
       :active-menu-key="activeFirstLevelMenuKey"
-      :inverted="inverted"
       :sider-collapse="appStore.siderCollapse"
       :dark-mode="themeStore.darkMode"
       :theme-color="themeStore.themeColor"

src/layouts/modules/global-menu/modules/reversed-horizontal-mix-menu.vue

@@ -27,8 +27,6 @@ const {
 } = useMixMenuContext();
 const { routerPushByKeyWithMetaQuery } = useRouterPush();
 
-const inverted = computed(() => !themeStore.darkMode && themeStore.sider.inverted);
-
 const selectedKey = computed(() => {
   const { hideInMenu, activeMenu } = route.meta;
   const name = route.name as string;
@@ -86,7 +84,6 @@ watch(
         :collapsed-width="themeStore.sider.collapsedWidth"
         :collapsed-icon-size="22"
         :options="childLevelMenus"
-        :inverted="inverted"
         :indent="18"
         @update:value="routerPushByKeyWithMetaQuery"
       />

src/locales/langs/zh-cn.ts

@@ -64,7 +64,7 @@ const local: App.I18n.Schema = {
       dark: '暗黑模式',
       auto: '跟随系统'
     },
-    grayscale: '灰度模式',
+    grayscale: '灰色模式',
     layoutMode: {
       title: '布局模式',
       vertical: '左侧菜单模式',