lingji-work-fe/src/layouts/Basic.vue

<script setup>
import { useAppStore } from '@/stores';
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 userStore = useUserStore();
const router = useRouter();
const route = useRoute();

useResponsive(true);
const navbarHeight = `52px`;
const renderMenu = computed(() => appStore.menu && !appStore.topMenu);
const hideMenu = computed(() => appStore.hideMenu);

const menuWidth = computed(() => {
  return appStore.menuCollapse ? 48 : appStore.menuWidth;
});
const collapsed = computed(() => {
  return appStore.menuCollapse;
});
const showSidebar = computed(() => {
  return !(route.meta && route.meta.hideSidebar);
});
const paddingStyle = computed(() => {
  const paddingLeft =
    showSidebar.value && renderMenu.value && !hideMenu.value ? { paddingLeft: `${menuWidth.value}px` } : {};
  return { ...paddingLeft };
});

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?.();
  }
};
const drawerVisible = ref(false);
const drawerCancel = () => {
  drawerVisible.value = false;
};
provide('toggleDrawerMenu', () => {
  drawerVisible.value = !drawerVisible.value;
});
</script>

<template>
  <a-layout :class="['layout-wrap', { mobile: appStore.hideMenu }]" class="h-full flex flex-col w-full">
    <JoinModal v-model:visible="joinEnterpriseVisible" ref="joinModalRef" />
    <section class="layout-navbar-wrap">
      <base-navbar />
    </section>
    <a-layout class="flex layout-content-wrap">
      <a-layout-sider
        v-if="renderMenu && showSidebar"
        v-show="!hideMenu"
        class="layout-sider"
        breakpoint="xl"
        :collapsed="collapsed"
        :width="menuWidth"
        collapsible
        hide-trigger
        @collapse="setCollapsed"
      >
        <section class="menu-wrapper">
          <base-menu />
        </section>
      </a-layout-sider>
      <a-drawer
        v-if="hideMenu"
        :visible="drawerVisible"
        placement="left"
        :footer="false"
        mask-closable
        :closable="false"
        @cancel="drawerCancel"
      >
        <base-menu />
      </a-drawer>
      <a-layout class="flex-1 layout-content">
        <a-layout-content class="px-24px py-16px">
          <layout-page />
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>
</template>

<style scoped lang="scss">
.layout-wrap {
  min-width: 1200px;
  .layout-navbar-wrap {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: $navbar-height;
  }
  .layout-content-wrap {
    height: 100%;
    min-height: calc(100vh - $navbar-height);
    .layout-sider {
      position: sticky;
      top: $navbar-height;
      left: 0;
      // height: 100%;
      height: calc(100vh - $navbar-height);
      transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
      background: none;
      box-shadow: none;
      > :deep(.arco-layout-sider-children) {
        overflow-y: hidden;
      }
      .menu-wrapper {
        height: 100%;
        overflow: auto;
        overflow-x: hidden;
        :deep(.arco-menu) {
          ::-webkit-scrollbar {
            width: 12px;
            height: 4px;
          }
          ::-webkit-scrollbar-thumb {
            border: 4px solid transparent;
            background-clip: padding-box;
            border-radius: 7px;
            background-color: var(--color-text-4);
          }
          ::-webkit-scrollbar-thumb:hover {
            background-color: var(--color-text-3);
          }
        }
      }
    }
    .layout-content {
      height: 100%;
      overflow-y: scroll;
      overflow-x: auto;
      transition: padding 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
    }
  }
}
</style>