Files

T

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

新增 Ctrl+Shift+F 全局服务器检索面板，支持对 SSH、
RDP、VNC 连接进行本地模糊搜索、键盘导航与直接连接，
并统一复用现有 sessionStore 连接链路

同时将 Workbench 导航从左侧竖排 icon rail 调整为标题上方
横向纯图标栏，并补充终端标签页“关闭全部”菜单项

2026-03-30 02:18:23 +08:00

5.3 KiB

Raw Blame History

变更提案: workspace-workbench-top-tabs

元信息

类型: 优化
方案类型: implementation
优先级: P2
状态: 已完成
状态说明: 已完成实现、构建验证通过，待归档
创建: 2026-03-30

1. 需求

背景

当前 WorkspaceWorkbench.vue 把四个入口做成最左侧窄 icon rail，竖向贴在内容区左侧；用户希望保留纯图标按钮风格，但把导航挪到 Workbench 标题区上方，改成横向排列，以更符合预期的顶部工作台切换方式。

目标

保持 Workbench 的四个入口仍为纯图标按钮。
将 快捷指令 / 文件 / 历史命令 / 编辑器 导航从左侧竖排 rail 改为顶部横向栏。
保留现有 Workbench 头部信息与下方内容区切换逻辑，不改变三栏主布局与面板能力。

约束条件

范围约束: 仅调整 `packages/frontend/src/components/WorkspaceWorkbench.vue` 的导航结构与对应样式
交互约束: 保持 `v-show` 常驻切换，不引入新的状态管理或路由逻辑
视觉约束: 保留当前高对比深色渐变工作台风格，按钮仍以纯图标为主
兼容性约束: 不改动 Workbench 四个面板的组件挂载关系，避免影响文件管理器与编辑器状态保持

验收标准

Workbench 导航显示在 header 上方，并按横向排列展示四个图标按钮
当前激活态、hover 态和默认快捷指令初始选中行为保持不变
Workbench 标题、会话名和“工作台”标签仍保留在横向导航下方
前端构建通过，无新增类型错误

2. 方案

技术方案

将 WorkspaceWorkbench.vue 的根布局从“左右两栏”改为“上下三段”：顶部 workbench-rail 横向图标栏、中部原有 Workbench header、底部内容区。复用现有 workbenchTabs 数据与 activeWorkbenchTab 切换逻辑，仅调整模板结构和 workbench-rail 样式方向，避免触碰四个面板组件的生命周期与数据流。

影响范围

涉及模块:
  - 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 宽度下仍保持横向排列，不引入文字标签导致拥挤

5.3 KiB Raw Blame History