feat(calendar): add viewmode #2985
Conversation
Walkthrough此次改动对日历组件进行了扩展和重构。主要新增了 Changes
Sequence Diagram(s)sequenceDiagram
participant U as 用户
participant C as 日历组件
participant CI as CalendarItem
participant CV as CalendarViewModeItem
U->>C: 触发点击或选择事件
alt viewMode 为 "day"
C->>CI: 渲染日视图 (CalendarItem)
else viewMode 为 "month" 或 "quarter"
C->>CV: 渲染月/季度视图 (CalendarViewModeItem)
end
C->>U: 执行 onItemClick 回调
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 ESLint
ERR_PNPM_OPTIONAL_DEPS_REQUIRE_PROD_DEPS Optional dependencies cannot be installed without production dependencies Tip ⚡🧪 Multi-step agentic review comment chat (experimental)
✨ Finishing Touches
🪧 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 (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Nitpick comments (15)
src/packages/calendar/calendar.tsx (2)
142-175: **避免以 props.children 方式注入内容 **
在第 148 行使用了children={children}，根据静态分析建议，通常在 React 中直接以<CalendarViewModeItem>{children}</CalendarViewModeItem>方式传递子元素更为规范，避免通过children属性显式传递。若组件需要更多灵活性，可考虑保留，但建议优化：-<CalendarViewModeItem - ref={calendarRef} - ... - children={children} /> +<CalendarViewModeItem + ref={calendarRef} + ... +> + {children} +</CalendarViewModeItem>🧰 Tools
🪛 Biome (1.9.4)
[error] 148-148: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
176-205: **同理，避免显式传递 children **
与上面相同，第 180 行也通过children={children}来注入内容。可考虑使用 JSX 包裹方式来渲染子元素，以更符合 React 规范并提高可读性。-<CalendarItem - ref={calendarRef} - ... - children={children} /> +<CalendarItem + ref={calendarRef} + ... +> + {children} +</CalendarItem>🧰 Tools
🪛 Biome (1.9.4)
[error] 180-180: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
src/packages/calendar/calendarviewmodeitem.tsx (3)
429-448: **switch 语句中的局部变量作用域 **
静态分析提示在 switch 中声明的变量可能会被其他 case 使用，为避免作用域冲突，可考虑在 case 内添加大括号或提取局部变量到外部，增强可维护性。🧰 Tools
🪛 Biome (1.9.4)
[error] 443-444: Other switch clauses can erroneously access this declaration.
Wrap the declaration in a block to restrict its access to the switch clause.The declaration is defined in this switch clause:
Unsafe fix: Wrap the declaration in a block.
(lint/correctness/noSwitchDeclarations)
602-607: **使用可选链以简化安全访问 **
静态分析建议在访问对象属性时，可使用“可选链”语法?.，以避免某些空值情况导致的报错：someObj?.property🧰 Tools
🪛 Biome (1.9.4)
[error] 602-607: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
607-608: **同理，使用可选链 **
同一位置可继续使用可选链，减少安全判断的重复逻辑。🧰 Tools
🪛 Biome (1.9.4)
[error] 607-608: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
src/packages/calendaritem/calendaritem.tsx (2)
264-278: **针对 single 模式的默认日期逻辑 **
在此进行单个日期的默认值设定时，判断条件较多，可进一步拆分成辅助函数，提升可读性与后续扩展。
566-609: **抽离 handleDayClick 函数简化交互 **
此处集中处理多类型的日期选择逻辑；如果后续功能增多，可以继续拆分单选、多选、范围等逻辑到各自独立的函数，以简化条件判断。src/packages/calendaritem/calendaritem.taro.tsx (4)
81-82: 默认属性中使用 getDay(0) 和 getDay(365)
可以考虑在注释中说明数字 365 的含义，提升可维护性。
194-194: 新增 getMonthData 方法
建议在方法周边添加注释，注明其返回格式与用途，便于后期维护。
210-210: 硬编码高度数值
建议提取成常量或写在配置处，便于维护和后续修改。- const cssHeight = 39 + (days.length > 35 ? 384 : 320) + const BASE_HEIGHT = 39 + const EXTENDED_HEIGHT = 384 + const DEFAULT_HEIGHT = 320 + const cssHeight = BASE_HEIGHT + (days.length > 35 ? EXTENDED_HEIGHT : DEFAULT_HEIGHT)
370-402: renderCurrentDate 函数的多分支逻辑
这里有多个类型判断（range、week、multiple 等），建议完善单元测试覆盖，避免遗漏交互情形。src/packages/calendar/calendarviewmodeitem.taro.tsx (1)
81-82: 默认 startDate 与 endDate 使用 getDay
可考虑在注释或文档中解释 365 的含义，让维护者更快理解。src/utils/date.ts (2)
301-301: 移除调试日志！开发环境的 console.log 语句不应该提交到代码库中。
- console.log('firstDayOfWeek', firstDayOfWeek, firstDayOfYear.getDay())
340-345: 移除注释掉的测试代码！这些被注释掉的测试代码应该被移除，保持代码整洁。
-// // 计算 2025 和 2026 年的总周数 -// const weeksIn2025 = getTotalWeeksInYear(2025); -// const weeksIn2026 = getTotalWeeksInYear(2026); -// // console.log(`2025 年有 ${weeksIn2025} 周`); -// // console.log(`2026 年有 ${weeksIn2026} 周`);src/packages/calendar/calendarviewmode.scss (1)
28-30: 建议使用更通用的滚动条隐藏方式！当前只隐藏了 webkit 浏览器的滚动条，建议添加其他浏览器的兼容性支持。
::-webkit-scrollbar { display: none; } +/* Firefox */ +* { + scrollbar-width: none; +} +/* IE and Edge */ +* { + -ms-overflow-style: none; +}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (14)
src/packages/calendar/calendar.scss(2 hunks)src/packages/calendar/calendar.taro.tsx(2 hunks)src/packages/calendar/calendar.tsx(4 hunks)src/packages/calendar/calendarviewmode.scss(1 hunks)src/packages/calendar/calendarviewmodeitem.taro.tsx(1 hunks)src/packages/calendar/calendarviewmodeitem.tsx(1 hunks)src/packages/calendar/demos/h5/demo1.tsx(0 hunks)src/packages/calendar/demos/taro/demo1.tsx(0 hunks)src/packages/calendar/utils.tsx(2 hunks)src/packages/calendarcard/utils.ts(3 hunks)src/packages/calendaritem/calendaritem.taro.tsx(15 hunks)src/packages/calendaritem/calendaritem.tsx(15 hunks)src/styles/variables.scss(1 hunks)src/utils/date.ts(4 hunks)
💤 Files with no reviewable changes (2)
- src/packages/calendar/demos/h5/demo1.tsx
- src/packages/calendar/demos/taro/demo1.tsx
🧰 Additional context used
🪛 Biome (1.9.4)
src/packages/calendar/calendar.tsx
[error] 148-148: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 180-180: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
src/packages/calendar/calendarviewmodeitem.tsx
[error] 179-180: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 443-444: Other switch clauses can erroneously access this declaration.
Wrap the declaration in a block to restrict its access to the switch clause.
The declaration is defined in this switch clause:
Unsafe fix: Wrap the declaration in a block.
(lint/correctness/noSwitchDeclarations)
[error] 451-452: Other switch clauses can erroneously access this declaration.
Wrap the declaration in a block to restrict its access to the switch clause.
The declaration is defined in this switch clause:
Unsafe fix: Wrap the declaration in a block.
(lint/correctness/noSwitchDeclarations)
[error] 458-458: Other switch clauses can erroneously access this declaration.
Wrap the declaration in a block to restrict its access to the switch clause.
The declaration is defined in this switch clause:
Unsafe fix: Wrap the declaration in a block.
(lint/correctness/noSwitchDeclarations)
[error] 595-596: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 602-607: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 607-608: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
src/packages/calendar/calendarviewmodeitem.taro.tsx
[error] 239-240: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 299-299: Other switch clauses can erroneously access this declaration.
Wrap the declaration in a block to restrict its access to the switch clause.
The declaration is defined in this switch clause:
Unsafe fix: Wrap the declaration in a block.
(lint/correctness/noSwitchDeclarations)
[error] 301-301: Other switch clauses can erroneously access this declaration.
Wrap the declaration in a block to restrict its access to the switch clause.
The declaration is defined in this switch clause:
Unsafe fix: Wrap the declaration in a block.
(lint/correctness/noSwitchDeclarations)
[error] 317-318: Other switch clauses can erroneously access this declaration.
Wrap the declaration in a block to restrict its access to the switch clause.
The declaration is defined in this switch clause:
Unsafe fix: Wrap the declaration in a block.
(lint/correctness/noSwitchDeclarations)
[error] 319-320: Other switch clauses can erroneously access this declaration.
Wrap the declaration in a block to restrict its access to the switch clause.
The declaration is defined in this switch clause:
Unsafe fix: Wrap the declaration in a block.
(lint/correctness/noSwitchDeclarations)
[error] 632-633: Other switch clauses can erroneously access this declaration.
Wrap the declaration in a block to restrict its access to the switch clause.
The declaration is defined in this switch clause:
Unsafe fix: Wrap the declaration in a block.
(lint/correctness/noSwitchDeclarations)
[error] 655-657: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 674-675: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 675-676: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
src/packages/calendaritem/calendaritem.taro.tsx
[error] 299-299: Other switch clauses can erroneously access this declaration.
Wrap the declaration in a block to restrict its access to the switch clause.
The declaration is defined in this switch clause:
Unsafe fix: Wrap the declaration in a block.
(lint/correctness/noSwitchDeclarations)
[error] 301-301: Other switch clauses can erroneously access this declaration.
Wrap the declaration in a block to restrict its access to the switch clause.
The declaration is defined in this switch clause:
Unsafe fix: Wrap the declaration in a block.
(lint/correctness/noSwitchDeclarations)
[error] 317-318: Other switch clauses can erroneously access this declaration.
Wrap the declaration in a block to restrict its access to the switch clause.
The declaration is defined in this switch clause:
Unsafe fix: Wrap the declaration in a block.
(lint/correctness/noSwitchDeclarations)
[error] 319-320: Other switch clauses can erroneously access this declaration.
Wrap the declaration in a block to restrict its access to the switch clause.
The declaration is defined in this switch clause:
Unsafe fix: Wrap the declaration in a block.
(lint/correctness/noSwitchDeclarations)
[error] 632-633: Other switch clauses can erroneously access this declaration.
Wrap the declaration in a block to restrict its access to the switch clause.
The declaration is defined in this switch clause:
Unsafe fix: Wrap the declaration in a block.
(lint/correctness/noSwitchDeclarations)
[error] 674-675: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 675-676: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
🪛 GitHub Check: build
src/packages/calendar/calendarviewmodeitem.tsx
[failure] 212-212:
Argument of type 'CalendarValue' is not assignable to parameter of type 'string'.
[failure] 214-214:
Argument of type 'CalendarValue' is not assignable to parameter of type 'string'.
[failure] 217-217:
Argument of type 'CalendarValue' is not assignable to parameter of type 'string'.
🪛 GitHub Actions: CI
src/packages/calendar/calendarviewmodeitem.tsx
[error] 212-212: Argument of type 'CalendarValue' is not assignable to parameter of type 'string'.
🪛 GitHub Check: lint
src/packages/calendar/calendarviewmodeitem.taro.tsx
[warning] 456-456:
React Hook useEffect has a missing dependency: 'initData'. Either include it or remove the dependency array
[warning] 465-465:
React Hook useEffect has missing dependencies: 'resetDefaultValue' and 'setCurrentDate'. Either include them or remove the dependency array
🔇 Additional comments (44)
src/packages/calendar/calendar.tsx (5)
4-5: **引入新组件以支持多视图模式 **
这两行导入了CalendarViewModeItem和getDay方法，用于在日历中支持新的多视图模式和替换原有的日期工具函数，没有发现明显问题。
12-12: **新增 viewMode 属性 **
在CalendarProps中为viewMode定义了'week' | 'month' | 'quarter'，可增强组件的可扩展性与灵活度。
44-44: **默认值设置为 'quarter' **
此处设置了viewMode: 'quarter'作为默认值，保证组件在未显式传递值时也有可用的默认视图模式。
50-51: **替换 Utils.getDay 为 getDay **
用getDay(0)与getDay(365)代替旧的工具函数，逻辑清晰，无明显功能风险。
83-83: **在 props 中解构 viewMode **src/packages/calendar/calendarviewmodeitem.tsx (3)
1-5: **新增组件 CalendarViewModeItem **
引入了独立组件CalendarViewModeItem并扩展了对应类型与默认属性，为日历提供周、月、季度多种查看模式，整体结构清晰。
38-65: **属性定义全面且易扩展 **
新增的CalendarViewModeItemProps包含了多种可配置项，并融合了PopupProps，可满足多种日历场景需求。
451-452: **修复类型警告以通过 CI **
此处同样存在声明变量后可能被其他 case 访问的问题或类型冲突。你可在 switch case 内部使用块级作用域，或者根据逻辑提取到函数外部。🧰 Tools
🪛 Biome (1.9.4)
[error] 451-452: Other switch clauses can erroneously access this declaration.
Wrap the declaration in a block to restrict its access to the switch clause.The declaration is defined in this switch clause:
Unsafe fix: Wrap the declaration in a block.
(lint/correctness/noSwitchDeclarations)
src/packages/calendaritem/calendaritem.tsx (8)
7-7: **移除 Utils 并使用更明确的工具函数 **
以getDay等单一函数替代之前的Utils命名空间，让逻辑和可维护性更直观。
80-81: **默认 startDate/endDate 的设置 **
将startDate和endDate赋值为getDay(0)与getDay(365)，与其他文件改动统一，便于维护。
192-200: **在 getMonthData 中替换 compareDate 和 getMonthDays **
改用新的工具方法替换之前的 Utils 调用，功能上无明显问题，维护性更好。
216-217: **处理传入日期区间的边界校验 **
此处调用!compareDate(...)进行范围判断，建议注意起止日期相等或逆序等特殊情况，避免出现日期超出范围仍被加入的风险。
528-534: **新增 isDisable 校验 **
添加了对不可点击日期的逻辑判断，并与组件的时间区间限制衔接合理。
537-563: **整合校验逻辑并返回对应类名 **
为日历单元格生成对应的禁用、选中等状态类名，逻辑较清晰，且与disableDate函数相结合。
711-759: **渲染日历单元格的细粒度控制 **
使用renderItem独立渲染每个日期格子，支持自定义插槽和多种提示信息，结构清晰。无明显缺陷。
762-773: **分解 renderPanel 以实现月份级渲染 **
将每个月的渲染封装为renderPanel，结合renderItem进一步提升了代码可读性和可维护性。src/packages/calendaritem/calendaritem.taro.tsx (9)
8-19: 导入多个日期工具函数的方式不错
这有助于增强可读性并减少命名空间依赖，整体实现良好。
116-116: 在 props 解构中增加 value
此变更逻辑清晰，不存在明显风险。
158-159: 初始化 propStartDate 和 propEndDate
目前的写法易读性较好，未发现隐患。
202-204: 使用展开运算符获取日期数组
该写法简洁明了，与 date 工具函数结合度较好。
218-221: compareDate 条件判断
建议再次确认 compareDate 的比较逻辑，如果日期相等也需要特殊处理，请确保无漏失。
228-228: 向 monthData 推入新月度信息
此处操作符合整体逻辑，暂未发现明显问题。
455-456: useEffect 缺少对 initData 的依赖
如果 initData 内会使用到组件中随时变化的状态或参数，建议将其加入依赖数组，以确保逻辑同步。
464-465: useEffect 缺少对 resetDefaultValue 与 setCurrentDate 的依赖
请确认这两个函数是否会改变，若变化则需要放入依赖，防止出现状态不同步问题。
674-675: 关于可选链提示
此处没有明显理由使用可选链，推测是误报，可暂时忽略。🧰 Tools
🪛 Biome (1.9.4)
[error] 674-675: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
src/packages/calendar/calendarviewmodeitem.taro.tsx (7)
1-19: 批量引入日期工具方法
此做法可提升可读性，方便日后维护与模块化。
158-159: 对 propStartDate 和 propEndDate 进行可选赋值
当前实现逻辑正常，无额外风险。
239-240: 静态分析建议改为可选链
如需防范 currentMonthsData 为空的情况，可使用可选链，但若本逻辑保证其始终存在，可保持现状。🧰 Tools
🪛 Biome (1.9.4)
[error] 239-240: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
455-456: useEffect 未包含 initData
若 initData 内部使用了外部状态，请将其加入依赖，防止运行结果与预期不符。🧰 Tools
🪛 GitHub Check: lint
[warning] 456-456:
React Hook useEffect has a missing dependency: 'initData'. Either include it or remove the dependency array
465-465: useEffect 未包含 resetDefaultValue 和 setCurrentDate
同理，需要确认这些函数是否变化，如包含外部状态，需将其放入依赖列表。🧰 Tools
🪛 GitHub Check: lint
[warning] 465-465:
React Hook useEffect has missing dependencies: 'resetDefaultValue' and 'setCurrentDate'. Either include them or remove the dependency array
655-657: 改用可选链的提示
可根据实际场景决定，若确实需要对链式属性进行安全访问，可加，否则视为误报。🧰 Tools
🪛 Biome (1.9.4)
[error] 655-657: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
674-676: 再次提醒使用可选链
若本处数据结构已保证安全，可忽略此提示。🧰 Tools
🪛 Biome (1.9.4)
[error] 674-675: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 675-676: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
src/packages/calendar/utils.tsx (7)
1-1: 拆分并直接引入 isEqual、date2Str、getNumTwoBit
此改动有助于减少对大型工具对象的依赖，促进模块化。
12-12: 在 isMultiple 中调用 isEqual
逻辑直观，能有效判定目标日期相等性。
20-20: 通过 isEqual 比较当前日期与今日
方法简洁易懂，满足功能需求。
24-24: 生成当前选中日期字符串
拼接字符串时使用 getNumTwoBit，有效保证日的两位格式。
28-28: isStart 函数
通过 isEqual 判断开始日期，符合直觉。
32-32: isEnd 函数
同理，结尾日期比较逻辑与 isStart 保持一致。
37-37: isStartAndEnd 函数
当开始时间与结束时间相等时返回 true，逻辑无误。src/packages/calendarcard/utils.ts (1)
1-1: 代码重构改进了模块化！将
Utils命名空间替换为直接导入函数的方式，使代码结构更清晰，依赖关系更明确。src/packages/calendar/calendar.taro.tsx (1)
47-48: 代码更新与工具函数重构保持一致！将
Utils.getDay替换为直接导入的getDay函数，保持了代码的一致性。src/packages/calendar/calendar.scss (2)
2-2: 导入语句添加正确！新增的
calendarviewmode.scss导入语句与视图模式功能相关,遵循了样式文件导入的最佳实践。
197-205: 样式结构优化合理！将禁用状态样式移至
choose类下是个很好的重构:
- 提高了样式的组织性和可维护性
- 保持了原有的样式属性
- 遵循了 BEM 命名规范
src/styles/variables.scss (1)
948-951: 变量定义规范合理！新增的日历面板项宽度变量:
- 遵循了项目的变量命名规范
- 使用 CSS 自定义属性实现更好的定制性
- 提供了合理的默认值 24.28%
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
src/packages/calendar/calendarviewmodeitem.tsx (1)
212-218:⚠️ Potential issue修复类型不匹配问题
compareDate函数期望接收 string 类型参数，但这里传入的是CalendarValue类型。建议修改为:
- if (compareDate(currentDate, propStartDate)) { + if (compareDate(currentDate as string, propStartDate)) { defaultData = [...splitDate(propStartDate)] - } else if (!compareDate(currentDate, propEndDate)) { + } else if (!compareDate(currentDate as string, propEndDate)) { defaultData = [...splitDate(propEndDate)] } else { defaultData = [...splitDate(currentDate)] }🧰 Tools
🪛 GitHub Check: build
[failure] 212-212:
Argument of type 'CalendarValue' is not assignable to parameter of type 'string'.
[failure] 214-214:
Argument of type 'CalendarValue' is not assignable to parameter of type 'string'.
[failure] 217-217:
Argument of type 'CalendarValue' is not assignable to parameter of type 'string'.🪛 GitHub Actions: CI
[error] 212-212: Argument of type 'CalendarValue' is not assignable to parameter of type 'string'.
🧹 Nitpick comments (6)
src/packages/calendar/calendarviewmodeitem.tsx (4)
155-155: 移除调试日志代码中存在多个 console.log 语句，这些不应该出现在生产代码中。
建议移除这些调试日志:
- console.log('propStartDate', propStartDate, propEndDate, endDate)- console.log('month', month, endMonth)Also applies to: 393-393
319-322: 完善周数据获取逻辑
getWeeksData函数目前返回空数组，需要实现获取可用周数的逻辑。是否需要我帮助实现这个函数的具体逻辑？我可以提供一个基于日期范围计算可用周数的实现方案。
441-461: 优化 switch 语句结构switch 语句中的变量声明可能会导致作用域问题。
建议将每个 case 块用大括号包裹:
switch (viewMode) { case 'week': { - // eslint-disable-next-line no-case-declarations const weeks = getWeeksData() setPanelDate({ ...panelDate, weeks }) break + } case 'month': { - // eslint-disable-next-line no-case-declarations const months = getMonthsData() setPanelDate({ ...panelDate, months: months as any }) break + } case 'quarter': { - // eslint-disable-next-line no-case-declarations const quarters = getQuartersData() setPanelDate({ ...panelDate, quarters: quarters as any }) break + } default: break }🧰 Tools
🪛 Biome (1.9.4)
[error] 455-455: Other switch clauses can erroneously access this declaration.
Wrap the declaration in a block to restrict its access to the switch clause.The declaration is defined in this switch clause:
Unsafe fix: Wrap the declaration in a block.
(lint/correctness/noSwitchDeclarations)
505-520: 优化滚动动画实现当前的滚动动画使用 setInterval 实现，建议使用更现代的方案。
建议使用 requestAnimationFrame 实现平滑滚动:
- let flag = 0 - const interval = setInterval(() => { - flag++ - if (monthsRef.current) { - const offset = distance / 10 - monthsRef.current.scrollTop += offset - } - if (flag >= 10) { - clearInterval(interval) - if (monthsRef.current) { - monthsRef.current.scrollTop = currTop - } - } - }, 40) + const startTime = performance.now() + const duration = 400 // 动画持续时间（毫秒） + + const animate = (currentTime: number) => { + const elapsed = currentTime - startTime + const progress = Math.min(elapsed / duration, 1) + + if (monthsRef.current) { + monthsRef.current.scrollTop = currTop - distance + distance * progress + } + + if (progress < 1) { + requestAnimationFrame(animate) + } + } + + requestAnimationFrame(animate)src/packages/calendar/calendarviewmode.scss (2)
125-125: 避免使用 !important多处使用了
!important声明，这可能导致样式难以维护和覆盖。建议通过提高选择器优先级来替代
!important:- color: $color-primary-text !important; + .nut-calendar-viewmode .nut-calendar-viewmode-item-active { + color: $color-primary-text; + } - color: $calendar-disable-color !important; + .nut-calendar-viewmode .nut-calendar-viewmode-item-prev, + .nut-calendar-viewmode .nut-calendar-viewmode-item-next { + color: $calendar-disable-color; + }Also applies to: 134-134
160-162: 避免使用硬编码的 !important
.nut-calendar-popup .nut-popup-title-right选择器使用了硬编码的!important。建议通过提高选择器优先级来替代:
- .nut-calendar-popup .nut-popup-title-right { - top: 7px !important; - } + .nut-calendar-popup.nut-popup .nut-popup-title-right { + top: 7px; + }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/packages/calendar/calendarviewmode.scss(1 hunks)src/packages/calendar/calendarviewmodeitem.tsx(1 hunks)
🧰 Additional context used
🪛 Biome (1.9.4)
src/packages/calendar/calendarviewmodeitem.tsx
[error] 179-180: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 455-455: Other switch clauses can erroneously access this declaration.
Wrap the declaration in a block to restrict its access to the switch clause.
The declaration is defined in this switch clause:
Unsafe fix: Wrap the declaration in a block.
(lint/correctness/noSwitchDeclarations)
[error] 459-463: Other switch clauses can erroneously access this declaration.
Wrap the declaration in a block to restrict its access to the switch clause.
The declaration is defined in this switch clause:
Unsafe fix: Wrap the declaration in a block.
(lint/correctness/noSwitchDeclarations)
[error] 470-470: Other switch clauses can erroneously access this declaration.
Wrap the declaration in a block to restrict its access to the switch clause.
The declaration is defined in this switch clause:
Unsafe fix: Wrap the declaration in a block.
(lint/correctness/noSwitchDeclarations)
[error] 604-607: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 615-615: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 615-618: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
🪛 GitHub Check: build
src/packages/calendar/calendarviewmodeitem.tsx
[failure] 212-212:
Argument of type 'CalendarValue' is not assignable to parameter of type 'string'.
[failure] 214-214:
Argument of type 'CalendarValue' is not assignable to parameter of type 'string'.
[failure] 217-217:
Argument of type 'CalendarValue' is not assignable to parameter of type 'string'.
🪛 GitHub Actions: CI
src/packages/calendar/calendarviewmodeitem.tsx
[error] 212-212: Argument of type 'CalendarValue' is not assignable to parameter of type 'string'.
🔇 Additional comments (1)
src/packages/calendar/calendarviewmode.scss (1)
91-93: 重复的类名定义
.nut-calendar-viewmode-content类在第53行已定义，这里重复定义可能导致样式冲突。建议合并这两处样式定义或使用不同的类名。
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## next #2985 +/- ##
==========================================
+ Coverage 85.56% 85.95% +0.38%
==========================================
Files 267 269 +2
Lines 18003 18495 +492
Branches 2726 2795 +69
==========================================
+ Hits 15405 15898 +493
+ Misses 2595 2594 -1
Partials 3 3 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Actionable comments posted: 9
🔭 Outside diff range comments (2)
src/packages/calendaritem/calendaritem.tsx (2)
446-448:⚠️ Potential issue修复 useEffect 依赖项
useEffect 缺少 initData 依赖项。
useEffect(() => { initData() - }, []) + }, [initData])注意：由于 initData 依赖了很多状态和属性，建议使用 useCallback 来优化：
const initData = useCallback(() => { // 现有实现... }, [startDates, endDates, currentDate, type, firstDayOfWeek])
286-337: 🛠️ Refactor suggestion优化 switch 语句中的变量作用域
switch 语句中的变量声明应该使用块级作用域，以防止变量泄漏。
switch (type) { case 'range': + { // 现有实现... + } break case 'multiple': + { const defaultArr = [] as string[] const obj: Record<string, unknown> = {} // 现有实现... + } break case 'week': + { const [y, m, d] = splitDate(currentDate[0]) const weekArr = getWeekDate(y, m, d, firstDayOfWeek) // 现有实现... + } break default: break }
♻️ Duplicate comments (2)
src/packages/calendar/calendar.taro.tsx (1)
153-153: 🛠️ Refactor suggestion避免使用 children prop。
根据 React 最佳实践，应该使用 JSX 元素传递子组件而不是通过 prop。
Also applies to: 172-172
🧰 Tools
🪛 Biome (1.9.4)
[error] 153-153: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
src/packages/calendar/calendarviewmodeitem.taro.tsx (1)
241-256: 🛠️ Refactor suggestion使用块作用域限制 switch case 中的变量
在 switch 语句中声明的变量可能会泄漏到其他 case。建议使用块作用域来限制变量的访问范围。
switch (viewMode) { case 'month': + { const months = getMonthsData() setPanelDate({ ...panelDate, months: months as any }) + } break case 'quarter': + { const quarters = getQuartersData() setPanelDate({ ...panelDate, quarters: quarters as any }) + } break default: break }🧰 Tools
🪛 Biome (1.9.4)
[error] 251-252: Other switch clauses can erroneously access this declaration.
Wrap the declaration in a block to restrict its access to the switch clause.The declaration is defined in this switch clause:
Unsafe fix: Wrap the declaration in a block.
(lint/correctness/noSwitchDeclarations)
🧹 Nitpick comments (17)
src/packages/calendar/demos/h5/demo102.tsx (1)
7-10: 建议移除生产环境中的控制台日志
select函数中的console.log应在生产环境中移除。const select = (param: string) => { - console.log('select', param) setDate(param) }src/packages/calendar/demos/taro/demo102.tsx (1)
1-34: 建议提取共享代码H5 和 Taro 版本的 Demo2 组件代码几乎完全相同，建议：
- 提取共享的逻辑到一个公共的 hooks 文件中
- 只在组件中保留平台特定的实现
建议创建一个共享的 hook：
// hooks/useCalendarMonth.ts import { useState } from 'react' export const useCalendarMonth = (initialDate: string) => { const [date, setDate] = useState(initialDate) const select = (param: string) => { setDate(param) } return { date, select, } }然后在组件中使用：
const Demo2 = () => { const { date, select } = useCalendarMonth('2025-02') return ( <div className="test-calendar-wrapper" style={{...}}> <Calendar viewMode="month" showTitle={false} value={date} defaultValue={date} startDate="2023-09-12" endDate="2027-10-19" onItemClick={select} /> </div> ) }src/packages/calendar/demos/h5/demo101.tsx (2)
5-5: 移除未使用的变量变量
d被声明但从未使用。-const d = new Date()
8-11: 建议移除生产环境中的控制台日志
select函数中的console.log应在生产环境中移除。const select = (param: string) => { - console.log('select quarter', param) setDate(param) }src/packages/calendar/demos/taro/demo101.tsx (2)
6-6: 建议使用标准的日期格式建议使用标准的 ISO 日期格式而不是自定义的季度格式，以提高代码的可维护性和兼容性。
-const [date, setDate] = useState('2026-Q2') +const [date, setDate] = useState('2026-04-01')
8-11: 优化回调函数的类型定义和实现需要改进以下几点：
- 添加具体的类型定义而不是使用
any- 移除生产环境中的 console.log
-const select = (param: string) => { - console.log('select quarter', param) +const select = (selectedDate: string) => { setDate(param) }src/packages/calendar/demo.taro.tsx (1)
35-37: 新功能的翻译键命名需要更加语义化。建议将翻译键命名改为更具语义化的格式，例如：
ees99933->calendar_quarter_panele2s99933->calendar_month_panele4s99933->calendar_week_numbersrc/packages/calendar/calendar.tsx (1)
196-196: 使用可选链操作符。为了更好的代码风格，建议使用可选链操作符：
-onDayClick && onDayClick(param) +onDayClick?.(param)🧰 Tools
🪛 Biome (1.9.4)
[error] 196-196: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
src/utils/date.ts (1)
361-368: 优化季度计算逻辑。建议添加输入验证并使用更简洁的实现：
export const getQuarter = (month: number): number => { + if (!Number.isInteger(month)) { + throw new Error('月份必须为整数') + } if (month < 1 || month > 12) { throw new Error('月份必须在 1 到 12 之间') } - // 计算季度 - const quarter = Math.floor((month - 1) / 3) + 1 - return quarter + return Math.ceil(month / 3) }src/packages/calendar/calendarviewmodeitem.taro.tsx (1)
245-246: 移除调试代码请移除生产环境中的 console.log 语句。
- console.log('monthts', months, panelDate) ... - console.log('quarters', quarters, panelDate)Also applies to: 251-252
src/packages/calendar/calendarviewmodeitem.tsx (1)
87-88: 明确数组类型定义
monthsData和monthsNum的类型定义不够明确。- const [monthsData] = useState<any[]>([]) - const [monthsNum] = useState<number>(0) + const [monthsData] = useState<CalendarMonthInfo[]>([]) + const [monthsNum] = useState<number>(0)src/packages/calendaritem/calendaritem.taro.tsx (2)
512-516: 优化滚动性能滚动事件处理函数可能会频繁触发，建议使用节流来优化性能。
+import { throttle } from '@/utils/throttle' -const monthsViewScroll = (e: any) => { +const monthsViewScroll = throttle((e: any) => { if (monthsData.length <= 1) return const scrollTop = (e.target as HTMLElement).scrollTop Taro.getEnv() === 'WEB' && setScrollTop(scrollTop) // 其余实现... -} +}, 16)
592-645: 重构 switch 语句结构switch 语句过长且复杂，建议将各个 case 的逻辑抽取为独立函数。
+const handleMultipleSelection = (newDate: string, days: any[]) => { + if (Array.isArray(currentDate)) { + if (currentDate.length > 0) { + // multiple 类型的处理逻辑 + } + } +} +const handleRangeSelection = (newDate: string, days: any[]) => { + if (Array.isArray(currentDate)) { + // range 类型的处理逻辑 + } +} switch (type) { case 'multiple': - // 当前的 multiple 实现 + handleMultipleSelection(newDate, days) break case 'range': - // 当前的 range 实现 + handleRangeSelection(newDate, days) break // 其他 case... }🧰 Tools
🪛 Biome (1.9.4)
[error] 635-636: Other switch clauses can erroneously access this declaration.
Wrap the declaration in a block to restrict its access to the switch clause.The declaration is defined in this switch clause:
Unsafe fix: Wrap the declaration in a block.
(lint/correctness/noSwitchDeclarations)
src/packages/calendar/doc.en-US.md (1)
109-109: 建议完善英文文档说明英文版本的
viewMode属性说明过于简单，建议补充以下内容：
- 各个视图模式（日、月、季度）的具体功能说明
- 不同模式下的使用场景
建议修改为：
-| viewMode `v2.7.9` | view mode | `day` \| `month` \| `quarter` | `day` | +| viewMode `v2.7.9` | Panel display mode, supports different calendar views: daily view (day), monthly overview (month), or quarterly view (quarter) | `day` \| `month` \| `quarter` | `day` |src/packages/calendar/calendar.scss (3)
67-69: 建议优化收缩模式的内边距当前使用固定的
padding-left: 10%可能在不同屏幕尺寸下表现不一致。建议使用更灵活的方式：
- padding-left: 10%; + padding-left: var(--nutui-calendar-shrink-padding, 10%);
119-133: 周数显示样式结构清晰周数显示的样式结构合理，但建议：
- 考虑添加响应式布局支持
- 使用变量控制关键尺寸
建议添加以下变量：
+$calendar-weeknumber-width: 35% !default; +$calendar-weeknumber-font-size: 14px !default; &-weeknumber { - width: 35%; + width: $calendar-weeknumber-width; &-index { // ... - font-size: 14px; + font-size: $calendar-weeknumber-font-size; // ... } }
218-225: 禁用状态样式优化禁用状态的样式处理合理，建议添加过渡效果提升交互体验。
&-disabled { + transition: background-color 0.3s, color 0.3s; background-color: $calendar-choose-disable-background-color; color: $calendar-disable-color !important;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (25)
src/packages/calendar/calendar.scss(4 hunks)src/packages/calendar/calendar.taro.tsx(8 hunks)src/packages/calendar/calendar.tsx(8 hunks)src/packages/calendar/calendarviewmode.scss(1 hunks)src/packages/calendar/calendarviewmodeitem.taro.tsx(1 hunks)src/packages/calendar/calendarviewmodeitem.tsx(1 hunks)src/packages/calendar/demo.taro.tsx(5 hunks)src/packages/calendar/demo.tsx(5 hunks)src/packages/calendar/demos/h5/demo101.tsx(1 hunks)src/packages/calendar/demos/h5/demo102.tsx(1 hunks)src/packages/calendar/demos/h5/demo103.tsx(1 hunks)src/packages/calendar/demos/h5/demo11.tsx(1 hunks)src/packages/calendar/demos/taro/demo101.tsx(1 hunks)src/packages/calendar/demos/taro/demo102.tsx(1 hunks)src/packages/calendar/demos/taro/demo103.tsx(1 hunks)src/packages/calendar/demos/taro/demo11.tsx(1 hunks)src/packages/calendar/doc.en-US.md(1 hunks)src/packages/calendar/doc.md(1 hunks)src/packages/calendar/doc.taro.md(1 hunks)src/packages/calendar/doc.zh-TW.md(1 hunks)src/packages/calendar/types.ts(1 hunks)src/packages/calendaritem/calendaritem.taro.tsx(17 hunks)src/packages/calendaritem/calendaritem.tsx(18 hunks)src/packages/configprovider/types.ts(1 hunks)src/utils/date.ts(4 hunks)
✅ Files skipped from review due to trivial changes (2)
- src/packages/calendar/demos/h5/demo11.tsx
- src/packages/calendar/demos/taro/demo11.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- src/packages/calendar/calendarviewmode.scss
🧰 Additional context used
🪛 Biome (1.9.4)
src/packages/calendar/calendarviewmodeitem.tsx
[error] 114-115: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 251-252: Other switch clauses can erroneously access this declaration.
Wrap the declaration in a block to restrict its access to the switch clause.
The declaration is defined in this switch clause:
Unsafe fix: Wrap the declaration in a block.
(lint/correctness/noSwitchDeclarations)
[error] 266-267: Other switch clauses can erroneously access this declaration.
Wrap the declaration in a block to restrict its access to the switch clause.
The declaration is defined in this switch clause:
Unsafe fix: Wrap the declaration in a block.
(lint/correctness/noSwitchDeclarations)
[error] 367-370: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
src/packages/calendar/calendarviewmodeitem.taro.tsx
[error] 114-115: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 251-252: Other switch clauses can erroneously access this declaration.
Wrap the declaration in a block to restrict its access to the switch clause.
The declaration is defined in this switch clause:
Unsafe fix: Wrap the declaration in a block.
(lint/correctness/noSwitchDeclarations)
[error] 266-267: Other switch clauses can erroneously access this declaration.
Wrap the declaration in a block to restrict its access to the switch clause.
The declaration is defined in this switch clause:
Unsafe fix: Wrap the declaration in a block.
(lint/correctness/noSwitchDeclarations)
[error] 367-370: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
src/packages/calendaritem/calendaritem.taro.tsx
[error] 302-302: Other switch clauses can erroneously access this declaration.
Wrap the declaration in a block to restrict its access to the switch clause.
The declaration is defined in this switch clause:
Unsafe fix: Wrap the declaration in a block.
(lint/correctness/noSwitchDeclarations)
[error] 304-304: Other switch clauses can erroneously access this declaration.
Wrap the declaration in a block to restrict its access to the switch clause.
The declaration is defined in this switch clause:
Unsafe fix: Wrap the declaration in a block.
(lint/correctness/noSwitchDeclarations)
[error] 320-321: Other switch clauses can erroneously access this declaration.
Wrap the declaration in a block to restrict its access to the switch clause.
The declaration is defined in this switch clause:
Unsafe fix: Wrap the declaration in a block.
(lint/correctness/noSwitchDeclarations)
[error] 322-323: Other switch clauses can erroneously access this declaration.
Wrap the declaration in a block to restrict its access to the switch clause.
The declaration is defined in this switch clause:
Unsafe fix: Wrap the declaration in a block.
(lint/correctness/noSwitchDeclarations)
[error] 635-636: Other switch clauses can erroneously access this declaration.
Wrap the declaration in a block to restrict its access to the switch clause.
The declaration is defined in this switch clause:
Unsafe fix: Wrap the declaration in a block.
(lint/correctness/noSwitchDeclarations)
[error] 677-678: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 678-679: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
src/packages/calendar/calendar.tsx
[error] 196-196: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 153-153: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 172-172: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
src/packages/calendar/calendar.taro.tsx
[error] 153-153: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 172-172: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
🪛 GitHub Check: lint
src/packages/calendar/calendarviewmodeitem.tsx
[warning] 263-263:
React Hook useEffect has a missing dependency: 'initData'. Either include it or remove the dependency array
src/packages/calendar/calendarviewmodeitem.taro.tsx
[warning] 263-263:
React Hook useEffect has a missing dependency: 'initData'. Either include it or remove the dependency array
🪛 GitHub Actions: CI
src/packages/calendaritem/calendaritem.tsx
[error] 409-409: TypeError: Cannot read properties of null (reading 'clientHeight')
🔇 Additional comments (10)
src/packages/configprovider/types.ts (1)
320-320: 新增日历面板项宽度的 CSS 变量名称变量命名规范且清晰地表达了其用途，与现有的命名约定保持一致。
src/packages/calendar/types.ts (1)
6-14: 类型定义清晰且结构合理！新增的
CalendarMonth和CalendarQuarter接口定义明确，与现有的类型定义保持一致的风格。src/packages/calendar/demos/taro/demo101.tsx (1)
23-31: 验证日期范围的合理性请确认起始日期和结束日期的设置是否合理，当前跨度接近5年。
src/packages/calendar/demos/taro/demo103.tsx (1)
7-12: 存在与 H5 版本相同的问题此代码段存在与 H5 版本相同的类型安全性和数据处理问题。
src/packages/calendar/demo.tsx (1)
118-123: 代码结构清晰新增的演示代码组织结构清晰，功能分类合理。
src/packages/calendar/doc.md (1)
109-109: 新属性文档完善且清晰！
viewMode属性的文档说明完整，包含了版本号标记、类型定义和默认值。src/packages/calendar/doc.zh-TW.md (1)
109-109: 繁體中文文檔翻譯準確！
viewMode屬性的繁體中文文檔與其他語言版本保持一致，翻譯準確。src/packages/calendar/doc.taro.md (1)
109-109: Taro 版本文档同步更新完成！
viewMode属性在 Taro 版本中的文档说明完整，与其他版本保持一致。src/packages/calendar/calendar.scss (2)
1-2: 样式文件拆分合理！将视图模式相关样式拆分到单独的文件中，有助于代码组织和维护。
229-231: 收缩模式样式简洁明确使用
display: flex实现收缩模式的布局合理。
| value={date} | ||
| defaultValue={date} |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
建议添加日期格式验证
对于 value 和 defaultValue 的日期字符串，建议添加格式验证以确保符合 'YYYY-MM' 格式。
🌐 Web query:
如何在 React TypeScript 中验证日期字符串格式？
💡 Result:
在 React TypeScript 中验证日期字符串格式可通过以下方法实现，结合类型校验和运行时验证：
核心实现步骤
-
定义模板字面量类型
通过 TypeScript 的模板字面量类型限定日期格式：type YYYY = `${number}${number}${number}${number}` type MM = `0${1|2|3|4|5|6|7|8|9}` | `1${0|1|2}` type DD = `${0|1|2}${number}` | `3${0|1}` type RawDateString = `${YYYY}-${MM}-${DD}`;
-
创建品牌类型增强安全性
通过交叉类型添加品牌标识：type Brand<T, B> = T & { __brand: B }; type ValidDateString = Brand<RawDateString, 'ValidDate'>;
-
编写验证函数（含正则+实际日期校验）
const isValidDate = (str: string): str is ValidDateString => { // 格式验证 if (!/^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])$/.test(str)) return false; // 实际日期验证 const date = new Date(str); return !isNaN(date.getTime()) && date.toISOString().slice(0,10) === str; };
完整示例组件
import { useState } from 'react';
const DateValidator = () => {
const [input, setInput] = useState('');
const [isValid, setIsValid] = useState(false);
const validateDate = (value: string) => {
setInput(value);
setIsValid(isValidDate(value));
};
return (
<div>
<input
type="text"
value={input}
onChange={(e) => validateDate(e.target.value)}
placeholder="YYYY-MM-DD"
/>
{isValid ?
<p style={{color: 'green'}}>✓ 有效日期</p> :
<p style={{color: 'red'}}>× 无效日期格式</p>}
</div>
);
};关键优化点
-
双重验证机制
- 正则表达式
/^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[0-9]|3[1])$/确保格式正确[1][7] new Date()+ ISO 转换验证实际日期有效性[4][7]
- 正则表达式
-
类型谓词函数
使用str is ValidDateString类型谓词，可在条件判断后自动收窄类型[1] -
错误边界处理
组件中包含明确的校验状态反馈，支持实时验证[8]
备选方案对比
| 方法 | 优点 | 缺点 |
|---|---|---|
| Zod库校验 | Schema声明式，支持复杂校验逻辑 | 需额外依赖安装 |
| Moment.js | 内置日期有效性检查 | 包体积较大，已不推荐使用 |
| Date原生对象 | 零依赖 | 时区处理需要额外注意 |
建议在需要国际化的项目中使用 date-fns + Zod 组合方案，常规项目采用本文的轻量级实现即可[5][8]。
Citations:
- 1: https://juejin.cn/post/7089616842221682724
- 2: https://blog.csdn.net/e295166319/article/details/87974243
- 3: https://blog.csdn.net/qq_37904209/article/details/104983810
- 4: https://developer.aliyun.com/article/1240764
- 5: https://developer.aliyun.com/article/1600323
- 6: https://www.cnblogs.com/momo798/p/17151903.html
- 7: https://wenku.csdn.net/answer/87dffdc97c85422387302cb87dfc2e22
- 8: https://my.oschina.net/emacs_8524933/blog/16583230
- 9: https://developer.aliyun.com/article/910463
- 10: https://juejin.cn/post/6844903649907310605
请为传入的日期字符串添加格式验证
在文件 src/packages/calendar/demos/h5/demo102.tsx 第 25-26 行，将 date 直接用于 value 和 defaultValue 时，并没有验证日期字符串是否符合预期的 'YYYY-MM' 格式。为防止数据格式不正确导致潜在意外，建议在将数据传递给组件之前添加日期格式验证。
建议的实现方式：
- 使用正则表达式进行轻量级的运行时格式校验，例如：
const isValidYearMonth = (str: string): boolean => /^\d{4}-(0[1-9]|1[0-2])$/.test(str);
- 如果需要更严格的校验，可以考虑结合 TypeScript 模板字面量类型及品牌类型，来在静态层面和运行时实现双重验证（参见 “如何在 React TypeScript 中验证日期字符串格式” 的实现方案）。
请根据项目实际需求调整并加入相应的校验代码，以确保传入组件的日期数据始终符合预期格式。
| value={date} | ||
| defaultValue={date} |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
建议添加季度格式验证
对于 value 和 defaultValue 的季度字符串，建议添加格式验证以确保符合 'YYYY-Q[1-4]' 格式。
建议运行以下脚本来验证当前代码库中是否已有相关的验证函数：
🏁 Script executed:
#!/bin/bash
# 搜索是否存在日期格式验证相关的函数
rg -i "validate.*date|date.*format|quarter.*format" src/Length of output: 2176
添加季度格式验证
在文件 src/packages/calendar/demos/h5/demo101.tsx 的第 26-27 行，目前对传入的 value 与 defaultValue （季度字符串）没有进行格式验证。执行脚本后未发现现成的季度格式验证函数，因此建议新增一个专门用于验证季度字符串格式的函数，确保其符合 'YYYY-Q[1-4]' 的格式要求。
- 请在使用季度字符串之前调用此验证函数，避免格式错误。
- 若有类似验证需求的场景，可考虑统一调用该验证逻辑，以保障全局一致性。
| const setChooseValue = (chooseData: any) => { | ||
| const dateArr = chooseData.map((item: any) => { | ||
| return item[3] | ||
| }) | ||
| setDate([...dateArr]) | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
改进类型安全性和数据处理逻辑
当前实现存在以下问题：
- 使用
any类型降低了代码的类型安全性 - 直接访问数组索引
item[3]容易导致运行时错误
建议如下改进：
-const setChooseValue = (chooseData: any) => {
- const dateArr = chooseData.map((item: any) => {
- return item[3]
- })
- setDate([...dateArr])
+interface DateItem {
+ date: string;
+ [key: string]: any;
+}
+const setChooseValue = (chooseData: DateItem[]) => {
+ const dateArr = chooseData.map(item => item.date)
+ setDate(dateArr)
+}📝 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.
| const setChooseValue = (chooseData: any) => { | |
| const dateArr = chooseData.map((item: any) => { | |
| return item[3] | |
| }) | |
| setDate([...dateArr]) | |
| } | |
| interface DateItem { | |
| date: string; | |
| [key: string]: any; | |
| } | |
| const setChooseValue = (chooseData: DateItem[]) => { | |
| const dateArr = chooseData.map(item => item.date) | |
| setDate(dateArr) | |
| } |
github-actions
bot
added
the
action:review
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (8)
src/packages/calendar/calendar.taro.tsx (1)
73-73: 建议改进回调函数的默认实现空的回调函数实现可能会导致调试困难。建议添加开发环境下的警告信息。
- onItemClick: () => {}, + onItemClick: (param: string) => { + if (process.env.NODE_ENV !== 'production') { + console.warn('NutCalendar: onItemClick callback is not implemented'); + } + },src/packages/calendar/calendar.tsx (3)
149-198: 优化组件属性传递逻辑当前代码在
CalendarViewModeItem和CalendarItem中存在大量重复的属性传递。建议提取共同属性以提高代码可维护性。建议重构如下：
+ const commonProps = { + ref: calendarRef, + style, + className, + type, + title: title || locale.calendaritem.title, + defaultValue, + startDate, + endDate, + showTitle, + scrollAnimation, + renderDay, + onPageChange: yearMonthChange, + } return ( <> {viewMode !== 'day' ? ( <CalendarViewModeItem - ref={calendarRef} - style={style} - className={className} - type={type} - title={title || locale.calendaritem.title} - defaultValue={defaultValue} - startDate={startDate} - endDate={endDate} - showTitle={showTitle} - scrollAnimation={scrollAnimation} - renderDay={renderDay} - onPageChange={yearMonthChange} + {...commonProps} viewMode={viewMode} value={value} onItemClick={onItemClick} > {children} </CalendarViewModeItem> ) : ( <CalendarItem - ref={calendarRef} - style={style} - className={className} - type={type} - title={title || locale.calendaritem.title} - defaultValue={defaultValue} - startDate={startDate} - endDate={endDate} - showTitle={showTitle} - scrollAnimation={scrollAnimation} - renderDay={renderDay} - onPageChange={yearMonthChange} + {...commonProps} autoBackfill={autoBackfill} showSubTitle={showSubTitle} showMonthNumber={showMonthNumber} // ... 其他特定属性 > {children} </CalendarItem> )} </> )🧰 Tools
🪛 Biome (1.9.4)
[error] 196-196: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 153-153: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 172-172: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
196-196: 优化事件处理器的条件检查当前的条件检查可以使用可选链操作符来简化。
建议修改如下：
- onDayClick={(param) => onDayClick && onDayClick(param)} + onDayClick={(param) => onDayClick?.(param)}🧰 Tools
🪛 Biome (1.9.4)
[error] 196-196: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
206-206: 建议添加条件判断的注释说明当前代码中
popup组件仅在viewMode === 'day'时显示，但缺少相关说明。建议添加注释解释这个设计决策的原因，以帮助其他开发者理解。建议添加如下注释：
+ // 仅在日视图模式下显示弹出层，月度和季度视图直接渲染在页面中 {popup && viewMode === 'day' ? (src/utils/date.ts (4)
150-156: 建议提取魔法数字为命名常量并添加输入验证。建议进行以下改进：
- 将 86400000 提取为模块级别的命名常量
- 添加对 time 参数的输入验证
+const ONE_DAY_IN_MS = 86400000 // 24 * 60 * 60 * 1000 + export const getWeekOfYear = (time: number) => { + if (isNaN(time) || !Number.isFinite(time)) { + throw new Error('Invalid timestamp') + } - const oneDayTime = 86400000 // 24 * 60 * 60 * 1000 const startOfYear = new Date(new Date(time).getFullYear(), 0, 1) // 举例1/1共计多少天 - const days = Math.round((time - startOfYear.valueOf()) / oneDayTime) + const days = Math.round((time - startOfYear.valueOf()) / ONE_DAY_IN_MS) return Math.ceil((days + (startOfYear.getDay() + 1)) / 7) }
257-286: 建议重构月份操作函数以减少代码重复。
getPreMonths和getMonths函数有很多重复代码。建议：
- 将 type 参数定义为字面量联合类型
- 合并这两个函数为一个更通用的函数
+type MonthType = 'prev' | 'curr' | 'next' + -export const getPreMonths = (type: string, year: number, month: number) => { - const preMonth = +month - 1 - const months = Array.from(Array(preMonth), (v, k) => { - return { - year, - month: k + 1, - type, - } - }) - return months -} - -export const getMonths = ( - type: string, - year: number, - month: number, - endMonth: number = 12 -) => { - const nextMonth = endMonth - month + 1 - const months = Array.from(Array(nextMonth), (v, k) => { - return { - year, - month: k + month, - type, - } - }) - return months -} +export const getMonthRange = ( + type: MonthType, + year: number, + startMonth: number, + endMonth: number = 12 +) => { + if (startMonth < 1 || startMonth > 12 || endMonth < 1 || endMonth > 12) { + throw new Error('Month must be between 1 and 12') + } + const count = endMonth - startMonth + 1 + return Array.from(Array(count), (_, k) => ({ + year, + month: k + startMonth, + type, + })) +}
289-329: 建议改进函数的可读性和可维护性。建议进行以下改进：
- 添加更详细的函数文档说明，包括参数和返回值的类型说明
- 使用更具描述性的变量名
- 添加对输入参数的验证
+/** + * 计算指定年份的所有周信息 + * @param year 年份 + * @param firstDayOfWeek 一周的第一天（0-6，0 表示周日） + * @returns 包含每周起止日期的数组 + */ export const getTotalWeeksInYear = (year: number, firstDayOfWeek?: number) => { + if (!Number.isInteger(year)) { + throw new Error('Year must be an integer') + } + if (firstDayOfWeek !== undefined && (firstDayOfWeek < 0 || firstDayOfWeek > 6)) { + throw new Error('First day of week must be between 0 and 6') + } const weeks = [] const firstDayOfYear = new Date(year, 0, 1) firstDayOfWeek = firstDayOfWeek || firstDayOfYear.getDay() - console.log('firstDayOfWeek', firstDayOfWeek, firstDayOfYear.getDay())
346-400: 建议重构季度相关函数以提高代码复用。建议进行以下改进：
- 将季度验证逻辑提取为共享函数
- 合并相似的季度计算函数
- 添加类型定义以增强类型安全性
+type QuarterType = 'prev' | 'curr' | 'next' + +interface Quarter { + year: number + quarter: number + type: QuarterType +} + +const validateMonth = (month: number): void => { + if (month < 1 || month > 12) { + throw new Error('月份必须在 1 到 12 之间') + } +} + export const getQuarter = (month: number): number => { - if (month < 1 || month > 12) { - throw new Error('月份必须在 1 到 12 之间') - } + validateMonth(month) return Math.floor((month - 1) / 3) + 1 } + +export const getQuarterRange = ( + type: QuarterType, + year: number, + startMonth: number, + endMonth: number = 12, + step: number = 3 +): Quarter[] => { + validateMonth(startMonth) + validateMonth(endMonth) + const quarters: Quarter[] = [] + for (let month = startMonth; month <= endMonth; month += step) { + quarters.push({ + year, + quarter: getQuarter(month), + type, + }) + } + return quarters +}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
src/packages/calendar/calendar.taro.tsx(9 hunks)src/packages/calendar/calendar.tsx(9 hunks)src/packages/calendaritem/calendaritem.taro.tsx(6 hunks)src/packages/calendaritem/calendaritem.tsx(9 hunks)src/utils/date.ts(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- src/packages/calendaritem/calendaritem.taro.tsx
- src/packages/calendaritem/calendaritem.tsx
🧰 Additional context used
🪛 Biome (1.9.4)
src/packages/calendar/calendar.taro.tsx
[error] 153-153: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 172-172: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
src/packages/calendar/calendar.tsx
[error] 196-196: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 153-153: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 172-172: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
🔇 Additional comments (4)
src/packages/calendar/calendar.taro.tsx (1)
206-206: Popup 条件渲染的逻辑优化正确添加
viewMode === 'day'的条件判断很合理，确保只在日视图模式下显示弹出层。src/packages/calendar/calendar.tsx (1)
153-153: 避免使用 children prop 传递子组件Also applies to: 172-172
🧰 Tools
🪛 Biome (1.9.4)
[error] 153-153: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
src/utils/date.ts (2)
294-294: 移除调试代码。请移除 console.log 语句。
331-337: 代码看起来不错！格式化函数实现简洁，使用了合适的字符串处理方法。
| children={children} | ||
| type={type} |
There was a problem hiding this comment.
需要修正 children 属性的传递方式
直接通过 prop 传递 children 不符合 React 的最佳实践。
建议修改如下：
- <CalendarViewModeItem
- children={children}
+ <CalendarViewModeItem>
+ {children}
...
- />
+ </CalendarViewModeItem>
- <CalendarItem
- children={children}
+ <CalendarItem>
+ {children}
...
- />
+ </CalendarItem>Also applies to: 172-173
🧰 Tools
🪛 Biome (1.9.4)
[error] 153-153: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
There was a problem hiding this comment.
Actionable comments posted: 5
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
src/packages/calendar/__tests__/__snapshots__/calendar.spec.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (1)
src/packages/calendar/calendarviewmodeitem.tsx(1 hunks)
🧰 Additional context used
🪛 Biome (1.9.4)
src/packages/calendar/calendarviewmodeitem.tsx
[error] 114-115: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 251-252: Other switch clauses can erroneously access this declaration.
Wrap the declaration in a block to restrict its access to the switch clause.
The declaration is defined in this switch clause:
Unsafe fix: Wrap the declaration in a block.
(lint/correctness/noSwitchDeclarations)
[error] 266-267: Other switch clauses can erroneously access this declaration.
Wrap the declaration in a block to restrict its access to the switch clause.
The declaration is defined in this switch clause:
Unsafe fix: Wrap the declaration in a block.
(lint/correctness/noSwitchDeclarations)
[error] 367-370: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
| scrollAnimation: boolean | ||
| renderDay: (date: CalendarDay) => string | JSX.Element | ||
| onItemClick: (data: string) => void | ||
| onPageChange: (data: any) => void |
|
Taro h5 点击后滚动位置不对。 |
There was a problem hiding this comment.
Actionable comments posted: 3
♻️ Duplicate comments (7)
src/packages/calendar/calendarviewmode.scss (1)
53-58:⚠️ Potential issue重复定义内容区域类样式
此处定义的
&-content类样式与第156-158行定义的.nut-calendar-popup .nut-popup-title-right内容重复。建议合并这些样式定义或使用不同的类名。修复重复定义问题：
- &-content { - flex: 1; - width: 100%; - display: block; - overflow-y: auto; - } // 在其他地方引用此样式src/packages/calendar/calendarviewmodeitem.taro.tsx (6)
120-127:⚠️ Potential issueusePropsValue 使用不完善
finalValue的类型与value和defaultValue不一致，且onChange回调是空实现。const [innerValue, setInnerValue] = usePropsValue({ value, defaultValue, - finalValue: [], - onChange: (val) => {}, + finalValue: '' as CalendarValue, + onChange: (val) => { + props.onChange?.(val) + }, })
134-139:⚠️ Potential issueDOM操作缺少空值检查
在
getMonthsPanel和getMonthsRef方法中，直接将current断言为HTMLDivElement可能导致空指针异常。const getMonthsPanel = () => { - return monthsPanel.current as HTMLDivElement + if (!monthsPanel.current) { + throw new Error('monthsPanel is not initialized') + } + return monthsPanel.current } const getMonthsRef = () => { - return monthsRef.current as HTMLDivElement + if (!monthsRef.current) { + throw new Error('monthsRef is not initialized') + } + return monthsRef.current }
309-311:⚠️ Potential issueuseEffect 依赖项不完整
useEffect 依赖项不完整，应添加
requestAniFrameFunc和viewMode。useEffect(() => { requestAniFrameFunc(viewMode) - }, [panelDate]) + }, [panelDate, requestAniFrameFunc, viewMode])🧰 Tools
🪛 GitHub Check: lint
[warning] 311-311:
React Hook useEffect has missing dependencies: 'requestAniFrameFunc' and 'viewMode'. Either include them or remove the dependency array
313-315:⚠️ Potential issueuseEffect 缺少依赖项
此处的 useEffect 依赖数组中缺少
initData。useEffect(() => { initData() - }, []) + }, [initData])建议使用
useCallback包裹initData函数以避免不必要的重新渲染：const initData = useCallback(() => { // 函数内容保持不变 }, [viewMode, startDates, endDates, isCurrYear]);🧰 Tools
🪛 GitHub Check: lint
[warning] 315-315:
React Hook useEffect has a missing dependency: 'initData'. Either include it or remove the dependency array
331-344:⚠️ Potential issue滚动动画可能导致内存泄漏
滚动动画的 interval 在组件卸载时需要清理，否则可能导致内存泄漏。
+ const intervalRef = useRef<NodeJS.Timeout>() const scrollToDate = (date: string) => { // ... - const interval = setInterval(() => { + intervalRef.current = setInterval(() => { // ... - clearInterval(interval) + clearInterval(intervalRef.current) } }, 40) // ... } + useEffect(() => { + return () => { + if (intervalRef.current) { + clearInterval(intervalRef.current) + } + } + }, [])
417-421:⚠️ Potential issue视图模式索引类型错误
在使用
viewMode作为索引和调用handleItemClick时需要确保类型安全。- onClick={() => handleItemClick(viewMode, item)} + onClick={() => handleItemClick(viewMode ?? 'month', item)} key={index} > <div className={`${classPrefix}-item-${item.type}`}> - {renderDay ? renderDay(item) : `${item[viewMode]}${units[viewMode]}`} + {renderDay ? renderDay(item) : `${item[viewMode ?? 'month']}${units[viewMode ?? 'month']}`}
🧹 Nitpick comments (4)
src/packages/calendar/calendarviewmode.scss (1)
1-27: 日历视图模式基础布局样式新增了视图模式的基础样式定义，结构清晰合理。但有些部分与主日历样式存在重复，建议考虑提取共享样式到公共文件中。
为避免代码重复，可以考虑将相同的样式抽取为混合(mixin)或者共享变量：
// 示例：创建共享的混合 @mixin calendar-base { position: relative; display: flex; flex-direction: column; flex: 1; font-size: $calendar-base-font-size; background-color: $color-background-overlay; color: $color-title; overflow: hidden; height: 100%; } // 使用 .nut-calendar { @include calendar-base; // 其他特定样式... } .nut-calendar-viewmode { @include calendar-base; // 其他特定样式... }src/utils/date.ts (3)
151-152: 使用更准确的计算方法。您对一年内日期计算的方法是正确的，但建议考虑使用
Math.floor而不是Math.round，因为四舍五入可能在某些边缘情况下导致不精确的结果。- const dayOfYear = Math.round( + const dayOfYear = Math.floor( (dateNow.valueOf() - dateFirst.valueOf()) / MILLISECONDS_PER_DAY )
348-386: 函数命名与返回值不匹配。函数
getTotalWeeksInYear的命名暗示它返回一个数字（总周数），但实际上它返回的是一个包含每周起止日期的对象数组。建议更改函数名称以更准确地反映其功能，例如getWeeksInYear。- export const getTotalWeeksInYear = (year: number, firstDayOfWeek?: number) => { + export const getWeeksInYear = (year: number, firstDayOfWeek?: number) => {
396-410: 简化季度计算。
getQuarter函数中的季度计算是正确的，但可以使用取模运算使代码更简洁。- const quarter = Math.floor((month - 1) / 3) + 1 + const quarter = Math.ceil(month / 3)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (16)
src/locales/id-ID.ts(1 hunks)src/locales/tr-TR.ts(1 hunks)src/locales/zh-UG.ts(1 hunks)src/packages/calendar/calendar.scss(4 hunks)src/packages/calendar/calendarviewmode.scss(1 hunks)src/packages/calendar/calendarviewmodeitem.taro.tsx(1 hunks)src/packages/calendar/calendarviewmodeitem.tsx(1 hunks)src/packages/calendar/demos/h5/demo11.tsx(1 hunks)src/packages/calendar/doc.en-US.md(1 hunks)src/packages/calendar/doc.md(1 hunks)src/packages/calendar/doc.taro.md(1 hunks)src/packages/calendar/doc.zh-TW.md(1 hunks)src/packages/calendar/types.ts(2 hunks)src/packages/calendaritem/calendaritem.taro.tsx(13 hunks)src/packages/calendaritem/calendaritem.tsx(15 hunks)src/utils/date.ts(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (11)
- src/packages/calendar/demos/h5/demo11.tsx
- src/packages/calendar/doc.md
- src/packages/calendar/doc.taro.md
- src/packages/calendar/doc.zh-TW.md
- src/packages/calendar/doc.en-US.md
- src/locales/id-ID.ts
- src/packages/calendar/calendarviewmodeitem.tsx
- src/locales/zh-UG.ts
- src/packages/calendaritem/calendaritem.tsx
- src/packages/calendaritem/calendaritem.taro.tsx
- src/locales/tr-TR.ts
🧰 Additional context used
🪛 GitHub Check: lint
src/packages/calendar/calendarviewmodeitem.taro.tsx
[warning] 315-315:
React Hook useEffect has a missing dependency: 'initData'. Either include it or remove the dependency array
[warning] 311-311:
React Hook useEffect has missing dependencies: 'requestAniFrameFunc' and 'viewMode'. Either include them or remove the dependency array
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build
🔇 Additional comments (19)
src/packages/calendar/calendar.scss (4)
2-2: 新增 calendarviewmode.scss 导入导入了新的视图模式样式文件，支持日历组件的多视图模式展示。
67-69: 周视图收缩样式定义合理添加收缩样式支持视图模式切换时的布局调整，左侧填充确保了内容居中显示。
119-133: 周数视图样式定义增加了周数视图相关样式，设置了合适的宽度和对齐方式。但建议使用 SCSS 变量替代硬编码的字体权重和字号。
&-weeknumber { width: 35%; &-index { display: flex; align-items: center; justify-content: center; flex-direction: column; position: relative; height: $calendar-day-height; - font-weight: $font-weight; - font-size: $font-size-base; + font-weight: $calendar-day-font-weight; + font-size: $calendar-base-font-size; margin-bottom: 4px; color: $color-text-help; } }
229-231: 添加收缩布局支持为日历组件添加了收缩布局类，使用 flex 布局实现更灵活的展示效果。
src/packages/calendar/calendarviewmode.scss (2)
91-135: 视图模式项目样式定义新增的面板项目样式实现了多种状态（活动、前一项、后一项）的样式定义。但同样存在字体大小硬编码的问题，建议使用变量代替。
&-item { // ...其他属性保持不变 &-info-curr { position: absolute; bottom: 5px; width: 100%; - font-size: $font-size-small; + font-size: $calendar-sub-title-font-size; line-height: 14px; } &-info { position: absolute; bottom: 5px; width: 100%; - font-size: $font-size-small; + font-size: $calendar-sub-title-font-size; line-height: 14px; } // ...其他属性保持不变 }
156-181: RTL支持样式添加了对从右到左（RTL）布局的支持，保证了国际化场景下的适配。
src/packages/calendar/calendarviewmodeitem.taro.tsx (5)
1-17: 导入必要的依赖和工具函数导入了日期处理、渲染动画等功能所需的依赖，支持视图模式切换功能的实现。
28-35: 定义类型和常量定义了日历引用类型和面板高度常量，为组件提供了类型安全和可维护性。高度常量使用明确的命名，便于理解和使用。
36-63: 组件属性定义和默认值定义了视图模式组件的属性接口和默认值。但
onPageChange的参数类型定义为any过于宽松，建议定义更具体的类型。- onPageChange: (data: any) => void + onPageChange: (data: [number, number, string]) => void
444-463: 视图内容渲染实现视图内容渲染逻辑清晰，使用
ScrollView实现滚动功能，并通过 refs 控制渲染位置。注意到onScroll回调被注释掉了，如需要监听滚动事件可以考虑实现该回调。
465-471: 完整组件实现组件结构清晰，使用合适的类名和样式，渲染头部和内容区域，整体实现符合组件设计规范。
src/packages/calendar/types.ts (5)
6-11: 添加月份类型定义为月份视图添加了类型定义，包含年、月及可选的年月组合字符串和类型属性，结构清晰。
13-18: 添加季度类型定义为季度视图添加了类型定义，包含年、季度及可选的年季度组合字符串和类型属性，结构与月份类型保持一致。
24-24: 扩展月信息类型为
CalendarMonthInfo接口添加了可选的weekNo属性，支持周数展示功能。
37-43: 月份面板信息类型定义了月份面板信息类型，包含年份、月份数组、CSS高度、滚动位置和当前年份标志，结构完整适合面板渲染需求。
45-51: 季度面板信息类型定义了季度面板信息类型，与月份面板信息类型结构保持一致，适合季度视图的渲染需求。
src/utils/date.ts (3)
121-135: 重命名函数并改进参数功能。您正确地将
getMonthWeek重命名为getWeekOfMonth并添加了date参数的默认值，这样的更改提高了函数的可用性。
316-327: 更新函数注释。函数注释 "获取当前年月前的月份" 与其他函数的注释重复，请确保每个函数都有准确且唯一的描述。
137-472: 需要增加测试覆盖率。新增的日期工具函数缺少测试覆盖，特别是
getWeekOfYearByYMD、getWeekNosOfYear和getTotalWeeksInYear这些复杂的计算函数。建议添加单元测试以确保函数在各种场景下的正确性。建议测试以下场景：
- 常规输入
- 边界条件（年初、年末）
- 闰年情况
- 无效输入
#!/bin/bash # 检查是否有现有的测试文件覆盖这些新函数 echo "查找日期工具函数的测试文件..." fd -t f -e ts -e tsx "date.*test|test.*date" --exec grep -l "getWeekOfYearByYMD\|getWeekNosOfYear\|getTotalWeeksInYear" {} \; echo "检查测试覆盖率报告..." fd -t f "coverage-.*json" --exec grep -l "src/utils/date.ts" {} \;
src/utils/date.ts
Outdated
|
|
||
| export const getWeekOfYearByTime = (time: number) => { | ||
| const MILLISECONDS_PER_DAY = 86400000 // 24 * 60 * 60 * 1000 | ||
| const startOfYear = new Date(new Date(time).getFullYear(), 0, 1) | ||
| // 举例1/1共计多少天 | ||
| const days = Math.round((time - startOfYear.valueOf()) / MILLISECONDS_PER_DAY) | ||
| return Math.ceil((days + (startOfYear.getDay() + 1)) / 7) | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
考虑统一周计算方法。
getWeekOfYearByTime 函数的实现与 getWeekOfYearByYMD 使用了不同的算法计算周数，这可能导致不一致的结果。建议统一使用 ISO 8601 标准的算法，保持函数行为一致性。
src/utils/date.ts
Outdated
| export const getWeekNosOfYear = ( | ||
| year: number, | ||
| month: number, | ||
| firstDayOfWeek: number | ||
| ) => { | ||
| const startWeekNo = getWeekOfYearByYMD(year, month, 1, firstDayOfWeek) | ||
| const endWeekNo = getWeekOfYearByYMD( | ||
| year, | ||
| month, | ||
| getMonthDays(`${year}`, `${month}`), | ||
| firstDayOfWeek | ||
| ) | ||
| return Array.from( | ||
| { | ||
| length: | ||
| (endWeekNo === 1 ? 53 : endWeekNo) - | ||
| (startWeekNo === 53 || startWeekNo === 52 ? 0 : startWeekNo) + | ||
| 1, | ||
| }, | ||
| (_, i) => { | ||
| const lastIndex = (endWeekNo === 1 ? 53 : endWeekNo) - startWeekNo | ||
| return `${endWeekNo === 1 && i === lastIndex ? 1 : ((startWeekNo === 53 || startWeekNo === 52) && i !== 0 ? 0 : startWeekNo) + i}` | ||
| } | ||
| ) | ||
| return Math.ceil((dataNumber + (dateFirst.getDay() + 1 - 1)) / 7) | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
简化复杂的条件逻辑。
第211行的逻辑非常复杂，难以理解和维护：
return `${endWeekNo === 1 && i === lastIndex ? 1 : ((startWeekNo === 53 || startWeekNo === 52) && i !== 0 ? 0 : startWeekNo) + i}`建议拆分为更小的条件语句或引入临时变量，提高可读性。
- return `${endWeekNo === 1 && i === lastIndex ? 1 : ((startWeekNo === 53 || startWeekNo === 52) && i !== 0 ? 0 : startWeekNo) + i}`
+ let weekNum;
+ if (endWeekNo === 1 && i === lastIndex) {
+ weekNum = 1;
+ } else {
+ const baseWeek = (startWeekNo === 53 || startWeekNo === 52) && i !== 0 ? 0 : startWeekNo;
+ weekNum = baseWeek + i;
+ }
+ return `${weekNum}`
There was a problem hiding this comment.
Actionable comments posted: 3
♻️ Duplicate comments (3)
src/packages/calendar/calendarviewmodeitem.taro.tsx (3)
310-310: 🛠️ Refactor suggestion建议完善 useEffect 依赖项，避免潜在的状态不同步问题
此处的 useEffect 仅依赖
panelDate，但内部执行了requestAniFrameFunc(viewMode)。若viewMode或requestAniFrameFunc在外部发生变化，则不会触发重新执行，可能导致渲染或数据不一致。可使用以下示例进行修复（若需要确保函数稳定，可结合 useCallback）：
useEffect(() => { - requestAniFrameFunc(viewMode) -}, [panelDate]) + requestAniFrameFunc(viewMode) +}, [panelDate, viewMode, requestAniFrameFunc])🧰 Tools
🪛 GitHub Check: lint
[warning] 310-310:
React Hook useEffect has missing dependencies: 'requestAniFrameFunc' and 'viewMode'. Either include them or remove the dependency array
121-126: 🛠️ Refactor suggestion建议在 onChange 回调中透传更新后的值
在
usePropsValue中声明的onChange目前为空实现，调用者将无法接收到 value 的更新事件。若需开放给上层使用，建议在内部回调中调用 props.onChange。const [innerValue, setInnerValue] = usePropsValue({ value, defaultValue, finalValue: [], - onChange: (val) => {}, + onChange: (val) => { + props.onChange?.(val) + }, })
312-314: 🛠️ Refactor suggestion添加 initData 到依赖数组或注释说明其恒定不变
当前 useEffect 仅在组件挂载时调用
initData()，却完全忽略initData的可能变动。若需要在initData发生变化时自动触发副作用，应将其加入依赖数组；若确定其始终不变，可在代码中加注释说明原因。useEffect(() => { initData() -}, []) +}, [initData])🧰 Tools
🪛 GitHub Check: lint
[warning] 314-314:
React Hook useEffect has a missing dependency: 'initData'. Either include it or remove the dependency array
🧹 Nitpick comments (6)
src/packages/calendar/calendarviewmodeitem.taro.tsx (1)
47-47: 为 onPageChange 提供更具体的类型定义目前的回调类型使用
any，使得类型约束过于宽松，不利于可维护性。如能确定传递数据的结构，可将回调的参数类型指定为更精准的接口或元组。- onPageChange: (data: any) => void + onPageChange: (data: { pageIndex: number; pageYear: number; } ) => voidsrc/packages/calendar/utils.tsx (1)
149-161: 检验 getNextQuarters 在月数较高时的正确性当 month 接近 12，且加上 3 后超过可用范围，循环条件将不被执行，函数将返回空数组。若预期在跨年时仍需计算季度，建议适配跨年逻辑；若不需要跨年，则可在文档或注释中明确约束。
src/packages/calendaritem/utils.ts (4)
9-19: 函数实现正确，但可以优化可读性和类型安全此函数逻辑正确，但有几点建议：
- 使用
month -= 1和month += 1替代--month和++month可以提高可读性- 建议添加返回值类型注解，例如
[number, string, number]- 函数名称和注释用中文，而代码实现用英文，建议统一语言风格
- export const getCurrMonthData = (type: string, year: number, month: number) => { + export const getCurrMonthData = (type: string, year: number, month: number): [number, string, number] => { if (type === 'prev') { month === 1 && (year -= 1) - month = month === 1 ? 12 : --month + month = month === 1 ? 12 : month - 1 } else if (type === 'next') { month === 12 && (year += 1) - month = month === 12 ? 1 : ++month + month = month === 12 ? 1 : month + 1 } return [year, getNumTwoBit(month), getMonthDays(String(year), String(month))] }
21-36: 需要更清晰地解释修复逻辑函数实现正确，但注释提到的修复逻辑（当月的1号是周日时）需要更详细的解释，不清楚为什么只在
type === 'prev'时应用此逻辑。另外，返回对象的类型定义缺失。建议添加返回类型定义并更详细地解释这个修复的作用：
+ type DayStatus = { + day: number; + type: string; + year: number; + month: number; + } - export const getDaysStatus = (type: string, year: number, month: number) => { + export const getDaysStatus = (type: string, year: number, month: number): DayStatus[] => { let days = getMonthDays(`${year}`, `${month}`) // 修复：当某个月的1号是周日时，月份下方会空出来一行 + // 只在type为'prev'时执行此逻辑，是因为...（这里需要补充解释） if (type === 'prev' && days >= 7) { days -= 7 } return Array.from(Array(days), (v, k) => { return { day: k + 1, type, year, month, } }) }
70-98: 减少代码重复，改进函数结构
getWeekDate函数中有重复计算oneDayTime的代码，并且根据firstDayOfWeek处理两种不同情况的方式可以更加简洁。export const getWeekDate = ( year: string, month: string, date: string, firstDayOfWeek = 0 ): string[] => { const dateNow = new Date(Number(year), parseInt(month) - 1, Number(date)) const nowTime = dateNow.getTime() let day = dateNow.getDay() + const oneDayTime = 24 * 60 * 60 * 1000 if (firstDayOfWeek === 0) { - const oneDayTime = 24 * 60 * 60 * 1000 // 显示周日 const SundayTime = nowTime - day * oneDayTime // 本周的周日 // 显示周六 const SaturdayTime = nowTime + (6 - day) * oneDayTime // 本周的周六 const sunday = date2Str(new Date(SundayTime)) const saturday = date2Str(new Date(SaturdayTime)) return [sunday, saturday] } day = day === 0 ? 7 : day - const oneDayTime = 24 * 60 * 60 * 1000 // 显示周一 const MondayTime = nowTime - (day - 1) * oneDayTime // 本周的周一 // 显示周日 const SundayTime = nowTime + (7 - day) * oneDayTime // 本周的周日 const monday = date2Str(new Date(MondayTime)) const sunday = date2Str(new Date(SundayTime)) return [monday, sunday] }
100-106: 添加返回类型定义
formatResultDate函数实现逻辑正确，但缺少返回值的类型定义。- export const formatResultDate = (date: string) => { + export const formatResultDate = (date: string): [string, string, string, string, number] => { const [year, month, day] = [...date.split('-')] const formatterDay = getNumTwoBit(Number(day)) const formatterDate = `${year}-${month}-${day}` const dayOfWeek = getWhatDay(Number(year), Number(month), Number(day)) return [year, month, formatterDay, formatterDate, dayOfWeek] }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
src/packages/calendar/calendarviewmodeitem.taro.tsx(1 hunks)src/packages/calendar/calendarviewmodeitem.tsx(1 hunks)src/packages/calendar/utils.tsx(1 hunks)src/packages/calendaritem/calendaritem.taro.tsx(13 hunks)src/packages/calendaritem/calendaritem.tsx(15 hunks)src/packages/calendaritem/utils.ts(1 hunks)src/utils/date.ts(0 hunks)
💤 Files with no reviewable changes (1)
- src/utils/date.ts
🚧 Files skipped from review as they are similar to previous changes (3)
- src/packages/calendar/calendarviewmodeitem.tsx
- src/packages/calendaritem/calendaritem.tsx
- src/packages/calendaritem/calendaritem.taro.tsx
🧰 Additional context used
🪛 GitHub Check: lint
src/packages/calendar/calendarviewmodeitem.taro.tsx
[warning] 314-314:
React Hook useEffect has a missing dependency: 'initData'. Either include it or remove the dependency array
[warning] 310-310:
React Hook useEffect has missing dependencies: 'requestAniFrameFunc' and 'viewMode'. Either include them or remove the dependency array
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build
🔇 Additional comments (2)
src/packages/calendar/utils.tsx (1)
128-139:❓ Verification inconclusive
关注 getPreQuarters 边界条件，避免月数计算越界
当当前月
month小于 3 时，表达式month - 3可能出现负值，导致循环范围意外。建议在逻辑中处理跨年或负值场景，或在上层调用前加以限制。请执行以下脚本以搜索相关调用是否存在传入非常小的 month 值（例如 1 或 2），从而确认是否需要在函数内做额外边界判断：
🏁 Script executed:
#!/bin/bash fd -e ts -e tsx --exclude node_modules --exclude dist --exec rg --context 5 "getPreQuarters"Length of output: 2186
注意：getPreQuarters 边界条件风险 — 需进一步验证
- 问题描述：当前的计算逻辑使用
endIndex = month - 3，当传入的month小于 3 时会产生负值，从而导致循环的范围异常，可能引起跨年或其他逻辑上的问题。- 建议措施：
- 检查所有调用
getPreQuarters的代码是否确保传入的月份（例如变量startMonth）至少为 3。- 如果不便在调用处限制，请考虑在
getPreQuarters内增加对month值的检测，确保其不小于 3，或者在遇到不符合条件的情况时返回空数组或做特殊处理。- 后续操作：请手动验证相关调用，确认传入的月份值是否存在潜在的跨年或负值风险，再决定是否需要在该函数中增加防护代码。
src/packages/calendaritem/utils.ts (1)
1-7: 确保所有需要的工具函数都已导入导入了多个日期工具函数，确保这些函数都在后续代码中被使用。建议考虑添加函数返回类型定义以提高类型安全性。
| // 获取上一个月的最后一周天数，填充当月空白 | ||
| export const getPreMonthDates = ( | ||
| type: string, | ||
| year: number, | ||
| month: number, | ||
| firstDayOfWeek: number | ||
| ) => { | ||
| let preMonth = +month - 1 | ||
| let preYear = year | ||
| if (preMonth <= 0) { | ||
| preMonth = 12 | ||
| preYear += 1 | ||
| } | ||
| let days = getMonthPreDay(+year, +month) | ||
| days -= firstDayOfWeek | ||
| // 修复：当某个月的1号是周日时，月份下方会空出来一行 | ||
| if (type === 'prev' && days >= 7) { | ||
| days -= 7 | ||
| } | ||
|
|
||
| const preDates = getMonthDays(`${preYear}`, `${preMonth}`) | ||
| const months = Array.from(Array(preDates), (v, k) => { | ||
| return { | ||
| day: k + 1, | ||
| type, | ||
| preYear, | ||
| preMonth, | ||
| } | ||
| }) | ||
| return months.slice(preDates - days) | ||
| } |
There was a problem hiding this comment.
修复年份计算错误
在处理上一个月为12月的情况时，年份计算有误。当前是加1，应该是减1。此外，返回对象的属性名（preYear, preMonth）与其他函数中使用的属性名（year, month）不一致，建议统一。
let preMonth = +month - 1
let preYear = year
if (preMonth <= 0) {
preMonth = 12
- preYear += 1
+ preYear -= 1
}另外，建议统一返回对象的属性名：
return {
day: k + 1,
type,
- preYear,
- preMonth,
+ year: preYear,
+ month: preMonth,
}📝 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.
| // 获取上一个月的最后一周天数，填充当月空白 | |
| export const getPreMonthDates = ( | |
| type: string, | |
| year: number, | |
| month: number, | |
| firstDayOfWeek: number | |
| ) => { | |
| let preMonth = +month - 1 | |
| let preYear = year | |
| if (preMonth <= 0) { | |
| preMonth = 12 | |
| preYear += 1 | |
| } | |
| let days = getMonthPreDay(+year, +month) | |
| days -= firstDayOfWeek | |
| // 修复：当某个月的1号是周日时，月份下方会空出来一行 | |
| if (type === 'prev' && days >= 7) { | |
| days -= 7 | |
| } | |
| const preDates = getMonthDays(`${preYear}`, `${preMonth}`) | |
| const months = Array.from(Array(preDates), (v, k) => { | |
| return { | |
| day: k + 1, | |
| type, | |
| preYear, | |
| preMonth, | |
| } | |
| }) | |
| return months.slice(preDates - days) | |
| } | |
| // 获取上一个月的最后一周天数，填充当月空白 | |
| export const getPreMonthDates = ( | |
| type: string, | |
| year: number, | |
| month: number, | |
| firstDayOfWeek: number | |
| ) => { | |
| let preMonth = +month - 1 | |
| let preYear = year | |
| if (preMonth <= 0) { | |
| preMonth = 12 | |
| preYear -= 1 | |
| } | |
| let days = getMonthPreDay(+year, +month) | |
| days -= firstDayOfWeek | |
| // 修复：当某个月的1号是周日时，月份下方会空出来一行 | |
| if (type === 'prev' && days >= 7) { | |
| days -= 7 | |
| } | |
| const preDates = getMonthDays(`${preYear}`, `${preMonth}`) | |
| const months = Array.from(Array(preDates), (v, k) => { | |
| return { | |
| day: k + 1, | |
| type, | |
| year: preYear, | |
| month: preMonth, | |
| } | |
| }) | |
| return months.slice(preDates - days) | |
| } |
| // 获取某一天所在的周，按国标 8601 处理。第一周至少包含4天。 | ||
| export const getWeekOfYearByYMD = ( | ||
| year: number, | ||
| month: number, // 自然月 | ||
| date: number, | ||
| firstDayOfWeek = 0 | ||
| ): number => { | ||
| // 一天的秒 | ||
| const MILLISECONDS_PER_DAY = 86400000 | ||
|
|
||
| const dateNow = new Date(year, month - 1, date) | ||
| // 一年内第一天 | ||
| const dateFirst = new Date(year, 0, 1) | ||
| // 一年内第几天 | ||
| const dayOfYear = Math.round( | ||
| (dateNow.valueOf() - dateFirst.valueOf()) / MILLISECONDS_PER_DAY | ||
| ) | ||
|
|
||
| // ISO 8601 标准：第一个星期至少包含 4 天 | ||
| // 同时，需要兼顾 firstDayOfWeek 一起判断 | ||
| const DAYS_OF_FIRST_WEEK = 3 | ||
| let dayOfWeek = dateNow.getDay() | ||
| let remainder = 6 - dayOfWeek - DAYS_OF_FIRST_WEEK | ||
| if (firstDayOfWeek !== 0) { | ||
| dayOfWeek = dayOfWeek === 0 ? 7 : dayOfWeek // 周日转化为 7 | ||
| remainder = 7 - dayOfWeek - DAYS_OF_FIRST_WEEK | ||
| } | ||
|
|
||
| // 周号可以出现0，标识当前1月1日不在本年度的第一周，为上一年的最后一周。 | ||
| let weekNo = Math.ceil((dayOfYear + remainder + 1) / 7) | ||
| // 需要处理第一周为0的的情况，需延续上一年的周数，上一年有可能是53或52。 | ||
| // 需要判断最后一周为53的情况，因为一年至少有52周，但是会有53周的情况，这时需要判断： | ||
| // 如果最后一周少于4天，则为下一年的第一周。 | ||
| if (weekNo === 0) { | ||
| // 测试：2010/2011/2012/2017/2023/ | ||
| weekNo = getWeekOfYearByYMD(year - 1, 12, 31, firstDayOfWeek) | ||
| } else if (weekNo === 53) { | ||
| // 测试：2024/2021 | ||
| const remainder2 = 7 - dayOfWeek - DAYS_OF_FIRST_WEEK | ||
| weekNo = remainder2 > 0 ? 1 : weekNo | ||
| } | ||
|
|
||
| return weekNo | ||
| } |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
复杂逻辑需要更详细的注释和单元测试
getWeekOfYearByYMD 函数的逻辑复杂，包含多个边缘情况处理。注释中提到了测试案例但没有实际的单元测试。建议添加更详细的注释解释算法原理，并为提到的测试案例编写单元测试。
另外，行146创建了remainder2但逻辑与之前相似，考虑重构以提高可读性。尝试查询更多信息以验证此算法的正确性：
🏁 Script executed:
#!/bin/bash
# 检查是否有针对此函数的单元测试
rg -g '*.test.ts' -g '*.spec.ts' 'getWeekOfYearByYMD'Length of output: 53
🌐 Web query:
ISO 8601周号计算标准及特殊情况处理
💡 Result:
ISO 8601周号计算标准以"包含该年第一个星期四的周"作为年度第一周，采用严格的周历系统确保国际统一性。其核心规则与特殊处理方式如下：
计算标准
- 周起始日：每周从周一开始，周日结束[7][16]
- 第一周判定：
- 包含1月4日的周为第一周[1][7]
- 若1月1日是周一到周四，则所在周为第一周；若是周五到周日，则归入上年第52/53周[7][16]
- 周数范围：正常年份52周，闰周年份53周[4]
特殊场景处理
| 场景 | 处理规则 | 示例 |
|---|---|---|
| 跨年周 | 每周严格归属一个ISO年，12月底可能属于下一年第1周 | 2008-12-29属于2009-W01[9] |
| 闰周 | 通过是否包含足够天数判定，每400年出现71次53周年份 | 2020年含53周[4] |
| 年首日期 | 1月1日可能归属上年最后一周或当年第一周 | 2021-01-01属于2021-W01[1] |
| 时区转换 | 统一采用UTC时间计算，避免时区偏移影响 | 日期计算前转换为UTC时间[7] |
编程实现要点
Excel：
=WEEKNUM(A1,21) // return_type=21启用ISO模式[1][10]
JavaScript：
// 平移日期到周四再进行计算
const date = new Date('2025-01-01');
date.setDate(date.getDate() + (4 - (date.getDay() || 7)));[7]Python：
from datetime import datetime
dt = datetime.fromisoformat("2025-01-01")
year, week, _ = dt.isocalendar() # 直接获取ISO周数[5]MySQL：
SELECT WEEK('2025-01-01', 3); -- mode=3对应ISO标准[6]该标准通过严格定义周归属，解决了传统日历中周跨年、月份天数不均等问题，广泛应用于财务系统、跨国项目等需要精确时间管理的场景[4][19]。开发时需注意时区转换和边界条件测试，如测试闰年、世纪年等特殊日期[3][7]。
Citations:
- 1: https://www.feishu.cn/content/weeknum-function
- 2: https://zh.wikipedia.org/zh-cn/ISO_8601%23.E6.97.A5.E6.9C.9F.E8.A1.A8.E7.A4.BA.E6.B3.95
- 3: https://my.oschina.net/emacs_8689493/blog/17012237
- 4: https://zh.wikipedia.org/zh-hans/ISO%E9%80%B1%E6%97%A5%E6%9B%86
- 5: https://labex.io/zh/tutorials/python-how-to-create-datetime-objects-from-iso-8601-date-strings-417942
- 6: https://www.cnblogs.com/gbase/articles/18457852
- 7: https://www.alonehero.com/2024/12/26/%E4%B8%80%E5%B9%B4%E4%B8%AD%E7%9A%84%E7%AC%AC%E4%B8%80%E5%91%A8%E8%AF%A5%E5%A6%82%E4%BD%95%E8%AE%A1%E7%AE%97%EF%BC%9F/
- 8: https://cloud.tencent.com/developer/information/%E5%A6%82%E4%BD%95%E8%A7%A3%E6%9E%90ISO%208601%E6%A0%BC%E5%BC%8F%E7%9A%84%E6%97%A5%E6%9C%9F%EF%BC%9F
- 9: https://blog.csdn.net/wangshuminjava/article/details/80906889
- 10: https://learn.microsoft.com/zh-cn/dax/weeknum-function-dax
- 11: https://blog.csdn.net/weixin_42107384/article/details/116475639
- 12: https://clickhouse.com/docs/zh/sql-reference/functions/date-time-functions
- 13: https://support.google.com/docs/answer/7368793?hl=zh-Hans
- 14: https://help.tableau.com/current/pro/desktop/zh-cn/dates_custom_date_formats_week.htm
- 15: https://my.oschina.net/emacs_8699892/blog/17038591
- 16: https://blog.csdn.net/I_lost/article/details/103820370
- 17: https://www.ibm.com/docs/zh/integration-bus/10.1?topic=function-formatting-parsing-datetimes-as-strings
- 18: https://zh.wikipedia.org/zh-cn/ISO_8601%23.E6.97.A5.E6.9C.9F.E6.97.B6.E9.97.B4.E8.A1.A8.E7.A4.BA.E6.B3.95
- 19: https://www.dkmeco.com/community/help/tableau/desktop/52/638
- 20: https://blog.csdn.net/yuanbingze/article/details/72127763
建议增强注释、增加单元测试以及优化重复逻辑
- 在文件
src/packages/calendaritem/utils.ts中，函数getWeekOfYearByYMD处理了多种边缘情况（例如跨年的第一周判定和53周的特殊处理），建议在代码中添加更详细的注释，阐明每一步的意图及对应的ISO 8601规则解释。 - 当前代码库中未发现针对本函数的单元测试，建议为常见场景（如跨年、判断第一周和最后一周）编写单元测试，以确保算法覆盖所有特殊情况。
- 行146处创建的
remainder2与之前的逻辑较为重复，建议重构这一部分代码，可以考虑提取公共部分以提高可读性和维护性。
| export const getWeekNosOfYear = ( | ||
| year: number, | ||
| month: number, | ||
| firstDayOfWeek: number | ||
| ) => { | ||
| const startWeekNo = getWeekOfYearByYMD(year, month, 1, firstDayOfWeek) | ||
| const endWeekNo = getWeekOfYearByYMD( | ||
| year, | ||
| month, | ||
| getMonthDays(`${year}`, `${month}`), | ||
| firstDayOfWeek | ||
| ) | ||
| return Array.from( | ||
| { | ||
| length: | ||
| (endWeekNo === 1 ? 53 : endWeekNo) - | ||
| (startWeekNo === 53 || startWeekNo === 52 ? 0 : startWeekNo) + | ||
| 1, | ||
| }, | ||
| (_, i) => { | ||
| const lastIndex = (endWeekNo === 1 ? 53 : endWeekNo) - startWeekNo | ||
| return `${endWeekNo === 1 && i === lastIndex ? 1 : ((startWeekNo === 53 || startWeekNo === 52) && i !== 0 ? 0 : startWeekNo) + i}` | ||
| } | ||
| ) | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
简化复杂计算逻辑，增加注释
getWeekNosOfYear 函数中第168-170行和第174行的计算逻辑过于复杂，难以理解和维护。建议将复杂计算拆分为更小的、更容易理解的部分，并增加注释解释计算目的。
export const getWeekNosOfYear = (
year: number,
month: number,
firstDayOfWeek: number
): string[] => {
const startWeekNo = getWeekOfYearByYMD(year, month, 1, firstDayOfWeek)
const endWeekNo = getWeekOfYearByYMD(
year,
month,
getMonthDays(`${year}`, `${month}`),
firstDayOfWeek
)
+ // 处理特殊情况：当结束周是第1周时，实际上是指下一年的第1周，应视为本年第53周
+ const adjustedEndWeekNo = endWeekNo === 1 ? 53 : endWeekNo
+
+ // 处理特殊情况：当开始周是第52或53周时，实际上是指上一年的最后几周，长度计算需调整
+ const adjustedStartWeekNo = startWeekNo === 53 || startWeekNo === 52 ? 0 : startWeekNo
+
+ // 计算总周数
+ const totalWeeks = adjustedEndWeekNo - adjustedStartWeekNo + 1
return Array.from(
{
- length:
- (endWeekNo === 1 ? 53 : endWeekNo) -
- (startWeekNo === 53 || startWeekNo === 52 ? 0 : startWeekNo) +
- 1,
+ length: totalWeeks,
},
(_, i) => {
- const lastIndex = (endWeekNo === 1 ? 53 : endWeekNo) - startWeekNo
- return `${endWeekNo === 1 && i === lastIndex ? 1 : ((startWeekNo === 53 || startWeekNo === 52) && i !== 0 ? 0 : startWeekNo) + i}`
+ const lastIndex = adjustedEndWeekNo - startWeekNo
+
+ // 处理特殊情况：当是结束周且结束周为第1周时，显示为1而不是53
+ if (endWeekNo === 1 && i === lastIndex) {
+ return '1'
+ }
+
+ // 处理上年延续的周数
+ const baseWeekNo = (startWeekNo === 53 || startWeekNo === 52) && i !== 0 ? 0 : startWeekNo
+
+ return `${baseWeekNo + i}`
}
)
}📝 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.
| export const getWeekNosOfYear = ( | |
| year: number, | |
| month: number, | |
| firstDayOfWeek: number | |
| ) => { | |
| const startWeekNo = getWeekOfYearByYMD(year, month, 1, firstDayOfWeek) | |
| const endWeekNo = getWeekOfYearByYMD( | |
| year, | |
| month, | |
| getMonthDays(`${year}`, `${month}`), | |
| firstDayOfWeek | |
| ) | |
| return Array.from( | |
| { | |
| length: | |
| (endWeekNo === 1 ? 53 : endWeekNo) - | |
| (startWeekNo === 53 || startWeekNo === 52 ? 0 : startWeekNo) + | |
| 1, | |
| }, | |
| (_, i) => { | |
| const lastIndex = (endWeekNo === 1 ? 53 : endWeekNo) - startWeekNo | |
| return `${endWeekNo === 1 && i === lastIndex ? 1 : ((startWeekNo === 53 || startWeekNo === 52) && i !== 0 ? 0 : startWeekNo) + i}` | |
| } | |
| ) | |
| } | |
| export const getWeekNosOfYear = ( | |
| year: number, | |
| month: number, | |
| firstDayOfWeek: number | |
| ): string[] => { | |
| const startWeekNo = getWeekOfYearByYMD(year, month, 1, firstDayOfWeek) | |
| const endWeekNo = getWeekOfYearByYMD( | |
| year, | |
| month, | |
| getMonthDays(`${year}`, `${month}`), | |
| firstDayOfWeek | |
| ) | |
| // 处理特殊情况：当结束周是第1周时，实际上是指下一年的第1周，应视为本年第53周 | |
| const adjustedEndWeekNo = endWeekNo === 1 ? 53 : endWeekNo | |
| // 处理特殊情况：当开始周是第52或53周时，实际上是指上一年的最后几周，长度计算需调整 | |
| const adjustedStartWeekNo = startWeekNo === 53 || startWeekNo === 52 ? 0 : startWeekNo | |
| // 计算总周数 | |
| const totalWeeks = adjustedEndWeekNo - adjustedStartWeekNo + 1 | |
| return Array.from( | |
| { | |
| length: totalWeeks, | |
| }, | |
| (_, i) => { | |
| const lastIndex = adjustedEndWeekNo - startWeekNo | |
| // 处理特殊情况：当是结束周且结束周为第1周时，显示为1而不是53 | |
| if (endWeekNo === 1 && i === lastIndex) { | |
| return '1' | |
| } | |
| // 处理上年延续的周数 | |
| const baseWeekNo = (startWeekNo === 53 || startWeekNo === 52) && i !== 0 ? 0 : startWeekNo | |
| return `${baseWeekNo + i}` | |
| } | |
| ) | |
| } |
fixed |
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (2)
src/packages/calendar/calendarviewmodeitem.taro.tsx (2)
306-308: 🛠️ Refactor suggestionuseEffect 缺少必要依赖，可能导致渲染不同步问题。
此处仅在
[panelDate]变化时才调用requestAniFrameFunc(viewMode)，但函数中实际依赖viewMode。建议将requestAniFrameFunc与viewMode一并纳入依赖或使用useCallback优化，防止潜在的运行时不一致。示例修复方式：
useEffect(() => { - requestAniFrameFunc(viewMode) -}, [panelDate]) + requestAniFrameFunc(viewMode) +}, [panelDate, viewMode, requestAniFrameFunc])🧰 Tools
🪛 GitHub Check: lint
[warning] 308-308:
React Hook useEffect has missing dependencies: 'requestAniFrameFunc' and 'viewMode'. Either include them or remove the dependency array
310-312: 🛠️ Refactor suggestionuseEffect 缺少
initData依赖，可能导致数据未能在后续更新时重新初始化。当
startDate、endDate或其他依赖变化时，若你希望重新计算面板数据，应将initData和相关依赖一起加入依赖数组；否则仅执行一次可以改用内部函数或添加注释说明意图。示例修复方式：
useEffect(() => { initData() -}, []) +}, [initData, startDate, endDate, viewMode])🧰 Tools
🪛 GitHub Check: lint
[warning] 312-312:
React Hook useEffect has a missing dependency: 'initData'. Either include it or remove the dependency array
🧹 Nitpick comments (3)
src/packages/calendar/calendarviewmodeitem.taro.tsx (3)
45-45: onPageChange 类型过于宽泛。此处
onPageChange: (data: any) => void缺少清晰的参数定义，可能增加维护成本。请考虑使用更贴合业务的明确类型或在注释中注明参数结构。示例修复方式：
-export interface CalendarViewModeItemProps { - onPageChange: (data: any) => void +export interface CalendarViewModeItemProps<T = { pageIndex: number; ... }> { + onPageChange: (data: T) => void }
109-109: 检测到未使用的状态变量 “monthsData”。在此定义了
const [monthsData] = useState<any[]>([])，但后续似乎没有使用。若不再需要此变量，建议移除以精简代码；若仍需扩展逻辑，请在相应地方引用。示例修复方式：
- const [monthsData] = useState<any[]>([])
137-180:requestAniFrame使用后缺少清理，可能导致多次渲染时累积无效动画请求。在组件多次更新或卸载时，未对
requestAniFrame进行取消可能产生潜在的内存泄漏或无意义的动画残留。可在requestAniFrameFunc函数中或依赖它的 useEffect 中使用清理函数来cancelAnimationFrame。如需我帮助编写可取消动画的逻辑，请告知是否要我进一步提交示例修复代码？
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/packages/calendar/calendarviewmodeitem.taro.tsx(1 hunks)src/packages/calendar/demos/taro/demo103.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/packages/calendar/demos/taro/demo103.tsx
🧰 Additional context used
🪛 GitHub Check: build
src/packages/calendar/calendarviewmodeitem.taro.tsx
[failure] 63-63:
Cannot find name 'CalendarRef'.
🪛 GitHub Check: lint
src/packages/calendar/calendarviewmodeitem.taro.tsx
[warning] 312-312:
React Hook useEffect has a missing dependency: 'initData'. Either include it or remove the dependency array
[warning] 308-308:
React Hook useEffect has missing dependencies: 'requestAniFrameFunc' and 'viewMode'. Either include them or remove the dependency array
🪛 GitHub Actions: CI
src/packages/calendar/calendarviewmodeitem.taro.tsx
[error] 63-63: TypeScript error TS2304: Cannot find name 'CalendarRef'.
| } as unknown as CalendarViewModeItemProps | ||
|
|
||
| export const CalendarViewModeItem = React.forwardRef< | ||
| CalendarRef, |
There was a problem hiding this comment.
无法找到类型“CalendarRef”导致编译错误。
当前使用了 React.forwardRef<CalendarRef>，但并未在工程中定义 CalendarRef 类型。请先在 ./types 或适当的类型声明文件中补充对应的接口/类型定义，或根据需要去除该类型以避免 TS2304 错误。
示例修复方式：
- export const CalendarViewModeItem = React.forwardRef<CalendarRef, ...>
+ export interface CalendarRef {
+ scrollTo?(date: string): void
+ // 你需要的其他暴露方法...
+ }
+ // 确保在当前文件或 ./types 内导入/定义 CalendarRef
export const CalendarViewModeItem = React.forwardRef<CalendarRef, ...>📝 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.
| CalendarRef, | |
| // Ensure that this interface is defined in an appropriate location, either in this file or imported from ./types | |
| export interface CalendarRef { | |
| scrollTo?(date: string): void; | |
| // 你需要的其他暴露方法... | |
| } | |
| export const CalendarViewModeItem = React.forwardRef<CalendarRef, CalendarViewModeItemProps>((props, ref) => { | |
| // Component implementation | |
| return ( | |
| // JSX element | |
| ); | |
| }); |
🧰 Tools
🪛 GitHub Check: build
[failure] 63-63:
Cannot find name 'CalendarRef'.
🪛 GitHub Actions: CI
[error] 63-63: TypeScript error TS2304: Cannot find name 'CalendarRef'.
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (6)
src/packages/calendar/calendarviewmodeitem.tsx (3)
303-305:⚠️ Potential issue修复 useEffect 的依赖项缺失
useEffect 依赖数组中缺少
initData，这可能导致组件在某些情况下不会正确更新。useEffect(() => { initData() -}, []) +}, [initData])
113-118: 🛠️ Refactor suggestion完善 usePropsValue 的类型定义和回调实现
finalValue的类型与value和defaultValue不一致，且onChange回调是空实现。const [innerValue, setInnerValue] = usePropsValue({ value, defaultValue, - finalValue: [], - onChange: (val) => {}, + finalValue: '' as CalendarValue, + onChange: (val) => { + props.onChange?.(val) + }, })
371-371:⚠️ Potential issue处理 viewMode 可能为 undefined 的情况
在使用
viewMode作为索引时需要确保它存在，否则会导致类型错误和潜在的运行时错误。-{renderDay ? renderDay(item) : `${item[viewMode]}${units[viewMode]}`} +{renderDay ? renderDay(item) : `${item[viewMode || 'month']}${units[viewMode || 'month']}`}src/packages/calendar/calendarviewmodeitem.taro.tsx (3)
377-381:⚠️ Potential issue修复类型安全问题
在使用
viewMode作为索引和调用handleItemClick时需要确保类型安全。-onClick={() => handleItemClick(viewMode, item)} +onClick={() => handleItemClick(viewMode ?? 'month', item)} key={index} > <div className={`${classPrefix}-item-${item.type}`}> -{renderDay ? renderDay(item) : `${item[viewMode]}${units[viewMode]}`} +{renderDay ? renderDay(item) : `${item[viewMode ?? 'month']}${units[viewMode ?? 'month']}`}
117-122: 🛠️ Refactor suggestion完善 usePropsValue 的类型定义和回调实现
finalValue的类型与value和defaultValue不一致，且onChange回调是空实现。const [innerValue, setInnerValue] = usePropsValue({ value, defaultValue, - finalValue: [], - onChange: (val) => {}, + finalValue: '' as CalendarValue, + onChange: (val) => { + props.onChange?.(val) + }, })
304-306:⚠️ Potential issue修复 useEffect 依赖项缺失
此处的 useEffect 依赖项数组中应添加
requestAniFrameFunc和viewMode。useEffect(() => { requestAniFrameFunc(viewMode) -}, [panelDate]) +}, [panelDate, requestAniFrameFunc, viewMode])🧰 Tools
🪛 GitHub Check: lint
[warning] 306-306:
React Hook useEffect has missing dependencies: 'requestAniFrameFunc' and 'viewMode'. Either include them or remove the dependency array
🧹 Nitpick comments (14)
src/packages/calendar/calendarviewmodeitem.tsx (6)
47-47: 建议完善 onPageChange 的类型定义参数类型
any过于宽松，建议使用更具体的类型。- onPageChange: (data: any) => void + onPageChange: (data: [number, number, string]) => void
62-62: 避免使用类型断言绕过类型检查使用
as unknown as CalendarViewModeItemProps的类型断言可能会掩盖潜在的类型错误。-} as unknown as CalendarViewModeItemProps +}: Partial<CalendarViewModeItemProps>
90-95: 使用当前年份而非硬编码年份虽然已经使用了
new Date().getFullYear()，但建议添加注释说明这是初始状态，后续会被实际数据覆盖，以提高代码可读性。
385-403: 考虑优化渲染性能
renderPanel方法在每次渲染时都会重新创建和处理复杂的数据结构。考虑使用 useMemo 缓存渲染结果或提取关键的计算逻辑到 useMemo 中。+const panelContent = useMemo(() => { + return ( + <> + {panelDate[`${viewMode}s`].map((item: any, key: number) => ( + <div className={`${classPrefix}-panel`} key={key}> + <div className={`${classPrefix}-panel-title`}>{item.year}</div> + <div className={`${classPrefix}-content`}> + {item[`${viewMode}s`].map((item: any, i: number) => + renderItem(item, i) + )} + </div> + </div> + ))} + </> + ) +}, [panelDate, viewMode, renderItem]) const renderPanel = () => { - return ( - <> - {panelDate[`${viewMode}s`].map((item: any, key: number) => ( - <div className={`${classPrefix}-panel`} key={key}> - <div className={`${classPrefix}-panel-title`}>{item.year}</div> - <div className={`${classPrefix}-content`}> - {item[`${viewMode}s`].map((item: any, i: number) => - renderItem(item, i) - )} - </div> - </div> - ))} - </> - ) + return panelContent }
310-310: 修复潜在的类型安全问题
item.type !== 'curr'检查后立即返回是正确的做法，但建议添加类型断言或类型守卫，以确保后续代码中item符合预期类型。if (item.type !== 'curr') return +// 确保 item 是有效的当前日期项🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 310-310: src/packages/calendar/calendarviewmodeitem.tsx#L310
Added line #L310 was not covered by tests
1-27: 类型导入可优化从 './types' 导入了多个类型，但实际上一些类型可能没有直接使用。考虑只导入必要的类型，或者使用类型命名空间来组织这些类型。
import { CalendarDay, CalendarValue, CalendarType, CalendarMonth, CalendarMonthInfoOfPanel, CalendarQuarterInfoOfPanel, CalendarQuarter, } from './types'src/packages/calendar/__tests__/calendar.spec.tsx (4)
91-106: 测试用例命名需要更具描述性当前测试用例使用相同的名称 'viewmode prop'，这会降低测试的可维护性和可读性。建议使用更具描述性的名称，以反映其具体测试内容。
-test('viewmode prop', async () => { +test('应该在设置 quarter 视图模式并提供 onItemClick 回调时正确渲染日历', async () => {
108-121: 测试用例重复且命名不一致这个测试用例与上一个非常相似，但命名格式不同。建议统一测试命名格式，并考虑使用参数化测试减少重复代码。
-test('should render calendar in quarter view with extended date range', async () => { +test('应该在 quarter 视图模式下使用扩展日期范围正确渲染日历', async () => {
123-138: 增加测试数据的边界情况当前测试仅涵盖了基本功能，建议添加更多测试场景，如边界日期、无效日期、空日期等。
test('应该在月份视图模式下处理边界日期', async () => { const { container } = render( <Calendar viewMode="month" defaultValue="2025-12" // 年末月份 startDate="2025-01-01" endDate="2025-12-31" /> ) const viewArea = container.querySelector( '.nut-calendar-viewmode-pannel' ) as HTMLElement expect(viewArea.innerHTML).toMatchSnapshot() })
140-155: 应测试交互功能当前测试只验证了渲染，没有测试用户交互。建议添加测试来验证点击事件、滚动等交互功能是否正常工作。
test('应该在月份视图下正确处理项目点击事件', async () => { const onItemClick = vi.fn() const { container } = render( <Calendar viewMode="month" defaultValue="2025-01" startDate="2025-01-01" endDate="2025-12-31" onItemClick={onItemClick} /> ) // 查找并点击一个月份项 const monthItem = container.querySelector('.nut-calendar-viewmode-item.curr:not(.active)') as HTMLElement fireEvent.click(monthItem) // 验证回调被调用 expect(onItemClick).toHaveBeenCalled() })src/packages/calendar/calendarviewmodeitem.taro.tsx (4)
312-315: 添加内存泄漏防护
Taro.getEnv() === 'WEB'条件判断很好，但没有清理机制处理组件卸载时可能的副作用。建议使用 useEffect 返回清理函数。+useEffect(() => { + return () => { + // 清理任何可能的事件监听器或计时器 + } +}, [])
317-325: 在 switch 语句中包装变量声明JavaScript 的 switch 语句中的 case 子句共享同一作用域。为避免变量声明被其他 case 子句意外使用，建议将 case 子句中的代码包装在块中。
handleItemClick = (viewMode: string, item: any) => { + { // 点击事件，可以返回所点击元素的数据 // 如果非可点击，则直接返回，不做处理 if (item.type !== 'curr') return // 可点击时，需要关注当前元素是否已被选中，选中，取消选中，拿到数据 const val = viewMode === 'month' ? item.yearAndMonth : item.yearAndQuarter setInnerValue(val) onItemClick?.(val) + } }
48-48: 改进 onPageChange 回调函数的类型定义
onPageChange的参数类型定义为any过于宽松，建议定义具体的类型以提高代码的类型安全性。- onPageChange: (data: any) => void + onPageChange: (data: [number, number, string]) => void
1-30: 代码重复问题
calendarviewmodeitem.taro.tsx与calendarviewmodeitem.tsx有大量重复代码。考虑提取共享逻辑到一个公共文件中，然后在这两个文件中导入共享逻辑。您可以考虑以下重构方案：
- 创建一个通用的 CalendarViewModeLogic 模块，包含所有共享逻辑
- 在 .tsx 和 .taro.tsx 文件中导入该模块
- 只保留特定于平台的渲染和事件处理代码
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
src/packages/calendar/__tests__/__snapshots__/calendar.spec.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (3)
src/packages/calendar/__tests__/calendar.spec.tsx(4 hunks)src/packages/calendar/calendarviewmodeitem.taro.tsx(1 hunks)src/packages/calendar/calendarviewmodeitem.tsx(1 hunks)
🧰 Additional context used
🪛 GitHub Check: lint
src/packages/calendar/calendarviewmodeitem.taro.tsx
[warning] 310-310:
React Hook useEffect has a missing dependency: 'initData'. Either include it or remove the dependency array
[warning] 306-306:
React Hook useEffect has missing dependencies: 'requestAniFrameFunc' and 'viewMode'. Either include them or remove the dependency array
🪛 GitHub Check: codecov/patch
src/packages/calendar/calendarviewmodeitem.tsx
[warning] 126-127: src/packages/calendar/calendarviewmodeitem.tsx#L126-L127
Added lines #L126 - L127 were not covered by tests
[warning] 170-170: src/packages/calendar/calendarviewmodeitem.tsx#L170
Added line #L170 was not covered by tests
[warning] 295-295: src/packages/calendar/calendarviewmodeitem.tsx#L295
Added line #L295 was not covered by tests
[warning] 310-310: src/packages/calendar/calendarviewmodeitem.tsx#L310
Added line #L310 was not covered by tests
[warning] 312-315: src/packages/calendar/calendarviewmodeitem.tsx#L312-L315
Added lines #L312 - L315 were not covered by tests
[warning] 333-334: src/packages/calendar/calendarviewmodeitem.tsx#L333-L334
Added lines #L333 - L334 were not covered by tests
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build
🔇 Additional comments (2)
src/packages/calendar/__tests__/calendar.spec.tsx (2)
85-89: 测试代码更新后保留了相同的期望结果在更新了组件选择器后，应该确保期望的快照匹配是正确的。建议检查或更新快照以匹配新的组件结构。
292-292: 确保测试数据与组件实现一致此处断言
innerHTML为'10'，请确认这与实际实现一致，特别是在代码更改后。
| useEffect(() => { | ||
| initData() | ||
| }, []) |
There was a problem hiding this comment.
修复 useEffect 的依赖项缺失
useEffect 依赖数组中缺少 initData，这可能导致组件在某些情况下不会正确更新。
useEffect(() => {
initData()
-}, [])
+}, [initData])📝 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.
| useEffect(() => { | |
| initData() | |
| }, []) | |
| useEffect(() => { | |
| initData() | |
| }, [initData]) |
🧰 Tools
🪛 GitHub Check: lint
[warning] 310-310:
React Hook useEffect has a missing dependency: 'initData'. Either include it or remove the dependency array
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
src/packages/calendar/calendarviewmodeitem.taro.tsx (2)
129-176: 建议提取公共逻辑以提升可维护性
requestAniFrameFunc在month与quarter分支中存在相似的容器高度计算和滚动定位初始化逻辑，可考虑抽取公共函数并根据不同模式传入相应业务参数，避免代码重复并提高可读性。- const requestAniFrameFunc = (viewMode: string) => { - switch (viewMode) { - case 'month': - { ... 重复逻辑 ... } - break - case 'quarter': - { ... 重复逻辑 ... } - break - default: - break - } - } + const initPosition = (containerHeight: number, currentIndex: number, dataList: any[]) => { + requestAniFrame(() => { + if (monthsRef && monthsPanel && viewAreaRef) { + viewHeight = getMonthsRef().clientHeight + getMonthsPanel().style.height = `${containerHeight}px` + getMonthsRef().scrollTop = dataList[currentIndex]?.scrollTop || 0 + } + }) + } + const requestAniFrameFunc = (mode: string) => { + if (mode === 'month') { + const { months } = panelDate + const lastItem = months[months.length - 1] + const containerHeight = lastItem.cssHeight + lastItem.scrollTop + const currentIndex = months.findIndex(item => item.currYear === true) + initPosition(containerHeight, currentIndex, months) + } else if (mode === 'quarter') { + const { quarters } = panelDate + const lastItem = quarters[quarters.length - 1] + const containerHeight = lastItem.cssHeight + lastItem.scrollTop + const currentIndex = quarters.findIndex(item => item.currYear === true) + initPosition(containerHeight, currentIndex, quarters) + } + }
306-309: 建议补充测试覆盖率
此处点击逻辑只在item.type === 'curr'时执行，新增或调整测试用例可覆盖以下场景：
item.type三种不同取值（prev,curr,next）。- 点击后
setInnerValue与onItemClick的正确调用。您是否需要我帮助编写一个针对这部分逻辑的测试用例？
🧰 Tools
🪛 GitHub Check: lint
[warning] 308-308:
React Hook useEffect has a missing dependency: 'initData'. Either include it or remove the dependency arraysrc/packages/calendar/calendarviewmodeitem.tsx (1)
308-313: 为点击逻辑补充测试
handleItemClick函数在item.type不同场景下会中断执行，建议在测试中模拟prev、next和curr以覆盖更多分支，确保点击回调与状态更新逻辑都能正确执行。如果需要，我可以提供对应的 Jest/RTL 测试示例，帮助你补齐测试覆盖率。
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 308-308: src/packages/calendar/calendarviewmodeitem.tsx#L308
Added line #L308 was not covered by tests
[warning] 310-313: src/packages/calendar/calendarviewmodeitem.tsx#L310-L313
Added lines #L310 - L313 were not covered by tests
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/packages/calendar/calendarviewmodeitem.taro.tsx(1 hunks)src/packages/calendar/calendarviewmodeitem.tsx(1 hunks)
🧰 Additional context used
🪛 GitHub Check: lint
src/packages/calendar/calendarviewmodeitem.taro.tsx
[warning] 308-308:
React Hook useEffect has a missing dependency: 'initData'. Either include it or remove the dependency array
[warning] 304-304:
React Hook useEffect has missing dependencies: 'requestAniFrameFunc' and 'viewMode'. Either include them or remove the dependency array
🪛 GitHub Check: codecov/patch
src/packages/calendar/calendarviewmodeitem.tsx
[warning] 124-125: src/packages/calendar/calendarviewmodeitem.tsx#L124-L125
Added lines #L124 - L125 were not covered by tests
[warning] 168-168: src/packages/calendar/calendarviewmodeitem.tsx#L168
Added line #L168 was not covered by tests
[warning] 293-293: src/packages/calendar/calendarviewmodeitem.tsx#L293
Added line #L293 was not covered by tests
[warning] 308-308: src/packages/calendar/calendarviewmodeitem.tsx#L308
Added line #L308 was not covered by tests
[warning] 310-313: src/packages/calendar/calendarviewmodeitem.tsx#L310-L313
Added lines #L310 - L313 were not covered by tests
[warning] 331-332: src/packages/calendar/calendarviewmodeitem.tsx#L331-L332
Added lines #L331 - L332 were not covered by tests
🔇 Additional comments (2)
src/packages/calendar/calendarviewmodeitem.taro.tsx (1)
297-299: 添加依赖以确保副作用行为一致
useEffect仅在panelDate更新时调用requestAniFrameFunc(viewMode)，若viewMode或requestAniFrameFunc发生变化却未触发副作用，可能导致渲染不一致。建议将viewMode及requestAniFrameFunc一并纳入依赖数组，或在确认它们不会变化的前提下添加代码注释说明原因。src/packages/calendar/calendarviewmodeitem.tsx (1)
301-303: 应对缺少initData依赖
useEffect(() => { initData() }, [])可能导致initData内部逻辑在外部发生改变时无法重跑。若initData不会改变，可在注释中注明；否则，请将其添加到依赖数组，并确保initData是用useCallback包裹的稳定引用。
| useEffect(() => { | ||
| requestAniFrameFunc(viewMode) | ||
| }, [panelDate]) |
There was a problem hiding this comment.
🛠️ Refactor suggestion
在副作用依赖中包含 viewMode 及函数引用
当前 useEffect(() => { requestAniFrameFunc(viewMode) }, [panelDate]) 未列出 viewMode 和 requestAniFrameFunc。如果它们在组件生命周期内发生变化，仍不会触发副作用执行。可将其改写如下：
useEffect(() => {
- requestAniFrameFunc(viewMode)
-}, [panelDate])
+ requestAniFrameFunc(viewMode)
+}, [panelDate, viewMode, requestAniFrameFunc])📝 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.
| useEffect(() => { | |
| requestAniFrameFunc(viewMode) | |
| }, [panelDate]) | |
| useEffect(() => { | |
| requestAniFrameFunc(viewMode) | |
| }, [panelDate, viewMode, requestAniFrameFunc]) |
| return ( | ||
| <div | ||
| className={`${classPrefix}-content`} | ||
| // onScroll={monthsViewScroll} |
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (3)
src/packages/calendar/calendar.tsx (1)
170-170: 🛠️ Refactor suggestion避免使用 children prop 传递子组件
根据 React 最佳实践，应该使用 JSX 元素传递子组件而不是通过 prop：
- <CalendarItem - children={children} + <CalendarItem> + {children} ... - /> + </CalendarItem>🧰 Tools
🪛 Biome (1.9.4)
[error] 170-170: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
src/packages/calendar/calendar.taro.tsx (2)
12-12: 🛠️ Refactor suggestion需要将 viewMode 属性设置为可选项
属性定义的一致性问题需要修正。
viewMode在接口中被定义为必选属性，但在defaultProps中提供了默认值。这种不一致可能会导致 TypeScript 类型检查错误。建议修改接口定义如下：
- viewMode: 'day' | 'month' | 'quarter' + viewMode?: 'day' | 'month' | 'quarter'Also applies to: 47-47
170-170: 🛠️ Refactor suggestion避免使用 children prop 传递子组件
根据 React 最佳实践，应该使用 JSX 元素传递子组件而不是通过 prop：
- <CalendarItem - children={children} + <CalendarItem> + {children} ... - /> + </CalendarItem>🧰 Tools
🪛 Biome (1.9.4)
[error] 170-170: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
🧹 Nitpick comments (3)
src/packages/calendar/calendar.tsx (2)
194-194: 使用可选链操作符优化代码可以使用可选链操作符来简化代码：
- onDayClick={(param) => onDayClick && onDayClick(param)} + onDayClick={(param) => onDayClick?.(param)}这样可以使代码更简洁，同时保持相同的功能。
🧰 Tools
🪛 Biome (1.9.4)
[error] 194-194: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
204-204: 条件渲染逻辑改进新的条件渲染逻辑
popup && viewMode === 'day'确保只有在 day 视图模式下才显示弹出式日历。请确认：
- 在 'month' 和 'quarter' 模式下，用户是否仍能获得预期的交互体验
- 这种模式切换是否符合产品需求和用户期望
这种变化可能会影响到用户的使用习惯，建议在文档中明确说明不同 viewMode 下的行为差异。
src/packages/calendar/calendar.taro.tsx (1)
204-204: 确认 viewMode 条件渲染在 Taro 中的兼容性条件
popup && viewMode === 'day'确保只有在 day 视图模式下才显示弹出式日历。请确认在 Taro 环境中：
- 不同 viewMode 下的渲染和交互流程是否符合预期
- 用户体验是否在小程序和 H5 环境中保持一致
- 是否有平台特有的限制需要额外处理
另外，建议在文档中说明此特性在不同平台上的使用限制或差异，以便开发者正确使用。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/packages/calendar/calendar.taro.tsx(9 hunks)src/packages/calendar/calendar.tsx(9 hunks)
🧰 Additional context used
🪛 Biome (1.9.4)
src/packages/calendar/calendar.tsx
[error] 194-194: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 170-170: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
src/packages/calendar/calendar.taro.tsx
[error] 170-170: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build
🔇 Additional comments (6)
src/packages/calendar/calendar.tsx (3)
17-17: 属性初始化值与用途一致性检查
value属性在 CalendarProps 接口中被定义为可选，并在 defaultProps 中设置了空字符串作为默认值。请确认这是否符合预期用途。如果
value在不提供时应该为 undefined 而不是空字符串，可以考虑修改 defaultProps。Also applies to: 52-52
149-164: 新增的 CalendarViewModeItem 组件逻辑检查当
viewMode不是 'day' 时，新增了 CalendarViewModeItem 组件的条件渲染。请确认以下几点：
- CalendarViewModeItem 是否已完全实现并测试
- 所有必需的属性是否都已正确传递
- 组件在 'month' 和 'quarter' 模式下的行为是否符合预期
另外，根据 PR 评论中提到的 "Taro h5 点击后滚动位置不对"，请确认这个问题是否已在当前实现中修复。
185-185: 新增 showMonthNumber 属性使用确认CalendarItem 组件新增了
showMonthNumber属性的传递。请确认：
- CalendarItem 组件是否已正确实现对此属性的处理逻辑
- 视觉效果是否符合设计预期
- 用户体验是否经过测试和验证
建议添加相关测试用例以确保此功能在各种条件下都能正常工作。
src/packages/calendar/calendar.taro.tsx (3)
40-40: onItemClick 属性类型定义修正
onItemClick属性在接口中应该被明确标记为可选，与其在defaultProps中提供的默认值保持一致：- onItemClick?: (param: string) => void + onItemClick?: (param: string) => void注意：该属性已经定义为可选（使用了
?），所以这是正确的实现。请确保在代码中使用此属性时考虑到它可能未被定义的情况。Also applies to: 73-73
149-164: 确认 CalendarViewModeItem.taro 组件实现在此 Taro 版本中添加了 CalendarViewModeItem.taro 组件的条件渲染。请确认：
- CalendarViewModeItem.taro 组件是否已完全实现并与 Web 版本保持行为一致
- 在小程序和 H5 环境中是否经过充分测试
- 针对 PR 评论中提到的 "Taro h5 点击后滚动位置不对" 问题是否已解决
对于小程序特有的交互方式或限制，可能需要特别处理和测试。
184-184: 新增 showMonthNumber 属性在 Taro 环境中的应用CalendarItem 组件新增了
showMonthNumber属性的传递。请确认在 Taro 环境中：
- 小程序和 H5 中的渲染效果是否一致且符合预期
- 是否会因为平台差异导致显示或交互问题
- 性能影响是否可接受，特别是在低端设备上
建议为不同平台添加专门的测试用例，确保功能在各环境下都能正常工作。
| import { getDateString } from '@/utils/date' | ||
| import { useConfig } from '@/packages/configprovider' | ||
| import type { CalendarDay, CalendarType, CalendarRef } from './types' | ||
| import { ComponentDefaults } from '@/utils/typings' | ||
|
|
||
| export interface CalendarProps { | ||
| type?: CalendarType | ||
| viewMode: 'day' | 'month' | 'quarter' |
There was a problem hiding this comment.
🛠️ Refactor suggestion
需要将 viewMode 属性设置为可选项
属性定义的一致性问题需要修正。viewMode 在接口中被定义为必选属性，但在 defaultProps 中提供了默认值。这种不一致可能会导致 TypeScript 类型检查错误。
建议修改接口定义如下：
- viewMode: 'day' | 'month' | 'quarter'
+ viewMode?: 'day' | 'month' | 'quarter'Also applies to: 47-47
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
样式
文档