文案三段式:什么失败了 → 为什么 → 怎么办。最后一段最常被漏掉,而它才是用户真正需要的。「操作失败,请稍后重试」等于什么都没说。
按钮在右下:修复动作(改派他人)用次级按钮,重试用幽灵按钮。放在触发它的表单或面板里,紧挨着出错的地方。
消费者提供:标题、原因、建议、动作。
页内错误块:失败原因留在页面上,不消失。destructive-soft 底、radius-md、左侧 destructive 图标,标题 label 字重 600 destructive,正文 body foreground。
文案三段式:什么失败了 → 为什么 → 怎么办。最后一段最常被漏掉,而它才是用户真正需要的。「操作失败,请稍后重试」等于什么都没说。
按钮在右下:修复动作(改派他人)用次级按钮,重试用幽灵按钮。放在触发它的表单或面板里,紧挨着出错的地方。
消费者提供:标题、原因、建议、动作。
import { ErrorBlock } from "@wutong/ui";
什么失败了 → 为什么 → 怎么办。留在页面上,不消失
王强当天已有 4 个工单,超出单人上限(3 个)。请改派他人,或到排班设置调整上限。
| 属性 | 类型 | 默认 | 说明 |
|---|---|---|---|
| title | ReactNode | — | 什么失败了 |
| children | ReactNode | — | 为什么 → 怎么办 |
| action | { label, onClick } | — | 修复动作(次级按钮) |
| onRetry | () => void | — | 重试(幽灵按钮) |