admin/nexus-terminal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): redesign connections management view

Browse Source 
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
2026-03-25 21:50:26 +08:00
parent 7e430cb983
commit 6553739c08
14 changed files with 1021 additions and 578 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.helloagents/CHANGELOG.md
+6
View File
@@ -12,7 +12,13 @@
- 方案: [202603250532_quickcommands-theme-alignment](archive/2026-03/202603250532_quickcommands-theme-alignment/)
- **[frontend]**: 修复终端标签切换后的视口恢复逻辑，贴底终端重新激活后自动贴底，上翻终端保留历史位置 — by yinjianm
- 方案: [202603250547_terminal-tab-scroll-restore](archive/2026-03/202603250547_terminal-tab-scroll-restore/)
- **[frontend]**: 修复终端文字效果对 ANSI 彩色输出的覆盖问题，仅让默认前景文字保留描边/阴影效果 — by yinjianm
- 方案: [202603250614_terminal-ansi-color-effects](archive/2026-03/202603250614_terminal-ansi-color-effects/)
### 新增
- **[frontend]**: 将“黑暗模式”预设与终端默认主题统一调整为黑绿夜间风格 — by yinjianm
- 方案: [202603250603_dark-green-night-theme](archive/2026-03/202603250603_dark-green-night-theme/)
- **[backend]**: 将终端文字描边与阴影开关的外观默认值改为开启，与前端回退值保持一致 — by yinjianm
- 方案: [202603250614_terminal-ansi-color-effects](archive/2026-03/202603250614_terminal-ansi-color-effects/)
- **[frontend]**: 将连接管理页升级为左侧标签树、顶部搜索工具条和右侧结果列表的双栏管理台 — by yinjianm
- 方案: [202603250636_connections-view-tree-search-redesign](archive/2026-03/202603250636_connections-view-tree-search-redesign/)
.helloagents/INDEX.md
+1 -1
View File
@@ -31,7 +31,7 @@
```yaml
kb_version: 2.3.7
最后更新: 2026-03-25 06:06
最后更新: 2026-03-25 06:46
模块数量: 4
待执行方案: 0
```
.helloagents/archive/2026-03/202603250614_terminal-ansi-color-effects/.status.json
+1
View File
@@ -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"}
.helloagents/plan/202603250614_terminal-ansi-color-effects/proposal.md → .helloagents/archive/2026-03/202603250614_terminal-ansi-color-effects/proposal.md
+8 -2
View File
@@ -5,8 +5,8 @@
类型: 缺陷修复
方案类型: implementation
优先级: P1
状态: 进行中
状态说明: 已确认 ANSI 彩色字符需绕过描边/阴影，同时将终端文字效果默认开关改为开启
状态: 已完成
状态说明: 已完成显式前景色字符绕过描边/阴影修复，并完成前后端构建验证
创建: 2026-03-25
```
@@ -58,3 +58,9 @@
| 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` 均通过。
.helloagents/archive/2026-03/202603250614_terminal-ansi-color-effects/tasks.md
+50
View File
@@ -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` 均通过，并更新知识库记录 |
---
## 执行备注
- 目标不是关闭终端文字效果，而是把效果限定在默认前景文字上。
- 默认开关改为开启仅影响未保存该项的新环境；已有显式设置保持原值。
.helloagents/archive/2026-03/202603250636_connections-view-tree-search-redesign/.status.json
+1
View File
@@ -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"}
.helloagents/archive/2026-03/202603250636_connections-view-tree-search-redesign/proposal.md
+67
View File
@@ -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` 通过。
.helloagents/archive/2026-03/202603250636_connections-view-tree-search-redesign/tasks.md
+50
View File
@@ -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` 通过，并同步知识库记录 |
---
## 执行备注
- 当前优先目标是把“分标签搜索”从下拉筛选升级成显式的左侧树 + 结果面板联动。
- 若单文件重构完成度足够，则不额外拆新组件，先保证交互升级闭环。
.helloagents/archive/_index.md
+4
View File
@@ -11,6 +11,8 @@
| 202603250532 | quickcommands-theme-alignment | implementation | frontend | - | ✅完成 |
| 202603250547 | terminal-tab-scroll-restore | implementation | frontend | - | ✅完成 |
| 202603250603 | dark-green-night-theme | implementation | frontend, backend | - | ✅完成 |
| 202603250614 | terminal-ansi-color-effects | implementation | frontend, backend | - | ✅完成 |
| 202603250636 | connections-view-tree-search-redesign | implementation | frontend | - | ✅完成 |
| 202603251200 | workspace-workbench-monitor | implementation | frontend, backend | workspace-workbench-monitor#D001 | ✅完成 |
## 按月归档
@@ -20,6 +22,8 @@
- [202603250532_quickcommands-theme-alignment](./2026-03/202603250532_quickcommands-theme-alignment/) - 统一快捷指令视图按钮主题适配，移除残留硬编码 hover 色值
- [202603250547_terminal-tab-scroll-restore](./2026-03/202603250547_terminal-tab-scroll-restore/) - 修复终端标签切换后的贴底/历史滚动恢复逻辑
- [202603250603_dark-green-night-theme](./2026-03/202603250603_dark-green-night-theme/) - 将黑暗模式预设与终端默认主题统一调整为黑绿夜间风格
- [202603250614_terminal-ansi-color-effects](./2026-03/202603250614_terminal-ansi-color-effects/) - 修复终端文字效果覆盖 ANSI 彩色输出的问题，并将文字效果默认开关改为开启
- [202603250636_connections-view-tree-search-redesign](./2026-03/202603250636_connections-view-tree-search-redesign/) - 将连接管理页升级为左侧标签树、顶部搜索工具条和右侧结果列表的双栏管理台
- [202603251200_workspace-workbench-monitor](./2026-03/202603251200_workspace-workbench-monitor/) - `/workspace` 改为三栏 Workbench 布局，并新增开机累计流量监控
## 结果状态说明
.helloagents/modules/backend.md
+2 -2
View File
@@ -41,8 +41,8 @@
### 外观默认值
**条件**: 数据库初始化、外观设置重置或前后端默认主题定义调整。
**行为**: `appearance.repository.ts` 负责写入默认 UI 外观设置，`config/default-themes.ts` 保持与前端同名默认主题定义一致，作为默认外观与终端主题的镜像基线。
**结果**: 前后端在默认主题和回退值上保持一致，避免前端回退与后端初始化出现风格漂移。
**行为**: `appearance.repository.ts` 负责写入默认 UI 外观设置，`config/default-themes.ts` 保持与前端同名默认主题定义一致，作为默认外观与终端主题的镜像基线；当前默认外观中终端文字描边和阴影开关默认开启，但仅作为“无保存值时”的回退，不主动覆盖数据库里已有用户配置。
**结果**: 前后端在默认主题、终端文字效果开关和回退值上保持一致，避免前端回退与后端初始化出现风格漂移。
### 状态监控
**条件**: 前端工作区通过 WebSocket 订阅服务器状态。
.helloagents/modules/frontend.md
+2 -2
View File
@@ -36,8 +36,8 @@
### 工作区交互
**条件**: 用户进入 `/workspace` 或相关管理页面。
**行为**: 通过组件、Pinia 与 composable 协同管理终端、文件管理、命令历史、布局配置、主题和状态监控；当前 `/workspace` 默认主布局为“左侧 Workbench、中央终端、右侧状态监控”，其中 Workbench 以 tab 容器整合快捷指令、命令历史、文件管理和编辑器，默认激活快捷指令。`QuickCommandsView.vue` 内的新增按钮、空状态按钮和列表操作按钮统一复用 `bg-button`、`text-button-text`、`hover:bg-button-hover`、`hover:bg-border` 等主题变量类，避免写死黑白 hover 色值；`Terminal.vue` 会跟踪 xterm 的视口行号与贴底状态，在终端标签切换、重新激活和 `fit()` 后按原滚动意图恢复；样式编辑器中的“黑暗模式”预设与 `defaultXtermTheme` 已统一为黑绿夜间风格。
**结果**: 页面逻辑分散在 `views/`、`components/`、`stores/` 与 `composables/`，其中布局与交互微调优先落在 `layout.store.ts`、`LayoutRenderer.vue`、`WorkspaceWorkbench.vue`、`QuickCommandsView.vue`、`Terminal.vue`、`StyleCustomizerUiTab.vue` 和 `features/appearance/config/default-themes.ts`。
**行为**: 通过组件、Pinia 与 composable 协同管理终端、文件管理、命令历史、布局配置、主题和状态监控；当前 `/workspace` 默认主布局为“左侧 Workbench、中央终端、右侧状态监控”，其中 Workbench 以 tab 容器整合快捷指令、命令历史、文件管理和编辑器，默认激活快捷指令。`QuickCommandsView.vue` 内的新增按钮、空状态按钮和列表操作按钮统一复用 `bg-button`、`text-button-text`、`hover:bg-button-hover`、`hover:bg-border` 等主题变量类，避免写死黑白 hover 色值；`Terminal.vue` 会跟踪 xterm 的视口行号与贴底状态，在终端标签切换、重新激活和 `fit()` 后按原滚动意图恢复，并在渲染层为带 `xterm-fg-*` class 或内联 `style.color` 的显式前景色字符打标记，让终端文字描边/阴影仅作用于默认前景文本，不覆盖 ANSI 彩色输出；`ConnectionsView.vue` 已升级为“左侧范围树 + 顶部搜索工具条 + 右侧结果列表”的双栏管理台，左侧支持全部/未标记/标签树切换，右侧列表与类型筛选、搜索、排序、批量编辑和批量删除共用同一过滤管线；样式编辑器中的终端文字描边/阴影默认开关也已与新的黑绿终端风格保持默认开启。
**结果**: 页面逻辑分散在 `views/`、`components/`、`stores/` 与 `composables/`，其中布局与交互微调优先落在 `layout.store.ts`、`LayoutRenderer.vue`、`WorkspaceWorkbench.vue`、`QuickCommandsView.vue`、`ConnectionsView.vue`、`Terminal.vue`、`StyleCustomizerUiTab.vue`、`StyleCustomizerTerminalTab.vue` 和 `features/appearance/config/default-themes.ts`。
## 依赖关系
.helloagents/plan/202603250614_terminal-ansi-color-effects/.status.json
-1
View File
@@ -1 +0,0 @@
{"status":"in_progress","completed":1,"failed":0,"pending":4,"total":5,"done":1,"percent":20,"current":"分析 xterm 前景色输出规则并准备修复 Terminal.vue 的 ANSI 彩色文字效果","updated_at":"2026-03-25 06:14:00"}
.helloagents/plan/202603250614_terminal-ansi-color-effects/tasks.md
-47
View File
@@ -1,47 +0,0 @@
# 任务清单: terminal-ansi-color-effects
```yaml
@feature: terminal-ansi-color-effects
@created: 2026-03-25
@status: in_progress
@mode: R2
```
## 进度概览
| 完成 | 失败 | 跳过 | 总数 |
|------|------|------|------|
| 1 | 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 彩色文字效果修复与外观默认值调整 |
---
## 执行备注
- 目标不是关闭终端文字效果，而是把效果限定在默认前景文字上。
- 默认开关改为开启仅影响未保存该项的新环境；已有显式设置保持原值。
packages/frontend/src/views/ConnectionsView.vue
+829 -523
View File
File diff suppressed because it is too large Load Diff