soilgd12/src/components/layout/AppAside.vue

<template>
  <el-scrollbar v-if="showTabs && activeTab !== 'selectCityAndCounty'">
    <el-menu
      :collapse="isCollapse"
      router
      unique-opened
      :default-active="activeMenuItem.index"
      class="professional-menu"
    >
      <template v-for="item in filteredMenuItems" :key="item.index">
        <el-sub-menu v-if="item.children" :index="item.index">
          <template #title>
            <el-icon><component :is="item.icon" /></el-icon>
            <span>{{ item.label }}</span>
          </template>
          <el-menu-item
            v-for="child in item.children"
            :key="child.index"
            :index="child.index"
            @click="handleMenuClick(child.index)"
          >
            <el-icon><component :is="child.icon" /></el-icon>
            <span>{{ child.label }}</span>
          </el-menu-item>
        </el-sub-menu>

        <el-menu-item
          v-else
          :index="item.index"
          @click="handleMenuClick(item.index)"
        >
          <el-icon><component :is="item.icon" /></el-icon>
          <span>{{ item.label }}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </el-scrollbar>
</template>

<script setup lang="ts">
import { reactive, computed, inject, toRefs, watch } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { menuItems } from './menuItems'; // 建议你将 menuItems 独立维护在该文件中

const props = defineProps({
  activeTab: {
    type: String,
    required: true,
    default: 'introduction'
  },
  showTabs: {
    type: Boolean,
    required: false,
    default: true
  }
});

const { activeTab } = toRefs(props);
const isCollapse = inject('isCollapse', false);
const userPermissions = inject('userPermissions', [] as string[]);

const router = useRouter();
const activeMenuItem = reactive({ index: '' });

const filteredMenuItems = computed(() =>
  menuItems
    .filter(item => item.tab === activeTab.value)
    .map(item => {
      if (!item.children) return item;
      return {
        ...item,
        children: item.children.filter(
          child => !child.permission || userPermissions.includes(child.permission)
        )
      };
    })
);

function handleMenuClick(index: string) {
  try {
    if (router.currentRoute.value.path !== index) {
      router.push(index);
      activeMenuItem.index = index;
    }
  } catch (error) {
    ElMessage.error('导航失败，请检查网络或联系管理员');
  }
}

watch(
  activeTab,
  newVal => {
    const current = filteredMenuItems.value?.[0];
    activeMenuItem.index = current?.children?.[0]?.index || current?.index || '';
  },
  { immediate: true }
);
</script>

<style scoped>
.professional-menu .el-menu {
  background-color: #f4f6f9;
  border-right: none;
  margin-top: 20px;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  border-radius: 0 12px 12px 0;
}

.professional-menu .el-menu-item,
.professional-menu .el-submenu__title {
  color: #333;
  font-size: 15px;
  padding: 14px 20px;
  transition: background-color 0.3s ease, color 0.3s ease;
  border-radius: 8px;
}

.professional-menu .el-menu-item:hover,
.professional-menu .el-submenu__title:hover {
  background-color: #e6f0ff;
  color: #007bff;
}

.professional-menu .el-menu-item.is-active {
  background-color: #007bff;
  color: #fff;
  font-weight: bold;
  box-shadow: inset 0 0 8px rgba(0, 123, 255, 0.4);
}

.professional-menu .el-icon {
  margin-right: 8px;
}
</style>