优化

src/modules/finance/components/CustomerStatementsPanel.test.ts

@@ -1,4 +1,6 @@
 import ElementPlus from 'element-plus'
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
 import { createPinia, setActivePinia } from 'pinia'
 import { flushPromises, mount } from '@vue/test-utils'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
@@ -68,4 +70,10 @@ describe('CustomerStatementsPanel', () => {
     expect(getReconciliationStatement).toHaveBeenCalledWith('statement-1')
     expect(wrapper.text()).toContain('入库操作费')
   })
+
+  it('uses a small primary entity button for the embedded statement detail action', () => {
+    const source = readFileSync(resolve(process.cwd(), 'src/modules/finance/components/CustomerStatementsPanel.vue'), 'utf8')
+    expect(source).toContain('<el-button size="small" plain type="primary"')
+    expect(source).not.toContain('<el-button link')
+  })
 })

src/modules/finance/components/CustomerStatementsPanel.vue

@@ -73,7 +73,7 @@ watch(() => props.customerId, () => { void load() }, { immediate: true })
     <div v-if="!access.can('platform:finance:customer-statement:list')" class="module-empty"><FileText :size="30" /><strong>暂无财务账单查看权限</strong><p>请联系管理员开通客户对账单查看权限。</p></div>
     <LoadErrorState v-else-if="loadError" title="客户财务账单加载失败" :message="loadError.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="loadError" /></template></LoadErrorState>
     <DataTable v-else :data="rows" :columns="columns" :loading="loading" row-key="id" aria-label="客户财务账单列表" empty-text="当前客户暂无财务账单" border stripe>
-      <template #actions="{ row }"><el-button link type="primary" :aria-label="`查看对账单${(row as FinanceStatementReadModel).billNo}详情`" @click="openDetail(row as FinanceStatementReadModel)"><Eye :size="15" />详情</el-button></template>
+      <template #actions="{ row }"><el-button size="small" plain type="primary" :disabled="loading" :aria-label="`查看对账单${(row as FinanceStatementReadModel).billNo}详情`" @click="openDetail(row as FinanceStatementReadModel)"><Eye :size="15" />详情</el-button></template>
       <template #totalAmount="{ row }">{{ formatAmount((row as FinanceStatementReadModel).totalAmount) }}</template>
       <template #receivedAmount="{ row }">{{ formatAmount((row as FinanceStatementReadModel).receivedAmount) }}</template>
       <template #outstandingAmount="{ row }">{{ formatAmount((row as FinanceStatementReadModel).outstandingAmount) }}</template>

src/modules/finance/pages/FinanceCustomerAccountsView.test.ts

@@ -90,6 +90,15 @@ describe('FinanceCustomerAccountsView delivery', () => {
     expect(page).not.toContain('max-width: 520px')
   })
 
+  it('renders every account row operation as a small plain primary button with an icon', () => {
+    expect(page).toContain("{ key: 'actions', label: '操作', width: 160, fixed: 'left', slotName: 'actions' }")
+    expect(page).toContain('<el-button size="small" plain type="primary" @click="openAccount(row, false)"><Eye :size="15" />查看</el-button>')
+    expect(page).toContain('<el-button v-if="canUpdateTerms" size="small" plain type="primary" @click="openAccount(row, true)"><Pencil :size="15" />账期</el-button>')
+    expect(page).not.toMatch(/<template #actions[\s\S]*?<el-button[^>]*\blink\b/)
+    expect(page).toContain('.row-actions {')
+    expect(page).toContain('white-space: nowrap')
+  })
+
   it('shows only derived CNY summaries and no wallet actions', () => {
     for (const marker of ['未收', '待出账', '本期已收', '应付', 'CNY']) expect(page).toContain(marker)
     for (const forbidden of ['手动充值', '钱包', '外币', '发票', '利润']) expect(page).not.toContain(forbidden)

src/modules/finance/pages/FinanceCustomerAccountsView.vue

@@ -60,7 +60,7 @@ const queryFields = computed<QueryField[]>(() => [
   { key: 'status', type: 'select', label: '状态', width: 150, placeholder: '全部状态', options: [{ label: '正常', value: 'ACTIVE' }, { label: '停用', value: 'DISABLED' }] },
 ])
 const columns: DataTableColumn[] = [
-  { key: 'actions', label: '操作', width: 150, fixed: 'left', slotName: 'actions' },
+  { key: 'actions', label: '操作', width: 160, fixed: 'left', slotName: 'actions' },
   { key: 'customerName', label: '客户', minWidth: 180, slotName: 'customerName' },
   { key: 'customerCode', label: '客户编号', width: 150, slotName: 'customerCode' },
   { key: 'contactName', label: '联系人', width: 130, slotName: 'contactName' },
@@ -259,7 +259,7 @@ watch(() => [route.name, String(route.params.customerId || '')], ([name, custome
       <section v-if="!stateError" class="surface-panel table-panel">
         <DataTable v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :loading="loading" :total="total" preference-key="finance-customer-accounts-table" aria-label="客户账户列表" row-key="customerId" empty-text="暂无客户账户" @update:page="load()" @update:page-size="page = 1; load()">
           <template #toolbar-actions><el-button v-if="canExport" :loading="accountExportBusy" :disabled="loading || accountExportBusy" @click="exportAccounts"><Download :size="16" />导出Excel</el-button></template>
-          <template #actions="{ row }"><div class="row-actions"><el-button link type="primary" @click="openAccount(row, false)"><Eye :size="15" />查看</el-button><el-button v-if="canUpdateTerms" link type="primary" @click="openAccount(row, true)"><Pencil :size="15" />账期</el-button></div></template>
+          <template #actions="{ row }"><div class="row-actions"><el-button size="small" plain type="primary" @click="openAccount(row, false)"><Eye :size="15" />查看</el-button><el-button v-if="canUpdateTerms" size="small" plain type="primary" @click="openAccount(row, true)"><Pencil :size="15" />账期</el-button></div></template>
           <template #customerName="{ row }">{{ customerName(row.customerId, row.customerName) }}</template>
           <template #customerCode="{ row }">{{ customerField(row.customerCode) }}</template><template #contactName="{ row }">{{ customerField(row.contactName) }}</template><template #contactPhone="{ row }">{{ customerField(row.contactPhone) }}</template>
           <template #lastChangedAt="{ row }">{{ formatLastChangedAt(row.lastChangedAt) }}</template>
@@ -346,6 +346,10 @@ watch(() => [route.name, String(route.params.customerId || '')], ([name, custome
   margin-left: 0;
 }
 
+.row-actions {
+  white-space: nowrap;
+}
+
 .detail-heading {
   width: 100%;
   align-items: center;

src/modules/finance/pages/FinanceCustomerArapView.test.ts

@@ -208,6 +208,15 @@ describe('FinanceCustomerArapView G2 operations', () => {
     expect(page).not.toContain('max-width: 520px')
   })
 
+  it('renders all permitted fee-source row operations as small plain primary buttons with icons', () => {
+    const page = readFileSync(resolve(process.cwd(), 'src/modules/finance/pages/FinanceCustomerArapView.vue'), 'utf8')
+    expect(page).toContain('<el-button v-if="canViewSource" size="small" plain type="primary" @click="openDetail(row)"><Eye :size="15" />详情</el-button>')
+    expect(page).toContain('<el-button v-if="canReviewSource" size="small" plain type="primary" @click="openReview(row)"><FileCheck2 :size="15" />审核</el-button>')
+    expect(page).toContain('<el-button v-if="canSettleSource" size="small" plain type="primary" @click="openInclusion(row)"><Link2 :size="15" />参与结算</el-button>')
+    expect(page).not.toMatch(/<template #actions[\s\S]*?<el-button[^>]*\blink\b/)
+    expect(page).toContain('white-space: nowrap')
+  })
+
   it('resolves blank detail customer names and keeps source labels business-facing', async () => {
     vi.mocked(getFinanceFeeSource).mockResolvedValueOnce({ ...detail, customerName: '', sourceType: 'NEW_SOURCE' })
     const wrapper = await mountView(['platform:finance:customer-arap:list'], '/finance/customer-arap/42')

src/modules/finance/pages/FinanceCustomerArapView.vue

@@ -321,7 +321,7 @@ watch(() => [route.name, String(route.params.feeSourceId || '')], ([name, feeSou
       <section v-if="!customersError && !loadError" class="surface-panel table-panel">
         <DataTable v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :loading="loading" :total="total" preference-key="finance-customer-arap-table" aria-label="客户应收应付列表" row-key="id" empty-text="暂无客户应收应付数据" @selection-change="onSelectionChange" @update:page="load()" @update:page-size="page = 1; load()">
         <template #toolbar-actions><div class="generation-actions"><el-button v-if="canExport" :loading="exportBusy" :disabled="loading || exportBusy" @click="exportFeeSources"><Download :size="16" />导出Excel</el-button><template v-if="canCreateStatement"><el-button @click="openGeneration('BY_CUTOFF')"><FilePlus2 :size="16" />按截止日期生成</el-button><el-button type="primary" :disabled="!selectedRows.length" @click="openGeneration('SELECTED')"><FilePlus2 :size="16" />按勾选生成</el-button></template></div></template>
-        <template #actions="{ row }"><div class="row-actions"><template v-if="row.feeSourceId"><el-button v-if="canViewSource" link type="primary" @click="openDetail(row)"><Eye :size="15" />详情</el-button><el-button v-if="canReviewSource" link type="primary" @click="openReview(row)"><FileCheck2 :size="15" />审核</el-button><el-button v-if="canSettleSource" link type="primary" @click="openInclusion(row)"><Link2 :size="15" />结算</el-button></template><span v-else class="muted-action">手工成本</span></div></template>
+        <template #actions="{ row }"><div class="row-actions"><template v-if="row.feeSourceId"><el-button v-if="canViewSource" size="small" plain type="primary" @click="openDetail(row)"><Eye :size="15" />详情</el-button><el-button v-if="canReviewSource" size="small" plain type="primary" @click="openReview(row)"><FileCheck2 :size="15" />审核</el-button><el-button v-if="canSettleSource" size="small" plain type="primary" @click="openInclusion(row)"><Link2 :size="15" />参与结算</el-button></template><span v-else class="muted-action">手工成本</span></div></template>
         <template #customerName="{ row }">{{ customerName(row.customerId, row.customerName) }}</template><template #direction="{ row }"><el-tag :type="row.direction === 'RECEIVABLE' ? 'success' : row.direction === 'PAYABLE' ? 'warning' : 'info'">{{ financeDirectionLabel(row.direction) }}</el-tag></template>
         <template #businessReference="{ row }">{{ businessReference(row as unknown as ArapRow) }}</template><template #sourceType="{ row }">{{ sourceTypeDisplay(row.sourceType) }}</template><template #supplierName="{ row }">{{ supplierDisplay(row as unknown as ArapRow) }}</template><template #sourceStatus="{ row }">{{ sourceStatusDisplay(row.status) }}</template>
         <template #status="{ row }"><el-tag :type="row.reviewStatus === 'APPROVED' ? 'success' : row.reviewStatus === 'REJECTED' ? 'danger' : 'warning'">{{ statusLabel(row.reviewStatus) }}</el-tag></template>

src/modules/finance/pages/FinanceCustomerStatementsView.test.ts

@@ -111,6 +111,46 @@ describe('FinanceCustomerStatementsView', () => {
     expect(source).not.toContain('<el-descriptions :column="3" border>')
   })
 
+  it('uses entity buttons for row actions and only folds the fourth action into more', () => {
+    const source = readFileSync(resolve(process.cwd(), 'src/modules/finance/pages/FinanceCustomerStatementsView.vue'), 'utf8')
+    const actions = source.slice(source.indexOf('<template #actions="{ row }">'), source.indexOf('<template #status="{ row }">'))
+    expect(actions).not.toContain(' link')
+    for (const label of ['详情', '提交', '通过', '驳回', '出账', '调整', '重开']) {
+      const actionLine = actions.split('\n').find((line) => line.includes(`${label}</el-button>`))
+      expect(actionLine).toContain('size="small" plain type="primary"')
+    }
+    expect(actions).toContain('size="small" plain type="danger"')
+    expect(actions).toContain('aria-label="更多对账单操作" title="更多对账单操作"')
+    expect(actions).toContain("row.status === 'PENDING_REVIEW' && canReview && canVoid")
+    expect(actions.match(/<el-dropdown-item/g)).toHaveLength(1)
+    expect(actions).toContain('class="danger-menu-item"')
+  })
+
+  it('keeps three available row actions visible with primary and danger semantics', async () => {
+    const { wrapper } = await mountPage([
+      'platform:finance:customer-statement:list',
+      'platform:finance:reconciliation:adjust',
+      'platform:finance:reconciliation:void',
+    ])
+    const actionButtons = [...document.querySelectorAll('button')].filter((button) => ['详情', '调整', '作废'].includes(button.textContent?.trim() || ''))
+    const detailButton = actionButtons.find((button) => button.textContent?.trim() === '详情')
+    const adjustButton = actionButtons.find((button) => button.textContent?.trim() === '调整')
+    const voidButton = actionButtons.find((button) => button.textContent?.trim() === '作废')
+    expect(new Set(actionButtons.map((button) => button.textContent?.trim()))).toEqual(new Set(['详情', '调整', '作废']))
+    expect(detailButton?.classList).toContain('el-button--small')
+    expect(detailButton?.classList).toContain('is-plain')
+    expect(detailButton?.classList).toContain('el-button--primary')
+    expect(adjustButton?.classList).toContain('el-button--primary')
+    expect(voidButton?.classList).toContain('el-button--danger')
+
+    const vm = wrapper.vm as unknown as { actionBusy: boolean; adjustBusy: boolean }
+    vm.actionBusy = true
+    vm.adjustBusy = true
+    await flushPromises()
+    expect(adjustButton?.hasAttribute('disabled')).toBe(true)
+    expect(voidButton?.hasAttribute('disabled')).toBe(true)
+  })
+
   it('keeps the payment history in the desktop detail layout without duplicating a card container', async () => {
     const { wrapper } = await mountPage()
     const vm = wrapper.vm as unknown as { openDetail(row: FinanceStatementReadModel): Promise<void>; activeDetailTab: 'lines' | 'payments' }

src/modules/finance/pages/FinanceCustomerStatementsView.vue

@@ -518,17 +518,19 @@ watch(detailRouteId, (statementId) => {
               <el-button v-if="canCreate" type="primary" :disabled="!canGenerate" :title="canGenerate ? '生成对账单' : '缺少客户列表权限，无法选择客户'" @click="openCreate"><Plus :size="15" />生成对账单</el-button>
             </template>
             <template #actions="{ row }">
-              <el-button link type="primary" @click.stop="openDetail(row as FinanceStatementReadModel)"><Eye :size="15" />详情</el-button>
-              <el-button v-if="row.status === 'DRAFT' && canCreate" link :loading="actionBusy" @click.stop="performAction(row as FinanceStatementReadModel, 'SUBMIT')"><Send :size="15" />提交</el-button>
-              <el-button v-if="row.status === 'PENDING_REVIEW' && canReview" link :loading="actionBusy" @click.stop="performAction(row as FinanceStatementReadModel, 'APPROVE')"><ShieldCheck :size="15" />通过</el-button>
-              <el-dropdown v-if="row.status === 'PENDING_REVIEW' && (canReview || canVoid)" trigger="click" @command="(command: ReconciliationActionPayload['action']) => performAction(row as FinanceStatementReadModel, command)">
-                <el-button link aria-label="更多对账单操作" title="更多对账单操作" @click.stop><MoreHorizontal :size="16" /></el-button>
-                <template #dropdown><el-dropdown-menu><el-dropdown-item v-if="canReview" command="REJECT"><XCircle :size="15" />驳回</el-dropdown-item><el-dropdown-item v-if="canVoid" command="VOID" divided><XCircle :size="15" />作废</el-dropdown-item></el-dropdown-menu></template>
+              <el-button size="small" plain type="primary" :disabled="loading" @click.stop="openDetail(row as FinanceStatementReadModel)"><Eye :size="15" />详情</el-button>
+              <el-button v-if="row.status === 'DRAFT' && canCreate" size="small" plain type="primary" :loading="actionBusy" @click.stop="performAction(row as FinanceStatementReadModel, 'SUBMIT')"><Send :size="15" />提交</el-button>
+              <el-button v-if="row.status === 'PENDING_REVIEW' && canReview" size="small" plain type="primary" :loading="actionBusy" @click.stop="performAction(row as FinanceStatementReadModel, 'APPROVE')"><ShieldCheck :size="15" />通过</el-button>
+              <el-button v-if="row.status === 'PENDING_REVIEW' && canReview" size="small" plain type="primary" :loading="actionBusy" @click.stop="performAction(row as FinanceStatementReadModel, 'REJECT')"><XCircle :size="15" />驳回</el-button>
+              <el-dropdown v-if="row.status === 'PENDING_REVIEW' && canReview && canVoid" trigger="click" @command="(command: ReconciliationActionPayload['action']) => performAction(row as FinanceStatementReadModel, command)">
+                <el-button size="small" plain :loading="actionBusy" aria-label="更多对账单操作" title="更多对账单操作" @click.stop><MoreHorizontal :size="16" /></el-button>
+                <template #dropdown><el-dropdown-menu><el-dropdown-item command="VOID" class="danger-menu-item"><XCircle :size="15" />作废</el-dropdown-item></el-dropdown-menu></template>
               </el-dropdown>
-              <el-button v-if="row.status === 'APPROVED' && canIssue" link :loading="actionBusy" @click.stop="performAction(row as FinanceStatementReadModel, 'ISSUE')"><Send :size="15" />出账</el-button>
-              <el-button v-if="row.status === 'ISSUED' && canAdjust" link :loading="adjustBusy" @click.stop="openAdjustment(row as FinanceStatementReadModel)"><RotateCcw :size="15" />调整</el-button>
-              <el-button v-if="['REJECTED','VOIDED'].includes(String(row.status)) && canVoid" link :loading="actionBusy" @click.stop="performAction(row as FinanceStatementReadModel, 'REOPEN')"><RotateCcw :size="15" />重开</el-button>
-              <el-button v-if="['DRAFT','APPROVED','ISSUED'].includes(String(row.status)) && canVoid" link type="danger" :loading="actionBusy" @click.stop="performAction(row as FinanceStatementReadModel, 'VOID')"><XCircle :size="15" />作废</el-button>
+              <el-button v-if="row.status === 'PENDING_REVIEW' && !canReview && canVoid" size="small" plain type="danger" :loading="actionBusy" @click.stop="performAction(row as FinanceStatementReadModel, 'VOID')"><XCircle :size="15" />作废</el-button>
+              <el-button v-if="row.status === 'APPROVED' && canIssue" size="small" plain type="primary" :loading="actionBusy" @click.stop="performAction(row as FinanceStatementReadModel, 'ISSUE')"><Send :size="15" />出账</el-button>
+              <el-button v-if="row.status === 'ISSUED' && canAdjust" size="small" plain type="primary" :loading="adjustBusy" @click.stop="openAdjustment(row as FinanceStatementReadModel)"><RotateCcw :size="15" />调整</el-button>
+              <el-button v-if="['REJECTED','VOIDED'].includes(String(row.status)) && canVoid" size="small" plain type="primary" :loading="actionBusy" @click.stop="performAction(row as FinanceStatementReadModel, 'REOPEN')"><RotateCcw :size="15" />重开</el-button>
+              <el-button v-if="['DRAFT','APPROVED','ISSUED'].includes(String(row.status)) && canVoid" size="small" plain type="danger" :loading="actionBusy" @click.stop="performAction(row as FinanceStatementReadModel, 'VOID')"><XCircle :size="15" />作废</el-button>
             </template>
             <template #status="{ row }"><el-tag :type="financeStatusTone(row.status)">{{ financeStatusLabel(row.status) }}</el-tag></template>
             <template #customerName="{ row }">{{ customerDisplayName(row.customerId, row.customerName) }}</template>
@@ -586,6 +588,7 @@ watch(detailRouteId, (statementId) => {
 .statement-line-table { min-width: 1840px; }
 .statement-payment-table { min-width: 1300px; }
 .revision-collapse { margin-top: 12px; }
+:deep(.danger-menu-item:not(.is-disabled)) { color: var(--el-color-danger); }
 
 @media (min-width: 1920px) {
   .statement-detail-page :deep(.detail-page-layout) {

src/modules/finance/pages/FinanceFormalSettlementLayout.test.ts

@@ -13,6 +13,22 @@ describe('Finance formal settlement desktop presentation', () => {
     expect(source).not.toContain('<template #toolbar-actions>')
   })
 
+  it('renders up to three row actions as compact icon buttons without wrapping', () => {
+    expect(source.match(/key: 'actions', label: '操作', width: 250/g)).toHaveLength(2)
+    expect(source).toContain('class="settlement-row-actions"')
+    expect(source).toContain('<el-button size="small" plain type="primary" @click="openDetail(row)"><Eye :size="15" />详情</el-button>')
+    expect(source).toContain('size="small" type="primary" :loading="receiptBusy" @click="openReceipt(row)"')
+    expect(source).toContain('size="small" type="primary" @click="openPayment(row)"')
+    expect(source).toContain('size="small" plain type="danger" :loading="actionBusy"')
+    expect(source).toContain('size="small" plain type="primary" :loading="actionBusy"')
+    expect(source).toContain('.settlement-row-actions { display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; white-space: nowrap; }')
+    expect(source).not.toContain('<el-button link')
+    expect(source).not.toContain('MoreHorizontal')
+    expect(source).toContain('v-if="canReceive && [\'ISSUED\',\'PARTIALLY_PAID\'].includes(String(row.status))"')
+    expect(source).toContain('v-if="canPay && [\'ISSUED\',\'PARTIALLY_PAID\'].includes(String(row.status))"')
+    expect(source).toContain('v-if="canVoid && row.status === \'ISSUED\'"')
+  })
+
   it('uses a continuous detail layout with locally scrollable wide tables', () => {
     expect(source).toContain('<DetailPageLayout v-else-if="detailMode" class="settlement-detail-page surface-panel"')
     expect(source).toContain('class="settlement-detail-content"')

src/modules/finance/pages/FinanceFormalSettlementPage.vue

@@ -125,7 +125,7 @@ const totals = computed(() => filteredRows.value.reduce((result, row) => ({
 }), { amount: 0, paid: 0, outstanding: 0 }))
 const columns = computed<DataTableColumn[]>(() => props.kind === 'receivable'
   ? [
-      { key: 'actions', label: '操作', width: 190, fixed: 'left', slotName: 'actions' },
+      { key: 'actions', label: '操作', width: 250, fixed: 'left', slotName: 'actions' },
       { key: 'settlementNo', label: '结算单号', minWidth: 180 },
       { key: 'customerId', label: '客户', minWidth: 180, slotName: 'customer' },
       { key: 'feeItemSummary', label: '费用类型', minWidth: 150, slotName: 'feeItemSummary' },
@@ -144,7 +144,7 @@ const columns = computed<DataTableColumn[]>(() => props.kind === 'receivable'
       { key: 'status', label: '结算状态', width: 120, slotName: 'settlementStatus' },
     ]
   : [
-      { key: 'actions', label: '操作', width: 190, fixed: 'left', slotName: 'actions' },
+      { key: 'actions', label: '操作', width: 250, fixed: 'left', slotName: 'actions' },
       { key: 'settlementNo', label: '结算单号', minWidth: 180 },
       { key: 'supplierName', label: '供应商', minWidth: 180, slotName: 'supplier' },
       { key: 'customerId', label: '客户', minWidth: 180, slotName: 'customer' },
@@ -591,11 +591,13 @@ onMounted(() => {
         <section class="surface-panel table-panel">
           <DataTable :data="filteredRows" :columns="columns" :loading="loading" :aria-label="`${title}列表`" row-key="id" empty-text="暂无符合条件的结算单">
             <template #actions="{ row }">
-              <el-button link type="primary" @click="openDetail(row)"><Eye :size="15" />详情</el-button>
-              <el-button v-if="canReceive && ['ISSUED','PARTIALLY_PAID'].includes(String(row.status))" link :loading="receiptBusy" @click="openReceipt(row)"><HandCoins :size="15" />收款</el-button>
-              <el-button v-if="canPay && ['ISSUED','PARTIALLY_PAID'].includes(String(row.status))" link @click="openPayment(row)"><CreditCard :size="15" />付款</el-button>
-              <el-button v-if="canVoid && row.status === 'ISSUED'" link type="danger" :loading="actionBusy" @click="performAction(row as SettlementRow, 'VOID')"><XCircle :size="15" />作废</el-button>
-              <el-button v-if="canVoid && row.status === 'VOIDED'" link :loading="actionBusy" @click="performAction(row as SettlementRow, 'REOPEN')"><RotateCcw :size="15" />重开</el-button>
+              <div class="settlement-row-actions">
+                <el-button size="small" plain type="primary" @click="openDetail(row)"><Eye :size="15" />详情</el-button>
+                <el-button v-if="canReceive && ['ISSUED','PARTIALLY_PAID'].includes(String(row.status))" size="small" type="primary" :loading="receiptBusy" @click="openReceipt(row)"><HandCoins :size="15" />收款</el-button>
+                <el-button v-if="canPay && ['ISSUED','PARTIALLY_PAID'].includes(String(row.status))" size="small" type="primary" @click="openPayment(row)"><CreditCard :size="15" />付款</el-button>
+                <el-button v-if="canVoid && row.status === 'ISSUED'" size="small" plain type="danger" :loading="actionBusy" @click="performAction(row as SettlementRow, 'VOID')"><XCircle :size="15" />作废</el-button>
+                <el-button v-if="canVoid && row.status === 'VOIDED'" size="small" plain type="primary" :loading="actionBusy" @click="performAction(row as SettlementRow, 'REOPEN')"><RotateCcw :size="15" />重开</el-button>
+              </div>
             </template>
             <template #customer="{ row }">{{ customerName(String(row.customerId), row.customerName) }}</template>
             <template #supplier="{ row }">{{ row.supplierName || '—' }}</template>
@@ -647,6 +649,8 @@ onMounted(() => {
 .settlement-summary { flex: 1; gap: 6px 0; }
 .settlement-list-actions { flex: 0 0 auto; justify-content: flex-end; gap: 8px; }
 .settlement-list-actions :deep(.el-button + .el-button) { margin-left: 0; }
+.settlement-row-actions { display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; white-space: nowrap; }
+.settlement-row-actions :deep(.el-button + .el-button) { margin-left: 0; }
 .summary-item { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
 .settlement-summary .summary-item + .summary-item { margin-left: 18px; padding-left: 18px; border-left: 1px solid var(--cc-border, #e3e8ef); }
 .summary-item span { color: var(--cc-text-secondary, #64748b); font-size: 13px; }