fix: 🐛 修复 Collapse 使用 toggleAall 方法时不会触发 before-expand 钩子的问题 #727
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough此次更改主要集中在 Changes
Possibly related PRs
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 (
|
✅ Deploy Preview for wot-design-uni ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Outside diff range and nitpick comments (9)
src/uni_modules/wot-design-uni/components/wd-collapse-item/index.scss (1)
42-46: 样式实现符合需求，建议优化过渡效果！新增的分割线样式实现正确，很好地解决了标题和内容之间缺少分割线的问题。不过建议为边框添加过渡效果，使展开/收起时更加平滑。
建议应用以下更改：
@include e(header) { position: relative; display: flex; justify-content: space-between; align-items: center; padding: $-collapse-header-padding; overflow: hidden; user-select: none; + transition: border-bottom 0.3s; @include when(expanded) { @include halfPixelBorder('bottom'); } }src/pages/collapse/Index.vue (3)
63-63: 建议将内联样式移至 CSS 类中直接在模板中硬编码
padding样式可能会影响样式的统一维护。建议将样式抽取到 CSS 类中。建议修改如下：
-<wd-collapse-item custom-body-style="padding:0 0 0 14px" v-for="item in 5" :key="item" :title="`标签${item}`" :name="`${item}`"> +<wd-collapse-item custom-body-class="nested-collapse-item" v-for="item in 5" :key="item" :title="`标签${item}`" :name="`${item}`">并在 style 部分添加：
:deep(.nested-collapse-item) { padding: 0 0 0 14px; }
Line range hint
164-183: 建议优化 beforeExpend 函数实现当前实现存在以下几个问题：
- 函数名拼写错误：
beforeExpend应为beforeExpand- Promise 缺少错误处理
- 未使用 reject 参数
- 如果 Promise 被拒绝，loading toast 可能无法关闭
建议修改如下：
- function beforeExpend(name: string) { + function beforeExpand(name: string) { const index = itemList.value.findIndex((item) => { return item.name === name }) if (index > -1) { itemList.value[index].body = 'Q1:七天无理由退换货制度，所有商品在不影响二次销售的情况下7天内（以快递单签收为准）均接受客户退换货。七天无理由退换货制度，所有商品在不影响二次销售的情况下7天内（以快递单签收为准）均接受客户退换货。七天无理由退换货制度，所有商品在不影响二次销售的情况下7天内（以快递单签收为准）均接受客户退换货。七天无理由退换货制度，所有商品在不影响二次销售的情况下7天内（以快递单签收为准）均接受客户退换货。七天无理由退换货制度，所有商品在不影响二次销售的情况下7天内（以快递单签收为准）均接受客户退换货。七天无理由退换货制度，所有商品在不影响二次销售的情况下7天内（以快递单签收为准）均接受客户退换货。' } - return new Promise((reslove, reject) => { + return new Promise((resolve, reject) => { toast.loading('加载中') setTimeout(() => { - toast.close() - reslove(true) + try { + toast.close() + resolve(true) + } catch (error) { + toast.close() + reject(error) + } }, 500) }) }
需要修复 toggleAll 方法中的 beforeExpend 钩子调用
根据代码分析，当前
toggleAll方法的实现中缺少对beforeExpend钩子的处理。每个折叠项都可以设置beforeExpend钩子，但在使用toggleAll方法时，这些钩子并未被正确触发。需要修改以下内容：
- 在
wd-collapse组件的toggleAll方法中，需要在切换状态前调用对应折叠项的beforeExpend钩子- 确保
toggleAll方法在展开折叠项时，遵循与单个折叠项展开相同的钩子调用流程🔗 Analysis chain
Line range hint
8-18: 需要验证 toggleAll 方法的修复当前实现中，
before-expend钩子仅添加到了第三个折叠项。根据 PR 目标，需要验证toggleAll方法是否正确触发所有折叠项的before-expand钩子。🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # 搜索 toggleAll 方法的实现以验证 before-expand 钩子的调用 ast-grep --pattern 'toggleAll() { $$$ }'Length of output: 44
Script:
#!/bin/bash # 使用 rg 搜索 toggleAll 方法的定义和实现 rg -A 10 "toggleAll" --type vue # 搜索与 before-expand 相关的代码 rg -A 5 "before-expand|beforeExpand" --type vueLength of output: 137
Script:
#!/bin/bash # 不指定文件类型，直接搜索 toggleAll 方法 rg -A 10 "toggleAll" # 搜索与 before-expand 相关的代码 rg -A 5 "before-expand|beforeExpand" # 查找所有 Vue 文件 fd ".vue$"Length of output: 13221
Script:
#!/bin/bash # 检查 wd-collapse 组件中的 beforeExpand 相关实现 rg -A 10 "beforeExpand|before-expand" src/uni_modules/wot-design-uni/components/wd-collapse/ # 检查 wd-collapse-item 组件中的相关实现 rg -A 10 "beforeExpand|before-expand" src/uni_modules/wot-design-uni/components/wd-collapse-item/Length of output: 194
Script:
#!/bin/bash # 检查 wd-collapse 组件中的 beforeExpend 相关实现（注意拼写） rg -A 10 "beforeExpend|before-expend" src/uni_modules/wot-design-uni/components/wd-collapse/ # 检查 wd-collapse-item 组件中的相关实现 rg -A 10 "beforeExpend|before-expend" src/uni_modules/wot-design-uni/components/wd-collapse-item/ # 检查 types 文件中的定义 cat src/uni_modules/wot-design-uni/components/wd-collapse/types.tsLength of output: 3897
docs/component/collapse.md (3)
148-172: 嵌套使用文档说明清晰完整文档结构清晰，示例代码完整。建议补充以下内容以进一步提升文档质量：
- 在示例代码中添加注释说明嵌套层级的数据结构关系
- 补充说明自定义样式时的注意事项
建议添加如下注释：
const collapseRoot = ref<string[]>(['0']) +// 每个外层折叠面板对应一个内层折叠面板的选中状态数组 const collapseList = ref<Array<string[]>>([['item1'], ['item2'], ['item3'], ['item4'], ['item5']])
208-210: 建议补充 toggleAll 方法的参数说明
toggleAll方法的文档需要补充object类型参数的具体结构和用途说明。建议修改为：
-| toggleAll | 切换所有面板展开状态，传 `true` 为全部展开，`false` 为全部收起，不传参为全部切换 | _options?: boolean \| object_ | 0.2.6 | +| toggleAll | 切换所有面板展开状态，传 `true` 为全部展开，`false` 为全部收起，不传参为全部切换。当传入 object 类型参数时，可配置 {skipBeforeExpand: boolean} 来控制是否跳过 before-expand 钩子函数的执行 | _options?: boolean \| {skipBeforeExpand?: boolean}_ | 0.2.6 |
224-225: 建议补充样式类使用示例新增的样式类说明清晰，但建议补充具体使用示例，帮助开发者更好地理解如何自定义样式。
建议添加如下示例：
<wd-collapse-item custom-body-style="padding: 10px; margin: 5px" custom-body-class="custom-content"> 内容 </wd-collapse-item> <style> .custom-content { background-color: #f5f5f5; border-radius: 4px; } </style>src/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue (2)
82-91: 确保异常处理的完整性在
updateExpand方法中，捕获了异常但没有进行任何处理，这可能会隐藏潜在的问题。建议在异常捕获后至少记录错误信息，便于调试和维护。可以在
catch中添加日志：} catch (error) { - /* empty */ + console.error('updateExpand error:', error) }
117-126: 保证点击事件异步流程的正确性将
handleClick方法改为异步函数以等待updateExpand的完成是必要的。但需要注意在异常捕获后是否需要进一步处理，或者向用户反馈操作结果。建议在
catch块中添加处理逻辑，例如提示用户操作失败：} catch (error) { - /* empty */ + console.error('handleClick error:', error) + // 可以添加用户提示，例如： + // uni.showToast({ title: '操作失败', icon: 'none' }); }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (7)
docs/component/collapse.md(3 hunks)src/pages/collapse/Index.vue(1 hunks)src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss(1 hunks)src/uni_modules/wot-design-uni/components/wd-collapse-item/index.scss(1 hunks)src/uni_modules/wot-design-uni/components/wd-collapse-item/types.ts(1 hunks)src/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue(4 hunks)src/uni_modules/wot-design-uni/components/wd-collapse/wd-collapse.vue(1 hunks)
🔇 Additional comments (7)
src/uni_modules/wot-design-uni/components/wd-collapse-item/types.ts (2)
4-4: 类型签名的改进增强了钩子函数的功能
返回类型的更改允许：
- 通过返回
false来阻止展开操作 - 通过返回
Promise来支持异步操作
这个改动很好地解决了 toggleAll 方法中钩子触发的问题。
8-15: 新增的样式自定义属性改善了组件的灵活性
新增的 customBodyClass 和 customBodyStyle 属性：
- 提供了更细粒度的样式控制
- 文档注释清晰完整
- 默认值设置合理
这些属性将有助于解决内容区域的样式问题。
✅ Verification successful
新增的样式属性已正确实现并集成到组件中
代码验证显示 customBodyClass 和 customBodyStyle 属性已经在组件的内容区域（.wd-collapse-item__body）正确实现，可以有效地自定义折叠面板的内容样式。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查这些新属性在组件中的实际使用情况
# 搜索组件模板中的属性使用
rg "customBodyClass|customBodyStyle" --type vue
Length of output: 77
Script:
#!/bin/bash
# 检查这些新属性在组件中的实际使用情况，使用更通用的搜索
# 搜索所有文件中的属性使用
rg "customBodyClass|customBodyStyle" -l
# 查找组件的实现文件
fd "wd-collapse-item" --type f
Length of output: 300
Script:
#!/bin/bash
# 检查组件中这些属性的具体使用方式
rg "customBodyClass|customBodyStyle" -A 3 -B 3 src/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue
Length of output: 412
src/uni_modules/wot-design-uni/components/wd-collapse/wd-collapse.vue (1)
123-137: 🛠️ Refactor suggestion
异步实现需要考虑并发性能问题
当前实现存在以下几个需要注意的地方：
forEach循环中的异步操作会并发执行，可能导致性能问题- 错误处理过于简单，建议至少记录错误日志
names数组的更新顺序可能与视觉顺序不一致
建议按照以下方式优化实现：
- children.forEach(async (item, index: number) => {
+ for (let i = 0; i < children.length; i++) {
+ const item = children[i]
if (item.disabled && skipDisabled) {
if (item.$.exposed!.getExpanded()) {
- names.push(item.name || index)
+ names.push(item.name || i)
}
} else {
try {
await item.$.exposed!.updateExpand()
if (isDef(expanded) ? expanded : !item.$.exposed!.getExpanded()) {
- names.push(item.name || index)
+ names.push(item.name || i)
}
} catch (error) {
- /* empty */
+ console.warn(`折叠面板切换失败: ${error}`)
}
}
- })
+ }运行以下脚本验证 before-expand 钩子的触发：
✅ Verification successful
异步实现和钩子触发已得到验证
经过代码分析，我发现：
before-expand钩子在wd-collapse-item组件的handleBeforeExpand方法中正确实现，并在updateExpand方法中被调用- 当前的异步实现是合理的，因为：
updateExpand方法需要等待handleBeforeExpand的 Promise 结果- 每个面板项的展开状态更新是独立的，并发执行不会造成问题
- 错误处理是适当的，因为：
before-expand钩子的失败会被正确捕获并阻止展开- 空的 catch 块是合理的，因为这是用户取消展开的预期行为
建议保持当前实现，无需进行修改。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：验证 before-expand 钩子在 toggleAll 方法中是否被正确触发
# 搜索 updateExpand 方法的实现
ast-grep --pattern 'updateExpand() {
$$$
before-expand
$$$
}'
Length of output: 69
Script:
#!/bin/bash
# 搜索 updateExpand 方法的完整实现
ast-grep --pattern 'updateExpand() {
$$$
}'
# 搜索包含 before-expand 的文件
rg "before-expand" -A 5 -B 5
Length of output: 76
Script:
#!/bin/bash
# 搜索 wd-collapse-item 组件中的相关实现
fd "wd-collapse-item.vue" --exec cat {}
# 搜索 wd-collapse 组件中的相关实现
fd "wd-collapse.vue" --exec cat {}
Length of output: 8438
docs/component/collapse.md (2)
179-179: 属性表描述准确完整
属性说明清晰，回调函数参数说明完整。特别是对before-expend的异步支持说明，有助于开发者理解和使用该特性。
Also applies to: 181-182
214-217: 插槽说明清晰完整
插槽的描述准确，版本信息完整，有助于开发者正确使用组件功能。
src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss (1)
273-273: 优化折叠面板内容区域的内边距
将右侧内边距从固定值 25px 更改为 $-size-side-padding (15px)，使其与其他组件保持一致的间距规范。这个改动：
- 统一了设计规范
- 优化了内容区域的视觉体验
运行以下脚本以验证此更改对现有折叠面板的影响：
✅ Verification successful
Let me gather more information about the collapse components and their styling.
Let me check the SCSS files for the collapse components to see how the padding variable is being used.
内边距变更验证完成，确认安全
经过验证，$-collapse-body-padding 变量仅在折叠面板组件（wd-collapse-item）的内容区域使用，变更不会影响其他组件。具体应用位置：
src/uni_modules/wot-design-uni/components/wd-collapse-item/index.scss中的.wd-collapse-item__body类
将右侧内边距从 25px 调整为 $-size-side-padding (15px) 是安全的，这个改动：
- 使折叠面板的内容区域与设计系统的间距规范保持一致
- 不会影响其他组件的样式
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：检查使用了 collapse-body-padding 变量的文件
# 搜索使用了该变量的 SCSS/CSS 文件
rg -t scss -t css "collapse-body-padding"
# 搜索可能受影响的折叠面板组件
fd -e vue -e nvue "collapse"
Length of output: 249
Script:
#!/bin/bash
# Check the content of collapse components and their styles
cat src/uni_modules/wot-design-uni/components/wd-collapse/wd-collapse.vue
cat src/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue
# Search for any SCSS files related to collapse components
fd -e scss collapse
Length of output: 8543
Script:
#!/bin/bash
# Check the content of collapse component styles
cat src/uni_modules/wot-design-uni/components/wd-collapse/index.scss
cat src/uni_modules/wot-design-uni/components/wd-collapse-item/index.scss
Length of output: 3013
src/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue (1)
13-13: 建议增强内容区域的自定义能力
添加了对 customBodyClass 和 customBodyStyle 的绑定，允许开发者自定义折叠面板内容的样式。这是很好的改进，增强了组件的灵活性。
src/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue
Outdated
Show resolved
Hide resolved
src/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue
Outdated
Show resolved
Hide resolved
Moonofweisheng
force-pushed
the
fix/collapse-before-expand
branch
from
3214ca2
to
b52739b
Compare
Deploying wot-design-uni with
|
| Latest commit: |
f73428d
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://22222ef4.wot-design-uni.pages.dev |
| Branch Preview URL: | https://fix-collapse-before-expand.wot-design-uni.pages.dev |
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Outside diff range and nitpick comments (4)
src/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue (2)
82-91: 建议改进错误处理机制当前的错误处理使用空的 catch 块，这可能会导致潜在问题被静默忽略。建议添加错误日志或错误处理逻辑。
async function updateExpand(useBeforeExpand: boolean = true) { try { if (useBeforeExpand) { await handleBeforeExpand() } initRect() } catch (error) { - /* empty */ + console.warn('折叠面板展开更新失败:', error) } }
117-126: 建议完善点击处理的错误处理机制同样建议改进错误处理，以便于调试和问题排查。
async function handleClick() { if (props.disabled) return try { await updateExpand() const { name } = props collapse && collapse.toggle(name, !expanded.value) } catch (error) { - /* empty */ + console.warn('折叠面板点击处理失败:', error) } }docs/component/collapse.md (2)
179-179: 属性描述需要更新并补充示例
title和before-expend属性的描述已更新，但建议：
- 为
before-expend添加返回值类型说明- 补充
titleslot的使用示例建议在属性表格中补充以下信息：
- | before-expend | 打开前的回调函数，返回 false 可以阻止打开，支持返回 Promise | Function | - | - | - | + | before-expend | 打开前的回调函数，返回 false 可以阻止打开，支持返回 Promise<boolean> | (name: string) => boolean \| Promise<boolean> | - | - | - |Also applies to: 181-182
214-217: 插槽文档格式需要统一插槽描述的格式和其他部分不一致，建议统一文档风格。
建议修改为：
| name | 说明 | 最低版本 | | ----- | ---------------------------------------------------- | -------- | - | title | 标题，便于开发者自定义标题（非 viewmore 使用） | 1.2.27 | - | more | 查看更多，便于开发者自定义查看更多类型的展开收起样式 | - | + | title | 自定义标题内容（非 viewmore 模式下使用） | 1.2.27 | + | more | 自定义查看更多样式 | - |
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (7)
docs/component/collapse.md(3 hunks)src/pages/collapse/Index.vue(1 hunks)src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss(1 hunks)src/uni_modules/wot-design-uni/components/wd-collapse-item/index.scss(1 hunks)src/uni_modules/wot-design-uni/components/wd-collapse-item/types.ts(1 hunks)src/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue(4 hunks)src/uni_modules/wot-design-uni/components/wd-collapse/wd-collapse.vue(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (4)
- src/pages/collapse/Index.vue
- src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss
- src/uni_modules/wot-design-uni/components/wd-collapse-item/index.scss
- src/uni_modules/wot-design-uni/components/wd-collapse-item/types.ts
🔇 Additional comments (4)
src/uni_modules/wot-design-uni/components/wd-collapse/wd-collapse.vue (1)
123-135: 🛠️ Refactor suggestion
建议优化异步处理和错误处理的实现
代码实现存在以下几个需要注意的地方：
- 使用
forEach处理异步操作可能会导致执行顺序不确定，建议使用for...of循环来确保顺序执行。 - 空的 catch 块可能会隐藏重要的错误信息，建议至少添加日志记录。
- 建议添加更多的错误上下文信息，以便于调试。
建议按照以下方式重构代码：
- children.forEach(async (item, index: number) => {
- if (item.disabled && skipDisabled) {
- if (item.$.exposed!.getExpanded()) {
- names.push(item.name || index)
- }
- } else {
- try {
- await item.$.exposed!.updateExpand()
- if (isDef(expanded) ? expanded : !item.$.exposed!.getExpanded()) {
- names.push(item.name || index)
- }
- } catch (error) {
- /* empty */
- }
- }
- })
+ for (let i = 0; i < children.length; i++) {
+ const item = children[i];
+ if (item.disabled && skipDisabled) {
+ if (item.$.exposed!.getExpanded()) {
+ names.push(item.name || i)
+ }
+ continue
+ }
+ try {
+ await item.$.exposed!.updateExpand()
+ if (isDef(expanded) ? expanded : !item.$.exposed!.getExpanded()) {
+ names.push(item.name || i)
+ }
+ } catch (error) {
+ console.warn(`折叠面板切换失败: ${error.message}`, {
+ panelIndex: i,
+ panelName: item.name
+ })
+ }
+ }运行以下脚本验证 before-expand 钩子的实现：
src/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue (2)
3-13: 模板更改看起来不错！
模板的更改恰当地处理了展开状态的样式绑定，并通过 customBodyClass 和 customBodyStyle 提供了更灵活的样式定制能力。
Line range hint 32-75: 很好地解决了变量遮蔽问题！
通过将内部变量重命名为 modelValue，成功解决了之前代码评审中提到的变量遮蔽问题。同时导入声明也更加完整和清晰。
docs/component/collapse.md (1)
224-225: 新增样式类属性的版本号需要确认
文档中使用了占位符$LOWEST_VERSION$，需要替换为具体的版本号。
docs/component/collapse.md
Outdated
Comment on lines
208
to
210
| | 方法名 | 说明 | 参数 | 最低版本 | | ||
| | --------- | -------------------------------------------------------------------------------- | ----------------------------- | -------- | | ||
| | toggleAll | 切换所有面板展开状态，传 `true` 为全部展开，`false` 为全部收起，不传参为全部切换 | _options?: boolean \| object_ | 0.2.6 | |
There was a problem hiding this comment.
🛠️ Refactor suggestion
toggleAll 方法文档需要补充参数说明
toggleAll方法的参数描述不够清晰，需要详细说明object类型参数的结构。
建议修改为：
- | toggleAll | 切换所有面板展开状态，传 `true` 为全部展开，`false` 为全部收起，不传参为全部切换 | _options?: boolean \| object_ | 0.2.6 |
+ | toggleAll | 切换所有面板展开状态，传 `true` 为全部展开，`false` 为全部收起，不传参为全部切换 | _options?: boolean \| { skipBeforeExpand?: boolean }_ | 0.2.6 |同时建议添加参数说明：
### toggleAll 方法参数说明
| 参数名 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| skipBeforeExpand | 是否跳过 before-expand 钩子函数 | boolean | false |
Moonofweisheng
force-pushed
the
fix/collapse-before-expand
branch
from
b52739b
to
58dfacf
Compare
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Outside diff range and nitpick comments (5)
src/uni_modules/wot-design-uni/components/wd-collapse/wd-collapse.vue (2)
130-133: 优化状态更新逻辑当前实现中，状态更新和数组操作的逻辑耦合度较高。建议将状态更新和数组操作分离，以提高代码的可维护性。
建议重构为:
- await item.$.exposed!.updateExpand() - if (isDef(expanded) ? expanded : !item.$.exposed!.getExpanded()) { - names.push(item.name || index) - } + const shouldExpand = isDef(expanded) ? expanded : !item.$.exposed!.getExpanded() + await item.$.exposed!.updateExpand() + if (shouldExpand) { + names.push(item.name || index) + }
123-135: 建议添加状态变更事件为了更好地追踪每个折叠面板的状态变化，建议在状态更新时触发相应的事件。
建议添加以下功能：
- 为每个面板项添加状态变更事件
- 在
toggleAll完成后触发一个总体状态变更事件- 提供取消展开/收起操作的能力
示例实现：
interface ToggleEvent { name: string expanded: boolean index: number } // 在 emit 中添加新的事件类型 const emit = defineEmits(['change', 'update:modelValue', 'toggle', 'toggle-all']) // 在状态变更时触发事件 emit('toggle', { name: item.name || index, expanded: shouldExpand, index }) // 在所有操作完成后触发总体事件 emit('toggle-all', { names, expanded: Boolean(expanded) })src/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue (1)
72-78: 建议改进空值检查逻辑当前实现可以通过以下方式改进空值检查：
const isSelected = computed(() => { - const modelValue = collapse ? collapse?.props.modelValue || [] : [] + const modelValue = collapse?.props?.modelValue ?? [] const { name } = props return (isString(modelValue) && modelValue === name) || (isArray(modelValue) && modelValue.indexOf(name as string) >= 0) })docs/component/collapse.md (2)
57-57: 建议改进类型安全性建议为
beforeExpend函数添加明确的类型定义，以提高代码的可维护性。- <wd-collapse-item v-for="(item, index) in itemList" :before-expend="beforeExpend" :key="index" :title="item.title" :name="item.name"> + <wd-collapse-item v-for="(item, index) in itemList" :before-expend="(name: string) => Promise<boolean>" :key="index" :title="item.title" :name="item.name">
179-182: 建议补充属性说明为了更好地指导开发者使用，建议：
- 在
title属性说明中补充 slot 的具体用法示例- 在
before-expend属性说明中补充返回值类型说明建议修改为：
- | title | 折叠栏的标题, 支持同名 slot 自定义内容 | string | - | '' | - | + | title | 折叠栏的标题, 支持同名 slot 自定义内容。slot 参数包含 expanded(是否展开)、disabled(是否禁用)、isFirst(是否第一项) | string | - | '' | - | - | before-expend | 打开前的回调函数，返回 false 可以阻止打开，支持返回 Promise | Function | - | - | - | + | before-expend | 打开前的回调函数，返回 false 可以阻止打开，支持返回 Promise<boolean> | Function | - | - | - |
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (7)
docs/component/collapse.md(3 hunks)src/pages/collapse/Index.vue(1 hunks)src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss(1 hunks)src/uni_modules/wot-design-uni/components/wd-collapse-item/index.scss(1 hunks)src/uni_modules/wot-design-uni/components/wd-collapse-item/types.ts(1 hunks)src/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue(4 hunks)src/uni_modules/wot-design-uni/components/wd-collapse/wd-collapse.vue(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (4)
- src/pages/collapse/Index.vue
- src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss
- src/uni_modules/wot-design-uni/components/wd-collapse-item/index.scss
- src/uni_modules/wot-design-uni/components/wd-collapse-item/types.ts
🔇 Additional comments (4)
src/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue (3)
3-13: 模板更改增强了组件的灵活性！
通过动态类绑定和自定义样式属性的添加，使组件更加灵活且具有更好的视觉反馈。
131-157:
需要修正拼写错误并改进类型安全性
beforeExpend属性名拼写错误，应该是beforeExpand- 建议使用更严格的类型定义
- if (nextexpanded && props.beforeExpend) {
- const response = props.beforeExpend(name)
+ if (nextexpanded && props.beforeExpand) {
+ const response = props.beforeExpand(name)
if (!response) {
reject()
}
- if (isPromise(response)) {
+ if (response instanceof Promise) {
response
.then(() => {
resolve()
})32-33: 请验证导入的工具函数使用情况
建议检查所有导入的工具函数是否都被使用，特别是新添加的 isString 函数。
✅ Verification successful
所有导入的工具函数均已被正确使用
通过代码分析，所有导入的工具函数都有明确的使用场景：
isString: 用于检查 modelValue 是否为字符串类型isDef: 用于检查 rectHeight 是否已定义isPromise: 用于检查 response 是否为 Promiseuuid: 用于生成唯一的 collapseId
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查工具函数的使用情况
rg "isString|isDef|isPromise|uuid" src/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue
Length of output: 517
docs/component/collapse.md (1)
214-217: 插槽文档更新清晰完整
插槽的描述准确且易于理解。
src/uni_modules/wot-design-uni/components/wd-collapse/wd-collapse.vue
Outdated
Show resolved
Hide resolved
src/uni_modules/wot-design-uni/components/wd-collapse/wd-collapse.vue
Outdated
Show resolved
Hide resolved
Moonofweisheng
force-pushed
the
fix/collapse-before-expand
branch
from
58dfacf
to
b5e7e65
Compare
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Outside diff range and nitpick comments (4)
src/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue (2)
32-33: 建议优化导入声明请检查是否所有导入的工具函数都被使用到了。例如：
isPromise只在handleBeforeExpand中使用isString和isArray只在isSelected计算属性中使用建议考虑按需导入以减小打包体积。
72-78: 建议优化计算属性的实现当前实现可以更简洁，建议如下重构：
const isSelected = computed(() => { - const modelValue = collapse ? collapse?.props.modelValue || [] : [] + const modelValue = collapse?.props.modelValue ?? [] const { name } = props - return (isString(modelValue) && modelValue === name) || (isArray(modelValue) && modelValue.indexOf(name as string) >= 0) + return isString(modelValue) ? modelValue === name : isArray(modelValue) && modelValue.includes(name) })docs/component/collapse.md (2)
148-169: 嵌套使用部分的文档需要补充使用说明嵌套使用部分的文档虽然提供了基本示例，但缺少一些重要的使用说明。
建议在示例代码后添加以下使用说明：
const collapseList = ref<Array<string[]>>([['item1'], ['item2'], ['item3'], ['item4'], ['item5']]) + +### 使用注意事项 +1. 嵌套使用时，内部和外部的`collapse`需要使用不同的`v-model`绑定值 +2. 建议使用`custom-body-style`设置内容区域的padding，避免样式重叠 +3. 嵌套层级不宜过深，建议最多不超过3层
57-57: 建议补充异步更新示例的错误处理异步更新示例中的
beforeExpend方法缺少错误处理逻辑。建议在示例代码中添加错误处理：
function beforeExpend(name) { return new Promise((resolve, reject) => { toast.loading('加载中') setTimeout(() => { toast.close() - resolve(true) + try { + // 模拟接口调用 + resolve(true) + } catch (error) { + toast.error('加载失败') + reject(error) + } }, 500) }) }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (8)
docs/component/collapse.md(3 hunks)src/pages/collapse/Index.vue(1 hunks)src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss(1 hunks)src/uni_modules/wot-design-uni/components/wd-collapse-item/index.scss(1 hunks)src/uni_modules/wot-design-uni/components/wd-collapse-item/types.ts(1 hunks)src/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue(4 hunks)src/uni_modules/wot-design-uni/components/wd-collapse/types.ts(1 hunks)src/uni_modules/wot-design-uni/components/wd-collapse/wd-collapse.vue(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (4)
- src/pages/collapse/Index.vue
- src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss
- src/uni_modules/wot-design-uni/components/wd-collapse-item/index.scss
- src/uni_modules/wot-design-uni/components/wd-collapse-item/types.ts
🔇 Additional comments (3)
src/uni_modules/wot-design-uni/components/wd-collapse/wd-collapse.vue (2)
48-48: 导入更改看起来不错！
新增的 isBoolean 工具函数导入对于 toggleAll 方法中的类型检查是必要的。
134-140:
需要改进错误处理机制
当前实现静默忽略所有错误，这可能会掩盖重要问题。建议添加适当的错误处理逻辑。
try {
await item.$.exposed!.updateExpand()
if (isDef(expanded) ? expanded : !item.$.exposed!.getExpanded()) {
names.push(item.name || index)
}
} catch (error) {
- /* empty */
+ console.warn(`折叠面板切换失败: ${error}`)
+ // 可以选择是否继续将该项添加到 names 数组中
+ if (item.$.exposed!.getExpanded()) {
+ names.push(item.name || index)
+ }
}src/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue (1)
3-15: 模板变更看起来不错！
模板的修改增强了组件的可定制性，同时通过正确的类绑定提供了更好的视觉反馈。
src/uni_modules/wot-design-uni/components/wd-collapse/wd-collapse.vue
Outdated
Show resolved
Hide resolved
Comment on lines
117
to
143
| const toggleAll = async (options: boolean | CollapseToggleAllOptions = {}) => { | ||
| if (props.accordion) { | ||
| return | ||
| } | ||
| if (typeof options === 'boolean') { | ||
| if (isBoolean(options)) { | ||
| options = { expanded: options } | ||
| } | ||
|
|
||
| const { expanded, skipDisabled } = options | ||
| const names: string[] = [] | ||
|
|
||
| children.forEach((item, index: number) => { | ||
| for (const [index, item] of children.entries()) { | ||
| if (item.disabled && skipDisabled) { | ||
| if (item.$.exposed!.getExpanded()) { | ||
| names.push(item.name || index) | ||
| } | ||
| } else { | ||
| item.$.exposed!.updateExpand() | ||
| if (isDef(expanded) ? expanded : !item.$.exposed!.getExpanded()) { | ||
| names.push(item.name || index) | ||
| try { | ||
| await item.$.exposed!.updateExpand() | ||
| if (isDef(expanded) ? expanded : !item.$.exposed!.getExpanded()) { | ||
| names.push(item.name || index) | ||
| } | ||
| } catch (error) { | ||
| /* empty */ | ||
| } | ||
| } | ||
| }) | ||
| } |
There was a problem hiding this comment.
💡 Codebase verification
toggleAll 方法中缺少 before-expand 钩子的触发
根据代码分析，toggleAll 方法在调用 updateExpand 时没有正确处理 before-expand 钩子：
wd-collapse-item组件中已实现了beforeExpend钩子的处理逻辑- 但在
toggleAll方法中调用updateExpand时传入了默认参数await item.$.exposed!.updateExpand()，这会跳过beforeExpend钩子的验证 - 应该修改为
await item.$.exposed!.updateExpand(true)以确保触发钩子
建议修改点：
- 在
toggleAll方法中调用updateExpand时显式传入true参数，以确保触发beforeExpend钩子
🔗 Analysis chain
验证 before-expand 钩子的触发
需要确保 toggleAll 方法现在正确触发了 before-expand 钩子。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：验证 before-expand 钩子的实现和调用
# 搜索 before-expand 钩子的定义和使用
echo "检查 before-expand 钩子的实现："
ast-grep --pattern 'before-expand'
# 搜索相关的测试用例
echo "检查相关测试用例："
rg -l "before-expand.*test"
Length of output: 250
Script:
#!/bin/bash
# 使用更精确的模式搜索 before-expand 相关代码
echo "检查 before-expand 在组件中的使用："
rg -A 5 "before-expand"
# 检查 Collapse 组件中的事件定义
echo "检查 Collapse 组件中的事件定义："
ast-grep --pattern 'defineEmits<{
$$$
}>'
# 检查 updateExpand 方法的实现
echo "检查 updateExpand 方法的实现："
ast-grep --pattern 'updateExpand'
# 检查组件的 props 定义
echo "检查组件的 props 定义："
rg "before-expand|beforeExpand" -A 3
Length of output: 352
Script:
#!/bin/bash
# 检查 wd-collapse-item 组件中的相关实现
echo "检查 wd-collapse-item 组件的实现："
cat src/uni_modules/wot-design-uni/components/wd-collapse/wd-collapse-item.vue
# 检查 wd-collapse 组件中的相关实现
echo "检查 wd-collapse 组件的实现："
cat src/uni_modules/wot-design-uni/components/wd-collapse/wd-collapse.vue
# 检查组件的类型定义
echo "检查类型定义："
fd -e ts -e d.ts . src/uni_modules/wot-design-uni/components/wd-collapse --exec cat {}
Length of output: 6221
Script:
#!/bin/bash
# 检查 wd-collapse-item 组件的实现（使用不同路径）
echo "检查 wd-collapse-item 组件的实现："
fd -t f "wd-collapse-item.vue" . --exec cat {}
# 检查组件中是否有 before-expand 相关的事件定义
echo "检查事件定义："
rg -i "before.*expand" --type vue
Length of output: 4504
Comment on lines
+204
to
+230
| | 方法名 | 说明 | 参数 | 最低版本 | | ||
| | --------- | -------------------------------------------------------------------------------- | ------------------------------------ | -------- | | ||
| | toggleAll | 切换所有面板展开状态，传 `true` 为全部展开，`false` 为全部收起，不传参为全部切换 | `options?: CollapseToggleAllOptions` | 0.2.6 | | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
toggleAll 方法的参数说明需要完善
toggleAll 方法的参数描述不够详细，需要补充参数类型说明。
建议添加参数说明：
| toggleAll | 切换所有面板展开状态，传 `true` 为全部展开，`false` 为全部收起，不传参为全部切换 | `options?: CollapseToggleAllOptions` | 0.2.6 |
+
+### CollapseToggleAllOptions 参数说明
+| 参数名 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| expanded | 是否展开，true 为展开，false 为收起 | boolean | - |
+| skipDisabled | 是否跳过禁用项 | boolean | false |📝 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.
Suggested change
| | 方法名 | 说明 | 参数 | 最低版本 | | |
| | --------- | -------------------------------------------------------------------------------- | ------------------------------------ | -------- | | |
| | toggleAll | 切换所有面板展开状态，传 `true` 为全部展开，`false` 为全部收起，不传参为全部切换 | `options?: CollapseToggleAllOptions` | 0.2.6 | | |
| | 方法名 | 说明 | 参数 | 最低版本 | | |
| | --------- | -------------------------------------------------------------------------------- | ------------------------------------ | -------- | | |
| | toggleAll | 切换所有面板展开状态，传 `true` 为全部展开，`false` 为全部收起，不传参为全部切换 | `options?: CollapseToggleAllOptions` | 0.2.6 | | |
| ### CollapseToggleAllOptions 参数说明 | |
| | 参数名 | 说明 | 类型 | 默认值 | | |
| | --- | --- | --- | --- | | |
| | expanded | 是否展开，true 为展开，false 为收起 | boolean | - | | |
| | skipDisabled | 是否跳过禁用项 | boolean | false | |
Moonofweisheng
force-pushed
the
fix/collapse-before-expand
branch
from
b5e7e65
to
9e1e695
Compare
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Outside diff range and nitpick comments (7)
src/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue (1)
32-33: 建议优化导入声明建议按照以下方式组织导入语句，提高代码可读性：
- Vue 核心功能
- 工具函数
- 组件依赖
-import { computed, getCurrentInstance, onMounted, ref, type CSSProperties } from 'vue' -import { addUnit, getRect, isArray, isDef, isPromise, isString, objToStyle, requestAnimationFrame, uuid } from '../common/util' +// Vue core +import { computed, getCurrentInstance, onMounted, ref, type CSSProperties } from 'vue' + +// Utilities +import { + addUnit, + getRect, + isArray, + isDef, + isPromise, + isString, + objToStyle, + requestAnimationFrame, + uuid +} from '../common/util'src/pages/collapse/Index.vue (2)
5-12: 代码实现完整，建议补充文档说明toggleAll 方法的演示完整地覆盖了各种使用场景，包括：
- 全部切换
- 指定展开/收起状态
- 跳过禁用项的处理
建议在组件文档中详细说明 toggleAll 方法的各个参数选项，特别是 skipDisabled 参数的使用场景。
70-70: 样式优化合理，建议考虑响应式适配通过 custom-body-style 设置左侧内边距，优化了嵌套面板的视觉层次。
建议考虑使用 CSS 变量来管理内边距，方便在不同场景下调整：
-<wd-collapse-item custom-body-style="padding:0 0 0 14px" v-for="item in 5" :key="item" :title="`标签${item}`" :name="`${item}`"> +<wd-collapse-item :custom-body-style="`padding:0 0 0 var(--wd-collapse-nested-padding, 14px)`" v-for="item in 5" :key="item" :title="`标签${item}`" :name="`${item}`">docs/component/collapse.md (4)
57-57: 建议补充异步处理的说明文档示例代码展示了
before-expend的基本用法，但建议在文档中补充说明异步处理的最佳实践和注意事项，例如：
- 异步操作超时处理
- 错误处理机制
- 加载状态的展示建议
176-176: 建议补充 Promise 返回值的详细说明
before-expend属性的文档说明可以更详细：
- Promise 的返回值类型说明
- 异步操作失败时的处理方式
- 具体的使用示例
Also applies to: 178-178
204-238: 建议补充 CollapseToggleAllOptions 类型定义
toggleAll方法的文档很详细，但建议添加以下内容：
CollapseToggleAllOptions接口的完整类型定义- 各个选项的默认值说明
- 选项组合的使用建议
242-245: 建议补充插槽使用示例建议为
title和more插槽添加：
- 完整的使用示例代码
- 常见的自定义场景
- 插槽作用域的参数说明
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (8)
docs/component/collapse.md(3 hunks)src/pages/collapse/Index.vue(4 hunks)src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss(1 hunks)src/uni_modules/wot-design-uni/components/wd-collapse-item/index.scss(1 hunks)src/uni_modules/wot-design-uni/components/wd-collapse-item/types.ts(1 hunks)src/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue(4 hunks)src/uni_modules/wot-design-uni/components/wd-collapse/types.ts(1 hunks)src/uni_modules/wot-design-uni/components/wd-collapse/wd-collapse.vue(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (4)
- src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss
- src/uni_modules/wot-design-uni/components/wd-collapse-item/index.scss
- src/uni_modules/wot-design-uni/components/wd-collapse-item/types.ts
- src/uni_modules/wot-design-uni/components/wd-collapse/types.ts
🔇 Additional comments (6)
src/uni_modules/wot-design-uni/components/wd-collapse/wd-collapse.vue (1)
48-48: 导入变更看起来没有问题！
新增的 isBoolean 工具函数导入支持了 toggleAll 方法中的类型检查优化。
src/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue (3)
3-13: 模板更改增强了组件的灵活性和视觉反馈！
通过动态类绑定和自定义样式支持，使组件更加灵活且用户体验更好。
72-78: 计算属性重构改进了代码质量！
- 重命名为
isSelected更符合布尔值的命名规范 - 修复了变量遮蔽问题
- 使用可选链和空值合并提高了代码健壮性
85-94:
建议改进错误处理机制
当前代码在 catch 块中静默处理错误，这可能会掩盖重要问题。建议添加适当的错误处理：
async function updateExpand(useBeforeExpand: boolean = true) {
try {
if (useBeforeExpand) {
await handleBeforeExpand()
}
initRect()
} catch (error) {
- /* empty */
+ console.warn('展开状态更新失败:', error)
+ // 向上传递错误事件
+ collapse?.emit('error', {
+ type: 'expand_error',
+ error
+ })
}
}Likely invalid or redundant comment.
src/pages/collapse/Index.vue (2)
199-202: 按钮样式设置合理
通过 custom-button 类设置的间距改善了演示效果的布局，提高了可读性。
17-17: 禁用状态集成正确，建议验证联动行为
disabled 属性的实现与 toggleAll 方法的 skipDisabled 选项正确集成。
建议执行以下测试脚本验证禁用项的行为：
Also applies to: 115-116
✅ Verification successful
禁用状态与 toggleAll 功能正确集成
根据代码分析，disabled 属性与 toggleAll 方法的 skipDisabled 选项已正确集成：
- 在 Collapse 组件中，toggleAll 方法支持 skipDisabled 选项，可以跳过禁用项
- disabled 属性在 CollapseItem 组件中被正确实现和传递
- 组件提供了完整的禁用状态样式和交互处理
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查 disabled 属性在其他相关组件中的实现
ast-grep --pattern 'disabled: {
type: Boolean,
$$$
}'
Length of output: 59
Script:
#!/bin/bash
# 搜索 disabled 属性的定义和使用
rg -A 3 "disabled.*:" --type vue
# 搜索 toggleAll 方法中与 disabled 相关的逻辑
ast-grep --pattern 'toggleAll($$$) {
$$$
}'
# 搜索 disabled 相关的数据定义
rg "disabled.*=" --type vue
Length of output: 168
Script:
#!/bin/bash
# 搜索 disabled 属性的定义和使用，不限制文件类型
rg -A 3 "disabled.*:"
# 搜索 toggleAll 方法中与 disabled 相关的逻辑
rg -A 5 "toggleAll"
# 搜索 disabled 相关的数据定义
rg "disabled.*="
Length of output: 78491
| function toggle(name: string, expanded: boolean) { | ||
| const { accordion, modelValue } = props | ||
| if (accordion) { | ||
| updateChange(name === modelValue ? '' : name) | ||
| updateChildren() |
There was a problem hiding this comment.
需要处理异步更新
updateChildren 是一个异步操作，但在这里没有使用 await 关键字，这可能导致状态更新的时序问题。
建议修改为：
- updateChildren()
+ await updateChildren()Committable suggestion skipped: line range outside the PR's diff.
Comment on lines
97
to
106
| // 更新全部自组件展开状态 | ||
| const updateChildren = () => { | ||
| children.forEach((item) => { | ||
| item.$.exposed!.updateExpand() | ||
| }) | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议优化子组件更新逻辑
当前实现存在以下问题：
- 使用
forEach处理异步操作可能导致并发问题 - 缺少错误处理机制
建议修改为：
-const updateChildren = () => {
- children.forEach((item) => {
- item.$.exposed!.updateExpand()
- })
-}
+const updateChildren = async () => {
+ for (const item of children) {
+ try {
+ await item.$.exposed!.updateExpand()
+ } catch (error) {
+ console.warn(`更新折叠面板状态失败: ${error}`)
+ }
+ }
+}📝 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.
Suggested change
| // 更新全部自组件展开状态 | |
| const updateChildren = () => { | |
| children.forEach((item) => { | |
| item.$.exposed!.updateExpand() | |
| }) | |
| } | |
| // 更新全部自组件展开状态 | |
| const updateChildren = async () => { | |
| for (const item of children) { | |
| try { | |
| await item.$.exposed!.updateExpand() | |
| } catch (error) { | |
| console.warn(`更新折叠面板状态失败: ${error}`) | |
| } | |
| } | |
| } |
Comment on lines
120
to
140
| const toggleAll = async (options: CollapseToggleAllOptions = {}) => { | ||
| if (props.accordion) { | ||
| return | ||
| } | ||
| if (typeof options === 'boolean') { | ||
| if (isBoolean(options)) { | ||
| options = { expanded: options } | ||
| } | ||
|
|
||
| const { expanded, skipDisabled } = options | ||
| const names: string[] = [] | ||
|
|
||
| children.forEach((item, index: number) => { | ||
| children.forEach((item, index) => { | ||
| if (item.disabled && skipDisabled) { | ||
| if (item.$.exposed!.getExpanded()) { | ||
| names.push(item.name || index) | ||
| } | ||
| } else { | ||
| item.$.exposed!.updateExpand() | ||
| if (isDef(expanded) ? expanded : !item.$.exposed!.getExpanded()) { | ||
| names.push(item.name || index) | ||
| } | ||
| } else if (isDef(expanded) ? expanded : !item.$.exposed!.getExpanded()) { | ||
| names.push(item.name || index) | ||
| } | ||
| }) | ||
| updateChange(names) | ||
| updateChildren() |
There was a problem hiding this comment.
需要完善异步处理和类型安全
当前实现有以下几点需要改进：
toggleAll虽然声明为async，但内部的异步操作没有正确处理- 子组件遍历使用
forEach可能导致并发问题 updateChildren调用需要等待完成
建议修改为：
const toggleAll = async (options: CollapseToggleAllOptions = {}) => {
if (props.accordion) {
return
}
if (isBoolean(options)) {
options = { expanded: options }
}
const { expanded, skipDisabled } = options
const names: string[] = []
- children.forEach((item, index) => {
+ for (const [index, item] of children.entries()) {
if (item.disabled && skipDisabled) {
- if (item.$.exposed!.getExpanded()) {
+ try {
+ const isExpanded = await item.$.exposed!.getExpanded()
+ if (isExpanded) {
+ names.push(item.name || index)
+ }
+ } catch (error) {
+ console.warn(`获取折叠面板状态失败: ${error}`)
+ }
- } else if (isDef(expanded) ? expanded : !item.$.exposed!.getExpanded()) {
- names.push(item.name || index)
+ } else {
+ try {
+ const isExpanded = await item.$.exposed!.getExpanded()
+ if (isDef(expanded) ? expanded : !isExpanded) {
+ names.push(item.name || index)
+ }
+ } catch (error) {
+ console.warn(`获取折叠面板状态失败: ${error}`)
+ }
}
- })
+ }
updateChange(names)
- updateChildren()
+ await updateChildren()
}📝 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.
Suggested change
| const toggleAll = async (options: CollapseToggleAllOptions = {}) => { | |
| if (props.accordion) { | |
| return | |
| } | |
| if (typeof options === 'boolean') { | |
| if (isBoolean(options)) { | |
| options = { expanded: options } | |
| } | |
| const { expanded, skipDisabled } = options | |
| const names: string[] = [] | |
| children.forEach((item, index: number) => { | |
| children.forEach((item, index) => { | |
| if (item.disabled && skipDisabled) { | |
| if (item.$.exposed!.getExpanded()) { | |
| names.push(item.name || index) | |
| } | |
| } else { | |
| item.$.exposed!.updateExpand() | |
| if (isDef(expanded) ? expanded : !item.$.exposed!.getExpanded()) { | |
| names.push(item.name || index) | |
| } | |
| } else if (isDef(expanded) ? expanded : !item.$.exposed!.getExpanded()) { | |
| names.push(item.name || index) | |
| } | |
| }) | |
| updateChange(names) | |
| updateChildren() | |
| const toggleAll = async (options: CollapseToggleAllOptions = {}) => { | |
| if (props.accordion) { | |
| return | |
| } | |
| if (isBoolean(options)) { | |
| options = { expanded: options } | |
| } | |
| const { expanded, skipDisabled } = options | |
| const names: string[] = [] | |
| for (const [index, item] of children.entries()) { | |
| if (item.disabled && skipDisabled) { | |
| try { | |
| const isExpanded = await item.$.exposed!.getExpanded() | |
| if (isExpanded) { | |
| names.push(item.name || index) | |
| } | |
| } catch (error) { | |
| console.warn(`获取折叠面板状态失败: ${error}`) | |
| } | |
| } else { | |
| try { | |
| const isExpanded = await item.$.exposed!.getExpanded() | |
| if (isDef(expanded) ? expanded : !isExpanded) { | |
| names.push(item.name || index) | |
| } | |
| } catch (error) { | |
| console.warn(`获取折叠面板状态失败: ${error}`) | |
| } | |
| } | |
| } | |
| updateChange(names) | |
| await updateChildren() | |
| } |
Comment on lines
131
to
151
| /** | ||
| * 展开前钩子 | ||
| */ | ||
| function handleBeforeExpand() { | ||
| return new Promise<void>((resolve, reject) => { | ||
| const { name } = props | ||
| const nextexpanded = !expanded.value | ||
| if (nextexpanded && props.beforeExpend) { | ||
| const response = props.beforeExpend(name) | ||
| if (!response) { | ||
| return | ||
| reject() | ||
| } | ||
| if (isPromise(response)) { | ||
| response.then(() => { | ||
| handleChangeExpand(name) | ||
| }) | ||
| response | ||
| .then(() => { | ||
| resolve() | ||
| }) | ||
| .catch(() => { | ||
| reject() | ||
| }) | ||
| } else { | ||
| handleChangeExpand(name) | ||
| resolve() | ||
| } | ||
| } else { | ||
| handleChangeExpand(name) | ||
| resolve() | ||
| } | ||
| } else { | ||
| handleChangeExpand(name) | ||
| } | ||
| }) |
There was a problem hiding this comment.
建议优化展开前钩子的实现
- 属性名拼写错误：
beforeExpend应该是beforeExpand - Promise 处理可以更简洁
- 建议添加类型安全
- if (nextexpanded && props.beforeExpend) {
- const response = props.beforeExpend(name)
+ if (nextexpanded && props.beforeExpand) {
+ const response = props.beforeExpand(name)
if (!response) {
reject()
return
}
- if (isPromise(response)) {
- response
- .then(() => {
- resolve()
- })
- .catch(() => {
- reject()
- })
+ if (response instanceof Promise) {
+ response.then(resolve).catch(reject)
} else {
resolve()
}同时，建议在组件的类型定义中更新这个属性名：
export interface CollapseItemProps {
// 展开前的钩子函数，返回 false 或 Promise.reject 时阻止展开
- beforeExpend?: (name: string) => boolean | Promise<unknown>
+ beforeExpand?: (name: string) => boolean | Promise<void>
}
src/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue
Show resolved
Hide resolved
Moonofweisheng
force-pushed
the
fix/collapse-before-expand
branch
from
9e1e695
to
897a527
Compare
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Outside diff range and nitpick comments (5)
src/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue (2)
3-6: 模板更改看起来不错，但建议优化类名绑定模板的更改增强了组件的视觉反馈和自定义性。不过，类名的绑定可以更简洁。
建议如下优化：
- :class="`wd-collapse-item__header ${expanded ? 'is-expanded' : ''} ${isFirst ? 'wd-collapse-item__header-first' : ''}`" + :class="[ + 'wd-collapse-item__header', + { + 'is-expanded': expanded, + 'wd-collapse-item__header-first': isFirst + } + ]"Also applies to: 13-13
72-78: 计算属性的重命名和空值处理很好，但可以更简洁重命名为
isSelected更符合布尔值的命名规范，使用可选链操作符提高了代码安全性。建议进一步简化：
const isSelected = computed(() => { - const modelValue = collapse ? collapse?.props.modelValue || [] : [] + const modelValue = collapse?.props.modelValue ?? [] const { name } = props return (isString(modelValue) && modelValue === name) || (isArray(modelValue) && modelValue.indexOf(name as string) >= 0) })docs/component/collapse.md (3)
57-57: 建议在 beforeExpend 示例中添加错误处理建议在 Promise 中添加错误处理逻辑，以便在异步操作失败时能够正确处理：
function beforeExpend(name) { return new Promise((resolve, reject) => { toast.loading('加载中') setTimeout(() => { toast.close() - resolve(true) + try { + // 异步操作 + resolve(true) + } catch (error) { + toast.error('加载失败') + reject(error) + } }, 500) }) }
148-169: 建议补充嵌套使用的性能注意事项为了帮助开发者更好地使用嵌套功能，建议补充以下内容：
- 性能优化建议：
- 建议限制嵌套层级，避免过深的嵌套影响性能
- 建议使用虚拟列表处理大量数据的场景
- 最佳实践：
- 建议使用计算属性处理嵌套数据
- 建议添加 key 确保列表正确更新
204-245: 建议补充错误处理示例toggleAll 方法的文档很详细，建议补充错误处理的示例代码：
// 全部展开，并处理可能的错误 try { await collapseRef.value?.toggleAll({ expanded: true, skipDisabled: true }) } catch (error) { console.error('展开失败:', error) }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (8)
docs/component/collapse.md(3 hunks)src/pages/collapse/Index.vue(4 hunks)src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss(1 hunks)src/uni_modules/wot-design-uni/components/wd-collapse-item/index.scss(1 hunks)src/uni_modules/wot-design-uni/components/wd-collapse-item/types.ts(1 hunks)src/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue(4 hunks)src/uni_modules/wot-design-uni/components/wd-collapse/types.ts(1 hunks)src/uni_modules/wot-design-uni/components/wd-collapse/wd-collapse.vue(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (5)
- src/pages/collapse/Index.vue
- src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss
- src/uni_modules/wot-design-uni/components/wd-collapse-item/index.scss
- src/uni_modules/wot-design-uni/components/wd-collapse-item/types.ts
- src/uni_modules/wot-design-uni/components/wd-collapse/types.ts
🔇 Additional comments (8)
src/uni_modules/wot-design-uni/components/wd-collapse/wd-collapse.vue (4)
48-48: 导入语句更新正确！
新增的 isBoolean 工具函数导入有助于改进类型检查的实现。
97-102: 重复的问题，请参考之前的评审意见
108-108: 重复的问题，请参考之前的评审意见
120-140:
toggleAll 方法仍需改进
当前实现存在以下问题：
- 虽然将方法标记为
async，但内部的异步操作处理不完整 before-expand钩子的触发问题仍未解决
建议按如下方式修改：
const toggleAll = async (options: CollapseToggleAllOptions = {}) => {
if (props.accordion) {
return
}
if (isBoolean(options)) {
options = { expanded: options }
}
const { expanded, skipDisabled } = options
const names: string[] = []
- children.forEach((item, index) => {
+ for (const [index, item] of children.entries()) {
if (item.disabled && skipDisabled) {
if (item.$.exposed!.getExpanded()) {
names.push(item.name || index)
}
- } else if (isDef(expanded) ? expanded : !item.$.exposed!.getExpanded()) {
- names.push(item.name || index)
+ } else {
+ try {
+ // 确保触发 before-expand 钩子
+ await item.$.exposed!.updateExpand(expanded)
+ if (isDef(expanded) ? expanded : !item.$.exposed!.getExpanded()) {
+ names.push(item.name || index)
+ }
+ } catch (error) {
+ console.warn(`折叠面板切换失败: ${error}`)
+ }
}
- })
+ }
updateChange(names)
- updateChildren()
+ await updateChildren()
}运行以下脚本验证 before-expand 钩子的实现：
src/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue (3)
32-33: 导入声明看起来很完整
新增的导入声明增强了类型安全性，并引入了必要的工具函数。
120-129:
点击处理函数也需要完善错误处理
与 updateExpand 函数类似，这里的错误处理也需要改进。
建议修改如下：
async function handleClick() {
if (props.disabled) return
try {
await updateExpand()
const { name } = props
collapse && collapse.toggle(name, !expanded.value)
} catch (error) {
- /* empty */
+ console.warn('折叠面板点击处理失败:', error)
+ collapse?.emit('error', {
+ type: 'click_error',
+ error
+ })
}
}Likely invalid or redundant comment.
85-94:
需要完善错误处理机制
空的 catch 块会隐藏重要的错误信息，这可能导致问题难以排查。
建议添加错误处理：
async function updateExpand(useBeforeExpand: boolean = true) {
try {
if (useBeforeExpand) {
await handleBeforeExpand()
}
initRect()
} catch (error) {
- /* empty */
+ console.warn('折叠面板展开失败:', error)
+ // 向上传递错误事件
+ collapse?.emit('error', {
+ type: 'expand_error',
+ error
+ })
}
}Likely invalid or redundant comment.
docs/component/collapse.md (1)
176-176: 描述更新准确清晰
title 属性的描述更新准确地说明了支持通过同名 slot 自定义内容的功能。
| | 类名 | 说明 | 最低版本 | | ||
| | ----------------- | ------------------------------ | ---------------- | | ||
| | custom-class | collapseItem 根节点样式 | - | | ||
| | custom-body-style | 自定义折叠面板内容容器的样式 | $LOWEST_VERSION$ | |
There was a problem hiding this comment.
需要替换版本号占位符
请将 $LOWEST_VERSION$ 替换为实际的版本号，以确保文档的准确性。
Moonofweisheng
force-pushed
the
fix/collapse-before-expand
branch
from
897a527
to
4ad83c0
Compare
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Outside diff range and nitpick comments (8)
src/uni_modules/wot-design-uni/components/wd-collapse/wd-collapse.vue (1)
97-106: 实现得很好，建议小幅改进错误处理异步迭代和错误处理的实现符合最佳实践。建议在错误处理中添加更多上下文信息，以便更好地进行调试。
const updateChildren = async () => { for (const item of children) { try { await item.$.exposed!.updateExpand() } catch (error) { - console.warn(`更新折叠面板状态失败: ${error}`) + console.warn(`更新折叠面板状态失败 - 组件名称: ${item.name}, 错误: ${error}`) } } }src/pages/collapse/Index.vue (4)
5-12: 建议优化按钮布局以适应移动端显示按钮组的布局在移动端可能会出现换行或挤压的情况。建议考虑使用更适合移动端的布局方式。
建议修改样式如下：
:deep(.custom-button) { margin-right: 16px; margin-bottom: 16px; + max-width: calc(50% - 16px); + @media screen and (max-width: 375px) { + max-width: 100%; + margin-right: 0; + } }
17-19: 建议加强类型安全性
itemList的类型定义可以更严格，建议使用接口定义替代Record<string, any>。建议添加以下类型定义：
interface CollapseItem { title: string name: string body: string disabled?: boolean }然后更新
itemList的类型声明：-const itemList = ref<Record<string, any>[]>([ +const itemList = ref<CollapseItem[]>([
Line range hint
70-76: 建议添加样式注释说明对于自定义样式
custom-body-style="padding:0 0 0 14px"，建议添加注释说明其用途和必要性。建议在代码中添加注释：
<wd-collapse v-model="collapseRoot" @change="handleChange1"> + <!-- 通过自定义内容区域样式，调整嵌套折叠面板的左侧缩进，确保视觉层次 --> <wd-collapse-item custom-body-style="padding:0 0 0 14px" v-for="item in 5" :key="item" :title="`标签${item}`" :name="`${item}`" >
199-202: 建议优化样式组织结构建议将自定义按钮样式移至独立的样式块，并添加适当的注释。
建议重组样式如下：
+/* 自定义按钮样式 */ +.demo-button-group { + :deep(.custom-button) { + margin-right: 16px; + margin-bottom: 16px; + } +} -:deep(.custom-button) { - margin-right: 16px; - margin-bottom: 16px; -}然后在模板中添加对应的类名：
-<demo-block title="toggleAll"> +<demo-block title="toggleAll" class="demo-button-group">docs/component/collapse.md (3)
57-57: 建议补充异步更新示例的错误处理在
beforeExpend的示例代码中，建议添加错误处理逻辑以展示完整的使用方式。function beforeExpend(name) { const index = itemList.value.findIndex((item) => { return item.name === name }) if (index > -1) { itemList.value[index].body = 'Q1:七天无理由退换货制度...' } return new Promise((reslove, reject) => { toast.loading('加载中') setTimeout(() => { toast.close() reslove(true) + // 添加错误处理示例 + }).catch(error => { + toast.close() + toast.error('展开失败') + return false }, 500) }) }
148-169: 嵌套使用部分的示例代码需要补充说明建议在示例代码中添加以下内容：
- 变量
itemList的定义和初始化- 多层嵌套时的性能注意事项
建议在示例代码后添加：
### 注意事项 1. 嵌套使用时，建议控制嵌套层级（不超过3层）以避免性能问题 2. 每一层的 `collapse` 需要使用不同的 `v-model` 绑定值 3. 使用 `custom-body-style` 时注意内外层样式的继承关系
204-245: 建议优化 toggleAll 方法的示例代码当前的示例代码展示了基本用法，建议补充以下场景：
- 错误处理示例
- 与
before-expend钩子配合使用的示例建议添加以下示例：
// 处理 toggleAll 可能的异常情况 try { await collapseRef.value?.toggleAll({ expanded: true, skipDisabled: true }) } catch (error) { console.error('toggleAll 执行失败:', error) } // 与 before-expend 钩子配合使用 const beforeExpend = async (name) => { // 在展开前进行数据加载或验证 try { await loadData(name) return true } catch (error) { return false } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (8)
docs/component/collapse.md(3 hunks)src/pages/collapse/Index.vue(4 hunks)src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss(1 hunks)src/uni_modules/wot-design-uni/components/wd-collapse-item/index.scss(1 hunks)src/uni_modules/wot-design-uni/components/wd-collapse-item/types.ts(1 hunks)src/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue(4 hunks)src/uni_modules/wot-design-uni/components/wd-collapse/types.ts(1 hunks)src/uni_modules/wot-design-uni/components/wd-collapse/wd-collapse.vue(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (4)
- src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss
- src/uni_modules/wot-design-uni/components/wd-collapse-item/index.scss
- src/uni_modules/wot-design-uni/components/wd-collapse-item/types.ts
- src/uni_modules/wot-design-uni/components/wd-collapse/types.ts
🔇 Additional comments (5)
src/uni_modules/wot-design-uni/components/wd-collapse/wd-collapse.vue (2)
48-48: 导入变更看起来不错！
添加 isBoolean 工具函数的导入有助于改进类型检查，使代码更加健壮。
108-112: 异步处理改进很好！
添加 await 确保了子组件状态更新的正确顺序，这对于触发 before-expand 钩子至关重要。
src/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue (3)
3-6: 样式绑定逻辑正确实现
通过动态类绑定来控制展开状态的样式变化，实现方式合理。
13-13: 自定义样式属性添加合理
新增的 customBodyClass 和 customBodyStyle 绑定可以更灵活地控制内容区域的样式，有助于解决分割线和内容间距的问题。
72-78: 计算属性重命名提高了代码可读性
将 selected 重命名为 isSelected 更符合布尔值的命名规范，同时避免了变量遮蔽问题。
Comment on lines
+124
to
+144
| const toggleAll = async (options: CollapseToggleAllOptions = {}) => { | ||
| if (props.accordion) { | ||
| return | ||
| } | ||
| if (typeof options === 'boolean') { | ||
| if (isBoolean(options)) { | ||
| options = { expanded: options } | ||
| } | ||
|
|
||
| const { expanded, skipDisabled } = options | ||
| const names: string[] = [] | ||
|
|
||
| children.forEach((item, index: number) => { | ||
| children.forEach((item, index) => { | ||
| if (item.disabled && skipDisabled) { | ||
| if (item.$.exposed!.getExpanded()) { | ||
| names.push(item.name || index) | ||
| } | ||
| } else { | ||
| item.$.exposed!.updateExpand() | ||
| if (isDef(expanded) ? expanded : !item.$.exposed!.getExpanded()) { | ||
| names.push(item.name || index) | ||
| } | ||
| } else if (isDef(expanded) ? expanded : !item.$.exposed!.getExpanded()) { | ||
| names.push(item.name || index) | ||
| } | ||
| }) | ||
| updateChange(names) | ||
| await updateChildren() |
There was a problem hiding this comment.
需要修复异步迭代实现
当前实现存在以下问题：
- 使用
forEach处理异步操作可能导致并发问题 getExpanded调用可能是异步的，但没有使用 await
建议修改为：
const toggleAll = async (options: CollapseToggleAllOptions = {}) => {
if (props.accordion) {
return
}
if (isBoolean(options)) {
options = { expanded: options }
}
const { expanded, skipDisabled } = options
const names: string[] = []
- children.forEach((item, index) => {
+ for (const [index, item] of children.entries()) {
if (item.disabled && skipDisabled) {
- if (item.$.exposed!.getExpanded()) {
+ const isExpanded = await item.$.exposed!.getExpanded()
+ if (isExpanded) {
names.push(item.name || index)
}
- } else if (isDef(expanded) ? expanded : !item.$.exposed!.getExpanded()) {
+ } else {
+ const isExpanded = await item.$.exposed!.getExpanded()
+ if (isDef(expanded) ? expanded : !isExpanded) {
names.push(item.name || index)
}
}
- })
+ }
updateChange(names)
await updateChildren()
}📝 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.
Suggested change
| const toggleAll = async (options: CollapseToggleAllOptions = {}) => { | |
| if (props.accordion) { | |
| return | |
| } | |
| if (typeof options === 'boolean') { | |
| if (isBoolean(options)) { | |
| options = { expanded: options } | |
| } | |
| const { expanded, skipDisabled } = options | |
| const names: string[] = [] | |
| children.forEach((item, index: number) => { | |
| children.forEach((item, index) => { | |
| if (item.disabled && skipDisabled) { | |
| if (item.$.exposed!.getExpanded()) { | |
| names.push(item.name || index) | |
| } | |
| } else { | |
| item.$.exposed!.updateExpand() | |
| if (isDef(expanded) ? expanded : !item.$.exposed!.getExpanded()) { | |
| names.push(item.name || index) | |
| } | |
| } else if (isDef(expanded) ? expanded : !item.$.exposed!.getExpanded()) { | |
| names.push(item.name || index) | |
| } | |
| }) | |
| updateChange(names) | |
| await updateChildren() | |
| const toggleAll = async (options: CollapseToggleAllOptions = {}) => { | |
| if (props.accordion) { | |
| return | |
| } | |
| if (isBoolean(options)) { | |
| options = { expanded: options } | |
| } | |
| const { expanded, skipDisabled } = options | |
| const names: string[] = [] | |
| for (const [index, item] of children.entries()) { | |
| if (item.disabled && skipDisabled) { | |
| const isExpanded = await item.$.exposed!.getExpanded() | |
| if (isExpanded) { | |
| names.push(item.name || index) | |
| } | |
| } else { | |
| const isExpanded = await item.$.exposed!.getExpanded() | |
| if (isDef(expanded) ? expanded : !isExpanded) { | |
| names.push(item.name || index) | |
| } | |
| } | |
| } | |
| updateChange(names) | |
| await updateChildren() | |
| } |
Comment on lines
+85
to
+94
| async function updateExpand(useBeforeExpand: boolean = true) { | ||
| try { | ||
| if (useBeforeExpand) { | ||
| await handleBeforeExpand() | ||
| } | ||
| initRect() | ||
| } catch (error) { | ||
| /* empty */ | ||
| } | ||
| } |
There was a problem hiding this comment.
需要完善错误处理机制
当前代码在 catch 块中静默处理错误，这可能会导致潜在问题被忽略。建议添加适当的错误处理和日志记录。
建议修改如下：
async function updateExpand(useBeforeExpand: boolean = true) {
try {
if (useBeforeExpand) {
await handleBeforeExpand()
}
initRect()
} catch (error) {
- /* empty */
+ console.warn('折叠面板展开失败:', error)
+ collapse?.emit('error', {
+ type: 'expand_error',
+ error
+ })
}
}
async function handleClick() {
if (props.disabled) return
try {
await updateExpand()
const { name } = props
collapse && collapse.toggle(name, !expanded.value)
} catch (error) {
- /* empty */
+ console.warn('折叠面板点击处理失败:', error)
+ collapse?.emit('error', {
+ type: 'click_error',
+ error
+ })
}
}Also applies to: 120-129
Moonofweisheng
force-pushed
the
fix/collapse-before-expand
branch
from
4ad83c0
to
f73428d
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (8)
src/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue (2)
32-33: 建议优化导入声明请检查是否所有导入的工具函数都被使用到了，建议只导入必要的函数以减小打包体积。
72-78: 建议进一步优化计算属性的实现当前实现已经改进了空值检查，但建议：
- 使用可选链简化
collapse?.props.modelValue- 考虑使用
includes替代indexOf >= 0const isSelected = computed(() => { - const modelValue = collapse ? collapse?.props.modelValue || [] : [] + const modelValue = collapse?.props?.modelValue ?? [] const { name } = props - return (isString(modelValue) && modelValue === name) || (isArray(modelValue) && modelValue.indexOf(name as string) >= 0) + return (isString(modelValue) && modelValue === name) || (isArray(modelValue) && modelValue.includes(name as string)) })src/pages/collapse/Index.vue (6)
4-12: 建议增强类型安全性和组件引用处理建议对
collapse引用的类型检查和空值处理进行优化：
- 使用可选链（?.）虽然安全，但建议添加初始状态检查
- 建议为按钮点击事件添加类型定义
建议按照以下方式优化代码：
-<wd-button custom-class="custom-button" type="info" @click="collapse?.toggleAll()">全部切换</wd-button> +<wd-button + custom-class="custom-button" + type="info" + @click="handleToggleAll()" + :disabled="!collapse" +>全部切换</wd-button> +function handleToggleAll(): void { + if (collapse.value) { + collapse.value.toggleAll() + } +}
15-24: 建议优化类型定义和属性绑定
beforeExpend的条件绑定逻辑可以更清晰- 建议为
item定义接口类型而不是使用Record<string, any>建议添加以下类型定义：
interface CollapseItem { title: string name: string body: string disabled?: boolean }然后修改模板绑定：
-v-for="(item, index) in itemList" +v-for="(item: CollapseItem, index: number) in itemList"
67-82: 建议优化样式管理和嵌套结构
- 内联样式
padding:0 0 0 14px建议移至 CSS 类中- 嵌套层级的数据结构可以更清晰
建议将内联样式改为 CSS 类：
-<wd-collapse-item custom-body-style="padding:0 0 0 14px" +<wd-collapse-item custom-body-class="nested-collapse-item" +<style lang="scss" scoped> +.nested-collapse-item { + padding: 0 0 0 14px; +} +</style>
121-122: 建议完善禁用状态的类型定义
disabled属性的添加方式正确，但建议在类型定义中明确声明该属性。建议在之前建议的接口定义中明确包含
disabled属性：interface CollapseItem { title: string name: string body: string disabled: boolean // 明确声明为必需属性 }
Line range hint
182-197: 建议优化 beforeExpend 方法的实现
- Promise 的 reject 参数未使用
- 缺少错误处理
- 建议使用 async/await 优化代码结构
建议按照以下方式优化代码：
async function beforeExpend(name: string): Promise<boolean> { try { const index = itemList.value.findIndex((item) => item.name === name) if (index === -1) { throw new Error(`未找到名称为 ${name} 的项目`) } itemList.value[index].body = '...' // 更新内容 toast.loading('加载中') await new Promise((resolve) => setTimeout(resolve, 500)) toast.close() return true } catch (error) { toast.close() console.error('展开失败:', error) return false } }
201-216: 建议优化样式结构和命名
:deep()选择器的使用可以更规范- 类名可以更语义化
建议按照以下方式优化样式：
.collapse { - :deep(.more-slot) { + :deep(.collapse__more-slot) { color: red; } - :deep(.custom-button) { + :deep(.collapse__action-button) { margin-right: 16px; margin-bottom: 16px; } - :deep() { - .no-border { + :deep(.collapse__item--no-border) { &::after { display: none; } } - } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (8)
docs/component/collapse.md(3 hunks)src/pages/collapse/Index.vue(3 hunks)src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss(1 hunks)src/uni_modules/wot-design-uni/components/wd-collapse-item/index.scss(1 hunks)src/uni_modules/wot-design-uni/components/wd-collapse-item/types.ts(1 hunks)src/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue(4 hunks)src/uni_modules/wot-design-uni/components/wd-collapse/types.ts(1 hunks)src/uni_modules/wot-design-uni/components/wd-collapse/wd-collapse.vue(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (5)
- docs/component/collapse.md
- src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss
- src/uni_modules/wot-design-uni/components/wd-collapse-item/index.scss
- src/uni_modules/wot-design-uni/components/wd-collapse-item/types.ts
- src/uni_modules/wot-design-uni/components/wd-collapse/types.ts
🔇 Additional comments (5)
src/uni_modules/wot-design-uni/components/wd-collapse/wd-collapse.vue (4)
48-48: 导入语句更新正确！
新增的 isBoolean 导入优化了类型检查，提高了代码的类型安全性。
97-106: 新增的 updateChildren 函数实现合理！
函数实现具有以下优点：
- 使用
for...of确保异步操作按顺序执行 - 包含适当的错误处理机制
- 采用 async/await 处理异步操作
108-112: toggle 函数异步处理优化正确！
通过添加 async/await 确保了子组件状态更新的正确顺序，避免了潜在的时序问题。
124-144: 🛠️ Refactor suggestion
建议优化 toggleAll 函数中的异步处理！
当前实现存在以下问题：
- 使用
forEach处理异步操作可能导致并发问题 getExpanded的调用可能是异步的，但未使用 await
建议按如下方式修改：
-const toggleAll = async (options: CollapseToggleAllOptions = {}) => {
+const toggleAll = async (options: CollapseToggleAllOptions = {}) => {
if (props.accordion) {
return
}
if (isBoolean(options)) {
options = { expanded: options }
}
const { expanded, skipDisabled } = options
const names: string[] = []
- children.forEach((item, index) => {
+ for (const [index, item] of children.entries()) {
if (item.disabled && skipDisabled) {
- if (item.$.exposed!.getExpanded()) {
+ const isExpanded = await item.$.exposed!.getExpanded()
+ if (isExpanded) {
names.push(item.name || index)
}
- } else if (isDef(expanded) ? expanded : !item.$.exposed!.getExpanded()) {
+ } else {
+ const isExpanded = await item.$.exposed!.getExpanded()
+ if (isDef(expanded) ? expanded : !isExpanded) {
names.push(item.name || index)
}
}
- })
+ }
updateChange(names)
await updateChildren()
}Likely invalid or redundant comment.
src/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue (1)
3-6: 模板更改增强了组件的灵活性和视觉反馈
通过添加展开状态的类绑定和自定义样式支持，改进了组件的交互体验。
Also applies to: 13-13
Comment on lines
+131
to
+151
| /** | ||
| * 展开前钩子 | ||
| */ | ||
| function handleBeforeExpand() { | ||
| return new Promise<void>((resolve, reject) => { | ||
| const { name } = props | ||
| const nextexpanded = !expanded.value | ||
| if (nextexpanded && props.beforeExpend) { | ||
| const response = props.beforeExpend(name) | ||
| if (!response) { | ||
| return | ||
| reject() | ||
| } | ||
| if (isPromise(response)) { | ||
| response.then(() => { | ||
| handleChangeExpand(name) | ||
| }) | ||
| response.then(() => resolve()).catch(reject) | ||
| } else { | ||
| handleChangeExpand(name) | ||
| resolve() | ||
| } | ||
| } else { | ||
| handleChangeExpand(name) | ||
| resolve() | ||
| } | ||
| } else { | ||
| handleChangeExpand(name) | ||
| } | ||
| }) |
There was a problem hiding this comment.
🛠️ Refactor suggestion
核心功能实现需要注意的问题
- 函数实现了展开前的钩子逻辑，这解决了 PR 的主要目标
- 建议添加类型守卫以确保类型安全：
function isValidResponse(response: unknown): response is boolean | Promise<unknown> {
return typeof response === 'boolean' || response instanceof Promise
}- 建议添加适当的日志记录，以便于调试：
function handleBeforeExpand() {
return new Promise<void>((resolve, reject) => {
const { name } = props
const nextexpanded = !expanded.value
if (nextexpanded && props.beforeExpend) {
const response = props.beforeExpend(name)
+ console.debug('[wd-collapse-item] beforeExpand response:', response)
if (!response) {
reject()
}
// ... rest of the code
}
})
}
19 tasks
This was referenced Nov 28, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
无
💡 需求背景和解决方案
背景：当前实现，toggleAll方法不会触发
collapse-item的展开前钩子，同时collapse-item的标题和内容之间没有分割线。解决方案：
当切换后状态为打开时，先执行展开前钩子。同时
collapse-item展开时在标题和内容之间添加一个分割线，同时优化collapse-item内容区的padding与标题对齐。☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
Collapse组件文档，增加了“嵌套使用”部分，提供了嵌套折叠项的示例代码。custom-body-style和custom-body-class属性，允许自定义折叠面板的样式。before-expend方法返回 Promise，实现异步操作。toggleAll函数支持异步操作，增强了折叠项的管理能力。wd-collapse-item组件中新增了:disabled属性，用于条件禁用项。文档
CollapseItem和Collapse的属性说明，增加了对新属性的描述和示例。样式