lingji-work-fe/src/layouts/Basic.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>