feat(component): 新增NovaEmpty空状态组件
新增功能： - 创建通用空状态组件，支持多种显示模式 - 支持搜索无结果和默认空状态两种类型 - 提供自定义标题、描述和操作按钮 - 集成图标显示，增强视觉表现力 - 支持不同尺寸适配(small/medium/large) 设计特性： - 采用渐变色按钮，与主题色保持一致 - 按钮支持悬停动效和光晕效果 - 响应式布局，适配不同屏幕尺寸 - 支持插槽自定义操作区域内容 使用场景： - 数据表格无数据时的友好提示 - 搜索结果为空时的引导操作 - 列表页面初始状态的用户指引
This commit is contained in:
Leo
parent
8ea41f17b6
commit
72cc811aae
575
src/components/common/NovaEmpty.vue
Normal file
575
src/components/common/NovaEmpty.vue
Normal file
@ -0,0 +1,575 @@
|
||||
<template>
|
||||
<div class="nova-empty" :class="sizeClass">
|
||||
<div class="nova-empty__content">
|
||||
<!-- 图标区域 -->
|
||||
<div class="nova-empty__icon-wrapper">
|
||||
<div class="nova-empty__icon-bg" />
|
||||
<NIcon class="nova-empty__icon" :size="iconSize" :color="iconColor">
|
||||
<component :is="iconComponent" />
|
||||
</NIcon>
|
||||
</div>
|
||||
|
||||
<!-- 文字区域 -->
|
||||
<div class="nova-empty__text">
|
||||
<h3 class="nova-empty__title">
|
||||
{{ title }}
|
||||
</h3>
|
||||
<p v-if="description" class="nova-empty__description">
|
||||
{{ description }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮区域 -->
|
||||
<div v-if="showAction" class="nova-empty__actions">
|
||||
<slot name="action">
|
||||
<NButton
|
||||
v-if="actionText"
|
||||
:type="actionType"
|
||||
:size="actionButtonSize"
|
||||
round
|
||||
class="nova-empty__action-btn"
|
||||
@click="handleAction"
|
||||
>
|
||||
<template v-if="actionIcon" #icon>
|
||||
<NIcon class="nova-empty__action-icon">
|
||||
<component :is="actionIconComponent" />
|
||||
</NIcon>
|
||||
</template>
|
||||
{{ actionText }}
|
||||
</NButton>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 装饰性背景元素 -->
|
||||
<div class="nova-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 NovaEmptyProps {
|
||||
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'
|
||||
actionIcon?: any
|
||||
size?: 'small' | 'medium' | 'large'
|
||||
}
|
||||
|
||||
interface NovaEmptyEmits {
|
||||
action: []
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<NovaEmptyProps>(), {
|
||||
type: 'default',
|
||||
title: '',
|
||||
description: '',
|
||||
iconSize: 0,
|
||||
iconColor: '#d1d5db',
|
||||
icon: undefined,
|
||||
showAction: false,
|
||||
actionText: '',
|
||||
actionType: 'primary',
|
||||
actionSize: 'medium',
|
||||
actionIcon: undefined,
|
||||
size: 'medium',
|
||||
})
|
||||
|
||||
const emit = defineEmits<NovaEmptyEmits>()
|
||||
|
||||
// 预定义的类型配置
|
||||
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 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(() => `nova-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
|
||||
})
|
||||
|
||||
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')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.nova-empty {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, #fafbfc 0%, #f8fafc 100%);
|
||||
}
|
||||
|
||||
.nova-empty__content {
|
||||
text-align: center;
|
||||
max-width: 400px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
animation: fadeInUp 0.6s ease-out;
|
||||
}
|
||||
|
||||
.nova-empty__icon-wrapper {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.nova-empty__icon-bg {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
|
||||
opacity: 0.8;
|
||||
animation: pulse 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.nova-empty__icon {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
color: #8b5cf6;
|
||||
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
|
||||
animation: float 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.nova-empty__text {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.nova-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;
|
||||
}
|
||||
|
||||
.nova-empty__description {
|
||||
font-size: 14px;
|
||||
color: #6b7280;
|
||||
margin: 0;
|
||||
line-height: 1.6;
|
||||
animation: slideInDown 0.6s ease-out 0.4s both;
|
||||
}
|
||||
|
||||
.nova-empty__actions {
|
||||
animation: slideInUp 0.6s ease-out 0.6s both;
|
||||
}
|
||||
|
||||
.nova-empty__action-btn {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.nova-empty__action-btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
|
||||
transition: left 0.6s ease;
|
||||
}
|
||||
|
||||
.nova-empty__action-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.nova-empty__action-btn:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.nova-empty__action-icon {
|
||||
margin-right: 4px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.nova-empty__action-btn:hover .nova-empty__action-icon {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* 装饰性背景元素 */
|
||||
.nova-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: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(139, 92, 246, 0.05) 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;
|
||||
}
|
||||
|
||||
/* 小尺寸 */
|
||||
.nova-empty--small {
|
||||
min-height: 300px;
|
||||
padding: 30px 15px;
|
||||
}
|
||||
|
||||
.nova-empty--small .nova-empty__content {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.nova-empty--small .nova-empty__icon-wrapper {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.nova-empty--small .nova-empty__icon-bg {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
}
|
||||
|
||||
.nova-empty--small .nova-empty__text {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.nova-empty--small .nova-empty__title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.nova-empty--small .nova-empty__description {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* 中尺寸（默认） */
|
||||
.nova-empty--medium {
|
||||
min-height: 400px;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.nova-empty--medium .nova-empty__content {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.nova-empty--medium .nova-empty__icon-wrapper {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.nova-empty--medium .nova-empty__icon-bg {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.nova-empty--medium .nova-empty__text {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.nova-empty--medium .nova-empty__title {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.nova-empty--medium .nova-empty__description {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 大尺寸 */
|
||||
.nova-empty--large {
|
||||
min-height: 500px;
|
||||
padding: 50px 25px;
|
||||
}
|
||||
|
||||
.nova-empty--large .nova-empty__content {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.nova-empty--large .nova-empty__icon-wrapper {
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.nova-empty--large .nova-empty__icon-bg {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.nova-empty--large .nova-empty__text {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.nova-empty--large .nova-empty__title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.nova-empty--large .nova-empty__description {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.nova-empty--large .nova-empty__action-btn {
|
||||
padding: 14px 28px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 动画定义 */
|
||||
@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) {
|
||||
.nova-empty {
|
||||
background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
|
||||
}
|
||||
|
||||
.nova-empty__icon-bg {
|
||||
background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.nova-empty__icon {
|
||||
color: #a78bfa;
|
||||
}
|
||||
|
||||
.nova-empty__title {
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
.nova-empty__description {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.decoration-circle {
|
||||
background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%);
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.nova-empty__action-btn {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.nova-empty__action-btn:hover {
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 640px) {
|
||||
.nova-empty {
|
||||
min-height: 320px;
|
||||
padding: 32px 16px;
|
||||
}
|
||||
|
||||
.nova-empty__title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.nova-empty__description {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.nova-empty__icon-bg {
|
||||
width: 100px !important;
|
||||
height: 100px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 减少动画模式 */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.nova-empty__content,
|
||||
.nova-empty__title,
|
||||
.nova-empty__description,
|
||||
.nova-empty__actions,
|
||||
.nova-empty__icon-bg,
|
||||
.nova-empty__icon,
|
||||
.decoration-circle {
|
||||
animation: none !important;
|
||||
}
|
||||
|
||||
.nova-empty__action-btn {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
.nova-empty__action-btn:hover {
|
||||
transform: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user