# 变更提案: 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`，避免内容区域被挤爆。