feat: ✨ 修复 Switch 组件增加可展示状态文字 (#798) #817
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
详细介绍概述该拉取请求为 变更
建议的审阅者
诗歌
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!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: 0
🧹 Nitpick comments (6)
src/uni_modules/wot-design-uni/components/wd-switch/wd-switch.vue (1)
3-5: 建议增加无障碍访问支持文字描述的实现逻辑正确，但建议添加
aria-label属性以提升无障碍访问支持。- <view class="wd-switch__inner" v-if="innerText"> + <view class="wd-switch__inner" v-if="innerText" :aria-label="innerText">src/pages/switch/Index.vue (1)
74-76: 建议改进事件处理函数
handleChange6函数可以更具体地处理值的类型，而不是使用any。-function handleChange6({ value }: any) { +function handleChange6({ value }: { value: boolean }) { console.log(value) }src/uni_modules/wot-design-uni/components/wd-switch/index.scss (2)
47-60: 建议将魔法数字提取为变量内部文本样式的实现合理，但建议将一些固定值提取为 SCSS 变量以提高可维护性。
@include e(inner) { color: #fff; - font-size: calc($-switch-circle-size/2.5); + $-switch-text-size-ratio: 2.5; + font-size: calc($-switch-circle-size/$-switch-text-size-ratio); width: 100%; display: flex; align-items: center; justify-content: center; - padding: 0 4px 0 calc($-switch-circle-size * 2 + 8px); + $-switch-text-padding: 4px; + $-switch-text-offset: 8px; + padding: 0 $-switch-text-padding 0 calc($-switch-circle-size * 2 + $-switch-text-offset); user-select: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: all 0.3s; }
69-71: 建议复用内边距变量选中状态下的内边距调整也应该使用相同的变量。
.wd-switch__inner{ - padding: 0 calc($-switch-circle-size * 2 + 8px) 0 4px; + padding: 0 calc($-switch-circle-size * 2 + $-switch-text-offset) 0 $-switch-text-padding; }docs/component/switch.md (2)
7-8: 移除非正式注释文件头部包含 "记得注释" 这样的非正式提醒，建议在正式文档中移除此类注释。
- * 记得注释
60-64: 建议完善文字描述示例当前示例可以更加完整，建议：
- 展示带有
v-model的完整用例- 添加更多常见场景的示例，如配合
disabled状态的文字展示建议修改示例如下：
-<wd-switch active-text="喜欢摸鱼" inactive-text="讨厌摸鱼" /> +<wd-switch v-model="checked" active-text="喜欢摸鱼" inactive-text="讨厌摸鱼" /> + +<!-- 禁用状态下的文字展示 --> +<wd-switch v-model="checked" active-text="开启" inactive-text="关闭" disabled />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
docs/component/switch.md(3 hunks)src/pages/switch/Index.vue(3 hunks)src/uni_modules/wot-design-uni/components/wd-switch/index.scss(4 hunks)src/uni_modules/wot-design-uni/components/wd-switch/types.ts(2 hunks)src/uni_modules/wot-design-uni/components/wd-switch/wd-switch.vue(2 hunks)
🔇 Additional comments (5)
src/uni_modules/wot-design-uni/components/wd-switch/types.ts (1)
55-62: 类型定义完善且清晰！新增的
activeText和inactiveText属性定义合理，并且包含了清晰的 JSDoc 注释说明。src/uni_modules/wot-design-uni/components/wd-switch/wd-switch.vue (1)
51-53: 计算属性实现简洁有效！
innerText计算属性的实现逻辑清晰，能够根据开关状态正确显示对应文本。src/pages/switch/Index.vue (1)
27-29: 示例实现清晰！文字描述功能的演示示例实现恰当，展示了组件的新特性。
src/uni_modules/wot-design-uni/components/wd-switch/index.scss (1)
5-8: 布局结构优化合理！使用
inline-flex和align-items: center的布局方案合理，能够更好地控制内部元素的对齐。docs/component/switch.md (1)
78-79: 补充属性说明的细节建议为新增的文字属性补充以下信息：
- 文字长度是否有限制
- 文字样式是否可自定义
- 是否支持国际化配置
请确认以下几点：
- 文字是否有长度限制
- 是否支持自定义样式类
- 是否需要补充国际化相关说明
✅ Verification successful
文字属性实现说明
经过源码验证，可以明确以下几点：
- 文字长度没有特殊限制，可根据实际需求设置
- 支持自定义样式，可通过
customClass和customStyle属性进行样式定制- 文字内容支持直接传入字符串，可配合应用层的国际化方案使用
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # 检查组件源码中是否有文字长度限制或样式相关代码 ast-grep --pattern 'activeText.length' ast-grep --pattern 'inactiveText.length'Length of output: 79
Script:
#!/bin/bash # 查找 Switch 组件的源文件 fd -e vue -e tsx -e ts -e js switch # 搜索文本属性的使用方式 ast-grep --pattern 'props: { $$$ activeText: $_, $$$ }' # 搜索样式相关代码 rg -i "class.*active.*text" -A 2Length of output: 1067
Script:
#!/bin/bash # 查看开关组件的源代码 cat src/uni_modules/wot-design-uni/components/wd-switch/wd-switch.vue # 检查国际化相关代码 rg -i "i18n.*active.*text"Length of output: 2643
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
文档更新
active-text和inactive-text两个新属性的说明样式调整