优化backend前端布局

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>