# 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. 内置命令不可删除
