Blame view

src/layouts/default/index.vue 2.58 KB
vben authored
1
<template>
2
  <Layout :class="prefixCls" v-bind="lockEvents">
vben authored
3
    <LayoutFeatures />
4
    <LayoutHeader fixed v-if="getShowFullHeaderRef" />
5
    <Layout :class="[layoutClass]">
6
      <LayoutSideBar v-if="getShowSidebar || getIsMobile" />
7
      <Layout :class="`${prefixCls}-main`">
vben authored
8
9
10
11
12
13
14
15
16
        <LayoutMultipleHeader />
        <LayoutContent />
        <LayoutFooter />
      </Layout>
    </Layout>
  </Layout>
</template>

<script lang="ts">
17
  import { defineComponent, computed, unref } from 'vue';
vben authored
18
19
20
  import { Layout } from 'ant-design-vue';
  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
vben authored
21
  import LayoutHeader from './header/index.vue';
vben authored
22
  import LayoutContent from './content/index.vue';
23
24
  import LayoutSideBar from './sider/index.vue';
  import LayoutMultipleHeader from './header/MultipleHeader.vue';
vben authored
25
26
27
28

  import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
  import { useDesign } from '/@/hooks/web/useDesign';
29
  import { useLockPage } from '/@/hooks/web/useLockPage';
vben authored
30
31
  import { useAppInject } from '/@/hooks/web/useAppInject';
vben authored
32
33
34
35
36
37
38
39
40
41
42
43
44

  export default defineComponent({
    name: 'DefaultLayout',
    components: {
      LayoutFeatures: createAsyncComponent(() => import('/@/layouts/default/feature/index.vue')),
      LayoutFooter: createAsyncComponent(() => import('/@/layouts/default/footer/index.vue')),
      LayoutHeader,
      LayoutContent,
      LayoutSideBar,
      LayoutMultipleHeader,
      Layout,
    },
    setup() {
vben authored
45
      const { prefixCls } = useDesign('default-layout');
46
      const { getIsMobile } = useAppInject();
vben authored
47
      const { getShowFullHeaderRef } = useHeaderSetting();
vben authored
48
      const { getShowSidebar, getIsMixSidebar, getShowMenu } = useMenuSetting();
49
50
51
52

      // Create a lock screen monitor
      const lockEvents = useLockPage();
53
54
      const layoutClass = computed(() => {
        let cls: string[] = ['ant-layout'];
vben authored
55
        if (unref(getIsMixSidebar) || unref(getShowMenu)) {
56
57
58
59
          cls.push('ant-layout-has-sider');
        }
        return cls;
      });
60
vben authored
61
62
63
64
      return {
        getShowFullHeaderRef,
        getShowSidebar,
        prefixCls,
65
        getIsMobile,
66
        getIsMixSidebar,
67
        layoutClass,
68
        lockEvents,
vben authored
69
70
71
72
73
74
75
76
77
78
79
      };
    },
  });
</script>
<style lang="less">
  @prefix-cls: ~'@{namespace}-default-layout';

  .@{prefix-cls} {
    display: flex;
    width: 100%;
    min-height: 100%;
80
    background-color: @content-bg;
vben authored
81
82
83
84
85
    flex-direction: column;

    > .ant-layout {
      min-height: 100%;
    }
vben authored
86
87
    &-main {
88
      width: 100%;
vben authored
89
90
      margin-left: 1px;
    }
vben authored
91
92
  }
</style>