一个完善的组件至少要考虑这 10 种状态👇
① Default 默认态 正常展示状态，这个大家都会做
② Hover 悬停态（PC端） 鼠标移上去的反馈：微变色、出现下划线、显示提示信息
③ Pressed / Active 按下态 点击瞬间的反馈：颜色加深、轻微缩小，告诉用户"点到了"
④ Focused 聚焦态 用键盘 Tab 导航到该元素时的状态。通常是一圈蓝色边框，无障碍设计的核心
⑤ Disabled 禁用态 灰色 + 不可点击。要让用户看得出这里有个操作但现在不可用
⑥ Loading 加载态 正在处理中。按钮可以是转圈动画，输入框可以是 shimmer 效果
⑦ Error 错误态 输入校验失败。红色边框 + 红色提示文案，要告诉用户错在哪怎么改
⑧ Success 成功态 操作完成。绿色对勾、文案变化、或轻量 Toast 提示
⑨ Empty 空态 没有内容时显示什么。列表为空、搜索无结果、收藏夹空白…
⑩ Skeleton 骨架态 内容加载前的占位状态。灰色块 + shimmer 动效
💡 自查技巧：
画一个组件时，把这 10 个状态当 checklist 过一遍。不是每个组件都需要所有状态，但你必须有意识地判断"这个状态需不需要"
状态越完善，开发越省心，上线后的体验越好✅
