From b6bd845b73d0bf34df0dcc7b11699cbef31e01f3 Mon Sep 17 00:00:00 2001
From: zhang zhuo <cfn@leapy.cn>
Date: Sun, 25 Jan 2026 19:15:47 +0800
Subject: [PATCH] =?UTF-8?q?icon=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/piIcon/index.vue       | 182 ++------------------------
 src/components/piIconSelect/index.vue | 178 +++++++++++++++++++++++++
 src/pi.ts                             |   2 +
 src/views/system/menu/quick.vue       |   4 +-
 src/views/system/menu/save.vue        |   4 +-
 src/views/system/role/save.vue        |   2 +-
 src/views/tools/flow/menu.vue         |  46 ++-----
 src/views/tools/form/right.vue        |   4 +-
 8 files changed, 214 insertions(+), 208 deletions(-)
 create mode 100644 src/components/piIconSelect/index.vue

diff --git a/src/components/piIcon/index.vue b/src/components/piIcon/index.vue
index 845b419..1390c34 100644
--- a/src/components/piIcon/index.vue
+++ b/src/components/piIcon/index.vue
@@ -1,178 +1,24 @@
 <template>
-	<div class="pi-icon-select">
-		<div class="pi-icon-select__wrapper" :class="{'hasValue':value}" style="width: 100%;">
-			<el-input v-model="value" :disabled="disabled" readonly>
-				<template #append>
-					<el-icon size="22" @click="open">
-						<component :is="value||'el-icon-plus'"/>
-					</el-icon>
-				</template>
-			</el-input>
-		</div>
-		<el-dialog title="图标选择器" v-model="dialogVisible" :width="760" destroy-on-close append-to-body>
-			<div class="pi-icon-select__dialog">
-				<el-form :rules="{}">
-					<el-form-item prop="searchText">
-						<el-input class="pi-icon-select__search-input" prefix-icon="el-icon-search" v-model="searchText"
-								  placeholder="搜索" size="large" clearable/>
-					</el-form-item>
-				</el-form>
-				<el-tabs>
-					<el-tab-pane v-for="item in data" :key="item.name" lazy>
-						<template #label>
-							{{ item.name }}
-							<el-tag size="small" type="info">{{ item.icons.length }}</el-tag>
-						</template>
-						<div class="pi-icon-select__list">
-							<el-scrollbar>
-								<ul @click="selectIcon">
-									<el-empty v-if="item.icons.length===0" :image-size="100"
-											  description="未查询到相关图标"/>
-									<li v-for="icon in item.icons" :key="icon">
-										<span :data-icon="icon"></span>
-										<el-icon>
-											<component :is="icon"/>
-										</el-icon>
-									</li>
-								</ul>
-							</el-scrollbar>
-						</div>
-					</el-tab-pane>
-				</el-tabs>
-			</div>
-			<template #footer>
-				<el-button @click="clear" text>清除</el-button>
-				<el-button @click="dialogVisible=false">取消</el-button>
-			</template>
-		</el-dialog>
-	</div>
+	<el-icon :size="size" :color="color">
+		<component :is="icon"/>
+	</el-icon>
 </template>
 
 <script setup>
-import {ref, watch, onMounted, getCurrentInstance} from "vue";
-import config from "@/config/icon"
-
-const {proxy} = getCurrentInstance()
-const prop = defineProps({
-	modelValue: {type: String, default: ""},
-	disabled: {type: Boolean, default: false},
-})
-
-let value = ref("")
-let dialogVisible = ref(false)
-let data = ref([])
-let searchText = ref("")
-
-
-watch(() => prop.modelValue, (val) => {
-	value.value = val
-})
-
-watch(value, (val) => {
-	proxy.$emit('update:modelValue', val)
-})
-
-watch(searchText, (val) => {
-	search(val)
-})
-
-onMounted(() => {
-	value.value = prop.modelValue
-	data.value.push(...config.icons)
-})
-
-function open() {
-	if (prop.disabled) {
-		return false
+const props = defineProps({
+	icon: {
+		type: String,
+		required: true,
+	},
+	size: {
+		type: String
+	},
+	color: {
+		type: String
 	}
-	dialogVisible.value = true
-}
-
-function selectIcon(e) {
-	if (e.target.tagName != 'SPAN') {
-		return false
-	}
-	value.value = e.target.dataset.icon
-	dialogVisible.value = false
-}
-
-function clear() {
-	value.value = ""
-	dialogVisible.value = false
-}
-
-function search(text) {
-	if (text) {
-		const filterData = JSON.parse(JSON.stringify(config.icons))
-		filterData.forEach(t => {
-			t.icons = t.icons.filter(n => n.includes(text))
-		})
-		data.value = filterData
-	} else {
-		data.value = JSON.parse(JSON.stringify(config.icons))
-	}
-}
-
+})
 </script>
 
 <style scoped>
-.pi-icon-select {
-	display: inline-flex;
-	width: 100%;
-}
 
-.pi-icon-select__wrapper.hasValue:deep(.el-input__icon) {
-	color: var(--el-text-color-regular);
-}
-
-.pi-icon-select__wrapper:deep(.el-input-group__append, .el-input-group__prepend) {
-	padding: 0 10px;
-}
-
-.pi-icon-select__list {
-	height: 270px;
-	overflow: auto;
-}
-
-.pi-icon-select__list li {
-	display: inline-block;
-	width: 80px;
-	height: 80px;
-	margin: 5px;
-	vertical-align: top;
-	transition: all 0.1s;
-	border-radius: 4px;
-	position: relative;
-}
-
-.pi-icon-select__list li span {
-	position: absolute;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	z-index: 1;
-	cursor: pointer;
-}
-
-.pi-icon-select__list li i {
-	display: inline-block;
-	width: 100%;
-	height: 100%;
-	font-size: 26px;
-	color: #6d7882;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	border-radius: 4px;
-}
-
-.pi-icon-select__list li:hover {
-	box-shadow: 0 0 1px 4px var(--el-color-primary);
-	background: var(--el-color-primary-light-9);
-}
-
-.pi-icon-select__list li:hover i {
-	color: var(--el-color-primary);
-}
 </style>
diff --git a/src/components/piIconSelect/index.vue b/src/components/piIconSelect/index.vue
new file mode 100644
index 0000000..845b419
--- /dev/null
+++ b/src/components/piIconSelect/index.vue
@@ -0,0 +1,178 @@
+<template>
+	<div class="pi-icon-select">
+		<div class="pi-icon-select__wrapper" :class="{'hasValue':value}" style="width: 100%;">
+			<el-input v-model="value" :disabled="disabled" readonly>
+				<template #append>
+					<el-icon size="22" @click="open">
+						<component :is="value||'el-icon-plus'"/>
+					</el-icon>
+				</template>
+			</el-input>
+		</div>
+		<el-dialog title="图标选择器" v-model="dialogVisible" :width="760" destroy-on-close append-to-body>
+			<div class="pi-icon-select__dialog">
+				<el-form :rules="{}">
+					<el-form-item prop="searchText">
+						<el-input class="pi-icon-select__search-input" prefix-icon="el-icon-search" v-model="searchText"
+								  placeholder="搜索" size="large" clearable/>
+					</el-form-item>
+				</el-form>
+				<el-tabs>
+					<el-tab-pane v-for="item in data" :key="item.name" lazy>
+						<template #label>
+							{{ item.name }}
+							<el-tag size="small" type="info">{{ item.icons.length }}</el-tag>
+						</template>
+						<div class="pi-icon-select__list">
+							<el-scrollbar>
+								<ul @click="selectIcon">
+									<el-empty v-if="item.icons.length===0" :image-size="100"
+											  description="未查询到相关图标"/>
+									<li v-for="icon in item.icons" :key="icon">
+										<span :data-icon="icon"></span>
+										<el-icon>
+											<component :is="icon"/>
+										</el-icon>
+									</li>
+								</ul>
+							</el-scrollbar>
+						</div>
+					</el-tab-pane>
+				</el-tabs>
+			</div>
+			<template #footer>
+				<el-button @click="clear" text>清除</el-button>
+				<el-button @click="dialogVisible=false">取消</el-button>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+
+<script setup>
+import {ref, watch, onMounted, getCurrentInstance} from "vue";
+import config from "@/config/icon"
+
+const {proxy} = getCurrentInstance()
+const prop = defineProps({
+	modelValue: {type: String, default: ""},
+	disabled: {type: Boolean, default: false},
+})
+
+let value = ref("")
+let dialogVisible = ref(false)
+let data = ref([])
+let searchText = ref("")
+
+
+watch(() => prop.modelValue, (val) => {
+	value.value = val
+})
+
+watch(value, (val) => {
+	proxy.$emit('update:modelValue', val)
+})
+
+watch(searchText, (val) => {
+	search(val)
+})
+
+onMounted(() => {
+	value.value = prop.modelValue
+	data.value.push(...config.icons)
+})
+
+function open() {
+	if (prop.disabled) {
+		return false
+	}
+	dialogVisible.value = true
+}
+
+function selectIcon(e) {
+	if (e.target.tagName != 'SPAN') {
+		return false
+	}
+	value.value = e.target.dataset.icon
+	dialogVisible.value = false
+}
+
+function clear() {
+	value.value = ""
+	dialogVisible.value = false
+}
+
+function search(text) {
+	if (text) {
+		const filterData = JSON.parse(JSON.stringify(config.icons))
+		filterData.forEach(t => {
+			t.icons = t.icons.filter(n => n.includes(text))
+		})
+		data.value = filterData
+	} else {
+		data.value = JSON.parse(JSON.stringify(config.icons))
+	}
+}
+
+</script>
+
+<style scoped>
+.pi-icon-select {
+	display: inline-flex;
+	width: 100%;
+}
+
+.pi-icon-select__wrapper.hasValue:deep(.el-input__icon) {
+	color: var(--el-text-color-regular);
+}
+
+.pi-icon-select__wrapper:deep(.el-input-group__append, .el-input-group__prepend) {
+	padding: 0 10px;
+}
+
+.pi-icon-select__list {
+	height: 270px;
+	overflow: auto;
+}
+
+.pi-icon-select__list li {
+	display: inline-block;
+	width: 80px;
+	height: 80px;
+	margin: 5px;
+	vertical-align: top;
+	transition: all 0.1s;
+	border-radius: 4px;
+	position: relative;
+}
+
+.pi-icon-select__list li span {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	z-index: 1;
+	cursor: pointer;
+}
+
+.pi-icon-select__list li i {
+	display: inline-block;
+	width: 100%;
+	height: 100%;
+	font-size: 26px;
+	color: #6d7882;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	border-radius: 4px;
+}
+
+.pi-icon-select__list li:hover {
+	box-shadow: 0 0 1px 4px var(--el-color-primary);
+	background: var(--el-color-primary-light-9);
+}
+
+.pi-icon-select__list li:hover i {
+	color: var(--el-color-primary);
+}
+</style>
diff --git a/src/pi.ts b/src/pi.ts
index 430807d..ebfb2cb 100644
--- a/src/pi.ts
+++ b/src/pi.ts
@@ -14,6 +14,7 @@ import piTable from "@/components/piTable"
 import piUpload from "@/components/piUpload"
 import piSelect from "@/components/piSelect"
 import piImage from "@/components/piImage"
+import piIcon from "@/components/piIcon"
 
 export default {
 	install(app: App) {
@@ -23,6 +24,7 @@ export default {
 		app.component('piUpload', piUpload)
 		app.component('piSelect', piSelect)
 		app.component('piImage', piImage)
+		app.component('piIcon', piIcon)
 
 		//注册全局指令
 		app.directive('auth', auth)
diff --git a/src/views/system/menu/quick.vue b/src/views/system/menu/quick.vue
index ba0d6ee..df1752c 100644
--- a/src/views/system/menu/quick.vue
+++ b/src/views/system/menu/quick.vue
@@ -5,7 +5,7 @@
 				<el-input v-model="form.title" placeholder="测试页面" clearable></el-input>
 			</el-form-item>
 			<el-form-item label="菜单图标" prop="icon">
-				<pi-icon v-model="form.icon" clearable></pi-icon>
+				<pi-icon-select v-model="form.icon" clearable></pi-icon-select>
 			</el-form-item>
 			<el-form-item label="页面名称" prop="name">
 				<el-input v-model="form.name" placeholder="systemDemo" clearable></el-input>
@@ -25,7 +25,7 @@
 </template>
 
 <script setup>
-import piIcon from '@/components/piIcon'
+import piIconSelect from '@/components/piIconSelect'
 import {ref, getCurrentInstance} from "vue"
 import api from "@/api"
 const emit = defineEmits(['closed', 'success']);
diff --git a/src/views/system/menu/save.vue b/src/views/system/menu/save.vue
index 2312585..8ed8408 100644
--- a/src/views/system/menu/save.vue
+++ b/src/views/system/menu/save.vue
@@ -23,7 +23,7 @@
 						</el-radio-group>
 					</el-form-item>
 					<el-form-item v-if="form.type == 0 || form.type == 3" label="菜单图标" prop="icon">
-						<pi-icon v-model="form.icon" style="width: 300px;"></pi-icon>
+						<pi-icon-select v-model="form.icon" style="width: 300px;"></pi-icon-select>
 					</el-form-item>
 					<el-form-item v-if="form.type == 0" label="页面名称" prop="name">
 						<el-input v-model="form.name" clearable style="width: 300px;"></el-input>
@@ -70,7 +70,7 @@
 </template>
 
 <script setup>
-import piIcon from '@/components/piIcon'
+import piIconSelect from '@/components/piIconSelect'
 import {ref, watch, getCurrentInstance} from "vue";
 import api from "@/api/index";
 
diff --git a/src/views/system/role/save.vue b/src/views/system/role/save.vue
index 4669d6b..ce47c24 100644
--- a/src/views/system/role/save.vue
+++ b/src/views/system/role/save.vue
@@ -80,7 +80,7 @@ onMounted(() => {
 
 async function getMenu() {
 	const res = await api.system.menu.list();
-	menu.value.list = tools.makeTreeData(res.data, 0, "menu_id");
+	menu.value.list = tools.makeTreeData(res.data, 0, "menu_id", "pid");
 }
 
 //显示
diff --git a/src/views/tools/flow/menu.vue b/src/views/tools/flow/menu.vue
index af13979..1ee08d0 100644
--- a/src/views/tools/flow/menu.vue
+++ b/src/views/tools/flow/menu.vue
@@ -1,38 +1,18 @@
 <template>
 	<div class="menu-panel">
-		<el-icon size="18" title="放大" @click="lf.zoom(true)">
-			<component :is="'el-icon-zoom-in'"/>
-		</el-icon>
-		<el-icon size="18" title="缩小" @click="lf.zoom(false)">
-			<component :is="'el-icon-zoom-out'"/>
-		</el-icon>
-		<el-icon size="18" title="大小还原" @click="lf.resetZoom()">
-			<component :is="'el-icon-refresh-left'"/>
-		</el-icon>
-		<el-icon size="18" title="居中" @click="lf.translateCenter()">
-			<component :is="'el-icon-aim'"/>
-		</el-icon>
-		<el-icon size="18" title="位置还原" @click="lf.resetTranslate()">
-			<component :is="'el-icon-position'"/>
-		</el-icon>
-		<el-icon size="18" title="自动布线" @click="layout">
-			<component :is="'pi-icon-auto-layout'"/>
-		</el-icon>
-		<el-icon :class="{disabled: !canUndo}" size="18" title="上一步" @click="canUndo && lf.undo()">
-			<component :is="'el-icon-back'"/>
-		</el-icon>
-		<el-icon :class="{disabled: !canRedo}" size="18" title="下一步" @click="canRedo && lf.redo()">
-			<component :is="'el-icon-right'"/>
-		</el-icon>
-		<el-icon size="18" title="删除" @click="remove">
-			<component :is="'el-icon-delete'"/>
-		</el-icon>
-		<el-icon size="18" title="小地图" @click="map">
-			<component :is="'el-icon-map-location'"/>
-		</el-icon>
-		<el-icon size="18" title="下载图片" @click="download">
-			<component :is="'el-icon-download'"/>
-		</el-icon>
+		<pi-icon icon="el-icon-zoom-in" size="18" title="放大" @click="lf.zoom(true)"/>
+		<pi-icon icon="el-icon-zoom-out" size="18" title="缩小" @click="lf.zoom(false)"/>
+		<pi-icon icon="el-icon-refresh-left" size="18" title="大小还原" @click="lf.resetZoom()"/>
+		<pi-icon icon="el-icon-aim" size="18" title="居中" @click="lf.translateCenter()"/>
+		<pi-icon icon="el-icon-position" size="18" title="位置还原" @click="lf.resetTranslate()"/>
+		<pi-icon icon="pi-icon-auto-layout" size="18" title="自动布线" @click="layout"/>
+		<pi-icon :class="{disabled: !canUndo}" icon="el-icon-back" size="18" title="上一步"
+				 @click="canUndo && lf.undo()"/>
+		<pi-icon :class="{disabled: !canRedo}" icon="el-icon-right" size="18" title="下一步"
+				 @click="canRedo && lf.redo()"/>
+		<pi-icon icon="el-icon-delete" size="18" title="删除" @click="remove"/>
+		<pi-icon icon="el-icon-map-location" size="18" title="小地图" @click="map"/>
+		<pi-icon icon="el-icon-download" size="18" title="下载图片" @click="download"/>
 	</div>
 </template>
 
diff --git a/src/views/tools/form/right.vue b/src/views/tools/form/right.vue
index 50e558a..ead8c9a 100644
--- a/src/views/tools/form/right.vue
+++ b/src/views/tools/form/right.vue
@@ -53,7 +53,7 @@
 											   :label="op.label">
 									</el-option>
 								</el-select>
-								<pi-icon
+								<pi-icon-select
 									v-else-if="item.type === 'icon'"
 									:model-value="getByPath(form, item.key)"
 									@update:modelValue="val => setByPath(form, item.key, val)"
@@ -130,7 +130,7 @@
 
 <script setup>
 import {computed, ref} from "vue";
-import piIcon from "@/components/piIcon"
+import piIconSelect from "@/components/piIconSelect"
 import piDraggable from "@/components/piDraggable"
 import {fieldEditors, getByPath, setByPath} from "./config"
 import FormBuild from "./formBuild";