feat(workspace): add workbench layout and traffic totals
Rework the default /workspace layout into a three-column view with a left-side Workbench, centered terminal, and right-side status monitor. Add a new Workbench pane that groups file manager, command history, and editor into tabs while preserving panel state. Extend server status data to expose cumulative network upload and download totals since boot, and show them in the monitor. Include a lightweight migration for the old default layout and update related locale strings, pane metadata, and knowledge base records.
This commit is contained in:
yinjianm
@@ -0,0 +1 @@
|
||||
{"status":"completed","completed":8,"failed":0,"pending":0,"total":8,"done":8,"percent":100,"current":"已完成 workbench 工作台、累计流量监控和构建验证","updated_at":"2026-03-25 12:33:00"}
|
||||
@@ -0,0 +1,70 @@
|
||||
# 变更提案: workspace-workbench-monitor
|
||||
|
||||
## 元信息
|
||||
```yaml
|
||||
类型: 功能增强
|
||||
方案类型: implementation
|
||||
优先级: P1
|
||||
状态: 实施中
|
||||
状态说明: 已完成实现、构建验证通过，待归档
|
||||
创建: 2026-03-25
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 1. 需求
|
||||
|
||||
### 背景
|
||||
当前 `/workspace` 主工作区把 `命令历史`、`文件管理`、`编辑器` 拆成多个独立 pane，占用了终端垂直空间；状态监控只展示瞬时上下行速率，没有展示系统自开机以来的累计流量。
|
||||
|
||||
### 目标
|
||||
- 仅改造 `/workspace` 主工作区布局。
|
||||
- 采用方案 B：左侧 `Workbench` Tab 容器承载 `历史命令 / 文件 / 编辑器`，中央终端保持完整高度，右侧保留状态监控。
|
||||
- 在右侧状态监控新增“开机累计上/下行流量”展示。
|
||||
|
||||
### 约束条件
|
||||
```yaml
|
||||
范围约束: 只改 /workspace 主工作区，不调整其它页面和弹层体系
|
||||
架构约束: 延续现有 Vue 3 + Pinia + splitpanes 布局体系，不引入新布局库
|
||||
后端约束: 仅基于现有 /proc/net/dev 采集链路扩展累计流量字段
|
||||
部署约束: 当前只考虑 amd64，不涉及 Docker / GHCR 变更
|
||||
```
|
||||
|
||||
### 验收标准
|
||||
- [ ] `/workspace` 默认主布局变为“左侧 Workbench + 中央终端 + 右侧状态监控”
|
||||
- [ ] Workbench 内可切换 `命令历史 / 文件 / 编辑器` 三个标签页
|
||||
- [ ] 右侧状态监控新增开机累计下载 / 上传流量显示
|
||||
- [ ] 前后端构建通过，类型链闭合
|
||||
|
||||
---
|
||||
|
||||
## 2. 方案
|
||||
|
||||
### 技术方案
|
||||
新增前端 `WorkspaceWorkbench.vue` 组件，作为新的布局 pane，在内部用 tab 容器组合 `CommandHistoryView`、`FileManager` 和 `FileEditorContainer`。布局层新增 `workbench` pane 类型，并把默认布局改成“三栏工作台”。为兼容已有保存布局，增加一次仅针对旧默认布局的轻量迁移逻辑。后端则在状态轮询时直接复用 `/proc/net/dev` 已解析的总字节数，新增 `netRxTotalBytes` / `netTxTotalBytes` 字段并透传到前端状态监控。
|
||||
|
||||
### 影响范围
|
||||
```yaml
|
||||
涉及模块:
|
||||
- frontend: /workspace 布局、状态监控、i18n、前端类型
|
||||
- backend: 状态监控服务累计流量字段
|
||||
预计变更文件: 10+
|
||||
```
|
||||
|
||||
### 风险评估
|
||||
| 风险 | 等级 | 应对 |
|
||||
|------|------|------|
|
||||
| 已保存的旧布局不自动切到新工作台 | 中 | 增加仅针对旧默认布局的迁移逻辑，避免误伤自定义布局 |
|
||||
| 文件管理器在 tab 切换后状态丢失 | 中 | Workbench 内使用 `v-show` 保持三个面板常驻 |
|
||||
| 累计流量字段前后端类型不一致 | 低 | 同步更新后端接口、本地类型与状态监控展示 |
|
||||
|
||||
---
|
||||
|
||||
## 3. 技术决策
|
||||
|
||||
### workspace-workbench-monitor#D001: 采用方案 B 的三栏工作台
|
||||
**日期**: 2026-03-25
|
||||
**状态**: ✅采纳
|
||||
**决策**: 左侧集中工作台、中央终端、右侧状态监控。
|
||||
**理由**: 保住终端主区高度，同时让文件/命令/编辑入口集中到同一容器，符合用户确认的 xterminal 参考方向。
|
||||
**影响**: 影响 `/workspace` 默认布局、布局配置器与状态监控展示逻辑。
|
||||
@@ -0,0 +1,58 @@
|
||||
# 任务清单: workspace-workbench-monitor
|
||||
|
||||
```yaml
|
||||
@feature: workspace-workbench-monitor
|
||||
@created: 2026-03-25
|
||||
@status: completed
|
||||
@mode: R3
|
||||
```
|
||||
|
||||
## 进度概览
|
||||
|
||||
| 完成 | 失败 | 跳过 | 总数 |
|
||||
|------|------|------|------|
|
||||
| 8 | 0 | 0 | 8 |
|
||||
|
||||
---
|
||||
|
||||
## 任务列表
|
||||
|
||||
### 1. 方案包与布局基础
|
||||
|
||||
- [√] 1.1 创建 `/workspace` Workbench 改造方案包并记录方案 B | depends_on: []
|
||||
- [√] 1.2 新增 `workbench` pane 类型与默认布局迁移逻辑 | depends_on: [1.1]
|
||||
|
||||
### 2. 前端工作台布局
|
||||
|
||||
- [√] 2.1 新增 `WorkspaceWorkbench.vue`，整合命令历史 / 文件 / 编辑器 tab | depends_on: [1.2]
|
||||
- [√] 2.2 接入 `LayoutRenderer`、`LayoutConfigurator`、设置侧栏宽度类型链 | depends_on: [2.1]
|
||||
|
||||
### 3. 状态监控扩展
|
||||
|
||||
- [√] 3.1 后端状态监控新增累计上下行流量字段 | depends_on: [1.1]
|
||||
- [√] 3.2 前端状态监控展示累计流量并补充 i18n | depends_on: [3.1]
|
||||
|
||||
### 4. 验证与知识库同步
|
||||
|
||||
- [√] 4.1 运行前后端构建验证并记录结果 | depends_on: [2.2, 3.2]
|
||||
- [√] 4.2 更新 `.helloagents` 模块文档与变更记录 | depends_on: [4.1]
|
||||
|
||||
---
|
||||
|
||||
## 执行日志
|
||||
|
||||
| 时间 | 任务 | 状态 | 备注 |
|
||||
|------|------|------|------|
|
||||
| 2026-03-25 12:00 | 1.1 | 完成 | 创建 implementation 方案包，进入开发实施 |
|
||||
| 2026-03-25 12:18 | 1.2 / 2.1 / 2.2 | 完成 | 新增 `workbench` pane、默认布局切换为三栏工作台，并为旧默认布局做轻量迁移 |
|
||||
| 2026-03-25 12:20 | 3.1 / 3.2 | 完成 | 后端透出累计上下行字节数，前端状态监控新增“开机累计流量”展示 |
|
||||
| 2026-03-25 12:31 | 4.1 | 完成 | 执行 `npm install` 后，前后端 build 均通过 |
|
||||
| 2026-03-25 12:33 | 4.2 | 完成 | 更新模块文档、变更日志并准备归档 |
|
||||
|
||||
---
|
||||
|
||||
## 执行备注
|
||||
|
||||
- 本次只改 `/workspace` 主工作区，不触碰其它页面和全局弹层。
|
||||
- 默认布局改造需要兼顾已有后端 / localStorage 布局数据，因此会做保守迁移而不是强制清空布局。
|
||||
- 首次构建前本机缺少依赖，补跑 `npm install` 后，`packages/backend` 与 `packages/frontend` 构建均通过。
|
||||
@@ -8,11 +8,13 @@
|
||||
| 时间戳 | 名称 | 类型 | 涉及模块 | 决策 | 结果 |
|
||||
|--------|------|------|---------|------|------|
|
||||
| 202603250317 | ghcr-docker-publish | implementation | workspace-root | ghcr-docker-publish#D001 | ✅完成 |
|
||||
| 202603251200 | workspace-workbench-monitor | implementation | frontend, backend | workspace-workbench-monitor#D001 | ✅完成 |
|
||||
|
||||
## 按月归档
|
||||
|
||||
### 2026-03
|
||||
- [202603250317_ghcr-docker-publish](./2026-03/202603250317_ghcr-docker-publish/) - 新增 GHCR 镜像发布 workflow 并切换 compose 镜像来源
|
||||
- [202603251200_workspace-workbench-monitor](./2026-03/202603251200_workspace-workbench-monitor/) - `/workspace` 改为三栏 Workbench 布局，并新增开机累计流量监控
|
||||
|
||||
## 结果状态说明
|
||||
- ✅ 完成
|
||||
|
||||
Reference in New Issue
Block a user