Merge branch 'develop'

src/components/core/layouts/art-layouts/index.vue

@@ -0,0 +1,60 @@
+<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>