优化

src/shared/components/DataTable.test.ts

@@ -1,5 +1,40 @@
-import { describe, expect, it } from 'vitest'
-import { createPaginationItems, normalizePage, normalizePageSizes } from './DataTable.vue'
+import { computed, defineComponent } from 'vue'
+import { shallowMount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it } from 'vitest'
+import DataTable, { createPaginationItems, normalizePage, normalizePageSizes, type DataTableColumn } from './DataTable.vue'
+import LayoutPreferenceList from './LayoutPreferenceList.vue'
+import { UI_PREFERENCE_SCOPE, preferenceStorageKey } from '@/shared/utils/uiLayoutPreference'
+
+const TableStub = defineComponent({ template: '<div><slot /></div>', methods: { doLayout() {} } })
+const ColumnStub = defineComponent({
+  inheritAttrs: false,
+  props: { label: String },
+  template: '<div class="column-stub" :data-label="label"><slot /></div>',
+})
+const ButtonStub = defineComponent({ template: '<button type="button"><slot /></button>' })
+const PopoverStub = defineComponent({ template: '<div><slot name="reference" /><slot /></div>' })
+
+const configurableColumns: DataTableColumn[] = [
+  { key: 'actions', label: '操作', fixed: 'left' },
+  { key: 'name', prop: 'name', label: '名称' },
+  { key: 'status', prop: 'status', label: '状态' },
+]
+
+function mountTable() {
+  return shallowMount(DataTable, {
+    props: { data: [], columns: configurableColumns, preferenceKey: 'orders-table' },
+    global: {
+      provide: { [UI_PREFERENCE_SCOPE as symbol]: computed(() => 'user-1') },
+      stubs: {
+        ElTable: TableStub,
+        ElTableColumn: ColumnStub,
+        ElButton: ButtonStub,
+        ElPopover: PopoverStub,
+      },
+      directives: { loading: {} },
+    },
+  })
+}
 
 describe('DataTable pagination helpers', () => {
   it('normalizes page-size options', () => {
@@ -30,3 +65,26 @@ describe('DataTable pagination helpers', () => {
     expect(createPaginationItems(30, 30)).toEqual([1, 'ellipsis-start', 26, 27, 28, 29, 30])
   })
 })
+
+describe('DataTable column preferences', () => {
+  beforeEach(() => localStorage.clear())
+
+  it('restores column order and visibility while locking the actions column', async () => {
+    localStorage.setItem(preferenceStorageKey('table', 'user-1', 'orders-table'), JSON.stringify({
+      version: 1,
+      order: ['actions', 'status', 'name'],
+      hidden: ['name', 'actions'],
+    }))
+    const wrapper = mountTable()
+    expect(wrapper.findAll('.column-stub').map((column) => column.attributes('data-label'))).toEqual(['操作', '状态'])
+
+    const settings = wrapper.findComponent(LayoutPreferenceList)
+    const items = settings.props('items') as Array<{ key: string; movable: boolean; hideable: boolean }>
+    expect(items.find((item) => item.key === 'actions')).toMatchObject({ movable: false, hideable: false })
+
+    settings.vm.$emit('visibility', 'name', true)
+    settings.vm.$emit('move', 'name', 0)
+    await wrapper.vm.$nextTick()
+    expect(wrapper.findAll('.column-stub').map((column) => column.attributes('data-label'))).toEqual(['操作', '名称', '状态'])
+  })
+})