feat: 优化 table tab 的显示

apps/web-antd/src/views/crm/business/index.vue

@@ -132,8 +132,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
     <FormModal @success="handleRefresh" />
     <Grid>
-      <template #top>
+      <template #toolbar-actions>
-        <Tabs class="-mt-11" @change="handleChangeSceneType">
+        <Tabs class="w-full" @change="handleChangeSceneType">
           <Tabs.TabPane tab="我负责的" key="1" />
           <Tabs.TabPane tab="我参与的" key="2" />
           <Tabs.TabPane tab="下属负责的" key="3" />

apps/web-antd/src/views/crm/clue/index.vue

@@ -122,8 +122,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
     <FormModal @success="handleRefresh" />
     <Grid>
-      <template #top>
+      <template #toolbar-actions>
-        <Tabs class="-mt-11" @change="handleChangeSceneType">
+        <Tabs class="w-full" @change="handleChangeSceneType">
           <Tabs.TabPane tab="我负责的" key="1" />
           <Tabs.TabPane tab="我参与的" key="2" />
           <Tabs.TabPane tab="下属负责的" key="3" />

apps/web-antd/src/views/crm/contact/index.vue

@@ -132,8 +132,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
     <FormModal @success="handleRefresh" />
     <Grid>
-      <template #top>
+      <template #toolbar-actions>
-        <Tabs class="-mt-11" @change="handleChangeSceneType">
+        <Tabs class="-mt-11 w-full" @change="handleChangeSceneType">
           <Tabs.TabPane tab="我负责的" key="1" />
           <Tabs.TabPane tab="我参与的" key="2" />
           <Tabs.TabPane tab="下属负责的" key="3" />

apps/web-antd/src/views/crm/contract/index.vue

@@ -166,8 +166,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
     <FormModal @success="handleRefresh" />
     <Grid>
-      <template #top>
+      <template #toolbar-actions>
-        <Tabs class="-mt-11" @change="handleChangeSceneType">
+        <Tabs class="-mt-11 w-full" @change="handleChangeSceneType">
           <Tabs.TabPane tab="我负责的" key="1" />
           <Tabs.TabPane tab="我参与的" key="2" />
           <Tabs.TabPane tab="下属负责的" key="3" />

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>
+      <template #toolbar-actions>
-        <Tabs class="-mt-11" @change="handleChangeSceneType">
+        <Tabs class="w-full" @change="handleChangeSceneType">
           <Tabs.TabPane tab="我负责的" key="1" />
           <Tabs.TabPane tab="我参与的" key="2" />
           <Tabs.TabPane tab="下属负责的" key="3" />

apps/web-antd/src/views/crm/customer/limitConfig/index.vue

@@ -114,8 +114,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
     <FormModal @success="handleRefresh" />
     <Grid>
-      <template #top>
+      <template #toolbar-actions>
-        <Tabs class="-mt-11" @change="handleChangeConfigType">
+        <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),
               },
             },

apps/web-antd/src/views/crm/receivable/index.vue

@@ -161,8 +161,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
     <FormModal @success="handleRefresh" />
     <Grid>
-      <template #top>
+      <template toolbar-actions>
-        <Tabs class="-mt-11" @change="handleChangeSceneType">
+        <Tabs class="w-full" @change="handleChangeSceneType">
           <Tabs.TabPane tab="我负责的" key="1" />
           <Tabs.TabPane tab="我参与的" key="2" />
           <Tabs.TabPane tab="下属负责的" key="3" />

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>
+      <template #toolbar-actions>
-        <Tabs class="-mt-11" @change="handleChangeSceneType">
+        <Tabs class="w-full" @change="handleChangeSceneType">
           <Tabs.TabPane tab="我负责的" key="1" />
           <Tabs.TabPane tab="下属负责的" key="3" />
         </Tabs>

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>
+      <template #toolbar-actions>
-        <Tabs v-model:active-key="activeTabName" @change="handleTabChange">
+        <Tabs
+          v-model:active-key="activeTabName"
+          class="w-full"
+          @change="handleTabChange"
+        >
           <Tabs.TabPane
             v-for="item in customerSummaryTabs"
             :key="item.key"

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>
+      <template #toolbar-actions>
-        <Tabs v-model:active-key="activeTabName" @change="handleTabChange">
+        <Tabs
+          v-model:active-key="activeTabName"
+          class="w-full"
+          @change="handleTabChange"
+        >
           <Tabs.TabPane
             v-for="item in customerSummaryTabs"
             :key="item.key"

apps/web-antd/src/views/crm/statistics/performance/index.vue

@@ -143,8 +143,12 @@ onMounted(() => {
 <template>
   <Page auto-content-height>
     <Grid>
-      <template #top>
+      <template #toolbar-actions>
-        <Tabs v-model:active-key="activeTabName" @change="handleTabChange">
+        <Tabs
+          v-model:active-key="activeTabName"
+          class="w-full"
+          @change="handleTabChange"
+        >
           <Tabs.TabPane
             v-for="item in customerSummaryTabs"
             :key="item.key"

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>
+      <template #toolbar-actions>
-        <Tabs v-model:active-key="activeTabName" @change="handleTabChange">
+        <Tabs
+          v-model:active-key="activeTabName"
+          class="w-full"
+          @change="handleTabChange"
+        >
           <Tabs.TabPane
             v-for="item in customerSummaryTabs"
             :key="item.key"

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>
+      <template #toolbar-actions>
-        <Tabs v-model:active-key="activeTabName" @change="handleTabChange">
+        <Tabs
+          v-model:active-key="activeTabName"
+          class="w-full"
+          @change="handleTabChange"
+        >
           <Tabs.TabPane
             v-for="item in customerSummaryTabs"
             :key="item.key"

apps/web-antd/src/views/mall/product/spu/index.vue

@@ -234,9 +234,8 @@ onMounted(async () => {
     </template>
 
     <Grid>
-      <template #top>
+      <template #toolbar-actions>
-        <!-- TODO @xingyu：tabs 可以考虑往上以一些，和操作按钮在一排 -->
+        <Tabs @change="onChangeTab" class="w-full">
-        <Tabs class="border-none" @change="onChangeTab">
           <Tabs.TabPane
             v-for="item in tabsData"
             :key="item.type"

apps/web-antd/src/views/mall/promotion/coupon/index.vue

@@ -113,8 +113,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
     </template>
 
     <Grid>
-      <template #top>
+      <template #toolbar-actions>
-        <Tabs class="-mt-11" @change="handleTabChange">
+        <Tabs class="w-full" @change="handleTabChange">
           <TabPane
             v-for="tab in statusTabs"
             :key="tab.value"

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

apps/web-ele/src/views/mall/product/spu/index.vue

@@ -224,9 +224,8 @@ onMounted(async () => {
     </template>
 
     <Grid>
-      <template #top>
+      <template #toolbar-actions>
-        <!-- TODO @xingyu：tabs 可以考虑往上以一些，和操作按钮在一排 -->
+        <ElTabs class="w-full" @tab-change="onChangeTab" :stretch="true">
-        <ElTabs class="border-none" @tab-change="onChangeTab">
           <ElTabs.TabPane
             v-for="item in tabsData"
             :key="item.type"

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

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