# 变更提案: 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 宽度下仍保持横向排列，不引入文字标签导致拥挤