From 72cc811aaeba0a8c7788b2988f52039f75cd9708 Mon Sep 17 00:00:00 2001
From: Leo <98382335+gaoziman@users.noreply.github.com>
Date: Mon, 7 Jul 2025 14:28:59 +0800
Subject: [PATCH] =?UTF-8?q?feat(component):=20=E6=96=B0=E5=A2=9ENovaEmpty?=
 =?UTF-8?q?=E7=A9=BA=E7=8A=B6=E6=80=81=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增功能：
- 创建通用空状态组件，支持多种显示模式
- 支持搜索无结果和默认空状态两种类型
- 提供自定义标题、描述和操作按钮
- 集成图标显示，增强视觉表现力
- 支持不同尺寸适配(small/medium/large)

设计特性：
- 采用渐变色按钮，与主题色保持一致
- 按钮支持悬停动效和光晕效果
- 响应式布局，适配不同屏幕尺寸
- 支持插槽自定义操作区域内容

使用场景：
- 数据表格无数据时的友好提示
- 搜索结果为空时的引导操作
- 列表页面初始状态的用户指引
---
 src/components/common/NovaEmpty.vue | 575 ++++++++++++++++++++++++++++
 1 file changed, 575 insertions(+)
 create mode 100644 src/components/common/NovaEmpty.vue

diff --git a/src/components/common/NovaEmpty.vue b/src/components/common/NovaEmpty.vue
new file mode 100644
index 0000000..4abba30
--- /dev/null
+++ b/src/components/common/NovaEmpty.vue
@@ -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>