网站
Evidence - 证据展示
可展开的活动记录、来源阶段、评分与耗时摘要。
用法
什么时候用它
来自@misoto22/folio/website
import { EvidenceStatus } from '@misoto22/folio/website'实践建议
推荐
- 提供本地化标签、含义明确的链接和有用的图片替代文本。
避免
- 不要在展示组件中放入服务凭据、路由逻辑或后端模型。
示例
已记录的活动证据
示例活动记录将阶段状态、来源资料和可展开的详情分开呈现。标签和测量值由应用传入，不从装饰性进度中推断。
组成部分
在调用处组合，而不是通过 props 配置——所以这个组件没有预料到的布局，依然表达得出来。
ActivityTrace
工具与任务活动共用展示结构；调用方提供真实、已本地化的标签。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| items必填 | ActivityTraceItem[] | — | |
| label必填 | string | — | |
| waiting | boolean | — | |
| waitingLabel | string | — |
同时接受 HTMLAttributes<HTMLDivElement> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
EvidencePanel
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| eyebrow必填 | ReactNode | — | |
| state必填 | EvidenceState | — | |
| stateLabel必填 | string | — | |
| title必填 | string | — |
同时接受 Omit<HTMLAttributes<HTMLElement>, 'title'> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
EvidenceSelection
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| label必填 | string | — | |
| onSelect必填 | (id: string) => void | — | |
| options必填 | { id: string; label: string }[] | — | |
| selectedId必填 | string | null | — |
同时接受 Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
EvidenceFacts
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| items必填 | DescriptionListItem[] | — | |
| description | ReactNode | — | |
| title | ReactNode | — |
同时接受 Omit<HTMLAttributes<HTMLDivElement>, 'title'> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
EvidenceDisclosure
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| label必填 | string | — |
同时接受 HTMLAttributes<HTMLDivElement> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
EvidenceQuery
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| fingerprint必填 | string | — | |
| label必填 | string | — | |
| query必填 | string | — |
同时接受 HTMLAttributes<HTMLDivElement> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
EvidenceStages
这个组件没有自己的属性。
EvidenceStage
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| description必填 | ReactNode | — | |
| number必填 | string | — | |
| state必填 | 'idle' | 'active' | 'done' | — | |
| stateLabel必填 | string | — | |
| time必填 | ReactNode | — | |
| title必填 | ReactNode | — |
同时接受 Omit<HTMLAttributes<HTMLLIElement>, 'title'> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
EvidenceScores
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| items必填 | EvidenceScore[] | — |
同时接受 HTMLAttributes<HTMLDivElement> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
SignalFigure
由应用提供的装饰性信号图，不进入证据区域的无障碍树。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| bars必填 | { height: number; opacity: number }[] | — | |
| caption必填 | ReactNode | — | |
| detail必填 | ReactNode | — | |
| running | boolean | — | |
| settled | boolean | — |
同时接受 HTMLAttributes<HTMLDivElement> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
EvidenceMeter
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| detail必填 | ReactNode | — | |
| label必填 | string | — | |
| valueText必填 | ReactNode | — | |
| value | number | null | 总量未知时不要设置。 |
同时接受 HTMLAttributes<HTMLDivElement> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
EvidenceDurations
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| items必填 | EvidenceDuration[] | — | |
| label必填 | string | — | |
| total必填 | number | null | — | |
| totalText必填 | string | — |
同时接受 HTMLAttributes<HTMLDivElement> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
EvidenceSummary
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| items必填 | DescriptionListItem[] | — |
同时接受 HTMLAttributes<HTMLDListElement> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
类型
export type EvidenceState = 'idle' | 'running' | 'done' | 'failed' | 'restored'