diff --git a/web/admin/public/empty-state.svg b/web/admin/public/empty-state.svg new file mode 100644 index 0000000..ae69259 --- /dev/null +++ b/web/admin/public/empty-state.svg @@ -0,0 +1,15 @@ + + diff --git a/web/admin/src/App.vue b/web/admin/src/App.vue index 34b3e8c..b1e10a2 100644 --- a/web/admin/src/App.vue +++ b/web/admin/src/App.vue @@ -1,10 +1,17 @@ diff --git a/web/admin/src/components/ResponsiveTable.vue b/web/admin/src/components/ResponsiveTable.vue index 1135e71..69305e1 100644 --- a/web/admin/src/components/ResponsiveTable.vue +++ b/web/admin/src/components/ResponsiveTable.vue @@ -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) { + @@ -190,10 +195,10 @@ function onRowClick(record: any, ev: MouseEvent) { - +
- +
diff --git a/web/admin/src/components/TableEmpty.vue b/web/admin/src/components/TableEmpty.vue new file mode 100644 index 0000000..8e65c18 --- /dev/null +++ b/web/admin/src/components/TableEmpty.vue @@ -0,0 +1,84 @@ + + + + + diff --git a/web/admin/src/styles/main.css b/web/admin/src/styles/main.css index b395bc8..5293e36 100644 --- a/web/admin/src/styles/main.css +++ b/web/admin/src/styles/main.css @@ -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);