57 lines
2.1 KiB
Markdown
57 lines
2.1 KiB
Markdown
|
# 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. 内置命令不可删除
|