61 lines
1.7 KiB
Vue
61 lines
1.7 KiB
Vue
|
<template>
|
||
|
|
<div class="layouts" :style="layoutStyle">
|
||
|
|
<slot></slot>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import '@/assets/styles/transition.scss'
|
||
|
|
import { MenuWidth, MenuTypeEnum } from '@/enums/appEnum'
|
||
|
|
|
||
|
|
import { useMenuStore } from '@/store/modules/menu'
|
||
|
|
import { useSettingStore } from '@/store/modules/setting'
|
||
|
|
import { getTabConfig } from '@/utils/ui'
|
||
|
|
import { useRouter } from 'vue-router'
|
||
|
|
|
||
|
|
const settingStore = useSettingStore()
|
||
|
|
const menuStore = useMenuStore()
|
||
|
|
const router = useRouter()
|
||
|
|
|
||
|
|
const { menuType, menuOpen, showWorkTab, tabStyle } = storeToRefs(settingStore)
|
||
|
|
|
||
|
|
// 菜单宽度变化
|
||
|
|
watchEffect(() => {
|
||
|
|
const isOpen = menuOpen.value
|
||
|
|
const width = isOpen ? settingStore.getMenuOpenWidth : MenuWidth.CLOSE
|
||
|
|
menuStore.setMenuWidth(width)
|
||
|
|
})
|
||
|
|
|
||
|
|
// 布局样式
|
||
|
|
const layoutStyle = computed(() => ({
|
||
|
|
paddingLeft: paddingLeft.value,
|
||
|
|
paddingTop: paddingTop.value
|
||
|
|
}))
|
||
|
|
|
||
|
|
// 左侧距离
|
||
|
|
const paddingLeft = computed(() => {
|
||
|
|
const { meta } = router.currentRoute.value
|
||
|
|
const isFirstLevel = meta.isFirstLevel
|
||
|
|
const type = menuType.value
|
||
|
|
const isOpen = menuOpen.value
|
||
|
|
const width = isOpen ? settingStore.getMenuOpenWidth : MenuWidth.CLOSE
|
||
|
|
|
||
|
|
switch (type) {
|
||
|
|
case MenuTypeEnum.DUAL_MENU:
|
||
|
|
return isFirstLevel ? '80px' : `calc(${width} + 80px)`
|
||
|
|
case MenuTypeEnum.TOP_LEFT:
|
||
|
|
return isFirstLevel ? 0 : width
|
||
|
|
case MenuTypeEnum.TOP:
|
||
|
|
return 0
|
||
|
|
default:
|
||
|
|
return width
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
// 顶部距离
|
||
|
|
const paddingTop = computed(() => {
|
||
|
|
const { openTop, closeTop } = getTabConfig(tabStyle.value)
|
||
|
|
return `${showWorkTab.value ? openTop : closeTop}px`
|
||
|
|
})
|
||
|
|
</script>
|