marking-cet-web/src/layout/main/MenuItem.vue

<template>
  <el-menu-item
    v-if="!hasChildren"
    :index="menuInfo.index"
    popper-class="main-layout-submenu-popper"
    class="main-layout-sub-menu"
    :class="{ 'is-collapse': mainLayoutStore.collapse, 'active-index': currentIndex === menuInfo.index }"
    @click="$emit('handle')"
  >
    <div class="flex items-center flex-1 menu-padding-left main-layout-sub-menu-title">
      <component
        :is="menuInfo.path ? 'router-link' : 'div'"
        :to="menuInfo.path"
        class="flex items-center flex-1 menu-item"
      >
        <span class="icon">
          <svg-icon v-if="menuInfo.icon" :name="menuInfo.icon" />
        </span>
        <span v-if="!mainLayoutStore.collapse" class="menu-label">{{ menuInfo.label }}</span>
      </component>
    </div>
  </el-menu-item>
  <el-sub-menu
    v-else
    :index="menuInfo.index"
    popper-class="main-layout-submenu-popper"
    class="main-layout-sub-menu"
    :class="{ 'is-collapse': mainLayoutStore.collapse, 'active-index': currentIndex?.startsWith(menu.index) }"
  >
    <template #title>
      <div class="flex items-center flex-1 main-layout-sub-menu-title" :class="{ 'menu-padding-left': hasChildren }">
        <component
          :is="menuInfo.path ? 'router-link' : 'div'"
          :to="menuInfo.path"
          class="flex items-center flex-1 menu-item"
        >
          <span class="icon"><svg-icon v-if="menuInfo.icon" :name="menuInfo.icon" /></span>
          <span v-if="!mainLayoutStore.collapse" class="menu-label">{{ menuInfo.label }}</span>
        </component>
      </div>
    </template>
    <template v-for="child in menuInfo.children" :key="child.key">
      <el-menu-item
        v-if="!child.children?.length"
        :index="child.index"
        class="main-layout-menu-item"
        :class="{ 'active-index': currentIndex === child.index }"
      >
        <component :is="child.path ? 'router-link' : 'div'" :to="child.path" class="flex items-center flex-1 menu-item">
          <span class="menu-label">{{ child.label }}</span>
        </component>
      </el-menu-item>
      <main-layout-menu-item v-else :menu="child"></main-layout-menu-item>
    </template>
  </el-sub-menu>
</template>

<script setup lang="ts" name="MainLayoutMenuItem">
import SvgIcon from '@/components/common/SvgIcon.vue'
import useMainLayoutStore from '@/store/layout'
import { computed } from 'vue'
import { ElSubMenu, ElMenuItem } from 'element-plus'
const mainLayoutStore = useMainLayoutStore()
const props = defineProps<{
  currentIndex?: string
  menu: ExtractArrayValue<typeof mainLayoutStore.menuList>
}>()

const menuInfo = computed(() => {
  return { ...props.menu, children: props.menu.children || [] }
})

const hasChildren = computed(() => !!menuInfo.value.children.length)
</script>

<style scoped lang="scss">
.main-layout-sub-menu,
.main-layout-submenu-popper {
  ::v-deep(.el-sub-menu__icon-arrow) {
    display: none;
  }
  ::v-deep(.el-sub-menu__title) {
    margin-bottom: $SmallGapSpace;
  }
  &.main-layout-sub-menu {
    margin-bottom: $ExtraSmallGapSpace;
  }
  .menu-padding-left {
    padding-left: $ExtraBaseGapSpace;
  }
  .main-layout-sub-menu-title {
    // color: $LayoutLeftSubMenuColor;
    color: #fff;
    .menu-label {
      margin-left: $ExtraSmallGapSpace;
    }
    * {
      vertical-align: middle;
    }
  }
  .main-layout-menu-item {
    color: $LayoutLeftMenuItemColor;
    margin-bottom: $ExtraMiniGapSpace;
    &:hover {
      color: $LayoutLeftMenuItemHoverColor;
    }
    &.active-index {
      color: $LayoutLeftMenuItemActiveColor;
    }
  }

  .menu-item {
    color: inherit;
  }

  &.is-collapse {
    > .main-layout-sub-menu-title,
    > .el-sub-menu__title > .main-layout-sub-menu-title {
      padding: 0;
      text-align: center;
    }
  }
  &.active-index {
    > .main-layout-sub-menu-title,
    > .el-sub-menu__title > .main-layout-sub-menu-title {
      color: $color--primary;
    }
  }

  &:not(.is-collapse) {
    // &.is-opened,
    &.active-index {
      > .main-layout-sub-menu-title,
      > .el-sub-menu__title > .main-layout-sub-menu-title {
        background: $color--primary;
        border-radius: $LayoutLeftMenuRadius;
        color: $color--white;
      }
    }
  }
}
</style>