feat: ✨ MessageBox 确认按钮增加 confirmButtonLoading 属性
#865
Conversation
|
Warning Rate limit exceeded@China-xiaoFang has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 23 minutes and 7 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (2)
概述演练此次更改为消息框（MessageBox）组件引入了一个新的加载按钮状态功能。通过添加 变更
建议相关的 PR
建议的审阅者
诗歌
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
✅ Deploy Preview for wot-design-uni ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (4)
src/uni_modules/wot-design-uni/components/wd-message-box/types.ts (1)
101-104: 建议完善属性文档说明
confirmButtonLoading属性的注释应该包含：
- 使用场景说明
- 与
beforeConfirm的关联说明- 对话框行为变化说明
建议更新注释为：
/** - * 确认按钮加载 + * 确认按钮加载状态 + * @description 当设置为 true 时： + * 1. 确认按钮将显示加载状态 + * 2. 取消按钮将被禁用 + * 3. 点击遮罩层将不会关闭对话框 + * @example + * // 在 API 请求期间显示加载状态 + * beforeConfirm: ({ resolve }) => { + * messageBox.show({ confirmButtonLoading: true }) + * apiRequest().finally(() => { + * messageBox.show({ confirmButtonLoading: false }) + * resolve(true) + * }) + * } */src/uni_modules/wot-design-uni/locale/lang/pt-PT.ts (1)
70-71: 葡萄牙语翻译和语法正确！ ✨翻译准确且符合葡萄牙语的语言习惯。添加的逗号和新的 loading 文本格式正确。
建议：为保持一致性，可以考虑在其他使用 "Carregando..." 的地方（如 loadmore.loading）也使用相同的省略号样式。
src/uni_modules/wot-design-uni/components/wd-message-box/wd-message-box.vue (1)
102-119: 建议添加 TypeScript 接口定义当前的状态对象使用了 JSDoc 注释来描述属性，建议创建专门的 TypeScript 接口来增强类型安全性。
建议添加以下接口定义：
interface MessageBoxState { /** 确认按钮加载 */ confirmButtonLoading: boolean /** 是否展示取消按钮 */ showCancelButton: boolean /** 是否支持点击蒙层关闭 */ closeOnClickModal: boolean /** 确定按钮文案 */ confirmButtonText: string }docs/component/message-box.md (1)
192-232: 建议补充更多使用场景示例当前文档已经很好地介绍了基本用法，但建议添加更多实际应用场景的示例，如：
- API 请求失败时的处理
- 多个连续确认操作的处理
- 自定义加载提示文案的使用方法
建议在文档中添加以下示例：
// API 请求失败的处理示例 function handleApiError() { message.confirm({ msg: '是否提交数据？', title: '提示', confirmButtonLoading: true, beforeConfirm: async ({ resolve }) => { try { toast.loading('提交中...') await apiRequest() // 可能失败的 API 调用 toast.success('提交成功') resolve(true) } catch (error) { toast.error('提交失败') resolve(false) } } }) }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (19)
docs/component/message-box.md(2 hunks)src/pages/messageBox/Index.vue(2 hunks)src/uni_modules/wot-design-uni/components/wd-message-box/types.ts(2 hunks)src/uni_modules/wot-design-uni/components/wd-message-box/wd-message-box.vue(3 hunks)src/uni_modules/wot-design-uni/locale/lang/ar-SA.ts(1 hunks)src/uni_modules/wot-design-uni/locale/lang/de-DE.ts(1 hunks)src/uni_modules/wot-design-uni/locale/lang/en-US.ts(1 hunks)src/uni_modules/wot-design-uni/locale/lang/es-ES.ts(1 hunks)src/uni_modules/wot-design-uni/locale/lang/fr-FR.ts(1 hunks)src/uni_modules/wot-design-uni/locale/lang/ja-JP.ts(1 hunks)src/uni_modules/wot-design-uni/locale/lang/ko-KR.ts(1 hunks)src/uni_modules/wot-design-uni/locale/lang/pt-PT.ts(1 hunks)src/uni_modules/wot-design-uni/locale/lang/ru-RU.ts(1 hunks)src/uni_modules/wot-design-uni/locale/lang/th-TH.ts(1 hunks)src/uni_modules/wot-design-uni/locale/lang/tr-TR.ts(1 hunks)src/uni_modules/wot-design-uni/locale/lang/vi-VN.ts(1 hunks)src/uni_modules/wot-design-uni/locale/lang/zh-CN.ts(1 hunks)src/uni_modules/wot-design-uni/locale/lang/zh-HK.ts(1 hunks)src/uni_modules/wot-design-uni/locale/lang/zh-TW.ts(1 hunks)
🔇 Additional comments (17)
src/uni_modules/wot-design-uni/locale/lang/zh-HK.ts (1)
39-39: 翻译和格式正确！传统繁体中文（香港）的翻译准确，格式规范。
src/uni_modules/wot-design-uni/locale/lang/zh-TW.ts (1)
39-39: 翻译和格式正确！传统繁体中文（台湾）的翻译准确，与香港繁体中文保持一致，符合语言规范。
src/uni_modules/wot-design-uni/locale/lang/zh-CN.ts (1)
70-71: 翻译和格式正确！简体中文的翻译准确，格式规范，与其他语言版本保持一致性。
src/uni_modules/wot-design-uni/locale/lang/ko-KR.ts (1)
70-71: 建议验证韩文翻译的准确性韩文翻译格式正确，但建议由韩语专家确认"로딩 중..."的用词是否最准确。
src/uni_modules/wot-design-uni/locale/lang/ja-JP.ts (1)
70-71: 翻译和格式正确日语翻译准确，格式保持一致。
src/uni_modules/wot-design-uni/locale/lang/vi-VN.ts (1)
46-52: 翻译和格式正确越南语翻译准确，格式保持一致。
src/uni_modules/wot-design-uni/locale/lang/en-US.ts (1)
74-75: 翻译和格式正确英语翻译准确，格式保持一致。
src/uni_modules/wot-design-uni/locale/lang/th-TH.ts (1)
74-75: 代码变更正确！泰语翻译正确添加，符合语言规范。
src/uni_modules/wot-design-uni/locale/lang/ar-SA.ts (1)
74-75: 代码变更正确！阿拉伯语翻译正确添加，符合语言规范。
src/uni_modules/wot-design-uni/locale/lang/tr-TR.ts (1)
70-71: 代码变更正确！土耳其语翻译正确添加，符合语言规范。
src/uni_modules/wot-design-uni/locale/lang/ru-RU.ts (1)
70-71: 代码变更正确！建议添加验证。俄语翻译正确添加，符合语言规范。建议验证所有语言文件是否都已添加相应的翻译。
运行以下脚本以验证所有语言文件是否都包含 loading 翻译：
✅ Verification successful
所有语言文件的 loading 翻译已完整验证！
经过检查，所有语言文件（包括 zh-TW、ko-KR、pt-BR、th-TH、zh-CN、ru-RU、tr-TR、vi-VN、en-US、fr-FR、de-DE、ja-JP、es-ES、ar-SA）都已正确包含 messageBox.loading 的翻译，结构完整且格式统一。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # 检查所有语言文件中是否都包含 messageBox.loading 翻译 fd -e ts -x grep -l "messageBox" {} | xargs grep -L "loading:"Length of output: 202
Script:
#!/bin/bash # List all language files and their content fd . "src/uni_modules/wot-design-uni/locale/lang" -e ts -x cat {}Length of output: 42849
src/uni_modules/wot-design-uni/locale/lang/es-ES.ts (1)
70-71: 西班牙语翻译和语法正确！ ✨翻译准确且符合西班牙语的语言习惯。添加的逗号和新的 loading 文本格式正确。
src/uni_modules/wot-design-uni/locale/lang/de-DE.ts (1)
74-75: 德语翻译和语法正确！ ✨翻译准确且符合德语的语言习惯。添加的逗号和新的 loading 文本格式正确。
src/uni_modules/wot-design-uni/locale/lang/fr-FR.ts (1)
70-71: 法语翻译和语法正确！ ✨翻译准确且符合法语的语言习惯。添加的逗号和新的 loading 文本格式正确。
src/pages/messageBox/Index.vue (1)
36-38: 示例代码结构清晰！新增的演示区块标题准确描述了功能，并保持了与其他示例一致的代码结构。
src/uni_modules/wot-design-uni/components/wd-message-box/wd-message-box.vue (1)
98-100: 属性定义合理！
confirmButtonLoading属性的默认值设置正确，位置放置恰当。docs/component/message-box.md (1)
295-314: 参数文档完整规范！新增的
confirmButtonLoading参数文档包含了所有必要信息：
- 参数说明清晰
- 类型、默认值准确
- 版本信息完整
| @@ -14,7 +14,7 @@ import { type InputSize, type InputType } from '../wd-input/types' | |||
| export type MessageType = 'alert' | 'confirm' | 'prompt' | |||
|
|
|||
| export type MessageBeforeConfirmOption = { | |||
| resolve: (isPass: boolean) => void | |||
| resolve: (isPass?: boolean) => void | |||
There was a problem hiding this comment.
注意：这是一个破坏性更改
将 isPass 参数设为可选可能会影响现有代码。建议：
- 在更新日志中标注这是一个破坏性更改
- 确保所有使用
beforeConfirm的代码都已经过测试
src/pages/messageBox/Index.vue
Outdated
| function beforeConfirmLoading() { | ||
| message | ||
| .confirm({ | ||
| msg: '是否删除', | ||
| title: '提示', | ||
| confirmButtonLoading: true, | ||
| beforeConfirm: ({ resolve }) => { | ||
| try { | ||
| toast.loading('删除中...') | ||
| setTimeout(() => { | ||
| toast.close() | ||
| resolve(true) | ||
| toast.success('删除成功') | ||
| }, 3000) | ||
| } finally { | ||
| resolve() | ||
| } | ||
| } | ||
| }) | ||
| .then(() => {}) | ||
| .catch((error) => { | ||
| console.log(error) | ||
| }) | ||
| } |
There was a problem hiding this comment.
修复 resolve() 被多次调用的问题
当前实现中，resolve() 在两个地方被调用：
- finally 块中无条件调用
- setTimeout 回调中在
toast.success()之前调用
这可能导致确认对话框在操作完成之前就被关闭。
建议修改实现方式：
function beforeConfirmLoading() {
message
.confirm({
msg: '是否删除',
title: '提示',
confirmButtonLoading: true,
beforeConfirm: ({ resolve }) => {
- try {
toast.loading('删除中...')
setTimeout(() => {
toast.close()
resolve(true)
toast.success('删除成功')
- }, 3000)
- } finally {
- resolve()
- }
+ }, 3000)
}
})
.then(() => {})
.catch((error) => {
console.log(error)
})
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| function beforeConfirmLoading() { | |
| message | |
| .confirm({ | |
| msg: '是否删除', | |
| title: '提示', | |
| confirmButtonLoading: true, | |
| beforeConfirm: ({ resolve }) => { | |
| try { | |
| toast.loading('删除中...') | |
| setTimeout(() => { | |
| toast.close() | |
| resolve(true) | |
| toast.success('删除成功') | |
| }, 3000) | |
| } finally { | |
| resolve() | |
| } | |
| } | |
| }) | |
| .then(() => {}) | |
| .catch((error) => { | |
| console.log(error) | |
| }) | |
| } | |
| function beforeConfirmLoading() { | |
| message | |
| .confirm({ | |
| msg: '是否删除', | |
| title: '提示', | |
| confirmButtonLoading: true, | |
| beforeConfirm: ({ resolve }) => { | |
| toast.loading('删除中...') | |
| setTimeout(() => { | |
| toast.close() | |
| resolve(true) | |
| toast.success('删除成功') | |
| }, 3000) | |
| } | |
| }) | |
| .then(() => {}) | |
| .catch((error) => { | |
| console.log(error) | |
| }) | |
| } |
| if (messageState.confirmButtonLoading) { | ||
| state.confirmButtonText = messageState.confirmButtonText | ||
| state.showCancelButton = messageState.showCancelButton | ||
| state.closeOnClickModal = messageState.closeOnClickModal | ||
| messageState.showCancelButton = false | ||
| messageState.confirmButtonText = translate('loading') | ||
| state.confirmButtonLoading = true | ||
| } | ||
| messageState.beforeConfirm({ | ||
| resolve: (isPass) => { | ||
| if (isPass) { | ||
| if (messageState.confirmButtonLoading) { | ||
| state.confirmButtonLoading = false | ||
| messageState.showCancelButton = state.showCancelButton | ||
| messageState.confirmButtonText = state.confirmButtonText | ||
| messageState.closeOnClickModal = state.closeOnClickModal | ||
| } | ||
| if (isPass === null || isPass === undefined || isPass) { |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议增强错误处理机制
当前实现在处理加载状态时没有考虑异常情况，建议添加错误处理以确保状态能够正确恢复。
建议修改实现方式：
if (messageState.confirmButtonLoading) {
state.confirmButtonText = messageState.confirmButtonText
state.showCancelButton = messageState.showCancelButton
state.closeOnClickModal = messageState.closeOnClickModal
messageState.showCancelButton = false
messageState.confirmButtonText = translate('loading')
state.confirmButtonLoading = true
}
messageState.beforeConfirm({
resolve: (isPass) => {
+ try {
if (messageState.confirmButtonLoading) {
state.confirmButtonLoading = false
messageState.showCancelButton = state.showCancelButton
messageState.confirmButtonText = state.confirmButtonText
messageState.closeOnClickModal = state.closeOnClickModal
}
if (isPass === null || isPass === undefined || isPass) {
handleConfirm({
action: action,
value: messageState.inputValue
})
}
+ } catch (error) {
+ // 确保在发生错误时恢复原始状态
+ if (messageState.confirmButtonLoading) {
+ state.confirmButtonLoading = false
+ messageState.showCancelButton = state.showCancelButton
+ messageState.confirmButtonText = state.confirmButtonText
+ messageState.closeOnClickModal = state.closeOnClickModal
+ }
+ throw error
+ }
}
})📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| if (messageState.confirmButtonLoading) { | |
| state.confirmButtonText = messageState.confirmButtonText | |
| state.showCancelButton = messageState.showCancelButton | |
| state.closeOnClickModal = messageState.closeOnClickModal | |
| messageState.showCancelButton = false | |
| messageState.confirmButtonText = translate('loading') | |
| state.confirmButtonLoading = true | |
| } | |
| messageState.beforeConfirm({ | |
| resolve: (isPass) => { | |
| if (isPass) { | |
| if (messageState.confirmButtonLoading) { | |
| state.confirmButtonLoading = false | |
| messageState.showCancelButton = state.showCancelButton | |
| messageState.confirmButtonText = state.confirmButtonText | |
| messageState.closeOnClickModal = state.closeOnClickModal | |
| } | |
| if (isPass === null || isPass === undefined || isPass) { | |
| if (messageState.confirmButtonLoading) { | |
| state.confirmButtonText = messageState.confirmButtonText | |
| state.showCancelButton = messageState.showCancelButton | |
| state.closeOnClickModal = messageState.closeOnClickModal | |
| messageState.showCancelButton = false | |
| messageState.confirmButtonText = translate('loading') | |
| state.confirmButtonLoading = true | |
| } | |
| messageState.beforeConfirm({ | |
| resolve: (isPass) => { | |
| try { | |
| if (messageState.confirmButtonLoading) { | |
| state.confirmButtonLoading = false | |
| messageState.showCancelButton = state.showCancelButton | |
| messageState.confirmButtonText = state.confirmButtonText | |
| messageState.closeOnClickModal = state.closeOnClickModal | |
| } | |
| if (isPass === null || isPass === undefined || isPass) { | |
| handleConfirm({ | |
| action: action, | |
| value: messageState.inputValue | |
| }) | |
| } | |
| } catch (error) { | |
| // 确保在发生错误时恢复原始状态 | |
| if (messageState.confirmButtonLoading) { | |
| state.confirmButtonLoading = false | |
| messageState.showCancelButton = state.showCancelButton | |
| messageState.confirmButtonText = state.confirmButtonText | |
| messageState.closeOnClickModal = state.closeOnClickModal | |
| } | |
| throw error | |
| } | |
| } | |
| }) |
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
无。
💡 需求背景和解决方案
当我们使用
MessageBox组件做一些确认提示的时候，因要请求API接口，如果接口未配置 Loading，并且接口延迟比较高，会导致用户立即点击取消按钮关闭弹窗，会使后续流程或逻辑错乱。所以
MessageBox组件增加confirmButtonLoading属性，当设置为true的时候，会自动隐藏取消按钮，并且禁止点击蒙层关闭。☑️ 请求合并前的自查清单
Summary by CodeRabbit
新特性
本地化
文档
confirmButtonLoading属性的使用方法版本