优化菜单样式：彩色背景+白色图标文字

src/components/Icon.vue

@@ -1,9 +1,8 @@
 <template>
-  <text class="icon" :class="'icon-' + name" :style="iconStyle"></text>
+  <text class="icon" :class="'icon-' + name" :style="iconStyle">{{ iconChar }}</text>
 </template>
 
 <script>
-// 干净的非emoji符号
 const icons = {
   home: '🏠',
   user: '👤',
@@ -37,28 +36,15 @@ const icons = {
 export default {
   name: 'Icon',
   props: {
-    name: {
-      type: String,
-      required: true
-    },
-    size: {
-      type: [Number, String],
-      default: 32
-    },
-    color: {
-      type: String,
-      default: ''
-    }
+    name: { type: String, required: true },
+    size: { type: [Number, String], default: 32 },
+    color: { type: String, default: '' }
   },
   computed: {
     iconStyle() {
       const style = {}
-      if (this.size) {
-        style.fontSize = typeof this.size === 'number' ? `${this.size}rpx` : this.size
-      }
-      if (this.color) {
-        style.color = this.color
-      }
+      if (this.size) style.fontSize = typeof this.size === 'number' ? `${this.size}rpx` : this.size
+      if (this.color) style.color = this.color
       return style
     },
     iconChar() {
@@ -74,15 +60,5 @@ export default {
   display: inline-block;
   text-align: center;
   line-height: 1;
-  font-weight: 500;
 }
-
-.icon-add { font-size: 1.3em; font-weight: 300; }
-.icon-check { color: #52c41a; }
-.icon-close { color: #ff4d4f; }
-.icon-alert { color: #fa8c16; }
-.icon-right, .icon-left { font-size: 1.4em; font-weight: bold; color: #999; }
-.icon-down, .icon-filter { font-size: 0.8em; }
-.icon-in { color: #52c41a; }
-.icon-out { color: #ff4d4f; }
 </style>