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

<script setup>
import { Layout } from 'ant-design-vue';

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();

const Sider = Layout.Sider;
const Content = Layout.Content;

useResponsive(true);
const navbarHeight = `52px`;
// const renderMenu = computed(() => appStore.menu && !appStore.topMenu);
// const hideMenu = computed(() => appStore.hideMenu);
const showSider = computed(() => {
  // 框架模版自带判断逻辑
  return appStore.menu && !appStore.topMenu && !appStore.hideMenu && !route.meta?.hideSidebar;
});

const menuWidth = computed(() => {
  return appStore.menuCollapse ? 48 : appStore.menuWidth;
});
const collapsed = computed(() => {
  return appStore.menuCollapse;
});
// const showSidebar = computed(() => {
//   return !(route.meta && route.meta.hideSidebar);
// });

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" />
    <section class="layout-navbar-wrap">
      <base-navbar />
    </section>
    <Layout class="flex layout-content-wrap">
      <Sider
        v-if="showSider"
        class="layout-sider"
        v-model="collapsed"
        :width="menuWidth"
        collapsible
        trigger
        @collapse="setCollapsed"
      >
        <section class="menu-wrapper">
          <base-menu />
        </section>
      </Sider>
      <Layout class="flex-1 layout-content">
        <div class="px-24px py-16px">
          <layout-page />
        </div>
      </Layout>
    </Layout>
  </Layout>
</template>

<style scoped lang="scss">
.layout-wrap {
  font-family: inherit;
  background: transparent;
  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%;
    background: transparent;
    min-height: calc(100vh - $navbar-height);
    :deep(.ant-layout-sider) {
      background: none;
      box-shadow: none;
      padding-bottom: 0;
      .ant-layout-sider-trigger {
        display: none;
      }
      .ant-layout-sider-children {
        overflow: hidden;
      }
      .arco-menu-inner {
        overflow: hidden;
        padding: 16px !important;
      }
      .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;
      background: transparent;
      transition: padding 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
    }
  }
}
</style>