feat: 优化 table tab 的显示

2025-10-20 14:44:39 +08:00
parent eb61ac3adb
commit 5ceffa2fe9
19 changed files with 59 additions and 41 deletions
--- 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" />
--- 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" />
--- 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" />
--- 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" />
--- 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" />
--- 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),
              },
            },
--- 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" />
--- 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>
--- 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"
--- 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"
--- 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"
--- 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"
--- 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"
--- 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"
--- 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"
--- 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
--- 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"
--- 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
--- 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