优化

src/shared/components/DataTable.test.ts

@@ -22,7 +22,7 @@ const configurableColumns: DataTableColumn[] = [
 
 function mountTable() {
   return shallowMount(DataTable, {
-    props: { data: [], columns: configurableColumns, preferenceKey: 'orders-table' },
+    props: { data: [], columns: configurableColumns, preferenceKey: 'orders-table', columnSettingsMode: 'show' },
     global: {
       provide: { [UI_PREFERENCE_SCOPE as symbol]: computed(() => 'user-1') },
       stubs: {
@@ -90,7 +90,7 @@ describe('DataTable column preferences', () => {
 
   it('keeps business actions, column settings, and trailing controls in one toolbar', () => {
     const wrapper = shallowMount(DataTable, {
-      props: { data: [], columns: configurableColumns, preferenceKey: 'orders-table' },
+      props: { data: [], columns: configurableColumns, preferenceKey: 'orders-table', columnSettingsMode: 'show' },
       slots: {
         'toolbar-start': '<h2>订单列表</h2>',
         'toolbar-actions': '<button>新增订单</button>',
@@ -120,7 +120,7 @@ describe('DataTable column preferences', () => {
 
   it('uses a compact right-aligned toolbar when no leading content is provided', () => {
     const wrapper = shallowMount(DataTable, {
-      props: { data: [], columns: configurableColumns, preferenceKey: 'orders-table' },
+      props: { data: [], columns: configurableColumns, preferenceKey: 'orders-table', columnSettingsMode: 'show' },
       slots: { 'toolbar-actions': '<button>新增订单</button>' },
       global: {
         provide: { [UI_PREFERENCE_SCOPE as symbol]: computed(() => 'user-1') },
@@ -142,7 +142,7 @@ describe('DataTable column preferences', () => {
 
   it('keeps business actions in a separate mobile-wrappable group from column settings', () => {
     const wrapper = shallowMount(DataTable, {
-      props: { data: [], columns: configurableColumns, preferenceKey: 'orders-table' },
+      props: { data: [], columns: configurableColumns, preferenceKey: 'orders-table', columnSettingsMode: 'show' },
       slots: { 'toolbar-actions': '<button class="create-action">新增快递公司</button>' },
       global: {
         provide: { [UI_PREFERENCE_SCOPE as symbol]: computed(() => 'user-1') },
@@ -166,7 +166,7 @@ describe('DataTable column preferences', () => {
 
   it('can hide column settings for compact tables without leaving an empty toolbar', () => {
     const wrapper = shallowMount(DataTable, {
-      props: { data: [], columns: configurableColumns, preferenceKey: 'summary-table', showColumnSettings: false },
+      props: { data: [], columns: configurableColumns, preferenceKey: 'summary-table', columnSettingsMode: 'hide' },
       global: {
         provide: { [UI_PREFERENCE_SCOPE as symbol]: computed(() => 'user-1') },
         stubs: { ElTable: TableStub, ElTableColumn: ColumnStub, ElButton: ButtonStub, ElPopover: PopoverStub },
@@ -177,4 +177,53 @@ describe('DataTable column preferences', () => {
     expect(wrapper.find('button[aria-label="列设置"]').exists()).toBe(false)
     expect(wrapper.find('.data-table__toolbar').exists()).toBe(false)
   })
+
+  it('shows every column when column settings are hidden', () => {
+    localStorage.setItem('cc:ui-layout:user-1:table:summary-table', JSON.stringify({
+      version: 1,
+      order: configurableColumns.map((column) => String(column.key)),
+      hidden: ['status'],
+    }))
+    const wrapper = shallowMount(DataTable, {
+      props: { data: [], columns: configurableColumns, preferenceKey: 'summary-table', columnSettingsMode: 'hide' },
+      global: {
+        provide: { [UI_PREFERENCE_SCOPE as symbol]: computed(() => 'user-1') },
+        stubs: { ElTable: TableStub, ElTableColumn: ColumnStub, ElButton: ButtonStub, ElPopover: PopoverStub },
+        directives: { loading: {} },
+      },
+    })
+
+    expect(wrapper.findAllComponents(ColumnStub)).toHaveLength(configurableColumns.length)
+  })
+
+  it('hides column settings by default for four or fewer configurable business columns', () => {
+    const wrapper = shallowMount(DataTable, {
+      props: { data: [], columns: configurableColumns, preferenceKey: 'compact-table' },
+      global: {
+        provide: { [UI_PREFERENCE_SCOPE as symbol]: computed(() => 'user-1') },
+        stubs: { ElTable: TableStub, ElTableColumn: ColumnStub, ElButton: ButtonStub, ElPopover: PopoverStub },
+        directives: { loading: {} },
+      },
+    })
+
+    expect(wrapper.find('button[aria-label="列设置"]').exists()).toBe(false)
+    expect(wrapper.find('.data-table__toolbar').exists()).toBe(false)
+  })
+
+  it('keeps column settings by default for complex tables', () => {
+    const complexColumns: DataTableColumn[] = [
+      { key: 'actions', label: '操作' },
+      ...Array.from({ length: 5 }, (_, index) => ({ key: `field-${index}`, label: `字段 ${index + 1}` })),
+    ]
+    const wrapper = shallowMount(DataTable, {
+      props: { data: [], columns: complexColumns, preferenceKey: 'complex-table' },
+      global: {
+        provide: { [UI_PREFERENCE_SCOPE as symbol]: computed(() => 'user-1') },
+        stubs: { ElTable: TableStub, ElTableColumn: ColumnStub, ElButton: ButtonStub, ElPopover: PopoverStub },
+        directives: { loading: {} },
+      },
+    })
+
+    expect(wrapper.find('button[aria-label="列设置"]').exists()).toBe(true)
+  })
 })

src/shared/components/DataTable.vue

@@ -63,13 +63,13 @@ const props = withDefaults(defineProps<{
   total?: number
   pageSizes?: number[]
   preferenceKey?: string
-  showColumnSettings?: boolean
+  columnSettingsMode?: 'auto' | 'show' | 'hide'
 }>(), {
   loading: false,
   emptyText: '暂无数据',
   total: undefined,
   pageSizes: () => [10, 20, 50, 100],
-  showColumnSettings: true,
+  columnSettingsMode: 'auto',
 })
 
 const page = defineModel<number>('page', { default: 1 })
@@ -78,7 +78,6 @@ const slots = useSlots()
 const preferenceScope = inject(UI_PREFERENCE_SCOPE, computed(() => 'anonymous'))
 const preference = ref<LayoutPreferenceSnapshot>({ version: 1, order: [], hidden: [] })
 const tableRef = ref<{ doLayout: () => void }>()
-const preferenceEnabled = computed(() => Boolean(props.preferenceKey && props.showColumnSettings))
 
 function columnId(column: DataTableColumn) {
   const value = column.key ?? column.columnKey ?? column.prop ?? column.property
@@ -102,6 +101,12 @@ function columnHideable(column: DataTableColumn) {
 
 const configurableColumns = computed(() => props.columns.filter((column) => columnId(column)))
 const columnKeys = computed(() => configurableColumns.value.map((column) => columnId(column) as string))
+const columnSettingsVisible = computed(() => (
+  props.columnSettingsMode === 'auto'
+    ? configurableColumns.value.filter(columnHideable).length > 4
+    : props.columnSettingsMode === 'show'
+))
+const preferenceEnabled = computed(() => Boolean(props.preferenceKey && columnSettingsVisible.value))
 
 function anchorSystemColumns(order: readonly string[]) {
   const columnsByKey = new Map(configurableColumns.value.map((column) => [columnId(column) as string, column]))
@@ -143,7 +148,7 @@ const orderedColumns = computed(() => {
 })
 const visibleColumns = computed(() => orderedColumns.value.filter((column) => {
   const id = columnId(column)
-  return !id || !columnHideable(column) || !preference.value.hidden.includes(id)
+  return !preferenceEnabled.value || !id || !columnHideable(column) || !preference.value.hidden.includes(id)
 }))
 const visibleHideableCount = computed(() => visibleColumns.value.filter(columnHideable).length)
 const preferenceItems = computed<LayoutPreferenceItem[]>(() => orderedColumns.value.flatMap((column) => {