opt: 优化下页面布局逻辑,优化小屏展示

This commit is contained in:
gary.fu
2026-09-03 11:47:27 +08:00
parent 7762594f46
commit 975b6f08a0

View File

@@ -1,4 +1,4 @@
import { ref } from 'vue' import { ref, watch } from 'vue'
import { defineStore } from 'pinia' import { defineStore } from 'pinia'
import { useDark, useMediaQuery } from '@vueuse/core' import { useDark, useMediaQuery } from '@vueuse/core'
import { GlobalLayoutMode, GlobalLocales, LoadSaveParamMode } from '@/consts/GlobalConstants' import { GlobalLayoutMode, GlobalLocales, LoadSaveParamMode } from '@/consts/GlobalConstants'
@@ -14,13 +14,19 @@ export const useGlobalConfigStore = defineStore('globalConfig', () => {
storageKey: `__${systemKey}__vueuse-color-scheme` storageKey: `__${systemKey}__vueuse-color-scheme`
}) })
: ref(false) : ref(false)
const isCollapseLeft = ref(false) const isSmallScreen = useMediaQuery('(max-width: 1200px)')
const isCollapseLeft = ref(isSmallScreen.value && AUTO_LAYOUT_ENABLED)
const isShowSettings = ref(false) const isShowSettings = ref(false)
const isShowBreadcrumb = ref(true) const isShowBreadcrumb = ref(true)
const showMenuIcon = ref(true) const showMenuIcon = ref(true)
const isLargeScreen = useMediaQuery('(min-width: 1440px)') const layoutMode = ref(GlobalLayoutMode.LEFT)
const layoutMode = !isLargeScreen.value && AUTO_LAYOUT_ENABLED ? ref(GlobalLayoutMode.TOP) : ref(GlobalLayoutMode.LEFT)
const loadSaveParamMode = ref(LoadSaveParamMode.BACK) const loadSaveParamMode = ref(LoadSaveParamMode.BACK)
if (AUTO_LAYOUT_ENABLED) {
watch(isSmallScreen, (small) => {
isCollapseLeft.value = small
})
}
return { return {
currentLocale, currentLocale,
isDarkTheme, isDarkTheme,