优化

src/modules/unified-orders/pages/UnifiedOrdersView.test.ts

@@ -229,10 +229,9 @@ describe('UnifiedOrdersView contract', () => {
   })
 
   it('counts detail in the three directly visible row actions', () => {
-    expect(source).toContain('unifiedOrderSecondaryActions(row).slice(0, 2)')
-    expect(source).toContain('unifiedOrderSecondaryActions(row).slice(2)')
-    expect(source).toContain('@click="openDetail(row as UnifiedOrderResource)">详情</el-button>')
-    expect(source).toContain('v-if="moreUnifiedOrderActions(row as UnifiedOrderResource).length"')
+    expect(source).toContain("{ key: 'detail', label: '详情', priority: 500 }")
+    expect(source).toContain('...unifiedOrderSecondaryActions(row).map')
+    expect(source).toContain('<RowActions :actions="unifiedOrderRowActions(row as UnifiedOrderResource)"')
   })
 
   it('opens smart loading from the order table toolbar with its own permission', () => {
@@ -392,9 +391,8 @@ describe('UnifiedOrdersView contract', () => {
     expect(source).not.toContain('请至少输入一项需要修改的外箱尺寸')
     expect(source).toContain(".map((value) => value == null || value === '' ? null : Number(value))")
     expect(source).toContain('相关数值已重新计算')
-    expect(source).toContain('runMoreAction($event, row as UnifiedOrderResource)')
-    expect(source).toContain(':aria-label="moreUnifiedOrderActionsLabel(row as UnifiedOrderResource)"')
-    expect(source).toContain(':title="moreUnifiedOrderActionsLabel(row as UnifiedOrderResource)"')
+    expect(source).toContain('handleUnifiedOrderRowAction($event, row as UnifiedOrderResource)')
+    expect(source).toContain(':more-label="moreUnifiedOrderActionsLabel(row as UnifiedOrderResource)"')
     expect(source).toContain("can('platform:order:note')")
     expect(source).toContain('await loadOrders()')
     expect(source).toContain('orderStatusLabel(detail.summary.internalOrderStatus || detail.summary.mainStatus)')
@@ -684,9 +682,9 @@ describe('UnifiedOrdersView contract', () => {
 
   it('uses outlined semantic buttons for row business actions while keeping detail navigation explicit', () => {
     const rowActions = source.slice(source.indexOf('<template #actions'), source.indexOf('<template #inboundCode'))
-    expect(rowActions).toContain('density-action')
-    expect(rowActions).not.toContain('v-for="action in directUnifiedOrderActions(row as UnifiedOrderResource)" :key="action" link')
-    expect(rowActions).toContain('@click="openDetail(row as UnifiedOrderResource)">详情</el-button>')
+    expect(rowActions).toContain('<RowActions')
+    expect(rowActions).toContain(':actions="unifiedOrderRowActions(row as UnifiedOrderResource)"')
+    expect(rowActions).toContain('@action="handleUnifiedOrderRowAction($event, row as UnifiedOrderResource)"')
     expect(source).toContain('<el-button link class="back-button density-back"')
   })
 })

src/modules/unified-orders/pages/UnifiedOrdersView.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
 import { ElMessage, ElMessageBox, type UploadFile } from 'element-plus'
-import { ArrowLeft, ChevronDown, ChevronUp, CircleCheck, Download, FileUp, GitBranch, Link2, MoreHorizontal, PackageOpen, Printer, Send, ShieldAlert, SlidersHorizontal, StickyNote, Undo2 } from '@lucide/vue'
+import { ArrowLeft, ChevronDown, ChevronUp, CircleCheck, Download, FileUp, GitBranch, Link2, PackageOpen, Printer, Send, ShieldAlert, SlidersHorizontal, StickyNote, Undo2 } from '@lucide/vue'
 import { useRoute, useRouter } from 'vue-router'
 import {
   getPlatformUnifiedOrder,
@@ -42,6 +42,7 @@ import LoadErrorState from '@/shared/components/LoadErrorState.vue'
 import LineClampText from '@/shared/components/LineClampText.vue'
 import QueryToolbar, { type QueryField, type QueryModel } from '@/shared/components/QueryToolbar.vue'
 import StatusBadge from '@/shared/components/StatusBadge.vue'
+import RowActions, { type RowActionItem } from '@/shared/components/RowActions.vue'
 import {
   firstLegBusinessTypeLabel,
   firstLegContainerModeLabel,
@@ -2003,12 +2004,6 @@ function unifiedOrderSecondaryActions(row: UnifiedOrderResource): UnifiedOrderRo
     ...(can('platform:order:note') ? ['note' as const] : []),
   ]
 }
-function directUnifiedOrderActions(row: UnifiedOrderResource) {
-  return unifiedOrderSecondaryActions(row).slice(0, 2)
-}
-function moreUnifiedOrderActions(row: UnifiedOrderResource) {
-  return unifiedOrderSecondaryActions(row).slice(2)
-}
 function moreUnifiedOrderActionsLabel(row: UnifiedOrderResource) {
   return `更多订单操作：${String(row.inboundCode || '').trim() || '当前入仓单'}`
 }
@@ -2017,6 +2012,22 @@ function unifiedOrderActionLabel(action: UnifiedOrderRowAction) {
   if (action === 'approve') return '通过'
   return '测量'
 }
+function unifiedOrderRowActions(row: UnifiedOrderResource): RowActionItem[] {
+  return [
+    { key: 'detail', label: '详情', priority: 500 },
+    ...unifiedOrderSecondaryActions(row).map((action, index): RowActionItem => ({
+      key: action,
+      label: unifiedOrderActionLabel(action),
+      priority: 400 - index,
+      tone: action === 'approve' ? 'warning' : action === 'measurement' ? 'purple' : 'neutral',
+      loading: action === 'approve' && approvalLoadingId.value === String(row.orderId),
+    })),
+  ]
+}
+function handleUnifiedOrderRowAction(command: string, row: UnifiedOrderResource) {
+  if (command === 'detail') openDetail(row)
+  else runMoreAction(command, row)
+}
 function runMoreAction(command: string | number | object, row: UnifiedOrderResource) {
   if (command === 'note') openNoteDialog(row)
   if (command === 'approve') openApproval(row)
@@ -2647,20 +2658,7 @@ onBeforeUnmount(() => {
           <el-button v-if="can('platform:firstleg:inbound:view')" :loading="printingCartonLabels" :disabled="loading || printingCartonLabels || !selectedCartonLabelOrders.length" @click="printSelectedCartonLabels"><Printer :size="16" />打印箱唛<span v-if="selectedCartonLabelOrders.length">（{{ selectedCartonLabelOrders.length }}）</span></el-button>
           <el-button v-if="can('platform:firstleg:smart-loading:list')" type="primary" @click="smartLoadingOpen = true"><PackageOpen :size="16" />智能装柜</el-button>
         </template>
-        <template #actions="{ row }">
-          <div class="row-actions density-actions">
-            <el-button class="density-action" size="small" @click="openDetail(row as UnifiedOrderResource)">详情</el-button>
-            <el-button v-for="action in directUnifiedOrderActions(row as UnifiedOrderResource)" :key="action" class="density-action" :data-tone="action === 'approve' ? 'warning' : action === 'measurement' ? 'purple' : 'neutral'" size="small" :loading="action === 'approve' && approvalLoadingId === String((row as UnifiedOrderResource).orderId)" @click="runMoreAction(action, row as UnifiedOrderResource)">{{ unifiedOrderActionLabel(action) }}</el-button>
-            <el-dropdown v-if="moreUnifiedOrderActions(row as UnifiedOrderResource).length" trigger="click" @command="runMoreAction($event, row as UnifiedOrderResource)">
-              <el-button class="density-action" size="small" :aria-label="moreUnifiedOrderActionsLabel(row as UnifiedOrderResource)" :title="moreUnifiedOrderActionsLabel(row as UnifiedOrderResource)"><MoreHorizontal :size="17" aria-hidden="true" /></el-button>
-              <template #dropdown>
-                <el-dropdown-menu>
-                  <el-dropdown-item v-for="action in moreUnifiedOrderActions(row as UnifiedOrderResource)" :key="action" :command="action">{{ unifiedOrderActionLabel(action) }}</el-dropdown-item>
-                </el-dropdown-menu>
-              </template>
-            </el-dropdown>
-          </div>
-        </template>
+        <template #actions="{ row }"><RowActions :actions="unifiedOrderRowActions(row as UnifiedOrderResource)" :more-label="moreUnifiedOrderActionsLabel(row as UnifiedOrderResource)" @action="handleUnifiedOrderRowAction($event, row as UnifiedOrderResource)" /></template>
         <template #inboundCode="{ row }">
           <div class="inbound-relation-cell order-code-cell">
             <strong class="inbound-code-value" :title="(row as UnifiedOrderResource).inboundCode || '待生成入仓码'">{{ (row as UnifiedOrderResource).inboundCode || '待生成入仓码' }}</strong>