优化

src/shared/components/RowActions.test.ts

@@ -1,6 +1,8 @@
 import ElementPlus from 'element-plus'
 import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
 import RowActions, { type RowActionItem } from './RowActions.vue'
 
 const actions: RowActionItem[] = [
@@ -12,6 +14,21 @@ const actions: RowActionItem[] = [
 ]
 
 describe('RowActions', () => {
+  it.each([
+    'src/modules/container-loading/pages/ContainersView.vue',
+    'src/modules/customers/pages/CustomersView.vue',
+    'src/modules/finance/pages/FinanceCustomerAccountsView.vue',
+    'src/modules/finance/pages/FinanceCustomerArapView.vue',
+    'src/modules/finance/pages/FinanceCustomerStatementsView.vue',
+    'src/modules/iam/pages/PermissionsView.vue',
+    'src/modules/overseas-warehouse/pages/DispatchesView.vue',
+    'src/modules/overseas-warehouse/pages/LastMileOrdersView.vue',
+    'src/modules/unified-orders/components/InboundFeeDetailManager.vue',
+    'src/modules/unified-orders/pages/UnifiedOrdersView.vue',
+  ])('keeps complex list actions on the shared component: %s', (path) => {
+    expect(readFileSync(resolve(process.cwd(), path), 'utf8')).toContain('<RowActions')
+  })
+
   it('shows at most three prioritized actions and moves the rest into more', () => {
     const wrapper = mount(RowActions, {
       props: { actions, moreLabel: '更多操作 · PC-1' },
@@ -49,6 +66,16 @@ describe('RowActions', () => {
     expect(wrapper.emitted('action')).toEqual([['view']])
   })
 
+  it('gives direct actions a business-specific accessible label when provided', () => {
+    const wrapper = mount(RowActions, {
+      props: { actions: [{ key: 'view', label: '查看', ariaLabel: '查看 CB-1' }] },
+      global: { plugins: [ElementPlus] },
+    })
+
+    expect(wrapper.get('.row-actions > .el-button').attributes('aria-label')).toBe('查看 CB-1')
+    expect(wrapper.get('.row-actions > .el-button').attributes('title')).toBe('查看 CB-1')
+  })
+
   it('omits hidden actions without rendering an empty more menu', () => {
     const wrapper = mount(RowActions, {
       props: { actions: [{ key: 'edit', label: '编辑', visible: false }] },

src/shared/components/RowActions.vue

@@ -7,6 +7,7 @@ export type RowActionTone = 'neutral' | 'warning' | 'purple' | 'primary' | 'succ
 export interface RowActionItem {
   key: string
   label: string
+  ariaLabel?: string
   visible?: boolean
   disabled?: boolean
   loading?: boolean
@@ -57,7 +58,9 @@ function select(action: RowActionItem) {
       size="small"
       :disabled="action.disabled"
       :loading="action.loading"
-      @click="select(action)"
+      :aria-label="action.ariaLabel"
+      :title="action.ariaLabel"
+      @click.stop="select(action)"
     >{{ action.label }}</el-button>
     <el-dropdown v-if="overflowActions.length" trigger="click">
       <el-button
@@ -66,6 +69,7 @@ function select(action: RowActionItem) {
         size="small"
         :aria-label="moreLabel"
         :title="moreLabel"
+        @click.stop
       ><MoreHorizontal :size="15" aria-hidden="true" /></el-button>
       <template #dropdown>
         <el-dropdown-menu>