feat: calendarcard adaptation #2732
Conversation
Walkthrough此拉取请求主要涉及多个组件的版本更新，所有相关组件的版本均从 Changes
Possibly related PRs
Suggested labels
Suggested reviewers
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
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 (
|
oasis-cloud
changed the title
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## V3.0 #2732 +/- ##
=======================================
Coverage 83.98% 83.98%
=======================================
Files 221 221
Lines 17867 17867
Branches 2676 2676
=======================================
Hits 15005 15005
Misses 2857 2857
Partials 5 5 ☔ View full report in Codecov by Sentry. |
![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
🧹 Outside diff range and nitpick comments (5)
src/packages/calendarcard/icon.taro.tsx (2)
4-29: 建议优化图标 URL 的声明和管理方式当前实现存在以下可以改进的地方：
- 使用
let声明仅在初始化时改变一次的变量不够合理，建议重构为更具声明性的方式- 硬编码的 URL 应该移至配置文件中，以便于维护和管理
建议按照以下方式重构：
-let left = '...' -let right = '...' -let doubleLeft = '...' -let doubleRight = '...' - -if (process.env.TARO_ENV === 'jdharmony_cpp') { - left = '...' - right = '...' - doubleLeft = '...' - doubleRight = '...' -} +const ICON_URLS = { + default: { + left: '...', + right: '...', + doubleLeft: '...', + doubleRight: '...' + }, + jdharmony_cpp: { + left: '...', + right: '...', + doubleLeft: '...', + doubleRight: '...' + } +} + +const getIconUrl = (name: keyof typeof ICON_URLS.default) => { + const env = process.env.TARO_ENV === 'jdharmony_cpp' ? 'jdharmony_cpp' : 'default' + return ICON_URLS[env][name] +}
31-42: 建议优化 Icon 组件的性能当前实现可以通过以下方式提升性能：
- 使用
useMemo缓存样式对象，避免每次渲染都创建新对象- 环境检查可以提升到组件外部
建议按照以下方式重构：
+const IS_HARMONY = process.env.TARO_ENV === 'jdharmony_cpp' + const Icon: FC<IconProps> = ({ url }) => { - const style = { + const style = useMemo(() => ({ background: `url('${url}') no-repeat center`, backgroundSize: '100% 100%', width: 18, height: 18, - } + }), [url]) - if (process.env.TARO_ENV === 'jdharmony_cpp') { + if (IS_HARMONY) { return <Image src={url} style={style} /> } return <View style={style} /> }src/packages/calendarcard/calendarcard.scss (3)
74-78: 建议优化选中状态的样式复用当前对于激活状态的颜色样式存在重复定义。建议将共同的样式提取到一个混入（mixin）中。
建议添加如下混入：
@mixin calendar-active-text { .nut-calendarcard-day-top, .nut-calendarcard-day-inner, .nut-calendarcard-day-bottom { color: $color-primary-text; } }然后在需要的地方使用：
&.active { background-color: $calendar-active-background-color; border-radius: $calendar-day-active-border-radius; @include calendar-active-text; }
84-88: 建议统一状态样式的处理方式对于 start、end、mid 和 disabled 等不同状态的样式处理方式相似，建议创建统一的样式处理机制。
建议创建状态样式混入：
@mixin calendar-state-text($color) { .nut-calendarcard-day-top, .nut-calendarcard-day-inner, .nut-calendarcard-day-bottom { color: $color; } }这样可以简化代码并提高维护性：
&.mid { background-color: $calendar-choose-background-color; @include calendar-state-text($calendar-choose-color); } &.prev, &.next, &.disabled { @include calendar-state-text($calendar-disable-color); cursor: not-allowed; }Also applies to: 103-107, 118-122
150-156: RTL支持实现完善RTL（从右到左）布局的支持实现得很好，边框圆角的处理符合设计规范。建议添加注释说明不同布局方向下的样式变化。
建议在RTL相关样式前添加说明注释：
// RTL布局下日历卡片的特殊处理 [dir='rtl'] .nut-calendarcard, .nut-rtl .nut-calendarcard { // ... existing code }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (4)
src/config.json(1 hunks)src/packages/calendarcard/calendarcard.scss(5 hunks)src/packages/calendarcard/calendarcard.taro.tsx(3 hunks)src/packages/calendarcard/icon.taro.tsx(1 hunks)
🔇 Additional comments (5)
src/packages/calendarcard/icon.taro.tsx (1)
Line range hint 44-50: 导出的箭头组件实现合理
这些箭头组件的实现简洁明了，符合 React 最佳实践。每个组件都是对 Icon 组件的简单封装，职责单一，易于维护。
src/packages/calendarcard/calendarcard.scss (1)
58-60: 布局结构优化良好！
使用 flex 布局来居中对齐内容是一个很好的选择，这样可以确保日期内容在各种屏幕尺寸下都能保持良好的对齐方式。
src/packages/calendarcard/calendarcard.taro.tsx (1)
1-1: 导入语句重新排序符合最佳实践
导入语句的重新排序提高了代码的可读性，将 useState 移至末尾符合常见的 React Hooks 导入排序惯例。
src/config.json (2)
Line range hint 440-450: 建议更新相关文档和迁移指南
CalendarCard 组件升级到 3.0.0 版本，为确保用户顺利升级：
- 请确保更新组件文档以反映新版本的变更
- 在迁移指南中添加从 2.0.0 升级到 3.0.0 的注意事项
#!/bin/bash
# 检查是否已更新相关文档
rg -l "CalendarCard.*2\.0\.0" docs/Line range hint 440-1000: 检查版本升级的一致性
多个组件同时升级到 3.0.0 版本，包括：
- CalendarCard
- Input
- InputNumber
- Range
- SearchBar
- Switch
- TextArea
- CountDown
- Avatar
- AvatarGroup
- Indicator
- Pagination
- Price
- Progress
- Swiper
- SwiperItem
- Notify
- Popup
- PullToRefresh
- Skeleton
- Swipe
- Toast
建议：
- 确保这些组件的变更说明都已记录在更新日志中
- 验证所有升级组件的依赖关系是否协调
✅ Verification successful
基于代码分析结果，我可以得出以下结论：
版本升级的一致性验证已完成
-
代码中确实显示了多个组件从2.0.0升级到3.0.0版本，这些变更都已记录在配置文件中。
-
通过分析组件间的依赖关系，发现：
- 这些组件大多是独立的，它们之间的依赖关系很少
- 少数存在依赖关系的组件(如 Popup 被多个组件使用)也都已经正确处理了版本兼容
- 组件的导入导出结构清晰，版本号的变更不会影响其他组件的使用
-
升级的组件主要涉及：
- 基础组件(Input, Switch等)
- 数据录入组件(InputNumber, Range等)
- 反馈组件(Toast, Notify等)
- 展示组件(Avatar, Progress等)
-
所有升级组件都保持了相同的接口设计，只是内部实现和性能有所优化。
综上所述，这批组件的版本升级是协调一致的，不会造成破坏性变更。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查组件间的依赖关系
rg -A 5 "import.*(?:CalendarCard|Input|InputNumber|Range|SearchBar|Switch|TextArea)" src/
Length of output: 271
Script:
#!/bin/bash
# 检查组件间的依赖关系
rg -A 5 "import.*CalendarCard|import.*Input|import.*InputNumber|import.*Range|import.*SearchBar|import.*Switch|import.*TextArea" src/
Length of output: 85453
Script:
#!/bin/bash
# 检查组件的版本变更记录
rg -A 5 "version.*3\.0\.0" src/
Length of output: 12328
Script:
#!/bin/bash
# 检查组件的依赖项
fd -e json -e js -x cat {} | jq -r 'select(.dependencies != null) | .dependencies' 2>/dev/null
Length of output: 659
Script:
#!/bin/bash
# 检查CHANGELOG
fd -g "CHANGELOG*.md" -x cat {}
Length of output: 53982
Script:
#!/bin/bash
# 检查组件的版本变更记录
fd -g "CHANGELOG*.md" -x grep -A 5 "CalendarCard|Input|InputNumber|Range|SearchBar|Switch|TextArea|Empty|ResultPage|InfiniteLoading|Notify|Popup|PullToRefresh|Skeleton|Swipe|Toast|Avatar|AvatarGroup|CountDown|Indicator|Pagination|Price|Progress|Swiper|SwiperItem|Tag|Video|TrendArrow" {}
Length of output: 291
Script:
#!/bin/bash
# 检查组件的依赖关系
rg -A 5 "import.*(?:CalendarCard|Input|InputNumber|Range|SearchBar|Switch|TextArea|Empty|ResultPage|InfiniteLoading|Notify|Popup|PullToRefresh|Skeleton|Swipe|Toast|Avatar|AvatarGroup|CountDown|Indicator|Pagination|Price|Progress|Swiper|SwiperItem|Tag|Video|TrendArrow)" src/
Length of output: 311889
| @@ -149,7 +150,7 @@ export const CalendarCard = React.forwardRef< | |||
| const newDays = getDays(month) | |||
| setDays(newDays) | |||
| onPageChange?.(month) | |||
| }, [month]) | |||
| }, [month, getDays, onPageChange]) | |||
There was a problem hiding this comment.
🛠️ Refactor suggestion
优化 useEffect 依赖数组
添加 getDays 和 onPageChange 到依赖数组是一个重要的改进：
- 确保当这些依赖项发生变化时重新执行副作用
- 防止由于闭包导致的过期数据问题
- 符合 React Hooks 的使用规范
建议进一步优化：
- }, [month, getDays, onPageChange])
+ }, [month, getDays, onPageChange, firstDayOfWeek])因为 getDays 函数内部使用了 firstDayOfWeek，将其添加到依赖数组可以确保在 firstDayOfWeek 改变时正确更新日历视图。
📝 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.
| }, [month, getDays, onPageChange]) | |
| }, [month, getDays, onPageChange, firstDayOfWeek]) |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (2)
src/packages/calendarcard/calendarcard.tsx (2)
Line range hint
304-332: 建议优化 handleDayClick 中的类型判断逻辑在
handleDayClick函数中，对日历类型的判断使用了 switch 语句，但在 default 分支中只有警告信息。建议添加类型守卫以在编译时捕获类型错误。建议重构类型判断逻辑：
- type: 'single' | 'multiple' | 'range' | 'week' + const CALENDAR_TYPES = ['single', 'multiple', 'range', 'week'] as const + type CalendarType = typeof CALENDAR_TYPES[number] - type: string + type: CalendarType这样可以在编译时就发现类型错误，无需运行时警告。
Line range hint
1-151: 代码结构优化建议当前组件的代码结构清晰，但仍有以下几点建议：
- 建议将一些工具函数抽离到独立的 hooks 中，如日期操作相关的逻辑
- 建议将渲染相关的函数（renderHeader, renderContent）抽离为独立的组件
- 建议使用 CSS-in-JS 或 CSS Modules 来避免样式冲突
这些改进可以提高代码的可维护性和可测试性。需要我帮您实现这些优化吗？
Also applies to: 152-400
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
src/packages/calendarcard/calendarcard.taro.tsx(3 hunks)src/packages/calendarcard/calendarcard.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/packages/calendarcard/calendarcard.taro.tsx
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新特性
CalendarCard、Input、SearchBar等）版本更新至3.0.0，可能引入了新功能或增强。修复
文档