nutui-react icon indicating copy to clipboard operation
nutui-react copied to clipboard

feat(calendar): 合并2.x功能,支持月面板、季面板,支持展示周号,鸿蒙适配

Open xiaoyatong opened this issue 9 months ago • 5 comments

🤔 这个变动的性质是?

  • [x] 新特性提交
  • [ ] 日常 bug 修复
  • [ ] 站点、文档改进
  • [ ] 演示代码改进
  • [ ] 组件样式/交互改进
  • [ ] TypeScript 定义更新
  • [ ] 包体积优化
  • [ ] 性能优化
  • [ ] 功能增强
  • [ ] 国际化改进
  • [ ] 重构
  • [ ] 代码风格优化
  • [ ] 测试用例
  • [ ] 分支合并
  • [ ] 其他改动(是关于什么的改动?)

🔗 相关 Issue

💡 需求背景和解决方案

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项。⚠️

  • [ ] 文档已补充或无须补充
  • [ ] 代码演示已提供或无须提供
  • [ ] TypeScript 定义已补充或无须补充
  • [ ] fork仓库代码是否为最新避免文件冲突
  • [ ] Files changed 没有 package.json lock 等无关文件

Summary by CodeRabbit

  • 新功能

    • 扩展日历本地化支持,新增“周”、“月”、“年”、“季度”字段,多语言下可显示简写。
    • 日历组件现支持天、月、季度多视图模式,增强日期选择的灵活性。
    • 新增多个演示示例,展示多日期、区间及周选择等多种操作方式。
    • 新增属性 viewMode,支持选择显示模式为“天”、“月”或“季度”。
    • 新增属性 showMonthNumber,控制是否显示月份编号。
    • 新增事件处理器 onItemClick,用于处理月份和季度面板中的项目点击事件。
  • 样式

    • 优化日历布局与样式,并引入自定义样式变量,提高界面适应性。
    • 新增日历面板项宽度的样式变量,增强样式灵活性。
  • 测试

    • 扩充测试覆盖,确保各视图模式和点击交互正常运行。

xiaoyatong avatar Mar 17 '25 12:03 xiaoyatong

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.tsx
src/packages/calendar/calendar.tsx
在 Calendar 组件中新增 viewMode、value、showMonthNumber,并调整日期处理逻辑及条件渲染(区分日模式和其他视图)。
src/packages/calendar/calendarviewmodeitem.taro.tsx
src/packages/calendar/calendarviewmodeitem.tsx
新增 CalendarViewModeItem 组件,用于支持月和季视图,处理初始化、滚动和点击事件。
src/packages/calendar/demo*.tsx
src/packages/calendar/demos/*
各 Demo 组件统一重命名为 Demo,并更新了日期状态初始化为动态日期,调整了展示逻辑和演示配置。
src/packages/calendar/utils.ts
src/packages/calendarcard/utils.ts
src/packages/calendaritem/...
重构工具函数:移除 Utils 对象,改为直接导入具体函数,并新增涉及月份、季度计算的函数;同时在 CalendarItem 中新增 showMonthNumber 属性和改进渲染/对比逻辑。
src/styles/variables.scss 新增 $calendar-panel-item-width 变量,用于定义日历面板项的宽度。
src/types/spec/calendar/base.ts
src/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 @coderabbitai in 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 @coderabbitai in 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 pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai plan to trigger planning for file edits and PR creation.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file 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.

coderabbitai[bot] avatar Mar 17 '25 12:03 coderabbitai[bot]

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.

Files with missing lines Patch % Lines
src/packages/calendaritem/calendaritem.tsx 89.92% 27 Missing :warning:
src/packages/calendar/calendarviewmodeitem.tsx 96.49% 11 Missing :warning:
src/packages/calendar/utils.ts 90.38% 10 Missing :warning:
src/packages/calendaritem/utils.ts 97.10% 4 Missing :warning:
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.

codecov[bot] avatar Mar 17 '25 12:03 codecov[bot]

鸿蒙下样式问题,周日和周六没有高亮 image

鸿蒙下单个日期高度比其他端高 image

展示周号的 demo 只能滑动到 24年1月,与其他端不一致。其他 demo 也存在类似问题

oasis-cloud avatar Mar 19 '25 03:03 oasis-cloud

样式问题已修订;鸿蒙下无法滚动问题,待跟进。

xiaoyatong avatar Mar 24 '25 11:03 xiaoyatong

这个啥时候能合并发布啊,迫切需要周视图。

269378737 avatar Jun 16 '25 07:06 269378737