feat(ui): add PasswordInput(锁图标 + 显隐切换)

- Input + IconButton 组合,type 切换、aria-pressed、尺寸对齐内建
- 展示页补「密码框」示例与 props 表;COMPONENTS.md / README 同步
- 版本 0.3.0
This commit is contained in:
2026-10-29 20:46:07 +08:00
parent 0d5d7753e2
commit 93b1e41d28
8 changed files with 147 additions and 5 deletions
+21
View File
@@ -21,6 +21,7 @@
| `IconButton` | L2 | ✅ | 圆形图标按钮(28 / 36 / 44) | `label`(必填) `icon` `variant` `size` `spinning` |
| `Input` | L2 | ✅ | 组合式输入框 | `icon` `clearable` `onClear` `shortcut` `inputRef` |
| `Textarea` | L2 | ✅ | 多行文本(Markdown / 简介) | `rows` `resize` `invalid` |
| `PasswordInput` | L2 | ✅ | 密码输入(锁图标 + 显隐切换) | `icon` `size` `toggle` |
| `Switch` | L2 | ✅ | 即时生效的开关 | `checked` `onChange` `size` `label` |
| `Checkbox` | L2 | ✅ | 复选框(多选 / 确认) | `checked` `onChange` `label` |
| `RadioGroup` | L2 | ✅ | 互斥单选组 | `options` `value` `onChange` `direction` |
@@ -77,6 +78,7 @@
| 主操作 | `Button`(一页一个 primary) | 多个 primary 并列 |
| 登录 / 筛选这类主操作 | `Button shape="pill"` | 圆角按钮凑合 |
| 只有图标的操作 | `IconButton label="…"` | `<button><Icon /></button>` |
| 密码输入(登录 / 改密) | `PasswordInput`(锁图标 + 显隐切换) | 自己拼 `Input` + 眼睛按钮(容易漏掉切换) |
| 分隔内容块 | `Divider` | `border-top` 手写 |
| 长内容回到顶部 | `ScrollTop` | 自己写 fixed 按钮 |
@@ -578,6 +580,24 @@
- **规则**:焦点只用边框变色,不叠 outline(与 `Input` 一致);`invalid` 要和错误文案一起用。
- **展示页**:`#inputs`
### 3.42 PasswordInput ✅
- **用途**:登录、改密这类密码输入;固定「锁图标 + 眼睛按钮」,显隐切换与无障碍名称由组件负责。
- **不该用在哪**:普通文本输入(用 `Input`);需要自己控制 `type` 的场景(直接用 `Input`)。
- **解剖**:外层 flex(`Input` 撑满 + 右侧 `IconButton`),`type` 在 `password` / `text` 间切换。
- **Props**:
| prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `icon` | `IconName \| null` | `'lock_line'` | 左侧图标;`null` 去掉 |
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | 32 / 36 / 44,与 `Input` 一致 |
| `toggle` | `boolean` | `true` | 是否显示右侧显隐按钮 |
| `className` / `style` | `string` / `CSSProperties` | — | 作用在最外层 |
| `…rest` | `InputHTMLAttributes` | — | 透传原生属性(`type` / `size` / `icon` 由组件接管) |
- **规则**:`onChange` 是原生事件(与 `Input` 一致),Enter 提交用 `onKeyDown`;切换按钮必须带 `aria-pressed` 与「显示/隐藏密码」名称,焦点环不得移除。
- **展示页**:`#inputs`
---
## 4. 组合模式(不进库,但必须照这个拼)
@@ -677,3 +697,4 @@
| 2026-10-28 | **补齐剩余能力**:新增 `Image`(比例 / 填充 / 失败降级)与 `FormField`(标签 + 提示 + 错误,不做校验);`Button` 增加 `size="lg"`(44);展示页补 `Title weight`、`Avatar xl/tone/icon`、`Cover lift`、`Menu itemHeight`、`Layout screen/hideScrollbar`、`Input size`、`FormField` 示例;新增 `themes/example.css` 主题示例(只改变量) |
| 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` 一致。兼容性:纯新增 |