refactor: migrate playground deprecated antdv-next APIs

- 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

@@ -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) {

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 />

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>

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组件上扩展的相对基础的布局组件，支持左侧折叠（当拖拽导致左侧宽度比最小宽度还要小时，还可以进入折叠状态）、拖拽调整宽度等功能。

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="{
+      :styles="{
-        position: 'relative',
+        body: {
-        overflow: 'hidden',
+          position: 'relative',
+          overflow: 'hidden',
+        },
       }"
     >
       <template #extra>

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">

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