feat(frontend): 新增全局服务器快捷检索并优化工作台

新增 Ctrl+Shift+F 全局服务器检索面板，支持对 SSH、 RDP、VNC 连接进行本地模糊搜索、键盘导航与直接连接，并统一复用现有 sessionStore 连接链路同时将 Workbench 导航从左侧竖排 icon rail 调整为标题上方横向纯图标栏，并补充终端标签页“关闭全部”菜单项
2026-03-30 02:18:23 +08:00
parent d3e8d598b8
commit 6160be6e08
16 changed files with 811 additions and 57 deletions
@@ -0,0 +1 @@
+{"status":"completed","completed":6,"failed":0,"pending":0,"total":6,"done":6,"percent":100,"current":"全局服务器快捷检索与连接链路已完成","updated_at":"2026-03-30 02:28:00"}
@@ -0,0 +1,127 @@
+# 变更提案: global-server-quick-search
+
+## 元信息
+```yaml
+类型: 新功能
+方案类型: implementation
+优先级: P1
+状态: 开发中
+状态说明: 为已登录用户新增全局服务器快捷检索面板，复用现有连接链路自动进入工作区或打开远程桌面弹窗
+创建: 2026-03-30
+```
+
+---
+
+## 1. 需求
+
+### 背景
+当前工作区只在局部位置提供服务器搜索与连接能力：顶部 `+` 弹窗里的连接列表支持搜索，`WorkspaceConnectionList.vue` 也支持本地筛选和键盘上下切换，但用户无法在任意已登录页面直接用快捷键唤起“搜索服务器并立即连接”的全局入口。
+
+### 目标
+- 为已登录状态新增全局快捷键 `Ctrl+Shift+F`
+- 按下后弹出独立输入框/面板，可按关键词模糊检索所有连接类型的服务器
+- 支持 `ArrowUp` / `ArrowDown` 在候选结果中切换，`Enter` 选中后自动连接
+- 连接动作必须复用现有 `sessionStore.handleConnectRequest()` 链路，保持 SSH / RDP / VNC 的既有行为一致
+
+### 约束条件
+```yaml
+时间约束: 本轮完成前端最小闭环，不扩展到后端接口和持久化最近搜索
+性能约束: 搜索在前端本地完成，结果限制在少量高相关候选，避免每次输入都触发远程请求
+兼容性约束: 不破坏现有 Alt 焦点切换、工作区连接列表搜索和既有 SSH/RDP/VNC 连接逻辑
+业务约束: 搜索范围固定为所有连接类型（SSH / RDP / VNC）
+```
+
+### 验收标准
+- [x] 已登录页面按下 `Ctrl+Shift+F` 能打开全局服务器检索面板
+- [x] 输入任意关键词后，能对 `SSH / RDP / VNC` 连接做模糊匹配并按相关度排序
+- [x] 面板支持 `ArrowUp` / `ArrowDown` 切换高亮项，`Enter` 自动连接，`Esc` 关闭
+- [x] 选中 `SSH` 时自动进入 `/workspace` 并按既有逻辑打开/激活会话
+- [x] 选中 `RDP / VNC` 时复用现有弹窗逻辑，不破坏原有连接行为
+- [ ] 前端构建通过
+
+---
+
+## 2. 方案
+
+### 技术方案
+在 `App.vue` 注册全局快捷键监听，新增一个独立的全局连接检索组件承载输入框、结果列表和键盘导航。组件内部使用轻量模糊评分函数，对连接名称、主机、用户名和类型做本地排序；`App.vue` 在面板打开时确保连接缓存已加载，并在用户确认后直接调用 `sessionStore.handleConnectRequest(connection)`，利用现有逻辑处理 SSH 新建/重连、RDP 弹窗、VNC 弹窗和自动路由跳转。
+
+### 影响范围
+```yaml
+涉及模块:
+  - frontend: App.vue 负责全局快捷键监听、面板生命周期和连接提交
+  - frontend: 新增全局连接检索组件/工具，负责模糊检索、结果渲染与键盘导航
+  - frontend: locale 文案，补齐面板标题、占位符、空态和提示语
+预计变更文件: 5-7
+```
+
+### 风险评估
+| 风险 | 等级 | 应对 |
+|------|------|------|
+| 全局键盘监听与现有 Alt 快捷键或输入框事件冲突 | 中 | 面板打开时优先消费快捷键，并对 Alt 逻辑加早退保护 |
+| 不引入第三方库时模糊匹配排序不稳定 | 低 | 使用“精确包含优先 + 子序列匹配兜底”的轻量评分策略，并限制结果数量 |
+| 非工作区页面直接连接遗漏既有跳转逻辑 | 低 | 统一走 `sessionStore.handleConnectRequest()`，由既有 router 负责跳转到 `/workspace` |
+
+---
+
+## 3. 技术设计（可选）
+
+> 涉及架构变更、API设计、数据模型变更时填写
+
+### 架构设计
+```mermaid
+flowchart TD
+    A[App.vue 全局快捷键] --> B[GlobalConnectionQuickSearch]
+    B --> C[connectionSearch 工具]
+    B --> D[sessionStore.handleConnectRequest]
+    D --> E[Workspace / RDP / VNC 既有链路]
+```
+
+### API设计
+N/A，复用现有前端 store 与路由逻辑，不新增接口。
+
+### 数据模型
+| 字段 | 类型 | 说明 |
+|------|------|------|
+| `GlobalSearchItem` | 前端派生结构 | 由 `ConnectionInfo` 派生，用于面板渲染和提交连接 |
+| `query` | `string` | 当前检索关键词 |
+| `selectedIndex` | `number` | 当前高亮候选索引 |
+
+---
+
+## 4. 核心场景
+
+> 执行完成后同步到对应模块文档
+
+### 场景: 全局快捷检索并自动连接服务器
+**模块**: frontend
+**条件**: 用户已登录，位于任意受保护页面，连接数据可从缓存或接口获取
+**行为**: 用户按下 `Ctrl+Shift+F` 打开全局检索面板，输入关键词后通过键盘上下选择目标服务器，按下 `Enter` 后提交现有连接链路
+**结果**: SSH 自动进入工作区并打开/激活会话，RDP / VNC 继续使用既有弹窗连接逻辑
+
+---
+
+## 5. 技术决策
+
+> 本方案涉及的技术决策，归档后成为决策的唯一完整记录
+
+### global-server-quick-search#D001: 全局快捷检索直接复用 sessionStore 连接入口
+**日期**: 2026-03-30
+**状态**: ✅采纳
+**背景**: 全局检索需要在工作区外也能发起连接，如果复用 workspace 事件总线，会受当前视图是否挂载相关组件影响
+**选项分析**:
+| 选项 | 优点 | 缺点 |
+|------|------|------|
+| A: 直接调用 `sessionStore.handleConnectRequest()` | 可跨页面工作，自动复用 SSH/RDP/VNC 与路由逻辑，入口单一 | 需要在 App 层拿到 store 并管理连接数据 |
+| B: 复用 `workspaceEmitter` 的 `connection:connect` 事件 | 能沿用部分工作区现有事件流 | 非工作区页面不稳定，依赖 `TerminalTabBar` 等订阅方已挂载 |
+**决策**: 选择方案 A
+**理由**: 该需求强调“全局”唤起，必须保证不论当前处于仪表盘、连接管理还是工作区都能直达既有连接逻辑，因此直接走 `sessionStore` 是最稳定的主入口
+**影响**: 影响 `App.vue`、全局检索组件以及连接缓存加载时机
+
+---
+
+## 6. 成果设计
+
+> 含视觉产出的任务由 DESIGN Phase2 填充。非视觉任务整节标注"N/A"。
+
+N/A，本次为现有前端界面内的功能型弹层增强，沿用项目既有主题变量与组件风格，不单独引入新的视觉体系。
@@ -0,0 +1,57 @@
+# 任务清单: global-server-quick-search
+
+> **@status:** completed | 2026-03-30 02:15
+
+```yaml
+@feature: global-server-quick-search
+@created: 2026-03-30
+@status: completed
+@mode: R2
+```
+
+## 进度概览
+
+| 完成 | 失败 | 跳过 | 总数 |
+|------|------|------|------|
+| 6 | 0 | 0 | 6 |
+
+---
+
+## 任务列表
+
+### 1. 方案与范围确认
+
+- [√] 1.1 创建全局服务器快捷检索方案包并锁定为前端实现 | depends_on: []
+
+### 2. 全局检索能力实现
+
+- [√] 2.1 新增全局服务器检索面板与本地模糊匹配排序 | depends_on: [1.1]
+- [√] 2.2 在 `App.vue` 接入 `Ctrl+Shift+F` 打开/关闭逻辑并管理连接数据加载 | depends_on: [2.1]
+- [√] 2.3 接通上下键切换、回车自动连接与现有 `sessionStore` 连接链路 | depends_on: [2.2]
+
+### 3. 文案与验证
+
+- [√] 3.1 补齐多语言文案并执行前端构建验证 | depends_on: [2.3]
+- [√] 3.2 同步前端知识库与 CHANGELOG 记录并完成归档 | depends_on: [3.1]
+
+---
+
+## 执行日志
+
+| 时间 | 任务 | 状态 | 备注 |
+|------|------|------|------|
+| 2026-03-30 02:04 | 1.1 | 完成 | 创建 implementation 方案包，范围锁定为前端全局快捷检索与现有连接链路复用 |
+| 2026-03-30 02:12 | 2.1 | 完成 | 新增 `GlobalConnectionQuickSearch.vue` 与 `connectionSearch.ts`，提供本地模糊搜索和结果排序 |
+| 2026-03-30 02:15 | 2.2 | 完成 | `App.vue` 接入 `Ctrl+Shift+F` 全局快捷键、面板开关和连接列表加载 |
+| 2026-03-30 02:17 | 2.3 | 完成 | 接通上下键、回车自动连接与 `sessionStore.handleConnectRequest()` 复用链路 |
+| 2026-03-30 02:22 | 3.1 | 完成 | 补齐中英日文案，并通过 `npm run build --workspace @nexus-terminal/frontend` |
+| 2026-03-30 02:28 | 3.2 | 完成 | 已同步 `frontend` 模块文档与 CHANGELOG，准备归档方案包 |
+
+---
+
+## 执行备注
+
+> 记录执行过程中的重要说明、决策变更、风险提示等
+
+- 当前选择范围: 搜索所有连接类型（SSH / RDP / VNC）
+- 默认策略: 全局唤起、局部实现，不新增后端接口
@@ -0,0 +1,117 @@
+# 变更提案: workspace-workbench-top-tabs
+
+## 元信息
+```yaml
+类型: 优化
+方案类型: implementation
+优先级: P2
+状态: 已完成
+状态说明: 已完成实现、构建验证通过，待归档
+创建: 2026-03-30
+```
+
+---
+
+## 1. 需求
+
+### 背景
+当前 `WorkspaceWorkbench.vue` 把四个入口做成最左侧窄 icon rail，竖向贴在内容区左侧；用户希望保留纯图标按钮风格，但把导航挪到 `Workbench` 标题区上方，改成横向排列，以更符合预期的顶部工作台切换方式。
+
+### 目标
+- 保持 Workbench 的四个入口仍为纯图标按钮。
+- 将 `快捷指令 / 文件 / 历史命令 / 编辑器` 导航从左侧竖排 rail 改为顶部横向栏。
+- 保留现有 `Workbench` 头部信息与下方内容区切换逻辑，不改变三栏主布局与面板能力。
+
+### 约束条件
+```yaml
+范围约束: 仅调整 `packages/frontend/src/components/WorkspaceWorkbench.vue` 的导航结构与对应样式
+交互约束: 保持 `v-show` 常驻切换，不引入新的状态管理或路由逻辑
+视觉约束: 保留当前高对比深色渐变工作台风格，按钮仍以纯图标为主
+兼容性约束: 不改动 Workbench 四个面板的组件挂载关系，避免影响文件管理器与编辑器状态保持
+```
+
+### 验收标准
+- [ ] Workbench 导航显示在 header 上方，并按横向排列展示四个图标按钮
+- [ ] 当前激活态、hover 态和默认快捷指令初始选中行为保持不变
+- [ ] `Workbench` 标题、会话名和“工作台”标签仍保留在横向导航下方
+- [ ] 前端构建通过，无新增类型错误
+
+---
+
+## 2. 方案
+
+### 技术方案
+将 `WorkspaceWorkbench.vue` 的根布局从“左右两栏”改为“上下三段”：顶部 `workbench-rail` 横向图标栏、中部原有 `Workbench` header、底部内容区。复用现有 `workbenchTabs` 数据与 `activeWorkbenchTab` 切换逻辑，仅调整模板结构和 `workbench-rail` 样式方向，避免触碰四个面板组件的生命周期与数据流。
+
+### 影响范围
+```yaml
+涉及模块:
+  - frontend: 更新 Workbench 导航结构、样式与知识库文档描述
+预计变更文件: 4
+```
+
+### 风险评估
+| 风险 | 等级 | 应对 |
+|------|------|------|
+| 横向栏在窄宽度 pane 中压缩过度 | 低 | 保持纯图标按钮尺寸，并让导航容器支持横向排布 |
+| 调整容器层级后影响内容区高度计算 | 低 | 维持根容器 `flex-col` + 内容区 `flex-1 min-h-0` 结构 |
+| 知识库仍保留“左侧竖排 rail”旧描述 | 低 | 同步更新 `frontend.md` 与 `CHANGELOG.md` |
+
+---
+
+## 3. 技术设计（可选）
+
+N/A，本次不涉及 API、数据模型或跨组件数据流改造。
+
+---
+
+## 4. 核心场景
+
+> 执行完成后同步到对应模块文档
+
+### 场景: 工作台顶部导航切换
+**模块**: frontend
+**条件**: 用户进入 `/workspace`，左侧 Workbench pane 已展示。
+**行为**: 用户在 `Workbench` 标题区上方使用横向纯图标导航切换 `快捷指令 / 文件 / 历史命令 / 编辑器` 面板。
+**结果**: 内容区沿用现有常驻切换逻辑，仅切换可见面板，不重构整体三栏布局。
+
+---
+
+## 5. 技术决策
+
+> 本方案涉及的技术决策，归档后成为决策的唯一完整记录
+
+### workspace-workbench-top-tabs#D001: Workbench 导航改为顶部独立横向图标栏
+**日期**: 2026-03-30
+**状态**: ✅采纳
+**背景**: 用户明确要求将当前位于内容区左侧的竖排图标 rail 移到 `Workbench` header 上方，同时保留纯图标表现。
+**选项分析**:
+| 选项 | 优点 | 缺点 |
+|------|------|------|
+| A: 顶部独立一行横向图标栏 | 保留现有图标按钮密度；与 header 信息分层清晰；改动范围最小 | 占用少量垂直空间 |
+| B: 并入 header 同一行 | 视觉更紧凑 | 会挤压会话标题区域，窄宽度下更容易拥挤 |
+**决策**: 选择方案 A
+**理由**: 这是用户明确确认的方案，且只需调整模板层级与 rail 样式方向，不影响现有 header 文案布局和内容区状态保持。
+**影响**: 影响 `WorkspaceWorkbench.vue` 的 DOM 结构、样式方向，以及 `frontend.md` 中对 Workbench 导航形态的描述。
+
+---
+
+## 6. 成果设计
+
+> 含视觉产出的任务由 DESIGN Phase2 填充。非视觉任务整节标注"N/A"。
+
+### 设计方向
+- **美学基调**: 深色控制台工具条，像设备面板顶部功能拨片一样把四个入口压缩成紧凑横向导航
+- **记忆点**: 顶部一条窄而亮的图标导航带，与下方信息型 header 形成明显分层
+- **参考**: 用户提供的现有 Workbench 截图与“放到标题上方、横着排”的明确要求
+
+### 视觉要素
+- **配色**: 继续沿用现有深蓝黑渐变工具条，激活项保持 `primary` 高亮，非激活项维持低饱和灰阶
+- **字体**: 沿用项目现有字体体系，本次视觉重点不在字形，而在图标导航层级
+- **布局**: 顶部横向图标栏单独占一行，下方保留信息型 header，再下方为内容区
+- **动效**: 延续现有按钮 hover/active 过渡，不新增额外动画
+- **氛围**: rail 保留深色渐变与内阴影，但阴影方向从纵向分隔改为横向分隔
+
+### 技术约束
+- **可访问性**: 保留现有 `title` 与 `aria-label`，确保纯图标按钮仍可被识别
+- **响应式**: 顶部导航需在窄 pane 宽度下仍保持横向排列，不引入文字标签导致拥挤
@@ -0,0 +1,52 @@
+# 任务清单: workspace-workbench-top-tabs
+
+> **@status:** completed | 2026-03-30 02:12
+
+```yaml
+@feature: workspace-workbench-top-tabs
+@created: 2026-03-30
+@status: completed
+@mode: R2
+```
+
+## 进度概览
+
+| 完成 | 失败 | 跳过 | 总数 |
+|------|------|------|------|
+| 5 | 0 | 0 | 5 |
+
+---
+
+## 任务列表
+
+### 1. 方案与上下文
+
+- [√] 1.1 创建 Workbench 顶部横向导航方案包并记录用户确认的纯图标方案 | depends_on: []
+
+### 2. 前端实现
+
+- [√] 2.1 在 `packages/frontend/src/components/WorkspaceWorkbench.vue` 中将左侧竖排 rail 改为顶部横向图标导航栏 | depends_on: [1.1]
+- [√] 2.2 校准 `workbench-rail` 样式方向与容器层级，确保 header 与内容区高度计算不回归 | depends_on: [2.1]
+
+### 3. 验证与知识库同步
+
+- [√] 3.1 运行前端构建验证，确认本次 Workbench 结构调整无类型或打包错误 | depends_on: [2.2]
+- [√] 3.2 同步更新 `.helloagents/modules/frontend.md` 与 `.helloagents/CHANGELOG.md` 的 Workbench 导航描述 | depends_on: [3.1]
+
+---
+
+## 执行日志
+
+| 时间 | 任务 | 状态 | 备注 |
+|------|------|------|------|
+| 2026-03-30 02:06 | 1.1 | 完成 | 创建 implementation 方案包，并记录用户确认采用顶部横向纯图标导航 |
+| 2026-03-30 02:08 | 2.1 / 2.2 | 完成 | 将 Workbench 左侧竖排 icon rail 调整为 header 上方横向 icon rail，并同步 rail 渐变方向 |
+| 2026-03-30 02:09 | 3.1 | 完成 | 执行 `npm run build --workspace @nexus-terminal/frontend`，构建通过，仅保留既有 chunk 体积与 dynamic import 警告 |
+| 2026-03-30 02:10 | 3.2 | 完成 | 更新 frontend 模块文档与 CHANGELOG，准备归档 |
+
+---
+
+## 执行备注
+
+- 本次只调整 Workbench 内部导航层级，不改三栏主布局和四个面板的组件关系。
+- 用户已确认保留纯图标风格，不切到“图标 + 文本”标签样式。
				`@@ -0,0 +1 @@`
				`{"status":"completed","completed":6,"failed":0,"pending":0,"total":6,"done":6,"percent":100,"current":"全局服务器快捷检索与连接链路已完成","updated_at":"2026-03-30 02:28:00"}`