From b183e71f642fba84c82b0e8e63bcb03e0d27e610 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Mon, 6 Jul 2026 16:46:22 +0800
Subject: [PATCH] =?UTF-8?q?feat(table):=20=E6=8A=BD=E5=8F=96=20ActionPopco?=
 =?UTF-8?q?nfirm=20=E5=B9=B6=E4=BC=98=E5=8C=96=20sub-actions=20=E5=B1=95?=
 =?UTF-8?q?=E5=BC=80=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将 Popconfirm 逻辑抽离为独立组件，ActionButton 内置 tooltip 支持，sub-actions 触发按钮改用箭头图标切换展开状态。

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 packages/table/package.json             |   1 +
 packages/table/src/ActionButton.vue     |  30 +++---
 packages/table/src/ActionPopconfirm.vue |  44 ++++++++
 packages/table/src/ActionsColumn.vue    | 134 +++++++++++-------------
 pnpm-lock.yaml                          |   3 +
 5 files changed, 129 insertions(+), 83 deletions(-)
 create mode 100644 packages/table/src/ActionPopconfirm.vue

diff --git a/packages/table/package.json b/packages/table/package.json
index a1b59140..3e5ebb57 100644
--- a/packages/table/package.json
+++ b/packages/table/package.json
@@ -37,6 +37,7 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
+    "@element-plus/icons-vue": "^2.3.2",
     "lodash-es": "^4.17.21"
   },
   "devDependencies": {
diff --git a/packages/table/src/ActionButton.vue b/packages/table/src/ActionButton.vue
index 195af554..780f5fdc 100644
--- a/packages/table/src/ActionButton.vue
+++ b/packages/table/src/ActionButton.vue
@@ -1,20 +1,26 @@
 <template>
-  <TMagicButton
-    v-show="visible"
-    :class="btnClass"
-    link
-    size="small"
-    :type="action.buttonType || 'primary'"
-    :icon="action.icon"
-    :disabled="disabled(action.disabled, row)"
-    @click="onClick"
+  <TMagicTooltip
+    :placement="action.tooltipPlacement || 'top'"
+    :disabled="!Boolean(action.tooltip)"
+    :content="action.tooltip"
   >
-    <span v-html="formatter(action.text, row)"></span>
-  </TMagicButton>
+    <TMagicButton
+      v-show="visible"
+      :class="btnClass"
+      link
+      size="small"
+      :type="action.buttonType || 'primary'"
+      :icon="action.icon"
+      :disabled="disabled(action.disabled, row)"
+      @click="onClick"
+    >
+      <span v-html="formatter(action.text, row)"></span>
+    </TMagicButton>
+  </TMagicTooltip>
 </template>
 
 <script lang="ts" setup>
-import { TMagicButton } from '@tmagic/design';
+import { TMagicButton, TMagicTooltip } from '@tmagic/design';
 
 import { disabled, formatActionText as formatter } from './actionHelpers';
 import { ColumnActionConfig } from './schema';
diff --git a/packages/table/src/ActionPopconfirm.vue b/packages/table/src/ActionPopconfirm.vue
new file mode 100644
index 00000000..88fd22df
--- /dev/null
+++ b/packages/table/src/ActionPopconfirm.vue
@@ -0,0 +1,44 @@
+<template>
+  <TMagicPopconfirm
+    placement="top"
+    :width="action.popconfirmWidth"
+    :title="formatter(action.confirmText, row) || '确定执行此操作？'"
+    @confirm="onConfirm"
+  >
+    <template #reference>
+      <ActionButton :action="action" :row="row" :index="index" :btn-class="btnClass" :visible="visible" />
+    </template>
+  </TMagicPopconfirm>
+</template>
+
+<script lang="ts" setup>
+import { TMagicPopconfirm } from '@tmagic/design';
+
+import ActionButton from './ActionButton.vue';
+import { formatActionText as formatter } from './actionHelpers';
+import { ColumnActionConfig } from './schema';
+
+defineOptions({
+  name: 'MTableActionPopconfirm',
+});
+
+const props = withDefaults(
+  defineProps<{
+    action: ColumnActionConfig;
+    row: any;
+    index: number;
+    btnClass?: string;
+    visible?: boolean;
+  }>(),
+  {
+    btnClass: 'action-btn',
+    visible: true,
+  },
+);
+
+const emit = defineEmits<{
+  confirm: [action: ColumnActionConfig, row: any, index: number];
+}>();
+
+const onConfirm = () => emit('confirm', props.action, props.row, props.index);
+</script>
diff --git a/packages/table/src/ActionsColumn.vue b/packages/table/src/ActionsColumn.vue
index 166e9857..f68fbd98 100644
--- a/packages/table/src/ActionsColumn.vue
+++ b/packages/table/src/ActionsColumn.vue
@@ -1,24 +1,17 @@
 <template>
   <template v-for="(action, actionIndex) in config.actions" :key="actionIndex">
-    <TMagicPopconfirm
+    <ActionPopconfirm
       v-if="action.popconfirm"
-      placement="top"
-      :width="action.popconfirmWidth"
-      :title="formatter(action.confirmText, row) || '确定执行此操作？'"
-      @confirm="actionHandler(action, row, index)"
-    >
-      <template #reference>
-        <ActionButton
-          :action="action"
-          :row="row"
-          :index="index"
-          :visible="display(action.display, row) && !editState[index]"
-        />
-      </template>
-    </TMagicPopconfirm>
+      :action="action"
+      :row="row"
+      :index="index"
+      :visible="display(action.display, row) && !editState[index]"
+      @confirm="actionHandler"
+    />
 
     <TMagicPopover
       v-else-if="action.type === 'sub-actions'"
+      v-model:visible="popoverVisible"
       trigger="click"
       :placement="action.subActionConfig?.placement || 'bottom'"
       :width="action.subActionConfig?.popoverWidth"
@@ -26,66 +19,49 @@
       :destroy-on-close="action.subActionConfig?.popoverDestroyOnClose"
     >
       <template #reference>
-        <ActionButton
-          :action="action"
-          :row="row"
-          :index="index"
-          :visible="display(action.display, row) && !editState[index]"
-        />
+        <TMagicButton
+          v-show="action.subActionConfig?.items?.length && display(action.display, row) && !editState[index]"
+          class="action-btn"
+          link
+          size="small"
+          :type="action.buttonType || 'primary'"
+          :icon="popoverVisible ? ArrowDown : ArrowRight"
+          @click.stop="togglePopover"
+        ></TMagicButton>
       </template>
       <div class="sub-actions">
         <template v-for="(subAction, subIndex) in action.subActionConfig?.items" :key="subIndex">
-          <TMagicPopconfirm
+          <ActionPopconfirm
             v-if="subAction.popconfirm"
-            placement="top"
-            :width="subAction.popconfirmWidth"
-            :title="formatter(subAction.confirmText, row) || '确定执行此操作？'"
-            @confirm="actionHandler(subAction, row, index)"
-          >
-            <template #reference>
-              <ActionButton
-                :action="subAction"
-                :row="row"
-                :index="index"
-                btn-class="sub-action-btn"
-                :visible="display(subAction.display, row)"
-              />
-            </template>
-          </TMagicPopconfirm>
+            :action="subAction"
+            :row="row"
+            :index="index"
+            btn-class="sub-action-btn"
+            :visible="display(subAction.display, row)"
+            @confirm="actionHandler"
+          />
 
-          <TMagicTooltip
+          <ActionButton
             v-else
-            :placement="subAction.tooltipPlacement || 'top'"
-            :disabled="!Boolean(subAction.tooltip)"
-            :content="subAction.tooltip"
-          >
-            <ActionButton
-              :action="subAction"
-              :row="row"
-              :index="index"
-              btn-class="sub-action-btn"
-              :visible="display(subAction.display, row)"
-              @click="actionHandler"
-            />
-          </TMagicTooltip>
+            :action="subAction"
+            :row="row"
+            :index="index"
+            btn-class="sub-action-btn"
+            :visible="display(subAction.display, row)"
+            @click="actionHandler"
+          />
         </template>
       </div>
     </TMagicPopover>
 
-    <TMagicTooltip
+    <ActionButton
       v-else
-      :placement="action.tooltipPlacement || 'top'"
-      :disabled="!Boolean(action.tooltip)"
-      :content="action.tooltip"
-    >
-      <ActionButton
-        :action="action"
-        :row="row"
-        :index="index"
-        :visible="display(action.display, row) && !editState[index]"
-        @click="actionHandler"
-      />
-    </TMagicTooltip>
+      :action="action"
+      :row="row"
+      :index="index"
+      :visible="display(action.display, row) && !editState[index]"
+      @click="actionHandler"
+    />
   </template>
 
   <TMagicButton
@@ -109,12 +85,15 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue';
+import { ArrowDown, ArrowRight } from '@element-plus/icons-vue';
 import { cloneDeep } from 'lodash-es';
 
-import { TMagicButton, tMagicMessage, TMagicPopconfirm, TMagicPopover, TMagicTooltip } from '@tmagic/design';
+import { TMagicButton, tMagicMessage, TMagicPopover } from '@tmagic/design';
 
 import ActionButton from './ActionButton.vue';
-import { display, formatActionText as formatter } from './actionHelpers';
+import { display } from './actionHelpers';
+import ActionPopconfirm from './ActionPopconfirm.vue';
 import { ColumnActionConfig, ColumnConfig } from './schema';
 
 defineOptions({
@@ -138,6 +117,11 @@ const props = withDefaults(
   },
 );
 
+const popoverVisible = ref(false);
+const togglePopover = () => {
+  popoverVisible.value = !popoverVisible.value;
+};
+
 const emit = defineEmits<{
   'after-action': [{ index: number }];
   'after-action-cancel': [{ index: number }];
@@ -192,15 +176,23 @@ defineExpose({
 });
 </script>
 
-<style scoped>
+<style lang="scss">
 .sub-actions {
   display: flex;
   flex-direction: column;
   gap: 4px;
-}
+  align-items: flex-start;
 
-.sub-actions .sub-action-btn {
-  justify-content: flex-start;
-  width: 100%;
+  .sub-action-btn {
+    width: 100%;
+  }
+
+  .tmagic-design-button + .tmagic-design-button {
+    margin-left: 0;
+  }
+
+  .tmagic-design-button {
+    justify-content: flex-start;
+  }
 }
 </style>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a259a7ae..9f3c764b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -497,6 +497,9 @@ importers:
 
   packages/table:
     dependencies:
+      '@element-plus/icons-vue':
+        specifier: ^2.3.2
+        version: 2.3.2(vue@3.5.38(typescript@6.0.3))
       '@tmagic/design':
         specifier: workspace:*
         version: link:../design