feat(calendar): 合并2.x功能,支持月面板、季面板,支持展示周号,鸿蒙适配
🤔 这个变动的性质是?
- [x] 新特性提交
- [ ] 日常 bug 修复
- [ ] 站点、文档改进
- [ ] 演示代码改进
- [ ] 组件样式/交互改进
- [ ] TypeScript 定义更新
- [ ] 包体积优化
- [ ] 性能优化
- [ ] 功能增强
- [ ] 国际化改进
- [ ] 重构
- [ ] 代码风格优化
- [ ] 测试用例
- [ ] 分支合并
- [ ] 其他改动(是关于什么的改动?)
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
⚠️ 请自检并全部勾选全部选项。⚠️
- [ ] 文档已补充或无须补充
- [ ] 代码演示已提供或无须提供
- [ ] TypeScript 定义已补充或无须补充
- [ ] fork仓库代码是否为最新避免文件冲突
- [ ] Files changed 没有 package.json lock 等无关文件
Summary by CodeRabbit
-
新功能
- 扩展日历本地化支持,新增“周”、“月”、“年”、“季度”字段,多语言下可显示简写。
- 日历组件现支持天、月、季度多视图模式,增强日期选择的灵活性。
- 新增多个演示示例,展示多日期、区间及周选择等多种操作方式。
- 新增属性
viewMode,支持选择显示模式为“天”、“月”或“季度”。 - 新增属性
showMonthNumber,控制是否显示月份编号。 - 新增事件处理器
onItemClick,用于处理月份和季度面板中的项目点击事件。
-
样式
- 优化日历布局与样式,并引入自定义样式变量,提高界面适应性。
- 新增日历面板项宽度的样式变量,增强样式灵活性。
-
测试
- 扩充测试覆盖,确保各视图模式和点击交互正常运行。
Walkthrough
此次 PR 修改主要扩展了日历组件及其本地化支持。新增了 API 属性(week、month、year、quarter)以提供更细粒度的时间区段信息,并同步在各语言包中添加了对应的翻译。此外,对样式、组件逻辑、演示案例、工具函数、类型定义和测试用例等进行了重构和动态化处理,提升了组件的灵活性和可维护性。
Changes
| 文件路径 | 修改摘要 |
|---|---|
src/locales/... (base.ts, en-US.ts, id-ID.ts, tr-TR.ts, zh-CN.ts, zh-TW.ts, zh-UG.ts) |
在 calendaritem 对象中新增四个属性(week、month、year、quarter),并为各语言提供对应的翻译。 |
src/packages/calendar/calendar.scss |
更新了日历样式,新增了 weeknumber、shrink、panel 等类,并修改了部分类名(如从 day-info 改为 item-info)。 |
src/packages/calendar/calendar.taro.tsxsrc/packages/calendar/calendar.tsx |
在 Calendar 组件中新增 viewMode、value、showMonthNumber,并调整日期处理逻辑及条件渲染(区分日模式和其他视图)。 |
src/packages/calendar/calendarviewmodeitem.taro.tsxsrc/packages/calendar/calendarviewmodeitem.tsx |
新增 CalendarViewModeItem 组件,用于支持月和季视图,处理初始化、滚动和点击事件。 |
src/packages/calendar/demo*.tsxsrc/packages/calendar/demos/* |
各 Demo 组件统一重命名为 Demo,并更新了日期状态初始化为动态日期,调整了展示逻辑和演示配置。 |
src/packages/calendar/utils.tssrc/packages/calendarcard/utils.tssrc/packages/calendaritem/... |
重构工具函数:移除 Utils 对象,改为直接导入具体函数,并新增涉及月份、季度计算的函数;同时在 CalendarItem 中新增 showMonthNumber 属性和改进渲染/对比逻辑。 |
src/styles/variables.scss |
新增 $calendar-panel-item-width 变量,用于定义日历面板项的宽度。 |
src/types/spec/calendar/base.tssrc/packages/configprovider/types.ts |
更新和扩展了日历相关类型定义,新增属性如 viewMode、value、showMonthNumber、onItemClick,以及新的接口(CalendarMonth、CalendarQuarter 等)。 |
src/utils/date.ts |
对日期工具函数进行重构:将原 Utils 对象中的函数拆分成独立导出函数,并新增 getDateString 等函数。 |
src/packages/calendar/__tests__/calendar.spec.tsx |
更新测试用例名称和逻辑,增加对视图模式、点击事件等场景的验证,并加入辅助测试函数。 |
Sequence Diagram(s)
sequenceDiagram
participant U as 用户
participant C as Calendar 组件
participant V as CalendarViewModeItem
participant D as CalendarItem
U->>C: 触发日期选择
alt viewMode ≠ 'day'
C->>V: 渲染视图模式组件
V->>C: 触发 onItemClick 回调
else viewMode == 'day'
C->>D: 渲染日历项组件
D->>C: 触发 onDayClick 回调
end
Possibly related PRs
- jdf2e/nutui-react#3073: 修改日历项接口,涉及日历功能的本地化扩展。
- jdf2e/nutui-react#2914: 修改日历组件的日期处理和属性设置,两者均涉及对日历功能的扩展。
Suggested reviewers
- oasis-cloud
- Alex-huxiyang
Poem
我是小兔跳跳乐,
代码草原春意浓,
日历新添四时风,
样式调整巧如梦,
Demo 变换显灵动,
工具重构理更通,
欢喜涂鸦不止步 🐰🌸
🪧 Tips
Chat
There are 3 ways to chat with CodeRabbit:
- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
I pushed a fix in commit <commit_id>, please review it.Generate unit testing code for this file.Open a follow-up GitHub issue for this discussion.
- Files and specific lines of code (under the "Files changed" tab): Tag
@coderabbitaiin a new review comment at the desired location with your query. Examples:@coderabbitai generate unit testing code for this file.@coderabbitai modularize this function.
- PR comments: Tag
@coderabbitaiin a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.@coderabbitai read src/utils.ts and generate unit testing code.@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.@coderabbitai help me debug CodeRabbit configuration file.
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)
@coderabbitai pauseto pause the reviews on a PR.@coderabbitai resumeto resume the paused reviews.@coderabbitai reviewto trigger an incremental review. This is useful when automatic reviews are disabled for the repository.@coderabbitai full reviewto do a full review from scratch and review all the files again.@coderabbitai summaryto regenerate the summary of the PR.@coderabbitai generate docstringsto generate docstrings for this PR.@coderabbitai resolveresolve all the CodeRabbit review comments.@coderabbitai planto trigger planning for file edits and PR creation.@coderabbitai configurationto show the current CodeRabbit configuration for the repository.@coderabbitai helpto get help.
Other keywords and placeholders
- Add
@coderabbitai ignoreanywhere in the PR description to prevent this PR from being reviewed. - Add
@coderabbitai summaryto generate the high-level summary at a specific location in the PR description. - Add
@coderabbitaianywhere in the PR title to generate the title automatically.
CodeRabbit Configuration File (.coderabbit.yaml)
- You can programmatically configure CodeRabbit by adding a
.coderabbit.yamlfile to the root of your repository. - Please see the configuration documentation for more information.
- If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation:
# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json
Documentation and Community
- Visit our Documentation for detailed information on how to use CodeRabbit.
- Join our Discord Community to get help, request features, and share feedback.
- Follow us on X/Twitter for updates and announcements.
Codecov Report
Attention: Patch coverage is 94.63918% with 52 lines in your changes missing coverage. Please review.
Project coverage is 88.62%. Comparing base (
c56941d) to head (a98c830). Report is 2 commits behind head on feat_v3.x.
Additional details and impacted files
@@ Coverage Diff @@
## feat_v3.x #3091 +/- ##
=============================================
+ Coverage 86.95% 88.62% +1.66%
=============================================
Files 280 282 +2
Lines 18456 18864 +408
Branches 2786 2920 +134
=============================================
+ Hits 16049 16718 +669
+ Misses 2402 2143 -259
+ Partials 5 3 -2
:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.
:rocket: New features to boost your workflow:
- :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
- :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.
鸿蒙下样式问题,周日和周六没有高亮
鸿蒙下单个日期高度比其他端高
展示周号的 demo 只能滑动到 24年1月,与其他端不一致。其他 demo 也存在类似问题
样式问题已修订;鸿蒙下无法滚动问题,待跟进。
这个啥时候能合并发布啊,迫切需要周视图。