fix(projects): theme setting adapter mobile

soybeanjs · Nov 12, 2023 · 8c72966 · 8c72966
1 parent b3fce71
commit 8c72966
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 3 deletions.
diff --git a/src/layouts/modules/theme-drawer/components/layout-mode-card.vue b/src/layouts/modules/theme-drawer/components/layout-mode-card.vue
@@ -12,9 +12,13 @@ interface Props {
    * layout mode
    */
   mode: UnionKey.ThemeLayoutMode;
+  /**
+   * disabled
+   */
+  disabled?: boolean;
 }
 
-defineProps<Props>();
+const props = defineProps<Props>();
 
 interface Emits {
   /**
@@ -63,6 +67,8 @@ const layoutConfig: LayoutConfig = {
 };
 
 function handleChangeMode(mode: UnionKey.ThemeLayoutMode) {
+  if (props.disabled) return;
+
   emit('update:mode', mode);
 }
 </script>

diff --git a/src/layouts/modules/theme-drawer/modules/layout-mode.vue b/src/layouts/modules/theme-drawer/modules/layout-mode.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useAppStore } from '@/store/modules/app';
 import { useThemeStore } from '@/store/modules/theme';
 import { $t } from '@/locales';
 import LayoutModeCard from '../components/layout-mode-card.vue';
@@ -7,12 +8,13 @@ defineOptions({
   name: 'LayoutMode'
 });
 
+const appStore = useAppStore();
 const themeStore = useThemeStore();
 </script>
 
 <template>
   <ADivider>{{ $t('theme.layoutMode.title') }}</ADivider>
-  <LayoutModeCard v-model:mode="themeStore.layout.mode">
+  <LayoutModeCard v-model:mode="themeStore.layout.mode" :disabled="appStore.isMobile">
     <template #vertical>
       <div class="layout-sider w-18px h-full"></div>
       <div class="vertical-wrapper">

diff --git a/src/store/modules/app/index.ts b/src/store/modules/app/index.ts
@@ -8,8 +8,10 @@ import { $t, setLocale } from '@/locales';
 import { localStg } from '@/utils/storage';
 import { useRouteStore } from '../route';
 import { useTabStore } from '../tab';
+import { useThemeStore } from '../theme';
 
 export const useAppStore = defineStore(SetupStoreId.App, () => {
+  const themeStore = useThemeStore();
   const routeStore = useRouteStore();
   const tabStore = useTabStore();
   const scope = effectScope();
@@ -79,6 +81,8 @@ export const useAppStore = defineStore(SetupStoreId.App, () => {
       newValue => {
         if (newValue) {
           setSiderCollapse(true);
+
+          themeStore.setThemeLayout('vertical');
         }
       },
       { immediate: true }

diff --git a/src/store/modules/theme/index.ts b/src/store/modules/theme/index.ts
@@ -58,6 +58,14 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
    */
   const antdTheme = computed(() => getAntdTheme(settings.value.themeColor, settings.value.otherColor, darkMode.value));
 
+  /**
+   * set theme layout
+   * @param mode theme layout mode
+   */
+  function setThemeLayout(mode: UnionKey.ThemeLayoutMode) {
+    settings.value.layout.mode = mode;
+  }
+
   function init() {
     setupThemeVarsToHtml(themeTokens, darkThemeTokens);
   }
@@ -89,6 +97,7 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
     darkMode,
     setThemeScheme,
     toggleThemeScheme,
-    antdTheme
+    antdTheme,
+    setThemeLayout
   };
 });