fix: popup 鸿蒙下层级问题修复，dialog 的适配做了调整，日历卡片调整了demo #3038
Conversation
Walkthrough这次变更主要集中在日历卡和文本区域组件上。在日历卡组件中，默认日期由2023年的值更新为2025年，同时在各个 onChange 事件中统一添加了 "onChange" 前缀以改善日志输出。Taro 版本的日历卡还做了部分样式和按钮跳转年份的调整。对话框和弹出层组件也分别进行了样式及逻辑优化。文本区域组件则统一重命名为 “Demo”，并调整了部分结构与错误信息显示方式，所有改动均未影响对外公用接口。 Changes
Sequence Diagram(s)sequenceDiagram
participant Popup as Popup Component
participant H as harmony()
participant CST as CSSTransition
participant RC as renderContent()
Popup->>H: 调用 harmony()
alt harmony() 返回 false
Popup->>CST: 使用 CSSTransition 包装 renderContent()
CST-->>Popup: 返回过渡效果内容
else harmony() 返回 true
Popup->>RC: 直接调用 renderContent()（当 innerVisible 为 true 时）
RC-->>Popup: 返回内容
end
Possibly related PRs
Poem
✨ Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
github-actions
bot
added
action:review
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## feat_v3.x #3038 +/- ##
==========================================
Coverage 86.05% 86.05%
==========================================
Files 281 281
Lines 18255 18255
Branches 2749 2749
==========================================
Hits 15709 15709
Misses 2541 2541
Partials 5 5 ☔ View full report in Codecov by Sentry. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/packages/textarea/demos/h5/demo7.tsx (1)
5-12: 建议增加辅助文本说明禁用状态考虑到这是一个演示禁用状态的例子，建议添加一段简短的说明文字，以便用户更清楚地了解此演示的目的。
return ( + <> + <div className="demo-title">禁用状态的文本域</div> <TextArea disabled defaultValue="textarea禁用状态" showCount maxLength={20} /> + </> )src/packages/popup/popup.taro.tsx (1)
200-220: 针对鸿蒙OS环境优化动画处理基于harmony()函数的返回值，条件性地使用CSSTransition组件。这是解决鸿蒙OS环境下CSS过渡动画兼容性问题的关键。在鸿蒙环境下直接渲染内容，避免了可能的渲染问题。
建议添加注释说明这种条件渲染的目的，以便其他开发者理解这一特殊处理的原因：
const renderPop = () => { return ( <> {!harmony() ? ( <CSSTransition nodeRef={refObject} classNames={transitionName} mountOnEnter unmountOnExit={destroyOnClose} timeout={duration} in={innerVisible} onEntered={afterShow} onExited={afterClose} > {renderContent()} </CSSTransition> + /* 在鸿蒙环境下不使用CSSTransition，避免动画渲染问题 */ ) : ( innerVisible && renderContent() )} </> ) }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (41)
src/packages/calendarcard/demos/h5/demo1.tsx(1 hunks)src/packages/calendarcard/demos/h5/demo11.tsx(1 hunks)src/packages/calendarcard/demos/h5/demo2.tsx(1 hunks)src/packages/calendarcard/demos/h5/demo3.tsx(1 hunks)src/packages/calendarcard/demos/h5/demo4.tsx(1 hunks)src/packages/calendarcard/demos/h5/demo5.tsx(1 hunks)src/packages/calendarcard/demos/h5/demo7.tsx(1 hunks)src/packages/calendarcard/demos/h5/demo8.tsx(1 hunks)src/packages/calendarcard/demos/h5/demo9.tsx(1 hunks)src/packages/calendarcard/demos/taro/demo1.tsx(1 hunks)src/packages/calendarcard/demos/taro/demo10.tsx(1 hunks)src/packages/calendarcard/demos/taro/demo11.tsx(1 hunks)src/packages/calendarcard/demos/taro/demo2.tsx(1 hunks)src/packages/calendarcard/demos/taro/demo3.tsx(1 hunks)src/packages/calendarcard/demos/taro/demo4.tsx(1 hunks)src/packages/calendarcard/demos/taro/demo5.tsx(1 hunks)src/packages/calendarcard/demos/taro/demo7.tsx(1 hunks)src/packages/calendarcard/demos/taro/demo8.tsx(1 hunks)src/packages/calendarcard/demos/taro/demo9.tsx(1 hunks)src/packages/dialog/dialog.taro.tsx(3 hunks)src/packages/popup/popup.taro.tsx(5 hunks)src/packages/textarea/demo.taro.tsx(1 hunks)src/packages/textarea/demos/h5/demo1.tsx(2 hunks)src/packages/textarea/demos/h5/demo2.tsx(1 hunks)src/packages/textarea/demos/h5/demo3.tsx(1 hunks)src/packages/textarea/demos/h5/demo4.tsx(1 hunks)src/packages/textarea/demos/h5/demo5.tsx(2 hunks)src/packages/textarea/demos/h5/demo6.tsx(1 hunks)src/packages/textarea/demos/h5/demo7.tsx(1 hunks)src/packages/textarea/demos/h5/demo8.tsx(2 hunks)src/packages/textarea/demos/h5/demo9.tsx(1 hunks)src/packages/textarea/demos/taro/demo1.tsx(2 hunks)src/packages/textarea/demos/taro/demo2.tsx(1 hunks)src/packages/textarea/demos/taro/demo3.tsx(1 hunks)src/packages/textarea/demos/taro/demo4.tsx(1 hunks)src/packages/textarea/demos/taro/demo5.tsx(2 hunks)src/packages/textarea/demos/taro/demo6.tsx(1 hunks)src/packages/textarea/demos/taro/demo7.tsx(1 hunks)src/packages/textarea/demos/taro/demo8.tsx(2 hunks)src/packages/textarea/demos/taro/demo9.tsx(1 hunks)src/packages/textarea/textarea.taro.tsx(1 hunks)
✅ Files skipped from review due to trivial changes (24)
- src/packages/calendarcard/demos/taro/demo10.tsx
- src/packages/calendarcard/demos/taro/demo3.tsx
- src/packages/calendarcard/demos/h5/demo4.tsx
- src/packages/textarea/demos/taro/demo5.tsx
- src/packages/textarea/demos/taro/demo3.tsx
- src/packages/calendarcard/demos/taro/demo9.tsx
- src/packages/textarea/demos/taro/demo2.tsx
- src/packages/calendarcard/demos/taro/demo7.tsx
- src/packages/textarea/demo.taro.tsx
- src/packages/calendarcard/demos/h5/demo7.tsx
- src/packages/calendarcard/demos/taro/demo4.tsx
- src/packages/calendarcard/demos/taro/demo8.tsx
- src/packages/textarea/demos/h5/demo5.tsx
- src/packages/textarea/demos/h5/demo9.tsx
- src/packages/textarea/demos/taro/demo7.tsx
- src/packages/textarea/demos/taro/demo1.tsx
- src/packages/calendarcard/demos/h5/demo3.tsx
- src/packages/textarea/demos/taro/demo8.tsx
- src/packages/textarea/demos/h5/demo8.tsx
- src/packages/textarea/demos/h5/demo4.tsx
- src/packages/textarea/demos/taro/demo9.tsx
- src/packages/textarea/demos/h5/demo2.tsx
- src/packages/textarea/demos/taro/demo4.tsx
- src/packages/textarea/demos/h5/demo3.tsx
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test
🔇 Additional comments (30)
src/packages/textarea/demos/h5/demo6.tsx (1)
4-7: 组件命名变更与结构简化将组件名从
Demo6更改为Demo，并移除了包裹 TextArea 的片段标签，使结构更加简洁。这种统一的命名约定有助于保持整个演示代码库的一致性。src/packages/textarea/textarea.taro.tsx (1)
153-159:❓ Verification inconclusive
将 Text 组件替换为 View 组件
这个修改可能是针对 PR 中提到的"鸿蒙下层级问题"进行的调整。将显示字符计数的
Text组件替换为View组件可能解决了在 HarmonyOS 环境中的层级或渲染问题。保持了相同的类名和内容，确保功能和样式保持一致。
🏁 Script executed:
#!/bin/bash # 查找代码库中是否有其他类似的模式（Text 替换为 View） rg "Text" --type=tsx -A 3 -B 3 | grep -A 3 -B 3 "limit"Length of output: 81
验证提醒：请确认所有 Text 组件已成功替换为 View
目前针对 PR 中提到的“鸿蒙下层级问题”的修正，我们需要确保在整个代码库中（特别是文件
src/packages/textarea/textarea.taro.tsx的 153-159 行处）没有遗留<Text组件的使用。如果该处仅使用了<View组件，且功能与样式均保持一致，则此次修改已满足要求。但由于之前的搜索命令因未识别 tsx 文件类型而未产出有效结果，建议使用下面的脚本进行进一步验证：
方案1：直接使用 grep 检查指定文件
请运行以下脚本，确认文件中不再包含<Text的引用：#!/bin/bash grep "<Text" src/packages/textarea/textarea.taro.tsx || echo "已确认：文件中未找到 <Text"方案2：使用 rg 搜索整个项目（并添加 tsx 文件类型支持）
该命令将帮助你确认项目中是否存在残留的<Text使用：#!/bin/bash rg --type-add 'tsx:*.tsx' --type=tsx "<Text" || echo "已确认：项目中未找到 <Text"请根据脚本输出进行确认，如无
<Text的残留，则此次修改可视为符合预期。如在其它文件中仍发现<Text的引用，可能需要跟进进一步的处理。src/packages/textarea/demos/h5/demo1.tsx (1)
4-23: 组件命名统一为 Demo将组件名从
Demo1更改为Demo，保持了功能不变。这种统一命名的模式简化了组件的引用和维护，提高了代码库的一致性。src/packages/textarea/demos/taro/demo6.tsx (1)
4-7: Taro 版本组件命名统一与结构简化与 H5 版本一致，将 Taro 版本的组件名从
Demo6更改为Demo，并简化了组件结构。这种一致性有助于在跨平台代码库中维护统一的命名约定。src/packages/textarea/demos/h5/demo7.tsx (2)
4-4: 组件重命名符合标准化的要求！将组件从
Demo7重命名为Demo使其与目录中的其他演示组件保持一致，符合代码标准化的良好实践。Also applies to: 14-14
6-11: 组件结构优化得当移除了不必要的 JSX Fragment 包装，对于只有单个组件的情况下直接返回 TextArea 更为简洁。组件属性设置合理，
disabled、defaultValue、showCount和maxLength属性都保持了正确的演示效果。src/packages/calendarcard/demos/h5/demo9.tsx (1)
6-6: 改进了日志输出的清晰度！通过添加"onChange"前缀，使得控制台输出更加明确，便于调试和追踪事件流程。这是一个良好的日志记录实践。
src/packages/calendarcard/demos/h5/demo11.tsx (1)
17-18: 更新了年份设置，使示例更加与时俱进将跳转年份从2023年更新到2025年，使得示例更加符合当前时间，提高了用户体验的相关性。这是一个很好的更新，保持了示例的时效性。
src/packages/calendarcard/demos/h5/demo5.tsx (2)
5-5: 更新了初始日期值将初始日期从2023年更新到2025年，与其他示例保持一致，使得组件展示更加与时俱进。
7-7: 统一了日志输出格式添加"onChange"前缀到日志输出，这种修改与其他示例保持一致，提高了整体代码的一致性和可维护性。
src/packages/calendarcard/demos/taro/demo5.tsx (2)
5-5: 更新了Taro版本的初始日期值将Taro版本的初始日期也同步更新到2025年，保持了H5版本和Taro版本之间的一致性，这是非常好的做法。
7-7: 统一了Taro版本的日志输出格式与H5版本相同，添加了"onChange"前缀到日志输出，确保了不同平台版本之间的一致性，有利于维护和调试。
src/packages/calendarcard/demos/h5/demo1.tsx (2)
4-4: 日期更新为更合适的年份将默认日期从2023年更新到了2025年，这样的更新可以让示例更加具有时效性，避免使用过去的日期。
8-8: 改进了控制台日志输出添加了'onChange'前缀使得日志输出更加清晰，便于开发者在控制台中识别日志来源。这是一个良好的实践，有助于调试和日志追踪。
src/packages/calendarcard/demos/taro/demo1.tsx (2)
4-4: 日期更新为更合适的年份将默认日期从2023年更新到了2025年，这样的更新可以让示例更加具有时效性，避免使用过去的日期。与H5版本的变更保持一致，确保了跨平台的统一体验。
8-8: 改进了控制台日志输出添加了'onChange'前缀使得日志输出更加清晰，便于开发者在控制台中识别日志来源。这种一致性的改进有助于在Taro环境中进行更高效的调试。
src/packages/calendarcard/demos/h5/demo8.tsx (2)
6-6: 改进了控制台日志输出添加了'onChange'前缀使得日志输出更加清晰，与其他demo文件保持一致的日志格式，便于开发者在调试过程中快速定位相关信息。
10-10: 更新了日历卡起始日期将起始日期从2023年更新到2025年，保持了与其他示例文件的一致性，使示例更具有时效性。同时确保了endDate属性（2025-11-11）与startDate在同一年份，避免了潜在的日期范围问题。
src/packages/calendarcard/demos/taro/demo11.tsx (2)
13-13: 添加了空间组件的底部边距为Space组件添加了底部边距，改善了UI布局，使按钮组与下方的日历卡之间有更好的视觉分隔，提升了用户体验。
17-18: 更新了年份跳转目标和按钮文本将跳转目标年份从2023年更新为2026年，并相应地更新了按钮文本。这个变更保持了与其他demo的一致性，使用了更具有未来性的日期展示。
src/packages/calendarcard/demos/taro/demo2.tsx (2)
11-11: 已将日期从2023年更新到2025年以保持一致性将初始值中的第二个日期从2023年更新到了2025年，保持了与其他日历卡组件示例的一致性。
19-19: 添加了适当的底部间距，提高了布局视觉效果为Space组件添加了底部间距，使标签与日历卡之间的布局更加合理，提升了用户界面的视觉体验。
src/packages/calendarcard/demos/h5/demo2.tsx (2)
11-11: 已将日期从2023年更新到2025年以保持演示数据的时效性将日期从2023年更新到2025年，保持了演示数据的时效性和与其他日历卡组件示例的一致性。
15-15: 改进了日志输出格式，增加了前缀标识符为控制台日志添加了"onChange"前缀，使日志输出更加清晰，便于调试和跟踪事件流程。
src/packages/dialog/dialog.taro.tsx (2)
252-263: 优化了渲染逻辑，确保内容始终渲染改进了渲染逻辑，将renderContent()从条件渲染中抽离出来，确保对话框内容总是被渲染，而不受overlay显示状态的影响。这样的调整使组件结构更加合理，有助于解决鸿蒙OS环境下的层级问题。
232-232:✅ Verification successful
解决鸿蒙OS环境下的层级问题
通过将Content组件的zIndex设置为比overlay高1个层级，解决了在鸿蒙OS环境下对话框内容可能被覆盖的问题。这是解决PR中提到的"popup鸿蒙下层级问题"的一部分。
🏁 Script executed:
#!/bin/bash # 检查项目中是否有其他类似的z-index相关修复，确认解决方案的一致性 echo "检查其他组件中类似的zIndex调整:" rg "zIndex.*\+\s*1" --type tsx -A 1 -B 1Length of output: 252
注意：请确认鸿蒙OS层级问题解决方案的一致性
当前代码在
src/packages/dialog/dialog.taro.tsx的第232行通过将 Content 组件的zIndex设置为zIndex + 1来确保其层级高于 overlay，解决了鸿蒙OS下对话框内容可能被覆盖的问题。从我们新执行的搜索脚本来看，未在其他 TSX 文件中发现类似调整的用法。但由于自动搜索可能遗漏部分情况，请您再手动检验一下代码库中是否存在需要类似处理的地方，以确保整体解决方案的一致性。--- 🏁 Script executed: ```shell #!/bin/bash echo "再次检查项目中所有tsx文件中关于 zIndex + 1 的用法:" rg "zIndex\\s*:\\s*zIndex\\s*\\+\\s*1" -g "*.tsx" -A 2 -B 2Length of output: 621
请注意鸿蒙OS层级问题修复方案的一致性
经过查询，确认目前只有在
src/packages/dialog/dialog.taro.tsx第232行使用了zIndex: zIndex + 1的调整。这种方式确保 Content 组件的层级高于 overlay，以解决鸿蒙OS环境下对话框内容可能被覆盖的问题。请开发者手动复查其他相关组件，确保没有遗漏类似的层级调整需求。src/packages/popup/popup.taro.tsx (4)
88-88: 与对话框组件保持一致的zIndex处理与dialog.taro.tsx中的修改保持一致，通过将弹出层的zIndex设置为比overlay高1个层级，解决了鸿蒙OS环境下的层级问题。
184-199: 抽取renderContent函数改善代码结构将弹出层内容渲染逻辑抽取为单独的renderContent函数，提高了代码的模块化和可读性，便于维护和后续扩展。这是良好的代码重构实践。
236-238: 确保弹出层内容正确渲染将renderPop()从条件渲染中抽离出来，确保弹出层内容总是被渲染，不受overlay显示状态的影响。这与dialog.taro.tsx中的修改保持一致，共同解决了鸿蒙OS环境下的层级问题。
17-17:❓ Verification inconclusive
引入harmony函数以检测鸿蒙OS环境
添加了harmony函数的导入，用于检测应用是否在鸿蒙OS环境中运行，以便在不同平台上采用相应的渲染策略。
🏁 Script executed:
#!/bin/bash # 检查harmony函数的实现和用法 echo "查找harmony函数的定义:" fd "platform-taro" --type file --exec cat {} \; | grep -A 10 "harmony" echo "检查harmony函数在其他组件中的使用情况:" rg "harmony\(\)" --type tsxLength of output: 779
已验证：harmony 函数定义和引入均正确，但建议手动确认 TSX 文件中对该函数的调用情况
- 在
@/utils/platform-taro中，harmony 函数的实现逻辑符合预期，用于检测鸿蒙OS环境。- 导入语句在
src/packages/popup/popup.taro.tsx中正确无误。- 注意：之前用
rg "harmony\(\)" --type tsx搜索 TSX 文件时出现文件类型识别错误。建议使用如下命令手动验证 TSX 文件中是否有对该函数的调用（例如：rg 'harmony\(' -g '*.tsx'），以确保所有用法均符合预期。
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit