improve(ui):优化管理端表格效果

2026-08-13 22:20:07 +08:00
1 parent cbffa01689
commit 336ed835f1
@@ -0,0 +1,15 @@
+<!--
+  Base icon: Solar inbox-bold-duotone
+  Source: https://icon-sets.iconify.design/solar/inbox-bold-duotone/
+  License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160" role="img" aria-hidden="true">
+  <path fill="#165dff" d="M32 80c0-34.57 0-51.85 10.74-62.59S70.43 6.67 105 6.67s51.85 0 62.59 10.74S178.33 45.43 178.33 80s0 51.85-10.74 62.59S139.57 153.33 105 153.33s-51.85 0-62.59-10.74S32 114.57 32 80Z" opacity=".12" transform="translate(-25 -25) scale(.9)"/>
+  <g transform="translate(44 44) scale(3)" fill="#165dff">
+    <path d="M1 12C1 6.815 1 4.222 2.611 2.611S6.815 1 12 1s7.778 0 9.389 1.611S23 6.815 23 12s0 7.778-1.611 9.389S17.185 23 12 23s-7.778 0-9.389-1.611S1 17.185 1 12Z" opacity=".5"/>
+    <path d="M2.611 21.389C4.222 23 6.815 23 12 23s7.778 0 9.389-1.611S22.991 17.56 23 13.1h-3.476c-.996 0-1.494 0-1.931.201s-.762.58-1.41 1.336l-.666.777c-.648.756-.972 1.134-1.41 1.335s-.935.201-1.931.201h-.353c-.996 0-1.494 0-1.931-.201s-.762-.579-1.41-1.335l-.666-.777c-.648-.756-.972-1.134-1.41-1.336s-.935-.201-1.931-.201H1c.008 4.46.118 6.796 1.611 8.289Z"/>
+  </g>
+  <path fill="#5ad8d6" d="M80 51.5 83.1 58l6.4 3.1-6.4 3.1-3.1 6.4-3.1-6.4-6.4-3.1 6.4-3.1Zm30 37 2.1 4.4 4.4 2.1-4.4 2.1-2.1 4.4-2.1-4.4-4.4-2.1 4.4-2.1Z"/>
+  <circle cx="55" cy="105" r="3" fill="#f97360"/>
+  <circle cx="121" cy="62" r="2.5" fill="#f97360"/>
+</svg>
@@ -1,10 +1,17 @@
 <script setup lang="ts">
 import TopProgress from '@/components/TopProgress.vue'
+import TableEmpty from '@/components/TableEmpty.vue'
 </script>

 <template>
  <TopProgress />
  <AConfigProvider>
+    <!-- 全局空态：表格（组件 tab 传 component="table"）统一显示插画 + 提示文字；
+         其余场景（非 table 的裸 AEmpty）回退 Arco 默认，避免影响下拉框等小空态 -->
+    <template #empty="{ component }">
+      <TableEmpty v-if="component === 'table'" />
+      <AEmpty v-else in-config-provider />
+    </template>
    <router-view />
  </AConfigProvider>
 </template>
@@ -3,6 +3,7 @@ import { computed, defineComponent, useSlots } from 'vue'
 import type { PropType, VNodeChild } from 'vue'
 import type { TableColumnData } from '@arco-design/web-vue'
 import { useIsMobile } from '@/composables/useIsMobile'
+import TableEmpty from '@/components/TableEmpty.vue'

 /**
 * 响应式数据表格：桌面端（≥ breakpoint）渲染 ATable，移动端渲染卡片列表。
@@ -178,8 +179,12 @@ function onRowClick(record: any, ev: MouseEvent) {
    <template v-for="name in tableSlotNames" :key="name" #[name]="slotProps">
      <slot :name="name" v-bind="slotProps ?? {}" />
    </template>
+    <!-- 空状态：页面未自定义 #empty 时兜底显示插画 + 提示文字（TableEmpty），
+         外层 .arco-table-tr-empty 的全局样式负责最小高度与垂直居中 -->
    <template #empty>
-      <slot name="empty" />
+      <slot name="empty">
+        <TableEmpty />
+      </slot>
    </template>
  </ATable>

@@ -190,10 +195,10 @@ function onRowClick(record: any, ev: MouseEvent) {
      <ASpin />
    </div>

-    <!-- 空状态 -->
+    <!-- 空状态：插画 + 提示文字居中，与桌面端空表观感一致 -->
    <div v-else-if="data.length === 0">
      <slot name="empty">
-        <AEmpty />
+        <TableEmpty />
      </slot>
    </div>

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+/**
+ * 表格空状态：无数据时在表格中央显示插画 + 提示文字。
+ * 通过 240px 最小高度避免空表高度塌陷为 0，并保证内容垂直水平居中。
+ *
+ * 作为两种场景的默认空态：
+ *  1. ResponsiveTable 桌面/移动端 #empty 插槽兜底
+ *  2. App.vue 里 AConfigProvider 的全局 empty 插槽（覆盖所有直接使用 a-table 的页面）
+ *
+ * 用法：
+ *   <TableEmpty description="暂无数据" tip="可尝试调整筛选条件" />
+ *   或传入 #action 插槽放置「新建/重置」按钮
+ */
+withDefaults(
+  defineProps<{
+    description?: string
+    tip?: string
+  }>(),
+  {
+    description: '暂无数据',
+    tip: '',
+  },
+)
+</script>
+
+<template>
+  <div class="table-empty">
+    <img
+      src="/empty-state.svg"
+      alt=""
+      aria-hidden="true"
+      class="table-empty__illustration"
+    />
+    <p class="table-empty__description">{{ description }}</p>
+    <p v-if="tip" class="table-empty__tip">{{ tip }}</p>
+    <slot name="action" />
+  </div>
+</template>
+
+<style scoped>
+.table-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 240px;
+  padding: 24px 16px;
+}
+
+.table-empty__illustration {
+  width: 136px;
+  max-width: 46vw;
+  height: auto;
+  margin-bottom: 16px;
+  animation: table-empty-bob 3s ease-in-out infinite;
+}
+
+@keyframes table-empty-bob {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-4px); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .table-empty__illustration {
+    animation: none;
+  }
+}
+
+.table-empty__description {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--color-text-2);
+}
+
+.table-empty__tip {
+  margin: 4px 0 0;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--color-text-3);
+}
+</style>
@@ -250,6 +250,15 @@ body {
  background: var(--ta-primary-light) !important;
 }

+/* 表格空状态：空数据时图标在表格中央竖直居中，并保留一个最低高度，
+   避免无数据时表格高度塌陷为 0（ResponsiveTable 与直接使用 a-table 的页面统一生效） */
+.arco-table .arco-table-tr-empty > .arco-table-td {
+  height: 240px;
+  padding: 0 16px;
+  text-align: center;
+  vertical-align: middle;
+}
+
 /* Card */
 .arco-card {
  border-radius: var(--ta-radius);