fix: 🐛 修复Picker和SelectPicker清空按钮颜色与Input不统一的问题 #700
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough此次更改主要涉及在多个组件的样式和模板结构中引入新的颜色变量 Changes
Possibly related PRs
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: 0
🧹 Outside diff range and nitpick comments (1)
src/uni_modules/wot-design-uni/components/wd-select-picker/wd-select-picker.vue (1)
29-31: 清除按钮的事件处理和样式结构优化通过将清除图标包装在 view 元素中，实现了更好的事件处理和样式控制。这种结构变更与 Input 组件保持一致，有助于统一组件库的交互体验。
建议考虑以下几点来进一步提升组件的可维护性：
- 将清除按钮抽象为独立的子组件，以便在 Input、Picker 和 SelectPicker 等组件间复用
- 在组件文档中补充清除按钮的样式定制说明
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (5)
src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss(1 hunks)src/uni_modules/wot-design-uni/components/wd-picker/index.scss(2 hunks)src/uni_modules/wot-design-uni/components/wd-picker/wd-picker.vue(1 hunks)src/uni_modules/wot-design-uni/components/wd-select-picker/index.scss(2 hunks)src/uni_modules/wot-design-uni/components/wd-select-picker/wd-select-picker.vue(1 hunks)
🔇 Additional comments (6)
src/uni_modules/wot-design-uni/components/wd-select-picker/index.scss (2)
75-78: 错误状态样式优化
将箭头图标的错误状态样式与清除按钮分离，这样可以保持错误状态的视觉反馈，同时不影响清除按钮的颜色一致性。这是一个很好的改进。
141-143: 清除按钮样式统一
使用 $-cell-clear-color 变量统一清除按钮的颜色，这符合组件设计规范，确保了与 Input 组件的视觉一致性。实现方式简洁且符合现有代码结构。
src/uni_modules/wot-design-uni/components/wd-picker/index.scss (2)
89-91: 优化错误状态下的样式处理
将错误状态的颜色仅应用于箭头图标，而不影响清除按钮，这样可以保持清除按钮样式的一致性。这个改动符合设计规范，使组件在错误状态下的视觉反馈更加准确。
182-184: 统一清除按钮的颜色样式
通过使用 $-cell-clear-color 变量来设置清除按钮的颜色，确保了与 Input 组件的清除按钮颜色保持一致。这个改动提升了组件库的视觉一致性。
src/uni_modules/wot-design-uni/components/wd-picker/wd-picker.vue (1)
25-27: 清除按钮结构优化，提升组件一致性
将清除图标包装在 view 元素中的修改是合理的，这样可以：
- 确保与 Input 组件的结构保持一致
- 便于统一管理清除按钮的样式
- 保持了原有的事件处理逻辑
src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss (1)
212-212: 清除按钮颜色变量定义正确！
变量命名规范，颜色值选择合理，并且使用了CSS自定义属性实现主题定制。
运行以下脚本验证变量的使用情况：
✅ Verification successful
清除按钮颜色变量使用正确！
变量 $-cell-clear-color 已在 wd-select-picker 和 wd-picker 组件中正确使用，实现了清除按钮颜色的统一。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：验证 $-cell-clear-color 变量在组件中的使用情况
# 预期：在 Picker 和 SelectPicker 组件的样式文件中都有使用该变量
# 搜索所有使用该变量的文件
rg '\$-cell-clear-color' 'src/uni_modules/wot-design-uni/components'
Length of output: 413
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
#579 #469
💡 需求背景和解决方案
Picker和SelectPicker的清空按钮颜色同输入框的清空按钮，同时改为不受error状态影响。
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
$-cell-clear-color，用于清除按钮的样式。wd-picker和wd-select-picker组件的样式，以支持深色主题和错误状态的视觉反馈。样式
wd-picker和wd-select-picker组件的样式规则，增强了在不同状态下的颜色管理。文档