diff --git a/playground/src/bootstrap.ts b/playground/src/bootstrap.ts
index 1685a718b..1df00ac75 100644
--- a/playground/src/bootstrap.ts
+++ b/playground/src/bootstrap.ts
@@ -6,7 +6,7 @@ import { providePluginsOptions } from '@vben/plugins';
 import { preferences } from '@vben/preferences';
 import { initStores } from '@vben/stores';
 import '@vben/styles';
-import '@vben/styles/antd';
+import '@vben/styles/antdv-next';
 
 import { useTitle } from '@vueuse/core';
 
diff --git a/playground/src/views/examples/vxe-table/viewed.vue b/playground/src/views/examples/vxe-table/viewed.vue
index e535fe939..d2b485566 100644
--- a/playground/src/views/examples/vxe-table/viewed.vue
+++ b/playground/src/views/examples/vxe-table/viewed.vue
@@ -1,15 +1,15 @@
 <script lang="ts" setup>
-import type {OnActionClickParams, VxeGridProps} from '#/adapter/vxe-table';
+import type { OnActionClickParams, VxeGridProps } from '#/adapter/vxe-table';
 
-import {ref} from 'vue';
+import { ref } from 'vue';
 
-import {Page, useVbenModal} from '@vben/common-ui';
-import {$t} from '@vben/locales';
+import { Page, useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
 
-import {Button, message} from 'ant-design-vue';
+import { Button, message } from 'antdv-next';
 
-import {useVbenVxeGrid} from '#/adapter/vxe-table';
-import {getExampleTableApi} from '#/api';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getExampleTableApi } from '#/api';
 
 interface RowType {
   category: string;
@@ -26,12 +26,12 @@ const gridOptions: VxeGridProps<RowType> = {
     labelField: 'category',
   },
   columns: [
-    {title: '序号', type: 'seq', width: 50},
-    {field: 'category', sortable: true, title: 'Category'},
-    {field: 'color', sortable: true, title: 'Color'},
-    {field: 'productName', sortable: true, title: 'Product Name'},
-    {field: 'price', sortable: true, title: 'Price'},
-    {field: 'releaseDate', formatter: 'formatDateTime', title: 'DateTime'},
+    { title: '序号', type: 'seq', width: 50 },
+    { field: 'category', sortable: true, title: 'Category' },
+    { field: 'color', sortable: true, title: 'Color' },
+    { field: 'productName', sortable: true, title: 'Product Name' },
+    { field: 'price', sortable: true, title: 'Price' },
+    { field: 'releaseDate', formatter: 'formatDateTime', title: 'DateTime' },
     {
       align: 'center',
       cellRender: {
@@ -61,7 +61,7 @@ const gridOptions: VxeGridProps<RowType> = {
   keepSource: true,
   proxyConfig: {
     ajax: {
-      query: async ({page, sort}) => {
+      query: async ({ page, sort }) => {
         return await getExampleTableApi({
           page: page.currentPage,
           pageSize: page.pageSize,
@@ -73,7 +73,7 @@ const gridOptions: VxeGridProps<RowType> = {
     sort: true,
   },
   sortConfig: {
-    defaultSort: {field: 'category', order: 'desc'},
+    defaultSort: { field: 'category', order: 'desc' },
     remote: true,
   },
   toolbarConfig: {
@@ -103,7 +103,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
   },
 });
 
-function onActionClick({code, row}: OnActionClickParams<RowType>) {
+function onActionClick({ code, row }: OnActionClickParams<RowType>) {
   switch (code) {
     case 'edit': {
       onEdit(row);
@@ -123,9 +123,9 @@ const editRow = ref<RowType>();
 const [Modal, modalApi] = useVbenModal({
   draggable: true,
   onConfirm: () => {
-    modalApi.setState({loading: true});
+    modalApi.setState({ loading: true });
     editRow.value && gridApi.markRowAsViewed(editRow.value);
-    modalApi.setState({loading: false});
+    modalApi.setState({ loading: false });
     modalApi.close();
   },
 });
@@ -149,7 +149,7 @@ function onStyleSet() {
   gridApi.setState({
     viewedRowOptions: {
       rowStyle: () => {
-        return isStyle.value ? {backgroundColor: 'gray'} : '';
+        return isStyle.value ? { backgroundColor: 'gray' } : '';
       },
     },
   });