跳到主要内容

StatusDot 状态点

任务列表 / 推理链通用的状态圆点。四态（done / error / active / pending）× 两风格（flat / soft）。

状态视觉内部
done绿底 + 白勾success 填充 + <Icon name="check" />
error红底 + 白叉error 填充 + <Icon name="close" />
active边框 + 内嵌 <PulseDot>primary 边框 + 跳动
pending仅边框outline 灰边

tone='flat'（默认）—— pending/active 底色透明（'transparent'），用于 Task。 tone='soft' —— pending = c.surface、active = c.primaryContainer，用于 ChainOfThought（推理链气氛更柔）。

实时预览​

flat（任务列表风格）
done
error
active
pending
soft（推理链风格）
done
error
active
pending

用法​

import { StatusDot } from '@unif/react-native-design';

// 任务列表风格
<StatusDot status="done" size={16} />
<StatusDot status="active" size={16} />
<StatusDot status="pending" size={16} />

// 推理链风格（柔色）
<StatusDot status="active" size={18} tone="soft" />

API​

来源：src/components/ui/StatusDot/types.ts、StatusDot.tsx、styles.ts。

Prop类型默认说明
status'pending' | 'active' | 'done' | 'error'—当前状态（必填）
sizenumber?16圆点直径（done 勾 ≈ size*0.6）
tone'flat' | 'soft''flat'flat 透明底；soft 柔色底（pending=c.surface、active=c.primaryContainer）
testIDstring?—E2E / 测试定位

颜色派生（paletteFor）：done = c.success 底+边；error = c.error 底+边；active = c.primary 边框（底 flat 透明 / soft c.primaryContainer）；pending = c.outline 边框（底 flat 透明 / soft c.surface）。圆点带 1.5px 边框。

无障碍（a11y）​

来源：src/components/ui/StatusDot/StatusDot.tsx、types.ts。

视觉状态指示器，无交互。源码渲染为一个普通 <View>，未设置任何 a11y prop（无 accessibilityRole / accessibilityLabel），也无可传的 a11y prop（仅 status / size / tone / testID），继承底层 <View> 默认。内部内容随状态变化：active 时嵌入对 SR 隐藏的 <PulseDot>，done 时是一个 <Icon name="check">、error 时是 <Icon name="close">（按图标自身实现处理，见 图标），pending 时为空。因此圆点本身不向 SR 朗读「完成 / 进行中 / 待办」语义——状态文案应由相邻可见文本承载（如任务行的标题或状态标签），不要依赖 StatusDot 单独传达状态。

内部使用​

  • Task TaskRow —— <StatusDot status={mapped} size={16} />（todo→pending、running→active、done→done）
  • ChainOfThought Step —— <StatusDot status={step.status} size={18} tone="soft" />

设计原则​

设计上的"做完了 / 在做 / 还没做"在 Unif 系统里只有这一种视觉表达，新组件需要状态指示请直接用 StatusDot，不要自画。