重构(前端): 持久化快速命令排序和密码切换
添加持久化排序字段并重新排序快速命令和标签的端点，更新前端以支持手动拖放排序，并为连接和凭据表单添加密码可见性切换。此外，将 SSH 连接测试作为连接列表中的默认操作，并刷新相关模块文档和更改日志。
This commit is contained in:
yinjianm
+1
@@ -0,0 +1 @@
|
||||
{"status":"completed","completed":4,"failed":0,"pending":0,"total":4,"done":4,"percent":100,"current":"连接卡片默认测试按钮调整已完成，待归档方案包","updated_at":"2026-04-19 02:18:00"}
|
||||
+108
@@ -0,0 +1,108 @@
|
||||
# 变更提案: 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` 的响应式布局策略
|
||||
+50
@@ -0,0 +1,50 @@
|
||||
# 任务清单: connection-card-default-test-button
|
||||
|
||||
> **@status:** completed | 2026-04-19 02:18
|
||||
|
||||
```yaml
|
||||
@feature: connection-card-default-test-button
|
||||
@created: 2026-04-19
|
||||
@status: completed
|
||||
@mode: R2
|
||||
```
|
||||
|
||||
## 进度概览
|
||||
|
||||
| 完成 | 失败 | 跳过 | 总数 |
|
||||
|------|------|------|------|
|
||||
| 4 | 0 | 0 | 4 |
|
||||
|
||||
---
|
||||
|
||||
## 任务列表
|
||||
|
||||
### 1. 方案与范围确认
|
||||
|
||||
- [√] 1.1 创建连接卡片默认测试按钮方案包并锁定范围到连接管理页行内操作区 | depends_on: []
|
||||
|
||||
### 2. 前端交互调整
|
||||
|
||||
- [√] 2.1 将 SSH 连接卡片的“测试”操作提升为默认行内按钮，顺序调整为“连接 / 测试 / 更多” | depends_on: [1.1]
|
||||
- [√] 2.2 移除 SSH 更多菜单中的重复“测试”入口，并保持非 SSH 连接卡片默认操作区不变 | depends_on: [2.1]
|
||||
|
||||
### 3. 验证与同步
|
||||
|
||||
- [√] 3.1 运行前端构建并做连接管理页按钮结构验证，同步 frontend 模块文档、CHANGELOG 与归档记录 | depends_on: [2.2]
|
||||
|
||||
---
|
||||
|
||||
## 执行日志
|
||||
|
||||
| 时间 | 任务 | 状态 | 备注 |
|
||||
|------|------|------|------|
|
||||
| 2026-04-19 02:10 | 1.1 | 完成 | 创建 implementation 方案包，范围锁定为 SSH 连接卡片默认按钮区调整 |
|
||||
| 2026-04-19 02:13 | 2.1 | 完成 | 在 `ConnectionsView.vue` 中将 SSH 单连接测试提升为默认行内按钮，位于“连接”和“更多”之间 |
|
||||
| 2026-04-19 02:14 | 2.2 | 完成 | 删除 SSH 更多菜单中的重复“测试”入口，保留非 SSH 卡片为“连接 / 更多” |
|
||||
| 2026-04-19 02:18 | 3.1 | 完成 | `npm run build --workspace @nexus-terminal/frontend` 通过；预览环境因缺少后端认证接口仅验证到应用启动与路由守卫重定向 |
|
||||
|
||||
---
|
||||
|
||||
## 执行备注
|
||||
|
||||
> 用户已确认仅 SSH 连接默认显示“测试”按钮，RDP/VNC 保持当前“连接 / 更多”结构。运行态预览可启动，但由于本地预览缺少后端认证接口，`/connections` 会被路由守卫重定向到 `/login`，因此本次对连接卡片交互的最终运行态确认仍需在有登录态的环境中补一次人工目视检查。
|
||||
Reference in New Issue
Block a user