fix: 将calendar中icon的样式内置到scss#3448
Conversation
github-actions
Bot
added
the
action:review
工作总结本次提交对日历卡片组件的图标样式进行了重构，将内联尺寸属性迁移至 CSS 类管理，使用 变更详情
代码审查工作量估计🎯 2 (简单) | ⏱️ ~10 分钟 可能相关的 PR
建议的审查者
兔子的诗
✨ Finishing Touches🧪 Generate unit tests (beta)
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. Review rate limit: 7/8 reviews remaining, refill in 7 minutes and 30 seconds.Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/packages/calendarcard/calendarcard.scss`:
- Around line 33-37: 当前 RTL 规则只覆盖 svg/.nut-icon-*，但新增的样式类 nut-calendarcard-icon
及其 Image 子元素未被包含，导致在 RTL 环境下箭头图片不翻转；请在 RTL CSS 规则中将 .nut-calendarcard-icon（及其
img 或 Taro Image 的选择器）加入现有的 RTL 翻转选择器（与 .nut-icon-* 一并），确保在 [dir="rtl"] 或 .rtl
父选择器下对该类使用相同的翻转 transform（例如水平翻转/旋转）以修复左右含义错误，并保持与现有 svg 翻转规则一致。
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: d421e7ee-a11d-4ef1-9536-bc67bbf157cb
📒 Files selected for processing (2)
src/packages/calendarcard/calendarcard.scsssrc/packages/calendarcard/icon.taro.tsx
| &-icon { | ||
| width: 18px; | ||
| height: 18px; | ||
| display: block; | ||
| } |
There was a problem hiding this comment.
补齐 RTL 下图片箭头的翻转规则
Line 33 新增了 nut-calendarcard-icon，但 RTL 旋转规则仍只覆盖 svg/.nut-icon-*。Taro 的 Image 箭头在 RTL 下会保持 LTR 方向，导致左右含义显示错误。
建议修改
[dir='rtl'] .nut-calendarcard,
.nut-rtl .nut-calendarcard {
&-header {
&-left,
&-right {
.left {
margin-left: 0;
margin-right: 8px;
}
.right {
margin-right: 0;
margin-left: 8px;
}
.nut-icon-ArrowLeft,
.nut-icon-ArrowRight,
+ .nut-calendarcard-icon,
svg {
transform: rotate(180deg);
}
}
}📝 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.
| &-icon { | |
| width: 18px; | |
| height: 18px; | |
| display: block; | |
| } | |
| [dir='rtl'] .nut-calendarcard, | |
| .nut-rtl .nut-calendarcard { | |
| &-header { | |
| &-left, | |
| &-right { | |
| .left { | |
| margin-left: 0; | |
| margin-right: 8px; | |
| } | |
| .right { | |
| margin-right: 0; | |
| margin-left: 8px; | |
| } | |
| .nut-icon-ArrowLeft, | |
| .nut-icon-ArrowRight, | |
| .nut-calendarcard-icon, | |
| svg { | |
| transform: rotate(180deg); | |
| } | |
| } | |
| } | |
| } |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/packages/calendarcard/calendarcard.scss` around lines 33 - 37, 当前 RTL
规则只覆盖 svg/.nut-icon-*，但新增的样式类 nut-calendarcard-icon 及其 Image 子元素未被包含，导致在 RTL
环境下箭头图片不翻转；请在 RTL CSS 规则中将 .nut-calendarcard-icon（及其 img 或 Taro Image 的选择器）加入现有的
RTL 翻转选择器（与 .nut-icon-* 一并），确保在 [dir="rtl"] 或 .rtl 父选择器下对该类使用相同的翻转
transform（例如水平翻转/旋转）以修复左右含义错误，并保持与现有 svg 翻转规则一致。
1 participant
🤔 这个变动的性质是？
Summary by CodeRabbit
发布说明