初始化
This commit is contained in:
171
mokee-gateway-web/src/components/IconPicker.vue
Normal file
171
mokee-gateway-web/src/components/IconPicker.vue
Normal file
@@ -0,0 +1,171 @@
|
||||
<template>
|
||||
<div class="icon-picker">
|
||||
<div class="icon-trigger" @click="visible = true">
|
||||
<template v-if="modelValue">
|
||||
<img v-if="isUrl(modelValue)" :src="modelValue" class="trigger-img" />
|
||||
<el-icon v-else :size="20"><component :is="Icons[modelValue]" /></el-icon>
|
||||
</template>
|
||||
<span v-else class="placeholder">选择图标</span>
|
||||
<el-icon class="arrow"><ArrowDown /></el-icon>
|
||||
</div>
|
||||
|
||||
<Teleport to="body">
|
||||
<div v-if="visible" class="icon-overlay" @click="visible = false">
|
||||
<div class="icon-popup" @click.stop>
|
||||
<div class="popup-header">
|
||||
<span>选择图标</span>
|
||||
<el-radio-group v-model="tab" size="small">
|
||||
<el-radio-button value="builtin">内置图标</el-radio-button>
|
||||
<el-radio-button value="upload">已上传</el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-input v-model="search" placeholder="搜索..." size="small" clearable style="width:200px" />
|
||||
<span class="count">{{ filtered.length }} 个</span>
|
||||
<el-icon class="close-btn" :size="20" @click="visible = false"><Close /></el-icon>
|
||||
</div>
|
||||
|
||||
<!-- 内置图标 -->
|
||||
<div class="icon-grid" v-if="tab === 'builtin' && filtered.length > 0">
|
||||
<div
|
||||
v-for="ico in filtered" :key="ico"
|
||||
:class="['icon-cell', { active: modelValue === ico }]"
|
||||
@click="select(ico)"
|
||||
:title="ico"
|
||||
>
|
||||
<el-icon :size="36"><component :is="Icons[ico]" /></el-icon>
|
||||
<span class="icon-name">{{ ico }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 已上传图标 -->
|
||||
<div class="icon-grid uploaded-grid" v-if="tab === 'upload' && filteredUploads.length > 0">
|
||||
<div
|
||||
v-for="item in filteredUploads" :key="item.id"
|
||||
:class="['icon-cell', { active: modelValue === getFileUrl(item.id) }]"
|
||||
@click="select(getFileUrl(item.id))"
|
||||
:title="item.fileName"
|
||||
>
|
||||
<img :src="getFileUrl(item.id)" class="upload-icon-thumb" />
|
||||
<span class="icon-name">{{ item.fileName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-empty v-if="(tab === 'builtin' && filtered.length === 0) || (tab === 'upload' && filteredUploads.length === 0)"
|
||||
description="无匹配图标" :image-size="60" />
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { ArrowDown, Close } from '@element-plus/icons-vue'
|
||||
import * as Icons from '@element-plus/icons-vue'
|
||||
import request from '@/utils/request'
|
||||
|
||||
const props = defineProps<{ modelValue: string }>()
|
||||
const emit = defineEmits<{ (e: 'update:modelValue', v: string): void }>()
|
||||
|
||||
const visible = ref(false)
|
||||
const search = ref('')
|
||||
const tab = ref('builtin')
|
||||
const uploadedIcons = ref<{id:string, fileName:string}[]>([])
|
||||
|
||||
const gatewayUrl = import.meta.env.VITE_GATEWAY_URL || ''
|
||||
|
||||
function isUrl(v: string) { return v && (v.startsWith('http') || v.startsWith('/zgapi')) }
|
||||
function getFileUrl(id: string) { return `${gatewayUrl}/zgapi/v1/admin/file/${id}/view` }
|
||||
|
||||
// 内置图标
|
||||
const builtinIcons = Object.keys(Icons).filter(k =>
|
||||
k !== 'default' && !k.startsWith('_') && k !== 'Menu'
|
||||
)
|
||||
|
||||
const filtered = computed(() => {
|
||||
const s = search.value.toLowerCase()
|
||||
return s ? builtinIcons.filter(i => i.toLowerCase().includes(s)) : builtinIcons
|
||||
})
|
||||
|
||||
// 已上传图标
|
||||
const filteredUploads = computed(() => {
|
||||
const s = search.value.toLowerCase()
|
||||
return s
|
||||
? uploadedIcons.value.filter(i => i.fileName.toLowerCase().includes(s))
|
||||
: uploadedIcons.value
|
||||
})
|
||||
|
||||
async function fetchUploadedIcons() {
|
||||
try {
|
||||
const res = await request.get('/zgapi/v1/admin/file/list', { params: { fileType: 'icon' } })
|
||||
uploadedIcons.value = res.data || []
|
||||
} catch {}
|
||||
}
|
||||
|
||||
function select(val: string) {
|
||||
emit('update:modelValue', val)
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
onMounted(fetchUploadedIcons)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.icon-picker { width: 100%; }
|
||||
.icon-trigger {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
height: 36px; padding: 0 12px;
|
||||
background: var(--bg-surface); border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast);
|
||||
}
|
||||
.icon-trigger:hover { border-color: var(--color-primary); }
|
||||
.placeholder { font-size: 13px; color: var(--text-muted); flex: 1; }
|
||||
.arrow { color: var(--text-muted); flex-shrink: 0; }
|
||||
|
||||
.icon-overlay {
|
||||
position: fixed; inset: 0; z-index: 9000;
|
||||
background: rgba(0,0,0,0.35);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.icon-popup {
|
||||
width: 920px; max-height: 640px;
|
||||
background: var(--bg-surface); border-radius: var(--radius-xl);
|
||||
box-shadow: var(--shadow-xl); overflow: hidden;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
.popup-header {
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
padding: 16px 20px; border-bottom: 1px solid var(--border-light);
|
||||
font-weight: 600; font-size: 15px; flex-shrink: 0;
|
||||
}
|
||||
.popup-header span { flex: 1; }
|
||||
.count { font-size: 12px; color: var(--text-muted); font-weight: 400; }
|
||||
.close-btn { cursor: pointer; color: var(--text-muted); flex-shrink: 0; }
|
||||
.close-btn:hover { color: var(--text-primary); }
|
||||
|
||||
.icon-grid {
|
||||
flex: 1; overflow-y: auto; padding: 20px;
|
||||
display: grid; grid-template-columns: repeat(10, 1fr); gap: 10px;
|
||||
}
|
||||
.icon-cell {
|
||||
display: flex; flex-direction: column; align-items: center; gap: 6px;
|
||||
padding: 14px 6px; border-radius: var(--radius-md); cursor: pointer;
|
||||
transition: all var(--transition-fast); border: 2px solid transparent;
|
||||
}
|
||||
.icon-cell:hover { background: var(--bg-hover); border-color: var(--border-color); }
|
||||
.icon-cell.active { background: var(--color-primary-bg); border-color: var(--color-primary); color: var(--color-primary); }
|
||||
.icon-name { font-size: 10px; color: var(--text-muted); text-align: center; word-break: break-all; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
|
||||
.icon-cell.active .icon-name { color: var(--color-primary); }
|
||||
|
||||
/* 触发器中的图片预览 */
|
||||
.trigger-img { width:20px; height:20px; object-fit:contain; border-radius:3px; }
|
||||
|
||||
/* 已上传图标 */
|
||||
.uploaded-grid { grid-template-columns: repeat(8, 1fr); }
|
||||
.upload-icon-thumb { width:48px; height:48px; object-fit:contain; border-radius:var(--radius-sm); }
|
||||
|
||||
@media (max-width:960px) {
|
||||
.icon-popup { width:98vw; max-height:90vh; }
|
||||
.icon-grid { grid-template-columns: repeat(6, 1fr); }
|
||||
.uploaded-grid { grid-template-columns: repeat(4, 1fr); }
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user