61 lines
2.2 KiB
TypeScript
61 lines
2.2 KiB
TypeScript
import { Button, Result, Space } from '../../src'
|
|
import { Demo } from '../components/Demo'
|
|
import { PropsTable } from '../components/PropsTable'
|
|
import { Section } from '../components/Section'
|
|
|
|
export function Results() {
|
|
return (
|
|
<Section
|
|
id="result"
|
|
title="结果"
|
|
api="Result"
|
|
desc="整块的完成 / 失败反馈：提交完成、权限不足、出错。行内提示用 Notice，轻量反馈用 toast，整块状态才用 Result。"
|
|
>
|
|
<Demo
|
|
title="四种状态"
|
|
desc="success / error / warning / info 只影响图标与颜色，正文结构一致。"
|
|
layout="column"
|
|
code={`<Result status="success" title="已发布" description="内容已同步到内容库。" />`}
|
|
>
|
|
<Space direction="column" gap="lg" align="stretch">
|
|
<Result status="success" title="已发布" description="内容已同步到内容库，5 秒内会推送到首页。" />
|
|
<Result status="error" title="保存失败" description="内容库结构版本不匹配，请删除数据库后重启。" />
|
|
</Space>
|
|
</Demo>
|
|
|
|
<Demo
|
|
title="带操作"
|
|
desc="actions 放按钮组；按钮顺序与弹窗一致——次要操作在左、主操作在右。"
|
|
layout="column"
|
|
code={`<Result
|
|
status="warning"
|
|
title="还没有内容"
|
|
description="建一个分区，再往里加条目。"
|
|
actions={<><Button variant="ghost">看文档</Button><Button>新建分区</Button></>}
|
|
/>`}
|
|
>
|
|
<Result
|
|
status="warning"
|
|
title="还没有内容"
|
|
description="先在内容库里建一个分区，再往分区里加条目。"
|
|
actions={
|
|
<>
|
|
<Button variant="ghost">看文档</Button>
|
|
<Button>新建分区</Button>
|
|
</>
|
|
}
|
|
/>
|
|
</Demo>
|
|
|
|
<PropsTable
|
|
rows={[
|
|
{ name: 'status', type: "'success' | 'error' | 'warning' | 'info'", defaultValue: "'info'", desc: '状态' },
|
|
{ name: 'title', type: 'ReactNode', required: true, desc: '标题' },
|
|
{ name: 'description', type: 'ReactNode', desc: '说明文字' },
|
|
{ name: 'actions', type: 'ReactNode', desc: '底部操作区' },
|
|
]}
|
|
/>
|
|
</Section>
|
|
)
|
|
}
|