Initial comitof pe project

src/views/mainpage/layout/MenuItem.vue

@@ -0,0 +1,68 @@
+<template>
+  <div v-if="!hasChildren">
+    <el-menu-item
+      :index="menuItem.menu_url"
+      :disabled="menuItem.disabled"
+      :class="{ 'menu-item': true }"
+    >
+      <el-icon v-if="menuItem.menu_grade === 1 && !isCollapse">
+        <Menu />
+      </el-icon>
+      <span>{{ menuItem.menu_name }}</span>
+    </el-menu-item>
+  </div>
+  
+  <div v-else>
+    <el-sub-menu
+      :index="menuItem.menu_url"
+      :disabled="menuItem.disabled"
+    >
+      <template #title>
+        <el-icon v-if="menuItem.menu_grade === 1 && !isCollapse">
+          <Menu />
+        </el-icon>
+        <span>{{ menuItem.menu_name }}</span>
+      </template>
+      
+      <menu-item
+        v-for="child in menuItem.children"
+        :key="child.id"
+        :menu-item="child"
+        :is-collapse="isCollapse"
+      />
+    </el-sub-menu>
+  </div>
+</template>
+
+<script setup>
+import { defineProps, computed } from 'vue';
+import { Menu } from '@element-plus/icons-vue';
+
+// 接收父组件传递的属性
+const props = defineProps({
+  menuItem: {
+    type: Object,
+    required: true
+  },
+  isCollapse: {
+    type: Boolean,
+    default: false
+  }
+});
+
+// 判断是否有子菜单
+const hasChildren = computed(() => {
+  return props.menuItem.children && props.menuItem.children.length > 0;
+});
+</script>
+
+<style scoped>
+.menu-item {
+  transition: all 0.3s ease;
+}
+
+.menu-item:hover {
+  background-color: rgba(255, 255, 255, 0.1) !important;
+}
+</style>
+