《快缩短网址 · 表单输入框的十二种呼吸》

一、呼吸的节奏
在「suo.run」的后台，每一次输入都是一次短跑。我们把输入框拆成十二种「呼吸」：
1. 未呼吸（空）
2. 已呼吸（有值）
3. 屏息（只读不可改）
4. 借息（系统带入，可改）
5. 窒息（禁用）
6. 悬息（hover）
7. 深吸（focus）
8. 吐息（清空）
9. 屏息加载（搜索中）
10. 长吸（展开）
11. 轻喘（警告）
12. 叹息（错误）

二、只读的双面
系统算出的「总人数」是屏息；用户可改、但默认借息。借息仍保留白色底，只在右侧缀一条 1px 的虚线，暗示「可编辑」。

三、悬停与聚焦的涟漪
悬停：边框由 #D0D5DD 过渡至 #3B82F6，时长 180ms。
聚焦：外扩 4px 的 12% 透明度蓝晕，光标同步为品牌蓝。
两者叠加，像湖面一圈圈荡开的涟漪。



四、加载的轻舞
搜索时，输入框右侧出现 16px 的圆环加载器，颜色与聚焦蓝一致。网络不佳时，它旋转 2 秒后自动替换为「稍等，正在飞向 suo.run 云端…」的淡色提示。



五、一键清空
当输入长度 >0，右侧淡入 14px 的「×」。点击即清空，同时触发一次 120ms 的缩小再放大微动画，像轻轻抖落灰尘。



六、展开的卷轴
多行文本超过三行时，右下角出现「↗」图标。悬停后，输入框自下而上舒展为 120px 高，背景透出 2% 的灰，仿佛卷轴缓缓铺开。

七、暗示的三重奏
• 框内：仅一句「请输入」，字体 13px、#9CA3AF。
• 框外：字数、格式、示例，皆可放。
• 图标：问号悬停弹出 8 秒自动消失的轻气泡，含外链「suo.run/help」。

八、验证的色谱
正确：静默无声，右侧仅出现 14px 的「✓」。
错误：边框转 #EF4444，下方 12px 红字提示，无图标，不抢戏。
警告：边框保持，文字转 #F59E0B，并配 14px 黄三角，轻敲用户肩膀而非拍桌。

九、字数的三种刻度
单行输入：
1. 末尾计数「0/20」；超限变红。
2. 框外提示「限 20 字」；超限自动切换错误态。
3. 框内提示「限 20 字」；仅用于极简场景，不可与其他提示共存。

十、尺寸的呼吸
高：40/32/24 px，对应「标题」「正文」「紧凑」。
宽：以 8 pt 为栅格，32/64/96/128/160/192/240/320 px 八档，像八度音阶，随业务节奏自由组合。



十一、尾声
在「suo.run」，我们把输入框做成会呼吸的精灵：
它屏息时安静，借息时谦逊，悬停时眨眼，聚焦时闪光，清空时抖肩，加载时旋转，展开时舒卷，验证时低语。
愿每一次短跑，都能优雅抵达终点。