From 9459476d8216e70d0ac9f1c9712c6c0a5ceb40f0 Mon Sep 17 00:00:00 2001
From: caoxiaozhu <caoxiaozhu@users.noreply.github.com>
Date: Wed, 13 May 2026 06:53:02 +0000
Subject: [PATCH] feat(web): add TableEmptyState component

- components/shared/TableEmptyState.vue: add shared empty state component
---
 web/src/components/shared/TableEmptyState.vue | 331 ++++++++++++++++++
 1 file changed, 331 insertions(+)
 create mode 100644 web/src/components/shared/TableEmptyState.vue

diff --git a/web/src/components/shared/TableEmptyState.vue b/web/src/components/shared/TableEmptyState.vue
new file mode 100644
index 0000000..81ef71a
--- /dev/null
+++ b/web/src/components/shared/TableEmptyState.vue
@@ -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>