Files

T

yinjianm 8ce007a305 重构(前端): 持久化快速命令排序和密码切换

添加持久化排序字段并重新排序快速命令和标签的端点，更新前端以支持手动拖放排序，并为连接和凭据表单添加密码可见性切换。此外，将 SSH 连接测试作为连接列表中的默认操作，并刷新相关模块文档和更改日志。

2026-04-19 02:50:44 +08:00

5.1 KiB

Raw Blame History

变更提案: connection-card-default-test-button

元信息

类型: 修复增强
方案类型: implementation
优先级: P2
状态: 已完成
状态说明: SSH 连接卡片默认显示“连接 / 测试 / 更多”，并从更多菜单移除重复测试入口
创建: 2026-04-19

1. 需求

背景

连接管理页当前已将连接卡片行内操作收敛为“连接”主按钮和“更多”菜单，但 SSH 连接常用的单连接“测试”仍被藏在更多菜单里。用户当前希望默认直接看到“连接 / 测试 / 更多”三段式操作区，减少进入二级菜单才能测试的额外点击。

目标

让 SSH 连接卡片默认显示“连接 / 测试 / 更多”三个按钮。
复用现有单连接测试状态、文案和禁用逻辑，不新增后端接口或测试链路。
保持非 SSH 连接卡片的默认操作区不变，避免把不支持的测试入口暴露出来。

约束条件

范围约束: 仅调整 packages/frontend/src/views/ConnectionsView.vue 的连接卡片操作区与相关知识库记录
交互约束: “测试”默认显示仅适用于 SSH 连接，RDP/VNC 仍不提供默认测试按钮
实现约束: 必须复用现有 getSingleTestButtonInfo() 与 handleTestSingleConnection() 逻辑
兼容约束: 保持当前 flex-wrap 布局、主题 token 和批量模式下的现有交互行为

验收标准

SSH 连接卡片默认操作区显示“连接 / 测试 / 更多”
SSH 连接的“测试”状态继续显示既有的测试中 spinner、禁用态与 title
更多菜单不再重复显示 SSH 的“测试”项，非 SSH 连接的默认按钮区保持现状
前端构建通过，连接管理页相关知识库描述已同步

2. 方案

技术方案

在 ConnectionsView.vue 的连接卡片操作区中，将原本只在 SSH 更多菜单里出现的单连接“测试”操作提升到行内按钮区，插入到“连接”和“更多”之间，并继续通过 getSingleTestButtonInfo() 复用文本、图标、禁用状态和提示文案，通过 handleTestSingleConnection() 复用既有测试执行链路。与此同时，从 SSH 的更多菜单中移除重复的“测试”项，避免同一动作出现两个入口。

影响范围

涉及模块:
  - 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 的响应式布局策略

5.1 KiB Raw Blame History