yinjianm
d3e8d598b8
将 SSH 顶部标签改为服务器级切换入口，并把同服务器下的 多终端切换、新增与关闭下沉到终端面板内部，修正服务器与 终端的视觉层级 同时将 Workbench 导航改为左侧图标栏，并为终端标签右键菜单 补充“关闭全部”动作，完善相关多语言文案与工作区事件处理
117 lines
5.6 KiB
Markdown
117 lines
5.6 KiB
Markdown
# 变更提案: workbench-left-icon-rail
|
||
|
||
## 元信息
|
||
```yaml
|
||
类型: 优化
|
||
方案类型: implementation
|
||
优先级: P1
|
||
状态: 已完成
|
||
创建: 2026-03-29
|
||
```
|
||
|
||
---
|
||
|
||
## 1. 需求
|
||
|
||
### 背景
|
||
当前 `WorkspaceWorkbench.vue` 将“快捷指令 / 文件 / 历史命令 / 编辑器”渲染为顶部 2x2 文本按钮组。用户希望参考文件管理器截图中的窄侧边栏交互，将这组入口移动到容器最左侧，并改为小图标自上而下竖排展示，以更接近桌面资源管理器的导航感。
|
||
|
||
### 目标
|
||
在不改变现有四个工作区面板切换逻辑的前提下：
|
||
- 把 Workbench 导航从顶部网格按钮改为左侧纵向 icon rail。
|
||
- 默认仅显示图标，使用 tooltip 暴露标签文本。
|
||
- 保留当前激活态高亮，让用户能清晰识别当前面板。
|
||
- 保持右侧内容区和文件管理、历史命令、编辑器等现有功能链路不变。
|
||
|
||
### 约束条件
|
||
```yaml
|
||
时间约束: 本轮只做现有布局重排和样式优化，不扩展新的功能入口。
|
||
性能约束: 不引入额外依赖，不增加面板切换时的运行时开销。
|
||
兼容性约束: 保持现有四个 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 态，形成更接近参考图的资源管理器式侧栏。
|
||
|
||
### 影响范围
|
||
```yaml
|
||
涉及模块:
|
||
- 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`，避免内容区域被挤爆。
|