feat(frontend): 重构工作区终端与导航交互
将 SSH 顶部标签改为服务器级切换入口，并把同服务器下的 多终端切换、新增与关闭下沉到终端面板内部，修正服务器与 终端的视觉层级 同时将 Workbench 导航改为左侧图标栏，并为终端标签右键菜单 补充“关闭全部”动作，完善相关多语言文案与工作区事件处理
This commit is contained in:
yinjianm
@@ -0,0 +1 @@
|
||||
{"status":"completed","completed":4,"failed":0,"pending":0,"total":4,"done":4,"percent":100,"current":"Completed - workbench left icon rail implemented and verified","updated_at":"2026-03-29 22:53:00"}
|
||||
@@ -0,0 +1,116 @@
|
||||
# 变更提案: 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`，避免内容区域被挤爆。
|
||||
@@ -0,0 +1,50 @@
|
||||
# 任务清单: workbench-left-icon-rail
|
||||
|
||||
> **@status:** completed | 2026-03-29 22:55
|
||||
|
||||
```yaml
|
||||
@feature: workbench-left-icon-rail
|
||||
@created: 2026-03-29
|
||||
@status: completed
|
||||
@mode: R2
|
||||
```
|
||||
|
||||
## 进度概览
|
||||
|
||||
| 完成 | 失败 | 跳过 | 总数 |
|
||||
|------|------|------|------|
|
||||
| 4 | 0 | 0 | 4 |
|
||||
|
||||
---
|
||||
|
||||
## 任务列表
|
||||
|
||||
### 1. 方案设计
|
||||
|
||||
- [√] 1.1 完成 Workbench 左侧 icon rail 的布局与交互方案整理 | depends_on: []
|
||||
- [√] 1.2 补全方案包 `proposal.md` 与 `tasks.md`，并通过包结构校验 | depends_on: [1.1]
|
||||
|
||||
### 2. 开发实施
|
||||
|
||||
- [√] 2.1 在 `packages/frontend/src/components/WorkspaceWorkbench.vue` 中将顶部 tab 按钮组改为左侧竖排图标栏 | depends_on: [1.2]
|
||||
- [√] 2.2 运行前端构建验证布局改动未破坏类型检查和打包 | depends_on: [2.1]
|
||||
|
||||
---
|
||||
|
||||
## 执行日志
|
||||
|
||||
| 时间 | 任务 | 状态 | 备注 |
|
||||
|------|------|------|------|
|
||||
| 2026-03-29 22:47 | 1.1 | completed | 已确认采用“仅显示小图标 + tooltip”的左侧竖排导航方案 |
|
||||
| 2026-03-29 22:49 | 1.2 | completed | 已补全 proposal/tasks 并通过 validate_package.py 校验 |
|
||||
| 2026-03-29 22:52 | 2.1 | completed | 已将顶部 tab 网格改为 Workbench 左侧竖排 icon rail |
|
||||
| 2026-03-29 22:53 | 2.2 | completed | `npm run build --workspace=@nexus-terminal/frontend` 通过，仅保留既有 chunk warning |
|
||||
|
||||
---
|
||||
|
||||
## 执行备注
|
||||
|
||||
> 记录执行过程中的重要说明、决策变化、风险提示等
|
||||
|
||||
- 本次改动目标是最小化重排，仅调整 Workbench 导航容器，不扩散到文件管理、历史命令和编辑器子组件内部。
|
||||
- 构建验证通过，Vite 仍输出仓库既有的动态导入与大 chunk 警告，但未阻断本次交付。
|
||||
Reference in New Issue
Block a user