From 082fddcb642bf6f6ca9960ea12b833bda5d4d6c5 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 27 Sep 2025 17:04:06 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E3=80=90antd=E3=80=91=E3=80=90crm?=
 =?UTF-8?q?=E3=80=91=E7=BA=BF=E7=B4=A2=E3=80=81=E8=81=94=E7=B3=BB=E4=BA=BA?=
 =?UTF-8?q?=E7=9A=84=E8=AF=A6=E6=83=85=EF=BC=8C=E6=94=B9=E6=88=90=20TableA?=
 =?UTF-8?q?ction=20=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/crm/clue/detail/index.vue       | 63 ++++++++++---------
 .../src/views/crm/contact/detail/index.vue    | 47 +++++++-------
 2 files changed, 59 insertions(+), 51 deletions(-)

diff --git a/apps/web-antd/src/views/crm/clue/detail/index.vue b/apps/web-antd/src/views/crm/clue/detail/index.vue
index 6807daf2..cd92f072 100644
--- a/apps/web-antd/src/views/crm/clue/detail/index.vue
+++ b/apps/web-antd/src/views/crm/clue/detail/index.vue
@@ -7,15 +7,15 @@ import { useRoute, useRouter } from 'vue-router';
 
 import { confirm, Page, useVbenModal } from '@vben/common-ui';
 import { useTabs } from '@vben/hooks';
-import { IconifyIcon } from '@vben/icons';
 
-import { Button, Card, message, Tabs } from 'ant-design-vue';
+import { Card, message, Tabs } from 'ant-design-vue';
 
 import { getClue, transformClue } from '#/api/crm/clue';
 import { getOperateLogPage } from '#/api/crm/operateLog';
 import { BizTypeEnum } from '#/api/crm/permission';
 import { useDescription } from '#/components/description';
 import { OperateLog } from '#/components/operate-log';
+import { ACTION_ICON, TableAction } from '#/components/table-action';
 import { FollowUp } from '#/views/crm/followup';
 import { PermissionList, TransferForm } from '#/views/crm/permission';
 
@@ -117,34 +117,37 @@ onMounted(() => {
     <FormModal @success="getClueDetail" />
     <TransferModal @success="getClueDetail" />
     <template #extra>
-      <div class="flex items-center gap-2">
-        <Button @click="handleBack">
-          <IconifyIcon icon="lucide:arrow-left" />
-          返回
-        </Button>
-        <Button
-          v-if="permissionListRef?.validateWrite"
-          type="primary"
-          @click="handleEdit"
-          v-access:code="['crm:clue:update']"
-        >
-          {{ $t('ui.actionTitle.edit') }}
-        </Button>
-        <Button
-          v-if="permissionListRef?.validateOwnerUser"
-          type="primary"
-          @click="handleTransfer"
-        >
-          转移
-        </Button>
-        <Button
-          v-if="permissionListRef?.validateOwnerUser && !clue?.transformStatus"
-          type="primary"
-          @click="handleTransform"
-        >
-          转化为客户
-        </Button>
-      </div>
+      <TableAction
+        :actions="[
+          {
+            label: '返回',
+            type: 'default',
+            icon: 'lucide:arrow-left',
+            onClick: handleBack,
+          },
+          {
+            label: $t('ui.actionTitle.edit'),
+            type: 'primary',
+            icon: ACTION_ICON.EDIT,
+            auth: ['crm:clue:update'],
+            ifShow: permissionListRef?.validateWrite,
+            onClick: handleEdit,
+          },
+          {
+            label: '转移',
+            type: 'primary',
+            ifShow: permissionListRef?.validateOwnerUser,
+            onClick: handleTransfer,
+          },
+          {
+            label: '转化为客户',
+            type: 'primary',
+            ifShow:
+              permissionListRef?.validateOwnerUser && !clue?.transformStatus,
+            onClick: handleTransform,
+          },
+        ]"
+      />
     </template>
     <Card class="min-h-[10%]">
       <Descriptions :data="clue" />
diff --git a/apps/web-antd/src/views/crm/contact/detail/index.vue b/apps/web-antd/src/views/crm/contact/detail/index.vue
index 1b911831..16835514 100644
--- a/apps/web-antd/src/views/crm/contact/detail/index.vue
+++ b/apps/web-antd/src/views/crm/contact/detail/index.vue
@@ -8,13 +8,14 @@ import { useRoute, useRouter } from 'vue-router';
 import { Page, useVbenModal } from '@vben/common-ui';
 import { useTabs } from '@vben/hooks';
 
-import { Button, Card, Tabs } from 'ant-design-vue';
+import { Card, Tabs } from 'ant-design-vue';
 
 import { getContact } from '#/api/crm/contact';
 import { getOperateLogPage } from '#/api/crm/operateLog';
 import { BizTypeEnum } from '#/api/crm/permission';
 import { useDescription } from '#/components/description';
 import { OperateLog } from '#/components/operate-log';
+import { ACTION_ICON, TableAction } from '#/components/table-action';
 import { BusinessDetailsList } from '#/views/crm/business';
 import { FollowUp } from '#/views/crm/followup';
 import { PermissionList, TransferForm } from '#/views/crm/permission';
@@ -96,26 +97,30 @@ onMounted(() => {
     <FormModal @success="getContactDetail" />
     <TransferModal @success="getContactDetail" />
     <template #extra>
-      <div class="flex items-center gap-2">
-        <Button @click="handleBack">
-          <IconifyIcon icon="lucide:arrow-left" />
-          返回
-        </Button>
-        <Button
-          v-if="permissionListRef?.validateWrite"
-          type="primary"
-          @click="handleEdit"
-        >
-          {{ $t('ui.actionTitle.edit') }}
-        </Button>
-        <Button
-          v-if="permissionListRef?.validateOwnerUser"
-          type="primary"
-          @click="handleTransfer"
-        >
-          转移
-        </Button>
-      </div>
+      <TableAction
+        :actions="[
+          {
+            label: '返回',
+            type: 'default',
+            icon: 'lucide:arrow-left',
+            onClick: handleBack,
+          },
+          {
+            label: $t('ui.actionTitle.edit'),
+            type: 'primary',
+            icon: ACTION_ICON.EDIT,
+            auth: ['crm:contact:update'],
+            ifShow: permissionListRef?.validateWrite,
+            onClick: handleEdit,
+          },
+          {
+            label: '转移',
+            type: 'primary',
+            ifShow: permissionListRef?.validateOwnerUser,
+            onClick: handleTransfer,
+          },
+        ]"
+      />
     </template>
     <Card class="min-h-[10%]">
       <Descriptions :data="contact" />