From 0b05df4f93bc3f3bb3444eac7768cd1b0cc22edb Mon Sep 17 00:00:00 2001
From: andrewgreat <31468559@qq.com>
Date: Fri, 17 May 2024 13:36:23 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0iconSelector=E5=9B=BE?=
 =?UTF-8?q?=E6=A0=87=E9=80=89=E6=8B=A9=E5=99=A8=E5=9C=A8=E6=89=93=E5=BC=80?=
 =?UTF-8?q?=E6=97=B6=E5=AE=9A=E4=BD=8D=E5=88=B0=E5=B7=B2=E7=BB=8F=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E5=9B=BE=E6=A0=87=E4=BD=8D=E7=BD=AE=EF=BC=8C=E5=85=89?=
 =?UTF-8?q?=E6=A0=87=E7=A7=BB=E5=8A=A8=E5=88=B0=E5=9B=BE=E6=A0=87=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E5=9B=BE=E6=A0=87=E5=90=8D=E7=A7=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Selector/iconSelector.vue  | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/snowy-admin-web/src/components/Selector/iconSelector.vue b/snowy-admin-web/src/components/Selector/iconSelector.vue
index 80f84e83..47babe9b 100644
--- a/snowy-admin-web/src/components/Selector/iconSelector.vue
+++ b/snowy-admin-web/src/components/Selector/iconSelector.vue
@@ -5,7 +5,6 @@
 		:mask-closable="false"
 		:width="800"
 		:destroy-on-close="true"
-		:footer="null"
 		@cancel="onCancel"
 	>
 		<a-tabs v-model:activeKey="activeKey" tab-position="left" size="small" @change="paneChange">
@@ -16,6 +15,7 @@
 							iconItem.name
 						}}</a-radio-button>
 					</a-radio-group>
+					<span style="margin-left: 10px">{{ iconInfo }}</span>
 				</div>
 
 				<div :key="iconItemIns" v-for="iconItemIns in item.iconItem">
@@ -27,7 +27,9 @@
 								:class="icon === modelValue ? 'active' : ''"
 								@click="selectIcon(icon)"
 							>
-								<component :is="icon" class="xn-icons" />
+								<div :id="icon" @mouseover="iconInfo = icon">
+									<component :is="icon" class="xn-icons" />
+								</div>
 							</li>
 						</ul>
 					</div>
@@ -43,6 +45,7 @@
 	const modelValue = ref('')
 	const activeKey = ref('default')
 	const iconItemDefault = ref('default')
+	const iconInfo = ref()
 
 	onMounted(() => {
 		iconData.value.push(...config.icons)
@@ -52,6 +55,7 @@
 	const showIconModal = (value) => {
 		visible.value = true
 		defaultSetting(value)
+		autoSwitchTab(value)
 	}
 
 	// 暴露子组件的方法
@@ -87,6 +91,19 @@
 			?.iconItem.some((groupItem) => groupItem.key === iconItemDefault.value) || (iconItemDefault.value = 'default')
 	}
 
+	function autoSwitchTab(val) {
+		if (val) {
+			iconData.value.some(
+				(tabItem) =>
+					tabItem.iconItem.some(
+						(groupItem) => groupItem.item.some((icon) => icon === val) && (iconItemDefault.value = groupItem.key)
+					) && (activeKey.value = tabItem.key)
+			)
+			nextTick(() => {
+				document.getElementById(val)?.scrollIntoView({ block: 'center' })
+			})
+		}
+	}
 	// 切换icon风格
 	const radioGroupChange = (e) => {
 		iconItemDefault.value = e.target.value