fix(empty): actions add support for events #2854
Conversation
|
Warning Rate limit exceeded@oasis-cloud has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 17 minutes and 25 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (3)
Walkthrough该拉取请求引入了一个新的演示组件 Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
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 (
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## next #2854 +/- ##
=======================================
Coverage 84.01% 84.02%
=======================================
Files 219 220 +1
Lines 17899 17907 +8
Branches 2622 2625 +3
=======================================
+ Hits 15038 15046 +8
Misses 2856 2856
Partials 5 5 ☔ View full report in Codecov by Sentry. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Outside diff range and nitpick comments (12)
src/packages/empty/types.ts (1)
4-13: 建议添加接口和属性的文档注释接口定义结构清晰，类型完整。建议为接口和各个属性添加 JSDoc 注释，以提供更好的开发体验。
建议添加如下文档注释：
+ /** + * Empty 组件操作按钮的配置接口 + */ export interface EmptyAction { + /** 按钮文本内容 */ text: React.ReactNode + /** 自定义类名 */ className?: string + /** 自定义样式 */ style?: React.CSSProperties + /** 按钮类型 */ type?: ButtonType + /** 按钮尺寸 */ size?: ButtonSize + /** 按钮填充模式 */ fill?: ButtonFill + /** 是否禁用 */ disabled?: boolean + /** 点击回调函数 */ onClick?: () => void }src/packages/empty/demos/h5/demo7.tsx (1)
4-21: 建议优化国际化和错误处理组件实现基本正确，但有以下几点建议改进：
- 描述文本应该使用国际化
- Toast 提示消息应保持语言一致性
- 建议添加错误处理
建议按照以下方式修改：
+ import { useTranslate } from '@/sites/assets/locale' const Demo7 = () => { + const [translated] = useTranslate({ + 'zh-CN': { + loadFailed: '加载失败', + actionText: '操作', + actionClick: '点击操作！' + }, + 'en-US': { + loadFailed: 'Load Failed', + actionText: 'Action', + actionClick: 'Action Click!' + } + }) + return ( <Empty status="error" - description="加载失败" + description={translated.loadFailed} style={{ marginBottom: '20px' }} actions={[ { - text: 'Action', + text: translated.actionText, type: 'info', onClick: () => { + try { - Toast.show({ title: 'Action Click!' }) + Toast.show({ title: translated.actionClick }) + } catch (error) { + console.error('Action failed:', error) + } }, }, ]} /> ) }src/packages/empty/demos/taro/demo7.tsx (2)
14-16: 建议调整 Action 按钮的类型考虑到当前是错误状态的展示，建议将 action 的类型从 "info" 改为 "primary" 或 "danger"，以便更好地表达用户操作的紧急程度。
-type: 'info', +type: 'primary',
7-7: 建议优化 Toast ID 命名当前 Toast ID "toast-empty" 过于通用，建议改为更具体的标识，如 "toast-empty-error-action"。
src/packages/empty/doc.zh-TW.md (2)
63-69: 建议：完善 Actions 章节的说明文档建议在示例代码之前添加一段说明文字，解释 Actions 功能的使用场景和目的，以帮助用户更好地理解该特性。
89-96: 建议：补充 EmptyAction 类型的属性说明建议为以下属性添加更详细的说明：
type：说明支持哪些具体的按钮类型size：说明支持哪些具体的尺寸选项fill：说明支持哪些具体的填充模式src/packages/empty/doc.md (2)
63-69: 建议：补充 Actions 使用示例的说明建议添加以下内容：
- Actions 功能的使用场景描述
- 示例代码的预期效果说明
- 与其他属性配合使用的最佳实践
92-94: 建议：完善按钮相关属性的类型说明
type、size和fill属性的类型说明需要补充具体的可选值，建议添加链接指向 Button 组件的相关文档。src/packages/empty/doc.taro.md (2)
63-69: 建议：补充 Taro 环境下的使用说明建议添加以下内容：
- Taro 环境下的使用注意事项
- 小程序端的兼容性说明
- 实际效果截图或示例
89-96: 建议：明确 Taro 环境下的按钮组件属性建议补充说明：
- 在 Taro 环境下的按钮组件特有属性
- 与 H5 版本的差异说明
- 各属性在不同端（微信、支付宝等）的兼容性说明
src/packages/empty/empty.tsx (1)
119-125: 建议增强错误处理和类型校验当前实现中的按钮属性处理可以进行以下改进：
- 建议为
onClick处理函数添加类型定义- 考虑对
actions数组中的必填属性进行验证建议的改进方案：
- onClick={item.onClick || (() => undefined)} + onClick={item.onClick || (() => { + if (process.env.NODE_ENV !== 'production') { + console.warn('Empty: onClick handler is not defined for action button'); + } + })}src/packages/empty/empty.taro.tsx (1)
117-123: 建议重构以减少代码重复当前 Taro 版本和非 Taro 版本存在大量重复代码，建议考虑以下改进：
- 将共享的逻辑抽取到公共的 utils 文件中
- 考虑使用高阶组件或自定义 hooks 来复用按钮渲染逻辑
示例重构方案：
// shared/empty-utils.ts export const useEmptyActions = (actions: Array<EmptyAction>, classPrefix: string) => { return actions.map((item, index) => ({ className: getActionClassName(actions, index, classPrefix), style: item.style, type: getButtonType(actions, index), size: item.size || 'small', fill: item.fill || 'outline', disabled: item.disabled || false, onClick: item.onClick || (() => undefined), text: item.text })) }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (12)
src/packages/empty/demo.taro.tsx(5 hunks)src/packages/empty/demo.tsx(5 hunks)src/packages/empty/demos/h5/demo7.tsx(1 hunks)src/packages/empty/demos/taro/demo7.tsx(1 hunks)src/packages/empty/doc.en-US.md(2 hunks)src/packages/empty/doc.md(2 hunks)src/packages/empty/doc.taro.md(2 hunks)src/packages/empty/doc.zh-TW.md(2 hunks)src/packages/empty/empty.taro.tsx(2 hunks)src/packages/empty/empty.tsx(3 hunks)src/packages/empty/types.ts(1 hunks)src/packages/empty/utils.ts(1 hunks)
🧰 Additional context used
🪛 GitHub Check: build
src/packages/empty/utils.ts
[failure] 1-1:
Parameter 'actions' implicitly has an 'any' type.
[failure] 1-1:
Parameter 'index' implicitly has an 'any' type.
🔇 Additional comments (4)
src/packages/empty/demo.tsx (1)
9-9: 代码变更已审查通过
新增的 Demo7 导入、翻译项及组件使用均符合规范。
Also applies to: 20-20, 29-29, 38-38, 56-57
src/packages/empty/demo.taro.tsx (1)
11-11: 代码变更已审查通过
Taro 版本的改动与 H5 版本保持一致，符合要求。建议验证在 Taro 环境下的渲染效果。
Also applies to: 22-22, 31-31, 40-40, 60-61
✅ Verification successful
代码变更已验证通过
Empty 组件的 Taro 版本与 H5 版本保持一致，新增的 Demo7 展示了带 actions 的错误状态用法，包含了以下功能：
- 展示错误状态的空状态组件
- 自定义描述文案为"加载失败"
- 添加了一个点击触发 Toast 提示的 action 按钮
代码实现完整且符合组件设计规范。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查 Demo7 在其他 Taro 组件中的使用情况
rg -l "Demo7" --type tsx
Length of output: 52
Script:
#!/bin/bash
# 检查 Demo7 在所有文件中的使用情况，不限制文件类型
rg -l "Demo7"
# 查找所有包含 demo7 的文件
fd "demo7"
# 检查 demo.taro.tsx 文件的完整内容
fd -e tsx "demo.taro.tsx" -x cat {}
Length of output: 72386
Script:
#!/bin/bash
# 检查 empty/demos/taro/demo7 的实现
fd -t f "demo7.tsx" "src/packages/empty/demos/taro" -x cat {}
# 检查 empty/demo.tsx 中 Demo7 的使用
fd -t f "demo.tsx" "src/packages/empty" -x cat {}
Length of output: 2203
src/packages/empty/doc.en-US.md (2)
63-69: 文档结构清晰，新增的 Actions 部分描述恰当
新增的 Actions 部分结构合理，并通过 demo7 示例展示了具体用法。
83-96: 属性文档完整，类型定义清晰
新增的 actions 属性和 EmptyAction 类型定义详尽，包含了所有必要的字段说明。
src/packages/empty/utils.ts
Outdated
| export const getButtonType = (actions, index) => { | ||
| const action = actions[index] | ||
| if (!actions || actions.length === 0) return 'default' | ||
| if (action.type) return action.type | ||
| actions.length > 1 && index === 0 ? 'default' : 'primary' | ||
| } |
There was a problem hiding this comment.
需要修复类型定义和逻辑错误
该函数存在以下问题：
- 缺少 TypeScript 类型定义
- 在空值检查之前访问数组可能导致运行时错误
- 最后一行缺少 return 语句
- 需要更好的错误处理机制
建议按照以下方式修改代码：
- export const getButtonType = (actions, index) => {
+ export const getButtonType = (actions: EmptyAction[], index: number): ButtonType => {
+ if (!actions || actions.length === 0) return 'default'
+
+ const action = actions[index]
- const action = actions[index]
- if (!actions || actions.length === 0) return 'default'
if (action.type) return action.type
- actions.length > 1 && index === 0 ? 'default' : 'primary'
+ return actions.length > 1 && index === 0 ? 'default' : 'primary'
}Committable suggestion skipped: line range outside the PR's diff.
🧰 Tools
🪛 GitHub Check: build
[failure] 1-1:
Parameter 'actions' implicitly has an 'any' type.
[failure] 1-1:
Parameter 'index' implicitly has an 'any' type.
| <Toast id="toast-empty" /> | ||
| <Empty | ||
| status="error" | ||
| description="加载失败" |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议使用翻译系统替代硬编码文本
建议将 "加载失败" 文本添加到翻译系统中，以支持国际化。
-description="加载失败"
+description={translated.loadFailed}Committable suggestion skipped: line range outside the PR's diff.
src/packages/empty/demo.taro.tsx
Outdated
| @@ -18,6 +19,7 @@ const EmptyDemo = () => { | |||
| b840c88f: '图片类型，内置3个', | |||
| a74a1fd4: '自定义图片', | |||
| '8dab2f66': '底部内容', | |||
| actions: 'Actions', | |||
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (3)
src/packages/empty/doc.zh-TW.md (1)
63-69: 建议：完善自定义操作章节的说明文档建议在示例代码之前添加简要说明，以帮助用户更好地理解该功能的使用场景和目的。
建议添加如下说明：
### 自定義操作 + Empty 組件支持通過 actions 屬性來自定義操作按鈕，可以添加一個或多個按鈕來引導用户進行操作。 :::demosrc/packages/empty/doc.md (1)
63-69: 建议：完善自定义操作章节的说明文档建议在示例代码之前添加简要说明，以帮助用户更好地理解该功能的使用场景和目的。
建议添加如下说明：
### 自定义操作 + Empty 组件支持通过 actions 属性来自定义操作按钮，可以添加一个或多个按钮来引导用户进行操作。 :::demosrc/packages/empty/doc.taro.md (1)
63-69: 建议：完善自定义操作章节的说明文档建议在示例代码之前添加简要说明，以帮助用户更好地理解该功能在Taro环境下的使用场景和目的。
建议添加如下说明：
### 自定义操作 + Empty 组件支持通过 actions 属性来自定义操作按钮，可以添加一个或多个按钮来引导用户进行操作。在 Taro 环境下，按钮的点击事件会自动适配小程序环境。 :::demo
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (7)
src/packages/empty/demo.taro.tsx(5 hunks)src/packages/empty/demo.tsx(5 hunks)src/packages/empty/doc.en-US.md(2 hunks)src/packages/empty/doc.md(2 hunks)src/packages/empty/doc.taro.md(2 hunks)src/packages/empty/doc.zh-TW.md(2 hunks)src/packages/empty/utils.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (4)
- src/packages/empty/demo.taro.tsx
- src/packages/empty/demo.tsx
- src/packages/empty/utils.ts
- src/packages/empty/doc.en-US.md
🔇 Additional comments (3)
src/packages/empty/doc.zh-TW.md (1)
83-96: 建议：补充类型引用说明
ButtonType、ButtonSize 和 ButtonFill 等类型需要说明其具体值范围。
建议在类型定义中添加具体值说明：
| type | Button 组件的 type | ButtonType | `-` |
+ > ButtonType: 'default' | 'primary' | 'info' | 'warning' | 'danger' | 'success'
| size | Button 组件的 size | ButtonSize | `-` |
+ > ButtonSize: 'large' | 'normal' | 'small'
| fill | Button 组件的 fill 属性 | ButtonFill | `-` |
+ > ButtonFill: 'solid' | 'outline' | 'none'✅ Verification successful
Let me gather more information about the specific type definitions.
建议：补充类型定义的具体值范围
在文档中需要补充以下类型定义的具体值说明：
ButtonType: 'default' | 'primary'ButtonSize: 'xlarge' | 'large' | 'normal' | 'small' | 'mini'ButtonFill: 'solid' | 'outline' | 'dashed' | 'none'
建议修改如下：
| type | Button 组件的 type | ButtonType | `-` |
+ > ButtonType 可选值：'default' | 'primary'
| size | Button 组件的 size | ButtonSize | `-` |
+ > ButtonSize 可选值：'xlarge' | 'large' | 'normal' | 'small' | 'mini'
| fill | Button 组件的 fill 属性 | ButtonFill | `-` |
+ > ButtonFill 可选值：'solid' | 'outline' | 'dashed' | 'none'🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 查找Button组件的类型定义
rg -l "type ButtonType|type ButtonSize|type ButtonFill" src/
Length of output: 129
Script:
#!/bin/bash
# 查找Button组件中的具体类型定义内容
rg "type ButtonType|type ButtonSize|type ButtonFill" -A 2 src/packages/button/button.tsx src/packages/button/button.taro.tsx
Length of output: 1230
src/packages/empty/doc.md (1)
83-96: 建议：补充类型引用说明
ButtonType、ButtonSize 和 ButtonFill 等类型需要说明其具体值范围。
建议在类型定义中添加具体值说明：
| type | Button 组件的 type | ButtonType | `-` |
+ > ButtonType: 'default' | 'primary' | 'info' | 'warning' | 'danger' | 'success'
| size | Button 组件的 size | ButtonSize | `-` |
+ > ButtonSize: 'large' | 'normal' | 'small'
| fill | Button 组件的 fill 属性 | ButtonFill | `-` |
+ > ButtonFill: 'solid' | 'outline' | 'none'✅ Verification successful
Let me gather more information about the specific type definitions.
建议：补充类型定义的具体值范围
建议在文档中添加以下类型说明：
ButtonType: 'default' | 'primary' | 'info'ButtonSize: 'xlarge' | 'large' | 'normal' | 'small' | 'mini'ButtonFill: 'solid' | 'outline' | 'dashed' | 'none'
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 查找Button组件的类型定义
rg -l "type ButtonType|type ButtonSize|type ButtonFill" src/
Length of output: 129
Script:
#!/bin/bash
# 查找Button组件中的具体类型定义内容
rg "type ButtonType|type ButtonSize|type ButtonFill" -A 3 src/packages/button/button.tsx src/packages/button/button.taro.tsx
Length of output: 1428
src/packages/empty/doc.taro.md (1)
83-96: 建议：补充类型引用说明并确认小程序兼容性
需要补充按钮相关类型说明，并确认这些属性在小程序环境下的兼容性。
建议在类型定义中添加具体值说明，并注明小程序支持情况：
| type | Button 组件的 type | ButtonType | `-` |
+ > ButtonType: 'default' | 'primary' | 'info' | 'warning' | 'danger' | 'success'
+ > 注：在小程序环境下完全支持
| size | Button 组件的 size | ButtonSize | `-` |
+ > ButtonSize: 'large' | 'normal' | 'small'
+ > 注：在小程序环境下完全支持
| fill | Button 组件的 fill 属性 | ButtonFill | `-` |
+ > ButtonFill: 'solid' | 'outline' | 'none'
+ > 注：在小程序环境下完全支持✅ Verification successful
建议：完善类型定义说明
根据代码分析结果，建议在文档中补充以下类型说明：
- ButtonType: 'default' | 'primary' | 'info' | 'success' | 'warning' | 'danger'
- ButtonSize: 'xlarge' | 'large' | 'normal' | 'small' | 'mini'
- ButtonFill: 'solid' | 'outline' | 'dashed' | 'none'
从代码实现来看，Button组件在Taro版本（button.taro.tsx）和普通版本（button.tsx）中的类型定义完全一致，且没有发现特殊的平台兼容性处理代码，说明这些属性在各个平台上都应该是一致支持的。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 查找Taro版本Button组件的类型定义和小程序适配代码
rg -l "type ButtonType|type ButtonSize|type ButtonFill" "src/**/taro/**"
Length of output: 129
Script:
#!/bin/bash
# 搜索整个代码库中的Button类型定义
rg -l "type ButtonType|type ButtonSize|type ButtonFill"
# 搜索Button组件的实现和类型定义
ast-grep --pattern 'type ButtonType = $$$'
ast-grep --pattern 'type ButtonSize = $$$'
ast-grep --pattern 'type ButtonFill = $$$'
# 搜索小程序相关的Button适配代码
rg -l "Button.*weapp|weapp.*Button"
Length of output: 1439
Script:
#!/bin/bash
# 检查button.taro.tsx中的平台兼容性代码
rg -A 5 "weapp|miniProgram|mini-program|小程序" src/packages/button/button.taro.tsx
# 查找Button组件的测试用例，看是否有小程序相关测试
rg -l "test|spec" src/packages/button/
Length of output: 232
Script:
#!/bin/bash
# 检查Button测试用例中的平台相关测试
rg -A 5 "weapp|miniProgram|mini-program|小程序|@tarojs" src/packages/button/__test__/button.spec.tsx
# 检查Button组件的实现文件中的平台判断逻辑
rg "process\.env\.TARO_ENV|ENV_TYPE|process\.env\.TARO_PLATFORM" src/packages/button/button.taro.tsx
Length of output: 202
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
Demo7组件，展示了加载失败的状态和操作按钮。EmptyDemo组件中集成了新的翻译条目actions，支持简体中文、繁体中文和英语。文档更新
Empty组件的文档，新增了关于操作按钮的部分，提供了示例和详细说明。actions属性的类型说明，明确为Array<EmptyAction>，并定义了EmptyAction类型的详细属性。