From 6bc0d627c150b33acc52c42fc2946e537c01fa67 Mon Sep 17 00:00:00 2001
From: XuZhiqiang <xzq710675281@163.com>
Date: Thu, 25 Jun 2026 18:07:44 +0800
Subject: [PATCH] fix(@vben/web-antdv-next): replace deprecated semantic props

- migrate Spin wrapperClassName and tip to classes.root and description
- migrate Card bodyStyle and borderless usage to styles.body and variant
- migrate Tooltip, Popover, and Dropdown overlay props to classes.root and styles.root
---
 .../im/home/components/friend/friend-add-dialog.vue  |  2 +-
 .../components/group/group-request-list-dialog.vue   |  2 +-
 .../im/home/components/rtc/rtc-group-call-banner.vue |  2 +-
 .../src/views/im/home/components/user/user-info.vue  |  2 +-
 .../conversation/conversation-group-side.vue         |  8 ++++----
 .../conversation/conversation-private-side.vue       |  4 ++--
 .../components/message/material-bubble.vue           |  2 +-
 .../components/message/message-history.vue           |  4 ++--
 .../components/message/message-panel.vue             |  4 ++--
 .../components/message/message-read-status.vue       |  2 +-
 .../src/views/iot/alert/record/index.vue             |  2 +-
 .../device/detail/modules/thing-model-property.vue   |  2 +-
 .../src/views/iot/device/device/index.vue            |  2 +-
 .../views/iot/device/device/modules/card-view.vue    | 12 +++++++-----
 .../src/views/iot/product/product/index.vue          |  2 +-
 .../views/iot/product/product/modules/card-view.vue  | 12 +++++++-----
 .../iot/rule/scene/form/inputs/json-params-input.vue |  4 ++--
 .../rule/scene/form/selectors/property-selector.vue  |  4 ++--
 .../src/views/iot/rule/scene/index.vue               |  8 ++++----
 .../mall/statistics/product/modules/summary-card.vue |  2 +-
 .../mall/statistics/trade/modules/trend-card.vue     |  2 +-
 .../src/views/mes/cal/calendar/components/panel.vue  |  2 +-
 .../views/mes/md/item/modules/product-media-list.vue |  2 +-
 .../src/views/mes/md/item/type/components/tree.vue   |  2 +-
 .../src/views/system/dept/components/tree-select.vue |  2 +-
 .../role/modules/assign-data-permission-form.vue     |  2 +-
 .../views/system/role/modules/assign-menu-form.vue   |  2 +-
 .../src/views/system/tenantPackage/modules/form.vue  |  2 +-
 .../src/views/system/user/modules/dept-tree.vue      |  2 +-
 apps/web-antdv-next/src/views/wms/home/index.vue     |  2 +-
 .../wms/home/modules/wms-home-inventory-charts.vue   |  4 ++--
 .../home/modules/wms-home-order-summary-cards.vue    |  2 +-
 .../wms/home/modules/wms-home-order-trend-chart.vue  |  2 +-
 .../views/wms/md/item/category/components/tree.vue   |  2 +-
 34 files changed, 58 insertions(+), 54 deletions(-)

diff --git a/apps/web-antdv-next/src/views/im/home/components/friend/friend-add-dialog.vue b/apps/web-antdv-next/src/views/im/home/components/friend/friend-add-dialog.vue
index 8a22a55a5..2b7f57777 100644
--- a/apps/web-antdv-next/src/views/im/home/components/friend/friend-add-dialog.vue
+++ b/apps/web-antdv-next/src/views/im/home/components/friend/friend-add-dialog.vue
@@ -179,7 +179,7 @@ async function handleSubmitApply() {
         </template>
       </Input>
 
-      <Spin :spinning="loading" wrapper-class-name="w-full">
+      <Spin :spinning="loading" :classes="{ root: 'w-full' }">
         <div class="h-[400px] mt-2.5">
           <div
             v-if="visibleUsers.length === 0"
diff --git a/apps/web-antdv-next/src/views/im/home/components/group/group-request-list-dialog.vue b/apps/web-antdv-next/src/views/im/home/components/group/group-request-list-dialog.vue
index b93b3886e..b2816b547 100644
--- a/apps/web-antdv-next/src/views/im/home/components/group/group-request-list-dialog.vue
+++ b/apps/web-antdv-next/src/views/im/home/components/group/group-request-list-dialog.vue
@@ -170,7 +170,7 @@ function updateLocalResult(id: number, handleResult: number) {
     :mask="{ closable: false }"
     class="im-group-request-list__dialog"
   >
-    <Spin :spinning="loading" wrapper-class-name="w-full">
+    <Spin :spinning="loading" :classes="{ root: 'w-full' }">
       <div class="flex flex-col gap-3 max-h-[60vh] overflow-y-auto pr-1">
         <!-- 空态 -->
         <Empty v-if="!loading && list.length === 0" description="暂无进群申请" />
diff --git a/apps/web-antdv-next/src/views/im/home/components/rtc/rtc-group-call-banner.vue b/apps/web-antdv-next/src/views/im/home/components/rtc/rtc-group-call-banner.vue
index e7aabcced..758ce6583 100644
--- a/apps/web-antdv-next/src/views/im/home/components/rtc/rtc-group-call-banner.vue
+++ b/apps/web-antdv-next/src/views/im/home/components/rtc/rtc-group-call-banner.vue
@@ -147,7 +147,7 @@ async function handleJoin() {
     <Popover
       v-model:open="popoverVisible"
       placement="bottomLeft"
-      :overlay-style="{ width: '280px' }"
+      :styles="{ root: { width: '280px' } }"
       trigger="click"
     >
       <!-- 胶囊条本体：电话图标 + 文案（含人数）+ 右箭头 -->
diff --git a/apps/web-antdv-next/src/views/im/home/components/user/user-info.vue b/apps/web-antdv-next/src/views/im/home/components/user/user-info.vue
index f84048580..e5abfe1cf 100644
--- a/apps/web-antdv-next/src/views/im/home/components/user/user-info.vue
+++ b/apps/web-antdv-next/src/views/im/home/components/user/user-info.vue
@@ -305,7 +305,7 @@ async function handleDeleteFriend() {
       </div>
       <!-- 右上 "..." 菜单：仅 friend 态展示；含「加入/移出黑名单」 + 「删除联系人」 -->
       <div v-if="relation === 'friend'" class="flex-shrink-0">
-        <Dropdown :trigger="['click']" placement="bottomRight" overlay-class-name="im-user-info__more-menu">
+        <Dropdown :trigger="['click']" placement="bottomRight" :classes="{ root: 'im-user-info__more-menu' }">
           <div
             class="flex items-center justify-center w-7 h-7 rounded cursor-pointer hover:bg-[var(--ant-color-fill-secondary)]"
           >
diff --git a/apps/web-antdv-next/src/views/im/home/pages/conversation/components/conversation/conversation-group-side.vue b/apps/web-antdv-next/src/views/im/home/pages/conversation/components/conversation/conversation-group-side.vue
index cc3cf66e1..0b35584ed 100644
--- a/apps/web-antdv-next/src/views/im/home/pages/conversation/components/conversation/conversation-group-side.vue
+++ b/apps/web-antdv-next/src/views/im/home/pages/conversation/components/conversation/conversation-group-side.vue
@@ -497,7 +497,7 @@ function handleOpenTransferOwner() {
             v-model:open="namePopoverVisible"
             trigger="click"
             placement="leftTop"
-            :overlay-style="{ width: '280px' }"
+            :styles="{ root: { width: '280px' } }"
           >
             <div
               class="im-conversation-group-side__row flex flex-col items-stretch gap-1.5 px-4 py-[14px] text-14px min-h-6 cursor-pointer transition-colors duration-150 hover:bg-[var(--ant-color-fill-tertiary)]"
@@ -529,7 +529,7 @@ function handleOpenTransferOwner() {
             v-model:open="noticePopoverVisible"
             trigger="click"
             placement="leftTop"
-            :overlay-style="{ width: '320px' }"
+            :styles="{ root: { width: '320px' } }"
           >
             <div
               class="im-conversation-group-side__row flex flex-col items-stretch gap-1.5 px-4 py-[14px] text-14px min-h-6 cursor-pointer transition-colors duration-150 hover:bg-[var(--ant-color-fill-tertiary)]"
@@ -586,7 +586,7 @@ function handleOpenTransferOwner() {
             v-model:open="groupRemarkPopoverVisible"
             trigger="click"
             placement="leftTop"
-            :overlay-style="{ width: '280px' }"
+            :styles="{ root: { width: '280px' } }"
           >
             <div
               class="im-conversation-group-side__row flex flex-col items-stretch gap-1.5 px-4 py-[14px] text-14px min-h-6 cursor-pointer transition-colors duration-150 hover:bg-[var(--ant-color-fill-tertiary)]"
@@ -625,7 +625,7 @@ function handleOpenTransferOwner() {
             v-model:open="remarkPopoverVisible"
             trigger="click"
             placement="leftTop"
-            :overlay-style="{ width: '280px' }"
+            :styles="{ root: { width: '280px' } }"
           >
             <div
               class="im-conversation-group-side__row flex flex-col items-stretch gap-1.5 px-4 py-[14px] text-14px min-h-6 cursor-pointer transition-colors duration-150 hover:bg-[var(--ant-color-fill-tertiary)]"
diff --git a/apps/web-antdv-next/src/views/im/home/pages/conversation/components/conversation/conversation-private-side.vue b/apps/web-antdv-next/src/views/im/home/pages/conversation/components/conversation/conversation-private-side.vue
index ce41937ee..761651ba0 100644
--- a/apps/web-antdv-next/src/views/im/home/pages/conversation/components/conversation/conversation-private-side.vue
+++ b/apps/web-antdv-next/src/views/im/home/pages/conversation/components/conversation/conversation-private-side.vue
@@ -145,7 +145,7 @@ function handleGroupCreated(groupId: number) {
       v-if="!friend"
       class="flex flex-col items-center justify-center h-full text-13px text-[var(--ant-color-text-placeholder)] bg-[var(--ant-color-bg-container)]"
     >
-      <Spin tip="加载中..." />
+      <Spin description="加载中..." />
     </div>
     <div v-else class="flex flex-col h-full bg-[var(--ant-color-bg-container)]">
       <div class="flex-1 overflow-y-auto bg-[var(--ant-color-fill-secondary)]">
@@ -184,7 +184,7 @@ function handleGroupCreated(groupId: number) {
             v-model:open="displayNamePopoverVisible"
             trigger="click"
             placement="leftTop"
-            :overlay-style="{ width: '280px' }"
+            :styles="{ root: { width: '280px' } }"
           >
             <div
               class="im-conversation-private-side__row flex flex-col items-stretch gap-1.5 px-4 py-[14px] text-14px min-h-6 cursor-pointer transition-colors duration-150 hover:bg-[var(--ant-color-fill-tertiary)]"
diff --git a/apps/web-antdv-next/src/views/im/home/pages/conversation/components/message/material-bubble.vue b/apps/web-antdv-next/src/views/im/home/pages/conversation/components/message/material-bubble.vue
index 245bccc3c..afe25de0d 100644
--- a/apps/web-antdv-next/src/views/im/home/pages/conversation/components/message/material-bubble.vue
+++ b/apps/web-antdv-next/src/views/im/home/pages/conversation/components/message/material-bubble.vue
@@ -118,7 +118,7 @@ const onClick = async () => {
     wrap-class-name="im-material-detail-modal"
     destroy-on-hidden
   >
-    <Spin :spinning="detailLoading" wrapper-class-name="w-full">
+    <Spin :spinning="detailLoading" :classes="{ root: 'w-full' }">
       <div class="material-detail-body max-w-[720px] mx-auto px-5 pt-6 pb-20 min-h-[60vh]">
         <div class="text-[22px] font-600 leading-[1.4] text-[var(--ant-color-text)] mb-5">
           {{ payload.title || '' }}
diff --git a/apps/web-antdv-next/src/views/im/home/pages/conversation/components/message/message-history.vue b/apps/web-antdv-next/src/views/im/home/pages/conversation/components/message/message-history.vue
index 8c202f551..5ef46f33f 100644
--- a/apps/web-antdv-next/src/views/im/home/pages/conversation/components/message/message-history.vue
+++ b/apps/web-antdv-next/src/views/im/home/pages/conversation/components/message/message-history.vue
@@ -569,7 +569,7 @@ function locateMessage(messageId: number) {
           v-model:open="datePopoverVisible"
           trigger="click"
           placement="bottom"
-          :overlay-style="{ width: '320px' }"
+          :styles="{ root: { width: '320px' } }"
         >
           <span
             class="im-message-history__tab cursor-pointer"
@@ -600,7 +600,7 @@ function locateMessage(messageId: number) {
           v-model:open="memberPopoverVisible"
           trigger="click"
           placement="bottom"
-          :overlay-style="{ width: '320px' }"
+          :styles="{ root: { width: '320px' } }"
         >
           <span
             class="im-message-history__tab cursor-pointer"
diff --git a/apps/web-antdv-next/src/views/im/home/pages/conversation/components/message/message-panel.vue b/apps/web-antdv-next/src/views/im/home/pages/conversation/components/message/message-panel.vue
index e99ad5279..d43fee432 100644
--- a/apps/web-antdv-next/src/views/im/home/pages/conversation/components/message/message-panel.vue
+++ b/apps/web-antdv-next/src/views/im/home/pages/conversation/components/message/message-panel.vue
@@ -567,9 +567,9 @@ watch(
               v-if="isPrivate"
               v-model:open="callPopoverVisible"
               placement="bottomRight"
-              :overlay-style="{ width: '140px' }"
+              :styles="{ root: { width: '140px' } }"
               trigger="click"
-              overlay-class-name="message-panel__call-popover"
+              :classes="{ root: 'message-panel__call-popover' }"
             >
               <Icon
                 icon="ant-design:phone-outlined"
diff --git a/apps/web-antdv-next/src/views/im/home/pages/conversation/components/message/message-read-status.vue b/apps/web-antdv-next/src/views/im/home/pages/conversation/components/message/message-read-status.vue
index c7beae40c..f3580e233 100644
--- a/apps/web-antdv-next/src/views/im/home/pages/conversation/components/message/message-read-status.vue
+++ b/apps/web-antdv-next/src/views/im/home/pages/conversation/components/message/message-read-status.vue
@@ -126,7 +126,7 @@ async function loadReadUsers() {
     v-model:open="popVisible"
     placement="left"
     trigger="click"
-    :overlay-style="{ width: '320px' }"
+    :styles="{ root: { width: '320px' } }"
     @open-change="(open) => open && loadReadUsers()"
   >
     <span
diff --git a/apps/web-antdv-next/src/views/iot/alert/record/index.vue b/apps/web-antdv-next/src/views/iot/alert/record/index.vue
index ec605e9dc..6fd5bb785 100644
--- a/apps/web-antdv-next/src/views/iot/alert/record/index.vue
+++ b/apps/web-antdv-next/src/views/iot/alert/record/index.vue
@@ -100,7 +100,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
           v-if="row.deviceMessage"
           placement="topLeft"
           :trigger="['hover']"
-          :overlay-style="{ maxWidth: '600px' }"
+          :styles="{ root: { maxWidth: '600px' } }"
         >
           <template #content>
             <pre class="text-xs">{{
diff --git a/apps/web-antdv-next/src/views/iot/device/device/detail/modules/thing-model-property.vue b/apps/web-antdv-next/src/views/iot/device/device/detail/modules/thing-model-property.vue
index 27927fb3d..589fa1eba 100644
--- a/apps/web-antdv-next/src/views/iot/device/device/detail/modules/thing-model-property.vue
+++ b/apps/web-antdv-next/src/views/iot/device/device/detail/modules/thing-model-property.vue
@@ -331,7 +331,7 @@ onBeforeUnmount(() => {
           class="mb-4"
         >
           <Card
-            :body-style="{ padding: '0' }"
+            :styles="{ body: { padding: '0' } }"
             class="relative h-full overflow-hidden transition-colors"
           >
             <!-- 添加渐变背景层 -->
diff --git a/apps/web-antdv-next/src/views/iot/device/device/index.vue b/apps/web-antdv-next/src/views/iot/device/device/index.vue
index ec8a9ae76..bd5c95e95 100644
--- a/apps/web-antdv-next/src/views/iot/device/device/index.vue
+++ b/apps/web-antdv-next/src/views/iot/device/device/index.vue
@@ -275,7 +275,7 @@ onMounted(async () => {
     <DeviceImportFormModal @success="handleRefresh" />
 
     <!-- 统一搜索工具栏 -->
-    <Card :body-style="{ padding: '16px' }" class="!mb-2">
+    <Card :styles="{ body: { padding: '16px' } }" class="!mb-2">
       <!-- 搜索表单 -->
       <div class="mb-3 flex flex-wrap items-center gap-3">
         <Select
diff --git a/apps/web-antdv-next/src/views/iot/device/device/modules/card-view.vue b/apps/web-antdv-next/src/views/iot/device/device/modules/card-view.vue
index 06b55875f..d0474cba4 100644
--- a/apps/web-antdv-next/src/views/iot/device/device/modules/card-view.vue
+++ b/apps/web-antdv-next/src/views/iot/device/device/modules/card-view.vue
@@ -118,11 +118,13 @@ onMounted(() => {
           :lg="6"
         >
           <Card
-            :body-style="{
-              padding: '16px',
-              display: 'flex',
-              flexDirection: 'column',
-              height: '100%',
+            :styles="{
+              body: {
+                padding: '16px',
+                display: 'flex',
+                flexDirection: 'column',
+                height: '100%',
+              },
             }"
             class="h-full overflow-hidden rounded-lg transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg"
           >
diff --git a/apps/web-antdv-next/src/views/iot/product/product/index.vue b/apps/web-antdv-next/src/views/iot/product/product/index.vue
index 0944d24df..d8f88e396 100644
--- a/apps/web-antdv-next/src/views/iot/product/product/index.vue
+++ b/apps/web-antdv-next/src/views/iot/product/product/index.vue
@@ -173,7 +173,7 @@ onMounted(() => {
     <FormModal @success="handleRefresh" />
 
     <!-- 统一搜索工具栏 -->
-    <Card :body-style="{ padding: '16px' }" class="!mb-2">
+    <Card :styles="{ body: { padding: '16px' } }" class="!mb-2">
       <!-- 搜索表单 -->
       <div class="mb-3 flex items-center gap-3">
         <Input
diff --git a/apps/web-antdv-next/src/views/iot/product/product/modules/card-view.vue b/apps/web-antdv-next/src/views/iot/product/product/modules/card-view.vue
index 8427cfa63..f81106799 100644
--- a/apps/web-antdv-next/src/views/iot/product/product/modules/card-view.vue
+++ b/apps/web-antdv-next/src/views/iot/product/product/modules/card-view.vue
@@ -127,11 +127,13 @@ onMounted(() => {
           :lg="6"
         >
           <Card
-            :body-style="{
-              padding: '16px',
-              display: 'flex',
-              flexDirection: 'column',
-              height: '100%',
+            :styles="{
+              body: {
+                padding: '16px',
+                display: 'flex',
+                flexDirection: 'column',
+                height: '100%',
+              },
             }"
             class="h-full overflow-hidden rounded-lg transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg"
           >
diff --git a/apps/web-antdv-next/src/views/iot/rule/scene/form/inputs/json-params-input.vue b/apps/web-antdv-next/src/views/iot/rule/scene/form/inputs/json-params-input.vue
index 1fc54e692..b890bd314 100644
--- a/apps/web-antdv-next/src/views/iot/rule/scene/form/inputs/json-params-input.vue
+++ b/apps/web-antdv-next/src/views/iot/rule/scene/form/inputs/json-params-input.vue
@@ -433,10 +433,10 @@ watch(
       <div class="absolute right-2 top-2">
         <Popover
           placement="leftTop"
-          :overlay-style="{ width: '450px' }"
+          :styles="{ root: { width: '450px' } }"
           :trigger="['click']"
           :arrow="true"
-          overlay-class-name="json-params-detail-popover"
+          :classes="{ root: 'json-params-detail-popover' }"
         >
           <template #content>
             <!-- 弹出层内容 -->
diff --git a/apps/web-antdv-next/src/views/iot/rule/scene/form/selectors/property-selector.vue b/apps/web-antdv-next/src/views/iot/rule/scene/form/selectors/property-selector.vue
index 2f48f5045..af42a0cc6 100644
--- a/apps/web-antdv-next/src/views/iot/rule/scene/form/selectors/property-selector.vue
+++ b/apps/web-antdv-next/src/views/iot/rule/scene/form/selectors/property-selector.vue
@@ -247,10 +247,10 @@ watch(
     <Popover
       v-if="selectedProperty"
       placement="rightTop"
-      :overlay-style="{ width: '350px' }"
+      :styles="{ root: { width: '350px' } }"
       :trigger="['click']"
       :arrow="true"
-      overlay-class-name="property-detail-popover"
+      :classes="{ root: 'property-detail-popover' }"
     >
       <template #content>
         <!-- 弹出层内容 -->
diff --git a/apps/web-antdv-next/src/views/iot/rule/scene/index.vue b/apps/web-antdv-next/src/views/iot/rule/scene/index.vue
index dcba83753..83251d6a2 100644
--- a/apps/web-antdv-next/src/views/iot/rule/scene/index.vue
+++ b/apps/web-antdv-next/src/views/iot/rule/scene/index.vue
@@ -230,7 +230,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     <!-- 统计卡片 -->
     <Row :gutter="16" class="mb-4">
       <Col :span="6">
-        <Card :body-style="{ padding: '12px 16px' }">
+        <Card :styles="{ body: { padding: '12px 16px' } }">
           <div class="flex items-center">
             <div
               class="w-10 h-10 rounded-lg flex items-center justify-center text-xl text-white mr-3 bg-gradient-to-br from-indigo-500 to-purple-600"
@@ -247,7 +247,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
         </Card>
       </Col>
       <Col :span="6">
-        <Card :body-style="{ padding: '12px 16px' }">
+        <Card :styles="{ body: { padding: '12px 16px' } }">
           <div class="flex items-center">
             <div
               class="w-10 h-10 rounded-lg flex items-center justify-center text-xl text-white mr-3 bg-gradient-to-br from-pink-400 to-red-500"
@@ -264,7 +264,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
         </Card>
       </Col>
       <Col :span="6">
-        <Card :body-style="{ padding: '12px 16px' }">
+        <Card :styles="{ body: { padding: '12px 16px' } }">
           <div class="flex items-center">
             <div
               class="w-10 h-10 rounded-lg flex items-center justify-center text-xl text-white mr-3 bg-gradient-to-br from-cyan-400 to-blue-500"
@@ -281,7 +281,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
         </Card>
       </Col>
       <Col :span="6">
-        <Card :body-style="{ padding: '12px 16px' }">
+        <Card :styles="{ body: { padding: '12px 16px' } }">
           <div class="flex items-center">
             <div
               class="w-10 h-10 rounded-lg flex items-center justify-center text-xl text-white mr-3 bg-gradient-to-br from-green-400 to-teal-400"
diff --git a/apps/web-antdv-next/src/views/mall/statistics/product/modules/summary-card.vue b/apps/web-antdv-next/src/views/mall/statistics/product/modules/summary-card.vue
index f1af990a7..7b58ee18f 100644
--- a/apps/web-antdv-next/src/views/mall/statistics/product/modules/summary-card.vue
+++ b/apps/web-antdv-next/src/views/mall/statistics/product/modules/summary-card.vue
@@ -119,7 +119,7 @@ async function handleExport() {
 </script>
 
 <template>
-  <Card :bordered="false" title="商品概况" class="h-full">
+  <Card variant="borderless" title="商品概况" class="h-full">
     <template #extra>
       <!-- 查询条件 -->
       <div class="flex items-center gap-2">
diff --git a/apps/web-antdv-next/src/views/mall/statistics/trade/modules/trend-card.vue b/apps/web-antdv-next/src/views/mall/statistics/trade/modules/trend-card.vue
index 62b58f73c..a4eed82ce 100644
--- a/apps/web-antdv-next/src/views/mall/statistics/trade/modules/trend-card.vue
+++ b/apps/web-antdv-next/src/views/mall/statistics/trade/modules/trend-card.vue
@@ -122,7 +122,7 @@ async function handleExport() {
 </script>
 
 <template>
-  <Card :bordered="false" title="交易状况" class="h-full">
+  <Card variant="borderless" title="交易状况" class="h-full">
     <template #extra>
       <!-- 查询条件 -->
       <div class="flex items-center gap-2">
diff --git a/apps/web-antdv-next/src/views/mes/cal/calendar/components/panel.vue b/apps/web-antdv-next/src/views/mes/cal/calendar/components/panel.vue
index af5833781..fea7d4f22 100644
--- a/apps/web-antdv-next/src/views/mes/cal/calendar/components/panel.vue
+++ b/apps/web-antdv-next/src/views/mes/cal/calendar/components/panel.vue
@@ -36,7 +36,7 @@ function handleToday() {
 <template>
   <div>
     <CalendarLegend />
-    <Spin :spinning="loading" wrapper-class-name="block">
+    <Spin :spinning="loading" :classes="{ root: 'block' }">
       <div class="bg-card overflow-hidden rounded-md">
         <Calendar v-model:value="currentDate" class="mes-calendar-panel">
           <template #headerRender>
diff --git a/apps/web-antdv-next/src/views/mes/md/item/modules/product-media-list.vue b/apps/web-antdv-next/src/views/mes/md/item/modules/product-media-list.vue
index d0ba24778..b5310dc36 100644
--- a/apps/web-antdv-next/src/views/mes/md/item/modules/product-media-list.vue
+++ b/apps/web-antdv-next/src/views/mes/md/item/modules/product-media-list.vue
@@ -224,7 +224,7 @@ watch(
           v-for="item in list"
           :key="item.id"
           hoverable
-          :body-style="{ padding: '0px' }"
+          :styles="{ body: { padding: '0px' } }"
         >
           <Image
             v-if="item.url"
diff --git a/apps/web-antdv-next/src/views/mes/md/item/type/components/tree.vue b/apps/web-antdv-next/src/views/mes/md/item/type/components/tree.vue
index acb3ad22b..f7ca1204f 100644
--- a/apps/web-antdv-next/src/views/mes/md/item/type/components/tree.vue
+++ b/apps/web-antdv-next/src/views/mes/md/item/type/components/tree.vue
@@ -119,7 +119,7 @@ onMounted(() => {
         <IconifyIcon class="size-4" icon="lucide:search" />
       </template>
     </Input>
-    <Spin :spinning="loading" wrapper-class-name="w-full">
+    <Spin :spinning="loading" :classes="{ root: 'w-full' }">
       <Tree
         v-if="itemTypeTree.length > 0"
         :default-expand-all="true"
diff --git a/apps/web-antdv-next/src/views/system/dept/components/tree-select.vue b/apps/web-antdv-next/src/views/system/dept/components/tree-select.vue
index 7054d3c82..c71ce5fe2 100644
--- a/apps/web-antdv-next/src/views/system/dept/components/tree-select.vue
+++ b/apps/web-antdv-next/src/views/system/dept/components/tree-select.vue
@@ -82,7 +82,7 @@ onMounted(async () => {
         <IconifyIcon class="size-4" icon="lucide:search" />
       </template>
     </Input>
-    <Spin :spinning="loading" wrapper-class-name="w-full">
+    <Spin :spinning="loading" :classes="{ root: 'w-full' }">
       <Tree
         v-if="deptTree.length > 0"
         v-model:selected-keys="selectedKeys"
diff --git a/apps/web-antdv-next/src/views/system/role/modules/assign-data-permission-form.vue b/apps/web-antdv-next/src/views/system/role/modules/assign-data-permission-form.vue
index d8d36856d..203140eb4 100644
--- a/apps/web-antdv-next/src/views/system/role/modules/assign-data-permission-form.vue
+++ b/apps/web-antdv-next/src/views/system/role/modules/assign-data-permission-form.vue
@@ -134,7 +134,7 @@ function getAllNodeIds(nodes: any[], ids: number[] = []): number[] {
   <Modal title="数据权限" class="w-2/5">
     <Form class="mx-4">
       <template #dataScopeDeptIds="slotProps">
-        <Spin :spinning="deptLoading" wrapper-class-name="w-full">
+        <Spin :spinning="deptLoading" :classes="{ root: 'w-full' }">
           <Tree
             :tree-data="deptTree"
             multiple
diff --git a/apps/web-antdv-next/src/views/system/role/modules/assign-menu-form.vue b/apps/web-antdv-next/src/views/system/role/modules/assign-menu-form.vue
index 0e73669c1..f06d1d59f 100644
--- a/apps/web-antdv-next/src/views/system/role/modules/assign-menu-form.vue
+++ b/apps/web-antdv-next/src/views/system/role/modules/assign-menu-form.vue
@@ -142,7 +142,7 @@ function getNodeClass(node: Recordable<any>) {
   <Modal title="菜单权限" class="w-2/5">
     <Form class="mx-4">
       <template #menuIds="slotProps">
-        <Spin :spinning="menuLoading" wrapper-class-name="w-full">
+        <Spin :spinning="menuLoading" :classes="{ root: 'w-full' }">
           <Tree
             :tree-data="menuTree"
             multiple
diff --git a/apps/web-antdv-next/src/views/system/tenantPackage/modules/form.vue b/apps/web-antdv-next/src/views/system/tenantPackage/modules/form.vue
index c2af0afa8..5c8f8442b 100644
--- a/apps/web-antdv-next/src/views/system/tenantPackage/modules/form.vue
+++ b/apps/web-antdv-next/src/views/system/tenantPackage/modules/form.vue
@@ -134,7 +134,7 @@ function getAllNodeIds(nodes: any[], ids: number[] = []): number[] {
   <Modal :title="getTitle" class="w-2/5">
     <Form class="mx-6">
       <template #menuIds="slotProps">
-        <Spin :spinning="menuLoading" wrapper-class-name="w-full">
+        <Spin :spinning="menuLoading" :classes="{ root: 'w-full' }">
           <Tree
             class="max-h-96 overflow-y-auto"
             :tree-data="menuTree"
diff --git a/apps/web-antdv-next/src/views/system/user/modules/dept-tree.vue b/apps/web-antdv-next/src/views/system/user/modules/dept-tree.vue
index 48ffe69c4..6dca1ca21 100644
--- a/apps/web-antdv-next/src/views/system/user/modules/dept-tree.vue
+++ b/apps/web-antdv-next/src/views/system/user/modules/dept-tree.vue
@@ -68,7 +68,7 @@ onMounted(async () => {
         <IconifyIcon icon="lucide:search" class="size-4" />
       </template>
     </Input>
-    <Spin :spinning="loading" wrapper-class-name="w-full">
+    <Spin :spinning="loading" :classes="{ root: 'w-full' }">
       <Tree
         @select="handleSelect"
         v-if="deptTree.length > 0"
diff --git a/apps/web-antdv-next/src/views/wms/home/index.vue b/apps/web-antdv-next/src/views/wms/home/index.vue
index 11dae7153..359991c72 100644
--- a/apps/web-antdv-next/src/views/wms/home/index.vue
+++ b/apps/web-antdv-next/src/views/wms/home/index.vue
@@ -50,7 +50,7 @@ onMounted(() => {
       />
     </template>
     <div class="flex flex-col gap-2">
-      <Card :body-style="{ padding: '16px' }">
+      <Card :styles="{ body: { padding: '16px' } }">
         <div class="flex flex-wrap items-center justify-between gap-4">
           <div>
             <div class="text-xl font-semibold">WMS 首页</div>
diff --git a/apps/web-antdv-next/src/views/wms/home/modules/wms-home-inventory-charts.vue b/apps/web-antdv-next/src/views/wms/home/modules/wms-home-inventory-charts.vue
index 58fccb5f0..f433a13f4 100644
--- a/apps/web-antdv-next/src/views/wms/home/modules/wms-home-inventory-charts.vue
+++ b/apps/web-antdv-next/src/views/wms/home/modules/wms-home-inventory-charts.vue
@@ -75,7 +75,7 @@ defineExpose({ load });
 
 <template>
   <div class="grid grid-cols-2 gap-4 max-lg:grid-cols-1">
-    <Card :body-style="{ padding: '12px 16px 16px' }">
+    <Card :styles="{ body: { padding: '12px 16px 16px' } }">
       <div class="mb-3">
         <div class="font-semibold">货物占比</div>
         <div class="text-sm text-muted-foreground">
@@ -92,7 +92,7 @@ defineExpose({ load });
         </div>
       </div>
     </Card>
-    <Card :body-style="{ padding: '12px 16px 16px' }">
+    <Card :styles="{ body: { padding: '12px 16px 16px' } }">
       <div class="mb-3 flex justify-between">
         <div>
           <div class="font-semibold">库存分布</div>
diff --git a/apps/web-antdv-next/src/views/wms/home/modules/wms-home-order-summary-cards.vue b/apps/web-antdv-next/src/views/wms/home/modules/wms-home-order-summary-cards.vue
index b3c2f2eff..9adb120e4 100644
--- a/apps/web-antdv-next/src/views/wms/home/modules/wms-home-order-summary-cards.vue
+++ b/apps/web-antdv-next/src/views/wms/home/modules/wms-home-order-summary-cards.vue
@@ -141,7 +141,7 @@ defineExpose({ load });
     <Card
       v-for="item in summaryList"
       :key="item.type"
-      :body-style="{ padding: '12px 16px 16px' }"
+      :styles="{ body: { padding: '12px 16px 16px' } }"
       class="h-full shadow-sm"
       :loading="loading"
       :style="{ borderTop: `3px solid ${item.color}` }"
diff --git a/apps/web-antdv-next/src/views/wms/home/modules/wms-home-order-trend-chart.vue b/apps/web-antdv-next/src/views/wms/home/modules/wms-home-order-trend-chart.vue
index dcb234460..8e433c664 100644
--- a/apps/web-antdv-next/src/views/wms/home/modules/wms-home-order-trend-chart.vue
+++ b/apps/web-antdv-next/src/views/wms/home/modules/wms-home-order-trend-chart.vue
@@ -57,7 +57,7 @@ defineExpose({ load });
 </script>
 
 <template>
-  <Card :body-style="{ padding: '12px 16px 16px' }">
+  <Card :styles="{ body: { padding: '12px 16px 16px' } }">
     <div class="mb-3 flex items-center justify-between">
       <div>
         <div class="font-semibold">单据趋势</div>
diff --git a/apps/web-antdv-next/src/views/wms/md/item/category/components/tree.vue b/apps/web-antdv-next/src/views/wms/md/item/category/components/tree.vue
index e682d58c9..b19132f4b 100644
--- a/apps/web-antdv-next/src/views/wms/md/item/category/components/tree.vue
+++ b/apps/web-antdv-next/src/views/wms/md/item/category/components/tree.vue
@@ -114,7 +114,7 @@ onMounted(() => {
         <IconifyIcon class="size-4" icon="lucide:search" />
       </template>
     </Input>
-    <Spin :spinning="loading" wrapper-class-name="w-full">
+    <Spin :spinning="loading" :classes="{ root: 'w-full' }">
       <Tree
         v-if="categoryTree.length > 0"
         :default-expand-all="true"