优化

src/modules/customers/pages/CustomersView.test.ts

@@ -822,7 +822,7 @@ describe('CustomersView', () => {
     await flushPromises()
 
     expect(document.querySelectorAll('.el-table__body button[aria-label^="更多客户操作："]').length).toBe(3)
-    expect(document.querySelectorAll('.el-table__body .table-actions > .el-button').length).toBe(9)
+    expect(document.querySelectorAll('.el-table__body .row-actions > .el-button').length).toBe(9)
   })
 
   it('keeps the action row usable when all customer identifiers are missing', async () => {

src/modules/customers/pages/CustomersView.vue

@@ -3,9 +3,10 @@ import '@/styles/adminDensity.css'
 import '@/modules/customers/customerDensity.css'
 import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { Building2, CheckCircle2, CircleCheck, FileCheck2, FileText, MoreHorizontal, ShieldCheck, ShieldX } from '@lucide/vue'
+import { Building2, CheckCircle2, CircleCheck, FileCheck2, FileText, ShieldCheck, ShieldX } from '@lucide/vue'
 import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
 import { getApiErrorDetails, getApiErrorMessage, type ApiErrorDetails } from '@/shared/api/http'
+import RowActions, { type RowActionItem } from '@/shared/components/RowActions.vue'
 import { createPlatformExportTask } from '@/modules/downloads'
 import {
   approveEnterpriseReview,
@@ -678,17 +679,6 @@ function customerSecondaryActions(row: PlatformTenantResource): CustomerRowActio
     ...(canArchive(row) ? ['delete' as const] : []),
   ]
 }
-function customerPrimaryActionCount(row: PlatformTenantResource) {
-  return Number(access.can('platform:customer:list'))
-    + Number(access.can('platform:customer:edit') && row.status !== 'ARCHIVED')
-    + Number(hasReviewAction(row))
-}
-function customerDirectSecondaryActions(row: PlatformTenantResource) {
-  return customerSecondaryActions(row).slice(0, Math.max(0, 3 - customerPrimaryActionCount(row)))
-}
-function customerOverflowActions(row: PlatformTenantResource) {
-  return customerSecondaryActions(row).slice(Math.max(0, 3 - customerPrimaryActionCount(row)))
-}
 function customerMoreActionsLabel(row: PlatformTenantResource) {
   const identity = row.tenantName || row.tenantCode || String(row.id || '当前客户')
   return `更多客户操作：${identity}`
@@ -710,6 +700,27 @@ function customerActionDisabled(action: CustomerRowAction) {
   if (action === 'delete') return archiveSubmitting.value
   return false
 }
+function customerRowActions(row: PlatformTenantResource): RowActionItem[] {
+  return [
+    { key: 'detail', label: '详情', priority: 500, visible: access.can('platform:customer:list') },
+    { key: 'edit', label: '编辑', priority: 400, visible: access.can('platform:customer:edit') && row.status !== 'ARCHIVED' },
+    { key: 'review', label: '审核', priority: 300, tone: 'warning', visible: hasReviewAction(row), disabled: reviewSubmitting.value },
+    ...customerSecondaryActions(row).map((action, index): RowActionItem => ({
+      key: action,
+      label: customerActionLabel(row, action),
+      priority: 200 - index,
+      tone: customerActionType(row, action),
+      disabled: customerActionDisabled(action),
+      divided: action === 'delete',
+    })),
+  ]
+}
+function handleCustomerRowAction(row: PlatformTenantResource, command: string) {
+  if (command === 'detail') showDetail(row)
+  else if (command === 'edit') openEdit(row)
+  else if (command === 'review') openDecision(row, access.can('platform:customer:approve') ? 'approve' : 'reject')
+  else handleMoreAction(row, command)
+}
 function handleMoreAction(row: PlatformTenantResource, command: string) {
   if (command === 'reset-password') openResetPassword(row)
   if (command === 'impersonate') openImpersonation(row)
@@ -1059,18 +1070,7 @@ onMounted(() => { void loadCustomers() })
       <div v-if="reviewLoadError" class="review-sync-error" role="alert"><div><ShieldX :size="17" /><span>{{ reviewLoadError.message }}</span></div><el-button link type="primary" @click="reloadPendingReviews">重新加载待审核客户</el-button></div>
       <DataTable v-model:page="page" v-model:page-size="pageSize" :data="result.records" :columns="customerColumns" preference-key="customers-table" :loading="loading" :total="result.total" aria-label="客户列表" row-key="id" empty-text="暂无符合筛选条件的客户" class="customer-list-table" :stripe="true" border>
         <template #toolbar-actions><div class="customers-table-actions"><el-button v-if="access.can('platform:customer:export') && access.can('platform:download:list')" :loading="exportSubmitting" :disabled="loading || exportSubmitting" @click="exportCustomers">导出Excel</el-button><el-button v-if="access.can('platform:customer:create')" type="primary" :disabled="loading" @click="openCreate">新增客户</el-button></div></template>
-        <template #actions="{ row }">
-          <div class="table-actions density-actions">
-            <el-button v-if="access.can('platform:customer:list')" class="density-action customer-action-detail" size="small" @click="showDetail(row as PlatformTenantResource)">详情</el-button>
-            <el-button v-if="access.can('platform:customer:edit') && (row as PlatformTenantResource).status !== 'ARCHIVED'" class="density-action customer-action-edit" size="small" @click="openEdit(row as PlatformTenantResource)">编辑</el-button>
-            <el-button v-if="hasReviewAction(row as PlatformTenantResource)" class="density-action" data-tone="warning" size="small" :disabled="reviewSubmitting" @click="openDecision(row as PlatformTenantResource, access.can('platform:customer:approve') ? 'approve' : 'reject')">审核</el-button>
-            <el-button v-for="action in customerDirectSecondaryActions(row as PlatformTenantResource)" :key="action" class="density-action" :data-tone="action === 'reset-password' ? 'purple' : action === 'impersonate' ? 'primary' : action === 'status' && (row as PlatformTenantResource).status !== 'ACTIVE' ? 'success' : 'danger'" size="small" :disabled="customerActionDisabled(action)" @click="handleMoreAction(row as PlatformTenantResource, action)">{{ customerActionLabel(row as PlatformTenantResource, action) }}</el-button>
-            <el-dropdown v-if="customerOverflowActions(row as PlatformTenantResource).length" trigger="click" popper-class="customer-action-menu" @command="handleMoreAction(row as PlatformTenantResource, $event as string)">
-              <el-button class="density-action customer-action-more" size="small" plain :aria-label="customerMoreActionsLabel(row as PlatformTenantResource)" :title="customerMoreActionsLabel(row as PlatformTenantResource)"><MoreHorizontal :size="17" aria-hidden="true" /></el-button>
-              <template #dropdown><el-dropdown-menu><el-dropdown-item v-for="action in customerOverflowActions(row as PlatformTenantResource)" :key="action" :command="action" :disabled="customerActionDisabled(action)" :class="{ 'customer-action-menu__danger': customerActionType(row as PlatformTenantResource, action) === 'danger' }">{{ customerActionLabel(row as PlatformTenantResource, action) }}</el-dropdown-item></el-dropdown-menu></template>
-            </el-dropdown>
-          </div>
-        </template>
+        <template #actions="{ row }"><RowActions :actions="customerRowActions(row as PlatformTenantResource)" :more-label="customerMoreActionsLabel(row as PlatformTenantResource)" @action="handleCustomerRowAction(row as PlatformTenantResource, $event)" /></template>
         <template #company="{ row }"><strong class="customer-company-name">{{ (row as PlatformTenantResource).tenantName }}</strong></template>
         <template #status="{ row }"><el-tag :type="statusMeta((row as PlatformTenantResource).status).type" effect="light">{{ statusMeta((row as PlatformTenantResource).status).label }}</el-tag></template>
         <template #orderCount="{ row }">{{ access.can('platform:order:list') ? (orderCounts[String((row as PlatformTenantResource).id)] ?? '—') : '—' }}</template>