| 提交 | 用户 | 时间 | ||
| 314507 | 1 | <script lang="tsx"> |
| H | 2 | import { computed, defineComponent, unref } from 'vue' |
| 3 | import { useAppStore } from '@/store/modules/app' | |
| 4 | import { Backtop } from '@/components/Backtop' | |
| 5 | import { Setting } from '@/layout/components/Setting' | |
| 6 | import { useRenderLayout } from './components/useRenderLayout' | |
| 7 | import { useDesign } from '@/hooks/web/useDesign' | |
| 8 | ||
| 9 | const { getPrefixCls } = useDesign() | |
| 10 | ||
| 11 | const prefixCls = getPrefixCls('layout') | |
| 12 | ||
| 13 | const appStore = useAppStore() | |
| 14 | ||
| 15 | // 是否是移动端 | |
| 16 | const mobile = computed(() => appStore.getMobile) | |
| 17 | ||
| 18 | // 菜单折叠 | |
| 19 | const collapse = computed(() => appStore.getCollapse) | |
| 20 | ||
| 21 | const layout = computed(() => appStore.getLayout) | |
| 22 | ||
| 23 | const handleClickOutside = () => { | |
| 24 | appStore.setCollapse(true) | |
| 25 | } | |
| 26 | ||
| 27 | const renderLayout = () => { | |
| 28 | switch (unref(layout)) { | |
| 29 | case 'classic': | |
| 30 | const { renderClassic } = useRenderLayout() | |
| 31 | return renderClassic() | |
| 32 | case 'topLeft': | |
| 33 | const { renderTopLeft } = useRenderLayout() | |
| 34 | return renderTopLeft() | |
| 35 | case 'top': | |
| 36 | const { renderTop } = useRenderLayout() | |
| 37 | return renderTop() | |
| 38 | case 'cutMenu': | |
| 39 | const { renderCutMenu } = useRenderLayout() | |
| 40 | return renderCutMenu() | |
| 41 | default: | |
| 42 | break | |
| 43 | } | |
| 44 | } | |
| 45 | ||
| 46 | export default defineComponent({ | |
| 47 | name: 'Layout', | |
| 48 | setup() { | |
| 49 | return () => ( | |
| 50 | <section class={[prefixCls, `${prefixCls}__${layout.value}`, 'w-[100%] h-[100%] relative']}> | |
| 51 | {mobile.value && !collapse.value ? ( | |
| 52 | <div | |
| 53 | class="absolute left-0 top-0 z-99 h-full w-full bg-[var(--el-color-black)] opacity-30" | |
| 54 | onClick={handleClickOutside} | |
| 55 | ></div> | |
| 56 | ) : undefined} | |
| 57 | ||
| 58 | {renderLayout()} | |
| 59 | ||
| 60 | <Backtop></Backtop> | |
| 61 | ||
| 62 | <Setting></Setting> | |
| 63 | </section> | |
| 64 | ) | |
| 65 | } | |
| 66 | }) | |
| 67 | </script> | |
| 68 | ||
| 69 | <style lang="scss" scoped> | |
| 70 | $prefix-cls: #{$namespace}-layout; | |
| 71 | ||
| 72 | .#{$prefix-cls} { | |
| 73 | background-color: var(--app-content-bg-color); | |
| 74 | :deep(.#{$elNamespace}-scrollbar__view) { | |
| 75 | height: 99% !important; | |
| 76 | } | |
| 77 | } | |
| 78 | </style> | |
