75 lines
2.6 KiB
TypeScript
75 lines
2.6 KiB
TypeScript
import { Button, Empty, Notice, Space } from '../../src'
|
|
import { Demo } from '../components/Demo'
|
|
import { PropsTable } from '../components/PropsTable'
|
|
import { Section } from '../components/Section'
|
|
|
|
export function Feedback() {
|
|
return (
|
|
<Section
|
|
id="feedback"
|
|
title="提示与空态"
|
|
api="Notice / Empty"
|
|
desc="页面里最常见的两种「没有内容」：一种是正常的空，一种是出了错。别让它们长得一样。"
|
|
>
|
|
<Demo
|
|
title="空态"
|
|
desc="空态只说明情况；带操作的空态能让用户立刻回到有内容的路径上。"
|
|
layout="column"
|
|
code={`<Empty text="暂无内容" />
|
|
<Empty
|
|
text="没有匹配「设计」的内容"
|
|
action={<Button size="sm" variant="secondary">清空搜索</Button>}
|
|
/>`}
|
|
>
|
|
<Empty text="暂无内容" />
|
|
<Empty
|
|
text="没有匹配「设计」的内容，换个关键字试试。"
|
|
action={
|
|
<Space gap="sm">
|
|
<Button size="sm" variant="secondary">
|
|
清空搜索
|
|
</Button>
|
|
<Button size="sm" variant="ghost">
|
|
查看全部
|
|
</Button>
|
|
</Space>
|
|
}
|
|
/>
|
|
</Demo>
|
|
|
|
<Demo
|
|
title="说明与错误"
|
|
desc="错误态带 role=alert，屏幕阅读器会立刻播报；说明态没有这个角色，避免每次渲染都被念。"
|
|
layout="column"
|
|
code={`<Notice title="内容库读取失败">…</Notice>
|
|
<Notice tone="error" title="连不上 Stash 服务" action={{ label: '重试', onClick }}>…</Notice>`}
|
|
>
|
|
<Notice title="还没有项目">在托管目录下建一个子目录并放入 index.html，刷新后就会出现在这里。</Notice>
|
|
<Notice
|
|
tone="error"
|
|
title="连不上 Stash 服务"
|
|
action={{ label: '重试', onClick: () => window.location.reload() }}
|
|
>
|
|
Failed to fetch /api/projects
|
|
</Notice>
|
|
</Demo>
|
|
|
|
<PropsTable
|
|
rows={[
|
|
{ name: 'tone', type: "'info' | 'error'", defaultValue: "'info'", desc: '说明 / 错误' },
|
|
{ name: 'title', type: 'ReactNode', required: true, desc: '标题行' },
|
|
{ name: 'children', type: 'ReactNode', desc: '正文' },
|
|
{ name: 'action', type: '{ label: string; onClick: () => void }', desc: '底部操作按钮' },
|
|
]}
|
|
/>
|
|
|
|
<PropsTable
|
|
rows={[
|
|
{ name: 'text', type: 'ReactNode', defaultValue: "'暂无内容'", desc: '空态文字' },
|
|
{ name: 'action', type: 'ReactNode', desc: '文字下方的操作区' },
|
|
]}
|
|
/>
|
|
</Section>
|
|
)
|
|
}
|