Industrial-image-management-system---web/src/layout/components/Asider/index.vue

<template>
  <div
    v-if="isDesktop" class="asider" :class="{ 'app-menu-dark': appStore.menuDark }"
    :style="appStore.menuDark ? appStore.themeCSSVar : undefined"
  >
    <a-layout-sider
      class="menu" collapsible breakpoint="xl" hide-trigger :width="300"
      :collapsed="appStore.menuCollapse" @collapse="handleCollapse"
    >
      <Logo :collapsed="appStore.menuCollapse"></Logo>
      <a-scrollbar outer-class="menu-scroll-view" style="height: 100%; overflow: auto" :hide-bar="false">
        <Menu></Menu>
      </a-scrollbar>
      <!-- <WwAds class="ads" /> -->
    </a-layout-sider>
  </div>
</template>

<script setup lang="ts">
import Menu from '../Menu/index.vue'
import Logo from '../Logo.vue'
import WwAds from '../WwAds.vue'
import { useAppStore } from '@/stores'
import { useDevice } from '@/hooks'

defineOptions({ name: 'Asider' })
const appStore = useAppStore()
const { isDesktop } = useDevice()

const handleCollapse = (isCollapsed: boolean) => {
  appStore.menuCollapse = isCollapsed
}
</script>

<style scoped lang="scss">
:deep(.arco-menu.arco-menu-vertical.arco-menu-collapsed) {

  // Menu菜单组件修改
  .arco-menu-icon {
    margin-right: 0;
    padding: 10px 0;
  }

  .arco-menu-has-icon {
    padding: 0;
    justify-content: center;
  }

  .arco-menu-title {
    display: none;
  }
}

:deep(.arco-layout-sider-children) {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.asider {
  z-index: 1000;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--color-border-2);
  box-sizing: border-box;
  color: var(--color-text-1);
  background-color: var(--color-bg-1);

  .menu-scroll-view {
    flex: 1;
    overflow: auto;
  }

  .menu {
    flex: 1;
    overflow: auto;
    background-color: inherit;
  }
}

:deep(.arco-scrollbar) {
  overflow-x: hidden;
  overflow-y: auto;
}

:deep(.arco-scrollbar-container) {
  overflow-x: hidden !important;
}
</style>