From 2f7ec67903244134a555f46d5d1e6932da5b9550 Mon Sep 17 00:00:00 2001
From: Sisyphus <sisyphus@direv.local>
Date: Thu, 9 Jul 2026 13:55:34 +0800
Subject: [PATCH] =?UTF-8?q?refactor(F006-W17.6.1):=20TableActions=20?=
 =?UTF-8?q?=E6=8C=89=E6=95=B0=E9=87=8F=E8=87=AA=E5=8A=A8=E6=94=B6=E7=BA=B3?=
 =?UTF-8?q?=20(=E2=89=A43=20=E5=85=A8=E6=98=BE=E7=A4=BA,=20>3=20=E5=89=8D2?=
 =?UTF-8?q?+=E2=8B=AF)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

用户反馈: 操作列只显示一个文字按钮+⋯ 不方便, 期望按按钮数量智能显示
- 过滤 when 后 ≤3 个: 全部显示文字按钮, 不显示 ⋯
- 过滤 when 后 ≥4 个: 前 2 个常驻文字按钮 + ⋯ (收纳剩余)
- 默认 visibleCount=2 (可配置)

TableActions API 调整 (W17.6 → W17.6.1):
- 原来: :primary=[A] + :more=[B,C,D] (人为主次划分)
- 现在: :actions=[A,B,C,D] (按数组顺序自动前 2 显 + ⋯)

16 文件改动 (1 组件 + 15 view 调用方式):
- 15 view 合并 :primary/:more → :actions
- 3 按钮页 (10 个): 现在全部显示文字按钮无 ⋯, 体验更直接
- 4/5 按钮页 (5 个): 前 2 显 + ⋯, 比之前详情+⋯更直观
---
 src/components/TableActions/TableActions.vue  | 62 +++++++++++++------
 .../openapi/CompanyAccountListView.vue        |  6 +-
 src/modules/openapi/OpenAppListView.vue       |  6 +-
 src/modules/order/OrderListView.vue           |  4 +-
 .../categoryGood/CategoryGoodListView.vue     |  6 +-
 src/modules/other/label/LabelListView.vue     |  6 +-
 .../supplier/coupon/CouponListView.vue        |  4 +-
 src/modules/supplier/good/GoodListView.vue    |  4 +-
 .../ordercomment/OrderCommentListView.vue     |  6 +-
 .../supplier/promoter/PromoterListView.vue    |  6 +-
 .../servicegood/ServiceGoodListView.vue       |  4 +-
 src/modules/sys/ScheduleListView.vue          |  6 +-
 src/modules/sys/UserListView.vue              |  6 +-
 src/modules/sys/region/RegionListView.vue     |  6 +-
 src/modules/user/UserListView.vue             |  6 +-
 .../EnterpriselevelListView.vue               |  6 +-
 16 files changed, 84 insertions(+), 60 deletions(-)

diff --git a/src/components/TableActions/TableActions.vue b/src/components/TableActions/TableActions.vue
index 9bd9b18..14835ca 100644
--- a/src/components/TableActions/TableActions.vue
+++ b/src/components/TableActions/TableActions.vue
@@ -1,17 +1,19 @@
 <script setup lang="ts">
 /**
- * F006 通用表格操作列组件 (W17.6 主次分离)
+ * F006 通用表格操作列组件 (W17.6 主次分离, W17.6.1 按数量自动收纳)
  *
- * 主操作 (primary) 常驻文字按钮, 次操作 (more) 收进「⋯」下拉菜单。
- * 解决按钮多时操作列拥挤、占宽大的问题。
+ * 按钮数量决定显示方式 (规则符合直觉, 无需人为划分主次):
+ *   - 过滤 when 后 ≤3 个: 全部显示为文字按钮, 不显示 ⋯
+ *   - 过滤 when 后 ≥4 个: 前 visibleCount 个显示为文字按钮, 其余收进 ⋯ 下拉
  *
  * 用法:
  *   <TableActions
  *     :row="row"
- *     :primary="[{ label: '详情', type: 'primary', onClick: onView }]"
- *     :more="[
+ *     :actions="[
+ *       { label: '详情', type: 'primary', onClick: onView },
  *       { label: '审核', type: 'primary', when: r => r.status === 1, onClick: onAudit },
  *       { label: r => r.onShelf === 1 ? '下架' : '上架', type: r => r.onShelf === 1 ? 'warning' : 'success', onClick: onToggle },
+ *       { label: '改分类', type: 'primary', onClick: onCategory },
  *       { label: '删除', type: 'danger', divided: true, confirm: '确认删除?', onClick: onDelete }
  *     ]"
  *   />
@@ -23,7 +25,13 @@
  *   divided  boolean                        菜单项前加分隔线 (危险操作前用)
  *   confirm  boolean | string              true 用默认提示, string 用自定义提示
  *   onClick  (row) => void                  点击处理
+ *
+ * Props:
+ *   row           当前行数据 (透传给 label/type/when/onClick)
+ *   actions       操作列表 (按顺序, 前面的是主操作)
+ *   visibleCount  常驻文字按钮数, 默认 2 (仅在按钮 >3 时生效)
  */
+import { computed } from 'vue'
 import { ElMessageBox, ElMessage } from 'element-plus'
 import { MoreFilled } from '@element-plus/icons-vue'
 
@@ -38,11 +46,14 @@ interface ActionItem {
   onClick: (row: any) => void
 }
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   row: any
-  primary?: ActionItem[]
-  more?: ActionItem[]
-}>()
+  actions: ActionItem[]
+  /** 常驻文字按钮数, 仅在按钮 >3 时生效 (默认 2) */
+  visibleCount?: number
+}>(), {
+  visibleCount: 2
+})
 
 // 解析 label (string 或函数)
 function resolveLabel(item: ActionItem): string {
@@ -55,10 +66,23 @@ function resolveType(item: ActionItem): ActionType {
   return t || 'primary'
 }
 
-// more 列表过滤 when 条件后的有效项
-function visibleMore(): ActionItem[] {
-  return (props.more || []).filter(item => !item.when || item.when(props.row))
-}
+// 过滤 when 条件后的有效项
+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) : []
+)
 
 // 执行操作 (处理二次确认)
 async function runAction(item: ActionItem) {
@@ -80,9 +104,9 @@ async function runAction(item: ActionItem) {
 
 <template>
   <div class="rr-table-actions">
-    <!-- 主操作: 常驻文字按钮 -->
+    <!-- 常驻文字按钮 -->
     <el-button
-      v-for="(item, i) in (primary || [])"
+      v-for="(item, i) in primaryActions"
       :key="`p${i}`"
       text
       :type="resolveType(item) as any"
@@ -90,11 +114,11 @@ async function runAction(item: ActionItem) {
       @click="runAction(item)"
     >{{ resolveLabel(item) }}</el-button>
 
-    <!-- 次操作: 收进 ⋯ 下拉 (过滤 when 后有剩余项才渲染) -->
+    <!-- 收纳下拉 (仅在按钮 >3 时渲染) -->
     <el-dropdown
-      v-if="visibleMore().length"
+      v-if="moreActions.length"
       trigger="click"
-      @command="(cmd: number) => runAction(visibleMore()[cmd])"
+      @command="(cmd: number) => runAction(moreActions[cmd])"
     >
       <span class="rr-more-trigger">
         <el-icon><MoreFilled /></el-icon>
@@ -102,7 +126,7 @@ async function runAction(item: ActionItem) {
       <template #dropdown>
         <el-dropdown-menu>
           <el-dropdown-item
-            v-for="(item, i) in visibleMore()"
+            v-for="(item, i) in moreActions"
             :key="`m${i}`"
             :command="i"
             :divided="item.divided"
diff --git a/src/modules/openapi/CompanyAccountListView.vue b/src/modules/openapi/CompanyAccountListView.vue
index 586ac05..9bd297b 100644
--- a/src/modules/openapi/CompanyAccountListView.vue
+++ b/src/modules/openapi/CompanyAccountListView.vue
@@ -302,10 +302,10 @@ onMounted(() => { load(); loadCustomers() })
         <template #action="{ row }">
           <TableActions
             :row="row"
-            :primary="[{ label: '查看动态', type: 'primary', onClick: activityHandle }]"
-            :more="[
+            :actions="[
+              { label: '查看动态', type: 'primary', onClick: activityHandle },
               { label: '接管', type: 'primary', onClick: takeoverHandle },
-              { label: '解绑', type: 'danger', divided: true, onClick: unbindHandle }
+              { label: '解绑', type: 'danger', onClick: unbindHandle }
             ]"
           />
         </template>
diff --git a/src/modules/openapi/OpenAppListView.vue b/src/modules/openapi/OpenAppListView.vue
index dcca8f4..3dff50d 100644
--- a/src/modules/openapi/OpenAppListView.vue
+++ b/src/modules/openapi/OpenAppListView.vue
@@ -374,11 +374,11 @@ onMounted(() => { load(); loadCustomers() })
         <template #action="{ row }">
           <TableActions
             :row="row"
-            :primary="[{ label: '详情', type: 'primary', onClick: detailHandle }]"
-            :more="[
+            :actions="[
+              { label: '详情', type: 'primary', onClick: detailHandle },
               { label: '重发二维码', type: 'primary', when: (r: any) => r.status === 0 || r.status === 1, onClick: resendQrHandle },
               { label: '重置密钥', type: 'warning', when: (r: any) => r.status === 0 || r.status === 1, onClick: resetSecretHandle },
-              { label: '撤销', type: 'danger', when: (r: any) => r.status === 0 || r.status === 1, onClick: revokeHandle },
+              { label: '撤销', type: 'danger', divided: true, when: (r: any) => r.status === 0 || r.status === 1, onClick: revokeHandle },
               { label: '删除', type: 'danger', divided: true, when: (r: any) => r.status === 2, onClick: deleteHandle }
             ]"
           />
diff --git a/src/modules/order/OrderListView.vue b/src/modules/order/OrderListView.vue
index 6fe327f..16ea831 100644
--- a/src/modules/order/OrderListView.vue
+++ b/src/modules/order/OrderListView.vue
@@ -276,8 +276,8 @@ onMounted(load)
         <template #action="{ row }">
           <TableActions
             :row="row"
-            :primary="[{ label: '详情', type: 'primary', onClick: onViewDetail }]"
-            :more="[
+            :actions="[
+              { label: '详情', type: 'primary', onClick: onViewDetail },
               { label: '付款', type: 'primary', when: (r: any) => r.status === 1, onClick: onPay },
               { label: '发货', type: 'primary', when: (r: any) => r.status === 2, onClick: onShip },
               { label: '收货', type: 'primary', when: (r: any) => r.status === 3, onClick: onConfirmReceipt },
diff --git a/src/modules/other/categoryGood/CategoryGoodListView.vue b/src/modules/other/categoryGood/CategoryGoodListView.vue
index 59b5a30..b80de61 100644
--- a/src/modules/other/categoryGood/CategoryGoodListView.vue
+++ b/src/modules/other/categoryGood/CategoryGoodListView.vue
@@ -189,10 +189,10 @@ onMounted(load)
           <template #default="{ row }">
             <TableActions
               :row="row"
-              :primary="[{ label: '修改', type: 'primary', onClick: onEdit }]"
-              :more="[
+              :actions="[
+                { label: '修改', type: 'primary', onClick: onEdit },
                 { label: '新增子分类', type: 'primary', when: (r: any) => r.level < 3, onClick: onAdd },
-                { label: '删除', type: 'danger', divided: true, onClick: onDelete }
+                { label: '删除', type: 'danger', onClick: onDelete }
               ]"
             />
           </template>
diff --git a/src/modules/other/label/LabelListView.vue b/src/modules/other/label/LabelListView.vue
index bc6b98a..d9439bf 100644
--- a/src/modules/other/label/LabelListView.vue
+++ b/src/modules/other/label/LabelListView.vue
@@ -150,10 +150,10 @@ onMounted(load)
         <template #action="{ row }">
           <TableActions
             :row="row"
-            :primary="[{ label: '修改', type: 'primary', onClick: onEdit }]"
-            :more="[
+            :actions="[
+              { label: '修改', type: 'primary', onClick: onEdit },
               { label: (r: any) => r.status === 0 ? '禁用' : '启用', type: (r: any) => r.status === 0 ? 'warning' : 'success', onClick: onToggleStatus },
-              { label: '删除', type: 'danger', divided: true, onClick: onDelete }
+              { label: '删除', type: 'danger', onClick: onDelete }
             ]"
           />
         </template>
diff --git a/src/modules/supplier/coupon/CouponListView.vue b/src/modules/supplier/coupon/CouponListView.vue
index 6cb8e8e..53c592d 100644
--- a/src/modules/supplier/coupon/CouponListView.vue
+++ b/src/modules/supplier/coupon/CouponListView.vue
@@ -184,8 +184,8 @@ onMounted(load)
           <template #default="{ row }">
             <TableActions
               :row="row"
-              :primary="[{ label: '编辑', type: 'primary', when: (r: any) => r.sourceType === 2, onClick: onEdit }]"
-              :more="[
+              :actions="[
+                { label: '编辑', type: 'primary', when: (r: any) => r.sourceType === 2, onClick: onEdit },
                 { label: (r: any) => r.onShelf === 1 ? '停用' : '启用', type: (r: any) => r.onShelf === 1 ? 'warning' : 'success', onClick: onToggleStatus },
                 { label: '领取记录', type: 'primary', when: (r: any) => r.sourceType === 2, onClick: onShowRecords },
                 { label: '删除', type: 'danger', divided: true, onClick: onDelete }
diff --git a/src/modules/supplier/good/GoodListView.vue b/src/modules/supplier/good/GoodListView.vue
index 8d52dbe..ca6f769 100644
--- a/src/modules/supplier/good/GoodListView.vue
+++ b/src/modules/supplier/good/GoodListView.vue
@@ -392,8 +392,8 @@ onMounted(() => Promise.all([load(), loadStats()]))
       <template #action="{ row }">
         <TableActions
           :row="row"
-          :primary="[{ label: '详情', type: 'primary', onClick: onShowDetail }]"
-          :more="[
+          :actions="[
+            { label: '详情', type: 'primary', onClick: onShowDetail },
             { label: '审核', type: 'primary', when: (r: any) => r.checkStatus === 1, onClick: onShowCheckDialog },
             { label: (r: any) => r.onShelf === 1 ? '下架' : '上架', type: (r: any) => r.onShelf === 1 ? 'warning' : 'success', onClick: onOnShelf },
             { label: '改分类', type: 'primary', onClick: onShowCategoryDialog },
diff --git a/src/modules/supplier/ordercomment/OrderCommentListView.vue b/src/modules/supplier/ordercomment/OrderCommentListView.vue
index 8909190..61c87ba 100644
--- a/src/modules/supplier/ordercomment/OrderCommentListView.vue
+++ b/src/modules/supplier/ordercomment/OrderCommentListView.vue
@@ -112,10 +112,10 @@ onMounted(load)
       <template #actions="{ row }">
         <TableActions
           :row="row"
-          :primary="[{ label: '详情', type: 'primary', onClick: onView }]"
-          :more="[
+          :actions="[
+            { label: '详情', type: 'primary', onClick: onView },
             { label: '回复', type: 'primary', when: (r: any) => !r.parentId, onClick: onReply },
-            { label: '删除', type: 'danger', divided: true, onClick: onDelete }
+            { label: '删除', type: 'danger', onClick: onDelete }
           ]"
         />
       </template>
diff --git a/src/modules/supplier/promoter/PromoterListView.vue b/src/modules/supplier/promoter/PromoterListView.vue
index 8c8be83..10968c0 100644
--- a/src/modules/supplier/promoter/PromoterListView.vue
+++ b/src/modules/supplier/promoter/PromoterListView.vue
@@ -106,10 +106,10 @@ onMounted(load)
       <template #actions="{ row }">
         <TableActions
           :row="row"
-          :primary="[{ label: '详情', type: 'primary', onClick: onView }]"
-          :more="[
+          :actions="[
+            { label: '详情', type: 'primary', onClick: onView },
             { label: '编辑', type: 'primary', onClick: onEdit },
-            { label: '删除', type: 'danger', divided: true, onClick: onDelete }
+            { label: '删除', type: 'danger', onClick: onDelete }
           ]"
         />
       </template>
diff --git a/src/modules/supplier/servicegood/ServiceGoodListView.vue b/src/modules/supplier/servicegood/ServiceGoodListView.vue
index 0b98690..5701caa 100644
--- a/src/modules/supplier/servicegood/ServiceGoodListView.vue
+++ b/src/modules/supplier/servicegood/ServiceGoodListView.vue
@@ -259,8 +259,8 @@ onMounted(() => Promise.all([load(), loadStats()]))
       <template #action="{ row }">
         <TableActions
           :row="row"
-          :primary="[{ label: '详情', type: 'primary', onClick: onShowDetail }]"
-          :more="[
+          :actions="[
+            { label: '详情', type: 'primary', onClick: onShowDetail },
             { label: '审核', type: 'primary', when: (r: any) => r.checkStatus === 1, onClick: onShowCheck },
             { label: (r: any) => r.onShelf === 1 ? '下架' : '上架', type: (r: any) => r.onShelf === 1 ? 'warning' : 'success', onClick: onOnShelf },
             { label: '改分类', type: 'primary', onClick: onShowCategory },
diff --git a/src/modules/sys/ScheduleListView.vue b/src/modules/sys/ScheduleListView.vue
index 3d63f3e..b2c89e8 100644
--- a/src/modules/sys/ScheduleListView.vue
+++ b/src/modules/sys/ScheduleListView.vue
@@ -173,11 +173,11 @@ onMounted(load)
         <template #action="{ row }">
           <TableActions
             :row="row"
-            :primary="[{ label: '执行', type: 'primary', onClick: runHandle }]"
-            :more="[
+            :actions="[
+              { label: '执行', type: 'primary', onClick: runHandle },
               { label: '暂停', type: 'warning', when: (r: any) => r.status === 1, onClick: pauseHandle },
               { label: '恢复', type: 'primary', when: (r: any) => r.status !== 1, onClick: resumeHandle },
-              { label: '删除', type: 'danger', divided: true, onClick: deleteHandle }
+              { label: '删除', type: 'danger', onClick: deleteHandle }
             ]"
           />
         </template>
diff --git a/src/modules/sys/UserListView.vue b/src/modules/sys/UserListView.vue
index e3fefe0..8e4a5f5 100644
--- a/src/modules/sys/UserListView.vue
+++ b/src/modules/sys/UserListView.vue
@@ -296,10 +296,10 @@ onMounted(() => { load() })
         <template #action="{ row }">
           <TableActions
             :row="row"
-            :primary="[{ label: (r: any) => r.status === 1 ? '停用' : '启用', type: (r: any) => r.status === 1 ? 'warning' : 'success', onClick: toggleStatus }]"
-            :more="[
+            :actions="[
+              { label: (r: any) => r.status === 1 ? '停用' : '启用', type: (r: any) => r.status === 1 ? 'warning' : 'success', onClick: toggleStatus },
               { label: '重置密码', type: 'primary', onClick: resetPwdHandle },
-              { label: '删除', type: 'danger', divided: true, onClick: deleteHandle }
+              { label: '删除', type: 'danger', onClick: deleteHandle }
             ]"
           />
         </template>
diff --git a/src/modules/sys/region/RegionListView.vue b/src/modules/sys/region/RegionListView.vue
index 0495fed..36fba5d 100644
--- a/src/modules/sys/region/RegionListView.vue
+++ b/src/modules/sys/region/RegionListView.vue
@@ -143,10 +143,10 @@ onMounted(load)
           <template #default="{ row }">
             <TableActions
               :row="row"
-              :primary="[{ label: '修改', type: 'primary', onClick: onEdit }]"
-              :more="[
+              :actions="[
+                { label: '修改', type: 'primary', onClick: onEdit },
                 { label: '新增下级', type: 'primary', when: (r: any) => r.treeLevel < 4, onClick: onAdd },
-                { label: '删除', type: 'danger', divided: true, onClick: onDelete }
+                { label: '删除', type: 'danger', onClick: onDelete }
               ]"
             />
           </template>
diff --git a/src/modules/user/UserListView.vue b/src/modules/user/UserListView.vue
index 8a32e01..2fabc77 100644
--- a/src/modules/user/UserListView.vue
+++ b/src/modules/user/UserListView.vue
@@ -343,10 +343,10 @@ onMounted(load)
       <template #action="{ row }">
         <TableActions
           :row="row"
-          :primary="[{ label: '修改', type: 'primary', onClick: onEdit }]"
-          :more="[
+          :actions="[
+            { label: '修改', type: 'primary', onClick: onEdit },
             { label: (r: any) => r.enabled === 0 ? '禁用' : '启用', type: (r: any) => r.enabled === 0 ? 'warning' : 'success', onClick: toggleEnabled },
-            { label: '删除', type: 'danger', divided: true, onClick: deleteUser }
+            { label: '删除', type: 'danger', onClick: deleteUser }
           ]"
         />
       </template>
diff --git a/src/modules/user/enterpriselevel/EnterpriselevelListView.vue b/src/modules/user/enterpriselevel/EnterpriselevelListView.vue
index ccd8d6c..e77f4cb 100644
--- a/src/modules/user/enterpriselevel/EnterpriselevelListView.vue
+++ b/src/modules/user/enterpriselevel/EnterpriselevelListView.vue
@@ -92,10 +92,10 @@ onMounted(load)
       <template #actions="{ row }">
         <TableActions
           :row="row"
-          :primary="[{ label: '查看', type: 'primary', onClick: onView }]"
-          :more="[
+          :actions="[
+            { label: '查看', type: 'primary', onClick: onView },
             { label: '编辑', type: 'primary', onClick: onEdit },
-            { label: '删除', type: 'danger', divided: true, onClick: onDelete }
+            { label: '删除', type: 'danger', onClick: onDelete }
           ]"
         />
       </template>