feat(frontend): 新增全局服务器快捷检索并优化工作台
新增 Ctrl+Shift+F 全局服务器检索面板，支持对 SSH、 RDP、VNC 连接进行本地模糊搜索、键盘导航与直接连接， 并统一复用现有 sessionStore 连接链路 同时将 Workbench 导航从左侧竖排 icon rail 调整为标题上方 横向纯图标栏，并补充终端标签页“关闭全部”菜单项
This commit is contained in:
yinjianm
@@ -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 内部导航层级，不改三栏主布局和四个面板的组件关系。
|
||||
- 用户已确认保留纯图标风格，不切到“图标 + 文本”标签样式。
|
||||
Reference in New Issue
Block a user