跳到正文
misoto22 design

图示

LifecycleFigure 生命周期图

一台状态机:一个东西可能处于什么状态,以及什么让它在状态之间移动。

来自@misoto22/design/diagrams

什么时候用它

唯一会花颜色的图,而且它只花系统留给状态的那两个 token。其余区分全靠形状,所以黑白打印还留得下八种里的六种。

示例

default

A job run

The only figure that spends colour, on the two outcomes.
A job run6 elements and 3 relationships. The only figure that spends colour, on the two outcomes.01Queuedaccepted02Runningtool calls03Reviewquality gate04Completedfinal answerBlockedmissing inputFailedtimed out

6 elements and 3 relationships. The only figure that spends colour, on the two outcomes.

  • Queued (start) — accepted
  • Running (active) — tool calls
  • Review (decision) — quality gate
  • Completed (success) — final answer
  • Blocked (waiting) — missing input
  • Failed (failure) — timed out
  • ReviewBlocked: needs input
  • BlockedFailed: expired — after 24h
  • BlockedRunning: answered
Key
  • Entry
  • Working
  • Decision
  • Succeeded
  • Waiting
  • Failed

说明

一台状态机:一个东西可能处于什么状态,以及什么让它移动。

这是这里唯一会花颜色的图,而且它花的正好是这套系统留给状态的那两个 token:终态成功用 --success,终态失败用 --danger。这个包里没有别的东西被允许用这两个,而生命周期图正是当初为它们留位置的那个场景——这张图的全部意义,就是一次运行是从哪一头出来的。

另外六种靠形状承载,所以一份黑白打印只丢掉两个结局的色相,其余每一处区分都还在:起点是一块填充的胶囊帽,判定是一个菱形,等待是一个虚线框,外部是一块切掉一角的板。

可恢复的失败,是有路可回的失败。type: "failure" 说的是一个状态怎么画;从它出去的那条转移,才说明这次运行是不是结束了。一个可重试的错误和一个终态的错误长得一模一样,直到你顺着箭头走——这是对的:两者之间的差别是机器里一条真实的边,不是盒子上的一个形容词。

属性

LifecycleFigure props
属性类型默认值说明
spec必填LifecycleSpec

同时接受 FigureChrome 里的全部属性,它们会直接透传给底层元素,不再逐条列出。

无障碍

  • success 和 failure 是这个包的图里仅有的两处彩色标记,而且各自还有独立的板块形状——颜色从来不是唯一的载体。
  • 就算 spec 没有列出这些转移,主轨也会在第一条泳道的相邻状态之间画出来,因为那是图的脊梁,不是它的例外。