From 1e44b8735935ae7059c56dd4c918883086628a2a Mon Sep 17 00:00:00 2001
From: xingyu4j <xingyu4j@vip.qq.com>
Date: Mon, 18 May 2026 16:35:06 +0800
Subject: [PATCH] refactor: migrate playground deprecated antdv-next APIs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Modal: destroyOnClose → destroyOnHidden
- Card: body-style → styles.body
- Alert: message prop/slot → title
- Spin: tip → description, wrapper-class-name → classes.root
---
 playground/src/adapter/component/index.ts              |  2 +-
 .../src/views/demos/features/json-bigint/index.vue     |  2 +-
 .../src/views/demos/features/vue-query/index.vue       |  2 +-
 playground/src/views/examples/layout/col-page.vue      |  2 +-
 playground/src/views/examples/loading/index.vue        | 10 ++++++----
 playground/src/views/examples/motion/index.vue         |  6 +++---
 playground/src/views/system/role/modules/form.vue      |  2 +-
 7 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/playground/src/adapter/component/index.ts b/playground/src/adapter/component/index.ts
index 41209a18f..9f4607dc7 100644
--- a/playground/src/adapter/component/index.ts
+++ b/playground/src/adapter/component/index.ts
@@ -386,7 +386,7 @@ function cropImage(file: File, aspectRatio: string | undefined) {
               closable: false,
               cancelText: $t('common.cancel'),
               okText: $t('ui.crop.confirm'),
-              destroyOnClose: true,
+              destroyOnHidden: true,
               onOk: async () => {
                 const cropper = cropperRef.value;
                 if (!cropper) {
diff --git a/playground/src/views/demos/features/json-bigint/index.vue b/playground/src/views/demos/features/json-bigint/index.vue
index c35ae1e34..f4b6bdf27 100644
--- a/playground/src/views/demos/features/json-bigint/index.vue
+++ b/playground/src/views/demos/features/json-bigint/index.vue
@@ -21,7 +21,7 @@ function fetchData() {
   >
     <Card>
       <Alert>
-        <template #message>
+        <template #title>
           有些后端接口返回的ID是长整数，但javascript原生的JSON解析是不支持超过2^53-1的长整数的。
           这种情况可以建议后端返回数据前将长整数转换为字符串类型。如果后端不接受我们的建议😡……
           <br />
diff --git a/playground/src/views/demos/features/vue-query/index.vue b/playground/src/views/demos/features/vue-query/index.vue
index ed83a6532..2d1a8a2a6 100644
--- a/playground/src/views/demos/features/vue-query/index.vue
+++ b/playground/src/views/demos/features/vue-query/index.vue
@@ -27,7 +27,7 @@ const showCaching = refAutoReset(true, 1000);
       <Card
         title="并发和缓存"
         v-spinning="!showCaching"
-        :body-style="{ minHeight: '330px' }"
+        :styles="{ body: { minHeight: '330px' } }"
       >
         <template #extra>
           <Button @click="showCaching = false">重新加载</Button>
diff --git a/playground/src/views/examples/layout/col-page.vue b/playground/src/views/examples/layout/col-page.vue
index f4f9cf209..bf18574ca 100644
--- a/playground/src/views/examples/layout/col-page.vue
+++ b/playground/src/views/examples/layout/col-page.vue
@@ -87,7 +87,7 @@ const leftMaxWidth = ref(props.leftMaxWidth || 100);
             @after-change="(value) => (props.leftMaxWidth = value as number)"
           />
         </div>
-        <Alert message="实验性的组件" show-icon type="warning">
+        <Alert title="实验性的组件" show-icon type="warning">
           <template #description>
             <p>
               双列布局组件是一个在Page组件上扩展的相对基础的布局组件，支持左侧折叠（当拖拽导致左侧宽度比最小宽度还要小时，还可以进入折叠状态）、拖拽调整宽度等功能。
diff --git a/playground/src/views/examples/loading/index.vue b/playground/src/views/examples/loading/index.vue
index 4fe714913..0ff5c2606 100644
--- a/playground/src/views/examples/loading/index.vue
+++ b/playground/src/views/examples/loading/index.vue
@@ -18,7 +18,7 @@ const loadingV = refAutoReset(false, 3000);
   >
     <Card title="Antd Spin">
       <template #actions>这是Antd 组件库自带的Spin组件演示</template>
-      <Spin :spinning="spinning" tip="加载中...">
+      <Spin :spinning="spinning" description="加载中...">
         <Button type="primary" @click="spinning = true">显示Spin</Button>
       </Spin>
     </Card>
@@ -71,9 +71,11 @@ const loadingV = refAutoReset(false, 3000);
       title="Vben Spinner"
       v-spinning="spinningV"
       class="mt-4 overflow-hidden"
-      :body-style="{
-        position: 'relative',
-        overflow: 'hidden',
+      :styles="{
+        body: {
+          position: 'relative',
+          overflow: 'hidden',
+        },
       }"
     >
       <template #extra>
diff --git a/playground/src/views/examples/motion/index.vue b/playground/src/views/examples/motion/index.vue
index cae68ef12..bf5b99faf 100644
--- a/playground/src/views/examples/motion/index.vue
+++ b/playground/src/views/examples/motion/index.vue
@@ -64,7 +64,7 @@ function openDocPage() {
       <span>一个易于使用的为其它组件赋予动画效果的组件。</span>
       <Button type="link" @click="openDocPage">查看文档</Button>
     </template>
-    <Card title="使用指令" :body-style="{ minHeight: '5rem' }">
+    <Card title="使用指令" :styles="{ body: { minHeight: '5rem' } }">
       <template #extra>
         <Button type="primary" @click="showCard1 = false">重载</Button>
       </template>
@@ -82,7 +82,7 @@ function openDocPage() {
     <Card
       class="mt-2"
       title="使用组件（将内部作为一个整体添加动画）"
-      :body-style="{ padding: 0 }"
+      :styles="{ body: { padding: 0 } }"
     >
       <div class="relative flex-center min-h-32 gap-2 overflow-hidden">
         <Motion
@@ -147,7 +147,7 @@ function openDocPage() {
     <Card
       class="mt-2"
       title="分组动画（每个子元素都会应用相同的独立动画）"
-      :body-style="{ padding: 0 }"
+      :styles="{ body: { padding: 0 } }"
     >
       <div class="relative flex-center min-h-32 gap-2 overflow-hidden">
         <MotionGroup v-bind="motionGroupProps" v-if="showCard3">
diff --git a/playground/src/views/system/role/modules/form.vue b/playground/src/views/system/role/modules/form.vue
index 76f073387..57a805752 100644
--- a/playground/src/views/system/role/modules/form.vue
+++ b/playground/src/views/system/role/modules/form.vue
@@ -101,7 +101,7 @@ function getNodeClass(node: Recordable<any>) {
   <Drawer :title="getDrawerTitle">
     <Form>
       <template #permissions="slotProps">
-        <Spin :spinning="loadingPermissions" wrapper-class-name="w-full">
+        <Spin :spinning="loadingPermissions" :classes="{ root: 'w-full' }">
           <Tree
             :tree-data="permissions"
             multiple