d84ec11a32
- 修复 CoiEmpty.vue 中8个图标的语法格式 - 修复 CoiPagination.vue 中4个图标的语法格式 - 将所有 icon-park-outline: 格式改为 icon-park-outline- 格式 - 解决图标渲染错误问题，确保组件正常显示
506 lines
10 KiB
Vue
506 lines
10 KiB
Vue
<template>
|
|
<div class="coi-empty" :class="sizeClass">
|
|
<div class="coi-empty__content">
|
|
<!-- 图标区域 -->
|
|
<div class="coi-empty__icon-wrapper">
|
|
<div class="coi-empty__icon-bg" />
|
|
<NIcon class="coi-empty__icon" :size="iconSize" :color="iconColor">
|
|
<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>
|
|
|
|
<!-- 文字区域 -->
|
|
<div class="coi-empty__text">
|
|
<h3 class="coi-empty__title">
|
|
{{ title }}
|
|
</h3>
|
|
<p v-if="description" class="coi-empty__description">
|
|
{{ description }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- 操作按钮区域 -->
|
|
<div v-if="showAction" class="coi-empty__actions">
|
|
<slot name="action">
|
|
<NButton
|
|
v-if="actionText"
|
|
:type="actionType"
|
|
:size="actionButtonSize"
|
|
round
|
|
@click="handleAction"
|
|
>
|
|
<template #icon>
|
|
<NIcon class="coi-empty__action-icon">
|
|
<icon-park-outline-refresh v-if="currentType === 'search'" />
|
|
<icon-park-outline-plus v-else />
|
|
</NIcon>
|
|
</template>
|
|
{{ actionText }}
|
|
</NButton>
|
|
</slot>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 装饰性背景元素 -->
|
|
<div class="coi-empty__decorations">
|
|
<div class="decoration-circle decoration-circle--1" />
|
|
<div class="decoration-circle decoration-circle--2" />
|
|
<div class="decoration-circle decoration-circle--3" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { NButton, NIcon } from 'naive-ui'
|
|
|
|
export interface CoiEmptyProps {
|
|
type?: 'default' | 'search' | 'network' | 'permission' | 'custom'
|
|
title?: string
|
|
description?: string
|
|
iconSize?: number
|
|
iconColor?: string
|
|
icon?: any
|
|
showAction?: boolean
|
|
actionText?: string
|
|
actionType?: 'default' | 'primary' | 'info' | 'success' | 'warning' | 'error'
|
|
actionSize?: 'tiny' | 'small' | 'medium' | 'large'
|
|
size?: 'small' | 'medium' | 'large'
|
|
}
|
|
|
|
interface CoiEmptyEmits {
|
|
action: []
|
|
}
|
|
|
|
const props = withDefaults(defineProps<CoiEmptyProps>(), {
|
|
type: 'default',
|
|
title: '',
|
|
description: '',
|
|
iconSize: 0,
|
|
iconColor: '#d1d5db',
|
|
icon: undefined,
|
|
showAction: false,
|
|
actionText: '',
|
|
actionType: 'primary',
|
|
actionSize: 'medium',
|
|
size: 'medium',
|
|
})
|
|
|
|
const emit = defineEmits<CoiEmptyEmits>()
|
|
|
|
// 预定义的类型配置
|
|
const typeConfigs = {
|
|
default: {
|
|
title: '暂无数据',
|
|
description: '当前没有可显示的数据',
|
|
},
|
|
search: {
|
|
title: '搜索无结果',
|
|
description: '未找到符合条件的数据，请尝试调整搜索条件',
|
|
},
|
|
network: {
|
|
title: '网络异常',
|
|
description: '网络连接出现问题，请检查网络连接后重试',
|
|
},
|
|
permission: {
|
|
title: '暂无权限',
|
|
description: '您没有访问此内容的权限，请联系管理员',
|
|
},
|
|
custom: {
|
|
title: '自定义状态',
|
|
description: '这是一个自定义的空状态',
|
|
},
|
|
}
|
|
|
|
// 当前类型
|
|
const currentType = computed(() => props.type)
|
|
|
|
// 计算标题
|
|
const title = computed(() => {
|
|
if (props.title) {
|
|
return props.title
|
|
}
|
|
return typeConfigs[props.type].title
|
|
})
|
|
|
|
// 计算描述
|
|
const description = computed(() => {
|
|
if (props.description) {
|
|
return props.description
|
|
}
|
|
return typeConfigs[props.type].description
|
|
})
|
|
|
|
// 尺寸相关计算属性
|
|
const sizeClass = computed(() => `coi-empty--${props.size}`)
|
|
|
|
const iconSize = computed(() => {
|
|
if (props.iconSize > 0) {
|
|
return props.iconSize
|
|
}
|
|
const sizeMap = {
|
|
small: 60,
|
|
medium: 80,
|
|
large: 100,
|
|
}
|
|
return sizeMap[props.size]
|
|
})
|
|
|
|
const actionButtonSize = computed(() => {
|
|
if (props.actionSize !== 'medium') {
|
|
return props.actionSize
|
|
}
|
|
const sizeMap = {
|
|
small: 'small',
|
|
medium: 'medium',
|
|
large: 'large',
|
|
}
|
|
return sizeMap[props.size] as any
|
|
})
|
|
|
|
// 处理操作按钮点击
|
|
function handleAction() {
|
|
emit('action')
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.coi-empty {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: linear-gradient(135deg, #fafbfc 0%, #f8fafc 100%);
|
|
}
|
|
|
|
.coi-empty__content {
|
|
text-align: center;
|
|
max-width: 400px;
|
|
position: relative;
|
|
z-index: 2;
|
|
animation: fadeInUp 0.6s ease-out;
|
|
}
|
|
|
|
.coi-empty__icon-wrapper {
|
|
position: relative;
|
|
display: inline-block;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.coi-empty__icon-bg {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 120px;
|
|
height: 120px;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle, color-mix(in srgb, var(--primary-color) 10%, transparent) 0%, color-mix(in srgb, var(--primary-color) 5%, transparent) 100%);
|
|
opacity: 0.8;
|
|
animation: pulse 3s ease-in-out infinite;
|
|
}
|
|
|
|
.coi-empty__icon {
|
|
position: relative;
|
|
z-index: 1;
|
|
color: var(--primary-color);
|
|
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
|
|
animation: float 4s ease-in-out infinite;
|
|
}
|
|
|
|
.coi-empty__text {
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.coi-empty__title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #374151;
|
|
margin: 0 0 12px 0;
|
|
line-height: 1.5;
|
|
letter-spacing: 0.5px;
|
|
animation: slideInDown 0.6s ease-out 0.2s both;
|
|
}
|
|
|
|
.coi-empty__description {
|
|
font-size: 14px;
|
|
color: #6b7280;
|
|
margin: 0;
|
|
line-height: 1.6;
|
|
animation: slideInDown 0.6s ease-out 0.4s both;
|
|
}
|
|
|
|
.coi-empty__actions {
|
|
animation: slideInUp 0.6s ease-out 0.6s both;
|
|
}
|
|
|
|
.coi-empty__action-icon {
|
|
margin-right: 4px;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
/* 装饰性背景元素 */
|
|
.coi-empty__decorations {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
.decoration-circle {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle, color-mix(in srgb, var(--primary-color) 5%, transparent) 0%, color-mix(in srgb, var(--primary-color) 3%, transparent) 100%);
|
|
opacity: 0.6;
|
|
animation: float 6s ease-in-out infinite;
|
|
}
|
|
|
|
.decoration-circle--1 {
|
|
width: 80px;
|
|
height: 80px;
|
|
top: 20%;
|
|
left: 10%;
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.decoration-circle--2 {
|
|
width: 60px;
|
|
height: 60px;
|
|
top: 60%;
|
|
right: 15%;
|
|
animation-delay: 2s;
|
|
}
|
|
|
|
.decoration-circle--3 {
|
|
width: 40px;
|
|
height: 40px;
|
|
top: 80%;
|
|
left: 20%;
|
|
animation-delay: 4s;
|
|
}
|
|
|
|
/* 小尺寸 */
|
|
.coi-empty--small {
|
|
min-height: 300px;
|
|
padding: 30px 15px;
|
|
}
|
|
|
|
.coi-empty--small .coi-empty__content {
|
|
max-width: 300px;
|
|
}
|
|
|
|
.coi-empty--small .coi-empty__icon-wrapper {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.coi-empty--small .coi-empty__icon-bg {
|
|
width: 90px;
|
|
height: 90px;
|
|
}
|
|
|
|
.coi-empty--small .coi-empty__text {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.coi-empty--small .coi-empty__title {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.coi-empty--small .coi-empty__description {
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* 中尺寸（默认） */
|
|
.coi-empty--medium {
|
|
min-height: 400px;
|
|
padding: 40px 20px;
|
|
}
|
|
|
|
.coi-empty--medium .coi-empty__content {
|
|
max-width: 400px;
|
|
}
|
|
|
|
.coi-empty--medium .coi-empty__icon-wrapper {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.coi-empty--medium .coi-empty__icon-bg {
|
|
width: 120px;
|
|
height: 120px;
|
|
}
|
|
|
|
.coi-empty--medium .coi-empty__text {
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.coi-empty--medium .coi-empty__title {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.coi-empty--medium .coi-empty__description {
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* 大尺寸 */
|
|
.coi-empty--large {
|
|
min-height: 500px;
|
|
padding: 50px 25px;
|
|
}
|
|
|
|
.coi-empty--large .coi-empty__content {
|
|
max-width: 500px;
|
|
}
|
|
|
|
.coi-empty--large .coi-empty__icon-wrapper {
|
|
margin-bottom: 28px;
|
|
}
|
|
|
|
.coi-empty--large .coi-empty__icon-bg {
|
|
width: 150px;
|
|
height: 150px;
|
|
}
|
|
|
|
.coi-empty--large .coi-empty__text {
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.coi-empty--large .coi-empty__title {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.coi-empty--large .coi-empty__description {
|
|
font-size: 15px;
|
|
}
|
|
|
|
/* 动画定义 */
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideInDown {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%,
|
|
100% {
|
|
transform: translate(-50%, -50%) scale(1);
|
|
opacity: 0.8;
|
|
}
|
|
50% {
|
|
transform: translate(-50%, -50%) scale(1.05);
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
|
|
@keyframes float {
|
|
0%,
|
|
100% {
|
|
transform: translateY(0px);
|
|
}
|
|
50% {
|
|
transform: translateY(-10px);
|
|
}
|
|
}
|
|
|
|
/* 深色模式支持 */
|
|
@media (prefers-color-scheme: dark) {
|
|
.coi-empty {
|
|
background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
|
|
}
|
|
|
|
.coi-empty__icon-bg {
|
|
background: radial-gradient(circle, color-mix(in srgb, var(--primary-color) 20%, transparent) 0%, color-mix(in srgb, var(--primary-color) 10%, transparent) 100%);
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.coi-empty__icon {
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.coi-empty__title {
|
|
color: #e5e7eb;
|
|
}
|
|
|
|
.coi-empty__description {
|
|
color: #9ca3af;
|
|
}
|
|
|
|
.decoration-circle {
|
|
background: radial-gradient(circle, color-mix(in srgb, var(--primary-color) 8%, transparent) 0%, color-mix(in srgb, var(--primary-color) 5%, transparent) 100%);
|
|
opacity: 0.4;
|
|
}
|
|
|
|
}
|
|
|
|
/* 响应式设计 */
|
|
@media (max-width: 640px) {
|
|
.coi-empty {
|
|
min-height: 320px;
|
|
padding: 32px 16px;
|
|
}
|
|
|
|
.coi-empty__title {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.coi-empty__description {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.coi-empty__icon-bg {
|
|
width: 100px !important;
|
|
height: 100px !important;
|
|
}
|
|
}
|
|
|
|
/* 减少动画模式 */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.coi-empty__content,
|
|
.coi-empty__title,
|
|
.coi-empty__description,
|
|
.coi-empty__actions,
|
|
.coi-empty__icon-bg,
|
|
.coi-empty__icon,
|
|
.decoration-circle {
|
|
animation: none !important;
|
|
}
|
|
|
|
}
|
|
</style>
|