xs-admin/src/components/NavMenuItem.vue

<template>
  <li v-if="hasPermission">
    <div v-if="item.items && visibleSubItems.length > 0"
      class="nav-menu-item rounded-lg cursor-pointer flex items-center justify-between" @click="toggleSubmenu">
      <div class="flex items-center">
        <i :class="item.icon"></i>
        <span class="ml-2">{{ item.label }}</span>
      </div>
      <i :class="submenuIcon" class="transition-transform duration-200"></i>
    </div>

    <router-link v-else-if="!item.items" :to="{ name: item.name }"
      class="nav-menu-item rounded-lg cursor-pointer flex items-center" :class="{ active: isActive }">
      <i :class="item.icon"></i>
      <span class="ml-2">{{ item.label }}</span>
    </router-link>

    <transition name="submenu" appear>
      <ul v-if="item.items && isSubmenuOpen && visibleSubItems.length > 0" class="submenu">
        <NavMenuItem v-for="(subItem, subIndex) in visibleSubItems" :key="subIndex" :item="subItem" />
      </ul>
    </transition>
  </li>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useRoute } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { hasMenuPermission } from '@/utils/permission'

const route = useRoute()
const userStore = useUserStore()

const props = defineProps({
  item: {
    type: Object,
    required: true
  }
})

const isSubmenuOpen = ref(false)

const isActive = computed(() => {
  return route.name === props.item.name
})

const submenuIcon = computed(() => {
  return isSubmenuOpen.value ? 'pi pi-chevron-down' : 'pi pi-chevron-right'
})

const toggleSubmenu = () => {
  isSubmenuOpen.value = !isSubmenuOpen.value
}

// 检查当前用户是否有权限查看此菜单项
const hasPermission = computed(() => {
  const userRole = userStore.userInfo?.role
  return hasMenuPermission(props.item, userRole)
})

// 过滤子菜单项，只显示当前用户有权限的项
const visibleSubItems = computed(() => {
  if (!props.item.items) return []

  const userRole = userStore.userInfo?.role
  if (!userRole) return []

  return props.item.items.filter(subItem => hasMenuPermission(subItem, userRole))
})
</script>

<style scoped>
.nav-menu-item {
  padding: 0.5rem 1rem;
  cursor: pointer;
  margin: 0.25rem 1rem;
  transition:
    background-color 0.3s,
    color 0.3s;

  &:hover {
    background-color: var(--p-surface-100);
  }

  &.active {
    color: var(--p-primary-500);
    font-weight: bold;
  }
}

.submenu {
  margin-left: 1rem;
  padding-left: 0.5rem;
  border-left: 2px solid var(--p-surface-200);
}

.submenu .nav-menu-item {
  margin: 0.125rem 0.5rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
}

.submenu-enter-active,
.submenu-leave-active {
  transition: all 0.3s ease;
  overflow: hidden;
}

.submenu-enter-from {
  opacity: 0;
  transform: translateY(-10px);
  max-height: 0;
}

.submenu-enter-to {
  opacity: 1;
  transform: translateY(0);
  max-height: 200px;
}

.submenu-leave-from {
  opacity: 1;
  transform: translateY(0);
  max-height: 200px;
}

.submenu-leave-to {
  opacity: 0;
  transform: translateY(-10px);
  max-height: 0;
}
</style>