146 lines
3.7 KiB
Vue
146 lines
3.7 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 isHomeRoute = computed(() => {
|
|
return route.name === 'Home';
|
|
});
|
|
const showInOnePage = computed(() => {
|
|
return isHomeRoute.value;
|
|
});
|
|
|
|
const layoutPageClass = computed(() => {
|
|
let result = showInOnePage.value ? 'overflow-hidden' : '';
|
|
if (isHomeRoute.value) {
|
|
result += ' pb-8px pr-8px';
|
|
} else {
|
|
result += ' pb-24px pr-24px';
|
|
}
|
|
return result;
|
|
});
|
|
|
|
onMounted(() => {
|
|
checkHasInviteCode();
|
|
});
|
|
|
|
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 app-content-layout">
|
|
<div class="flex flex-1 app-content-scroll">
|
|
<div class="app-content-inner">
|
|
<SiderBar />
|
|
<Layout
|
|
class="layout-content"
|
|
:style="{
|
|
width: `calc(100vw - ${sidebarStore.sidebarWidth}px)`,
|
|
}"
|
|
>
|
|
<Layout.Content :class="layoutPageClass" class="!min-h-initial w-full">
|
|
<layout-page />
|
|
</Layout.Content>
|
|
</Layout>
|
|
</div>
|
|
</div>
|
|
</Layout>
|
|
</Layout>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.layout-wrap {
|
|
font-family: inherit;
|
|
background: transparent;
|
|
min-width: $layout-min-width;
|
|
.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: 1000;
|
|
width: 100%;
|
|
min-width: $layout-min-width;
|
|
}
|
|
.app-content-layout {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: transparent;
|
|
min-height: calc(100vh - $navbar-height);
|
|
.app-content-scroll {
|
|
min-height: calc(100vh - $navbar-height);
|
|
height: calc(100vh - $navbar-height);
|
|
overflow-y: auto;
|
|
overflow-x: auto;
|
|
.app-content-inner {
|
|
width: 100%;
|
|
height: calc(100vh - $navbar-height);
|
|
overflow: hidden;
|
|
display: flex;
|
|
}
|
|
}
|
|
: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 {
|
|
background: transparent;
|
|
transition: padding 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
|
|
flex: 1;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
}
|
|
}
|
|
</style>
|