feat(collapse): 适配鸿蒙 #3139
feat(collapse): 适配鸿蒙 #3139
Conversation
Walkthrough本次 PR 更新了两个组件（Collapse 与 CollapseItem）的版本号，从 2.0.0 升级到 3.0.0，并同时更新了其元数据（如作者、dd 字段及 v15 值）。此外，还调整了 CollapseItem 组件的样式文件与逻辑：CSS 类名重命名、新嵌套类添加，以及状态管理和高度计算逻辑的重构。测试文件中的断言也已更新以适应新的 DOM 结构。 Changes
Sequence Diagram(s)sequenceDiagram
participant U as 用户
participant CI as CollapseItem组件
participant NT as nextTick
participant GR as getRectByTaro
U->>CI: 点击折叠项头部
CI->>CI: 调用toggle更新状态
CI->>NT: 等待DOM更新（nextTick）
NT->>GR: 异步获取内容高度
GR-->>NT: 返回高度值
NT-->>CI: 更新高度状态 (updateRectHeight)
CI-->>U: 组件完成重新渲染
Possibly related PRs
Suggested reviewers
Poem
✨ 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 (
|
github-actions
bot
added
action:review
![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 (8)
src/packages/collapseitem/collapseitem.tsx (4)
63-63: 添加调试日志和状态变量添加了控制台日志输出用于调试，并引入了三个新的状态变量：
tran、currentHeight和wrapperHeight，用于精确控制折叠面板的高度和过渡动画。不过，生产环境中应该移除调试日志。
- console.log('oasis', expanded, name)Also applies to: 71-73
75-87: 实现高度计算的异步更新机制新增的
updateRectHeight函数通过异步方式计算内容高度并更新状态，改进了高度计算的准确性和动画流畅度。代码中的调试日志应在生产环境中移除。
- console.log('oasis res', height)
89-94: 添加响应式高度更新新增的
useEffect钩子确保在children或expanded状态变化时重新计算高度，增强了组件对内容变化的响应能力。同样，应移除调试日志。
- console.log('oasis update', name)
96-106: 优化折叠切换逻辑简化了
toggle函数并更新了handleClick函数，使用currentHeight.current获取当前高度值，提高了代码的可维护性。请移除调试日志。
- console.log('oasis name', name)src/packages/collapseitem/collapseitem.taro.tsx (4)
60-61: 使用 UUID 生成唯一标识符和添加调试日志引入
useUuid钩子生成唯一 ID，替代了之前的随机 ID 方式，增强了组件在多实例场景下的稳定性。请移除生产环境中的调试日志。
- console.log('oasis', expanded, name)Also applies to: 69-69
81-93: 实现 Taro 环境下的高度计算新增的
updateRectHeight函数使用nextTick和getRectByTaro异步获取内容高度，适应了小程序环境下的渲染特性。请移除调试日志。
- console.log('oasis res', res.height)
94-99: 添加响应式高度更新优化了
useEffect钩子，使用nextTick确保在小程序环境下正确计算高度，增强了组件对内容变化的响应能力。请移除调试日志。
- console.log('oasis update', name)
101-113: 优化 Taro 环境下的状态更新流程简化了
toggle函数并在handleClick中使用nextTick确保状态更新的正确顺序，适应小程序环境下的异步渲染特性。请移除调试日志。
- console.log('oasis name', name)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
src/config.json(1 hunks)src/packages/collapseitem/collapseitem.scss(2 hunks)src/packages/collapseitem/collapseitem.taro.tsx(3 hunks)src/packages/collapseitem/collapseitem.tsx(3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test
🔇 Additional comments (12)
src/config.json (2)
1130-1130: 版本更新和元数据变更Collapse 组件的版本从 "2.0.0" 升级到 "3.0.0"，同时更新了
v15值从 -1 到 1，作者从 "zhenyulei" 变更为 "oasis"，并将dd属性从 false 修改为 true。这些变更与组件的鸿蒙适配相关联。Also applies to: 1138-1140
1143-1143: CollapseItem 组件元数据更新CollapseItem 组件的版本从 "2.0.0" 升级到 "3.0.0"，作者从 "zhenyulei" 变更为 "oasis"，同时将
dd属性从 false 修改为 true，保持与 Collapse 组件一致。Also applies to: 1151-1152
src/packages/collapseitem/collapseitem.scss (3)
41-46: 优化添加针对鸿蒙系统的条件编译指令为伪元素添加了鸿蒙系统的专用样式支持，通过条件编译指令区分不同平台的变换效果，增强了跨平台兼容性。
97-105: 重构内容包装器的类结构将原
&-content类重命名为&-content-wrapper，并添加了关键的宽度、位置和盒模型属性，同时引入了&-tran子类来处理过渡动画效果，优化了组件的布局结构。
107-112: 改进内容元素的定位方式对
&-content类进行了重构，设置为绝对定位并明确了高度和宽度属性，改善了滑动动画的实现方式，使过渡效果更加平滑。src/packages/collapseitem/collapseitem.tsx (3)
5-8: 引入新的 Hooks 增强状态管理引入了
useEffect和useState钩子，并添加了自定义的useRefState钩子，为组件提供更强大的状态管理能力，特别是对高度变化的处理。Also applies to: 13-13
123-134: 更新渲染结构和条件样式重构了包装器 div 的类名和样式，使用条件性样式应用基于
tran状态的高度值，实现了更平滑的高度过渡效果。
136-140: 重构内容渲染结构优化了内容元素的嵌套结构，使用 ref 引用获取内容高度，提高了高度计算的准确性。
src/packages/collapseitem/collapseitem.taro.tsx (4)
5-8: 引入 Taro 特定的工具和 Hooks更新了导入，添加了
nextTick、getRectByTaro、useUuid和useRefState等特定于 Taro 的工具和钩子，以适应小程序环境下的组件行为。Also applies to: 12-17
77-79: 添加状态管理变量引入了三个新的状态变量：
tran、currentHeight和wrapperHeight，用于精确控制折叠面板在 Taro 环境下的高度和过渡动画。
130-141: 更新 Taro 组件的渲染结构和条件样式重构了包装器 View 的类名和样式，使用条件性样式应用基于
tran状态的高度值，实现了更平滑的高度过渡效果。
143-145: 重构内容渲染结构优化了内容元素的嵌套结构，使用 ref 引用和唯一 ID 获取内容高度，适应 Taro 环境下的元素选择和高度计算需求。
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## feat_v3.x #3139 +/- ##
=============================================
+ Coverage 87.08% 87.12% +0.03%
=============================================
Files 280 280
Lines 18535 18530 -5
Branches 2818 2815 -3
=============================================
+ Hits 16142 16144 +2
+ Misses 2388 2381 -7
Partials 5 5 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (7)
src/packages/collapseitem/collapseitem.tsx (3)
63-63: 建议移除调试日志这行调试日志在生产环境中不应该保留，建议在合并前删除。
- console.log('oasis', expanded, name)
77-78: 建议移除调试日志请移除这行调试日志，它在生产环境中不应该保留。
- console.log('oasis res', height)
95-101: 优化点击事件处理
handleClick函数现在更清晰地处理点击事件，但同样包含了不必要的调试日志。const handleClick = () => { if (!disabled) { - console.log('oasis name', name) context.updateValue(name) toggle() } }src/packages/collapseitem/collapseitem.taro.tsx (4)
69-69: 建议移除调试日志这行调试日志应在合并前删除。
- console.log('oasis', expanded, name)
84-84: 建议移除调试日志请移除这行调试日志。
- console.log('oasis res', res.height)
96-96: 建议移除调试日志请移除这行调试日志。
- console.log('oasis update', name)
107-107: 建议移除调试日志请移除这行调试日志。
- console.log('oasis name', name)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
src/packages/collapse/__test__/__snapshots__/collapse.spec.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (4)
src/packages/collapse/__test__/collapse.spec.tsx(1 hunks)src/packages/collapseitem/collapseitem.scss(3 hunks)src/packages/collapseitem/collapseitem.taro.tsx(3 hunks)src/packages/collapseitem/collapseitem.tsx(3 hunks)
🧰 Additional context used
🪛 GitHub Check: codecov/patch
src/packages/collapseitem/collapseitem.tsx
[warning] 79-83: src/packages/collapseitem/collapseitem.tsx#L79-L83
Added lines #L79 - L83 were not covered by tests
[warning] 126-128: src/packages/collapseitem/collapseitem.tsx#L126-L128
Added lines #L126 - L128 were not covered by tests
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test
🔇 Additional comments (24)
src/packages/collapse/__test__/collapse.spec.tsx (1)
66-72: 测试用例更新适配组件结构变更这里将测试从直接检查
.nut-collapse-item-content元素的内联样式更改为异步等待并检查.nut-collapse-item-content-wrapper元素的样式对象。这个更新与组件结构的变化保持一致，确保测试能正确验证折叠面板的收缩状态。src/packages/collapseitem/collapseitem.scss (4)
41-46: 为鸿蒙系统添加条件样式适配通过条件编译指令针对鸿蒙系统优化了变换样式。在鸿蒙环境下使用
scale(1, 1)，在非鸿蒙环境下使用scale(1, 0.5)，这有助于解决不同平台上的样式呈现差异问题。
85-95: 优化BEM命名规范将类名从
&-header.disabled改为&-header-disabled更符合BEM命名规范，提高了代码的可维护性。
97-105: 重构内容包装器结构与过渡效果新增的
&-content-wrapper类及其子类&-content-wrapper-tran优化了过渡动画效果的实现。这种结构更有利于控制内容展开/收起的动画表现。
107-117: 调整内容定位策略修改
&-content类的定位属性为绝对定位（position: absolute），并设置了宽高，这使得内容区域的尺寸计算和动画过渡更加精确可控。src/packages/collapseitem/collapseitem.tsx (8)
5-8: 扩展组件所需的React hooks引入了更多的React hooks以支持新的状态管理和DOM操作需求，这是重构组件的必要准备。
13-13: 引入自定义hooks增强状态管理引入
useRefState钩子，它比普通的useState更适合在异步操作中保持最新的状态引用，这对动态高度计算非常有用。
71-73: 引入新的状态管理变量新增了三个状态变量来管理折叠面板的高度和过渡效果：
tran: 控制是否应用过渡效果currentHeight: 使用useRefState记录内容的当前高度wrapperHeight: 控制包装器的高度这种方法比以前的实现更具响应性和可预测性。
87-89: 添加副作用处理使用
useEffect在组件内容或展开状态变化时触发高度更新，这确保了组件能够响应这些变化并正确调整高度。
91-94: 简化切换逻辑新的
toggle函数简化了高度切换逻辑，直接基于当前展开状态设置适当的高度值。
106-108: 更新类名命名规范使用
${classPrefix}-header-disabled替代.disabled选择器，符合BEM命名规范，提高了代码可读性和维护性。
119-130: 改进渲染逻辑与样式控制包装器div的渲染逻辑更新为基于
tran状态有条件地应用样式，提供了更平滑的过渡效果。这部分代码也缺少测试覆盖，建议添加相应测试。🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 126-128: src/packages/collapseitem/collapseitem.tsx#L126-L128
Added lines #L126 - L128 were not covered by tests
133-137: 优化内容结构调整后的内容div结构更清晰，将内容文本包装在单独的div中，便于精确计算高度和应用样式。
src/packages/collapseitem/collapseitem.taro.tsx (11)
5-8: 扩展Taro组件所需的React hooks引入更多的React hooks以支持新的状态管理和DOM操作需求，这是重构Taro版本组件的必要准备。
12-17: 引入Taro特定的工具和自定义hooks新增导入：
nextTick: 确保DOM更新后执行操作getRectByTaro: 获取Taro环境下元素尺寸的工具useUuid: 生成唯一标识符useRefState: 增强状态管理这些工具对于适配Taro环境下的组件行为至关重要。
60-61: 优化元素标识方式使用
useUuid钩子生成唯一ID，替代原来的随机ID生成方式，提高了标识符的可靠性和唯一性。
77-79: 引入新的状态管理变量与React版本一致，新增三个状态变量来管理折叠面板的高度和过渡效果：
tran: 控制是否应用过渡效果currentHeight: 使用useRefState记录内容的当前高度wrapperHeight: 控制包装器的高度
81-93: 实现Taro环境下的高度计算逻辑新的
updateRectHeight函数使用Taro特定的API（nextTick和getRectByTaro）来异步获取和更新内容高度。这确保了在Taro环境下组件能正确计算和应用高度。
94-99: 优化副作用处理使用
useEffect和nextTick的组合确保在组件内容或展开状态变化时正确更新高度，这在Taro环境中尤为重要。
101-104: 简化Taro环境下的切换逻辑简化后的
toggle函数与React版本保持一致，直接基于当前展开状态设置适当的高度值。
105-113: 优化Taro环境下的点击事件处理
handleClick函数现在在Taro环境下使用nextTick确保状态更新后再调用toggle，提高了状态更新的可靠性。
118-120: 更新Taro组件的类名命名规范与React版本一致，使用
${classPrefix}-header-disabled替代.disabled选择器，保持了代码风格的一致性。
132-142: 改进Taro环境下的渲染逻辑与样式控制包装器View的渲染逻辑更新为基于
tran状态有条件地应用样式，与React版本保持一致，提供了在Taro环境下的平滑过渡效果。
145-146: 优化Taro环境下的内容结构调整后的内容View结构更清晰，添加了对应的引用和ID，便于在Taro环境下进行尺寸计算。
| const updateRectHeight = async () => { | ||
| const height = contentRef.current.offsetHeight | ||
| console.log('oasis res', height) | ||
| if (height) { | ||
| setCurrentHeight(height) | ||
| setWrapperHeight(expanded ? height : 0) | ||
| setTimeout(() => { | ||
| setTran(1) | ||
| }) | ||
| } | ||
| } |
There was a problem hiding this comment.
💡 Verification agent
❓ Verification inconclusive
实现高度计算逻辑
新的updateRectHeight函数通过读取DOM元素的实际高度来更新状态，确保动态内容能够正确展示。但是这部分代码缺少测试覆盖，建议添加相应的单元测试。
🏁 Script executed:
#!/bin/bash
# 检查是否有测试覆盖updateRectHeight函数
grep -r "updateRectHeight" --include="*.spec.tsx" --include="*.test.tsx" src/Length of output: 77
请补充 updateRectHeight 函数的单元测试
经过验证，目前代码库中未发现与 updateRectHeight 相关的单元测试。建议在相应测试文件中添加单元测试，重点覆盖以下场景：
- 当
contentRef.current.offsetHeight有效时，验证setCurrentHeight与setWrapperHeight分别传入正确的值（根据expanded状态分别为height或0）。 - 针对
setTimeout内部逻辑，建议使用模拟时钟（例如 Jest fake timers）确认setTran在延时后被正确调用。
这样能够确保动态高度逻辑在不同场景下的稳定性和正确性。
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 79-83: src/packages/collapseitem/collapseitem.tsx#L79-L83
Added lines #L79 - L83 were not covered by tests
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
src/packages/collapseitem/collapseitem.taro.tsx (4)
60-62: 需要移除调试日志代码中包含多个
console.log调试语句，这些应该在生产环境代码中移除，以避免不必要的控制台输出和潜在的性能影响。- const target = `nut-collapse-content-${uid}` - console.log('oasistarget', target) + const target = `nut-collapse-content-${uid}` - console.log('oasis', expanded, name) + - console.log('oasis res', res.height) +Also applies to: 70-70, 85-85
82-94: 高度计算方法优化新的
updateRectHeight方法通过nextTick确保DOM更新完成后再进行高度测量，并使用getRectByTaro配合唯一ID进行元素查询，这比之前的实现更可靠，特别是在不同运行环境（如鸿蒙系统）下。建议考虑添加错误处理，以防止
getRectByTaro在某些情况下失败：const updateRectHeight = async () => { nextTick(async () => { - const res = await getRectByTaro(contentRef.current, target) - console.log('oasis res', res.height) - if (res?.height) { + try { + const res = await getRectByTaro(contentRef.current, target) + if (res?.height) { setCurrentHeight(res.height) setWrapperHeight(expanded ? res.height : 0) setTimeout(() => { setTran(1) }) + } + } catch (error) { + console.error('获取元素高度失败:', error) } }) }
95-100: 副作用处理优化在
useEffect中使用nextTick确保DOM更新后再调用updateRectHeight是合理的。依赖项数组包含children和expanded，确保了当内容或展开状态变化时重新计算高度。不过，应移除不必要的日志输出：
useEffect(() => { nextTick(() => { - console.log('oasis update', name) updateRectHeight() }) }, [children, expanded])
106-114: handleClick方法改进使用
nextTick包装toggle调用是一个好的改进，确保状态更新后再进行高度调整。不过同样需要移除调试日志：const handleClick = () => { if (!disabled) { - console.log('oasis name', name) context.updateValue(name) nextTick(() => { toggle() }) } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/packages/collapseitem/collapseitem.taro.tsx(3 hunks)src/utils/get-rect-by-taro.ts(1 hunks)
🧰 Additional context used
🧬 Code Definitions (1)
src/packages/collapseitem/collapseitem.taro.tsx (1)
src/utils/get-rect-by-taro.ts (1)
getRectByTaro(26-46)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test
🔇 Additional comments (6)
src/utils/get-rect-by-taro.ts (1)
37-37: 增加了元素上下文范围，提高了选择器查询精度通过添加
.in(element)方法，将选择器查询限定在指定元素的上下文中，这样可以更准确地获取目标元素的位置和尺寸信息。这个改动对于正确适配鸿蒙系统环境下的元素查询非常重要，有助于确保在嵌套组件结构中能够准确定位元素。src/packages/collapseitem/collapseitem.taro.tsx (5)
5-8: 导入变更使组件功能更完整新增导入的 hooks 和工具函数很好地增强了组件功能，特别是：
nextTick确保DOM更新后再进行计算getRectByTaro用于获取元素尺寸useUuid生成唯一标识符比随机ID更可靠useRefState结合了state和ref的优点，适合需要在回调中访问的状态值这些变更对于鸿蒙系统的适配非常重要，能够确保组件在不同环境中的一致性表现。
Also applies to: 12-17
78-80: 状态管理优化使用
useRefState替代普通的useState来管理currentHeight是一个很好的改进。这种方式结合了 state 更新视图和 ref 在回调中稳定访问的优势，特别适合在异步操作中需要获取最新值的场景。
102-105: toggle方法简化新的
toggle方法更加简洁和直接，通过currentHeight.current获取最新的高度值是使用useRefState的好处体现。这种实现方式在动画过渡中更可靠，有助于确保在鸿蒙环境下的流畅体验。
119-121: 样式处理改进类名条件渲染和样式动态计算的改进增强了组件的视觉表现：
- 添加了禁用状态的专用类名
- 引入了
tran状态来控制过渡效果的时机- 直接设置高度值而不是使用类名切换
这些变更有助于在鸿蒙系统下获得更一致的动画效果。
Also applies to: 133-143
146-147: 元素结构优化为内容元素添加唯一ID并改进类名结构，有助于更精确地获取元素并应用样式。这种改进对于跨平台兼容性（特别是鸿蒙系统）非常重要。
fixed |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
src/packages/collapseitem/collapseitem.taro.tsx (1)
100-107: 在handleClick中添加setTimeout延迟
handleClick函数现在包含一个setTimeout来延迟调用toggle函数。这可能是为了确保状态更新已完成，但缺少明确的注释说明此延迟的目的。建议添加注释说明使用
setTimeout的原因：const handleClick = () => { if (!disabled) { context.updateValue(name) + // 延迟执行toggle以确保状态更新已完成 setTimeout(() => { toggle() }, 150) } }src/packages/collapseitem/collapseitem.tsx (1)
89-98: 简化toggle和handleClick函数
toggle函数逻辑变得更加简洁，直接使用currentHeight.current来获取最新的高度值。
handleClick函数更新了状态并直接调用toggle，与Taro版本相比，这里没有使用setTimeout延迟。为保持与Taro版本的一致性，建议考虑是否也需要添加延迟：
const handleClick = () => { if (!disabled) { context.updateValue(name) - toggle() + // 为保持与Taro版本一致，考虑添加延迟 + setTimeout(() => { + toggle() + }, 0) } }或者在注释中说明为什么Web版本不需要延迟。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/packages/collapseitem/collapseitem.taro.tsx(4 hunks)src/packages/collapseitem/collapseitem.tsx(3 hunks)
🧰 Additional context used
🧬 Code Definitions (1)
src/packages/collapseitem/collapseitem.taro.tsx (1)
src/utils/get-rect-by-taro.ts (1)
getRectByTaro(26-45)
🪛 GitHub Check: codecov/patch
src/packages/collapseitem/collapseitem.tsx
[warning] 77-81: src/packages/collapseitem/collapseitem.tsx#L77-L81
Added lines #L77 - L81 were not covered by tests
[warning] 123-125: src/packages/collapseitem/collapseitem.tsx#L123-L125
Added lines #L123 - L125 were not covered by tests
🔇 Additional comments (12)
src/packages/collapseitem/collapseitem.taro.tsx (7)
5-17: 改进了导入依赖和工具函数代码引入了一些新的依赖和工具函数，如
nextTick、getRectByTaro、useUuid和useRefState，这些工具函数的使用增强了组件的功能和状态管理能力。
60-62: 使用useUuid替代随机ID生成，提高了稳定性使用
useUuid钩子来生成唯一标识符，并用于构建目标ID，这比使用随机数更可靠，特别是在组件重新渲染时能保持ID的一致性。
76-78: 新增状态变量，优化过渡动画管理引入了三个新的状态变量：
tran：控制过渡动画的触发currentHeight：使用useRefState存储当前高度，便于在异步回调中访问最新值wrapperHeight：管理包装器的高度这种状态管理方式使动画过渡更加平滑可控。
80-89: 新增updateRectHeight函数，改进高度计算逻辑新的
updateRectHeight函数通过getRectByTaro异步获取内容元素的高度，并相应地更新状态变量。这种方法适合在小程序环境中使用，但缺少错误处理机制。建议添加错误处理逻辑，处理
res?.height可能不存在的情况：const updateRectHeight = async () => { const res = await getRectByTaro(contentRef.current, target) if (res?.height) { setCurrentHeight(res.height) setWrapperHeight(expanded ? res.height : 0) nextTick(() => { setTran(1) }) + } else { + console.warn('无法获取内容高度') + setCurrentHeight(0) + setWrapperHeight(0) } }与前一版审查意见一致，此代码仍缺少单元测试覆盖。请添加适当的测试用例。
#!/bin/bash # 检查是否有测试覆盖updateRectHeight函数 grep -r "updateRectHeight" --include="*.spec.tsx" --include="*.test.tsx" src/
90-94: 优化useEffect依赖项和执行时机使用
nextTick确保DOM更新后再计算高度，并且合理地设置了children和expanded作为依赖项，这样当内容或展开状态变化时都能重新计算高度。
96-99: 简化toggle函数逻辑
toggle函数逻辑变得更加简洁，直接使用currentHeight.current来获取最新的高度值，这种方式比之前的实现更直接有效。
125-137: 优化内容包装器的样式和结构通过条件样式和类名的应用，改进了内容包装器的结构和样式处理。根据
tran状态条件性地应用高度样式，使过渡动画更加流畅。src/packages/collapseitem/collapseitem.tsx (5)
5-13: 改进导入依赖和钩子函数更新了导入的React钩子函数，并引入了
useRefState钩子，这有助于在异步回调中访问最新的状态值。
70-72: 新增状态变量，优化过渡动画管理引入了三个新的状态变量：
tran：控制过渡动画的触发currentHeight：使用useRefState存储当前高度wrapperHeight：管理包装器的高度这种状态管理方式使动画过渡更加平滑可控。
74-83: 新增updateRectHeight函数，改进高度计算逻辑
updateRectHeight函数使用offsetHeight直接获取内容元素的高度，并相应地更新状态变量。这种方法适合在浏览器环境中使用，但缺少错误处理机制。建议添加错误处理逻辑：
const updateRectHeight = async () => { const height = contentRef.current?.offsetHeight + if (!height) { + console.warn('无法获取内容高度') + setCurrentHeight(0) + setWrapperHeight(0) + return + } if (height) { setCurrentHeight(height) setWrapperHeight(expanded ? height : 0) setTimeout(() => { setTran(1) }) } }代码覆盖率工具显示这段代码缺少测试覆盖。请添加适当的测试用例。
#!/bin/bash # 检查是否有测试覆盖updateRectHeight函数 grep -r "updateRectHeight" --include="*.spec.tsx" --include="*.test.tsx" src/🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 77-81: src/packages/collapseitem/collapseitem.tsx#L77-L81
Added lines #L77 - L81 were not covered by tests
85-87: 优化useEffect依赖项合理地设置了
children和expanded作为依赖项，这样当内容或展开状态变化时都能重新计算高度。
130-134: 重构内容元素的DOM结构调整了内容元素的DOM结构，将
ref属性移动到了内部的div元素上，并添加了新的CSS类名。这种结构调整有助于更精确地获取实际内容的高度。
| className={classNames({ | ||
| [`${classPrefix}-content-wrapper`]: true, | ||
| [`${classPrefix}-content-wrapper-tran`]: true, | ||
| })} | ||
| style={ | ||
| tran | ||
| ? { | ||
| height: wrapperHeight, | ||
| } | ||
| : {} | ||
| } |
There was a problem hiding this comment.
💡 Verification agent
❓ Verification inconclusive
优化内容包装器的样式和结构
通过条件样式和类名的应用，改进了内容包装器的结构和样式处理。根据tran状态条件性地应用高度样式，使过渡动画更加流畅。
代码覆盖率工具显示这段样式逻辑缺少测试覆盖。请添加测试用例验证样式的正确应用。
🏁 Script executed:
#!/bin/bash
# 查找测试中是否有验证style属性的逻辑
grep -r "style" --include="*collapseitem*.test.tsx" --include="*collapseitem*.spec.tsx" src/Length of output: 92
建议添加针对样式逻辑的单元测试
覆盖率工具提示这段逻辑目前缺乏测试用例。请在 collapseitem 的测试文件（如 collapseitem.test.tsx 或 collapseitem.spec.tsx）中添加测试用例，验证以下情况：
- 当
tran为true时，组件应正确应用内联样式{ height: wrapperHeight }； - 当
tran为false时，组件不应设置内联样式（或样式为空对象）。
这样可以确保样式和过渡效果按照预期工作。
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 123-125: src/packages/collapseitem/collapseitem.tsx#L123-L125
Added lines #L123 - L125 were not covered by tests
|
单测覆盖率 看一下 |
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
src/packages/collapseitem/collapseitem.tsx (1)
74-81:⚠️ Potential issue实现高度计算逻辑需要添加测试覆盖
updateRectHeight函数通过读取 DOM 元素的实际高度来更新状态，确保动态内容能够正确展示。但是这部分代码缺少测试覆盖，之前的审查已经指出这个问题。另外，第 78-80 行中使用了不带延迟参数的
setTimeout，这可能导致行为不一致。建议添加一个小的延迟值（如 10ms）以确保 DOM 更新完成。建议修改为：
- setTimeout(() => { - setTran(1) - }) + setTimeout(() => { + setTran(1) + }, 10)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/packages/collapseitem/collapseitem.tsx(3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test
🔇 Additional comments (8)
src/packages/collapseitem/collapseitem.tsx (8)
5-8: 导入必要的 React 钩子和自定义钩子代码正确地引入了实现折叠功能所需的钩子，包括
useEffect、useRef、useState和自定义的useRefState钩子，为组件提供了必要的状态管理和 DOM 引用能力。Also applies to: 13-13
70-72: 添加了必要的状态变量以支持动画过渡添加了三个状态变量来实现平滑的高度过渡：
tran: 控制过渡动画的触发currentHeight: 使用自定义钩子useRefState保存内容的实际高度wrapperHeight: 控制包装器的当前高度这些状态变量的设计很合理，特别是使用
useRefState确保在异步回调中能访问到最新的高度值。
83-85: 使用 useEffect 监听关键状态变化这个 useEffect 钩子很好地监听了
children和expanded的变化，确保在内容或展开状态变化时重新计算高度。这对于动态内容的正确显示是必要的。
87-90: 优化 toggle 函数
toggle函数现在使用currentHeight.current来获取最新的高度值，这是一个很好的改进。这确保了即使在异步操作中也能获取到准确的高度信息。
91-96: 简化的 handleClick 函数实现
handleClick函数现在简洁明了，先更新折叠状态，然后调用toggle函数来设置高度。这种分离关注点的做法使代码更易于维护。
101-103: 优化标题区域的类名设置使用
classNames工具来有条件地添加类名是一个很好的做法，特别是对于禁用状态的处理。
115-125: 优化内容包装器的样式和结构需要测试覆盖通过条件样式和类名的应用，改进了内容包装器的结构和样式处理。根据
tran状态条件性地应用高度样式，使过渡动画更加流畅。然而，代码覆盖率工具显示这段样式逻辑缺少测试覆盖。这个问题在之前的审查中已经指出，但尚未解决。
128-131: 改进内容区域的 DOM 结构新的嵌套结构将内容文本与容器分离，并使用
ref引用内容元素，这有助于准确计算高度。这种结构改进支持了动态高度计算和平滑过渡效果。
| const updateRectHeight = async () => { | ||
| const height = contentRef.current.offsetHeight | ||
| setCurrentHeight(height) | ||
| setWrapperHeight(expanded ? height : 0) | ||
| setTimeout(() => { | ||
| setTran(1) | ||
| }) | ||
| } | ||
|
|
||
| const getOffsetHeight = () => { | ||
| const height = contentRef.current?.offsetHeight | ||
| return height ? `${height}px` : '' | ||
| } | ||
| useEffect(() => { | ||
| updateRectHeight() | ||
| }, [children, expanded]) |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
建议添加完整的单元测试覆盖
我发现重要的高度计算逻辑（updateRectHeight 函数）和样式应用逻辑（条件样式）缺少测试覆盖。建议添加以下测试用例：
-
对于
updateRectHeight函数：- 测试当 DOM 元素存在时，高度计算是否正确
- 测试
expanded状态变化时，wrapperHeight是否正确更新 - 使用 Jest 的 fake timers 测试
setTimeout异步逻辑
-
对于样式应用逻辑：
- 测试当
tran为true时，内容包装器是否应用了正确的高度样式 - 测试当
tran为false时，是否没有应用高度样式
- 测试当
这些测试将确保组件在不同设备（包括鸿蒙系统）上的稳定性和一致性。
Also applies to: 115-125
🏁 Script executed:
#!/bin/bash
# 检查是否有测试覆盖 updateRectHeight 函数和样式逻辑
echo "查找与 updateRectHeight 和样式相关的测试："
grep -r "updateRectHeight\|style" --include="*collapse*.test.tsx" --include="*collapse*.spec.tsx" src/
echo "------------------------"
echo "检查折叠组件测试文件结构："
find src/packages -name "*collapse*.test.tsx" -o -name "*collapse*.spec.tsx" | xargs catLength of output: 7053
建议增加针对 updateRectHeight 与样式逻辑的单元测试
目前已有测试用例覆盖了折叠组件的整体行为和部分样式校验，但对以下细节仍缺乏直接验证：
-
updateRectHeight 函数
- 测试 DOM 元素存在时，能否正确获取
offsetHeight并更新currentHeight与wrapperHeight - 模拟
expanded状态切换时，验证wrapperHeight是否根据状态正确设置 - 使用 Jest 的 fake timers 检查
setTimeout异步调用是否按预期触发setTran(1)
- 测试 DOM 元素存在时，能否正确获取
-
样式应用逻辑
- 测试
tran为真时，内容包装器是否正确应用了高度样式 - 测试
tran为假时，不应应用不必要的高度样式
- 测试
建议针对上述逻辑补充相应的单元测试（包括独立测试 updateRectHeight 和样式状态变化），以确保不同设备（例如鸿蒙系统）下组件的稳定性与一致性。
2 participants
Summary by CodeRabbit
.nut-collapse-item组件的样式，重命名了一些类，并引入了条件样式。