c615a4264d
- 改进ConfirmDialog对话框组件 - 增强DataTable表格组件功能和响应式布局 - 优化EmptyState空状态组件 - 完善SubscriptionProgressMini订阅进度组件
89 lines
2.3 KiB
Vue
89 lines
2.3 KiB
Vue
<template>
|
|
<div class="empty-state">
|
|
<!-- Icon -->
|
|
<div
|
|
class="mb-5 flex h-20 w-20 items-center justify-center rounded-2xl bg-gray-100 dark:bg-dark-800"
|
|
>
|
|
<slot name="icon">
|
|
<component v-if="icon" :is="icon" class="empty-state-icon h-10 w-10" aria-hidden="true" />
|
|
<svg
|
|
v-else
|
|
class="empty-state-icon h-10 w-10"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
|
|
/>
|
|
</svg>
|
|
</slot>
|
|
</div>
|
|
|
|
<!-- Title -->
|
|
<h3 class="empty-state-title">
|
|
{{ displayTitle }}
|
|
</h3>
|
|
|
|
<!-- Description -->
|
|
<p class="empty-state-description">
|
|
{{ description }}
|
|
</p>
|
|
|
|
<!-- Action -->
|
|
<div v-if="actionText || $slots.action" class="mt-6">
|
|
<slot name="action">
|
|
<component
|
|
:is="actionTo ? 'RouterLink' : 'button'"
|
|
v-if="actionText"
|
|
:to="actionTo"
|
|
@click="!actionTo && $emit('action')"
|
|
class="btn btn-primary"
|
|
>
|
|
<svg
|
|
v-if="actionIcon"
|
|
class="mr-2 h-5 w-5"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
>
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
|
</svg>
|
|
{{ actionText }}
|
|
</component>
|
|
</slot>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
import type { Component } from 'vue'
|
|
|
|
const { t } = useI18n()
|
|
|
|
interface Props {
|
|
icon?: Component | string
|
|
title?: string
|
|
description?: string
|
|
actionText?: string
|
|
actionTo?: string | object
|
|
actionIcon?: boolean
|
|
message?: string
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
description: '',
|
|
actionIcon: true
|
|
})
|
|
|
|
const displayTitle = computed(() => props.title || t('common.noData'))
|
|
|
|
defineEmits(['action'])
|
|
</script>
|