From ee1b37c787e5c05250282845dc8b1572f3c600a1 Mon Sep 17 00:00:00 2001 From: dap <15891557205@163.com> Date: Thu, 15 Jan 2026 09:35:54 +0800 Subject: [PATCH] =?UTF-8?q?refactor(antdv-next):=20=E5=B0=86message?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E8=B0=83=E7=94=A8=E7=BB=9F=E4=B8=80=E6=94=B9?= =?UTF-8?q?=E4=B8=BAwindow.message?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 将项目中直接导入的antdv-next的message组件调用改为通过window.message调用，提升代码一致性 移除不再需要的message组件导入 新增api-switch组件用于统一处理状态切换逻辑 --- apps/web-antd/src/api/helper.ts | 4 +- apps/web-antd/src/api/request.ts | 8 +- .../components/cropper/src/cropper-avatar.vue | 4 +- .../components/cropper/src/cropper-modal.vue | 4 +- .../src/components/global/api-switch.vue | 125 ++++++++++++++++++ .../components/tenant-toggle/src/index.vue | 8 +- .../components/upload-old/src/file-upload.vue | 12 +- .../upload-old/src/image-upload.vue | 14 +- .../src/components/upload/src/hook.ts | 6 +- apps/web-antd/src/layouts/basic.vue | 4 +- apps/web-antd/src/router/access.ts | 5 +- apps/web-antd/src/utils/file/download.ts | 11 +- .../views/_core/authentication/code-login.vue | 4 +- .../views/_core/profile/password-setting.vue | 4 +- .../src/views/_core/social-callback/index.vue | 8 +- .../src/views/system/tenant/tenant-drawer.vue | 4 +- apps/web-antd/src/views/system/user/index.vue | 17 ++- apps/web-antd/src/views/tool/gen/index.vue | 12 +- .../workflow/components/approval-modal.vue | 3 +- .../workflow/components/approval-panel.vue | 8 +- .../workflow/processDefinition/index.vue | 18 +-- .../instance-variable-modal.vue | 4 +- .../views/演示使用自行删除/vxe/edit-table.vue | 14 +- 23 files changed, 211 insertions(+), 90 deletions(-) create mode 100644 apps/web-antd/src/components/global/api-switch.vue diff --git a/apps/web-antd/src/api/helper.ts b/apps/web-antd/src/api/helper.ts index 0e977751..29256177 100644 --- a/apps/web-antd/src/api/helper.ts +++ b/apps/web-antd/src/api/helper.ts @@ -1,6 +1,6 @@ import { $t } from '@vben/locales'; -import { message, Modal } from 'antdv-next'; +import { Modal } from 'antdv-next'; import { useAuthStore } from '#/store'; @@ -93,7 +93,7 @@ export function handleUnauthorizedLogout() { } }) .finally(() => { - message.error(timeoutMsg); + window.message.error(timeoutMsg); isLogoutProcessing = false; }); // 不再执行下面逻辑 diff --git a/apps/web-antd/src/api/request.ts b/apps/web-antd/src/api/request.ts index ae86227e..4df3e16d 100644 --- a/apps/web-antd/src/api/request.ts +++ b/apps/web-antd/src/api/request.ts @@ -27,7 +27,7 @@ import { RsaEncryption, } from '@vben/utils'; -import { message, Modal } from 'antdv-next'; +import { Modal } from 'antdv-next'; import { isEmpty, isNull } from 'lodash-es'; import { useAuthStore } from '#/store'; @@ -165,7 +165,7 @@ function createRequestClient(baseURL: string) { // 通用的错误处理, 如果没有进入上面的错误处理逻辑，就会进入这里 // 主要处理http状态码不为200(如网络异常/离线)的情况 必须放在在下面的响应拦截器之前 client.addResponseInterceptor( - errorMessageResponseInterceptor((msg: string) => message.error(msg)), + errorMessageResponseInterceptor((msg: string) => window.message.error(msg)), ); client.addResponseInterceptor({ @@ -258,7 +258,7 @@ function createRequestClient(baseURL: string) { title: $t('http.successTip'), }); } else if (response.config.successMessageMode === 'message') { - message.success(successMsg); + window.message.success(successMsg); } // 分页情况下为code msg rows total 并没有data字段 // 如果有data 直接返回data 没有data将剩余参数(...other)封装为data返回 @@ -293,7 +293,7 @@ function createRequestClient(baseURL: string) { title: $t('http.errorTip'), }); } else if (response.config.errorMessageMode === 'message') { - message.error(timeoutMsg); + window.message.error(timeoutMsg); } throw new Error(timeoutMsg || $t('http.apiRequestFailed')); diff --git a/apps/web-antd/src/components/cropper/src/cropper-avatar.vue b/apps/web-antd/src/components/cropper/src/cropper-avatar.vue index 7142b03f..50faa344 100644 --- a/apps/web-antd/src/components/cropper/src/cropper-avatar.vue +++ b/apps/web-antd/src/components/cropper/src/cropper-avatar.vue @@ -8,8 +8,6 @@ import { computed, ref, unref, watch, watchEffect } from 'vue'; import { useVbenModal } from '@vben/common-ui'; import { $t as t } from '@vben/locales'; -import { message } from 'antdv-next'; - import cropperModal from './cropper-modal.vue'; defineOptions({ name: 'CropperAvatar' }); @@ -74,7 +72,7 @@ watch( function handleUploadSuccess({ data, source }: any) { sourceValue.value = source; emit('change', { data, source }); - message.success(t('component.cropper.uploadSuccess')); + window.message.success(t('component.cropper.uploadSuccess')); } const closeModal = () => modalApi.close(); diff --git a/apps/web-antd/src/components/cropper/src/cropper-modal.vue b/apps/web-antd/src/components/cropper/src/cropper-modal.vue index 49ce5e36..cf6b1b7b 100644 --- a/apps/web-antd/src/components/cropper/src/cropper-modal.vue +++ b/apps/web-antd/src/components/cropper/src/cropper-modal.vue @@ -8,7 +8,7 @@ import { ref } from 'vue'; import { useVbenModal } from '@vben/common-ui'; import { $t as t } from '@vben/locales'; -import { Avatar, message, Space, Tooltip, Upload } from 'antdv-next'; +import { Avatar, Space, Tooltip, Upload } from 'antdv-next'; import { isFunction } from 'lodash-es'; import { dataURLtoBlob } from '#/utils/file/base64Conver'; @@ -102,7 +102,7 @@ async function handleOk() { const uploadApi = props.uploadApi; if (uploadApi && isFunction(uploadApi)) { if (!previewSource.value) { - message.warn('未选择图片'); + window.message.warning('未选择图片'); return; } const blob = dataURLtoBlob(previewSource.value); diff --git a/apps/web-antd/src/components/global/api-switch.vue b/apps/web-antd/src/components/global/api-switch.vue new file mode 100644 index 00000000..93df0b8f --- /dev/null +++ b/apps/web-antd/src/components/global/api-switch.vue @@ -0,0 +1,125 @@ + + + diff --git a/apps/web-antd/src/components/tenant-toggle/src/index.vue b/apps/web-antd/src/components/tenant-toggle/src/index.vue index a8cb5523..4f602bc5 100644 --- a/apps/web-antd/src/components/tenant-toggle/src/index.vue +++ b/apps/web-antd/src/components/tenant-toggle/src/index.vue @@ -12,7 +12,7 @@ import { useTabs } from '@vben/hooks'; import { $t } from '@vben/locales'; import { getPopupContainer } from '@vben/utils'; -import { message, Select, Spin } from 'antdv-next'; +import { Select, Spin } from 'antdv-next'; import { storeToRefs } from 'pinia'; import { tenantDynamicClear, tenantDynamicToggle } from '#/api/system/tenant'; @@ -90,7 +90,7 @@ const onSelected: SelectProps['onSelect'] = async ( // 关闭之前的message 只保留一条 messageInstance.value?.(); - messageInstance.value = message.success( + messageInstance.value = window.message.success( `${$t('component.tenantToggle.switch')} ${option.companyName}`, ); @@ -111,7 +111,9 @@ async function onDeselect() { await tenantDynamicClear(); // 关闭之前的message 只保留一条 messageInstance.value?.(); - messageInstance.value = message.success($t('component.tenantToggle.reset')); + messageInstance.value = window.message.success( + $t('component.tenantToggle.reset'), + ); lastSelected.value = ''; close(false); diff --git a/apps/web-antd/src/components/upload-old/src/file-upload.vue b/apps/web-antd/src/components/upload-old/src/file-upload.vue index bb6ebb75..af23af57 100644 --- a/apps/web-antd/src/components/upload-old/src/file-upload.vue +++ b/apps/web-antd/src/components/upload-old/src/file-upload.vue @@ -9,7 +9,7 @@ import { ref, toRefs, watch } from 'vue'; import { $t } from '@vben/locales'; import { UploadOutlined } from '@ant-design/icons-vue'; -import { message, Upload } from 'antdv-next'; +import { Upload } from 'antdv-next'; import { isArray, isFunction, isObject, isString } from 'lodash-es'; import { uploadApi } from '#/api'; @@ -129,14 +129,14 @@ const beforeUpload = async (file: File) => { const { maxSize, accept } = props; const isAct = await checkFileType(file, accept); if (!isAct) { - message.error($t('component.upload.acceptUpload', [accept])); + window.message.error($t('component.upload.acceptUpload', [accept])); isActMsg.value = false; // 防止弹出多个错误提示 setTimeout(() => (isActMsg.value = true), 1000); } const isLt = file.size / 1024 / 1024 > maxSize; if (isLt) { - message.error($t('component.upload.maxSizeMultiple', [maxSize])); + window.message.error($t('component.upload.maxSizeMultiple', [maxSize])); isLtMsg.value = false; // 防止弹出多个错误提示 setTimeout(() => (isLtMsg.value = true), 1000); @@ -165,7 +165,7 @@ async function customRequest(info: UploadRequestOption) { * 内部的逻辑由requestClient.upload处理 这里不用判断业务状态码 不符合会自动reject */ info.onSuccess!(res); - message.success($t('component.upload.uploadSuccess')); + window.message.success($t('component.upload.uploadSuccess')); // 获取 const value = getValue(); isInnerOperate.value = true; @@ -218,9 +218,9 @@ function getValue() {
请上传不超过 -
{{ maxSize }}MB
+
{{ maxSize }}MB
的 -
{{ accept.join('/') }}
+
{{ accept.join('/') }}
格式文件
diff --git a/apps/web-antd/src/components/upload-old/src/image-upload.vue b/apps/web-antd/src/components/upload-old/src/image-upload.vue index 93e71617..b6b317a5 100644 --- a/apps/web-antd/src/components/upload-old/src/image-upload.vue +++ b/apps/web-antd/src/components/upload-old/src/image-upload.vue @@ -9,7 +9,7 @@ import { ref, toRefs, watch } from 'vue'; import { $t } from '@vben/locales'; import { PlusOutlined } from '@ant-design/icons-vue'; -import { message, Modal, Upload } from 'antdv-next'; +import { Modal, Upload } from 'antdv-next'; import { isArray, isFunction, isObject, isString, uniqueId } from 'lodash-es'; import { uploadApi } from '#/api'; @@ -30,7 +30,7 @@ const props = withDefaults( api?: UploadApi; disabled?: boolean; helpText?: string; - // eslint-disable-next-line no-use-before-define + listType?: ListType; // 最大数量的文件，Infinity不限制 maxNumber?: number; @@ -189,14 +189,14 @@ const beforeUpload = async (file: File) => { const { maxSize, accept } = props; const isAct = await checkImageFileType(file, accept); if (!isAct) { - message.error($t('component.upload.acceptUpload', [accept])); + window.message.error($t('component.upload.acceptUpload', [accept])); isActMsg.value = false; // 防止弹出多个错误提示 setTimeout(() => (isActMsg.value = true), 1000); } const isLt = file.size / 1024 / 1024 > maxSize; if (isLt) { - message.error($t('component.upload.maxSizeMultiple', [maxSize])); + window.message.error($t('component.upload.maxSizeMultiple', [maxSize])); isLtMsg.value = false; // 防止弹出多个错误提示 setTimeout(() => (isLtMsg.value = true), 1000); @@ -225,7 +225,7 @@ async function customRequest(info: UploadRequestOption) { * 内部的逻辑由requestClient.upload处理 这里不用判断业务状态码 不符合会自动reject */ info.onSuccess!(res); - message.success($t('component.upload.uploadSuccess')); + window.message.success($t('component.upload.uploadSuccess')); // 获取 const value = getValue(); isInnerOperate.value = true; @@ -294,9 +294,9 @@ function getValue() { class="mt-2 flex flex-wrap items-center text-[14px]" > 请上传不超过 -
{{ maxSize }}MB
+
{{ maxSize }}MB
的 -
{{ accept.join('/') }}
+
{{ accept.join('/') }}
格式文件 notifyStore.startListeningMessage()); function handleViewAll() { - message.warning('暂未开放'); + window.message.warning('暂未开放'); } watch( () => ({ diff --git a/apps/web-antd/src/router/access.ts b/apps/web-antd/src/router/access.ts index 380111b9..76fc0bf6 100644 --- a/apps/web-antd/src/router/access.ts +++ b/apps/web-antd/src/router/access.ts @@ -10,7 +10,6 @@ import type { Menu } from '#/api'; import { generateAccessible } from '@vben/access'; import { preferences } from '@vben/preferences'; -import { message } from 'antdv-next'; import { cloneDeep } from 'lodash-es'; import { getAllMenusApi } from '#/api'; @@ -241,8 +240,8 @@ async function generateAccess(options: GenerateMenuAndRoutesOptions) { ...options, fetchMenuListAsync: async () => { // 清除以前的message - message.destroy(); - message.loading({ + window.message.destroy(); + window.message.loading({ content: `${$t('common.loadingMenu')}...`, duration: 1, }); diff --git a/apps/web-antd/src/utils/file/download.ts b/apps/web-antd/src/utils/file/download.ts index f554f6ff..52a0a180 100644 --- a/apps/web-antd/src/utils/file/download.ts +++ b/apps/web-antd/src/utils/file/download.ts @@ -3,7 +3,6 @@ import type { VbenFormProps } from '#/adapter/form'; import { $t } from '@vben/locales'; import { cloneDeep, formatDate } from '@vben/utils'; -import { message } from 'antdv-next'; import { isFunction } from 'lodash-es'; import { dataURLtoBlob, urlToBase64 } from './base64Conver'; @@ -26,7 +25,10 @@ export async function downloadExcel( requestData: any = {}, withRandomName = true, ) { - const hideLoading = message.loading($t('pages.common.downloadLoading'), 0); + const hideLoading = window.message.loading( + $t('pages.common.downloadLoading'), + 0, + ); try { const data = await func(requestData); downloadExcelFile(data, fileName, withRandomName); @@ -114,7 +116,10 @@ export async function commonDownloadExcel( requestData: any = {}, options: DownloadExcelOptions = {}, ) { - const hideLoading = message.loading($t('pages.common.downloadLoading'), 0); + const hideLoading = window.message.loading( + $t('pages.common.downloadLoading'), + 0, + ); try { const { withRandomName = true, fieldMappingTime } = options; // 需要处理时间字段映射 diff --git a/apps/web-antd/src/views/_core/authentication/code-login.vue b/apps/web-antd/src/views/_core/authentication/code-login.vue index 08e06c83..a448e58e 100644 --- a/apps/web-antd/src/views/_core/authentication/code-login.vue +++ b/apps/web-antd/src/views/_core/authentication/code-login.vue @@ -9,7 +9,7 @@ import { AuthenticationCodeLogin, z } from '@vben/common-ui'; import { DEFAULT_TENANT_ID } from '@vben/constants'; import { $t } from '@vben/locales'; -import { Alert, message } from 'antdv-next'; +import { Alert } from 'antdv-next'; import { tenantList } from '#/api'; import { sendSmsCode } from '#/api/core/captcha'; @@ -96,7 +96,7 @@ const formSchema = computed((): VbenFormSchema[] => { } // 调用接口发送 await sendSmsCode(value); - message.success('验证码发送成功'); + window.message.success('验证码发送成功'); }, }; }, diff --git a/apps/web-antd/src/views/_core/profile/password-setting.vue b/apps/web-antd/src/views/_core/profile/password-setting.vue index ce4a96cc..3ac4070a 100644 --- a/apps/web-antd/src/views/_core/profile/password-setting.vue +++ b/apps/web-antd/src/views/_core/profile/password-setting.vue @@ -5,8 +5,6 @@ import { computed, ref } from 'vue'; import { ProfilePasswordSetting, z } from '@vben/common-ui'; -import { message } from 'antdv-next'; - const profilePasswordSettingRef = ref(); const formSchema = computed((): VbenFormSchema[] => { @@ -53,7 +51,7 @@ const formSchema = computed((): VbenFormSchema[] => { }); function handleSubmit() { - message.success('密码修改成功'); + window.message.success('密码修改成功'); }