梧桐设计语言v0.4.1

错误块ErrorBlock

页内错误块:失败原因留在页面上,不消失。destructive-soft 底、radius-md、左侧 destructive 图标,标题 label 字重 600 destructive,正文 body foreground


文案三段式:什么失败了 → 为什么 → 怎么办。最后一段最常被漏掉,而它才是用户真正需要的。「操作失败,请稍后重试」等于什么都没说。

按钮在右下:修复动作(改派他人)用次级按钮,重试用幽灵按钮。放在触发它的表单或面板里,紧挨着出错的地方。

消费者提供:标题、原因、建议、动作。

示例

import
import { ErrorBlock } from "@wutong/ui";

三段式

什么失败了 → 为什么 → 怎么办。留在页面上,不消失

API

属性类型默认说明
titleReactNode什么失败了
childrenReactNode为什么 → 怎么办
action{ label, onClick }修复动作(次级按钮)
onRetry() => void重试(幽灵按钮)