141 lines
3.4 KiB
Vue
141 lines
3.4 KiB
Vue
<script setup>
|
|
import { Layout } from 'ant-design-vue';
|
|
import Navbar from './components/navbar';
|
|
import SiderBar from './components/siderBar';
|
|
|
|
import { useAppStore } from '@/stores';
|
|
import { useSidebarStore } from '@/stores/modules/side-bar';
|
|
import { useResponsive } from '@/hooks';
|
|
import JoinModal from '@/components/join-modal.vue';
|
|
import { getQueryParam } from '@/utils/helper';
|
|
import { useUserStore } from '@/stores';
|
|
|
|
import { ref, onMounted, computed } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
|
|
const joinEnterpriseVisible = ref(false);
|
|
const joinModalRef = ref(null);
|
|
const appStore = useAppStore();
|
|
const sidebarStore = useSidebarStore();
|
|
const userStore = useUserStore();
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
|
|
useResponsive(true);
|
|
|
|
const showSider = computed(() => {
|
|
return !route.meta?.hideSidebar;
|
|
});
|
|
|
|
const layoutPageClass = computed(() => {
|
|
if (!showSider.value) {
|
|
return 'pb-8px pr-8px';
|
|
}
|
|
return 'pb-24px pr-24px';
|
|
});
|
|
|
|
const siderWidth = computed(() => {
|
|
return showSider.value ? sidebarStore.sidebarWidth : 0;
|
|
});
|
|
|
|
const collapsed = computed(() => {
|
|
return sidebarStore.menuCollapse;
|
|
});
|
|
|
|
onMounted(() => {
|
|
checkHasInviteCode();
|
|
});
|
|
const setCollapsed = (val) => {
|
|
appStore.updateSettings({ menuCollapse: val });
|
|
};
|
|
|
|
const checkHasInviteCode = () => {
|
|
const inviteCode = getQueryParam('invite_code');
|
|
if (userStore.isLogin && inviteCode) {
|
|
joinEnterpriseVisible.value = true;
|
|
joinModalRef.value?.getEnterprise?.();
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<Layout :class="['layout-wrap', { mobile: appStore.hideMenu }]" class="h-full flex flex-col w-full">
|
|
<JoinModal v-model:visible="joinEnterpriseVisible" ref="joinModalRef" />
|
|
<Layout.Header class="layout-header-wrap">
|
|
<Navbar />
|
|
</Layout.Header>
|
|
<Layout class="flex layout-content-wrap">
|
|
<Layout.Sider
|
|
v-if="showSider"
|
|
v-model="collapsed"
|
|
:width="siderWidth"
|
|
collapsible
|
|
trigger
|
|
@collapse="setCollapsed"
|
|
class="layout-sider"
|
|
>
|
|
<SiderBar />
|
|
</Layout.Sider>
|
|
<Layout
|
|
class="layout-content"
|
|
:style="{
|
|
paddingLeft: `${siderWidth}px`,
|
|
}"
|
|
>
|
|
<Layout.Content :class="layoutPageClass">
|
|
<layout-page />
|
|
</Layout.Content>
|
|
</Layout>
|
|
</Layout>
|
|
</Layout>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.layout-wrap {
|
|
font-family: inherit;
|
|
background: transparent;
|
|
min-width: 1200px;
|
|
.layout-header-wrap {
|
|
background: transparent;
|
|
height: $navbar-height;
|
|
line-height: $navbar-height;
|
|
padding-inline: inherit;
|
|
color: inherit;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 999;
|
|
width: 100%;
|
|
}
|
|
.layout-content-wrap {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: transparent;
|
|
min-height: calc(100vh - $navbar-height);
|
|
:deep(.ant-layout-sider) {
|
|
background: none;
|
|
box-shadow: none;
|
|
padding-top: $navbar-height;
|
|
padding-bottom: 0;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 999;
|
|
height: 100%;
|
|
transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
|
|
.ant-layout-sider-trigger {
|
|
display: none;
|
|
}
|
|
.ant-layout-sider-children {
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
.layout-content {
|
|
padding-top: $navbar-height;
|
|
background: transparent;
|
|
transition: padding 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
|
|
}
|
|
}
|
|
}
|
|
</style>
|