fix: enlarge collapsed sidebar icons and make icon component inherit class

- 侧栏折叠时图标放大到 22px（展开时加图标与文字间距）
- 修复 el-menu-item 叶子项 #title 插槽误用
- icon 组件多根节点不自动继承 class，改为 inheritAttrs:false + v-bind="$attrs"，使外部 class/size 生效

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/components/icon/icon.vue

@@ -5,24 +5,24 @@
  @time: 2026/2/11 15:45
 -->
 <template>
-  <div v-if="type === 'uno'" :class="icon" />
+  <div v-if="type === 'uno'" v-bind="$attrs" :class="icon" />
 
-  <iconify-icon v-else-if="type === 'iconify'" :icon="icon" class="icon" :aria-hidden="false" />
+  <iconify-icon v-else-if="type === 'iconify'" v-bind="$attrs" :icon="icon" class="icon" :aria-hidden="false" />
 
-  <svg v-else-if="type === 'svg'" class="svg">
+  <svg v-else-if="type === 'svg'" v-bind="$attrs" class="svg">
     <use :href="svgSymbolId" fill="currentColor" />
   </svg>
 
-  <i v-else-if="type === 'iconfont'" :class="iconfontClassName" />
+  <i v-else-if="type === 'iconfont'" v-bind="$attrs" :class="iconfontClassName" />
 
-  <span v-else>Unsupported type: {{ type }}</span>
+  <span v-else v-bind="$attrs">Unsupported type: {{ type }}</span>
 </template>
 
 <script setup lang="ts">
 import { onBeforeMount, computed } from 'vue'
 import { Icon as IconifyIcon } from '@iconify/vue'
 
-defineOptions({ name: 'Icon' })
+defineOptions({ name: 'Icon', inheritAttrs: false })
 
 const props = withDefaults(
   defineProps<{

src/components/ty-sidebar.vue

@@ -11,19 +11,17 @@
         <template v-for="item in menus" :key="item.code">
           <el-sub-menu v-if="item.children?.length" :index="item.code">
             <template #title>
-              <icon type="iconify" :icon="item.icon ?? 'mdi:menu'" class="menu-icon" />
+              <icon type="iconify" :icon="item.icon ?? 'mdi:menu'" />
               <span>{{ item.name }}</span>
             </template>
             <el-menu-item v-for="child in item.children" :key="child.code" :index="child.path ?? child.code">
-              <icon v-if="child.icon" type="iconify" :icon="child.icon" class="menu-icon" />
+              <icon v-if="child.icon" type="iconify" :icon="child.icon" />
               <span>{{ child.name }}</span>
             </el-menu-item>
           </el-sub-menu>
           <el-menu-item v-else :index="item.path ?? item.code">
-            <icon type="iconify" :icon="item.icon ?? 'mdi:menu'" class="menu-icon" />
-            <template #title>
+            <icon type="iconify" :icon="item.icon ?? 'mdi:menu'" />
             <span>{{ item.name }}</span>
-            </template>
           </el-menu-item>
         </template>
       </el-menu>
@@ -105,11 +103,15 @@ function onSelect(index: string): void {
     :deep(.el-sub-menu__title:hover) {
       background: var(--wm-bg-color-page);
     }
+
+    :deep(.icon) {
+      margin-right: 8px;
+    }
   }
 
-  :deep(.menu-icon) {
-    margin-right: 4px;
-    font-size: 16px;
+  .el-menu--collapse :deep(.icon) {
+    margin-right: 0;
+    font-size: 22px;
   }
 }
 </style>