fix: 🐛 修复 grid-item 组件 custom-text 失效的问题 - #1180
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough本次变更主要对 Changes
Sequence Diagram(s)sequenceDiagram
participant 用户
participant wd-grid-item
participant wd-icon
participant wd-badge
用户->>wd-grid-item: 传递 icon/text slot 或属性
wd-grid-item-->>wd-grid-item: 自动检测 icon/text slot 是否存在
alt 存在 icon slot
wd-grid-item->>wd-badge: 渲染 icon slot
else
wd-grid-item->>wd-badge: 渲染 wd-icon
end
alt 存在 text slot
wd-grid-item->>用户: 渲染 text slot
else
wd-grid-item->>用户: 渲染默认文字内容
end
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
✅ Files skipped from review due to trivial changes (2)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
✨ Finishing Touches🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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 project configuration. |
组件测试摘要 (H5 平台)测试时间: Sat Jul 26 11:03:29 UTC 2025测试结果
|
Deploying wot-design-uni with
|
| Latest commit: |
ddb1fd1
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://e3521bea.wot-design-uni.pages.dev |
| Branch Preview URL: | https://fix-grid-item-custom-text-er.wot-design-uni.pages.dev |
![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 (2)
src/uni_modules/wot-design-uni/components/wd-icon/index.scss (1)
31-38: 建议补充 baseline 对齐属性新增
line-height: 1及在伪元素上加display: inline-block可以解决字体图标高度塌陷的问题，但不同字体图标往往还需vertical-align: -0.15em（或按实际字体微调）来修正基线偏移。
若不做处理，内联图标在同一行文字中的垂直位置可能依旧轻微偏下。text-transform: none; line-height: 1; + vertical-align: -0.15em; /* 经验值，按实际字体可微调 */src/uni_modules/wot-design-uni/components/wd-grid-item/types.ts (1)
39-50: 良好的弃用标注，但可进一步提示 IDE
@deprecated注释已添加 👍。若希望在 TS/IDE 中获得更明显的提示，可将 JSDoc 写在属性键上方而非描述块内，例如：/** @deprecated 已废弃，直接使用默认插槽即可 */ useSlot: makeBooleanProp(false),其余两处同理，可提升 IntelliSense 的警告效果。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
docs/.vitepress/config/version-data.ts(1 hunks)docs/component/grid.md(1 hunks)docs/en-US/component/grid.md(1 hunks)src/uni_modules/wot-design-uni/components/wd-grid-item/types.ts(1 hunks)src/uni_modules/wot-design-uni/components/wd-grid-item/wd-grid-item.vue(1 hunks)src/uni_modules/wot-design-uni/components/wd-icon/index.scss(1 hunks)
🧰 Additional context used
🧠 Learnings (4)
📓 Common learnings
Learnt from: Moonofweisheng
PR: Moonofweisheng/wot-design-uni#733
File: src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue:327-327
Timestamp: 2024-11-24T06:12:44.418Z
Learning: 在 `src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue` 中，由于 `title` 可能会发生变化，涉及到 `title` 的优化不太容易实现，需谨慎处理。
Learnt from: Moonofweisheng
PR: Moonofweisheng/wot-design-uni#737
File: src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue:25-25
Timestamp: 2024-11-26T02:35:53.123Z
Learning: 在 `wd-divider.vue` 文件（路径：`src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue`）中，`props.customStyle` 是字符串类型，用于传递自定义的样式字符串。
Learnt from: Moonofweisheng
PR: Moonofweisheng/wot-design-uni#534
File: docs/component/form.md:44-44
Timestamp: 2024-08-19T13:43:36.518Z
Learning: Moonofweisheng prefers addressing syntax errors such as missing quotation marks in the code.
docs/.vitepress/config/version-data.ts (2)
Learnt from: chen-ziwen
PR: #909
File: docs/component/input-number.md:155-155
Timestamp: 2025-02-20T05:58:07.379Z
Learning: In documentation files, $LOWEST_VERSION$ placeholder is automatically replaced with the actual version number during the release process, and should not be manually updated.
Learnt from: chen-ziwen
PR: #910
File: docs/component/input-number.md:155-155
Timestamp: 2025-02-20T13:33:37.038Z
Learning: Documentation files in wot-design-uni use $LOWEST_VERSION$ as a placeholder that gets automatically replaced with the actual version number during the release process. These placeholders should not be flagged as issues.
src/uni_modules/wot-design-uni/components/wd-grid-item/wd-grid-item.vue (2)
Learnt from: Moonofweisheng
PR: #733
File: src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue:327-327
Timestamp: 2024-11-24T06:12:44.418Z
Learning: 在 src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue 中，由于 title 可能会发生变化，涉及到 title 的优化不太容易实现，需谨慎处理。
Learnt from: Moonofweisheng
PR: #737
File: src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue:25-25
Timestamp: 2024-11-26T02:35:53.123Z
Learning: 在 wd-divider.vue 文件（路径：src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue）中，props.customStyle 是字符串类型，用于传递自定义的样式字符串。
src/uni_modules/wot-design-uni/components/wd-grid-item/types.ts (2)
Learnt from: Moonofweisheng
PR: #733
File: src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue:327-327
Timestamp: 2024-11-24T06:12:44.418Z
Learning: 在 src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue 中，由于 title 可能会发生变化，涉及到 title 的优化不太容易实现，需谨慎处理。
Learnt from: Moonofweisheng
PR: #737
File: src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue:25-25
Timestamp: 2024-11-26T02:35:53.123Z
Learning: 在 wd-divider.vue 文件（路径：src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue）中，props.customStyle 是字符串类型，用于传递自定义的样式字符串。
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: Generate Test Summary
- GitHub Check: Redirect rules - wot-design-uni
- GitHub Check: Header rules - wot-design-uni
- GitHub Check: Pages changed - wot-design-uni
🔇 Additional comments (1)
src/uni_modules/wot-design-uni/components/wd-grid-item/wd-grid-item.vue (1)
8-19: 模板重构看起来很好，修复了 custom-text 失效的问题这次重构简化了模板逻辑，移除了对已废弃的
useSlot、useIconSlot和useTextSlot属性的依赖。主要改进包括：
- 修复了 custom-text 失效的核心问题：第17行现在正确地将
customText类绑定到文本元素上- 提升了组件灵活性：第10行使用
v-bind="customBadgeProps"替代了固定的属性绑定- 统一了插槽处理方式：始终渲染默认插槽，包含图标和文本的命名插槽及其默认内容
这种实现方式既保持了向后兼容性，又简化了内部渲染逻辑，是一个很好的重构方案。
组件测试摘要 (H5 平台)测试时间: Sat Jul 26 14:39:19 UTC 2025测试结果
|
This branch was successfully deployed
1 participant
✅ Closes: #995
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
💡 需求背景和解决方案
修复 grid-item 组件 custom-text 失效的问题
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
文档
样式
重构
其他