mirror of
https://github.com/fugary/simple-element-plus-template.git
synced 2026-09-11 09:23:53 +00:00
opt: 优化下页面布局逻辑,优化小屏展示
This commit is contained in:
@@ -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,
|
||||||
|
|||||||
Reference in New Issue
Block a user