优化

src/components/common/DataTable.vue

@@ -142,7 +142,7 @@ function setPage(value: number) {
 </script>
 
 <template>
-  <div class="data-table">
+  <div class="data-table" :class="$attrs.class">
     <header v-if="$slots.toolbar || $slots['toolbar-actions']" class="data-table__toolbar">
       <div class="data-table__toolbar-heading"><slot name="toolbar" /></div>
       <div class="data-table__toolbar-actions"><slot name="toolbar-actions" /></div>
@@ -150,7 +150,7 @@ function setPage(value: number) {
     <slot name="before-table" />
     <slot v-if="$slots.error" name="error" />
     <template v-else>
-    <el-table v-bind="$attrs" v-loading="loading" :data="data" :empty-text="emptyText" :aria-busy="loading">
+    <el-table v-bind="{ ...$attrs, class: undefined }" v-loading="loading" :data="data" :empty-text="emptyText" :aria-busy="loading">
       <el-table-column
         v-for="(column, index) in columns"
         :key="columnRenderKey(column, index)"
@@ -232,7 +232,8 @@ function setPage(value: number) {
 .data-table__toolbar-heading :slotted(strong) { color: var(--client-text); font-size: 14px; }
 .data-table__toolbar-actions :deep(.el-button + .el-button) { margin-left: 0; }
 .data-table__row-actions { display: flex; align-items: center; gap: var(--client-gap); white-space: nowrap; }
-.data-table__row-actions :deep(.el-button) { height: var(--client-row-action-height); padding: 0 8px; margin: 0 !important; }
+.data-table__row-actions :deep(.el-button) { height: var(--client-row-action-height); padding: 0 8px; margin: 0; }
+.data-table :deep(.data-table__system-cell .data-table__row-actions .el-button + .el-button), .data-table :deep(.data-table__system-cell .data-table__row-actions .el-button + .el-dropdown) { margin-left: 0; }
 .data-table__more { min-width: 28px; }
 :global(.client-ui .data-table .el-table) { color: var(--client-text); font-size: var(--client-font-size); --el-table-border-color: var(--client-border); --el-table-header-bg-color: var(--client-header-bg); --el-table-row-hover-bg-color: var(--client-hover-bg); }
 :global(.client-ui .data-table th.el-table__cell) { height: var(--client-table-header-height); padding: 0; color: var(--client-muted); font-weight: 600; }

src/components/common/tableActions.test.mjs

@@ -0,0 +1,28 @@
+import assert from 'node:assert/strict'
+import test from 'node:test'
+import { splitTableActions, runTableAction } from './tableActions.ts'
+
+test('shows up to three permitted actions and folds only when there are more', () => {
+  const actions = Array.from({ length: 5 }, (_, index) => ({ key: String(index), label: String(index), run() {} }))
+  for (const count of [0, 1, 2, 3]) {
+    const result = splitTableActions(actions.slice(0, count))
+    assert.equal(result.visible.length, count)
+    assert.equal(result.overflow.length, 0)
+  }
+  for (const count of [4, 5]) {
+    const result = splitTableActions(actions.slice(0, count))
+    assert.deepEqual(result.visible, actions.slice(0, 2))
+    assert.deepEqual(result.overflow, actions.slice(2, count))
+  }
+})
+
+test('disabled and loading actions cannot execute or disappear from the layout', () => {
+  let count = 0
+  const action = { key: 'edit', label: '编辑', run() { count++ } }
+  runTableAction({ ...action, disabled: true })
+  runTableAction({ ...action, loading: true })
+  assert.equal(count, 0)
+  runTableAction(action)
+  assert.equal(count, 1)
+  assert.equal(splitTableActions([{ ...action, disabled: true }]).visible.length, 1)
+})