From 5ceffa2fe94dda8d47e86610ff026f52b352f05a Mon Sep 17 00:00:00 2001
From: xingyu4j <xingyu4j@vip.qq.com>
Date: Mon, 20 Oct 2025 14:44:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=20table=20tab=20?=
 =?UTF-8?q?=E7=9A=84=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/views/crm/business/index.vue            | 4 ++--
 apps/web-antd/src/views/crm/clue/index.vue                | 4 ++--
 apps/web-antd/src/views/crm/contact/index.vue             | 4 ++--
 apps/web-antd/src/views/crm/contract/index.vue            | 4 ++--
 apps/web-antd/src/views/crm/customer/index.vue            | 4 ++--
 .../web-antd/src/views/crm/customer/limitConfig/index.vue | 6 +++---
 apps/web-antd/src/views/crm/receivable/index.vue          | 4 ++--
 apps/web-antd/src/views/crm/receivable/plan/index.vue     | 4 ++--
 apps/web-antd/src/views/crm/statistics/customer/index.vue | 8 ++++++--
 apps/web-antd/src/views/crm/statistics/funnel/index.vue   | 8 ++++++--
 .../src/views/crm/statistics/performance/index.vue        | 8 ++++++--
 apps/web-antd/src/views/crm/statistics/portrait/index.vue | 8 ++++++--
 apps/web-antd/src/views/crm/statistics/rank/index.vue     | 8 ++++++--
 apps/web-antd/src/views/mall/product/spu/index.vue        | 5 ++---
 apps/web-antd/src/views/mall/promotion/coupon/index.vue   | 4 ++--
 apps/web-antd/src/views/mall/trade/afterSale/index.vue    | 4 ++--
 apps/web-ele/src/views/mall/product/spu/index.vue         | 5 ++---
 apps/web-ele/src/views/mall/promotion/coupon/index.vue    | 4 ++--
 apps/web-ele/src/views/mall/trade/afterSale/index.vue     | 4 ++--
 19 files changed, 59 insertions(+), 41 deletions(-)

diff --git a/apps/web-antd/src/views/crm/business/index.vue b/apps/web-antd/src/views/crm/business/index.vue
index 28fea60f9..c35b1e3c3 100644
--- a/apps/web-antd/src/views/crm/business/index.vue
+++ b/apps/web-antd/src/views/crm/business/index.vue
@@ -132,8 +132,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
     <FormModal @success="handleRefresh" />
     <Grid>
-      <template #top>
-        <Tabs class="-mt-11" @change="handleChangeSceneType">
+      <template #toolbar-actions>
+        <Tabs class="w-full" @change="handleChangeSceneType">
           <Tabs.TabPane tab="我负责的" key="1" />
           <Tabs.TabPane tab="我参与的" key="2" />
           <Tabs.TabPane tab="下属负责的" key="3" />
diff --git a/apps/web-antd/src/views/crm/clue/index.vue b/apps/web-antd/src/views/crm/clue/index.vue
index 78abc9b24..1135e8d5e 100644
--- a/apps/web-antd/src/views/crm/clue/index.vue
+++ b/apps/web-antd/src/views/crm/clue/index.vue
@@ -122,8 +122,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
     <FormModal @success="handleRefresh" />
     <Grid>
-      <template #top>
-        <Tabs class="-mt-11" @change="handleChangeSceneType">
+      <template #toolbar-actions>
+        <Tabs class="w-full" @change="handleChangeSceneType">
           <Tabs.TabPane tab="我负责的" key="1" />
           <Tabs.TabPane tab="我参与的" key="2" />
           <Tabs.TabPane tab="下属负责的" key="3" />
diff --git a/apps/web-antd/src/views/crm/contact/index.vue b/apps/web-antd/src/views/crm/contact/index.vue
index 72dfbc347..f18db4d81 100644
--- a/apps/web-antd/src/views/crm/contact/index.vue
+++ b/apps/web-antd/src/views/crm/contact/index.vue
@@ -132,8 +132,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
     <FormModal @success="handleRefresh" />
     <Grid>
-      <template #top>
-        <Tabs class="-mt-11" @change="handleChangeSceneType">
+      <template #toolbar-actions>
+        <Tabs class="-mt-11 w-full" @change="handleChangeSceneType">
           <Tabs.TabPane tab="我负责的" key="1" />
           <Tabs.TabPane tab="我参与的" key="2" />
           <Tabs.TabPane tab="下属负责的" key="3" />
diff --git a/apps/web-antd/src/views/crm/contract/index.vue b/apps/web-antd/src/views/crm/contract/index.vue
index 856571065..8ca059fe9 100644
--- a/apps/web-antd/src/views/crm/contract/index.vue
+++ b/apps/web-antd/src/views/crm/contract/index.vue
@@ -166,8 +166,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
     <FormModal @success="handleRefresh" />
     <Grid>
-      <template #top>
-        <Tabs class="-mt-11" @change="handleChangeSceneType">
+      <template #toolbar-actions>
+        <Tabs class="-mt-11 w-full" @change="handleChangeSceneType">
           <Tabs.TabPane tab="我负责的" key="1" />
           <Tabs.TabPane tab="我参与的" key="2" />
           <Tabs.TabPane tab="下属负责的" key="3" />
diff --git a/apps/web-antd/src/views/crm/customer/index.vue b/apps/web-antd/src/views/crm/customer/index.vue
index 34ca69afa..781767d98 100644
--- a/apps/web-antd/src/views/crm/customer/index.vue
+++ b/apps/web-antd/src/views/crm/customer/index.vue
@@ -139,8 +139,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
     <FormModal @success="handleRefresh" />
     <ImportModal @success="handleRefresh" />
     <Grid>
-      <template #top>
-        <Tabs class="-mt-11" @change="handleChangeSceneType">
+      <template #toolbar-actions>
+        <Tabs class="w-full" @change="handleChangeSceneType">
           <Tabs.TabPane tab="我负责的" key="1" />
           <Tabs.TabPane tab="我参与的" key="2" />
           <Tabs.TabPane tab="下属负责的" key="3" />
diff --git a/apps/web-antd/src/views/crm/customer/limitConfig/index.vue b/apps/web-antd/src/views/crm/customer/limitConfig/index.vue
index ce6165a12..1bd27e876 100644
--- a/apps/web-antd/src/views/crm/customer/limitConfig/index.vue
+++ b/apps/web-antd/src/views/crm/customer/limitConfig/index.vue
@@ -114,8 +114,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
     <FormModal @success="handleRefresh" />
     <Grid>
-      <template #top>
-        <Tabs class="-mt-11" @change="handleChangeConfigType">
+      <template #toolbar-actions>
+        <Tabs class="w-full" @change="handleChangeConfigType">
           <Tabs.TabPane
             tab="拥有客户数限制"
             :key="LimitConfType.CUSTOMER_QUANTITY_LIMIT"
@@ -156,7 +156,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               icon: ACTION_ICON.DELETE,
               auth: ['crm:customer-limit-config:delete'],
               popConfirm: {
-                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                title: $t('ui.actionMessage.deleteConfirm', [row.id]),
                 confirm: handleDelete.bind(null, row),
               },
             },
diff --git a/apps/web-antd/src/views/crm/receivable/index.vue b/apps/web-antd/src/views/crm/receivable/index.vue
index 317e2ee9a..dfb6e991e 100644
--- a/apps/web-antd/src/views/crm/receivable/index.vue
+++ b/apps/web-antd/src/views/crm/receivable/index.vue
@@ -161,8 +161,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
     <FormModal @success="handleRefresh" />
     <Grid>
-      <template #top>
-        <Tabs class="-mt-11" @change="handleChangeSceneType">
+      <template toolbar-actions>
+        <Tabs class="w-full" @change="handleChangeSceneType">
           <Tabs.TabPane tab="我负责的" key="1" />
           <Tabs.TabPane tab="我参与的" key="2" />
           <Tabs.TabPane tab="下属负责的" key="3" />
diff --git a/apps/web-antd/src/views/crm/receivable/plan/index.vue b/apps/web-antd/src/views/crm/receivable/plan/index.vue
index 19b855dfd..22bafdb7b 100644
--- a/apps/web-antd/src/views/crm/receivable/plan/index.vue
+++ b/apps/web-antd/src/views/crm/receivable/plan/index.vue
@@ -144,8 +144,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
     <FormModal @success="handleRefresh" />
     <ReceivableFormModal @success="handleRefresh" />
     <Grid>
-      <template #top>
-        <Tabs class="-mt-11" @change="handleChangeSceneType">
+      <template #toolbar-actions>
+        <Tabs class="w-full" @change="handleChangeSceneType">
           <Tabs.TabPane tab="我负责的" key="1" />
           <Tabs.TabPane tab="下属负责的" key="3" />
         </Tabs>
diff --git a/apps/web-antd/src/views/crm/statistics/customer/index.vue b/apps/web-antd/src/views/crm/statistics/customer/index.vue
index 63967b741..1248b8470 100644
--- a/apps/web-antd/src/views/crm/statistics/customer/index.vue
+++ b/apps/web-antd/src/views/crm/statistics/customer/index.vue
@@ -64,8 +64,12 @@ async function handleTabChange(key: any) {
 <template>
   <Page auto-content-height>
     <Grid>
-      <template #top>
-        <Tabs v-model:active-key="activeTabName" @change="handleTabChange">
+      <template #toolbar-actions>
+        <Tabs
+          v-model:active-key="activeTabName"
+          class="w-full"
+          @change="handleTabChange"
+        >
           <Tabs.TabPane
             v-for="item in customerSummaryTabs"
             :key="item.key"
diff --git a/apps/web-antd/src/views/crm/statistics/funnel/index.vue b/apps/web-antd/src/views/crm/statistics/funnel/index.vue
index 1b071a824..fa2e15915 100644
--- a/apps/web-antd/src/views/crm/statistics/funnel/index.vue
+++ b/apps/web-antd/src/views/crm/statistics/funnel/index.vue
@@ -87,8 +87,12 @@ function handleActive(value: boolean) {
 <template>
   <Page auto-content-height>
     <Grid>
-      <template #top>
-        <Tabs v-model:active-key="activeTabName" @change="handleTabChange">
+      <template #toolbar-actions>
+        <Tabs
+          v-model:active-key="activeTabName"
+          class="w-full"
+          @change="handleTabChange"
+        >
           <Tabs.TabPane
             v-for="item in customerSummaryTabs"
             :key="item.key"
diff --git a/apps/web-antd/src/views/crm/statistics/performance/index.vue b/apps/web-antd/src/views/crm/statistics/performance/index.vue
index ecbcec836..261d042d4 100644
--- a/apps/web-antd/src/views/crm/statistics/performance/index.vue
+++ b/apps/web-antd/src/views/crm/statistics/performance/index.vue
@@ -143,8 +143,12 @@ onMounted(() => {
 <template>
   <Page auto-content-height>
     <Grid>
-      <template #top>
-        <Tabs v-model:active-key="activeTabName" @change="handleTabChange">
+      <template #toolbar-actions>
+        <Tabs
+          v-model:active-key="activeTabName"
+          class="w-full"
+          @change="handleTabChange"
+        >
           <Tabs.TabPane
             v-for="item in customerSummaryTabs"
             :key="item.key"
diff --git a/apps/web-antd/src/views/crm/statistics/portrait/index.vue b/apps/web-antd/src/views/crm/statistics/portrait/index.vue
index 1d93478a4..132fda734 100644
--- a/apps/web-antd/src/views/crm/statistics/portrait/index.vue
+++ b/apps/web-antd/src/views/crm/statistics/portrait/index.vue
@@ -71,8 +71,12 @@ async function handleTabChange(key: any) {
 <template>
   <Page auto-content-height>
     <Grid>
-      <template #top>
-        <Tabs v-model:active-key="activeTabName" @change="handleTabChange">
+      <template #toolbar-actions>
+        <Tabs
+          v-model:active-key="activeTabName"
+          class="w-full"
+          @change="handleTabChange"
+        >
           <Tabs.TabPane
             v-for="item in customerSummaryTabs"
             :key="item.key"
diff --git a/apps/web-antd/src/views/crm/statistics/rank/index.vue b/apps/web-antd/src/views/crm/statistics/rank/index.vue
index b311bac99..2df8cc60f 100644
--- a/apps/web-antd/src/views/crm/statistics/rank/index.vue
+++ b/apps/web-antd/src/views/crm/statistics/rank/index.vue
@@ -64,8 +64,12 @@ async function handleTabChange(key: any) {
 <template>
   <Page auto-content-height>
     <Grid>
-      <template #top>
-        <Tabs v-model:active-key="activeTabName" @change="handleTabChange">
+      <template #toolbar-actions>
+        <Tabs
+          v-model:active-key="activeTabName"
+          class="w-full"
+          @change="handleTabChange"
+        >
           <Tabs.TabPane
             v-for="item in customerSummaryTabs"
             :key="item.key"
diff --git a/apps/web-antd/src/views/mall/product/spu/index.vue b/apps/web-antd/src/views/mall/product/spu/index.vue
index 2bc81a0a9..2d24ef471 100644
--- a/apps/web-antd/src/views/mall/product/spu/index.vue
+++ b/apps/web-antd/src/views/mall/product/spu/index.vue
@@ -234,9 +234,8 @@ onMounted(async () => {
     </template>
 
     <Grid>
-      <template #top>
-        <!-- TODO @xingyu：tabs 可以考虑往上以一些，和操作按钮在一排 -->
-        <Tabs class="border-none" @change="onChangeTab">
+      <template #toolbar-actions>
+        <Tabs @change="onChangeTab" class="w-full">
           <Tabs.TabPane
             v-for="item in tabsData"
             :key="item.type"
diff --git a/apps/web-antd/src/views/mall/promotion/coupon/index.vue b/apps/web-antd/src/views/mall/promotion/coupon/index.vue
index 64d0c1e3d..7db4a56fc 100644
--- a/apps/web-antd/src/views/mall/promotion/coupon/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/coupon/index.vue
@@ -113,8 +113,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
     </template>
 
     <Grid>
-      <template #top>
-        <Tabs class="-mt-11" @change="handleTabChange">
+      <template #toolbar-actions>
+        <Tabs class="w-full" @change="handleTabChange">
           <TabPane
             v-for="tab in statusTabs"
             :key="tab.value"
diff --git a/apps/web-antd/src/views/mall/trade/afterSale/index.vue b/apps/web-antd/src/views/mall/trade/afterSale/index.vue
index e0e63eb76..e6e50560e 100644
--- a/apps/web-antd/src/views/mall/trade/afterSale/index.vue
+++ b/apps/web-antd/src/views/mall/trade/afterSale/index.vue
@@ -98,10 +98,10 @@ onMounted(() => {
     </template>
 
     <Grid>
-      <template #top>
+      <template #toolbar-actions>
         <Tabs
           v-model:active-key="statusTab"
-          class="-mt-11"
+          class="w-full"
           @change="handleChangeStatus"
         >
           <Tabs.TabPane
diff --git a/apps/web-ele/src/views/mall/product/spu/index.vue b/apps/web-ele/src/views/mall/product/spu/index.vue
index 78952f038..6ed935273 100644
--- a/apps/web-ele/src/views/mall/product/spu/index.vue
+++ b/apps/web-ele/src/views/mall/product/spu/index.vue
@@ -224,9 +224,8 @@ onMounted(async () => {
     </template>
 
     <Grid>
-      <template #top>
-        <!-- TODO @xingyu：tabs 可以考虑往上以一些，和操作按钮在一排 -->
-        <ElTabs class="border-none" @tab-change="onChangeTab">
+      <template #toolbar-actions>
+        <ElTabs class="w-full" @tab-change="onChangeTab" :stretch="true">
           <ElTabs.TabPane
             v-for="item in tabsData"
             :key="item.type"
diff --git a/apps/web-ele/src/views/mall/promotion/coupon/index.vue b/apps/web-ele/src/views/mall/promotion/coupon/index.vue
index df3569ada..656a3ce96 100644
--- a/apps/web-ele/src/views/mall/promotion/coupon/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/coupon/index.vue
@@ -112,10 +112,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
     </template>
 
     <Grid>
-      <template #top>
+      <template #toolbar-actions>
         <ElTabs
           :model-value="activeTab"
-          class="-mt-11"
+          class="w-full"
           @tab-change="handleTabChange"
         >
           <ElTabPane
diff --git a/apps/web-ele/src/views/mall/trade/afterSale/index.vue b/apps/web-ele/src/views/mall/trade/afterSale/index.vue
index 07e776c77..3f1d83385 100644
--- a/apps/web-ele/src/views/mall/trade/afterSale/index.vue
+++ b/apps/web-ele/src/views/mall/trade/afterSale/index.vue
@@ -98,10 +98,10 @@ onMounted(() => {
     </template>
 
     <Grid>
-      <template #top>
+      <template #toolbar-actions>
         <ElTabs
           v-model="statusTab"
-          class="-mt-11"
+          class="w-full"
           @tab-change="handleChangeStatus"
         >
           <ElTabs.TabPane