界面首先表达状态

type ViewState<T> =
  | { status: "idle" }
  | { status: "loading" }
  | { status: "success"; data: T }
  | { status: "error"; message: string };

这是解释结构的代码骨架，外部函数与数据需要在实际项目中实现。

放进真实情境里看

任务台第一次打开时没有任务；提交后网络很慢；再次提交时服务器报错。若页面只画“有任务”的理想状态，访客会看见空白、误以为按钮没反应，甚至重复创建。

1. 01

   列出所有可见状态

   至少包括初始、加载、空结果、有数据、提交中和失败。把空结果当成成功的一种，而不是错误。

2. 02

   为每个状态安排动作

   加载时说明正在等待并禁用重复提交；空结果引导创建；失败时保留输入并允许重试。

3. 03

   用状态图检查遗漏

   从加载到成功、空结果、错误都应该有边；错误恢复也必须能回到某个有效状态。