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

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,