yinjianm
8ce007a305
添加持久化排序字段并重新排序快速命令和标签的端点，更新前端以支持手动拖放排序，并为连接和凭据表单添加密码可见性切换。此外，将 SSH 连接测试作为连接列表中的默认操作，并刷新相关模块文档和更改日志。
109 lines
5.1 KiB
Markdown
109 lines
5.1 KiB
Markdown
# 变更提案: connection-card-default-test-button
|
|
|
|
## 元信息
|
|
```yaml
|
|
类型: 修复增强
|
|
方案类型: implementation
|
|
优先级: P2
|
|
状态: 已完成
|
|
状态说明: SSH 连接卡片默认显示“连接 / 测试 / 更多”，并从更多菜单移除重复测试入口
|
|
创建: 2026-04-19
|
|
```
|
|
|
|
---
|
|
|
|
## 1. 需求
|
|
|
|
### 背景
|
|
连接管理页当前已将连接卡片行内操作收敛为“连接”主按钮和“更多”菜单，但 SSH 连接常用的单连接“测试”仍被藏在更多菜单里。用户当前希望默认直接看到“连接 / 测试 / 更多”三段式操作区，减少进入二级菜单才能测试的额外点击。
|
|
|
|
### 目标
|
|
- 让 SSH 连接卡片默认显示“连接 / 测试 / 更多”三个按钮。
|
|
- 复用现有单连接测试状态、文案和禁用逻辑，不新增后端接口或测试链路。
|
|
- 保持非 SSH 连接卡片的默认操作区不变，避免把不支持的测试入口暴露出来。
|
|
|
|
### 约束条件
|
|
```yaml
|
|
范围约束: 仅调整 packages/frontend/src/views/ConnectionsView.vue 的连接卡片操作区与相关知识库记录
|
|
交互约束: “测试”默认显示仅适用于 SSH 连接，RDP/VNC 仍不提供默认测试按钮
|
|
实现约束: 必须复用现有 getSingleTestButtonInfo() 与 handleTestSingleConnection() 逻辑
|
|
兼容约束: 保持当前 flex-wrap 布局、主题 token 和批量模式下的现有交互行为
|
|
```
|
|
|
|
### 验收标准
|
|
- [x] SSH 连接卡片默认操作区显示“连接 / 测试 / 更多”
|
|
- [x] SSH 连接的“测试”状态继续显示既有的测试中 spinner、禁用态与 title
|
|
- [x] 更多菜单不再重复显示 SSH 的“测试”项，非 SSH 连接的默认按钮区保持现状
|
|
- [x] 前端构建通过，连接管理页相关知识库描述已同步
|
|
|
|
---
|
|
|
|
## 2. 方案
|
|
|
|
### 技术方案
|
|
在 `ConnectionsView.vue` 的连接卡片操作区中，将原本只在 SSH 更多菜单里出现的单连接“测试”操作提升到行内按钮区，插入到“连接”和“更多”之间，并继续通过 `getSingleTestButtonInfo()` 复用文本、图标、禁用状态和提示文案，通过 `handleTestSingleConnection()` 复用既有测试执行链路。与此同时，从 SSH 的更多菜单中移除重复的“测试”项，避免同一动作出现两个入口。
|
|
|
|
### 影响范围
|
|
```yaml
|
|
涉及模块:
|
|
- frontend: ConnectionsView.vue
|
|
- frontend: .helloagents/modules/frontend.md
|
|
- workspace-root: .helloagents/CHANGELOG.md 与 archive 归档记录
|
|
预计变更文件: 5-7
|
|
```
|
|
|
|
### 风险评估
|
|
| 风险 | 等级 | 应对 |
|
|
|------|------|------|
|
|
| 行内按钮增加后在窄宽度卡片上更容易换行 | 低 | 保持现有 `flex flex-wrap` 布局与紧凑按钮尺寸，让小屏自动折行 |
|
|
| 若保留菜单里的测试项会导致同一动作重复暴露 | 低 | 将 SSH 更多菜单中的测试入口一并移除，只保留默认按钮 |
|
|
| 非 SSH 连接误显示测试入口会造成无效操作认知 | 低 | 明确限定 `conn.type === 'SSH'` 时才显示默认测试按钮 |
|
|
|
|
---
|
|
|
|
## 3. 技术设计（可选）
|
|
|
|
> N/A，本次不涉及架构、接口或数据模型变更。
|
|
|
|
---
|
|
|
|
## 4. 核心场景
|
|
|
|
### 场景: SSH 连接卡片的默认操作区
|
|
**模块**: frontend
|
|
**条件**: 用户进入连接管理页，列表中存在 SSH 类型连接
|
|
**行为**: 每张 SSH 连接卡片默认显示“连接 / 测试 / 更多”三个按钮，点击测试后继续走现有单连接测试逻辑
|
|
**结果**: 用户无需进入更多菜单即可直接测试 SSH 连接
|
|
|
|
### 场景: 非 SSH 连接卡片保持现状
|
|
**模块**: frontend
|
|
**条件**: 用户进入连接管理页，列表中存在 RDP 或 VNC 类型连接
|
|
**行为**: 卡片默认操作区仍保持“连接 / 更多”结构，不显示无效的测试按钮
|
|
**结果**: 非 SSH 连接不会暴露不支持的测试入口
|
|
|
|
---
|
|
|
|
## 5. 技术决策
|
|
|
|
> 本方案不涉及新的架构级技术决策；沿用现有连接测试能力与连接管理页设计体系。
|
|
|
|
---
|
|
|
|
## 6. 成果设计
|
|
|
|
### 设计方向
|
|
- **美学基调**: 延续当前连接管理页的深色运维控制台风格，通过“一主两辅”的按钮层级表达操作优先级，保持克制而明确的操作密度
|
|
- **记忆点**: SSH 连接卡片在行尾固定呈现“连接 / 测试 / 更多”的三按钮条，常用操作一眼可达
|
|
- **参考**: 现有 `ConnectionsView.vue` 卡片样式与主题 token 体系
|
|
|
|
### 视觉要素
|
|
- **配色**: 保留主操作按钮 `bg-button` / `text-button-text`，测试与更多按钮继续使用 `bg-background`、`border-border`、`hover:bg-border`
|
|
- **字体**: 沿用项目现有界面字体体系与 `text-sm` 层级，不引入新的字体表达
|
|
- **布局**: 维持右侧按钮区 `flex-wrap`，在主按钮和更多菜单之间插入同级的测试按钮，保证桌面端横排、窄宽度时可自然换行
|
|
- **动效**: 延续现有 hover 过渡和测试中 spinner 反馈，不额外引入新动效
|
|
- **氛围**: 保持当前卡片式深色面板与边框层次，不改变页面整体视觉基调
|
|
|
|
### 技术约束
|
|
- **可访问性**: 按钮需保留明确文本标签、title 与禁用态视觉反馈
|
|
- **响应式**: 不破坏当前 `justify-start xl:justify-end` 与 `flex-wrap` 的响应式布局策略
|