touyun_liuyun/ec-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

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

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
liuyun 2026-10-11 00:48:33 +08:00
parent 82aa944d48
commit 1f06594252
3 changed files with 18 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/icon/icon.vue
View File

@ -5,24 +5,24 @@
@time: 2026/2/11 15:45 @time: 2026/2/11 15:45
--> -->
<template> <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" /> <use :href="svgSymbolId" fill="currentColor" />
</svg> </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> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onBeforeMount, computed } from 'vue' import { onBeforeMount, computed } from 'vue'
import { Icon as IconifyIcon } from '@iconify/vue' import { Icon as IconifyIcon } from '@iconify/vue'
defineOptions({ name: 'Icon' }) defineOptions({ name: 'Icon', inheritAttrs: false })
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{

18
src/components/ty-sidebar.vue
View File

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

2
stats.html
View File

File diff suppressed because one or more lines are too long