diff --git a/.helloagents/CHANGELOG.md b/.helloagents/CHANGELOG.md
index 0f43ffa..bab982b 100644
--- a/.helloagents/CHANGELOG.md
+++ b/.helloagents/CHANGELOG.md
@@ -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/)
diff --git a/.helloagents/INDEX.md b/.helloagents/INDEX.md
index 860839a..23e914b 100644
--- a/.helloagents/INDEX.md
+++ b/.helloagents/INDEX.md
@@ -31,7 +31,7 @@
 
 ```yaml
 kb_version: 2.3.7
-最后更新: 2026-03-25 06:06
+最后更新: 2026-03-25 06:46
 模块数量: 4
 待执行方案: 0
 ```
diff --git a/.helloagents/archive/2026-03/202603250614_terminal-ansi-color-effects/.status.json b/.helloagents/archive/2026-03/202603250614_terminal-ansi-color-effects/.status.json
new file mode 100644
index 0000000..e078d8e
--- /dev/null
+++ b/.helloagents/archive/2026-03/202603250614_terminal-ansi-color-effects/.status.json
@@ -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"}
diff --git a/.helloagents/plan/202603250614_terminal-ansi-color-effects/proposal.md b/.helloagents/archive/2026-03/202603250614_terminal-ansi-color-effects/proposal.md
similarity index 76%
rename from .helloagents/plan/202603250614_terminal-ansi-color-effects/proposal.md
rename to .helloagents/archive/2026-03/202603250614_terminal-ansi-color-effects/proposal.md
index 5198f2c..501f3db 100644
--- a/.helloagents/plan/202603250614_terminal-ansi-color-effects/proposal.md
+++ b/.helloagents/archive/2026-03/202603250614_terminal-ansi-color-effects/proposal.md
@@ -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` 均通过。
diff --git a/.helloagents/archive/2026-03/202603250614_terminal-ansi-color-effects/tasks.md b/.helloagents/archive/2026-03/202603250614_terminal-ansi-color-effects/tasks.md
new file mode 100644
index 0000000..78fef6a
--- /dev/null
+++ b/.helloagents/archive/2026-03/202603250614_terminal-ansi-color-effects/tasks.md
@@ -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` 均通过，并更新知识库记录 |
+
+---
+
+## 执行备注
+
+- 目标不是关闭终端文字效果，而是把效果限定在默认前景文字上。
+- 默认开关改为开启仅影响未保存该项的新环境；已有显式设置保持原值。
diff --git a/.helloagents/archive/2026-03/202603250636_connections-view-tree-search-redesign/.status.json b/.helloagents/archive/2026-03/202603250636_connections-view-tree-search-redesign/.status.json
new file mode 100644
index 0000000..ece58a9
--- /dev/null
+++ b/.helloagents/archive/2026-03/202603250636_connections-view-tree-search-redesign/.status.json
@@ -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"}
diff --git a/.helloagents/archive/2026-03/202603250636_connections-view-tree-search-redesign/proposal.md b/.helloagents/archive/2026-03/202603250636_connections-view-tree-search-redesign/proposal.md
new file mode 100644
index 0000000..a353647
--- /dev/null
+++ b/.helloagents/archive/2026-03/202603250636_connections-view-tree-search-redesign/proposal.md
@@ -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` 通过。
diff --git a/.helloagents/archive/2026-03/202603250636_connections-view-tree-search-redesign/tasks.md b/.helloagents/archive/2026-03/202603250636_connections-view-tree-search-redesign/tasks.md
new file mode 100644
index 0000000..d8dbc1e
--- /dev/null
+++ b/.helloagents/archive/2026-03/202603250636_connections-view-tree-search-redesign/tasks.md
@@ -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` 通过，并同步知识库记录 |
+
+---
+
+## 执行备注
+
+- 当前优先目标是把“分标签搜索”从下拉筛选升级成显式的左侧树 + 结果面板联动。
+- 若单文件重构完成度足够，则不额外拆新组件，先保证交互升级闭环。
diff --git a/.helloagents/archive/_index.md b/.helloagents/archive/_index.md
index b89f98c..791fd9a 100644
--- a/.helloagents/archive/_index.md
+++ b/.helloagents/archive/_index.md
@@ -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 布局，并新增开机累计流量监控
 
 ## 结果状态说明
diff --git a/.helloagents/modules/backend.md b/.helloagents/modules/backend.md
index 9d1b1b1..23ceb53 100644
--- a/.helloagents/modules/backend.md
+++ b/.helloagents/modules/backend.md
@@ -41,8 +41,8 @@
 
 ### 外观默认值
 **条件**: 数据库初始化、外观设置重置或前后端默认主题定义调整。  
-**行为**: `appearance.repository.ts` 负责写入默认 UI 外观设置，`config/default-themes.ts` 保持与前端同名默认主题定义一致，作为默认外观与终端主题的镜像基线。  
-**结果**: 前后端在默认主题和回退值上保持一致，避免前端回退与后端初始化出现风格漂移。
+**行为**: `appearance.repository.ts` 负责写入默认 UI 外观设置，`config/default-themes.ts` 保持与前端同名默认主题定义一致，作为默认外观与终端主题的镜像基线；当前默认外观中终端文字描边和阴影开关默认开启，但仅作为“无保存值时”的回退，不主动覆盖数据库里已有用户配置。  
+**结果**: 前后端在默认主题、终端文字效果开关和回退值上保持一致，避免前端回退与后端初始化出现风格漂移。
 
 ### 状态监控
 **条件**: 前端工作区通过 WebSocket 订阅服务器状态。  
diff --git a/.helloagents/modules/frontend.md b/.helloagents/modules/frontend.md
index 4c9cda0..42cecd8 100644
--- a/.helloagents/modules/frontend.md
+++ b/.helloagents/modules/frontend.md
@@ -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`。
 
 ## 依赖关系
 
diff --git a/.helloagents/plan/202603250614_terminal-ansi-color-effects/.status.json b/.helloagents/plan/202603250614_terminal-ansi-color-effects/.status.json
deleted file mode 100644
index 479d650..0000000
--- a/.helloagents/plan/202603250614_terminal-ansi-color-effects/.status.json
+++ /dev/null
@@ -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"}
diff --git a/.helloagents/plan/202603250614_terminal-ansi-color-effects/tasks.md b/.helloagents/plan/202603250614_terminal-ansi-color-effects/tasks.md
deleted file mode 100644
index d55142d..0000000
--- a/.helloagents/plan/202603250614_terminal-ansi-color-effects/tasks.md
+++ /dev/null
@@ -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 彩色文字效果修复与外观默认值调整 |
-
----
-
-## 执行备注
-
-- 目标不是关闭终端文字效果，而是把效果限定在默认前景文字上。
-- 默认开关改为开启仅影响未保存该项的新环境；已有显式设置保持原值。
diff --git a/packages/frontend/src/views/ConnectionsView.vue b/packages/frontend/src/views/ConnectionsView.vue
index 566ee4f..d7fcbc5 100644
--- a/packages/frontend/src/views/ConnectionsView.vue
+++ b/packages/frontend/src/views/ConnectionsView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, watch, nextTick } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import AddConnectionForm from '../components/AddConnectionForm.vue';
 import BatchEditConnectionForm from '../components/BatchEditConnectionForm.vue';
 import { useConnectionsStore } from '../stores/connections.store';
@@ -8,7 +8,6 @@ import { useTagsStore } from '../stores/tags.store';
 import type { TagInfo } from '../stores/tags.store';
 import type { SortField, SortOrder } from '../stores/settings.store';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
 import type { ConnectionInfo } from '../stores/connections.store';
 import { useConfirmDialog } from '../composables/useConfirmDialog';
 import { useAlertDialog } from '../composables/useAlertDialog';
@@ -17,6 +16,22 @@ import { formatDistanceToNow } from 'date-fns';
 import { zhCN, enUS, ja } from 'date-fns/locale';
 import type { Locale } from 'date-fns';
 
+type ConnectionTypeFilter = 'ALL' | 'SSH' | 'RDP' | 'VNC';
+type ScopeId = 'all' | 'untagged' | `tag:${number}`;
+
+interface ScopeNode {
+  id: ScopeId;
+  label: string;
+  count: number;
+}
+
+interface ConnectionTestState {
+  status: 'idle' | 'testing' | 'success' | 'error';
+  resultText: string;
+  latency?: number;
+  latencyColor?: string;
+}
+
 const { t, locale } = useI18n();
 const { showConfirmDialog } = useConfirmDialog();
 const { showAlertDialog } = useAlertDialog();
@@ -25,31 +40,51 @@ const sessionStore = useSessionStore();
 const tagsStore = useTagsStore();
 
 const { connections, isLoading: isLoadingConnections } = storeToRefs(connectionsStore);
-const { tags, isLoading: isLoadingTags } = storeToRefs(tagsStore);
+const { tags } = storeToRefs(tagsStore);
 
 const LS_SORT_BY_KEY = 'connections_view_sort_by';
 const LS_SORT_ORDER_KEY = 'connections_view_sort_order';
 const LS_FILTER_TAG_KEY = 'connections_view_filter_tag';
+const LS_FILTER_SCOPE_KEY = 'connections_view_filter_scope';
+const LS_TYPE_FILTER_KEY = 'connections_view_type_filter';
 
 const localSortBy = ref<SortField>(localStorage.getItem(LS_SORT_BY_KEY) as SortField || 'last_connected_at');
 const localSortOrder = ref<SortOrder>(localStorage.getItem(LS_SORT_ORDER_KEY) as SortOrder || 'desc');
 
-const getInitialSelectedTagId = (): number | null => {
-  const storedValue = localStorage.getItem(LS_FILTER_TAG_KEY);
-  return storedValue && storedValue !== 'null' ? parseInt(storedValue, 10) : null;
+const getInitialSelectedScope = (): ScopeId => {
+  const storedScope = localStorage.getItem(LS_FILTER_SCOPE_KEY);
+  if (storedScope === 'all' || storedScope === 'untagged' || storedScope?.startsWith('tag:')) {
+    return storedScope as ScopeId;
+  }
+
+  const legacyTagValue = localStorage.getItem(LS_FILTER_TAG_KEY);
+  if (legacyTagValue && legacyTagValue !== 'null') {
+    const parsedTagId = parseInt(legacyTagValue, 10);
+    if (!Number.isNaN(parsedTagId)) {
+      return `tag:${parsedTagId}`;
+    }
+  }
+
+  return 'all';
 };
-const selectedTagId = ref<number | null>(getInitialSelectedTagId());
+
+const selectedScope = ref<ScopeId>(getInitialSelectedScope());
+const activeTypeFilter = ref<ConnectionTypeFilter>((localStorage.getItem(LS_TYPE_FILTER_KEY) as ConnectionTypeFilter) || 'ALL');
 const searchQuery = ref('');
+const tagsSectionExpanded = ref(true);
 
 const showAddEditConnectionForm = ref(false);
 const connectionToEdit = ref<ConnectionInfo | null>(null);
 
-// Batch Edit Mode
 const isBatchEditMode = ref(false);
 const selectedConnectionIdsForBatch = ref<Set<number>>(new Set());
 const showBatchEditForm = ref(false);
 const isDeletingSelectedConnections = ref(false);
 
+const connectionTestStates = ref<Map<number, ConnectionTestState>>(new Map());
+const isTestingAll = ref(false);
+const isConnectingAll = ref(false);
+
 const sortOptions: { value: SortField; labelKey: string }[] = [
   { value: 'last_connected_at', labelKey: 'dashboard.sortOptions.lastConnected' },
   { value: 'name', labelKey: 'dashboard.sortOptions.name' },
@@ -58,87 +93,301 @@ const sortOptions: { value: SortField; labelKey: string }[] = [
   { value: 'created_at', labelKey: 'dashboard.sortOptions.created' },
 ];
 
-const filteredAndSortedConnections = computed(() => {
-  const sortBy = localSortBy.value;
-  const sortOrderVal = localSortOrder.value;
-  const factor = sortOrderVal === 'desc' ? -1 : 1;
-  const filterTagId = selectedTagId.value;
-  const query = searchQuery.value.toLowerCase().trim();
+const normalizedSearchQuery = computed(() => searchQuery.value.toLowerCase().trim());
 
-  let filteredByTag = filterTagId === null
-    ? [...connections.value]
-    : connections.value.filter(conn => conn.tag_ids?.includes(filterTagId));
+const tagLookup = computed(() => {
+  const map = new Map<number, TagInfo>();
+  (tags.value as TagInfo[]).forEach((tag) => {
+    map.set(tag.id, tag);
+  });
+  return map;
+});
 
-  let searchedConnections = filteredByTag;
-  if (query) {
-    searchedConnections = filteredByTag.filter(conn => {
-      const nameMatch = conn.name?.toLowerCase().includes(query);
-      const usernameMatch = conn.username?.toLowerCase().includes(query);
-      const hostMatch = conn.host?.toLowerCase().includes(query);
-      const portMatch = conn.port?.toString().includes(query);
-      const notesMatch = conn.notes?.toLowerCase().includes(query); // 添加对备注的搜索
-      return nameMatch || usernameMatch || hostMatch || portMatch || notesMatch;
-    });
+const getConnectionTagNames = (conn: ConnectionInfo): string[] => {
+  if (!conn.tag_ids?.length) {
+    return [];
   }
 
-  return searchedConnections.sort((a, b) => {
-    let valA: any;
-    let valB: any;
+  return conn.tag_ids
+    .map((tagId) => tagLookup.value.get(tagId)?.name)
+    .filter((tagName): tagName is string => Boolean(tagName));
+};
 
-    switch (sortBy) {
-      case 'name':
-        valA = a.name || '';
-        valB = b.name || '';
-        return valA.localeCompare(valB) * factor;
-      case 'type':
-        valA = a.type || '';
-        valB = b.type || '';
-        return valA.localeCompare(valB) * factor;
-      case 'created_at':
-        valA = a.created_at ?? 0;
-        valB = b.created_at ?? 0;
-        return (valA - valB) * factor;
-      case 'updated_at':
-        valA = a.updated_at ?? 0;
-        valB = b.updated_at ?? 0;
-        return (valA - valB) * factor;
-      case 'last_connected_at':
-        valA = a.last_connected_at ?? (sortOrderVal === 'desc' ? -Infinity : Infinity);
-        valB = b.last_connected_at ?? (sortOrderVal === 'desc' ? -Infinity : Infinity);
-        if (valA === valB) return 0;
-        if (valA < valB) return -1 * factor;
-        return 1 * factor;
-      default:
-        return 0;
-    }
+const matchesSearchQuery = (conn: ConnectionInfo, query: string): boolean => {
+  if (!query) {
+    return true;
+  }
+
+  const haystacks = [
+    conn.name,
+    conn.host,
+    conn.username,
+    conn.notes,
+    conn.type,
+    conn.port?.toString(),
+    ...getConnectionTagNames(conn),
+  ];
+
+  return haystacks.some((value) => value?.toLowerCase().includes(query));
+};
+
+const matchesScope = (conn: ConnectionInfo, scope: ScopeId): boolean => {
+  if (scope === 'all') {
+    return true;
+  }
+
+  if (scope === 'untagged') {
+    return !conn.tag_ids?.length;
+  }
+
+  const tagId = parseInt(scope.replace('tag:', ''), 10);
+  return conn.tag_ids?.includes(tagId) ?? false;
+};
+
+const matchedConnections = computed(() => {
+  return connections.value.filter((conn) => {
+    const typeMatched = activeTypeFilter.value === 'ALL' || conn.type === activeTypeFilter.value;
+    return typeMatched && matchesSearchQuery(conn, normalizedSearchQuery.value);
   });
 });
 
-onMounted(async () => {
-  if (connections.value.length === 0) {
-    try {
-      await connectionsStore.fetchConnections();
-    } catch (error) {
-      console.error("加载连接列表失败:", error);
-    }
-  }
-  try {
-    await tagsStore.fetchTags();
-  } catch (error) {
-    console.error("加载标签列表失败:", error);
-  }
+const tagTreeNodes = computed<ScopeNode[]>(() => {
+  return (tags.value as TagInfo[])
+    .map((tag) => ({
+      id: `tag:${tag.id}` as ScopeId,
+      label: tag.name,
+      count: matchedConnections.value.filter((conn) => conn.tag_ids?.includes(tag.id)).length,
+    }))
+    .sort((left, right) => left.label.localeCompare(right.label));
 });
 
-const connectTo = (connection: ConnectionInfo) => {
-  sessionStore.handleConnectRequest(connection);
-};
+const primaryScopeNodes = computed<ScopeNode[]>(() => {
+  return [
+    {
+      id: 'all',
+      label: t('dashboard.filterTags.all', '全部'),
+      count: matchedConnections.value.length,
+    },
+    {
+      id: 'untagged',
+      label: t('connections.untaggedGroup', '未标记'),
+      count: matchedConnections.value.filter((conn) => !conn.tag_ids?.length).length,
+    },
+  ];
+});
 
-const toggleSortOrder = () => {
-  localSortOrder.value = localSortOrder.value === 'asc' ? 'desc' : 'asc';
-};
+const filteredAndSortedConnections = computed(() => {
+  const sortBy = localSortBy.value;
+  const sortOrderFactor = localSortOrder.value === 'desc' ? -1 : 1;
 
+  return matchedConnections.value
+    .filter((conn) => matchesScope(conn, selectedScope.value))
+    .slice()
+    .sort((left, right) => {
+      let leftValue: string | number | null = null;
+      let rightValue: string | number | null = null;
+
+      switch (sortBy) {
+        case 'name':
+          leftValue = left.name || left.host;
+          rightValue = right.name || right.host;
+          return String(leftValue).localeCompare(String(rightValue)) * sortOrderFactor;
+        case 'type':
+          leftValue = left.type || '';
+          rightValue = right.type || '';
+          return String(leftValue).localeCompare(String(rightValue)) * sortOrderFactor;
+        case 'created_at':
+          leftValue = left.created_at ?? 0;
+          rightValue = right.created_at ?? 0;
+          return (Number(leftValue) - Number(rightValue)) * sortOrderFactor;
+        case 'updated_at':
+          leftValue = left.updated_at ?? 0;
+          rightValue = right.updated_at ?? 0;
+          return (Number(leftValue) - Number(rightValue)) * sortOrderFactor;
+        case 'last_connected_at':
+        default:
+          leftValue = left.last_connected_at ?? (localSortOrder.value === 'desc' ? -Infinity : Infinity);
+          rightValue = right.last_connected_at ?? (localSortOrder.value === 'desc' ? -Infinity : Infinity);
+          if (leftValue === rightValue) {
+            return 0;
+          }
+          return Number(leftValue) < Number(rightValue) ? -1 * sortOrderFactor : 1 * sortOrderFactor;
+      }
+    });
+});
+
+const selectedScopeTitle = computed(() => {
+  if (selectedScope.value === 'all') {
+    return t('dashboard.filterTags.all', '全部');
+  }
+
+  if (selectedScope.value === 'untagged') {
+    return t('connections.untaggedGroup', '未标记');
+  }
+
+  const selectedTagId = parseInt(selectedScope.value.replace('tag:', ''), 10);
+  return tagLookup.value.get(selectedTagId)?.name || t('connections.table.tags', '标签');
+});
+
+const currentRangeHint = computed(() => {
+  if (selectedScope.value === 'all') {
+    return t('connections.searchHint', '搜索名称、地址、用户、备注和标签');
+  }
+
+  if (selectedScope.value === 'untagged') {
+    return t('connections.untaggedHint', '当前仅显示未绑定标签的连接');
+  }
+
+  return t('connections.tagScopeHint', '当前仅显示所选标签下的连接');
+});
+
+const typeCounts = computed(() => {
+  const counts: Record<ConnectionTypeFilter, number> = {
+    ALL: connections.value.length,
+    SSH: connections.value.filter((conn) => conn.type === 'SSH').length,
+    RDP: connections.value.filter((conn) => conn.type === 'RDP').length,
+    VNC: connections.value.filter((conn) => conn.type === 'VNC').length,
+  };
+
+  return [
+    { value: 'ALL' as const, label: t('common.all', '全部'), count: counts.ALL },
+    { value: 'SSH' as const, label: 'SSH', count: counts.SSH },
+    { value: 'RDP' as const, label: 'RDP', count: counts.RDP },
+    { value: 'VNC' as const, label: 'VNC', count: counts.VNC },
+  ];
+});
+
+const selectedResultCount = computed(() => selectedConnectionIdsForBatch.value.size);
 const isAscending = computed(() => localSortOrder.value === 'asc');
 
+const dateFnsLocales: Record<string, Locale> = {
+  'en-US': enUS,
+  'zh-CN': zhCN,
+  'ja-JP': ja,
+  en: enUS,
+  zh: zhCN,
+  ja,
+};
+
+const formatRelativeTime = (timestampInSeconds: number | null | undefined): string => {
+  if (!timestampInSeconds) {
+    return t('connections.status.never', '从未');
+  }
+
+  try {
+    const timestampInMs = timestampInSeconds * 1000;
+    const currentLocale = locale.value;
+    const languagePart = currentLocale.split('-')[0];
+    const targetLocale = dateFnsLocales[currentLocale] || dateFnsLocales[languagePart] || enUS;
+    return formatDistanceToNow(new Date(timestampInMs), { addSuffix: true, locale: targetLocale });
+  } catch (error) {
+    console.error('格式化连接时间失败:', error);
+    return String(timestampInSeconds);
+  }
+};
+
+const getLatencyColorString = (latencyMs?: number): string => {
+  if (latencyMs === undefined) {
+    return 'inherit';
+  }
+  if (latencyMs < 100) {
+    return 'var(--color-success, #4CAF50)';
+  }
+  if (latencyMs < 300) {
+    return 'var(--color-warning, #ff9800)';
+  }
+  return 'var(--color-error, #F44336)';
+};
+
+const getTypePillClass = (type: ConnectionTypeFilter) => {
+  if (activeTypeFilter.value === type) {
+    return 'bg-button text-button-text border-button shadow-sm';
+  }
+  return 'bg-background text-text-secondary border-border hover:bg-border hover:text-foreground';
+};
+
+const getScopeNodeClass = (nodeId: ScopeId) => {
+  if (selectedScope.value === nodeId) {
+    return 'bg-primary/15 text-foreground border-primary/30 shadow-sm';
+  }
+  return 'text-text-secondary border-transparent hover:bg-header hover:text-foreground';
+};
+
+const getTypeBadgeClass = (type: ConnectionInfo['type']) => {
+  if (type === 'SSH') {
+    return 'bg-emerald-500/12 text-emerald-300 border-emerald-400/25';
+  }
+  if (type === 'RDP') {
+    return 'bg-sky-500/12 text-sky-300 border-sky-400/25';
+  }
+  return 'bg-amber-500/12 text-amber-300 border-amber-400/25';
+};
+
+const getSingleTestButtonInfo = (connId: number | undefined, connType: string | undefined) => {
+  const state = connId ? connectionTestStates.value.get(connId) : undefined;
+
+  if (connType !== 'SSH') {
+    return {
+      text: t('connections.actions.test', '测试'),
+      iconClass: 'fas fa-flask',
+      disabled: true,
+      title: t('connections.test.onlySshSupportedTest', '仅 SSH 连接支持测试。'),
+    };
+  }
+
+  if (!connId) {
+    return {
+      text: t('connections.actions.test', '测试'),
+      iconClass: 'fas fa-flask',
+      disabled: true,
+      title: '',
+    };
+  }
+
+  if (state?.status === 'testing') {
+    return {
+      text: t('connections.actions.testing', '测试中'),
+      iconClass: 'fas fa-spinner fa-spin',
+      disabled: true,
+      title: t('connections.actions.testing', '测试中'),
+    };
+  }
+
+  return {
+    text: t('connections.actions.test', '测试'),
+    iconClass: 'fas fa-flask',
+    disabled: false,
+    title: t('connections.actions.test', '测试'),
+  };
+};
+
+const getTruncatedNotes = (notes: string | null | undefined): string => {
+  if (!notes?.trim()) {
+    return '';
+  }
+
+  const maxLength = 80;
+  return notes.length <= maxLength ? notes : `${notes.slice(0, maxLength)}...`;
+};
+
+const ensureDataLoaded = async () => {
+  if (connections.value.length === 0) {
+    await connectionsStore.fetchConnections();
+  } else {
+    connectionsStore.fetchConnections();
+  }
+
+  await tagsStore.fetchTags();
+};
+
+onMounted(async () => {
+  try {
+    await ensureDataLoaded();
+  } catch (error) {
+    console.error('加载连接管理数据失败:', error);
+  }
+});
+
 watch(localSortBy, (newValue) => {
   localStorage.setItem(LS_SORT_BY_KEY, newValue);
 });
@@ -147,46 +396,35 @@ watch(localSortOrder, (newValue) => {
   localStorage.setItem(LS_SORT_ORDER_KEY, newValue);
 });
 
-watch(selectedTagId, (newValue) => {
-  localStorage.setItem(LS_FILTER_TAG_KEY, newValue === null ? 'null' : String(newValue));
+watch(selectedScope, (newValue) => {
+  localStorage.setItem(LS_FILTER_SCOPE_KEY, newValue);
 });
 
-const dateFnsLocales: Record<string, Locale> = {
-  'en-US': enUS,
-  'zh-CN': zhCN,
-  'ja-JP': ja,
-  'en': enUS,
-  'zh': zhCN,
-  'ja': ja,
+watch(activeTypeFilter, (newValue) => {
+  localStorage.setItem(LS_TYPE_FILTER_KEY, newValue);
+});
+
+watch([selectedScope, activeTypeFilter, searchQuery], () => {
+  if (isBatchEditMode.value) {
+    const visibleIds = new Set(filteredAndSortedConnections.value.map((conn) => conn.id));
+    selectedConnectionIdsForBatch.value.forEach((id) => {
+      if (!visibleIds.has(id)) {
+        selectedConnectionIdsForBatch.value.delete(id);
+      }
+    });
+  }
+});
+
+const selectScope = (scopeId: ScopeId) => {
+  selectedScope.value = scopeId;
 };
 
-const formatRelativeTime = (timestampInSeconds: number | null | undefined): string => {
-  if (!timestampInSeconds) return t('connections.status.never');
-  try {
-    const timestampInMs = timestampInSeconds * 1000;
-    if (isNaN(timestampInMs)) {
-        console.warn(`[ConnectionsView] Invalid timestamp received: ${timestampInSeconds}`);
-        return String(timestampInSeconds);
-    }
-    const date = new Date(timestampInMs);
-    const currentI18nLocale = locale.value;
-    const langPart = currentI18nLocale.split('-')[0];
-    let targetDateFnsLocale = dateFnsLocales[currentI18nLocale] || dateFnsLocales[langPart] || enUS;
-    return formatDistanceToNow(date, { addSuffix: true, locale: targetDateFnsLocale });
-  } catch (e) {
-    console.error("格式化日期失败:", e);
-    return String(timestampInSeconds);
-  }
+const connectTo = (connection: ConnectionInfo) => {
+  sessionStore.handleConnectRequest(connection);
 };
 
-const getTagNames = (tagIds: number[] | undefined): string[] => {
-  if (!tagIds || tagIds.length === 0) {
-    return [];
-  }
-  const allTags = tags.value as TagInfo[];
-  return tagIds
-    .map(id => allTags.find(tag => tag.id === id)?.name)
-    .filter((name): name is string => !!name);
+const toggleSortOrder = () => {
+  localSortOrder.value = localSortOrder.value === 'asc' ? 'desc' : 'asc';
 };
 
 const openAddConnectionForm = () => {
@@ -194,8 +432,8 @@ const openAddConnectionForm = () => {
   showAddEditConnectionForm.value = true;
 };
 
-const openEditConnectionForm = (conn: ConnectionInfo) => {
-  connectionToEdit.value = conn;
+const openEditConnectionForm = (connection: ConnectionInfo) => {
+  connectionToEdit.value = connection;
   showAddEditConnectionForm.value = true;
 };
 
@@ -210,16 +448,18 @@ const handleConnectionModified = async () => {
   await connectionsStore.fetchConnections();
 };
 
-// --- Batch Edit Functions ---
 const toggleBatchEditMode = () => {
   isBatchEditMode.value = !isBatchEditMode.value;
   if (!isBatchEditMode.value) {
-    selectedConnectionIdsForBatch.value.clear(); // Clear selection when exiting batch mode
+    selectedConnectionIdsForBatch.value.clear();
   }
 };
 
 const handleConnectionClick = (connId: number) => {
-  if (!isBatchEditMode.value) return;
+  if (!isBatchEditMode.value) {
+    return;
+  }
+
   if (selectedConnectionIdsForBatch.value.has(connId)) {
     selectedConnectionIdsForBatch.value.delete(connId);
   } else {
@@ -227,24 +467,32 @@ const handleConnectionClick = (connId: number) => {
   }
 };
 
-const isConnectionSelectedForBatch = (connId: number): boolean => {
+const isConnectionSelectedForBatch = (connId: number) => {
   return selectedConnectionIdsForBatch.value.has(connId);
 };
 
 const selectAllConnections = () => {
-  if (!isBatchEditMode.value) return;
-  filteredAndSortedConnections.value.forEach(conn => selectedConnectionIdsForBatch.value.add(conn.id));
+  if (!isBatchEditMode.value) {
+    return;
+  }
+
+  filteredAndSortedConnections.value.forEach((conn) => selectedConnectionIdsForBatch.value.add(conn.id));
 };
 
 const deselectAllConnections = () => {
-  if (!isBatchEditMode.value) return;
+  if (!isBatchEditMode.value) {
+    return;
+  }
   selectedConnectionIdsForBatch.value.clear();
 };
 
 const invertSelection = () => {
-  if (!isBatchEditMode.value) return;
-  const allVisibleIds = new Set(filteredAndSortedConnections.value.map(conn => conn.id));
-  allVisibleIds.forEach(id => {
+  if (!isBatchEditMode.value) {
+    return;
+  }
+
+  const visibleIds = new Set(filteredAndSortedConnections.value.map((conn) => conn.id));
+  visibleIds.forEach((id) => {
     if (selectedConnectionIdsForBatch.value.has(id)) {
       selectedConnectionIdsForBatch.value.delete(id);
     } else {
@@ -255,120 +503,92 @@ const invertSelection = () => {
 
 const openBatchEditModal = () => {
   if (selectedConnectionIdsForBatch.value.size === 0) {
-    // Optionally, show a notification from uiNotificationsStore using your project's method
-    showAlertDialog({ title: t('common.alert', '提示'), message: t('connections.batchEdit.noSelectionForEdit', '请至少选择一个连接进行编辑。') }); // Placeholder
+    showAlertDialog({
+      title: t('common.alert', '提示'),
+      message: t('connections.batchEdit.noSelectionForEdit', '请至少选择一个连接进行编辑。'),
+    });
     return;
   }
+
   showBatchEditForm.value = true;
 };
 
 const handleBatchEditSaved = async () => {
   showBatchEditForm.value = false;
   selectedConnectionIdsForBatch.value.clear();
-  // isBatchEditMode.value = false; // Optionally exit batch mode after saving
-  await connectionsStore.fetchConnections(); // Refresh the list
+  await connectionsStore.fetchConnections();
 };
 
 const handleBatchEditFormClose = () => {
   showBatchEditForm.value = false;
 };
 
-// --- 批量删除 ---
 const handleBatchDeleteConnections = async () => {
   if (selectedConnectionIdsForBatch.value.size === 0 || isDeletingSelectedConnections.value) {
     return;
   }
 
-  const confirmMessage = t(
-    'connections.batchEdit.confirmMessage',
-    { count: selectedConnectionIdsForBatch.value.size },
-    `您确定要删除选中的 ${selectedConnectionIdsForBatch.value.size} 个连接吗？此操作无法撤销。`
-  );
-
-
   const confirmed = await showConfirmDialog({
-    message: confirmMessage
+    message: t(
+      'connections.batchEdit.confirmMessage',
+      { count: selectedConnectionIdsForBatch.value.size },
+      `您确定要删除选中的 ${selectedConnectionIdsForBatch.value.size} 个连接吗？此操作无法撤销。`,
+    ),
   });
-  if (confirmed) {
-    isDeletingSelectedConnections.value = true;
-    try {
-      const idsToDelete = Array.from(selectedConnectionIdsForBatch.value);
-      await connectionsStore.deleteBatchConnections(idsToDelete);
 
+  if (!confirmed) {
+    return;
+  }
 
-      showAlertDialog({ title: t('common.success', '成功'), message: t('connections.batchEdit.successMessage', '选中的连接已成功删除。') });
-
-      selectedConnectionIdsForBatch.value.clear();
-
-      await connectionsStore.fetchConnections();
-    } catch (error: any) {
-      console.error("Batch delete connections error:", error);
-      showAlertDialog({ title: t('common.error'), message: t('connections.batchEdit.errorMessage', `批量删除连接失败: ${error.message || '未知错误'}`) });
-    } finally {
-      isDeletingSelectedConnections.value = false;
-    }
+  isDeletingSelectedConnections.value = true;
+  try {
+    const idsToDelete = Array.from(selectedConnectionIdsForBatch.value);
+    await connectionsStore.deleteBatchConnections(idsToDelete);
+    showAlertDialog({
+      title: t('common.success', '成功'),
+      message: t('connections.batchEdit.successMessage', '选中的连接已成功删除。'),
+    });
+    selectedConnectionIdsForBatch.value.clear();
+    await connectionsStore.fetchConnections();
+  } catch (error: any) {
+    console.error('Batch delete connections error:', error);
+    showAlertDialog({
+      title: t('common.error', '错误'),
+      message: t('connections.batchEdit.errorMessage', `批量删除连接失败: ${error.message || '未知错误'}`),
+    });
+  } finally {
+    isDeletingSelectedConnections.value = false;
   }
 };
 
-// --- Test Connection Logic ---
-interface ConnectionTestState {
-  status: 'idle' | 'testing' | 'success' | 'error';
-  resultText: string;
-  latency?: number;
-  latencyColor?: string;
-}
-const connectionTestStates = ref<Map<number, ConnectionTestState>>(new Map());
-const isTestingAll = ref(false);
+const handleTestSingleConnection = async (connection: ConnectionInfo) => {
+  if (!connection.id || connection.type !== 'SSH') {
+    return;
+  }
 
-const getLatencyColorString = (latencyMs?: number): string => {
-  if (latencyMs === undefined) return 'inherit'; // Default or inherit
-  // These colors should ideally come from theme variables if available
-  if (latencyMs < 100) return 'var(--color-success, #4CAF50)';
-  if (latencyMs < 300) return 'var(--color-warning, #ff9800)';
-  return 'var(--color-error, #F44336)';
-};
-
-const handleTestSingleConnection = async (conn: ConnectionInfo) => {
-  if (!conn.id || conn.type !== 'SSH') return;
-
-  connectionTestStates.value.set(conn.id, {
+  connectionTestStates.value.set(connection.id, {
     status: 'testing',
     resultText: t('connections.test.testingInProgress', '测试中...'),
   });
 
   try {
-    // Pass only the ID to testConnection, as per store definition
-    const result = await connectionsStore.testConnection(conn.id);
-
+    const result = await connectionsStore.testConnection(connection.id);
     if (result.success) {
       const latencyMs = result.latency;
-      let displayText = ''; // 初始化为空字符串，符合只显示延迟的要求
-      let determinedColor;
-
-      if (latencyMs !== undefined) {
-        displayText = `${latencyMs}ms`;
-        determinedColor = getLatencyColorString(latencyMs);
-      } else {
-        // 测试成功，但没有延迟信息。不显示文本。
-        // 颜色应为明确的成功颜色。
-        // getLatencyColorString(0) 会返回绿色，代表非常好的情况。
-        determinedColor = getLatencyColorString(0); // 或者直接使用 'var(--color-success, #4CAF50)'
-      }
-
-      connectionTestStates.value.set(conn.id, {
+      connectionTestStates.value.set(connection.id, {
         status: 'success',
-        resultText: displayText, // 将显示 "XXms" 或者为空
+        resultText: latencyMs !== undefined ? `${latencyMs}ms` : t('connections.test.success', '已连接'),
         latency: latencyMs,
-        latencyColor: determinedColor,
+        latencyColor: getLatencyColorString(latencyMs ?? 0),
       });
     } else {
-      connectionTestStates.value.set(conn.id, {
+      connectionTestStates.value.set(connection.id, {
         status: 'error',
         resultText: result.message || t('connections.test.unknownError', '未知错误'),
       });
     }
   } catch (error: any) {
-    connectionTestStates.value.set(conn.id, {
+    connectionTestStates.value.set(connection.id, {
       status: 'error',
       resultText: error.message || t('connections.test.unknownError', '未知错误'),
     });
@@ -376,374 +596,460 @@ const handleTestSingleConnection = async (conn: ConnectionInfo) => {
 };
 
 const handleTestAllFilteredConnections = async () => {
-  if (isTestingAll.value || isLoadingConnections.value) return;
-  // Ensure conn.id exists for map function and error handling
-  const sshConnectionsToTest = filteredAndSortedConnections.value.filter(c => c.type === 'SSH' && c.id != null);
-  if (sshConnectionsToTest.length === 0) {
-    // Optionally notify user that there are no SSH connections to test
-    // Consider using uiNotificationsStore from your project for a user-friendly message
+  if (isTestingAll.value || isLoadingConnections.value) {
+    return;
+  }
+
+  const sshConnections = filteredAndSortedConnections.value.filter((conn) => conn.type === 'SSH' && conn.id != null);
+  if (!sshConnections.length) {
     return;
   }
 
   isTestingAll.value = true;
-  const testPromises = sshConnectionsToTest.map(conn => {
-    // conn.id is guaranteed to exist here due to the filter above.
-    // We're calling handleTestSingleConnection for each.
-    // Individual errors within handleTestSingleConnection will update that specific connection's state.
-    // We also add a .catch here to handle any unexpected errors from handleTestSingleConnection itself
-    // or if conn.id was somehow null/undefined (though filtered out).
-    return handleTestSingleConnection(conn).catch(error => {
-      console.error(`Error testing connection ${conn.id}:`, error);
-      // Ensure state is updated for this specific connection to show an error
-      // The 'id' here is from the 'conn' object in the map function's scope.
-      connectionTestStates.value.set(conn.id!, { // Using non-null assertion as id is checked
-        status: 'error',
-        resultText: t('connections.test.unknownErrorDuringBatch', '批量测试中发生错误'), // New i18n key
-      });
-    });
-  });
-
   try {
-    await Promise.all(testPromises);
-  } catch (error) {
-    // This catch block handles errors if Promise.all itself fails,
-    // though individual promise rejections are handled above.
-    console.error("Error during batch testing of connections (Promise.all):", error);
-    // Optionally, set a general error state or notification for the entire batch operation if needed.
+    await Promise.all(
+      sshConnections.map(async (conn) => {
+        await handleTestSingleConnection(conn);
+      }),
+    );
   } finally {
     isTestingAll.value = false;
   }
 };
 
-const getSingleTestButtonInfo = (connId: number | undefined, connType: string | undefined) => {
-  const state = connId ? connectionTestStates.value.get(connId) : undefined;
-
-  if (connType !== 'SSH') {
-    return {
-      textKey: 'connections.actions.test',
-      iconClass: 'fas fa-plug',
-      disabled: true,
-      loading: false,
-      title: t('connections.test.onlySshSupportedTest', '仅SSH连接支持测试。')
-    };
-  }
-  if (!connId) { // Should not happen if connType is SSH and we are in the list
-     return { textKey: 'connections.actions.test', iconClass: 'fas fa-plug', disabled: true, loading: false, title: '' };
-  }
-
-  if (state?.status === 'testing') {
-    return { textKey: 'connections.actions.testing', iconClass: 'fas fa-spinner fa-spin', disabled: true, loading: true, title: t('connections.actions.testing', '测试中') };
-  }
-  if (state?.status === 'success' || state?.status === 'error') {
-    // 测试完成后，按钮恢复为初始“测试”状态
-    return { textKey: 'connections.actions.test', iconClass: 'fas fa-plug', disabled: false, loading: false, title: t('connections.actions.test', '测试') };
-  }
-  // 默认状态也是“测试”
-  return { textKey: 'connections.actions.test', iconClass: 'fas fa-plug', disabled: false, loading: false, title: t('connections.actions.test', '测试') };
-};
-
-const getTruncatedNotes = (notes: string | null | undefined): string => {
-  if (!notes || notes.trim() === '') return ''; // 返回空字符串，如果没有备注
-  const maxLength = 100;
-  if (notes.length <= maxLength) return notes;
-  return notes.substring(0, maxLength) + '...';
-};
-
-
-
-// --- Connect All Filtered Connections ---
-const isConnectingAll = ref(false);
-
 const handleConnectAllFilteredConnections = async () => {
-  if (isConnectingAll.value || isLoadingConnections.value) return;
+  if (isConnectingAll.value || isLoadingConnections.value) {
+    return;
+  }
 
-  const sshConnectionsToConnect = filteredAndSortedConnections.value.filter(conn => conn.type === 'SSH');
-  if (sshConnectionsToConnect.length === 0) {
-    console.warn(t('connections.messages.noSshConnectionsToConnectAll', '没有可连接的 SSH 筛选结果。'));
-    // Optionally, use a UI notification if available in your project
-    // e.g., uiNotificationsStore.addNotification({ message: t('connections.messages.noSshConnectionsToConnectAll'), type: 'info' });
+  const sshConnections = filteredAndSortedConnections.value.filter((conn) => conn.type === 'SSH');
+  if (!sshConnections.length) {
     return;
   }
 
   isConnectingAll.value = true;
   try {
-    for (const conn of sshConnectionsToConnect) {
-      connectTo(conn);
-      // Consider a small delay if you want to visually see connections initiating one by one,
-      // or if connectTo triggers operations that might benefit from not being fired too rapidly.
-      // await new Promise(resolve => setTimeout(resolve, 200)); // Example delay
-    }
+    sshConnections.forEach((conn) => connectTo(conn));
   } catch (error) {
-    console.error("Error connecting to all filtered SSH connections:", error);
-    // uiNotificationsStore.addNotification({ message: t('connections.errors.connectAllSshFailed', '连接全部 SSH 操作失败。'), type: 'error' });
+    console.error('Error connecting to all filtered SSH connections:', error);
   } finally {
     isConnectingAll.value = false;
   }
 };
-
 </script>
 
 <template>
-  <div class="p-4 md:p-6 lg:p-8 bg-background text-foreground"> <!-- 最外层，负责背景和整体内边距 -->
-    <div class="max-w-screen-lg mx-auto"> <!-- 将 xl 修改为 lg -->
-      <h1 class="text-2xl font-semibold mb-6">{{ t('nav.connections', '连接管理') }}</h1>
-
-      <div class="bg-card text-card-foreground shadow rounded-lg overflow-hidden border border-border min-h-[400px]"> <!-- 移除了 max-w-screen-2xl mx-auto -->
-        <div class="px-4 py-3 border-b border-border flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2">
-        <h2 class="text-lg font-medium flex-shrink-0">{{ t('dashboard.connectionList', '连接列表') }} ({{ filteredAndSortedConnections.length }})</h2>
-        <div class="w-full sm:w-auto flex flex-wrap sm:flex-nowrap items-stretch sm:items-center space-y-2 sm:space-y-0 sm:space-x-2">
-          <!-- Batch Edit Toggle -->
-          <div class="flex items-center mr-3">
-            <label for="batch-edit-toggle" class="mr-2 text-sm font-medium text-text-secondary">{{ t('connections.batchEdit.toggleLabel', '批量修改') }}</label>
-            <button
-              id="batch-edit-toggle"
-              @click="toggleBatchEditMode"
-              :class="[
-                'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary',
-                isBatchEditMode ? 'bg-primary' : 'bg-gray-300 dark:bg-gray-600'
-              ]"
-              role="switch"
-              :aria-checked="isBatchEditMode"
-            >
-              <span
-                aria-hidden="true"
-                :class="[
-                  'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200',
-                  isBatchEditMode ? 'translate-x-5' : 'translate-x-0'
-                ]"
-              ></span>
-            </button>
-          </div>
-
-          <input
-            type="text"
-            v-model="searchQuery"
-            :placeholder="t('dashboard.searchConnectionsPlaceholder', '搜索连接...')"
-            class="h-8 px-3 py-1 text-sm border border-border rounded bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary w-full sm:w-48"
-          />
-          <div class="flex items-center space-x-2">
-           <select
-              v-model="selectedTagId"
-              class="h-8 px-2 py-1 text-sm border border-border rounded bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary appearance-none bg-no-repeat bg-right pr-8"
-              style="background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 16 16\'%3e%3cpath fill=\'none\' stroke=\'%236c757d\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'2\' d=\'M2 5l6 6 6-6\'/%3e%3c/svg%3e'); background-position: right 0.5rem center; background-size: 16px 12px;"
-              aria-label="Filter connections by tag"
-              :disabled="isLoadingTags"
-            >
-              <option :value="null">{{ t('dashboard.filterTags.all', '所有标签') }}</option>
-              <option v-if="isLoadingTags" disabled>{{ t('common.loading') }}</option>
-              <option v-for="tag in (tags as TagInfo[])" :key="tag.id" :value="tag.id">
-                {{ tag.name }}
-              </option>
-            </select>
-
-           <select
-              v-model="localSortBy"
-              class="h-8 px-2 py-1 text-sm border border-border rounded bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary appearance-none bg-no-repeat bg-right pr-8"
-              style="background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 16 16\'%3e%3cpath fill=\'none\' stroke=\'%236c757d\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'2\' d=\'M2 5l6 6 6-6\'/%3e%3c/svg%3e'); background-position: right 0.5rem center; background-size: 16px 12px;"
-              aria-label="Sort connections by"
-            >
-              <option v-for="option in sortOptions" :key="option.value" :value="option.value">
-                {{ t(option.labelKey, option.value.replace('_', ' ')) }}
-              </option>
-            </select>
-
-            <button
-              @click="toggleSortOrder"
-              class="h-8 px-1.5 py-1 border border-border rounded hover:bg-muted focus:outline-none focus:ring-1 focus:ring-primary flex items-center justify-center"
-              :aria-label="isAscending ? t('common.sortAscending') : t('common.sortDescending')"
-              :title="isAscending ? t('common.sortAscending') : t('common.sortDescending')"
-            >
-              <i :class="['fas', isAscending ? 'fa-arrow-up-a-z' : 'fa-arrow-down-z-a', 'w-4 h-4']"></i>
-            </button>
-          </div>
-          <button @click="openAddConnectionForm" :title="t('connections.addConnection', 'Add Connection')" class="h-8 w-8 bg-button rounded-md shadow-sm hover:bg-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition duration-150 ease-in-out flex items-center justify-center flex-shrink-0 ml-2 sm:ml-0">
-            <i class="fas fa-plus" style="color: white;"></i>
-          </button>
-          <!-- Test All Filtered Connections Button -->
-          <button
-            @click="handleTestAllFilteredConnections"
-            :disabled="isTestingAll || isLoadingConnections || !filteredAndSortedConnections.some(c => c.type === 'SSH')"
-            class="h-8 px-3 py-1.5 text-sm bg-button text-button-text rounded-md shadow-sm hover:bg-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition duration-150 ease-in-out flex items-center justify-center flex-shrink-0 ml-2 sm:ml-0"
-            :title="t('connections.actions.testAllFiltered', '测试全部筛选的SSH连接')"
-          >
-            <i v-if="isTestingAll" class="fas fa-spinner fa-spin mr-1 sm:mr-2" style="color: white;"></i>
-            <i v-else class="fas fa-check-double mr-1 sm:mr-2" style="color: white;"></i>
-            <span class="hidden sm:inline">{{ t('connections.actions.testAllFiltered') }}</span>
-          </button>
-          <!-- Connect All Filtered Connections Button -->
-          <button
-            @click="handleConnectAllFilteredConnections"
-            :disabled="isConnectingAll || isLoadingConnections || !filteredAndSortedConnections.some(c => c.type === 'SSH')"
-            class="h-8 px-3 py-1.5 text-sm bg-button text-button-text rounded-md shadow-sm hover:bg-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition duration-150 ease-in-out flex items-center justify-center flex-shrink-0 ml-2 sm:ml-0"
-          >
-            <i v-if="isConnectingAll" class="fas fa-spinner fa-spin mr-1 sm:mr-2" style="color: white;"></i>
-            <i v-else class="fas fa-network-wired mr-1 sm:mr-2" style="color: white;"></i>
-            <span class="hidden sm:inline">{{ t('workspaceConnectionList.connectAllSshInGroupMenu', '连接全部') }}</span>
-          </button>
+  <div class="p-4 md:p-6 lg:p-8 bg-background text-foreground">
+    <div class="max-w-[1500px] mx-auto">
+      <div class="flex items-center justify-between gap-4 mb-6">
+        <div>
+          <h1 class="text-2xl font-semibold">{{ t('nav.connections', '连接管理') }}</h1>
+          <p class="mt-1 text-sm text-text-secondary">
+            {{ currentRangeHint }}
+          </p>
+        </div>
+        <div class="hidden lg:flex items-center gap-2 text-sm text-text-secondary">
+          <span class="px-3 py-1 rounded-full border border-border bg-header/60">
+            {{ selectedScopeTitle }}
+          </span>
+          <span class="px-3 py-1 rounded-full border border-border bg-header/60">
+            {{ filteredAndSortedConnections.length }} {{ t('connections.resultUnit', '条结果') }}
+          </span>
         </div>
       </div>
 
-      <!-- Batch Action Buttons -->
-      <div v-if="isBatchEditMode" class="px-4 py-2 border-b border-border bg-card flex flex-wrap items-center gap-2">
-        <button
-          @click="selectAllConnections"
-          class="px-3 py-1.5 text-sm bg-transparent text-text-secondary border border-border rounded-md shadow-sm hover:bg-border hover:text-foreground focus:outline-none transition duration-150 ease-in-out"
-        >
-          {{ t('connections.batchEdit.selectAll', '全选') }} ({{ selectedConnectionIdsForBatch.size }})
-        </button>
-        <button
-          @click="deselectAllConnections"
-          class="px-3 py-1.5 text-sm bg-transparent text-text-secondary border border-border rounded-md shadow-sm hover:bg-border hover:text-foreground focus:outline-none transition duration-150 ease-in-out"
-        >
-          {{ t('connections.batchEdit.deselectAll', '取消全选') }}
-        </button>
-        <button
-          @click="invertSelection"
-          class="px-3 py-1.5 text-sm bg-transparent text-text-secondary border border-border rounded-md shadow-sm hover:bg-border hover:text-foreground focus:outline-none transition duration-150 ease-in-out"
-        >
-          {{ t('connections.batchEdit.invertSelection', '反选') }}
-        </button>
-        <button
-          @click="openBatchEditModal"
-          :disabled="selectedConnectionIdsForBatch.size === 0"
-          class="px-4 py-1.5 text-sm bg-button text-button-text rounded-md shadow-sm hover:bg-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition duration-150 ease-in-out disabled:opacity-50 disabled:cursor-not-allowed"
-        >
-          <i class="fas fa-edit mr-1" style="color: white;"></i>
-          {{ t('connections.batchEdit.editSelected', '编辑选中') }}
-        </button>
-        <button
-          @click="handleBatchDeleteConnections"
-          :disabled="selectedConnectionIdsForBatch.size === 0 || isDeletingSelectedConnections"
-          class="px-4 py-1.5 text-sm bg-red-600 text-white rounded-md shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition duration-150 ease-in-out disabled:opacity-50 disabled:cursor-not-allowed flex items-center"
-          :title="t('connections.batchEdit.deleteSelectedTooltip', '删除选中的连接')"
-        >
-          <i v-if="isDeletingSelectedConnections" class="fas fa-spinner fa-spin mr-1.5" style="color: white;"></i>
-          <i v-else class="fas fa-trash-alt mr-1.5" style="color: white;"></i>
-          <span>{{ t('connections.batchEdit.deleteSelectedButton', '删除选中') }}</span>
-        </button>
-      </div>
-
-      <div class="p-4">
-        <div v-if="isLoadingConnections && filteredAndSortedConnections.length === 0" class="text-center text-text-secondary">{{ t('common.loading') }}</div>
-        <ul v-else-if="filteredAndSortedConnections.length > 0" class="space-y-3">
-          <li
-            v-for="conn in filteredAndSortedConnections"
-            :key="conn.id"
-            @click="handleConnectionClick(conn.id)"
-            :class="[
-              'flex items-center p-3 bg-header/50 border border-border/50 rounded transition duration-150 ease-in-out', // Changed: items-center, removed justify-between
-              { 'ring-2 ring-primary ring-offset-1 ring-offset-background': isBatchEditMode && isConnectionSelectedForBatch(conn.id) },
-              { 'cursor-pointer hover:bg-border/70': isBatchEditMode },
-              { 'hover:bg-border/30': !isBatchEditMode }
-            ]"
-          >
-            <div class="flex-1 min-w-0 mr-3"> <!-- Changed: flex-1 min-w-0 mr-3 -->
-              <span class="font-medium block truncate flex items-center" :title="conn.name || ''">
-                <i :class="['fas', conn.type === 'VNC' ? 'fa-plug' : (conn.type === 'RDP' ? 'fa-desktop' : 'fa-server'), 'mr-2 w-4 text-center text-text-secondary']"></i>
-                <span>{{ conn.name || conn.host || t('connections.unnamedFallback', '未命名连接') }}</span>
-              </span>
-              <span class="text-sm text-text-secondary block truncate" :title="`${conn.username}@${conn.host}:${conn.port}`">
-                {{ conn.username }}@{{ conn.host }}:{{ conn.port }}
-              </span>
-              <span class="text-xs text-text-alt block">
-                {{ t('dashboard.lastConnected', '上次连接:') }} {{ formatRelativeTime(conn.last_connected_at) }}
-              </span>
-              <!-- 备注信息移到这里 -->
-              <div v-if="conn.notes && conn.notes.trim() !== ''" class="text-xs text-text-secondary mt-1">
-                <span class="font-medium text-text-alt">{{ t('connections.form.notes', '备注:') }}</span>
-                <span class="break-words leading-snug ml-1" :title="conn.notes">
-                  {{ getTruncatedNotes(conn.notes) }}
-                </span>
+      <div class="grid grid-cols-1 xl:grid-cols-[280px_minmax(0,1fr)] gap-4">
+        <aside class="bg-card text-card-foreground border border-border rounded-2xl overflow-hidden min-h-[720px]">
+          <div class="px-4 py-4 border-b border-border/60 bg-header/40">
+            <div class="flex items-center justify-between gap-3">
+              <div>
+                <h2 class="text-sm font-semibold tracking-wide text-foreground">{{ t('connections.scopeTitle', '浏览范围') }}</h2>
+                <p class="mt-1 text-xs text-text-secondary">{{ t('connections.scopeDesc', '按标签和分组快速切换连接范围') }}</p>
               </div>
-              <div v-if="getTagNames(conn.tag_ids).length > 0" class="flex flex-wrap gap-1 mt-1.5">
-                <span
-                  v-for="tagName in getTagNames(conn.tag_ids)"
-                  :key="tagName"
-                  class="px-1.5 py-0.5 text-xs rounded bg-muted text-muted-foreground border border-border"
-                >
-                  {{ tagName }}
-                </span>
-              </div>
-              <!-- Test Result Display -->
-              <div
-                v-if="conn.type === 'SSH' && connectionTestStates.get(conn.id) && connectionTestStates.get(conn.id)?.status !== 'idle'"
-                class="text-xs mt-1.5 pt-1 border-t border-border/30"
+              <button
+                @click="tagsSectionExpanded = !tagsSectionExpanded"
+                class="w-8 h-8 rounded-lg border border-border/60 bg-background text-text-secondary hover:bg-border hover:text-foreground transition-colors"
+                :title="tagsSectionExpanded ? t('common.collapse', '收起') : t('common.expand', '展开')"
               >
-                <div v-if="connectionTestStates.get(conn.id)?.status === 'testing'" class="text-text-secondary animate-pulse flex items-center">
-                  <i class="fas fa-spinner fa-spin mr-1.5 text-xs"></i>
-                  {{ t('connections.test.testingInProgress', '测试中...') }}
-                </div>
-                <div
-                  v-else-if="connectionTestStates.get(conn.id)?.status === 'success'"
-                  class="font-medium flex items-center"
-                  :style="{ color: connectionTestStates.get(conn.id)?.latencyColor || 'inherit' }"
+                <i :class="['fas', tagsSectionExpanded ? 'fa-chevron-up' : 'fa-chevron-down']"></i>
+              </button>
+            </div>
+          </div>
+
+          <div class="p-3 space-y-5">
+            <section>
+              <div class="px-2 mb-2 text-xs font-semibold uppercase tracking-[0.18em] text-text-secondary/80">
+                {{ t('connections.scopePrimary', '视图') }}
+              </div>
+              <div class="space-y-1">
+                <button
+                  v-for="node in primaryScopeNodes"
+                  :key="node.id"
+                  @click="selectScope(node.id)"
+                  :class="[
+                    'w-full flex items-center justify-between gap-3 rounded-xl border px-3 py-2.5 text-left transition-all duration-150',
+                    getScopeNodeClass(node.id)
+                  ]"
                 >
-                  <i class="fas fa-check-circle mr-1.5 text-xs"></i>
-                  {{ connectionTestStates.get(conn.id)?.resultText }}
-                </div>
-                <div
-                  v-else-if="connectionTestStates.get(conn.id)?.status === 'error'"
-                  class="text-error font-medium flex items-center"
+                  <span class="flex items-center gap-2 min-w-0">
+                    <i :class="['fas', node.id === 'all' ? 'fa-layer-group' : 'fa-tag', 'w-4 text-center']"></i>
+                    <span class="truncate">{{ node.label }}</span>
+                  </span>
+                  <span class="px-2 py-0.5 rounded-full text-xs border border-current/15 bg-black/10">
+                    {{ node.count }}
+                  </span>
+                </button>
+              </div>
+            </section>
+
+            <section>
+              <div class="px-2 mb-2 flex items-center justify-between gap-3 text-xs font-semibold uppercase tracking-[0.18em] text-text-secondary/80">
+                <span>{{ t('connections.table.tags', '标签') }}</span>
+                <span class="text-[11px] tracking-normal normal-case text-text-secondary">{{ tagTreeNodes.length }}</span>
+              </div>
+
+              <div v-show="tagsSectionExpanded" class="space-y-1 max-h-[520px] overflow-y-auto pr-1">
+                <button
+                  v-for="node in tagTreeNodes"
+                  :key="node.id"
+                  @click="selectScope(node.id)"
+                  :class="[
+                    'w-full flex items-center justify-between gap-3 rounded-xl border px-3 py-2.5 text-left transition-all duration-150',
+                    getScopeNodeClass(node.id),
+                    node.count === 0 ? 'opacity-55' : ''
+                  ]"
                 >
-                  <i class="fas fa-times-circle mr-1.5 text-xs"></i>
-                  {{ t('connections.test.errorPrefix', '错误:') }} {{ connectionTestStates.get(conn.id)?.resultText }}
+                  <span class="flex items-center gap-2 min-w-0">
+                    <i class="fas fa-folder-tree w-4 text-center"></i>
+                    <span class="truncate">{{ node.label }}</span>
+                  </span>
+                  <span class="px-2 py-0.5 rounded-full text-xs border border-current/15 bg-black/10">
+                    {{ node.count }}
+                  </span>
+                </button>
+              </div>
+            </section>
+          </div>
+        </aside>
+
+        <section class="bg-card text-card-foreground border border-border rounded-2xl overflow-hidden min-h-[720px] flex flex-col">
+          <div class="px-4 py-4 border-b border-border/60 bg-header/30">
+            <div class="flex flex-col gap-3">
+              <div class="flex flex-col lg:flex-row lg:items-center gap-3">
+                <div class="relative flex-1 min-w-0">
+                  <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-text-secondary text-sm"></i>
+                  <input
+                    v-model="searchQuery"
+                    type="text"
+                    :placeholder="t('dashboard.searchConnectionsPlaceholder', '搜索连接...')"
+                    class="w-full h-11 pl-10 pr-4 rounded-xl border border-border/60 bg-background text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition"
+                  />
+                </div>
+
+                <div class="flex items-center gap-2 flex-wrap">
+                  <button
+                    @click="openAddConnectionForm"
+                    class="h-11 px-4 rounded-xl bg-button text-button-text border border-button shadow-sm hover:bg-button-hover transition-colors inline-flex items-center gap-2"
+                    :title="t('connections.addConnection', '新增连接')"
+                  >
+                    <i class="fas fa-plus"></i>
+                    <span>{{ t('connections.addConnection', '新增连接') }}</span>
+                  </button>
+                  <button
+                    @click="handleTestAllFilteredConnections"
+                    :disabled="isTestingAll || isLoadingConnections || !filteredAndSortedConnections.some(c => c.type === 'SSH')"
+                    class="h-11 px-4 rounded-xl border border-border bg-background text-foreground hover:bg-border transition-colors inline-flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
+                  >
+                    <i :class="['fas', isTestingAll ? 'fa-spinner fa-spin' : 'fa-check-double']"></i>
+                    <span>{{ t('connections.actions.testAllFiltered', '测试全部') }}</span>
+                  </button>
+                  <button
+                    @click="handleConnectAllFilteredConnections"
+                    :disabled="isConnectingAll || isLoadingConnections || !filteredAndSortedConnections.some(c => c.type === 'SSH')"
+                    class="h-11 px-4 rounded-xl border border-border bg-background text-foreground hover:bg-border transition-colors inline-flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
+                  >
+                    <i :class="['fas', isConnectingAll ? 'fa-spinner fa-spin' : 'fa-network-wired']"></i>
+                    <span>{{ t('workspaceConnectionList.connectAllSshInGroupMenu', '连接全部') }}</span>
+                  </button>
+                </div>
+              </div>
+
+              <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-3">
+                <div class="flex items-center gap-2 flex-wrap">
+                  <button
+                    v-for="filterItem in typeCounts"
+                    :key="filterItem.value"
+                    @click="activeTypeFilter = filterItem.value"
+                    :class="[
+                      'h-9 px-3 rounded-xl border text-sm inline-flex items-center gap-2 transition-colors',
+                      getTypePillClass(filterItem.value)
+                    ]"
+                  >
+                    <span>{{ filterItem.label }}</span>
+                    <span class="px-2 py-0.5 rounded-full text-xs bg-black/10 border border-current/15">
+                      {{ filterItem.count }}
+                    </span>
+                  </button>
+                </div>
+
+                <div class="flex items-center gap-2 flex-wrap">
+                  <div class="flex items-center mr-2">
+                    <label for="batch-edit-toggle" class="mr-2 text-sm font-medium text-text-secondary">
+                      {{ t('connections.batchEdit.toggleLabel', '批量修改') }}
+                    </label>
+                    <button
+                      id="batch-edit-toggle"
+                      @click="toggleBatchEditMode"
+                      :class="[
+                        'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary',
+                        isBatchEditMode ? 'bg-primary' : 'bg-gray-300 dark:bg-gray-600'
+                      ]"
+                      role="switch"
+                      :aria-checked="isBatchEditMode"
+                    >
+                      <span
+                        aria-hidden="true"
+                        :class="[
+                          'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200',
+                          isBatchEditMode ? 'translate-x-5' : 'translate-x-0'
+                        ]"
+                      ></span>
+                    </button>
+                  </div>
+
+                  <select
+                    v-model="localSortBy"
+                    class="h-9 px-3 py-1 text-sm border border-border rounded-xl bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary"
+                  >
+                    <option v-for="option in sortOptions" :key="option.value" :value="option.value">
+                      {{ t(option.labelKey, option.value.replace('_', ' ')) }}
+                    </option>
+                  </select>
+
+                  <button
+                    @click="toggleSortOrder"
+                    class="h-9 w-9 border border-border rounded-xl hover:bg-border focus:outline-none focus:ring-1 focus:ring-primary inline-flex items-center justify-center"
+                    :aria-label="isAscending ? t('common.sortAscending', '升序') : t('common.sortDescending', '降序')"
+                    :title="isAscending ? t('common.sortAscending', '升序') : t('common.sortDescending', '降序')"
+                  >
+                    <i :class="['fas', isAscending ? 'fa-arrow-up-a-z' : 'fa-arrow-down-z-a']"></i>
+                  </button>
                 </div>
               </div>
             </div>
-            <!-- 中间备注区域已被移除 -->
-            <div class="flex items-center space-x-2 flex-shrink-0">
-              <!-- Test Single Connection Button -->
-              <button
-                v-if="conn.type === 'SSH'"
-                @click.stop="handleTestSingleConnection(conn)"
-                :disabled="isBatchEditMode || getSingleTestButtonInfo(conn.id, conn.type).disabled"
-                class="px-3 py-1.5 bg-transparent text-foreground border border-border rounded-md shadow-sm hover:bg-border focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition duration-150 ease-in-out text-sm font-medium h-9 flex items-center justify-center"
-                :class="{ 'opacity-50 cursor-not-allowed': isBatchEditMode || getSingleTestButtonInfo(conn.id, conn.type).disabled }"
-                :title="getSingleTestButtonInfo(conn.id, conn.type).title"
-              >
-                <i :class="[getSingleTestButtonInfo(conn.id, conn.type).iconClass, 'w-4 text-center', getSingleTestButtonInfo(conn.id, conn.type).textKey !== 'connections.actions.testing' ? 'mr-1' : '']"></i>
-                <span v-if="getSingleTestButtonInfo(conn.id, conn.type).textKey !== 'connections.actions.testing'">{{ t(getSingleTestButtonInfo(conn.id, conn.type).textKey) }}</span>
-              </button>
-              <button
-                @click.stop="openEditConnectionForm(conn)"
-                class="px-3 py-1.5 bg-transparent text-foreground border border-border rounded-md shadow-sm hover:bg-border focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition duration-150 ease-in-out text-sm font-medium h-9 flex items-center justify-center"
-                :disabled="isBatchEditMode"
-                :class="{ 'opacity-50 cursor-not-allowed': isBatchEditMode }"
-              >
-                <i class="fas fa-pencil-alt mr-1"></i>{{ t('connections.actions.edit') }}
-              </button>
-              <button
-                @click.stop="connectTo(conn)"
-                class="px-4 py-2 bg-button text-button-text rounded-md shadow-sm hover:bg-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition duration-150 ease-in-out text-sm font-medium h-9 flex items-center justify-center"
-                :disabled="isBatchEditMode"
-                :class="{ 'opacity-50 cursor-not-allowed': isBatchEditMode }"
-              >
-                {{ t('connections.actions.connect') }}
-              </button>
+          </div>
+
+          <div v-if="isBatchEditMode" class="px-4 py-3 border-b border-border/50 bg-background/70 flex flex-wrap items-center gap-2">
+            <button
+              @click="selectAllConnections"
+              class="px-3 py-1.5 text-sm bg-transparent text-text-secondary border border-border rounded-lg hover:bg-border hover:text-foreground transition-colors"
+            >
+              {{ t('connections.batchEdit.selectAll', '全选') }} ({{ selectedResultCount }})
+            </button>
+            <button
+              @click="deselectAllConnections"
+              class="px-3 py-1.5 text-sm bg-transparent text-text-secondary border border-border rounded-lg hover:bg-border hover:text-foreground transition-colors"
+            >
+              {{ t('connections.batchEdit.deselectAll', '取消全选') }}
+            </button>
+            <button
+              @click="invertSelection"
+              class="px-3 py-1.5 text-sm bg-transparent text-text-secondary border border-border rounded-lg hover:bg-border hover:text-foreground transition-colors"
+            >
+              {{ t('connections.batchEdit.invertSelection', '反选') }}
+            </button>
+            <button
+              @click="openBatchEditModal"
+              :disabled="selectedResultCount === 0"
+              class="px-4 py-1.5 text-sm bg-button text-button-text rounded-lg hover:bg-button-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              <i class="fas fa-edit mr-1"></i>{{ t('connections.batchEdit.editSelected', '编辑选中') }}
+            </button>
+            <button
+              @click="handleBatchDeleteConnections"
+              :disabled="selectedResultCount === 0 || isDeletingSelectedConnections"
+              class="px-4 py-1.5 text-sm bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              <i :class="['fas', isDeletingSelectedConnections ? 'fa-spinner fa-spin' : 'fa-trash-alt', 'mr-1']"></i>
+              {{ t('connections.batchEdit.deleteSelectedButton', '删除选中') }}
+            </button>
+          </div>
+
+          <div class="flex-1 min-h-0 overflow-y-auto">
+            <div v-if="isLoadingConnections && filteredAndSortedConnections.length === 0" class="flex items-center justify-center h-full text-text-secondary">
+              <i class="fas fa-spinner fa-spin mr-2"></i>{{ t('common.loading', '加载中') }}
             </div>
-          </li>
-        </ul>
-        <div v-else-if="!isLoadingConnections && searchQuery && filteredAndSortedConnections.length === 0" class="text-center text-text-secondary">{{ t('dashboard.noConnectionsMatchSearch', '没有连接匹配搜索条件') }}</div>
-        <div v-else-if="!isLoadingConnections && selectedTagId !== null && filteredAndSortedConnections.length === 0" class="text-center text-text-secondary">{{ t('dashboard.noConnectionsWithTag', '该标签下没有连接记录') }}</div>
-        <div v-else class="text-center text-text-secondary">{{ t('dashboard.noConnections', '没有连接记录') }}</div>
-        </div>
+
+            <div v-else-if="filteredAndSortedConnections.length === 0" class="flex flex-col items-center justify-center h-full px-6 text-center text-text-secondary">
+              <i class="fas fa-search text-2xl mb-3"></i>
+              <p class="text-base font-medium text-foreground">
+                {{ t('dashboard.noConnectionsMatchSearch', '没有连接匹配搜索条件') }}
+              </p>
+              <p class="mt-2 text-sm">
+                {{ currentRangeHint }}
+              </p>
+            </div>
+
+            <div v-else class="min-w-0">
+              <div class="hidden xl:grid grid-cols-[minmax(0,2.2fr)_minmax(0,1.4fr)_minmax(0,1.3fr)_160px_220px] gap-4 px-4 py-3 text-xs font-semibold uppercase tracking-[0.16em] text-text-secondary border-b border-border/50 bg-background/40 sticky top-0 z-10">
+                <div>{{ t('connections.table.name', '名称') }}</div>
+                <div>{{ t('connections.table.host', '地址') }}</div>
+                <div>{{ t('connections.table.tags', '标签 / 备注') }}</div>
+                <div>{{ t('dashboard.lastConnected', '上次连接') }}</div>
+                <div>{{ t('connections.table.actions', '操作') }}</div>
+              </div>
+
+              <ul class="divide-y divide-border/50">
+                <li
+                  v-for="conn in filteredAndSortedConnections"
+                  :key="conn.id"
+                  @click="handleConnectionClick(conn.id)"
+                  :class="[
+                    'px-4 py-4 transition-colors duration-150',
+                    isBatchEditMode ? 'cursor-pointer hover:bg-border/30' : 'hover:bg-header/25',
+                    isBatchEditMode && isConnectionSelectedForBatch(conn.id) ? 'bg-primary/10' : ''
+                  ]"
+                >
+                  <div class="grid grid-cols-1 xl:grid-cols-[minmax(0,2.2fr)_minmax(0,1.4fr)_minmax(0,1.3fr)_160px_220px] gap-4 items-start">
+                    <div class="min-w-0 flex items-start gap-3">
+                      <input
+                        v-if="isBatchEditMode"
+                        type="checkbox"
+                        class="mt-1 h-4 w-4 rounded border-border bg-background text-primary focus:ring-primary"
+                        :checked="isConnectionSelectedForBatch(conn.id)"
+                        @click.stop="handleConnectionClick(conn.id)"
+                        @change.stop
+                      />
+
+                      <div class="min-w-0 flex-1">
+                        <div class="flex flex-wrap items-center gap-2">
+                          <span :class="['inline-flex items-center gap-1 px-2 py-0.5 rounded-full border text-xs font-medium', getTypeBadgeClass(conn.type)]">
+                            <i :class="['fas', conn.type === 'SSH' ? 'fa-server' : conn.type === 'RDP' ? 'fa-desktop' : 'fa-plug']"></i>
+                            {{ conn.type }}
+                          </span>
+                          <h3 class="text-base font-semibold text-foreground truncate" :title="conn.name || conn.host">
+                            {{ conn.name || conn.host || t('connections.unnamedFallback', '未命名连接') }}
+                          </h3>
+                        </div>
+                        <div class="mt-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-text-secondary">
+                          <span>{{ conn.username }}</span>
+                          <span>{{ conn.auth_method }}</span>
+                          <span>{{ conn.port }}</span>
+                          <span>{{ t('connections.createdAt', '创建于') }} {{ formatRelativeTime(conn.created_at) }}</span>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div class="min-w-0">
+                      <div class="text-sm font-medium text-foreground truncate" :title="conn.host">
+                        {{ conn.host }}
+                      </div>
+                      <div class="mt-2 text-sm text-text-secondary truncate" :title="`${conn.username}@${conn.host}:${conn.port}`">
+                        {{ conn.username }}@{{ conn.host }}:{{ conn.port }}
+                      </div>
+                      <div class="mt-2 text-xs text-text-secondary">
+                        {{ conn.proxy_type ? `${t('connections.proxyType', '代理')}: ${conn.proxy_type}` : t('connections.noProxy', '未使用代理') }}
+                      </div>
+                    </div>
+
+                    <div class="min-w-0">
+                      <div class="flex flex-wrap gap-1.5">
+                        <span
+                          v-for="tagName in getConnectionTagNames(conn)"
+                          :key="tagName"
+                          class="px-2 py-0.5 text-xs rounded-full bg-header border border-border text-text-secondary"
+                        >
+                          {{ tagName }}
+                        </span>
+                        <span
+                          v-if="getConnectionTagNames(conn).length === 0"
+                          class="px-2 py-0.5 text-xs rounded-full bg-background border border-dashed border-border text-text-secondary"
+                        >
+                          {{ t('connections.untaggedGroup', '未标记') }}
+                        </span>
+                      </div>
+                      <div v-if="conn.notes && conn.notes.trim() !== ''" class="mt-2 text-sm text-text-secondary leading-relaxed" :title="conn.notes">
+                        {{ getTruncatedNotes(conn.notes) }}
+                      </div>
+                    </div>
+
+                    <div class="min-w-0">
+                      <div class="text-sm font-medium text-foreground">
+                        {{ formatRelativeTime(conn.last_connected_at) }}
+                      </div>
+                      <div
+                        v-if="conn.type === 'SSH' && connectionTestStates.get(conn.id) && connectionTestStates.get(conn.id)?.status !== 'idle'"
+                        class="mt-2 text-sm font-medium"
+                        :class="connectionTestStates.get(conn.id)?.status === 'error' ? 'text-error' : ''"
+                        :style="connectionTestStates.get(conn.id)?.status === 'success' ? { color: connectionTestStates.get(conn.id)?.latencyColor || 'inherit' } : {}"
+                      >
+                        <i
+                          :class="[
+                            'fas mr-1.5 text-xs',
+                            connectionTestStates.get(conn.id)?.status === 'testing'
+                              ? 'fa-spinner fa-spin'
+                              : connectionTestStates.get(conn.id)?.status === 'success'
+                                ? 'fa-check-circle'
+                                : 'fa-times-circle'
+                          ]"
+                        ></i>
+                        {{ connectionTestStates.get(conn.id)?.resultText }}
+                      </div>
+                    </div>
+
+                    <div class="flex flex-wrap justify-start xl:justify-end gap-2">
+                      <button
+                        v-if="conn.type === 'SSH'"
+                        @click.stop="handleTestSingleConnection(conn)"
+                        :disabled="isBatchEditMode || getSingleTestButtonInfo(conn.id, conn.type).disabled"
+                        class="px-3 py-2 rounded-lg border border-border bg-background text-foreground hover:bg-border transition-colors disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center gap-2 text-sm"
+                        :title="getSingleTestButtonInfo(conn.id, conn.type).title"
+                      >
+                        <i :class="getSingleTestButtonInfo(conn.id, conn.type).iconClass"></i>
+                        <span>{{ getSingleTestButtonInfo(conn.id, conn.type).text }}</span>
+                      </button>
+
+                      <button
+                        @click.stop="openEditConnectionForm(conn)"
+                        :disabled="isBatchEditMode"
+                        class="px-3 py-2 rounded-lg border border-border bg-background text-foreground hover:bg-border transition-colors disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center gap-2 text-sm"
+                      >
+                        <i class="fas fa-pen"></i>
+                        <span>{{ t('connections.actions.edit', '编辑') }}</span>
+                      </button>
+
+                      <button
+                        @click.stop="connectTo(conn)"
+                        :disabled="isBatchEditMode"
+                        class="px-4 py-2 rounded-lg bg-button text-button-text border border-button hover:bg-button-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center gap-2 text-sm font-medium"
+                      >
+                        <i class="fas fa-arrow-right-to-bracket"></i>
+                        <span>{{ t('connections.actions.connect', '连接') }}</span>
+                      </button>
+                    </div>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </section>
       </div>
-    </div> <!-- 结束新增的包裹层 -->
 
-    <AddConnectionForm
-      v-if="showAddEditConnectionForm"
-      :connectionToEdit="connectionToEdit"
-      @close="handleFormClose"
-      @connection-added="handleConnectionModified"
-      @connection-updated="handleConnectionModified"
-    />
+      <AddConnectionForm
+        v-if="showAddEditConnectionForm"
+        :connectionToEdit="connectionToEdit"
+        @close="handleFormClose"
+        @connection-added="handleConnectionModified"
+        @connection-updated="handleConnectionModified"
+      />
 
-    <BatchEditConnectionForm
-      v-if="showBatchEditForm"
-      :visible="showBatchEditForm"
-      :connection-ids="Array.from(selectedConnectionIdsForBatch)"
-      @update:visible="handleBatchEditFormClose"
-      @saved="handleBatchEditSaved"
-    />
+      <BatchEditConnectionForm
+        v-if="showBatchEditForm"
+        :visible="showBatchEditForm"
+        :connection-ids="Array.from(selectedConnectionIdsForBatch)"
+        @update:visible="handleBatchEditFormClose"
+        @saved="handleBatchEditSaved"
+      />
+    </div>
   </div>
-</template>
\ No newline at end of file
+</template>