admin/nexus-terminal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(workspace): add workbench layout and traffic totals

Browse Source 
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
2026-03-25 03:58:45 +08:00
parent 33a027e809
commit f2f9c754f8
19 changed files with 511 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.helloagents/CHANGELOG.md
+1
View File
@@ -4,3 +4,4 @@
- 2026-03-25：初始化 `.helloagents/` 知识库骨架与首批模块文档，不代表源码功能变更。
- 2026-03-25：新增 GHCR Docker 发布 workflow，并将 `docker-compose.yml` 的三个业务镜像切换到 `ghcr.io/micah123321/*`。
- 2026-03-25：`/workspace` 默认布局改为“左侧 Workbench + 中央视终端 + 右侧状态监控”，并在状态监控中新增开机累计上下行流量展示。
.helloagents/archive/2026-03/202603251200_workspace-workbench-monitor/.status.json
+1
View File
@@ -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"}
.helloagents/archive/2026-03/202603251200_workspace-workbench-monitor/proposal.md
+70
View File
@@ -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` 默认布局、布局配置器与状态监控展示逻辑。
.helloagents/archive/2026-03/202603251200_workspace-workbench-monitor/tasks.md
+58
View File
@@ -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` 构建均通过。
.helloagents/archive/_index.md
+2
View File
@@ -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 布局，并新增开机累计流量监控
## 结果状态说明
- ✅ 完成
.helloagents/context.md
+2 -1
View File
@@ -39,6 +39,7 @@
### 核心功能
- 统一管理 SSH、SFTP、RDP、VNC 远程连接。
- 提供基于 Vue 3 的工作区、布局配置、主题定制和命令输入体验。
- `/workspace` 默认采用“三栏工作台”：左侧 Workbench tab 容器、中央终端、右侧状态监控。
- 提供认证、2FA、Passkey、Captcha、IP 白名单/黑名单、通知和审计能力。
- 支持远程文件管理、在线编辑、快速命令、命令历史和 SSH 挂起会话。
- 使用独立 `remote-gateway` 服务为远程桌面连接生成加密令牌并对接 `guacd`。
@@ -89,7 +90,7 @@
| 约束 | 原因 | 决策来源 |
|------|------|---------|
| 暂无已归档方案包约束 | 知识库于 2026-03-25 首次初始化，后续决策应沉淀到 plan/archive | N/A |
| `/workspace` 默认主布局采用“Workbench + 终端 + 状态监控”三栏结构 | 统一终端主区高度，并将命令历史 / 文件 / 编辑器集中到左侧工作台 | workspace-workbench-monitor#D001 |
## 6. 已知技术债务（可选）
.helloagents/modules/backend.md
+5
View File
@@ -39,6 +39,11 @@
**行为**: 按 `controller/service/repository/routes` 的分层模式组织连接、通知、设置、快速命令、主题等功能。
**结果**: 新增后端能力时应优先延续现有业务域目录结构，而不是在入口文件堆叠逻辑。
### 状态监控
**条件**: 前端工作区通过 WebSocket 订阅服务器状态。
**行为**: `StatusMonitorService` 通过 SSH 读取 `free`、`df`、`/proc/stat` 与 `/proc/net/dev`，同时计算瞬时网速与默认网卡自开机以来的累计上下行字节数。
**结果**: 前端状态监控既能展示实时速率，也能展示“开机累计流量”，后续扩展监控字段时应优先复用现有 SSH 采集链路。
## 依赖关系
```yaml
.helloagents/modules/frontend.md
+2 -2
View File
@@ -36,8 +36,8 @@
### 工作区交互
**条件**: 用户进入 `/workspace` 或相关管理页面。
**行为**: 通过组件、Pinia 与 composable 协同管理终端、文件管理、命令历史、布局配置、主题和状态监控。
**结果**: 页面逻辑分散在 `views/`、`components/`、`stores/` 与 `composables/`，改动时应优先在对应层级定位。
**行为**: 通过组件、Pinia 与 composable 协同管理终端、文件管理、命令历史、布局配置、主题和状态监控；当前 `/workspace` 默认主布局为“左侧 Workbench、中央终端、右侧状态监控”，其中 Workbench 以 tab 容器整合命令历史、文件管理和编辑器。
**结果**: 页面逻辑分散在 `views/`、`components/`、`stores/` 与 `composables/`，其中布局调整优先落在 `layout.store.ts`、`LayoutRenderer.vue` 与 `WorkspaceWorkbench.vue`。
## 依赖关系