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
2026-06-25 18:07:44 +08:00
parent 514a5a02d5
commit 6bc0d627c1
34 changed files with 58 additions and 54 deletions
--- 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"
--- 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="暂无进群申请" />
--- 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"
    >
      <!-- 胶囊条本体：电话图标 + 文案（含人数）+ 右箭头 -->
--- 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)]"
          >
--- 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)]"
--- 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)]"
--- 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 || '' }}
--- 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"
--- 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"
--- 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
--- 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">{{
--- 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"
          >
            <!-- 添加渐变背景层 -->
--- 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
--- 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"
          >
--- 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
--- 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"
          >
--- 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>
            <!-- 弹出层内容 -->
--- 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>
        <!-- 弹出层内容 -->
--- 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"
--- 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">
--- 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">
--- 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>
--- 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"
--- 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"
--- 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"
--- 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
--- 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
--- 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"
--- 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"
--- 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>
--- 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>
--- 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}` }"
--- 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>
--- 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"