From afbee83b5103a116db23b85ab6dae8602986a2c5 Mon Sep 17 00:00:00 2001
From: ouyangxq <775153912@qq.com>
Date: Mon, 31 Aug 2026 15:36:02 +0800
Subject: [PATCH] style(admin): align list typography with orders
---
src/shared/components/DataTable.test.ts | 32 ++++++++++++--
src/shared/components/DataTable.vue | 8 +++-
src/shared/components/QueryToolbar.vue | 1 +
src/styles/adminListTypography.test.ts | 55 +++++++++++++++++++++++++
src/styles/foundation.css | 12 ++++++
src/styles/index.css | 12 +++---
src/styles/shell.css | 4 +-
7 files changed, 111 insertions(+), 13 deletions(-)
create mode 100644 src/styles/adminListTypography.test.ts
diff --git a/src/shared/components/DataTable.test.ts b/src/shared/components/DataTable.test.ts
index 96ef7460..0a8c1f87 100644
--- a/src/shared/components/DataTable.test.ts
+++ b/src/shared/components/DataTable.test.ts
@@ -6,14 +6,14 @@ import LayoutPreferenceList from './LayoutPreferenceList.vue'
import { UI_PREFERENCE_SCOPE, preferenceStorageKey } from '@/shared/utils/uiLayoutPreference'
const TableStub = defineComponent({
- props: { border: Boolean, stripe: Boolean, maxHeight: [String, Number] },
- template: '
',
+ props: { border: Boolean, stripe: Boolean, maxHeight: [String, Number], emptyText: String },
+ template: '
',
methods: { doLayout() {} },
})
const ColumnStub = defineComponent({
inheritAttrs: false,
- props: { label: String, prop: String },
- template: '
',
+ props: { label: String, prop: String, fixed: [String, Boolean], showOverflowTooltip: Boolean },
+ template: '
',
})
const ButtonStub = defineComponent({ template: '' })
const PopoverStub = defineComponent({ template: '
' })
@@ -128,6 +128,30 @@ describe('DataTable column preferences', () => {
expect(customTable.get('.table-stub').attributes('data-max-height')).toBe('420')
})
+ it('keeps fixed actions, long text, empty state, and pagination in the shared list contract', () => {
+ const wrapper = shallowMount(DataTable, {
+ props: {
+ data: [],
+ columns: [
+ { key: 'actions', label: '操作', fixed: 'left', slotName: 'actions' },
+ { key: 'description', label: '长文本', showOverflowTooltip: true },
+ ],
+ emptyText: '暂无符合条件的数据',
+ total: 0,
+ },
+ global: {
+ stubs: { ElTable: TableStub, ElTableColumn: ColumnStub, ElButton: ButtonStub, ElPopover: PopoverStub },
+ directives: { loading: {} },
+ },
+ })
+
+ const columns = wrapper.findAll('.column-stub')
+ expect(columns[0].attributes('data-fixed')).toBe('left')
+ expect(columns[1].attributes('data-overflow-tooltip')).toBe('true')
+ expect(wrapper.get('.table-stub').attributes('data-empty-text')).toBe('暂无符合条件的数据')
+ expect(wrapper.get('.data-table__pagination').text()).toContain('共 0 条')
+ })
+
it('uses key as the data property for ordinary columns only', () => {
const wrapper = shallowMount(DataTable, {
props: {
diff --git a/src/shared/components/DataTable.vue b/src/shared/components/DataTable.vue
index 510ed917..38d81ccd 100644
--- a/src/shared/components/DataTable.vue
+++ b/src/shared/components/DataTable.vue
@@ -358,6 +358,10 @@ function setPage(value: number) {