优化

src/modules/unified-orders/components/InboundFeeDetailManager.vue

@@ -2,12 +2,13 @@
 import '@/styles/adminDensity.css'
 import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
-import { FileUp, MoreHorizontal, Plus, RefreshCw, X } from '@lucide/vue'
+import { FileUp, Plus, RefreshCw, X } from '@lucide/vue'
 import { useAccessPreviewStore } from '@/core/access/accessPreview'
 import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
 import AppDialog from '@/shared/components/AppDialog.vue'
 import LoadErrorState from '@/shared/components/LoadErrorState.vue'
 import StatusBadge from '@/shared/components/StatusBadge.vue'
+import RowActions, { type RowActionItem } from '@/shared/components/RowActions.vue'
 import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
 import {
   adjustInboundFeeDetail, createInboundFeeDetail, deleteInboundFeeDetail,
@@ -88,8 +89,23 @@ function canDelete(row: InboundFeeDetail) { return isManual(row) && access.can('
 function canReview(row: InboundFeeDetail) { return isManual(row) && access.can('firstleg:inbound:fee-detail:review') && row.reviewStatus === 'PENDING' }
 function canAdjust(row: InboundFeeDetail) { return isManual(row) && access.can('firstleg:inbound:fee-detail:edit') && row.reviewStatus === 'APPROVED' && row.publicationStatus !== 'VOIDED' }
 function canVoid(row: InboundFeeDetail) { return isManual(row) && access.can('firstleg:inbound:fee-detail:review') && row.reviewStatus === 'APPROVED' && row.publicationStatus !== 'VOIDED' }
-function rowActionCount(row: InboundFeeDetail) {
-  return Number(canEdit(row)) + 2 * Number(canReview(row)) + Number(canAdjust(row)) + Number(canVoid(row)) + Number(canDelete(row))
+function feeRowActions(row: InboundFeeDetail): RowActionItem[] {
+  return [
+    { key: 'edit', label: '编辑', priority: 400, visible: canEdit(row) },
+    { key: 'approve', label: '审核', priority: 350, tone: 'warning', visible: canReview(row) },
+    { key: 'reject', label: '驳回', priority: 300, tone: 'warning', visible: canReview(row) },
+    { key: 'adjust', label: '调整', priority: 250, visible: canAdjust(row) },
+    { key: 'void', label: '作废', priority: 200, tone: 'danger', visible: canVoid(row) },
+    { key: 'delete', label: '删除', tone: 'danger', divided: true, visible: canDelete(row) },
+  ]
+}
+function handleFeeRowAction(command: string, row: InboundFeeDetail) {
+  if (command === 'edit') openEditor('edit', row)
+  else if (command === 'approve') void approve(row)
+  else if (command === 'reject') openReject(row)
+  else if (command === 'adjust') openEditor('adjust', row)
+  else if (command === 'void') void voidRow(row)
+  else if (command === 'delete') void remove(row)
 }
 function reviewLabel(value: string) { return ({ PENDING: '待审核', APPROVED: '已审核', REJECTED: '已驳回' } as Record<string, string>)[value] || value }
 function publicationLabel(value: string) {
@@ -287,22 +303,7 @@ onMounted(() => void load())
       <div v-loading="loading" class="fee-table-shell">
         <el-table :data="rows" border stripe empty-text="暂无费用数据" row-key="id">
           <el-table-column label="操作" fixed="left" width="250">
-            <template #default="{ row }">
-              <div class="density-actions">
-                <el-button v-if="canEdit(row as InboundFeeDetail)" class="density-action" data-tone="neutral" @click="openEditor('edit', row as InboundFeeDetail)">编辑</el-button>
-                <el-button v-if="canReview(row as InboundFeeDetail)" class="density-action" data-tone="warning" @click="approve(row as InboundFeeDetail)">审核</el-button>
-                <el-button v-if="canReview(row as InboundFeeDetail)" class="density-action" data-tone="warning" @click="openReject(row as InboundFeeDetail)">驳回</el-button>
-                <el-button v-if="canAdjust(row as InboundFeeDetail)" class="density-action" data-tone="neutral" @click="openEditor('adjust', row as InboundFeeDetail)">调整</el-button>
-                <el-button v-if="canVoid(row as InboundFeeDetail)" class="density-action" data-tone="danger" @click="voidRow(row as InboundFeeDetail)">作废</el-button>
-                <el-button v-if="canDelete(row as InboundFeeDetail) && rowActionCount(row as InboundFeeDetail) <= 3" class="density-action" data-tone="danger" @click="remove(row as InboundFeeDetail)">删除</el-button>
-                <el-dropdown v-if="canDelete(row as InboundFeeDetail) && rowActionCount(row as InboundFeeDetail) > 3" trigger="click">
-                  <el-button class="density-action" data-tone="neutral" :aria-label="(row.feeTypeNameSnapshot || '当前费用') + '的更多操作'" title="更多操作"><MoreHorizontal aria-hidden="true" :size="15" /></el-button>
-                  <template #dropdown><el-dropdown-menu>
-                    <el-dropdown-item @click="remove(row as InboundFeeDetail)">删除</el-dropdown-item>
-                  </el-dropdown-menu></template>
-                </el-dropdown>
-              </div>
-            </template>
+            <template #default="{ row }"><RowActions :actions="feeRowActions(row as InboundFeeDetail)" :more-label="`${(row as InboundFeeDetail).feeTypeNameSnapshot || '当前费用'}的更多操作`" @action="handleFeeRowAction($event, row as InboundFeeDetail)" /></template>
           </el-table-column>
           <el-table-column label="审核状态" width="120"><template #default="{ row }"><StatusBadge :status="reviewLabel(row.reviewStatus)" /></template></el-table-column>
           <el-table-column label="来源" width="120"><template #default="{ row }">{{ row.sourceType === 'FBA_PRICING' ? '头程派生' : '人工录入' }}</template></el-table-column>