cfn
/
admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

icon优化

This commit is contained in:
zhang zhuo 2026-01-25 19:15:47 +08:00
parent e42e0444c3
commit b6bd845b73
8 changed files with 214 additions and 208 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

182
src/components/piIcon/index.vue
View File

@ -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>

178
src/components/piIconSelect/index.vue Normal file
View File

@ -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>

2
src/pi.ts
View File

@ -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)

4
src/views/system/menu/quick.vue
View File

@ -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']);

4
src/views/system/menu/save.vue
View File

@ -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";

2
src/views/system/role/save.vue
View File

@ -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");
}
//显示

46
src/views/tools/flow/menu.vue
View File

@ -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>

4
src/views/tools/form/right.vue
View File

@ -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";