feat(frontend): redesign connections management view
Upgrade the connections page to a two-pane management console with a scope tree, search toolbar, type filters, and a denser results list while keeping existing connect, edit, test, and batch actions available. Also archive the completed ANSI terminal effects follow-up and sync frontend/backend knowledge base records for the new default terminal text effect behavior.
This commit is contained in:
yinjianm
@@ -0,0 +1 @@
|
||||
{"status":"completed","completed":5,"failed":0,"pending":0,"total":5,"done":5,"percent":100,"current":"已完成终端显式前景色字符绕过描边/阴影修复与前后端构建验证，等待归档","updated_at":"2026-03-25 06:18:00"}
|
||||
@@ -0,0 +1,66 @@
|
||||
# 变更提案: terminal-ansi-color-effects
|
||||
|
||||
## 元信息
|
||||
```yaml
|
||||
类型: 缺陷修复
|
||||
方案类型: implementation
|
||||
优先级: P1
|
||||
状态: 已完成
|
||||
状态说明: 已完成显式前景色字符绕过描边/阴影修复，并完成前后端构建验证
|
||||
创建: 2026-03-25
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 1. 需求
|
||||
|
||||
### 背景
|
||||
当前终端在启用文字描边或阴影后，ANSI 彩色输出视觉上会被统一的描边/阴影效果“压平”，看起来像所有字体都接近同一种颜色。用户希望保留黑绿主题下默认前景文字的装饰效果，但不能破坏终端原本的 ANSI 彩色语义。
|
||||
|
||||
### 目标
|
||||
- 修复终端 ANSI 彩色字符被统一描边/阴影覆盖的问题。
|
||||
- 仅让默认前景文字继续保留描边/阴影效果。
|
||||
- 将相关终端文字效果的默认开关改为开启。
|
||||
|
||||
### 约束条件
|
||||
```yaml
|
||||
范围约束: 优先限制在前端终端组件与外观默认值配置，不改 SSH 数据流和终端主题结构
|
||||
实现约束: 不改变 ANSI 颜色来源，只调整文字效果的应用范围
|
||||
兼容约束: 兼容 xterm DOM renderer 当前的 class/style 输出方式
|
||||
数据约束: 默认值变更只影响未保存该设置的新环境，不强行覆盖已有用户配置
|
||||
```
|
||||
|
||||
### 验收标准
|
||||
- [ ] 启用终端文字描边/阴影后，ANSI 彩色字符仍保留原有颜色层次
|
||||
- [ ] 默认前景色文本仍可保留描边/阴影效果
|
||||
- [ ] 终端文字效果默认开关改为开启
|
||||
- [ ] 前端构建通过
|
||||
|
||||
---
|
||||
|
||||
## 2. 方案
|
||||
|
||||
### 技术方案
|
||||
在 `Terminal.vue` 中收窄文字描边/阴影 CSS 选择器，不再对整行容器统一施加样式，而是仅对“未显式设置 ANSI 前景色”的字符片段应用样式。识别规则基于 xterm DOM renderer 的输出特征：ANSI 调色板颜色会产生 `xterm-fg-*` class，RGB 颜色会在字符节点上带 `style="color:..."`。同时在后端外观默认配置和前端缺省回退值中，把终端文字描边/阴影开关默认值改为开启。
|
||||
|
||||
### 影响范围
|
||||
```yaml
|
||||
涉及模块:
|
||||
- frontend: Terminal.vue 终端文字效果应用逻辑
|
||||
- frontend: appearance.store.ts 前端外观缺省回退
|
||||
- backend: appearance.repository.ts 外观默认值
|
||||
预计变更文件: 3
|
||||
```
|
||||
|
||||
### 风险评估
|
||||
| 风险 | 等级 | 应对 |
|
||||
|------|------|------|
|
||||
| xterm 默认前景与 ANSI 颜色识别条件不完整 | 中 | 依据 xterm DOM renderer 实际 class/style 规则设计选择器，避免整行样式覆盖 |
|
||||
| 移除行级样式后默认文本效果范围缩小 | 低 | 仅保留到字符 span 级别，确保默认文本仍有描边/阴影 |
|
||||
| 默认开关改为开启影响旧用户认知 | 低 | 仅修改默认值与前端 fallback，不覆盖数据库中已有显式设置 |
|
||||
|
||||
### 实施结果
|
||||
- `Terminal.vue` 新增显式前景色字符标记逻辑，利用 xterm DOM renderer 生成的 `xterm-fg-*` class 或内联 `style.color` 判断当前字符是否使用了显式前景色。
|
||||
- 终端文字描边和阴影样式不再对整行容器统一施加，而是仅作用于默认前景文字；显式前景色字符会自动绕过这些效果，避免 ANSI 彩色文本被“压平”。
|
||||
- `appearance.store.ts` 的前端回退值和 `appearance.repository.ts` 的后端默认值已将终端文字描边/阴影开关默认改为开启。
|
||||
- `npm run build --workspace @nexus-terminal/frontend` 与 `npm run build --workspace @nexus-terminal/backend` 均通过。
|
||||
@@ -0,0 +1,50 @@
|
||||
# 任务清单: terminal-ansi-color-effects
|
||||
|
||||
```yaml
|
||||
@feature: terminal-ansi-color-effects
|
||||
@created: 2026-03-25
|
||||
@status: completed
|
||||
@mode: R2
|
||||
```
|
||||
|
||||
## 进度概览
|
||||
|
||||
| 完成 | 失败 | 跳过 | 总数 |
|
||||
|------|------|------|------|
|
||||
| 5 | 0 | 0 | 5 |
|
||||
|
||||
---
|
||||
|
||||
## 任务列表
|
||||
|
||||
### 1. 方案与范围确认
|
||||
|
||||
- [√] 1.1 创建 ANSI 彩色字符文字效果修复方案包并锁定终端组件/外观默认值范围 | depends_on: []
|
||||
|
||||
### 2. 终端文字效果修复
|
||||
|
||||
- [√] 2.1 盘点 xterm DOM renderer 的前景色输出规则并收窄 `Terminal.vue` 的文字效果选择器 | depends_on: [1.1]
|
||||
- [√] 2.2 在 `Terminal.vue` 中实现“ANSI 彩色字符跳过描边/阴影、默认前景文字保留效果”的渲染规则 | depends_on: [2.1]
|
||||
|
||||
### 3. 默认值与验证
|
||||
|
||||
- [√] 3.1 调整前后端终端文字效果默认开关为开启 | depends_on: [2.2]
|
||||
- [√] 3.2 运行前端最小验证并同步 `.helloagents` 文档与变更记录 | depends_on: [3.1]
|
||||
|
||||
---
|
||||
|
||||
## 执行日志
|
||||
|
||||
| 时间 | 任务 | 状态 | 备注 |
|
||||
|------|------|------|------|
|
||||
| 2026-03-25 06:14 | 1.1 | 完成 | 创建 implementation 方案包，范围锁定为 Terminal.vue 的 ANSI 彩色文字效果修复与外观默认值调整 |
|
||||
| 2026-03-25 06:16 | 2.1 / 2.2 | 完成 | 确认 xterm 显式前景色会输出 `xterm-fg-*` class 或内联 `style.color`，并在 Terminal.vue 中只对默认前景字符应用描边/阴影 |
|
||||
| 2026-03-25 06:17 | 3.1 | 完成 | 将前端回退值和后端外观默认值中的终端文字描边/阴影开关默认改为开启 |
|
||||
| 2026-03-25 06:18 | 3.2 | 完成 | `npm run build --workspace @nexus-terminal/frontend` 与 `npm run build --workspace @nexus-terminal/backend` 均通过，并更新知识库记录 |
|
||||
|
||||
---
|
||||
|
||||
## 执行备注
|
||||
|
||||
- 目标不是关闭终端文字效果，而是把效果限定在默认前景文字上。
|
||||
- 默认开关改为开启仅影响未保存该项的新环境；已有显式设置保持原值。
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"status":"completed","completed":5,"failed":0,"pending":0,"total":5,"done":5,"percent":100,"current":"已完成连接管理页双栏重构与前端构建验证，等待归档","updated_at":"2026-03-25 06:45:00"}
|
||||
+67
@@ -0,0 +1,67 @@
|
||||
# 变更提案: connections-view-tree-search-redesign
|
||||
|
||||
## 元信息
|
||||
```yaml
|
||||
类型: 功能增强
|
||||
方案类型: implementation
|
||||
优先级: P1
|
||||
状态: 已完成
|
||||
状态说明: 已完成连接管理页整体交互改造，并通过前端构建验证
|
||||
创建: 2026-03-25
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 1. 需求
|
||||
|
||||
### 背景
|
||||
当前连接管理页仍是“搜索框 + 标签下拉 + 单列表”的传统结构，分标签搜索体验过于原始，和用户提供的参考图相比，缺少左侧分组树、范围切换和结果面板之间的联动。
|
||||
|
||||
### 目标
|
||||
- 将连接管理页改成更接近参考图的“两栏工作台”交互。
|
||||
- 左侧提供标签/分组树，支持全部、未标记和标签范围切换。
|
||||
- 顶部提供更完整的搜索工具条和类型筛选。
|
||||
- 右侧结果列表在保留现有连接操作能力的同时，提升信息密度和可浏览性。
|
||||
|
||||
### 约束条件
|
||||
```yaml
|
||||
范围约束: 优先限制在 ConnectionsView.vue，尽量不改动后端接口和 store 数据结构
|
||||
兼容约束: 保留现有连接、编辑、测试、批量编辑、批量删除等操作能力
|
||||
数据约束: 基于现有 tags 与 connections 数据构造树和筛选，不新增后端字段
|
||||
视觉约束: 延续项目当前黑绿主题，不引入与现有风格冲突的第三方组件
|
||||
```
|
||||
|
||||
### 验收标准
|
||||
- [ ] 连接管理页出现左侧标签/分组树、顶部搜索工具条、右侧结果列表三部分结构
|
||||
- [ ] 左侧树能切换全部、未标记和具体标签范围，并同步更新结果数
|
||||
- [ ] 顶部搜索与类型筛选能联动右侧结果列表
|
||||
- [ ] 现有连接、编辑、测试、批量编辑和批量删除能力可继续使用
|
||||
- [ ] 前端构建通过
|
||||
|
||||
---
|
||||
|
||||
## 2. 方案
|
||||
|
||||
### 技术方案
|
||||
在 `ConnectionsView.vue` 内部重组状态模型：把当前“标签下拉筛选”升级为显式的侧边栏树节点选择，把“搜索框 + 排序”升级为顶部工具条，并将原本的连接卡片列表改造成接近管理面板风格的信息行列表。树结构基于现有标签数据和连接数量即时构造，不新增后端 schema；为兼容现有能力，批量编辑、批量删除、测试、连接和编辑动作仍复用现有 store action。
|
||||
|
||||
### 影响范围
|
||||
```yaml
|
||||
涉及模块:
|
||||
- frontend: ConnectionsView.vue 主体交互与布局
|
||||
预计变更文件: 1
|
||||
```
|
||||
|
||||
### 风险评估
|
||||
| 风险 | 等级 | 应对 |
|
||||
|------|------|------|
|
||||
| 在单文件内叠加过多状态导致可维护性下降 | 中 | 按“筛选状态 / 树数据 / 列表数据 / 行为动作”分段整理 script 结构 |
|
||||
| 批量编辑模式与新列表布局交互冲突 | 低 | 保留原有选择集逻辑，只调整呈现方式 |
|
||||
| 标签树与搜索结果计数不一致 | 低 | 统一由单一过滤管线生成树计数和结果列表 |
|
||||
|
||||
### 实施结果
|
||||
- `ConnectionsView.vue` 已从“搜索框 + 标签下拉 + 单列表”改造成“左侧范围树 + 顶部工具条 + 右侧结果列表”的两栏工作台布局。
|
||||
- 左侧新增全部、未标记和标签树节点，节点计数会跟随当前类型筛选和搜索结果联动更新。
|
||||
- 顶部工具条新增类型切换、搜索、排序、批量模式开关，并保留新增连接、测试全部和连接全部能力。
|
||||
- 右侧结果区改为信息密度更高的管理列表，同时兼容连接、编辑、测试、批量编辑和批量删除。
|
||||
- `npm run build --workspace @nexus-terminal/frontend` 通过。
|
||||
+50
@@ -0,0 +1,50 @@
|
||||
# 任务清单: connections-view-tree-search-redesign
|
||||
|
||||
```yaml
|
||||
@feature: connections-view-tree-search-redesign
|
||||
@created: 2026-03-25
|
||||
@status: completed
|
||||
@mode: R2
|
||||
```
|
||||
|
||||
## 进度概览
|
||||
|
||||
| 完成 | 失败 | 跳过 | 总数 |
|
||||
|------|------|------|------|
|
||||
| 5 | 0 | 0 | 5 |
|
||||
|
||||
---
|
||||
|
||||
## 任务列表
|
||||
|
||||
### 1. 方案与范围确认
|
||||
|
||||
- [√] 1.1 创建连接管理页整体交互改造方案包并锁定为前端单页重构 | depends_on: []
|
||||
|
||||
### 2. 页面结构重构
|
||||
|
||||
- [√] 2.1 重构 `ConnectionsView.vue` 的状态模型，建立标签树、类型筛选和统一过滤管线 | depends_on: [1.1]
|
||||
- [√] 2.2 将页面改成左侧标签树 + 顶部搜索工具条 + 右侧结果列表布局 | depends_on: [2.1]
|
||||
|
||||
### 3. 交互兼容与验证
|
||||
|
||||
- [√] 3.1 将现有连接、编辑、测试、批量编辑和批量删除动作接回新布局 | depends_on: [2.2]
|
||||
- [√] 3.2 运行前端构建验证并同步 `.helloagents` 文档与变更记录 | depends_on: [3.1]
|
||||
|
||||
---
|
||||
|
||||
## 执行日志
|
||||
|
||||
| 时间 | 任务 | 状态 | 备注 |
|
||||
|------|------|------|------|
|
||||
| 2026-03-25 06:36 | 1.1 | 完成 | 创建 implementation 方案包，范围锁定为 ConnectionsView.vue 的整体交互改造 |
|
||||
| 2026-03-25 06:40 | 2.1 / 2.2 | 完成 | 在 ConnectionsView.vue 中建立标签树、类型筛选和统一过滤管线，并完成双栏管理台布局 |
|
||||
| 2026-03-25 06:43 | 3.1 | 完成 | 将连接、编辑、测试、批量编辑和批量删除动作接回新布局 |
|
||||
| 2026-03-25 06:45 | 3.2 | 完成 | `npm run build --workspace @nexus-terminal/frontend` 通过，并同步知识库记录 |
|
||||
|
||||
---
|
||||
|
||||
## 执行备注
|
||||
|
||||
- 当前优先目标是把“分标签搜索”从下拉筛选升级成显式的左侧树 + 结果面板联动。
|
||||
- 若单文件重构完成度足够，则不额外拆新组件，先保证交互升级闭环。
|
||||
Reference in New Issue
Block a user