feat(web): add TableEmptyState component
- components/shared/TableEmptyState.vue: add shared empty state component
This commit is contained in:
caoxiaozhu
331
web/src/components/shared/TableEmptyState.vue
Normal file
331
web/src/components/shared/TableEmptyState.vue
Normal file
@@ -0,0 +1,331 @@
|
||||
<template>
|
||||
<div class="table-empty-state" :class="tone">
|
||||
<div class="table-empty-state__art" aria-hidden="true">
|
||||
<span class="table-empty-state__glow"></span>
|
||||
<span class="table-empty-state__halo halo-a"></span>
|
||||
<span class="table-empty-state__halo halo-b"></span>
|
||||
|
||||
<div class="table-empty-state__sheet back">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
|
||||
<div class="table-empty-state__badge">
|
||||
<i :class="icon"></i>
|
||||
</div>
|
||||
|
||||
<div class="table-empty-state__sheet front">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<small>{{ artLabel }}</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-empty-state__copy">
|
||||
<span v-if="eyebrow" class="table-empty-state__eyebrow">{{ eyebrow }}</span>
|
||||
<strong>{{ title }}</strong>
|
||||
<p v-if="description">{{ description }}</p>
|
||||
</div>
|
||||
|
||||
<div v-if="tips.length" class="table-empty-state__tips">
|
||||
<span v-for="tip in tips" :key="tip">{{ tip }}</span>
|
||||
</div>
|
||||
|
||||
<button
|
||||
v-if="actionLabel"
|
||||
type="button"
|
||||
class="table-empty-state__action"
|
||||
@click="$emit('action')"
|
||||
>
|
||||
<i v-if="actionIcon" :class="actionIcon"></i>
|
||||
<span>{{ actionLabel }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
eyebrow: { type: String, default: '' },
|
||||
title: { type: String, required: true },
|
||||
description: { type: String, default: '' },
|
||||
icon: { type: String, default: 'mdi mdi-inbox-outline' },
|
||||
artLabel: { type: String, default: 'EMPTY' },
|
||||
actionLabel: { type: String, default: '' },
|
||||
actionIcon: { type: String, default: '' },
|
||||
tone: { type: String, default: 'emerald' },
|
||||
tips: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
})
|
||||
|
||||
defineEmits(['action'])
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.table-empty-state {
|
||||
--accent: #10b981;
|
||||
--accent-deep: #059669;
|
||||
--accent-soft: rgba(16, 185, 129, 0.16);
|
||||
--accent-line: rgba(16, 185, 129, 0.24);
|
||||
--accent-mist: rgba(16, 185, 129, 0.08);
|
||||
min-height: clamp(220px, 30vh, 296px);
|
||||
display: grid;
|
||||
align-content: center;
|
||||
justify-items: center;
|
||||
gap: 14px;
|
||||
padding: clamp(22px, 2vw, 28px);
|
||||
text-align: center;
|
||||
background:
|
||||
radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0) 42%),
|
||||
linear-gradient(180deg, #fcfefd 0%, #f4f8f6 100%);
|
||||
}
|
||||
|
||||
.table-empty-state.sky {
|
||||
--accent: #0ea5e9;
|
||||
--accent-deep: #0284c7;
|
||||
--accent-soft: rgba(14, 165, 233, 0.16);
|
||||
--accent-line: rgba(14, 165, 233, 0.24);
|
||||
--accent-mist: rgba(14, 165, 233, 0.08);
|
||||
}
|
||||
|
||||
.table-empty-state.amber {
|
||||
--accent: #f59e0b;
|
||||
--accent-deep: #d97706;
|
||||
--accent-soft: rgba(245, 158, 11, 0.16);
|
||||
--accent-line: rgba(245, 158, 11, 0.24);
|
||||
--accent-mist: rgba(245, 158, 11, 0.08);
|
||||
}
|
||||
|
||||
.table-empty-state.slate {
|
||||
--accent: #64748b;
|
||||
--accent-deep: #475569;
|
||||
--accent-soft: rgba(100, 116, 139, 0.14);
|
||||
--accent-line: rgba(100, 116, 139, 0.22);
|
||||
--accent-mist: rgba(100, 116, 139, 0.08);
|
||||
}
|
||||
|
||||
.table-empty-state__art {
|
||||
position: relative;
|
||||
width: min(240px, 100%);
|
||||
height: 116px;
|
||||
}
|
||||
|
||||
.table-empty-state__glow {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 10px;
|
||||
width: 160px;
|
||||
height: 42px;
|
||||
border-radius: 999px;
|
||||
background: radial-gradient(circle, var(--accent-soft) 0%, rgba(255, 255, 255, 0) 72%);
|
||||
transform: translateX(-50%);
|
||||
filter: blur(2px);
|
||||
}
|
||||
|
||||
.table-empty-state__halo {
|
||||
position: absolute;
|
||||
border: 1px dashed var(--accent-line);
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.table-empty-state__halo.halo-a {
|
||||
inset: 10px 34px 24px;
|
||||
}
|
||||
|
||||
.table-empty-state__halo.halo-b {
|
||||
inset: 28px 58px 6px;
|
||||
}
|
||||
|
||||
.table-empty-state__sheet {
|
||||
position: absolute;
|
||||
width: 124px;
|
||||
height: 82px;
|
||||
padding: 14px 14px 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.88);
|
||||
border-radius: 18px;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 248, 250, 0.94));
|
||||
box-shadow: 0 18px 30px rgba(15, 23, 42, 0.08);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.table-empty-state__sheet.back {
|
||||
top: 22px;
|
||||
left: 22px;
|
||||
transform: rotate(-11deg);
|
||||
opacity: 0.78;
|
||||
}
|
||||
|
||||
.table-empty-state__sheet.front {
|
||||
right: 20px;
|
||||
bottom: 8px;
|
||||
border-color: var(--accent-line);
|
||||
transform: rotate(8deg);
|
||||
}
|
||||
|
||||
.table-empty-state__sheet span {
|
||||
display: block;
|
||||
height: 8px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(90deg, var(--accent-mist), rgba(148, 163, 184, 0.08));
|
||||
}
|
||||
|
||||
.table-empty-state__sheet span + span {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.table-empty-state__sheet span:nth-child(1) {
|
||||
width: 58%;
|
||||
}
|
||||
|
||||
.table-empty-state__sheet span:nth-child(2) {
|
||||
width: 78%;
|
||||
}
|
||||
|
||||
.table-empty-state__sheet span:nth-child(3) {
|
||||
width: 42%;
|
||||
}
|
||||
|
||||
.table-empty-state__sheet small {
|
||||
position: absolute;
|
||||
right: 14px;
|
||||
bottom: 10px;
|
||||
color: var(--accent-deep);
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.table-empty-state__badge {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 18px;
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 1px solid rgba(255, 255, 255, 0.86);
|
||||
border-radius: 24px;
|
||||
background:
|
||||
radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.3) 42%),
|
||||
linear-gradient(135deg, var(--accent), var(--accent-deep));
|
||||
box-shadow: 0 18px 34px var(--accent-soft);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.table-empty-state__badge i {
|
||||
color: #fff;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.table-empty-state__copy {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.table-empty-state__eyebrow {
|
||||
min-height: 24px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
border: 1px solid var(--accent-line);
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.82);
|
||||
color: var(--accent-deep);
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.table-empty-state__copy strong {
|
||||
color: #0f172a;
|
||||
font-size: clamp(18px, 1.6vw, 22px);
|
||||
font-weight: 800;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.table-empty-state__copy p {
|
||||
max-width: 520px;
|
||||
margin: 0;
|
||||
color: #5b6b83;
|
||||
font-size: 13px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.table-empty-state__tips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
max-width: 560px;
|
||||
}
|
||||
|
||||
.table-empty-state__tips span {
|
||||
min-height: 28px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
border: 1px solid rgba(226, 232, 240, 0.92);
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
color: #475569;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.table-empty-state__action {
|
||||
min-height: 40px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 0 16px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(135deg, var(--accent), var(--accent-deep));
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
box-shadow: 0 14px 28px var(--accent-soft);
|
||||
transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
|
||||
}
|
||||
|
||||
.table-empty-state__action:hover {
|
||||
transform: translateY(-1px);
|
||||
filter: saturate(1.02);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.table-empty-state {
|
||||
min-height: 228px;
|
||||
gap: 12px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.table-empty-state__art {
|
||||
width: min(210px, 100%);
|
||||
height: 104px;
|
||||
}
|
||||
|
||||
.table-empty-state__sheet {
|
||||
width: 110px;
|
||||
height: 74px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.table-empty-state__badge {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.table-empty-state__badge i {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user