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
2026-03-25 21:50:26 +08:00
parent 7e430cb983
commit 6553739c08
14 changed files with 1021 additions and 578 deletions
+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 订阅服务器状态。
+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`
## 依赖关系