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

feat(frontend): 支持快捷指令跨组拖拽并升级网络历史图

Browse Source 
新增快捷指令跨标签组拖拽能力，支持将未标记命令直接拖入
目标标签组，并修正 manual/name/last_used 排序按钮状态映射

将状态监控内存与网络卡片的响应式阈值统一收紧到 250px，
同时用可悬浮查看最近采样点的 canvas 历史图替换网络趋势线
This commit is contained in:
yinjianm
2026-04-19 03:40:48 +08:00
parent 8ce007a305
commit 0e01153157
16 changed files with 1001 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.helloagents/modules/backend.md
+1 -1
View File
@@ -84,4 +84,4 @@
### 快捷指令顺序持久化
**条件**: 前端快捷指令视图提交分组拖拽、标签内命令拖拽或扁平列表命令拖拽结果。
**行为**: packages/backend/src/database/schema.ts 与 migrations.ts 现在为 quick_commands、quick_command_tags 与 quick_command_tag_associations 三张表补齐 sort_order 字段；quick-commands 业务域新增 /api/v1/quick-commands/reorder 与 /api/v1/quick-commands/reorder-by-tag，quick-command-tags 业务域新增 /api/v1/quick-command-tags/reorder。同时标签关联写入从“先删后插”调整为增量同步，保留命令已存在标签关联的原组内顺序，仅为新增关联追加新的末尾顺序。
**结果**: 后端可以稳定表达“标签顺序”“命令全局顺序”和“命令在某个标签组内的局部顺序”三层语义，并保证历史数据库升级后也能直接承接前端拖拽排序能力。
**结果**: 后端可以稳定表达“标签顺序”“命令全局顺序”和“命令在某个标签组内的局部顺序”三层语义，并保证历史数据库升级后也能直接承接前端拖拽排序能力；这也让前端可以通过“先更新 `tagIds`、再提交目标标签内重排”复用既有接口实现跨分组移动，而无需新增专用后端路由。
.helloagents/modules/frontend.md
+4 -4
View File
@@ -58,11 +58,11 @@
### 状态监控卡片
**条件**: 用户在 `/workspace` 右侧状态监控面板查看服务器资源状态。
**行为**: `StatusMonitor.vue` 当前已从通用卡片栅格重排为更接近参考图的窄屏监控结构：顶部改为成对的信息条，资源概览改为带编号的紧凑使用率行，内存/网络/磁盘模块都采用明显的左右分区关系，分别展示环形占比+统计堆叠、监控屏风格网络面板+上下行速率堆叠，以及设备视觉块+紧凑磁盘摘要；默认视图底部继续保留“进程管理”概览与高占用进程预览，并通过“查看全部”打开 `ProcessManagerModal.vue`。该 modal 继续采用深色控制台式表格布局，支持搜索 PID / 用户 / 命令、自动刷新、手动刷新，以及对单个进程执行“结束”或“强制结束”操作，并通过当前活动 SSH 会话的 `wsManager` 与后端 `process:list` / `process:signal` 消息交互。
**结果**: 前端状态监控形成了“更贴近参考图的默认小屏监控 + 独立进程管理页”的双层结构：默认面板先解决左右布局和视觉层级问题，而完整进程管理继续独立存在，不挤占侧栏本体。
**行为**: `StatusMonitor.vue` 当前已从通用卡片栅格重排为更接近参考图的窄屏监控结构：顶部改为成对的信息条，资源概览改为带编号的紧凑使用率行，内存/网络/磁盘模块都采用明显的左右分区关系；其中内存卡片现在会在容器宽度大于等于 250px 时维持环形概览与统计块的高密度横向布局，仅在低于 250px 时切为手机式竖排；网络卡片则通过新增 `StatusMonitorNetworkHistoryChart.vue` 把原本的 SVG 趋势线替换为基于 Chart.js `canvas` 的最近 24 个采样点历史图，并在宽度大于等于 250px 时保持“左侧历史图 + 右侧统计表”的横向布局，低于 250px 再切为竖排；磁盘模块继续展示设备视觉块与紧凑磁盘摘要；默认视图底部继续保留“进程管理”概览与高占用进程预览，并通过“查看全部”打开 `ProcessManagerModal.vue`。该 modal 继续采用深色控制台式表格布局，支持搜索 PID / 用户 / 命令、自动刷新、手动刷新，以及对单个进程执行“结束”或“强制结束”操作，并通过当前活动 SSH 会话的 `wsManager` 与后端 `process:list` / `process:signal` 消息交互。
**结果**: 前端状态监控形成了“更贴近参考图的默认小屏监控 + 独立进程管理页”的双层结构：默认面板不仅保持了侧栏内的高密度布局，还允许用户直接在网络卡片里查看近期网络历史波动，而完整进程管理继续独立存在，不挤占侧栏本体。
### 快捷指令拖拽排序
**条件**: 用户在 Workbench 的快捷指令视图中浏览分组或扁平命令列表，且当前未启用搜索过滤。
**行为**: `QuickCommandsView.vue` 现已支持拖动已标记分组、标签组内命令，以及关闭标签展示后的扁平命令列表；拖拽完成后会通过 `quickCommands.store.ts` 与 `quickCommandTags.store.ts` 分别调用 `/api/v1/quick-command-tags/reorder`、`/api/v1/quick-commands/reorder` 和 `/api/v1/quick-commands/reorder-by-tag` 回写顺序。列表排序模式同步扩展为 `manual / name / last_used`，其中拖拽结果会自动落回 `manual` 视图承接。
**结果**: 快捷指令分组顺序、组内顺序和扁平列表顺序在刷新后保持一致，而搜索过滤态继续保持只读展示，避免局部结果重排污染全量顺序。
**行为**: `QuickCommandsView.vue` 现已支持拖动已标记分组、标签组内命令，以及关闭标签展示后的扁平命令列表；拖拽完成后会通过 `quickCommands.store.ts` 与 `quickCommandTags.store.ts` 分别调用 `/api/v1/quick-command-tags/reorder`、`/api/v1/quick-commands/reorder` 和 `/api/v1/quick-commands/reorder-by-tag` 回写顺序。当前在开启标签分组且未搜索时，还允许把命令从一个已标记分组拖到另一个已标记分组内，或把“未标记”命令直接拖入目标标签组；前端会先静默调用 `updateQuickCommand(...)` 调整 `tagIds`，再调用 `/api/v1/quick-commands/reorder-by-tag` 固定目标组落点顺序。列表排序模式同步扩展为 `manual / name / last_used`，其中拖拽结果会自动落回 `manual` 视图承接；当前仍禁止把已标记命令拖入“未标记”分组，避免把“移动分组”误解释为隐式清空标签。
**结果**: 快捷指令分组顺序、组内顺序、跨组归类结果和扁平列表顺序在刷新后保持一致，而搜索过滤态继续保持只读展示，避免局部结果重排污染全量顺序。