20260808172946

code/g3hd/frontend/src/layout/menu-item20260807.vue

@@ -0,0 +1,48 @@
+<template>
+  <el-sub-menu v-if="hasChildren" :index="item.id">
+    <template #title>
+      <el-icon v-if="item.icon">
+        <G3Icon :icon="item.icon" />
+      </el-icon>
+      <span class="menu-label">{{ item.label }}</span>
+    </template>
+
+    <MenuItem
+      v-for="child in item.children"
+      :key="child.id"
+      :item="child"
+      :parent-index="child.id"
+    />
+  </el-sub-menu>
+
+  <el-menu-item v-else :index="item.id">
+    <el-icon v-if="item.icon">
+      <G3Icon :icon="item.icon" />
+    </el-icon>
+    <span class="menu-label">{{ item.label }}</span>
+  </el-menu-item>
+</template>
+
+<script setup lang="js">
+import { computed } from "vue";
+import G3Icon from "@/components/g3-icon/index.vue";
+
+const props = defineProps({
+  item: { type: Object, required: true },
+  parentIndex: { type: String, default: "0" },
+});
+
+const hasChildren = props.item.children?.length > 0;
+</script>
+
+<style scoped>
+.menu-label {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+:deep(.el-icon svg) {
+  width: 16px;
+  height: 16px;
+}
+</style>