refactor: MenuIcon 替换

src/layout/components/Menu/MenuIcon.vue → src/components/IconPicker/PickerIcon.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts" name="MenuIcon">
+<script setup lang="ts" name="PickerIcon">
 import { computed } from 'vue'
 const props = defineProps({
 	iconClass: {
@@ -17,7 +17,7 @@ const icon = computed(() => {
 		icon: 'icon',
 		// 来自于 le-iconfont svg 链接: 'le-[name]'
 		le: 'le-iconfont'
-		// // 来自于 element svg 链接
+		// // 来自于 element svg 链接: 'el-[name]' => 实际icon name为： [name] el-仅用于标记
 		// el: 'element'
 	}[iconClass.split('-')[0]]
 	// 匹配不到icon- & le- 默认element
@@ -39,13 +39,13 @@ const colorStyle = computed(() => {
 
 <template>
 	<template v-if="icon.type === 'element'">
-		<component :is="icon.component" class="menu-icon" :style="colorStyle" />
+		<component :is="icon.component" class="le-pick-icon menu-icon" :style="colorStyle" />
 	</template>
-	<LeIcon v-else :icon-class="icon.component" class="menu-icon" :color="color" />
+	<LeIcon v-else :icon-class="icon.component" class="le-pick-icon menu-icon" :color="color" />
 </template>
 
 <style scoped lang="scss">
-.menu-icon {
+.#{$prefix}pick-icon {
 	width: 1em;
 	height: 1em;
 	vertical-align: -0.15em;
@@ -54,5 +54,8 @@ const colorStyle = computed(() => {
 	&:focus {
 		outline: unset;
 	}
+}
+.menu-icon {
+
 }
 </style>

src/components/IconPicker/index.vue

@@ -3,7 +3,7 @@
 		<template #append>
 			<el-popover v-model:visible="visible" popper-class="le-icon-picker_popover" placement="bottom-end" trigger="click">
 				<template #reference>
-					<MenuIcon class="icon-selected" :icon-class="currentSelect || 'Grid'" />
+					<PickerIcon class="icon-selected" :icon-class="currentSelect || 'Grid'" />
 				</template>
 				<el-input v-model="searchValue" placeholder="搜索图标" @clear="searchIconsHandler" @input="searchIconsHandler">
 					<template #prepend>
@@ -23,7 +23,7 @@
 								@click="updateIcon(item)"
 							>
 								<!--<le-icon class="local_icon" :icon-class="`${curIconType}${item}`" />-->
-								<MenuIcon class="local_icon" :icon-class="`${curIconType}${item}`" />
+								<PickerIcon class="local_icon" :icon-class="`${curIconType}${item}`" />
 								<span class="text text-overflow_ellipsis_line_2">{{ item }}</span>
 							</div>
 						</template>
@@ -36,7 +36,7 @@
 </template>
 
 <script setup lang="ts">
-import MenuIcon from '@/layout/components/Menu/MenuIcon.vue'
+import PickerIcon from '@/components/IconPicker/PickerIcon.vue'
 // import svgIcons from 'virtual:svg-icons-names'
 import { iconTypeOptions } from './iconsData.ts'
 import { useDebounceFn } from '@vueuse/core'

src/layout/LayoutLeft/index.scss

@@ -24,7 +24,7 @@
 					// 折叠
 					/*&--collapse {
 						//background-color: transparent !important;
-						.menu-icon {
+						.le-pick-icon {
 							margin-right: 0;
 						}
 					}*/

src/layout/LayoutLeftMix/index.scss

@@ -48,7 +48,7 @@
 					line-height: unset;
 					cursor: pointer;
 					transition: all 0.3s ease;
-					.menu-icon {
+					.le-pick-icon {
 						//font-size: 18px;
 						margin-right: 0;
 					}
@@ -57,7 +57,7 @@
 						font-size: 12px;
 						//color: inherit;
 					}
-					/*.menu-icon,
+					/*.le-pick-icon,
 					.title {
 						color: var(--el-menu-text-color);
 					}*/
@@ -71,7 +71,7 @@
 					&::before {
 						background-color: var(--el-menu-active-color);
 					}
-					.menu-icon,
+					.le-pick-icon,
 					.title {
 						color: var(--el-menu-active-color);
 					}

src/layout/LayoutLeftMix/index.vue

@@ -16,7 +16,7 @@
 						:class="{ 'split-active': splitActive === item.path || `/${splitActive.split('/')[1]}` === item.path }"
 						@click="changeSubMenu(item)"
 					>
-						<MenuIcon v-if="item.meta?.icon" :icon-class="item.meta.icon"></MenuIcon>
+						<PickerIcon v-if="item.meta?.icon" :icon-class="item.meta.icon"></PickerIcon>
 						<!--						<el-icon>
 													<component :is="item.meta.icon"></component>
 												</el-icon>-->
@@ -55,7 +55,7 @@ import AppMain from '@/layout/components/AppMain.vue'
 import ToolBarLeft from '@/layout/components/Header/ToolBarLeft.vue'
 import ToolBarRight from '@/layout/components/Header/ToolBarRight.vue'
 import SubMenu from '@/layout/components/Menu/SubMenu.vue'
-import MenuIcon from '@/layout/components/Menu/MenuIcon.vue'
+import PickerIcon from '@/components/IconPicker/PickerIcon.vue'
 import useStore from '@/store'
 import { generateTitle } from '@/utils/i18n'
 const title = import.meta.env.VITE_APP_TITLE

src/layout/LayoutTop/index.vue

@@ -20,7 +20,7 @@
 							<!--							<el-icon>
 								<component :is="subItem.meta.icon"></component>
 							</el-icon>-->
-							<MenuIcon v-if="subItem.meta.icon" :icon-class="subItem.meta.icon" />
+							<PickerIcon v-if="subItem.meta.icon" :icon-class="subItem.meta.icon" />
 							<span>{{ generateTitle(subItem.meta?.title) }}</span>
 						</template>
 						<SubMenu :menu-list="subItem.children" />
@@ -32,7 +32,7 @@
 						:index="subItem.path"
 						@click="handleClickMenu(subItem)"
 					>
-						<MenuIcon v-if="subItem.meta.icon" :icon-class="subItem.meta.icon" />
+						<PickerIcon v-if="subItem.meta.icon" :icon-class="subItem.meta.icon" />
 						<template #title>
 							<span>{{ generateTitle(subItem.meta?.title) }}</span>
 						</template>
@@ -53,7 +53,7 @@ import { useRoute, useRouter } from 'vue-router'
 import AppMain from '@/layout/components/AppMain.vue'
 import ToolBarRight from '@/layout/components/Header/ToolBarRight.vue'
 import SubMenu from '@/layout/components/Menu/SubMenu.vue'
-import MenuIcon from '@/layout/components/Menu/MenuIcon.vue'
+import PickerIcon from '@/components/IconPicker/PickerIcon.vue'
 import useStore from '@/store'
 import { generateTitle } from '@/utils/i18n'
 import { isExternal } from '@/utils/validate.ts'

src/layout/LayoutTopMix/index.scss

@@ -72,7 +72,7 @@
         // 折叠
         /*&--collapse {
           //background-color: transparent !important;
-					.menu-icon {
+					.le-pick-icon {
 						margin-right: 0;
 					}
         }*/

src/layout/components/Header/components/Breadcrumb.vue

@@ -1,11 +1,11 @@
 <template>
 	<div :class="['breadcrumb-box']">
-		<el-breadcrumb :separator-icon="ArrowRight">
+		<el-breadcrumb separator-icon="ArrowRight">
 			<transition-group name="breadcrumb">
 				<!--				<el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="item.path">-->
 				<el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="item.path">
 					<div class="el-breadcrumb__inner is-link" @click="onBreadcrumbClick(item, index)">
-						<MenuIcon v-if="setting.breadcrumbIcon && item.meta?.icon" :icon-class="item.meta.icon" class="breadcrumb-icon"/>
+						<PickerIcon v-if="setting.breadcrumbIcon && item.meta?.icon" :icon-class="item.meta.icon" class="breadcrumb-icon"/>
 						<!--						<el-icon v-show="item.meta?.icon && setting.breadcrumbIcon" class="breadcrumb-icon">
 							<component :is="item.meta.icon"></component>
 						</el-icon>-->
@@ -27,7 +27,7 @@ import { ArrowRight } from '@element-plus/icons-vue'
 import useStore from '@/store'
 // import router from '@/router'
 import { generateTitle } from '@/utils/i18n'
-import MenuIcon from "@/layout/components/Menu/MenuIcon.vue";
+import PickerIcon from '@/layout/components/Menu/PickerIcon.vue'
 
 const route = useRoute()
 const router = useRouter()

src/layout/components/Header/components/SearchMenu.vue

@@ -17,7 +17,7 @@
 					<LeIcon icon-class="le-search" />
 				</template>
 				<template #default="{ item }">
-					<MenuIcon v-if="item.meta?.icon" :icon-class="item.meta.icon" />
+					<PickerIcon v-if="item.meta?.icon" :icon-class="item.meta.icon" />
 					<span> {{ item.meta.local_title }} </span>
 				</template>
 			</el-autocomplete>
@@ -28,7 +28,7 @@
 <script setup lang="ts" name="SearchMenu">
 import { ref, computed, nextTick } from 'vue'
 import { AppRouteRecordRaw } from '@/router/types'
-import MenuIcon from '@/layout/components/Menu/MenuIcon.vue'
+import PickerIcon from '@/components/IconPicker/PickerIcon.vue'
 import { useRouter } from 'vue-router'
 import { generateTitle } from '@/utils/i18n'
 import { isExternal } from '@/utils/validate'

src/layout/components/Menu/SubMenu.vue

@@ -2,7 +2,7 @@
 	<template v-for="subItem in menuList" :key="subItem.path">
 		<el-sub-menu v-if="subItem.children?.length" teleported popper-class="layout-menu-popper-wrap" :index="subItem.path">
 			<template #title>
-				<MenuIcon v-if="subItem.meta.icon" :icon-class="subItem.meta.icon" />
+				<PickerIcon v-if="subItem.meta.icon" :icon-class="subItem.meta.icon" />
 				<!--				<el-icon v-if="subItem.meta.icon">
 					<component :is="subItem.meta.icon" />
 				</el-icon>-->
@@ -11,7 +11,7 @@
 			<SubMenu :menu-list="subItem.children" />
 		</el-sub-menu>
 		<el-menu-item v-else popper-class="layout-menu-popper-wrap" :index="subItem.path" @click="handleClickMenu(subItem)">
-			<MenuIcon v-if="subItem.meta.icon" :icon-class="subItem.meta.icon" />
+			<PickerIcon v-if="subItem.meta.icon" :icon-class="subItem.meta.icon" />
 			<!--      <el-icon>
 				<component :is="subItem.meta.icon"></component>
 			</el-icon>-->
@@ -25,7 +25,7 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
 import { generateTitle } from '@/utils/i18n'
-import MenuIcon from './MenuIcon.vue'
+import PickerIcon from '@/components/IconPicker/PickerIcon.vue'
 import { isExternal } from '@/utils/validate'
 
 defineProps<{ menuList: Menu.MenuOptions[] }>()

src/styles/sidebar.scss

@@ -4,12 +4,24 @@
 	--el-menu-sub-item-height: 42px;
 	--el-menu-hover-bg-color: transparent;
 }
+
+.el-menu--horizontal .el-menu .el-menu-item,
+.el-menu--horizontal .el-menu .el-sub-menu__title {
+	//--el-menu-horizontal-sub-item-height: 42px;
+	height: 42px;
+	line-height: 42px;
+	.le-pick-icon {
+		font-size: 18px;
+		margin-right: 4px;
+	}
+}
+
 $active_color: var(--el-menu-active-color);
 // 公用的 菜单样式
 .layout-menu-wrap, .layout-menu-popper-wrap, .layout-wrap--columns {
 	// 折叠情况
 	&.el-menu--collapse {
-		.menu-icon {
+		.le-pick-icon {
 			margin-right: 0;
 		}
 		// 折叠后无子菜单 样式类
@@ -17,7 +29,7 @@ $active_color: var(--el-menu-active-color);
 			justify-content: center;
 		}
 	}
-	.menu-icon {
+	.le-pick-icon {
 		margin-right: 4px;
 		font-size: 18px;
 	}