From 0e44800b3aabd85a3a5bc6e18bc04324638831ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BF=9E=E5=AE=9D=E5=B1=B1?= <1253070437@qq.com>
Date: Fri, 21 Feb 2025 12:58:25 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E6=9B=B4=E6=96=B0=E3=80=91=E5=9B=BE?=
 =?UTF-8?q?=E6=A0=87=E9=80=89=E6=8B=A9=E5=99=A8=E5=A2=9E=E5=8A=A0=E6=B8=85?=
 =?UTF-8?q?=E9=99=A4=E5=B0=8F=E5=9C=86=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/XnIconSelector/index.vue   | 21 ++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/snowy-admin-web/src/components/XnIconSelector/index.vue b/snowy-admin-web/src/components/XnIconSelector/index.vue
index 41b5efb5..2e379d15 100644
--- a/snowy-admin-web/src/components/XnIconSelector/index.vue
+++ b/snowy-admin-web/src/components/XnIconSelector/index.vue
@@ -50,6 +50,9 @@
 					<component v-if="selectedIcon" :is="selectedIcon" />
 					<SearchOutlined v-else />
 				</template>
+				<template #suffix>
+					<close-circle-outlined v-if="selectedIcon && !disabled" class="clear-icon" @click.stop="handleClear" />
+				</template>
 			</a-input>
 		</a-popover>
 	</div>
@@ -58,7 +61,7 @@
 <script setup>
 	import { ref, watch } from 'vue'
 	import config from '@/config/iconSelect'
-	import { SearchOutlined } from '@ant-design/icons-vue'
+	import { SearchOutlined, CloseCircleOutlined } from '@ant-design/icons-vue'
 
 	const props = defineProps({
 		value: {
@@ -115,6 +118,12 @@
 		visible.value = false
 	}
 
+	const handleClear = () => {
+		selectedIcon.value = ''
+		emit('update:value', '')
+		emit('change', '')
+	}
+
 	const handleTabChange = (key) => {
 		activeKey.value = key
 		// 重置当前分类为default
@@ -129,6 +138,16 @@
 		:deep(.ant-input) {
 			cursor: pointer;
 		}
+
+		:deep(.clear-icon) {
+			cursor: pointer;
+			color: rgba(0, 0, 0, 0.25);
+			transition: color 0.3s;
+			font-size: 12px;
+			&:hover {
+				color: rgba(0, 0, 0, 0.45);
+			}
+		}
 	}
 
 	.icon-category {