fix(ui): PasswordInput 眼睛移入输入框,隐藏 Edge 原生显隐按钮

- Input 新增 suffix 插槽,眼睛不再并排在外
- 隐藏 ::-ms-reveal / ::-ms-clear,避免 Edge 聚焦时出现两个眼睛
- 展示页补 suffix 示例;COMPONENTS.md / README 同步;版本 0.3.1
This commit is contained in:
2026-10-30 08:59:22 +08:00
parent 93b1e41d28
commit ebe4af3dab
9 changed files with 76 additions and 44 deletions
+5 -3
View File
@@ -188,13 +188,14 @@
- **用途**:搜索框、筛选输入、表单单行输入。
- **不该用在哪**:多行文本(未来 `Textarea`)、下拉选择(未来 `Select`)。
- **解剖**:`[icon] [input] [shortcut] [clear]`,外层容器负责边框与高度(36px、`1px solid gray-3`)。
- **解剖**:`[icon] [input] [suffix] [shortcut] [clear]`,外层容器负责边框与高度(36px、`1px solid gray-3`)。
- **Props**:
| prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `icon` | `IconName` | — | 左侧图标 |
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | 32 / 36 / 44px |
| `suffix` | `ReactNode` | — | 右侧插槽:图标按钮、单位等;排在清除按钮之前 |
| `clearable` | `boolean` | `false` | 有值且传了 `onClear` 才显示清除 |
| `onClear` | `() => void` | — | 清除回调 |
| `shortcut` | `string` | — | 右侧提示(如 `⌘K`),仅展示 |
@@ -202,7 +203,7 @@
| `className` / `style` | — | — | **作用在外层容器** |
| `…rest` | `InputHTMLAttributes` | — | `onChange` 是原生事件 |
- **规则**:与 `Button size="md"` 同高 36;focus 只把边框换成主色(**不再叠 outline**:文本框点击时也会命中 `:focus-visible`,叠环会出现「双框」,2026-10-28 修)。
- **规则**:与 `Button size="md"` 同高 36;focus 只把边框换成主色(**不再叠 outline**:文本框点击时也会命中 `:focus-visible`,叠环会出现「双框」,2026-10-28 修);`type="password"` 时隐藏 Edge 原生显隐按钮(`::-ms-reveal`),否则会和 `PasswordInput` 的眼睛叠成两个。
- **展示页**:`#inputs`
### 3.9 Card ✅
@@ -584,7 +585,7 @@
- **用途**:登录、改密这类密码输入;固定「锁图标 + 眼睛按钮」,显隐切换与无障碍名称由组件负责。
- **不该用在哪**:普通文本输入(用 `Input`);需要自己控制 `type` 的场景(直接用 `Input`)。
- **解剖**:外层 flex(`Input` 撑满 + 右侧 `IconButton`),`type` 在 `password` / `text` 间切换。
- **解剖**:`Input` + `suffix` 插槽里的 `IconButton`——眼睛在输入框**内部**右端,不是并排在外;`type` 在 `password` / `text` 间切换,Edge 原生显隐按钮已隐藏。
- **Props**:
| prop | 类型 | 默认 | 说明 |
@@ -698,3 +699,4 @@
| 2026-10-29 | `Breadcrumb` 增加 `onNavigate`(可选):传了就用 `preventDefault` 接管点击,交给 SPA 路由;不传保持普通链接。兼容性:新增可选 prop,无破坏性 |
| 2026-10-29 | 新增 `Textarea`(`rows` / `resize` / `invalid`),与 `Input` 共用边框与焦点样式。兼容性:纯新增 |
| 2026-10-29 | 新增 `PasswordInput`(`icon` / `size` / `toggle`):锁图标 + 显隐切换 + `aria-pressed`,事件语义与 `Input` 一致。兼容性:纯新增 |
| 2026-10-30 | **修复**:`PasswordInput` 的眼睛按钮移入输入框内部(`Input` 新增 `suffix` 插槽);`Input` 隐藏 Edge 原生 `::-ms-reveal` / `::-ms-clear`,避免与自带显隐按钮叠成两个眼睛。兼容性:`Input` 新增可选 prop,无破坏性;`PasswordInput` API 不变、仅外观变化 |