From 63b32e999f42cf7800736a4d83a96d08f5a26530 Mon Sep 17 00:00:00 2001
From: Sisyphus <sisyphus@direv.local>
Date: Thu, 9 Jul 2026 14:31:53 +0800
Subject: [PATCH] =?UTF-8?q?fix(F006-W17.6.1):=20TableActions=20=E6=94=B6?=
 =?UTF-8?q?=E7=B4=A7=E9=97=B4=E8=B7=9D=20+=20=E7=90=86=E9=A1=BA=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

用户反馈: 按钮没显示全 + 间距太大不美观

间距收紧:
- el-button text padding 0 8px → 0 4px (默认太松散)
- .rr-table-actions gap 4px → 0 (按钮紧贴)
- ⋯ 触发器 26px → 22px (更小巧)
- 实测: 按钮间距 0px, 按钮到⋯ 间距 2px

布局逻辑理顺:
- 多个 computed (visibleActions/isCollapsing/primaryActions/moreActions)
  → 合并为单一 layout computed ({primary, more})
- 减少中间依赖, 更可靠

Playwright 验证通过 (订单页):
- status=1 行: [详情,付款] + ⋯ (4按钮前2显)
- status=4 行: [详情,退款,打印] (3按钮全显无⋯)
- status≥5 行: [详情,打印] (2按钮无⋯)
---
 src/components/TableActions/TableActions.vue | 45 +++++++++++---------
 1 file changed, 25 insertions(+), 20 deletions(-)

diff --git a/src/components/TableActions/TableActions.vue b/src/components/TableActions/TableActions.vue
index 14835ca..c4627a2 100644
--- a/src/components/TableActions/TableActions.vue
+++ b/src/components/TableActions/TableActions.vue
@@ -71,18 +71,14 @@ const visibleActions = computed<ActionItem[]>(() =>
   props.actions.filter(item => !item.when || item.when(props.row))
 )
 
-// 按钮总数 ≤3 全部常驻, >3 才拆分前 visibleCount 个常驻 + 其余收纳
-const isCollapsing = computed(() => visibleActions.value.length > 3)
-
-// 常驻文字按钮 (前 N 个, N = isCollapsing ? visibleCount : 全部)
-const primaryActions = computed<ActionItem[]>(() =>
-  isCollapsing.value ? visibleActions.value.slice(0, props.visibleCount) : visibleActions.value
-)
-
-// 收进 ⋯ 的按钮 (第 visibleCount 个及之后, 仅 isCollapsing 时有值)
-const moreActions = computed<ActionItem[]>(() =>
-  isCollapsing.value ? visibleActions.value.slice(props.visibleCount) : []
-)
+// 拆分结果: 前 N 个常驻 + 其余收纳 (≤3 全常驻, >3 前 visibleCount 常驻)
+const layout = computed(() => {
+  const all = visibleActions.value
+  if (all.length > 3) {
+    return { primary: all.slice(0, props.visibleCount), more: all.slice(props.visibleCount) }
+  }
+  return { primary: all, more: [] as ActionItem[] }
+})
 
 // 执行操作 (处理二次确认)
 async function runAction(item: ActionItem) {
@@ -106,7 +102,7 @@ async function runAction(item: ActionItem) {
   <div class="rr-table-actions">
     <!-- 常驻文字按钮 -->
     <el-button
-      v-for="(item, i) in primaryActions"
+      v-for="(item, i) in layout.primary"
       :key="`p${i}`"
       text
       :type="resolveType(item) as any"
@@ -116,9 +112,9 @@ async function runAction(item: ActionItem) {
 
     <!-- 收纳下拉 (仅在按钮 >3 时渲染) -->
     <el-dropdown
-      v-if="moreActions.length"
+      v-if="layout.more.length"
       trigger="click"
-      @command="(cmd: number) => runAction(moreActions[cmd])"
+      @command="(cmd: number) => runAction(layout.more[cmd])"
     >
       <span class="rr-more-trigger">
         <el-icon><MoreFilled /></el-icon>
@@ -126,7 +122,7 @@ async function runAction(item: ActionItem) {
       <template #dropdown>
         <el-dropdown-menu>
           <el-dropdown-item
-            v-for="(item, i) in moreActions"
+            v-for="(item, i) in layout.more"
             :key="`m${i}`"
             :command="i"
             :divided="item.divided"
@@ -142,18 +138,27 @@ async function runAction(item: ActionItem) {
 .rr-table-actions {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
+  gap: 0;
+  // 收紧 el-button text 的内边距, 默认 padding: 8px 15px 太松散
+  :deep(.el-button.is-text) {
+    padding: 0 4px;
+    margin: 0;
+    font-size: 13px;
+    height: auto;
+    min-height: 0;
+  }
 }
 .rr-more-trigger {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 26px;
-  height: 26px;
+  width: 22px;
+  height: 22px;
   border-radius: 4px;
   cursor: pointer;
   color: var(--ink-2, #475569);
-  font-size: 16px;
+  font-size: 15px;
+  margin-left: 2px;
   transition: all 0.15s;
   &:hover {
     background: var(--el-fill-color-light, #F4F4F5);