feat: ✨ Sidebar 侧边栏组件增加before-change属性支持异步更新 #721
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Caution Review failedThe pull request is closed. Walkthrough本次更改主要针对 Changes
Assessment against linked issues
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. |
Deploying wot-design-uni with
|
| Latest commit: |
7c83f70
|
| Status: | ⚡️ Build in progress... |
![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 (5)
src/uni_modules/wot-design-uni/components/wd-sidebar/types.ts (1)
33-37: 完善属性文档和类型引用建议更新以下内容：
- 使用更详细的属性文档注释
- 更新类型引用以匹配修正后的类型名称
/** * 当前导航项的索引 + * @default 0 */ modelValue: makeNumericProp(0), /** - * 在改变前执行的函数 + * 切换前的钩子函数，返回 false 可阻止切换，支持异步 + * @param option.value 目标值 + * @param option.resolve 接收一个 boolean 参数，true 表示允许切换，false 表示阻止切换 */ - beforeChange: Function as PropType<SiderbarBeforeChange> + beforeChange: Function as PropType<SidebarBeforeChange>src/uni_modules/wot-design-uni/components/wd-sidebar/wd-sidebar.vue (1)
32-33: 建议完善参数文档说明建议在文档注释中添加参数类型信息，使文档更加完整。
/** * 子项状态变更 - * @param value 目标值 - * @param label 目标值标题 + * @param value {number | string} 目标值 + * @param label {string} 目标值标题 */src/pages/sidebar/Index.vue (2)
Line range hint
24-28: 新增的 before-change 示例实现完善！建议为该示例添加注释说明异步切换的功能，以便其他开发者更好地理解使用场景。
<wd-sidebar v-model="active3" :before-change="beforeChange"> + <!-- 演示异步切换功能，点击后会有2秒loading状态 --> <wd-sidebar-item :value="0" label="标签名称" /> <wd-sidebar-item :value="1" label="标签名称" disabled /> <wd-sidebar-item :value="2" label="标签名称" /> </wd-sidebar>
61-67: 建议增强错误处理机制当前实现仅考虑了成功场景，建议增加错误处理逻辑。
const beforeChange: SiderbarBeforeChange = ({ value, resolve }) => { showLoading('切换中') setTimeout(() => { - closeLoading() - resolve(true) + try { + // 这里可以添加实际的异步逻辑 + closeLoading() + resolve(true) + } catch (error) { + closeLoading() + uni.showToast({ + title: '切换失败', + icon: 'error' + }) + resolve(false) + } }, 2000) }docs/component/sidebar.md (1)
70-97: 建议补充异步切换的错误处理说明示例代码展示了基本的异步切换功能，建议补充以下内容：
- 当
resolve(false)时的行为说明- 异步操作失败时的错误处理建议
- 补充
before-change的返回值类型说明建议在示例代码中添加错误处理：
const beforeChange: SiderbarBeforeChange = ({ value, resolve }) => { showLoading('切换中') - setTimeout(() => { - closeLoading() - resolve(true) - }, 2000) + try { + setTimeout(() => { + closeLoading() + resolve(true) + }, 2000) + } catch (error) { + closeLoading() + toast.show('切换失败') + resolve(false) + } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (4)
docs/component/sidebar.md(6 hunks)src/pages/sidebar/Index.vue(3 hunks)src/uni_modules/wot-design-uni/components/wd-sidebar/types.ts(2 hunks)src/uni_modules/wot-design-uni/components/wd-sidebar/wd-sidebar.vue(2 hunks)
🔇 Additional comments (7)
src/uni_modules/wot-design-uni/components/wd-sidebar/types.ts (1)
Line range hint 1-42: 整体实现符合需求
类型定义和属性声明完全支持了 before-change 异步更新的功能需求，提供了良好的 TypeScript 类型支持。建议在修复上述问题后合并此PR。
src/uni_modules/wot-design-uni/components/wd-sidebar/wd-sidebar.vue (3)
20-20: 导入实用函数看起来不错！
引入 isFunction 工具函数来验证 beforeChange 属性的类型是一个很好的做法。
50-58: 更新逻辑封装得很好
将更新逻辑抽取为独立的 updateValue 函数是个很好的做法，提高了代码的可维护性。事件发送的实现也很规范。
36-48: 异步切换功能实现正确，建议验证使用场景
beforeChange 的实现符合需求，支持异步控制切换行为。代码结构清晰，使用 resolve 回调处理异步结果的方式很合理。
建议运行以下脚本检查组件的使用示例：
✅ Verification successful
Let me check the content of the example and documentation files to verify the implementation details.
异步切换功能实现完善，示例和文档覆盖充分
示例和文档中已经完整展示了 beforeChange 的使用方法：
- 在示例代码
src/pages/sidebar/Index.vue中提供了完整的异步切换实现 - 文档
docs/component/sidebar.md中详细说明了beforeChange的用法和参数说明 - 包含了加载状态展示的最佳实践示例
无需进一步验证，当前实现和文档完全符合要求。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：查找组件使用示例和测试用例，确保新功能有适当的示例和测试覆盖
# 搜索示例代码
echo "查找使用示例..."
rg -l "wd-sidebar.*before-change"
# 搜索测试用例
echo "查找测试用例..."
fd -e spec.ts -e spec.js -e test.ts -e test.js | xargs rg "beforeChange"
Length of output: 1786
Script:
#!/bin/bash
# Check the content of example and documentation files
echo "检查示例文件内容..."
cat src/pages/sidebar/Index.vue
echo "\n检查文档内容..."
cat docs/component/sidebar.md
Length of output: 16561
src/pages/sidebar/Index.vue (2)
4-4: 文件元数据更新正确！
文件路径和最后编辑时间已更新。
Also applies to: 7-7
52-53: 类型导入和使用规范！
正确引入了必要的类型定义和工具函数。
docs/component/sidebar.md (1)
505-505: 文档更新完善
badge-props 属性的文档说明清晰，并正确链接到了 Badge 组件文档。
Moonofweisheng
force-pushed
the
feature/sidebar-before-change
branch
from
e1e5e3a
to
7c83f70
Compare
✅ Closes: #711
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
#711
💡 需求背景和解决方案
为Sidebar组件添加
before-change属性，用于处理异步更新的场景☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
wd-sidebar组件中添加了异步切换功能，允许在切换选项卡之前执行特定逻辑。before-change属性，支持在切换之前进行自定义处理。badge-props属性，允许传递自定义徽章属性。文档
wd-sidebar组件的文档，增加了异步切换部分及相关示例，提升了可读性和一致性。