feat: ✨ MessageBox 新增确认、取消按钮的 ButtonProps 属性 #761
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Caution Review failedThe pull request is closed. Walkthrough本次提交对 Changes
Assessment against linked issues
Possibly related PRs
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (7)
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 (
|
✅ Deploy Preview for wot-design-uni ready!
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
🧹 Outside diff range and nitpick comments (11)
src/uni_modules/wot-design-uni/components/wd-message-box/wd-message-box.vue (4)
83-99: 建议：在初始化messageState时为所有属性提供默认值在初始化
messageState时，直接为每个属性赋值，可能会导致某些属性为未定义。建议为每个属性提供明确的默认值，确保状态的一致性，避免在组件使用过程中出现未定义的错误。
104-113: 优化customConfirmProps的合并逻辑在计算属性
customConfirmProps中，使用了deepAssign和omitBy进行属性合并。为了简化逻辑，建议直接使用解构赋值并提供默认值，以提高代码的可读性和维护性。const customConfirmProps = computed(() => { - const buttonProps: Partial<ButtonProps> = deepAssign( - { - block: true - }, - isDef(messageState.confirmButtonProps) ? omitBy(messageState.confirmButtonProps, isUndefined) : {} - ) + const buttonProps: Partial<ButtonProps> = { + block: true, + ...messageState.confirmButtonProps + } buttonProps.customClass = `${buttonProps.customClass || ''} wd-message-box__actions-btn` return buttonProps })
118-128: 优化customCancelProps的合并逻辑与
customConfirmProps类似，customCancelProps中的合并逻辑可以简化。建议使用解构赋值方式，提高代码简洁性。const customCancelProps = computed(() => { - const buttonProps: Partial<ButtonProps> = deepAssign( - { - block: true, - type: 'info' - }, - isDef(messageState.cancelButtonProps) ? omitBy(messageState.cancelButtonProps, isUndefined) : {} - ) + const buttonProps: Partial<ButtonProps> = { + block: true, + type: 'info', + ...messageState.cancelButtonProps + } buttonProps.customClass = `${buttonProps.customClass || ''} wd-message-box__actions-btn` return buttonProps })
223-235: 建议：在validate方法中检查输入值的类型在验证输入值时，直接使用
String(messageState.inputValue)，如果inputValue为null或undefined，可能会导致意外结果。建议在转换前检查inputValue是否已定义，确保验证逻辑的可靠性。if (messageState.inputPattern && messageState.inputValue !== undefined && !messageState.inputPattern.test(String(messageState.inputValue))) { messageState.showErr = true return false }src/uni_modules/wot-design-uni/components/wd-message-box/types.ts (2)
103-106: 建议更新类型定义的文档注释在新添加的
MessageOptionsWithCallBack类型中，缺少对新属性的文档注释。为了提高代码的可维护性和可读性，建议为新属性添加注释。export type MessageOptionsWithCallBack = MessageOptions & { /** * 控制消息框的显示与隐藏 */ show?: boolean /** * 成功回调函数 */ success?: (res: MessageResult) => void /** * 失败回调函数 */ fail?: (res: MessageResult) => void }
72-72: 更新inputValidate类型注释由于
inputValidate不再接受null，且只能为函数或未定义，建议更新注释以反映这一变化。src/pages/messageBox/Index.vue (2)
110-129: 优化withButtonProps方法的错误处理在
withButtonProps方法中，then中没有处理逻辑，而在catch中仅打印错误信息。建议在then和catch中添加相应的用户反馈，如提示操作成功或取消。function withButtonProps() { message .confirm({ msg: '自定义按钮样式', title: '提示', cancelButtonProps: { type: 'error', customClass: 'custom-shadow' }, confirmButtonProps: { type: 'success', customClass: 'custom-shadow' } }) - .then(() => {}) + .then(() => { + toast.success('操作已确认') + }) .catch((error) => { console.log(error) + toast.info('操作已取消') }) }
148-152: 确认自定义样式的影响范围新增的
.custom-shadow样式可能会影响全局的样式，建议使用更具针对性的选择器，或限制样式作用域，防止影响其他组件。:deep() { .custom-shadow { box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%); } } +/* 或者使用 scoped 样式 */src/uni_modules/wot-design-uni/components/wd-input/types.ts (1)
11-11: 代码变更看起来不错，建议考虑未来扩展性类型定义清晰且符合 TypeScript 最佳实践。不过建议考虑以下建议：
- 考虑在
InputSize中预留其他可能的尺寸选项，如 'small'、'medium' 等- 为新增的类型添加 JSDoc 注释，说明各个尺寸的使用场景
Also applies to: 143-143
docs/component/message-box.md (2)
126-129: 建议完善插槽示例代码示例代码中使用了
v-model绑定rate，但没有展示完整的响应式数据定义。建议补充说明：<wd-message-box selector="wd-message-box-slot"> <wd-rate custom-class="custom-rate-class" v-model="rate" /> </wd-message-box> + +<!-- 在 script 中添加： --> +const rate = ref(1)
253-271: 属性表格格式需要调整表格中的一些单元格存在多余的空格，建议统一格式：
- 删除参数列中的多余空格
- 统一说明列的中文标点符号
- 建议为新增的按钮属性添加示例值
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (7)
docs/component/message-box.md(4 hunks)src/pages/messageBox/Index.vue(3 hunks)src/uni_modules/wot-design-uni/components/wd-input/types.ts(3 hunks)src/uni_modules/wot-design-uni/components/wd-message-box/index.scss(1 hunks)src/uni_modules/wot-design-uni/components/wd-message-box/index.ts(3 hunks)src/uni_modules/wot-design-uni/components/wd-message-box/types.ts(4 hunks)src/uni_modules/wot-design-uni/components/wd-message-box/wd-message-box.vue(7 hunks)
🔇 Additional comments (1)
src/uni_modules/wot-design-uni/components/wd-message-box/index.scss (1)
91-95: 确认新样式对按钮布局的影响
新增的样式可能会影响其他使用 wd-message-box 组件的布局，建议在测试环境下确认新样式的兼容性，确保不会破坏现有界面。
请运行以下脚本检查受影响的文件：
✅ Verification successful
Let me gather more information about the message box component and its usage.
让我检查一下按钮样式的具体实现和使用情况。
新增样式对按钮布局影响可控
经过验证，新增的按钮间距样式是安全的：
- 样式仅影响 MessageBox 组件内部的按钮布局，通过
edeep(actions-btn)选择器严格限定作用范围 - 组件模板中的按钮布局结构清晰，新样式与现有布局逻辑（
wd-message-box__flex和wd-message-box__block）配合得当 - 示例代码展示了多种使用场景，包括单按钮和双按钮情况，新样式能够适应这些场景
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：查找所有使用 wd-message-box 的文件，验证按钮样式的影响。
# 测试：搜索 wd-message-box 引用。期望：列出所有相关文件以供手动检查。
fd --type f --extension vue 'wd-message-box'
Length of output: 120
Script:
#!/bin/bash
# 搜索引用 wd-message-box 组件的代码
rg -l "wd-message-box"
# 检查组件的模板代码，了解按钮布局实现
cat src/uni_modules/wot-design-uni/components/wd-message-box/wd-message-box.vue
Length of output: 8989
Script:
#!/bin/bash
# 检查按钮布局相关的样式实现
cat src/uni_modules/wot-design-uni/components/wd-message-box/index.scss
# 查找示例用法
cat src/pages/messageBox/Index.vue
Length of output: 5852
| if (messageState.beforeConfirm) { | ||
| messageState.beforeConfirm({ | ||
| resolve: (isPass) => { | ||
| if (isPass) { | ||
| handleConfirm({ | ||
| action: action, | ||
| value: inputValue.value | ||
| value: messageState.inputValue | ||
| }) | ||
| } | ||
| } | ||
| }) | ||
| } else { | ||
| handleConfirm({ | ||
| action: action, | ||
| value: inputValue.value | ||
| value: messageState.inputValue | ||
| }) | ||
| } |
There was a problem hiding this comment.
确认 beforeConfirm 回调的错误处理
在 toggleModal 方法中，当存在 beforeConfirm 时，需要确保在 resolve(false) 的情况下正确处理拒绝逻辑。当前代码仅在 isPass 为 true 时执行 handleConfirm，建议在 isPass 为 false 时调用 handleCancel，以确保流程的完整性。
if (messageState.beforeConfirm) {
messageState.beforeConfirm({
resolve: (isPass) => {
if (isPass) {
handleConfirm({
action: action,
value: messageState.inputValue
})
+ } else {
+ handleCancel({
+ action: 'cancel'
+ })
}
}
})
}📝 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.beforeConfirm) { | |
| messageState.beforeConfirm({ | |
| resolve: (isPass) => { | |
| if (isPass) { | |
| handleConfirm({ | |
| action: action, | |
| value: inputValue.value | |
| value: messageState.inputValue | |
| }) | |
| } | |
| } | |
| }) | |
| } else { | |
| handleConfirm({ | |
| action: action, | |
| value: inputValue.value | |
| value: messageState.inputValue | |
| }) | |
| } | |
| if (messageState.beforeConfirm) { | |
| messageState.beforeConfirm({ | |
| resolve: (isPass) => { | |
| if (isPass) { | |
| handleConfirm({ | |
| action: action, | |
| value: messageState.inputValue | |
| }) | |
| } else { | |
| handleCancel({ | |
| action: 'cancel' | |
| }) | |
| } | |
| } | |
| }) | |
| } else { | |
| handleConfirm({ | |
| action: action, | |
| value: messageState.inputValue | |
| }) | |
| } |
There was a problem hiding this comment.
isPass为false时，并非取消，而是阻止了执行confirm
There was a problem hiding this comment.
@Moonofweisheng，明白您的意思，感谢您的解释。
✏️ Learnings added
Learnt from: Moonofweisheng
PR: Moonofweisheng/wot-design-uni#761
File: src/uni_modules/wot-design-uni/components/wd-message-box/wd-message-box.vue:166-182
Timestamp: 2024-12-05T15:55:34.823Z
Learning: 在文件 `wd-message-box.vue` 的 `toggleModal` 方法中，当 `isPass` 为 `false` 时，应阻止执行 `confirm`，但不触发 `cancel` 操作。
Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.
| ## 自定义操作按钮<el-tag text style="vertical-align: middle;margin-left:8px;" effect="plain">$LOWEST_VERSION$</el-tag> | ||
|
|
||
| 可以通过按钮属性 `cancel-button-props` 和 `confirm-button-props` 自定义操作按钮的样式，具体参考 [Button Attributes](/component/button.html#attributes)。 | ||
|
|
||
| ```html | ||
| <wd-message-box></wd-message-box> | ||
| <wd-button @click="beforeConfirm">beforeConfirm</wd-button> | ||
| ``` | ||
|
|
||
| ```typescript | ||
| function withButtonProps() { | ||
| message | ||
| .confirm({ | ||
| msg: '自定义按钮样式', | ||
| title: '提示', | ||
| cancelButtonProps: { | ||
| type: 'error', | ||
| customClass: 'custom-shadow' | ||
| }, | ||
| confirmButtonProps: { | ||
| type: 'success', | ||
| customClass: 'custom-shadow' | ||
| } | ||
| }) | ||
| .then(() => {}) | ||
| .catch((error) => { | ||
| console.log(error) | ||
| }) | ||
| } | ||
| ``` | ||
|
|
||
| ```css | ||
| :deep() { | ||
| .custom-shadow { | ||
| box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%); | ||
| } | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
自定义按钮部分的文档建议优化
- 示例代码中的方法名与实际调用不一致（
beforeConfirmvswithButtonProps） - 建议添加效果截图，帮助用户直观理解样式变化
- CSS 示例中的
:deep()选择器缺少目标选择器
建议修改如下：
-<wd-button @click="beforeConfirm">beforeConfirm</wd-button>
+<wd-button @click="withButtonProps">自定义按钮</wd-button>
:deep() {
+.wd-message-box {
.custom-shadow {
box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%);
}
+}
}Committable suggestion skipped: line range outside the PR's diff.
Moonofweisheng
force-pushed
the
feature/message-button-props
branch
from
fd09fcd to
9572871
Compare
Deploying wot-design-uni with
|
| Latest commit: |
9572871
|
| Status: | ⚡️ Build in progress... |
✅ Closes: #740
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
#740
💡 需求背景和解决方案
为
MessageBox添加cancel-button-props和confirm-button-props，用于自定义操作按钮样式。☑️ 请求合并前的自查清单
Summary by CodeRabbit
新特性
MessageBox组件文档，新增beforeConfirm函数，支持预确认逻辑。cancel-button-props和confirm-button-props属性，允许自定义按钮样式。Index.vue中添加了新的演示块，支持自定义按钮属性的确认对话框。InputSize类型，增强输入框大小的类型安全。文档
样式
.zoomIn动画相关的样式。