refactor(projects): 页面布局调整为rdms风格

src/store/modules/app/index.ts

@@ -83,11 +83,10 @@ export const useAppStore = defineStore(SetupStoreId.App, () => {
         if (newValue) {
           // backup theme setting before is mobile
           localStg.set('backupThemeSettingBeforeIsMobile', {
-            layout: themeStore.layout.mode,
+            layout: themeStore.layoutMode,
             siderCollapse: siderCollapse.value
           });
 
-          themeStore.setThemeLayout('vertical');
           setSiderCollapse(true);
         } else {
           // when is not mobile, recover the backup theme setting
@@ -95,7 +94,6 @@ export const useAppStore = defineStore(SetupStoreId.App, () => {
 
           if (backup) {
             nextTick(() => {
-              themeStore.setThemeLayout(backup.layout);
               setSiderCollapse(backup.siderCollapse);
 
               localStg.remove('backupThemeSettingBeforeIsMobile');

src/store/modules/theme/index.ts

@@ -1,6 +1,6 @@
 import { computed, effectScope, onScopeDispose, ref, toRefs, watch } from 'vue';
 import type { Ref } from 'vue';
-import { usePreferredColorScheme } from '@vueuse/core';
+import { breakpointsTailwind, useBreakpoints, usePreferredColorScheme } from '@vueuse/core';
 import { defineStore } from 'pinia';
 import { getPaletteColorByNumber } from '@sa/color';
 import { localStg } from '@/utils/storage';
@@ -19,6 +19,8 @@ import {
 export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
   const scope = effectScope();
   const osTheme = usePreferredColorScheme();
+  const breakpoints = useBreakpoints(breakpointsTailwind);
+  const isMobile = breakpoints.smaller('sm');
 
   /** Theme settings */
   const settings: Ref<App.Theme.ThemeSetting> = ref(initThemeSettings());
@@ -51,6 +53,12 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
   /** UI theme */
   const uiTheme = computed(() => getNaiveTheme(themeColors.value, settings.value.recommendColor));
 
+  /** Product layout mode */
+  const layoutMode = computed<UnionKey.ThemeLayoutMode>(() => (isMobile.value ? 'vertical' : 'horizontal-mix'));
+
+  /** Product tab visible */
+  const tabVisible = computed(() => (isMobile.value ? settings.value.tab.visible : false));
+
   /**
    * Settings json
    *
@@ -216,6 +224,8 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
     darkMode,
     themeColors,
     uiTheme,
+    layoutMode,
+    tabVisible,
     settingsJson,
     setGrayscale,
     setColourWeakness,