Files

T

yinjianm d3e8d598b8 feat(frontend): 重构工作区终端与导航交互

将 SSH 顶部标签改为服务器级切换入口，并把同服务器下的
多终端切换、新增与关闭下沉到终端面板内部，修正服务器与
终端的视觉层级

同时将 Workbench 导航改为左侧图标栏，并为终端标签右键菜单
补充“关闭全部”动作，完善相关多语言文案与工作区事件处理

2026-03-29 23:01:49 +08:00

5.6 KiB

Raw Permalink Blame History

变更提案: workbench-left-icon-rail

元信息

类型: 优化
方案类型: implementation
优先级: P1
状态: 已完成
创建: 2026-03-29

1. 需求

背景

当前 WorkspaceWorkbench.vue 将“快捷指令 / 文件 / 历史命令 / 编辑器”渲染为顶部 2x2 文本按钮组。用户希望参考文件管理器截图中的窄侧边栏交互，将这组入口移动到容器最左侧，并改为小图标自上而下竖排展示，以更接近桌面资源管理器的导航感。

目标

在不改变现有四个工作区面板切换逻辑的前提下：

把 Workbench 导航从顶部网格按钮改为左侧纵向 icon rail。
默认仅显示图标，使用 tooltip 暴露标签文本。
保留当前激活态高亮，让用户能清晰识别当前面板。
保持右侧内容区和文件管理、历史命令、编辑器等现有功能链路不变。

约束条件

时间约束: 本轮只做现有布局重排和样式优化，不扩展新的功能入口。
性能约束: 不引入额外依赖，不增加面板切换时的运行时开销。
兼容性约束: 保持现有四个 tab 的切换逻辑与现有国际化文案兼容。
业务约束: 文件、历史命令、编辑器、快捷指令的功能实现保持原样，仅调整导航表现。

验收标准

Workbench 左侧出现固定窄栏，四个入口图标从上到下竖排展示。
未激活项仅显示图标，悬停可通过 title 查看名称；激活态可被明显识别。
右侧 header 和内容面板仍能正常切换，文件管理和编辑器上下文不回归。
npm run build --workspace=@nexus-terminal/frontend 通过。

2. 方案

技术方案

仅修改 packages/frontend/src/components/WorkspaceWorkbench.vue：

将当前顶部导航按钮区从 header 中拆出，改为与内容区并列的左侧 rail 容器。
每个 tab 按钮改成固定宽高的图标按钮，使用 :title="tab.label" 提供 tooltip。
右侧保留现有 title / session 信息区域与内容切换区域，避免影响内部组件树。
通过 scoped CSS 增加 rail 的背景、分隔线、激活态和 hover 态，形成更接近参考图的资源管理器式侧栏。

影响范围

涉及模块:
  - frontend: 工作区 Workbench 导航布局和视觉样式调整
预计变更文件: 1

风险评估

风险	等级	应对
左侧 rail 挤压内容区，导致窄屏显示不佳	中	控制 rail 宽度并保留右侧内容 `min-w-0`，以现有容器自适应布局为主
导航区 DOM 重排影响现有 header 层级或滚动区域	中	只调整 `WorkspaceWorkbench.vue` 外层结构，不触碰四个面板组件内部实现
样式修改导致激活态辨识不足	低	保留主色高亮、边框和背景差异，且 tooltip 始终可用

3. 技术设计（可选）

本次不涉及 API、数据模型或架构层改动，保持 N/A。

4. 核心场景

场景: 工作区左侧图标导航

模块: frontend
条件: 用户进入 /workspace，Workbench 区域已渲染。
行为: 用户通过左侧竖排图标点击切换快捷指令、文件、历史命令和编辑器。
结果: 右侧内容区域切换到对应面板，左侧当前图标高亮，未激活项保持极简图标外观。

5. 技术决策

workbench-left-icon-rail#D001: Workbench 导航改为极简左侧图标栏

日期: 2026-03-29
状态: 已采纳
背景: 用户明确要求参考文件管理器样式，把 Workbench 入口放到容器最左边，并选择“仅显示小图标，文字全部隐藏，仅用 tooltip 显示名称”。
选项分析:

选项	优点	缺点
A: 左侧极简图标栏	最贴近参考图，占用空间小，视觉上更像桌面导航	需要通过 tooltip 补足文字语义
B: 左侧图标加短文字	可读性更高	占宽更大，和参考图差异更明显
决策: 选择方案 A
理由: 该方案完全符合用户确认的展示方式，同时对现有组件逻辑影响最小，只需调整导航容器和按钮样式即可。
影响: 影响 `WorkspaceWorkbench.vue` 的布局结构和样式，不改变四个子面板组件的实现。

6. 成果设计

设计方向

美学基调: 工业化桌面工具栏，强调“窄、稳、冷静”的资源管理器式侧边导航，而不是卡片化 dashboard 按钮区。
记忆点: Workbench 最左侧的细窄图标栏与右侧内容区形成明确分栏，四个入口像原生桌面工具栏一样垂直排列。
参考: 用户提供的文件管理器截图；顶部文字按钮组向左侧 icon rail 收敛。

视觉要素

配色: 继承现有 bg-header、border-border、bg-background 与 primary 主题变量，激活态用主色背景和浅阴影做聚焦。
字体: 导航主交互不直接展示文字，tooltip 继续使用现有项目字体体系，无新增字体依赖。
布局: 左侧固定窄栏，顶部到下方竖排排列四个图标按钮；右侧为 header + 内容面板两层结构。
动效: 保留当前按钮 hover / active 的颜色过渡，避免大幅动画影响工具型界面的稳定感。
氛围: 通过左侧窄栏边界和轻微层次阴影，强化“桌面工作区工具箱”观感。

技术约束

可访问性: 每个图标按钮保留 title 文本，确保隐藏标签后仍可识别；激活态需要有清晰视觉差异。
响应式: rail 采用固定窄宽度，右侧内容保持 flex-1 min-w-0，避免内容区域被挤爆。

5.6 KiB Raw Permalink Blame History Unescape Escape