输入框
透明底圆角输入框,聚焦亮起 accent 色聚焦环
用途
单行文本录入。用例参考:UID 输入(开窗自动聚焦并全选)、名称编辑(文字色随语义染色)。
设计规范 · macOS 26 / 27
- 对应
NSTextField圆角样式 + macOS 聚焦环(focus ring):静默态仅 5% 描边勾出轮廓,聚焦时边框换色并亮起 3px 同色光环(明#95B7FA/ 暗#2674A6,accent 蓝族)。聚焦环是 macOS 键盘焦点的法定指示,不要再叠加其它聚焦装饰。 - 透明底(
bg-transparent)让输入框融入玻璃窗体与 Win11 亚克力底,材质从其下透出。 spellcheck=false:适配 UID、角色名等专名输入,避免系统拼写红线。
状态与交互
- 高度 32px(h-8)紧凑行高;宽度由使用方经外层 class 控制(如
flex-1撑满或定宽)。 - 文字色可经 style 透传(如按稀有度 / 语义染色)。
- Enter 提交 / Esc 取消由窗口级键盘监听统一处理,输入框自身不拦截。
参考实现
Web 参考:TextInput.vue(defineModel 双绑);原生对应 NSTextField。