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 showSider = computed(() => {
  return !route.meta?.hideSidebar;
});
const isHomeRoute = computed(() => {
  return route.name === 'Home';
});

const layoutPageClass = computed(() => {
  if (isHomeRoute.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" class="!min-h-initial">
          <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: 1000;
    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>