From 08a246d4721f9a0b9f82b64d270790ba775c851f Mon Sep 17 00:00:00 2001
From: XuZhiqiang <xzq710675281@163.com>
Date: Sat, 6 Jun 2026 22:29:15 +0800
Subject: [PATCH] =?UTF-8?q?fix(web-antdv-next):=20CRM=20=E5=92=8C=20Mall?=
 =?UTF-8?q?=20=E6=A8=A1=E5=9D=97=E4=BD=BF=E7=94=A8=20Tabs=20items=20?=
 =?UTF-8?q?=E5=92=8C=20contentRender=20=E9=80=82=E9=85=8D=20antdv-next?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/crm/clue/detail/index.vue       | 29 ++++++-----
 .../src/views/crm/customer/detail/index.vue   | 50 +++++++++++--------
 .../src/views/mall/product/spu/index.vue      | 16 +++---
 3 files changed, 53 insertions(+), 42 deletions(-)

diff --git a/apps/web-antdv-next/src/views/crm/clue/detail/index.vue b/apps/web-antdv-next/src/views/crm/clue/detail/index.vue
index efe5b08e0..82ea28e7b 100644
--- a/apps/web-antdv-next/src/views/crm/clue/detail/index.vue
+++ b/apps/web-antdv-next/src/views/crm/clue/detail/index.vue
@@ -32,6 +32,12 @@ const clueId = ref(0); // 线索编号
 const clue = ref<CrmClueApi.Clue>({} as CrmClueApi.Clue); // 线索详情
 const logList = ref<SystemOperateLogApi.OperateLog[]>([]); // 操作日志
 const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
+const clueTabItems = [
+  { key: '1', label: '跟进记录', forceRender: true },
+  { key: '2', label: '基本信息', forceRender: true },
+  { key: '3', label: '团队成员', forceRender: true },
+  { key: '4', label: '操作日志', forceRender: true },
+];
 
 const [Descriptions] = useDescription({
   bordered: false,
@@ -143,25 +149,24 @@ onMounted(() => {
       <Descriptions :data="clue" />
     </Card>
     <Card class="mt-4 min-h-[60%]">
-      <Tabs :tab-bar-gutter="16">
-        <Tabs.TabPane tab="跟进记录" key="1" :force-render="true">
-          <FollowUp :biz-id="clueId" :biz-type="BizTypeEnum.CRM_CLUE" />
-        </Tabs.TabPane>
-        <Tabs.TabPane tab="基本信息" key="2" :force-render="true">
-          <Info :clue="clue" />
-        </Tabs.TabPane>
-        <Tabs.TabPane tab="团队成员" key="3" :force-render="true">
+      <Tabs :items="clueTabItems" :tab-bar-gutter="16">
+        <template #contentRender="{ item }">
+          <FollowUp
+            v-if="item.key === '1'"
+            :biz-id="clueId"
+            :biz-type="BizTypeEnum.CRM_CLUE"
+          />
+          <Info v-else-if="item.key === '2'" :clue="clue" />
           <PermissionList
+            v-else-if="item.key === '3'"
             ref="permissionListRef"
             :biz-id="clueId"
             :biz-type="BizTypeEnum.CRM_CLUE"
             :show-action="true"
             @quit-team="handleBack"
           />
-        </Tabs.TabPane>
-        <Tabs.TabPane tab="操作日志" key="4" :force-render="true">
-          <OperateLog :log-list="logList" />
-        </Tabs.TabPane>
+          <OperateLog v-else-if="item.key === '4'" :log-list="logList" />
+        </template>
       </Tabs>
     </Card>
   </Page>
diff --git a/apps/web-antdv-next/src/views/crm/customer/detail/index.vue b/apps/web-antdv-next/src/views/crm/customer/detail/index.vue
index 5d50b253c..fa1a5349a 100644
--- a/apps/web-antdv-next/src/views/crm/customer/detail/index.vue
+++ b/apps/web-antdv-next/src/views/crm/customer/detail/index.vue
@@ -45,6 +45,16 @@ const customerId = ref(0); // 客户编号
 const customer = ref<CrmCustomerApi.Customer>({} as CrmCustomerApi.Customer); // 客户详情
 const logList = ref<SystemOperateLogApi.OperateLog[]>([]); // 操作日志
 const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
+const customerTabItems = [
+  { key: '1', label: '跟进记录', forceRender: true },
+  { key: '2', label: '基本信息', forceRender: true },
+  { key: '3', label: '联系人', forceRender: true },
+  { key: '4', label: '团队成员', forceRender: true },
+  { key: '5', label: '商机', forceRender: true },
+  { key: '6', label: '合同', forceRender: true },
+  { key: '7', label: '回款', forceRender: true },
+  { key: '8', label: '操作日志', forceRender: true },
+];
 
 const [Descriptions] = useDescription({
   bordered: false,
@@ -241,49 +251,45 @@ onMounted(() => {
       <Descriptions :data="customer" />
     </Card>
     <Card class="mt-4 min-h-[60%]">
-      <Tabs>
-        <Tabs.TabPane tab="跟进记录" key="1" :force-render="true">
-          <FollowUp :biz-id="customerId" :biz-type="BizTypeEnum.CRM_CUSTOMER" />
-        </Tabs.TabPane>
-        <Tabs.TabPane tab="基本信息" key="2" :force-render="true">
-          <Info :customer="customer" />
-        </Tabs.TabPane>
-        <Tabs.TabPane tab="联系人" key="3" :force-render="true">
+      <Tabs :items="customerTabItems">
+        <template #contentRender="{ item }">
+          <FollowUp
+            v-if="item.key === '1'"
+            :biz-id="customerId"
+            :biz-type="BizTypeEnum.CRM_CUSTOMER"
+          />
+          <Info v-else-if="item.key === '2'" :customer="customer" />
           <ContactDetailsList
+            v-else-if="item.key === '3'"
             :biz-id="customerId"
             :biz-type="BizTypeEnum.CRM_CUSTOMER"
             :customer-id="customerId"
           />
-        </Tabs.TabPane>
-        <Tabs.TabPane tab="团队成员" key="4" :force-render="true">
           <PermissionList
+            v-else-if="item.key === '4'"
             ref="permissionListRef"
             :biz-id="customerId"
             :biz-type="BizTypeEnum.CRM_CUSTOMER"
             :show-action="true"
             @quit-team="handleBack"
           />
-        </Tabs.TabPane>
-        <Tabs.TabPane tab="商机" key="5" :force-render="true">
           <BusinessDetailsList
+            v-else-if="item.key === '5'"
             :biz-id="customerId"
             :biz-type="BizTypeEnum.CRM_CUSTOMER"
             :customer-id="customerId"
           />
-        </Tabs.TabPane>
-        <Tabs.TabPane tab="合同" key="6" :force-render="true">
           <ContractDetailsList
+            v-else-if="item.key === '6'"
             :biz-id="customerId"
             :biz-type="BizTypeEnum.CRM_CUSTOMER"
           />
-        </Tabs.TabPane>
-        <Tabs.TabPane tab="回款" key="7" :force-render="true">
-          <ReceivablePlanDetailsList :customer-id="customerId" />
-          <ReceivableDetailsList :customer-id="customerId" />
-        </Tabs.TabPane>
-        <Tabs.TabPane tab="操作日志" key="8" :force-render="true">
-          <OperateLog :log-list="logList" />
-        </Tabs.TabPane>
+          <template v-else-if="item.key === '7'">
+            <ReceivablePlanDetailsList :customer-id="customerId" />
+            <ReceivableDetailsList :customer-id="customerId" />
+          </template>
+          <OperateLog v-else-if="item.key === '8'" :log-list="logList" />
+        </template>
       </Tabs>
     </Card>
   </Page>
diff --git a/apps/web-antdv-next/src/views/mall/product/spu/index.vue b/apps/web-antdv-next/src/views/mall/product/spu/index.vue
index 4aade5ef3..16137a7c8 100644
--- a/apps/web-antdv-next/src/views/mall/product/spu/index.vue
+++ b/apps/web-antdv-next/src/views/mall/product/spu/index.vue
@@ -2,7 +2,7 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MallSpuApi } from '#/api/mall/product/spu';
 
-import { onMounted, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { confirm, DocAlert, Page } from '@vben/common-ui';
@@ -53,6 +53,12 @@ const tabsData = ref([
     count: 0,
   },
 ]);
+const spuTabItems = computed(() =>
+  tabsData.value.map((item) => ({
+    key: String(item.type),
+    label: `${item.name} (${item.count})`,
+  })),
+);
 
 /** 刷新表格 */
 async function handleRefresh() {
@@ -208,13 +214,7 @@ onMounted(async () => {
 
     <Grid>
       <template #toolbar-actions>
-        <Tabs @change="onChangeTab" class="w-full">
-          <Tabs.TabPane
-            v-for="item in tabsData"
-            :key="item.type"
-            :tab="`${item.name} (${item.count})`"
-          />
-        </Tabs>
+        <Tabs :items="spuTabItems" @change="onChangeTab" class="w-full" />
       </template>
       <template #toolbar-tools>
         <TableAction