yinjianm
8ce007a305
添加持久化排序字段并重新排序快速命令和标签的端点，更新前端以支持手动拖放排序，并为连接和凭据表单添加密码可见性切换。此外，将 SSH 连接测试作为连接列表中的默认操作，并刷新相关模块文档和更改日志。
122 lines
6.2 KiB
Markdown
122 lines
6.2 KiB
Markdown
# 变更提案: connection-password-visibility-toggle
|
||
|
||
## 元信息
|
||
```yaml
|
||
类型: 优化
|
||
方案类型: implementation
|
||
优先级: P2
|
||
状态: 已确认
|
||
创建: 2026-04-19
|
||
```
|
||
|
||
---
|
||
|
||
## 1. 需求
|
||
|
||
### 背景
|
||
连接新增/编辑表单以及登录凭证管理弹窗中的密码输入当前只能以掩码形式录入，用户在手工填写时无法即时核对内容是否正确。用户明确要求仅在前端输入端增加“小眼睛”显隐切换，用于检查自己刚输入的密码，而不是让表单默认返回明文或让后端补发已有密码。
|
||
|
||
### 目标
|
||
- 在连接新增/编辑表单的直填密码输入框中增加显隐切换，覆盖 SSH 密码、RDP 密码和 VNC 密码。
|
||
- 在登录凭证管理弹窗中增加同样的显隐切换，覆盖 SSH 密码与通用密码输入。
|
||
- 保持默认 `password` 掩码行为不变，不改现有提交、测试、保存和后端接口链路。
|
||
|
||
### 约束条件
|
||
```yaml
|
||
时间约束: 本轮限定为前端增量改动，不扩展到批量编辑、代理配置或登录页
|
||
性能约束: 仅增加本地响应式布尔状态，不引入额外依赖
|
||
兼容性约束: 不改变现有表单校验、编辑模式留空保留密码逻辑和已保存凭证模式
|
||
业务约束: 不请求后端返回已有明文密码，不改变默认数据返回策略
|
||
```
|
||
|
||
### 验收标准
|
||
- [ ] 连接新增/编辑表单的直填密码字段右侧存在可点击的小眼睛按钮，默认隐藏，点击后可切换明文显示。
|
||
- [ ] 登录凭证管理弹窗中的密码字段具备相同的显隐切换能力，且不影响原有保存逻辑。
|
||
- [ ] 显隐切换仅作用于当前输入框的本地显示状态，不改 API payload 结构，不新增后端接口返回。
|
||
- [ ] 前端构建校验通过；若出现与本次无关的既有问题，需在执行记录中明确标注。
|
||
|
||
---
|
||
|
||
## 2. 方案
|
||
|
||
### 技术方案
|
||
在 `AddConnectionFormAuth.vue` 与 `LoginCredentialManagementModal.vue` 内分别维护局部的密码可见状态，通过动态切换 input 的 `type`（`password` / `text`）实现显隐。每个密码输入框右侧内嵌一个次级 icon 按钮，按钮文案走 i18n，点击后只改变当前字段的显示方式，不写入 store、不触发额外请求，也不改变既有表单数据结构。
|
||
|
||
### 影响范围
|
||
```yaml
|
||
涉及模块:
|
||
- frontend: 连接认证表单与登录凭证管理弹窗的输入交互增强
|
||
- frontend-i18n: 显隐密码按钮的中英日文案补充
|
||
预计变更文件: 5
|
||
```
|
||
|
||
### 风险评估
|
||
| 风险 | 等级 | 应对 |
|
||
|------|------|------|
|
||
| 眼睛按钮被当成表单提交按钮，导致误触提交 | 中 | 所有切换按钮显式使用 `type="button"` |
|
||
| 在现有表单布局中加入尾部按钮后造成输入框样式错位 | 中 | 复用现有边框/背景 token，采用相同高度的绝对定位尾部按钮 |
|
||
| 编辑态切换后保留上一次可见状态，影响下一次打开表单体验 | 低 | 在表单重置、取消或切换编辑对象时回收为默认隐藏 |
|
||
|
||
---
|
||
|
||
## 3. 技术设计（可选）
|
||
|
||
N/A。本次不涉及架构、API 或数据模型变更。
|
||
|
||
---
|
||
|
||
## 4. 核心场景
|
||
|
||
> 执行完成后同步到对应模块文档
|
||
|
||
### 场景: 连接表单核对密码输入
|
||
**模块**: frontend
|
||
**条件**: 用户在新增连接或编辑连接时使用直填认证来源，并在 SSH / RDP / VNC 密码字段中录入密码。
|
||
**行为**: 用户点击密码框右侧的小眼睛按钮，在掩码和明文显示之间切换，以便核对当前输入内容。
|
||
**结果**: 用户可以在不改变默认安全策略的前提下确认自己录入的密码是否正确。
|
||
|
||
### 场景: 登录凭证管理时核对密码输入
|
||
**模块**: frontend
|
||
**条件**: 用户在登录凭证管理弹窗中新增或编辑密码型凭证。
|
||
**行为**: 用户点击密码输入框右侧的小眼睛按钮查看或隐藏当前输入的密码。
|
||
**结果**: 用户能够在保存前自检输入内容，同时原有保存和校验逻辑保持不变。
|
||
|
||
---
|
||
|
||
## 5. 技术决策
|
||
|
||
> 本方案涉及的技术决策，归档后成为决策的唯一完整记录
|
||
|
||
### connection-password-visibility-toggle#D001: 在现有表单内局部实现密码显隐切换
|
||
**日期**: 2026-04-19
|
||
**状态**: ✅采纳
|
||
**背景**: 新增/编辑连接与登录凭证管理都需要密码可见性切换，但两处表单结构和字段命名并不完全一致。
|
||
**选项分析**:
|
||
| 选项 | 优点 | 缺点 |
|
||
|------|------|------|
|
||
| A: 抽离公共密码输入组件 | 逻辑集中、后续可复用 | 本轮只是局部交互增强，会引入额外抽象和迁移成本 |
|
||
| B: 在两个现有组件中局部实现显隐状态 | 修改范围小，能最大限度保持既有表单行为和样式结构 | 两处按钮结构会有少量重复 |
|
||
**决策**: 选择方案 B
|
||
**理由**: 本轮目标明确且影响范围小，局部实现能最快落地，并降低对现有认证流程的扰动。
|
||
**影响**: 仅影响前端连接表单与登录凭证管理弹窗，不涉及 store、API 和后端数据结构。
|
||
|
||
---
|
||
|
||
## 6. 成果设计
|
||
|
||
### 设计方向
|
||
- **美学基调**: 延续现有连接表单的克制型工具化界面，在输入框尾部加入低干扰、可发现的小眼睛操作，不打断原表单阅读节奏。
|
||
- **记忆点**: 密码框右侧内嵌的眼睛切换按钮，作为“录入后可即时自检”的明确交互锚点。
|
||
- **参考**: 延续项目现有表单 token、边框和 hover/focus 行为，不额外引入新的视觉体系。
|
||
|
||
### 视觉要素
|
||
- **配色**: 继续使用现有 `bg-background`、`border-border`、`text-text-secondary`、`text-foreground` 与 `focus:ring-primary` 体系。
|
||
- **字体**: 沿用项目现有全局字体与表单字号，不新增展示字体或排版层级。
|
||
- **布局**: 输入框保持单行主结构，右侧以内嵌尾部按钮承载显隐操作，避免新增独立行或破坏表单宽度。
|
||
- **动效**: 仅保留项目已有 hover/focus 状态反馈，不新增独立动画。
|
||
- **氛围**: 不改变当前表单面板氛围，保持与现有认证区和管理弹窗的一致性。
|
||
|
||
### 技术约束
|
||
- **可访问性**: 显隐按钮需提供可读 title/aria-label，确保仅靠图标也能被辅助工具识别。
|
||
- **响应式**: 在现有表单宽度下保持按钮内嵌，不引入移动端换行或遮挡输入内容。
|