组件状态设计用于为单个组件完整定义状态，覆盖列表、表单、按钮等高频组件，并作为给前端的状态实现说明，避免只画静态页面。
核心原则：一个组件至少有 5 种状态，不止默认和 hover；缺失任何状态都会导致体验断裂；状态必须前端可实现、QA 可测试。
8 种核心状态：默认、悬停、聚焦（键盘 Tab，无障碍必备）、禁用、加载、成功、错误、空。高频组件另有额外状态：列表含部分加载、加载更多失败、筛选结果为空；表单含校验中、已修改未保存、已提交未确认；按钮含长按/Active 与主次文本变体；对话框含确认操作中、不可关闭；权限含无权限查看、无权限编辑（只读）、需要登录。
状态设计模板以表格定义组件的状态、触发条件、视觉变化与行为。按钮含 Default、Hover、Focus、Active、Disabled、Loading；输入框含 Empty、Focus、Filled、Validating、Valid、Invalid、Disabled；列表含 Loading、Has Data、Empty、Filter Empty、Error、Loading More、End、No Permission；对话框含 Closed、Opening、Open、Confirming、Closing。
工作流程：列出所需组件、应用 8 种状态清单、删除不适用状态、补充组件特有状态、定义触发条件与状态转换、输出状态对照表，再转交 design-handoff 交接给前端。质量自检关注是否覆盖 8 种核心状态、组件特有状态、触发条件、视觉变化、状态转换、无障碍 Focus、错误可恢复。
常见坑：只画 Default 和 Hover，忽略 Loading/Error/Empty；Disabled 无原因；空状态无引导；错误不可恢复；Loading 无反馈；不区分筛选无结果与完全无数据；没有 Focus 状态；状态转换不清。
配套模板包括 templates/interaction-state-template.md 与 templates/empty-state-pattern-template.md。上游依赖 page-structure，平行协作 atomic-design、accessibility、design-tokens，下游交 design-handoff。