优化backend前端布局

backend/src/components/AsideMenuItem.vue

@@ -0,0 +1,41 @@
+<template>
+  <el-menu-item
+    v-if="!item.children || item.children.length === 0"
+    :index="item.path || String(item.id)"
+    :class="{ 'is-locked': item.locked }"
+  >
+    <MenuIcon :icon="item.icon" />
+    <template #title>
+      <span>{{ item.title }}</span>
+      <i v-if="item.locked" class="fa-solid fa-lock lock-badge"></i>
+    </template>
+  </el-menu-item>
+
+  <el-sub-menu
+    v-else
+    :index="item.path || String(item.id)"
+    teleported
+    :class="{ 'is-locked': item.locked }"
+  >
+    <template #title>
+      <MenuIcon :icon="item.icon" />
+      <span>{{ item.title }}</span>
+      <i v-if="item.locked" class="fa-solid fa-lock lock-badge"></i>
+    </template>
+    <AsideMenuItem
+      v-for="child in item.children"
+      :key="child.id"
+      :item="child"
+    />
+  </el-sub-menu>
+</template>
+
+<script setup>
+import MenuIcon from "@/components/MenuIcon.vue";
+
+defineOptions({ name: "AsideMenuItem" });
+
+defineProps({
+  item: { type: Object, required: true },
+});
+</script>

backend/src/components/MenuIcon.vue

@@ -0,0 +1,37 @@
+<template>
+  <i v-if="isFontAwesome" :class="icon" class="menu-icon"></i>
+  <el-icon v-else class="menu-icon">
+    <component :is="elementIconName" />
+  </el-icon>
+</template>
+
+<script setup>
+import { computed, getCurrentInstance } from "vue";
+
+const props = defineProps({
+  icon: { type: String, default: "" },
+});
+
+const instance = getCurrentInstance();
+const isFontAwesome = computed(() => /fa-|(^|\s)fa[srlb]?\s/.test(props.icon || ""));
+
+// main.js 已把所有 Element Plus 图标全局注册；数据库里存的是图标组件名，
+// 未能识别时统一回退到 Grid，避免渲染出空白图标。
+const elementIconName = computed(() => {
+  const name = props.icon || "Grid";
+  const components = instance?.appContext?.components || {};
+  return components[name] ? name : "Grid";
+});
+</script>
+
+<style scoped>
+.menu-icon {
+  flex-shrink: 0;
+  margin-right: 8px;
+  font-size: 16px;
+  width: 16px;
+  height: 16px;
+  text-align: center;
+  color: inherit;
+}
+</style>