fix(component): 修复CoiEmpty组件图标显示问题

- 移除动态组件引用,直接使用icon-park-outline图标组件
- 优化图标显示逻辑,根据不同类型显示对应图标
- 移除actionIcon属性,简化组件接口
- 确保图标在模板中正确渲染
This commit is contained in:
Leo 2025-07-07 22:35:23 +08:00
parent aaf0338f1c
commit 2678b5e358

View File

@ -5,7 +5,12 @@
<div class="coi-empty__icon-wrapper">
<div class="coi-empty__icon-bg" />
<NIcon class="coi-empty__icon" :size="iconSize" :color="iconColor">
<component :is="iconComponent" />
<icon-park-outline:inbox v-if="currentType === 'default'" />
<icon-park-outline:search v-else-if="currentType === 'search'" />
<icon-park-outline:folder-close v-else-if="currentType === 'network'" />
<icon-park-outline:lock v-else-if="currentType === 'permission'" />
<icon-park-outline:folder-close v-else-if="currentType === 'custom'" />
<icon-park-outline:inbox v-else />
</NIcon>
</div>
@ -30,9 +35,10 @@
class="coi-empty__action-btn"
@click="handleAction"
>
<template v-if="actionIcon" #icon>
<template #icon>
<NIcon class="coi-empty__action-icon">
<component :is="actionIconComponent" />
<icon-park-outline:refresh v-if="currentType === 'search'" />
<icon-park-outline:plus v-else />
</NIcon>
</template>
{{ actionText }}
@ -65,7 +71,6 @@ export interface CoiEmptyProps {
actionText?: string
actionType?: 'default' | 'primary' | 'info' | 'success' | 'warning' | 'error'
actionSize?: 'tiny' | 'small' | 'medium' | 'large'
actionIcon?: any
size?: 'small' | 'medium' | 'large'
}
@ -84,7 +89,6 @@ const props = withDefaults(defineProps<CoiEmptyProps>(), {
actionText: '',
actionType: 'primary',
actionSize: 'medium',
actionIcon: undefined,
size: 'medium',
})
@ -95,37 +99,27 @@ const typeConfigs = {
default: {
title: '暂无数据',
description: '当前没有可显示的数据',
icon: 'icon-park-outline:inbox',
},
search: {
title: '搜索无结果',
description: '未找到符合条件的数据,请尝试调整搜索条件',
icon: 'icon-park-outline:search',
},
network: {
title: '网络异常',
description: '网络连接出现问题,请检查网络连接后重试',
icon: 'icon-park-outline:wifi-error',
},
permission: {
title: '暂无权限',
description: '您没有访问此内容的权限,请联系管理员',
icon: 'icon-park-outline:lock',
},
custom: {
title: '自定义状态',
description: '这是一个自定义的空状态',
icon: 'icon-park-outline:folder-close',
},
}
//
const iconComponent = computed(() => {
if (props.icon) {
return props.icon
}
return typeConfigs[props.type].icon
})
//
const currentType = computed(() => props.type)
//
const title = computed(() => {
@ -170,17 +164,6 @@ const actionButtonSize = computed(() => {
return sizeMap[props.size] as any
})
const actionIconComponent = computed(() => {
if (props.actionIcon) {
return props.actionIcon
}
//
if (props.type === 'search') {
return 'icon-park-outline:refresh'
}
return 'icon-park-outline:plus'
})
//
function handleAction() {
emit('action')