| 提交 | 用户 | age | ||
| 27e50b | 1 | <template> |
| d5b768 | 2 | <Layout :class="prefixCls" v-bind="lockEvents"> |
| 27e50b | 3 | <LayoutFeatures /> |
| c774a6 | 4 | <LayoutHeader fixed v-if="getShowFullHeaderRef" /> |
| 905e5b | 5 | <Layout :class="[layoutClass]"> |
| c774a6 | 6 | <LayoutSideBar v-if="getShowSidebar || getIsMobile" /> |
| a89eee | 7 | <Layout :class="`${prefixCls}-main`"> |
| 27e50b | 8 | <LayoutMultipleHeader /> |
| V | 9 | <LayoutContent /> |
| 10 | <LayoutFooter /> | |
| 11 | </Layout> | |
| 12 | </Layout> | |
| 13 | </Layout> | |
| 14 | </template> | |
| 15 | ||
| 16 | <script lang="ts"> | |
| a89eee | 17 | import { defineComponent, computed, unref } from 'vue'; |
| 27e50b | 18 | import { Layout } from 'ant-design-vue'; |
| V | 19 | import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; |
| 20 | ||
| a65ad9 | 21 | import LayoutHeader from './header/index.vue'; |
| 27e50b | 22 | import LayoutContent from './content/index.vue'; |
| c774a6 | 23 | import LayoutSideBar from './sider/index.vue'; |
| V | 24 | import LayoutMultipleHeader from './header/MultipleHeader.vue'; |
| 27e50b | 25 | |
| V | 26 | import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting'; |
| 27 | import { useMenuSetting } from '/@/hooks/setting/useMenuSetting'; | |
| 28 | import { useDesign } from '/@/hooks/web/useDesign'; | |
| d5b768 | 29 | import { useLockPage } from '/@/hooks/web/useLockPage'; |
| 27e50b | 30 | |
| c774a6 | 31 | import { useAppInject } from '/@/hooks/web/useAppInject'; |
| 27e50b | 32 | |
| V | 33 | export default defineComponent({ |
| 34 | name: 'DefaultLayout', | |
| 35 | components: { | |
| 36 | LayoutFeatures: createAsyncComponent(() => import('/@/layouts/default/feature/index.vue')), | |
| 37 | LayoutFooter: createAsyncComponent(() => import('/@/layouts/default/footer/index.vue')), | |
| 38 | LayoutHeader, | |
| 39 | LayoutContent, | |
| 40 | LayoutSideBar, | |
| 41 | LayoutMultipleHeader, | |
| 42 | Layout, | |
| 43 | }, | |
| 44 | setup() { | |
| a65ad9 | 45 | const { prefixCls } = useDesign('default-layout'); |
| c774a6 | 46 | const { getIsMobile } = useAppInject(); |
| 27e50b | 47 | const { getShowFullHeaderRef } = useHeaderSetting(); |
| 905e5b | 48 | const { getShowSidebar, getIsMixSidebar, getIsSidebarType } = useMenuSetting(); |
| d5b768 | 49 | |
| V | 50 | // Create a lock screen monitor |
| 51 | const lockEvents = useLockPage(); | |
| 52 | ||
| 905e5b | 53 | const layoutClass = computed(() => { |
| V | 54 | let cls: string[] = ['ant-layout']; |
| 55 | if (unref(getIsMixSidebar) || unref(getIsSidebarType)) { | |
| 56 | cls.push('ant-layout-has-sider'); | |
| 57 | } | |
| 58 | return cls; | |
| 59 | }); | |
| a89eee | 60 | |
| 27e50b | 61 | return { |
| V | 62 | getShowFullHeaderRef, |
| 63 | getShowSidebar, | |
| 64 | prefixCls, | |
| c774a6 | 65 | getIsMobile, |
| e6db0d | 66 | getIsMixSidebar, |
| a89eee | 67 | layoutClass, |
| d5b768 | 68 | lockEvents, |
| 27e50b | 69 | }; |
| V | 70 | }, |
| 71 | }); | |
| 72 | </script> | |
| 73 | <style lang="less"> | |
| 74 | @prefix-cls: ~'@{namespace}-default-layout'; | |
| 75 | ||
| 76 | .@{prefix-cls} { | |
| 77 | display: flex; | |
| 78 | width: 100%; | |
| 79 | min-height: 100%; | |
| 2cdf2c | 80 | background-color: @content-bg; |
| 27e50b | 81 | flex-direction: column; |
| V | 82 | |
| 83 | > .ant-layout { | |
| 84 | min-height: 100%; | |
| 85 | } | |
| a1c3c5 | 86 | |
| a89eee | 87 | &-main { |
| 905e5b | 88 | width: 100%; |
| a1c3c5 | 89 | margin-left: 1px; |
| V | 90 | } |
| 27e50b | 91 | } |
| V | 92 | </style> |
