更新

src/pages/auth/permission/save.vue

@@ -41,7 +41,7 @@
 			<a-row :gutter="16">
 				<a-col :span="12">
 					<a-form-item label="菜单图标" name="icon">
-						<a-input v-model:value="form.icon" placeholder="请输入图标类名" allow-clear />
+						<sc-icon-picker v-model="form.icon" placeholder="请选择图标" />
 					</a-form-item>
 				</a-col>
 				<a-col :span="12">
@@ -169,6 +169,7 @@ import { ref, reactive, watch, onMounted } from 'vue'
 import { message, Empty } from 'ant-design-vue'
 import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue'
 import authApi from '@/api/auth'
+import ScIconPicker from '@/components/scIconPicker/index.vue'
 
 defineOptions({
 	name: 'PermissionSave'

src/pages/home/iconPickerDemo.vue

@@ -0,0 +1,50 @@
+<template>
+	<div class="icon-picker-demo">
+		<a-card title="图标选择器演示" style="max-width: 600px; margin: 20px auto;">
+			<a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
+				<a-form-item label="选择图标">
+					<sc-icon-picker v-model="selectedIcon" @change="handleIconChange" />
+				</a-form-item>
+
+				<a-form-item label="选中值">
+					<a-input v-model:value="selectedIcon" readonly />
+				</a-form-item>
+
+				<a-form-item label="图标预览">
+					<div v-if="selectedIcon" class="icon-preview">
+						<component :is="selectedIcon" style="font-size: 48px;" />
+					</div>
+					<a-empty v-else description="未选择图标" :image="Empty.PRESENTED_IMAGE_SIMPLE" />
+				</a-form-item>
+			</a-form>
+		</a-card>
+	</div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Empty } from 'ant-design-vue'
+import ScIconPicker from '@/components/scIconPicker/index.vue'
+
+const selectedIcon = ref('')
+
+const handleIconChange = (value) => {
+	console.log('图标已选择:', value)
+}
+</script>
+
+<style scoped lang="scss">
+.icon-picker-demo {
+	padding: 20px;
+
+	.icon-preview {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 20px;
+		border: 1px dashed #d9d9d9;
+		border-radius: 6px;
+		min-height: 88px;
+	}
+}
+</style>