65 lines
2.1 KiB
JavaScript
65 lines
2.1 KiB
JavaScript
import { defineStore } from 'pinia'
|
||
import { computed, ref } from 'vue'
|
||
|
||
export const useAppStore = defineStore('app', () => {
|
||
const device = ref('')
|
||
const drawerSize = ref('')
|
||
const operateMinWith = ref('240')
|
||
// 侧栏折叠态（运行时态，不持久化），供 vertical 布局的固定侧栏与外壳共享
|
||
const sideCollapse = ref(false)
|
||
// 移动端（<640）左侧抽屉菜单开合态
|
||
const mobileMenuOpen = ref(false)
|
||
// 当前断点区间（由 useResponsive 维护）：mobile(<640) / pad(640–1024) / desktop(>=1024)
|
||
const layoutZone = ref('desktop')
|
||
// 平板区间强制「通栏侧边」收缩布局（不改用户所选布局）
|
||
const isPad = computed(() => layoutZone.value === 'pad')
|
||
// 进入平板前的侧栏折叠态快照，离开平板时据此恢复（区分「系统收缩」与「用户收缩」）
|
||
const prePadCollapse = ref(false)
|
||
|
||
const toggleMobileMenu = (v) => {
|
||
mobileMenuOpen.value = typeof v === 'boolean' ? v : !mobileMenuOpen.value
|
||
}
|
||
|
||
// 切换断点区间：进入平板时快照当前折叠态并强制收缩，离开平板时恢复进入前的折叠态，
|
||
// 从而只撤销系统自己施加的收缩，不覆盖用户在桌面手动收缩的意图。
|
||
const setLayoutZone = (zone) => {
|
||
const prev = layoutZone.value
|
||
if (zone === 'pad' && prev !== 'pad') {
|
||
prePadCollapse.value = sideCollapse.value
|
||
sideCollapse.value = true
|
||
} else if (zone !== 'pad' && prev === 'pad') {
|
||
sideCollapse.value = prePadCollapse.value
|
||
}
|
||
layoutZone.value = zone
|
||
}
|
||
|
||
const toggleDevice = (e) => {
|
||
if (e === 'mobile') {
|
||
drawerSize.value = '100%'
|
||
operateMinWith.value = '80'
|
||
} else {
|
||
drawerSize.value = '800'
|
||
operateMinWith.value = '240'
|
||
}
|
||
device.value = e
|
||
}
|
||
|
||
const toggleSideCollapse = (v) => {
|
||
sideCollapse.value = typeof v === 'boolean' ? v : !sideCollapse.value
|
||
}
|
||
|
||
return {
|
||
device,
|
||
drawerSize,
|
||
operateMinWith,
|
||
sideCollapse,
|
||
toggleSideCollapse,
|
||
mobileMenuOpen,
|
||
toggleMobileMenu,
|
||
layoutZone,
|
||
isPad,
|
||
setLayoutZone,
|
||
toggleDevice
|
||
}
|
||
})
|