Vue 页面状态设计：先区分事实，再组织组件

复杂页面的难点通常不是把接口数据渲染出来，而是同时处理加载、空数据、局部失败和用户操作。

先写清楚状态

与其在模板里不断增加布尔值，不如先为页面定义互斥状态：

type PageState =
  | { type: 'loading' }
  | { type: 'empty' }
  | { type: 'ready'; rows: Row[] }
  | { type: 'error'; message: string }

这样做的价值是让不可能同时发生的情况，在类型层面就无法出现。

让反馈靠近问题

加载状态应该保留页面结构，错误信息需要提供重试路径，空状态则应该解释用户下一步能做什么。状态设计完成后，组件拆分通常会自然很多。