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 = `72px`;
const navbar = computed(() => appStore.navbar);
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` } : {};
  const paddingTop = navbar.value ? { paddingTop: navbarHeight } : {};
  return { ...paddingLeft, ...paddingTop };
});

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', { mobile: appStore.hideMenu }]">
    <JoinModal v-model:visible="joinEnterpriseVisible" ref="joinModalRef" />
    <div v-if="navbar" class="layout-navbar">
      <base-navbar />
    </div>
    <a-layout>
      <a-layout>
        <a-layout-sider
          v-if="renderMenu && showSidebar"
          v-show="!hideMenu"
          class="layout-sider"
          breakpoint="xl"
          :collapsed="collapsed"
          :width="menuWidth"
          :style="{ paddingTop: navbar ? '72px' : '' }"
          collapsible
          hide-trigger
          @collapse="setCollapsed"
        >
          <div class="menu-wrapper">
            <base-menu />
          </div>
        </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="layout-content" :style="paddingStyle">
          <base-tab-bar v-if="appStore.tabBar" />
          <a-layout-content class="px-5 py-5">
            <base-breadcrumb />
            <layout-page />
          </a-layout-content>
        </a-layout>
      </a-layout>
    </a-layout>
  </a-layout>
</template>

<style scoped lang="scss">
$nav-size-height: 72px;
$layout-max-width: 1100px;

.layout {
  width: 100%;
  height: 100%;
}
.layout-navbar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: $nav-size-height;
}
.layout-sider {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  height: 100%;
  transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);

  &::after {
    position: absolute;
    top: 0;
    right: -1px;
    display: block;
    width: 1px;
    height: 100%;
    background-color: var(--color-border);
    content: '';
  }
  > :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 {
  min-width: 1366px;
  min-height: 100vh;
  overflow-y: hidden;
  background-color: var(--color-fill-2);
  transition: padding 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
}
</style>