fix: replace ant-design-vue with tdesign components in web-tdesign app (#6880)

* Initial plan

* fix: replace ant-design-vue with tdesign components

Co-authored-by: likui628 <[email protected]>

* fix: remove trailing comma in package.json

Co-authored-by: likui628 <[email protected]>

---------

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: likui628 <[email protected]>

Author: Copilot

apps/web-tdesign/package.json

@@ -6,7 +6,7 @@
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
-    "directory": "apps/web-naive"
+    "directory": "apps/web-tdesign"
   },
   "license": "MIT",
   "author": {
@@ -46,5 +46,5 @@
     "tdesign-vue-next": "^1.17.1",
     "vue": "catalog:",
     "vue-router": "catalog:"
-  },
+  }
 }

apps/web-tdesign/src/adapter/component/index.ts

@@ -8,7 +8,7 @@ import { defineAsyncComponent, defineComponent, h, ref } from 'vue';
 import { ApiComponent, globalShareState, IconPicker } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
-import { notification } from 'ant-design-vue';
+import { notification } from '#/adapter/tdesign';
 
 /**
  * 通用组件共同的使用的基础组件，原先放在 adapter/form 内部，限制了使用范围，这里提取出来，方便其他地方使用
@@ -218,9 +218,9 @@ async function initComponentAdapter() {
     // 复制成功消息提示
     copyPreferencesSuccess: (title, content) => {
       notification.success({
-        description: content,
-        message: title,
-        placement: 'bottomRight',
+        title,
+        content,
+        placement: 'bottom-right',
       });
     },
   });

apps/web-tdesign/src/adapter/tdesign.ts

@@ -0,0 +1,9 @@
+import {
+  DialogPlugin,
+  MessagePlugin,
+  NotificationPlugin,
+} from 'tdesign-vue-next';
+
+export const message = MessagePlugin;
+export const notification = NotificationPlugin;
+export const dialog = DialogPlugin;

apps/web-tdesign/src/adapter/vxe-table.ts

@@ -4,7 +4,7 @@ import { h } from 'vue';
 
 import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table';
 
-import { Button, Image } from 'ant-design-vue';
+import { Button, Image } from 'tdesign-vue-next';
 
 import { useVbenForm } from './form';
 
@@ -52,7 +52,7 @@ setupVbenVxeTable({
         const { props } = renderOpts;
         return h(
           Button,
-          { size: 'small', type: 'link' },
+          { size: 'small', theme: 'primary', variant: 'text' },
           { default: () => props?.text },
         );
       },

apps/web-tdesign/src/api/request.ts

@@ -13,7 +13,7 @@ import {
 } from '@vben/request';
 import { useAccessStore } from '@vben/stores';
 
-import { message } from 'ant-design-vue';
+import { message } from '#/adapter/tdesign';
 
 import { useAuthStore } from '#/store';
 

apps/web-tdesign/src/locales/index.ts

@@ -1,5 +1,3 @@
-import type { Locale } from 'ant-design-vue/es/locale';
-
 import type { App } from 'vue';
 
 import type { LocaleSetupOptions, SupportedLanguagesType } from '@vben/locales';
@@ -13,12 +11,8 @@ import {
 } from '@vben/locales';
 import { preferences } from '@vben/preferences';
 
-import antdEnLocale from 'ant-design-vue/es/locale/en_US';
-import antdDefaultLocale from 'ant-design-vue/es/locale/zh_CN';
 import dayjs from 'dayjs';
 
-const antdLocale = ref<Locale>(antdDefaultLocale);
-
 const modules = import.meta.glob('./langs/**/*.json');
 
 const localesMap = loadLocalesMapFromDir(
@@ -43,7 +37,7 @@ async function loadMessages(lang: SupportedLanguagesType) {
  * @param lang
  */
 async function loadThirdPartyMessage(lang: SupportedLanguagesType) {
-  await Promise.all([loadAntdLocale(lang), loadDayjsLocale(lang)]);
+  await loadDayjsLocale(lang);
 }
 
 /**
@@ -73,23 +67,6 @@ async function loadDayjsLocale(lang: SupportedLanguagesType) {
   }
 }
 
-/**
- * 加载antd的语言包
- * @param lang
- */
-async function loadAntdLocale(lang: SupportedLanguagesType) {
-  switch (lang) {
-    case 'en-US': {
-      antdLocale.value = antdEnLocale;
-      break;
-    }
-    case 'zh-CN': {
-      antdLocale.value = antdDefaultLocale;
-      break;
-    }
-  }
-}
-
 async function setupI18n(app: App, options: LocaleSetupOptions = {}) {
   await coreSetup(app, {
     defaultLocale: preferences.app.locale,
@@ -99,4 +76,4 @@ async function setupI18n(app: App, options: LocaleSetupOptions = {}) {
   });
 }
 
-export { $t, antdLocale, setupI18n };
+export { $t, setupI18n };

apps/web-tdesign/src/router/access.ts

@@ -6,7 +6,7 @@ import type {
 import { generateAccessible } from '@vben/access';
 import { preferences } from '@vben/preferences';
 
-import { message } from 'ant-design-vue';
+import { message } from '#/adapter/tdesign';
 
 import { getAllMenusApi } from '#/api';
 import { BasicLayout, IFrameView } from '#/layouts';
@@ -27,7 +27,7 @@ async function generateAccess(options: GenerateMenuAndRoutesOptions) {
     fetchMenuListAsync: async () => {
       message.loading({
         content: `${$t('common.loadingMenu')}...`,
-        duration: 1.5,
+        duration: 1500,
       });
       return await getAllMenusApi();
     },

apps/web-tdesign/src/store/auth.ts

@@ -7,7 +7,7 @@ import { LOGIN_PATH } from '@vben/constants';
 import { preferences } from '@vben/preferences';
 import { resetAllStores, useAccessStore, useUserStore } from '@vben/stores';
 
-import { notification } from 'ant-design-vue';
+import { notification } from '#/adapter/tdesign';
 import { defineStore } from 'pinia';
 
 import { getAccessCodesApi, getUserInfoApi, loginApi, logoutApi } from '#/api';
@@ -61,9 +61,9 @@ export const useAuthStore = defineStore('auth', () => {
 
         if (userInfo?.realName) {
           notification.success({
-            description: `${$t('authentication.loginSuccessDesc')}:${userInfo?.realName}`,
-            duration: 3,
-            message: $t('authentication.loginSuccess'),
+            title: $t('authentication.loginSuccess'),
+            content: `${$t('authentication.loginSuccessDesc')}:${userInfo?.realName}`,
+            duration: 3000,
           });
         }
       }

apps/web-tdesign/src/views/demos/antd/index.vue

@@ -1,7 +1,9 @@
 <script lang="ts" setup>
 import { Page } from '@vben/common-ui';
 
-import { Button, Card, message, notification, Space } from 'ant-design-vue';
+import { Button, Card, Space } from 'tdesign-vue-next';
+
+import { message, notification } from '#/adapter/tdesign';
 
 type NotificationType = 'error' | 'info' | 'success' | 'warning';
 
@@ -26,29 +28,28 @@ function success() {
 function notify(type: NotificationType) {
   notification[type]({
     duration: 2500,
-    message: '说点啥呢',
-    type,
+    title: '说点啥呢',
   });
 }
 </script>
 
 <template>
   <Page
     description="支持多语言，主题功能集成切换等"
-    title="Ant Design Vue组件使用演示"
+    title="TDesign Vue组件使用演示"
   >
     <Card class="mb-5" title="按钮">
       <Space>
         <Button>Default</Button>
-        <Button type="primary"> Primary </Button>
-        <Button> Info </Button>
-        <Button danger> Error </Button>
+        <Button theme="primary"> Primary </Button>
+        <Button theme="default"> Info </Button>
+        <Button theme="danger"> Error </Button>
       </Space>
     </Card>
     <Card class="mb-5" title="Message">
       <Space>
         <Button @click="info"> 信息 </Button>
-        <Button danger @click="error"> 错误 </Button>
+        <Button theme="danger" @click="error"> 错误 </Button>
         <Button @click="warning"> 警告 </Button>
         <Button @click="success"> 成功 </Button>
       </Space>
@@ -57,7 +58,7 @@ function notify(type: NotificationType) {
     <Card class="mb-5" title="Notification">
       <Space>
         <Button @click="notify('info')"> 信息 </Button>
-        <Button danger @click="notify('error')"> 错误 </Button>
+        <Button theme="danger" @click="notify('error')"> 错误 </Button>
         <Button @click="notify('warning')"> 警告 </Button>
         <Button @click="notify('success')"> 成功 </Button>
       </Space>