Nexus/docs/design/specs/2026-05-30-terminal-quick-cmd-design.md

2026-05-30 终端页面快速命令栏 — 设计文档

背景与目标

terminal.html 当前只能手动输入命令，运维高频操作（如查看服务状态、读日志、重启进程）每次都要手敲。需要一个可自定义的快速命令栏，一键发送预设命令到终端。

方案

方案	优点	缺点
A: 右侧面板底部固定命令栏	不占屏幕空间，可折叠	命令多了需要滚动
B: 工具栏下方横排按钮	一眼可见	横向空间有限（2-3个）
C: 右键菜单 + 自定义命令	上下文触发	交互多一步

选定 A + C 混合 — 右侧面板加"快速命令"区域，同时支持自定义（添加/编辑/删除），存储在 localStorage。

命令来源

来源	说明
内置默认	5 个通用运维命令：systemctl status / journalctl -f / df -h / free -h / top -bn1
用户自定义	点击 + 号添加，输入命令名 + 命令内容，存 localStorage
会话记录	不自动添加（避免混乱，用户手动保存常用命令）

交互

1. 右侧面板"快速命令"区域列出所有内置+自定义命令
2. 每条显示：▶ 图标 + 命令简称（可自定义）+ 命令内容（灰色小字截断）
3. 点击 → 发送命令到终端（sendCmd 逻辑）
4. 每条命令右侧 hover 显示编辑/删除按钮
5. "+ 添加命令" 按钮在最下方

数据模型（localStorage）

nexus_terminal_commands = [
  { id: uuid, name: "查看 Nginx 状态", cmd: "systemctl status nginx" },
  { id: uuid, name: "读日志", cmd: "tail -f /var/log/nginx/access.log" },
  ...
]

安全约束

• 纯前端功能，localStorage 存储，不涉及后端
• 命令发送走已有 WebSocket DATA 通道
• 转义由终端侧处理，JS 不发 shell 命令（只发字符流）

验收标准

1. 右侧面板显示"快速命令"区域
2. 默认 5 条内置命令可点击执行
3. 可添加自定义命令（名称+内容）
4. 可编辑/删除自定义命令
5. 刷新页面后自定义命令保留
6. 内置命令不可删除