# Changelog: TerminalPage全面迭代 + 快捷命令MySQL持久化 + 登录页调整

**日期**: 2026-05-31
**变更摘要**: TerminalPage 25项问题修复、快捷命令从localStorage迁移到MySQL、命令输入栏Shell语法高亮、登录页居中+删Logo

## 动机

TerminalPage.vue 是 WebSSH 终端的核心页面，代码审查发现 25 个问题（6 P0 + 6 P1 + 13 P2），包括功能回退（Ctrl+L清屏缺失、命令历史不恢复）、重连逻辑多标签冲突、快捷命令仅存localStorage无法跨设备同步。用户还要求Shell语法高亮和快捷命令MySQL持久化。

## 涉及文件

| 文件 | 变更类型 | 说明 |
|------|----------|------|
| `server/domain/models/__init__.py` | 新增 | QuickCommand表（quick_commands） |
| `server/api/terminal.py` | 新建 | 快捷命令CRUD API（4端点） |
| `server/main.py` | 修改 | 注册terminal_router + seed内置命令 |
| `frontend/src/pages/TerminalPage.vue` | 重写 | 25项修复 + Shell语法高亮 + MySQL API对接 |
| `frontend/src/pages/LoginPage.vue` | 修改 | 居中布局（flexbox）+ 删除Logo区域 |

## 详细变更

### 后端

1. **新增 `quick_commands` MySQL 表**
   - 字段: id, name, cmd, is_builtin, sort_order, created_by, created_at, updated_at
   - 内置命令 `is_builtin=True`，不可删除/编辑
   - 启动时自动 seed 5 条内置命令

2. **新增 API 端点**
   - `GET /api/terminal/quick-commands` — 列出所有快捷命令
   - `POST /api/terminal/quick-commands` — 创建自定义命令
   - `PUT /api/terminal/quick-commands/{id}` — 编辑命令（内置不可编辑）
   - `DELETE /api/terminal/quick-commands/{id}` — 删除命令（内置不可删除）
   - 所有CUD操作带审计日志

### 前端 — TerminalPage P0修复

1. **Ctrl+L 清屏** — `onKeydown` 添加 `e.ctrlKey && e.key === 'l'`：preventDefault + term.clear() + ws.send('clear\r')
2. **命令历史恢复** — `newSession()` 从 localStorage 恢复全局历史到 session.cmdHistory
3. **重连逻辑 per-session** — reconnectAttempt/reconnectTimer 移入 TermSession 接口，消除多标签干扰
4. **ws.onopen 不忽略非活跃标签** — 移除 `if (idx !== activeIdx) return`
5. **ping per-session** — startPing/stopPing 操作 session.pingTimer
6. **uptime per-session** — connectionStartTime/uptimeTimer 移入 session

### 前端 — TerminalPage P1修复

7. **关键空 catch 处理** — sendCmd JSON.parse兜底、termPaste/termCopy try/catch + snackbar、webssh-token错误透传
8. **termRefs 竞态修复** — Map key 从数组索引改为 session.id
9. **initialCdSent per-session** — 移入 TermSession
10. **剪贴板权限处理** — termPaste 捕获 DOMException + snackbar提示

### 前端 — TerminalPage P2修复

11. **右键菜单补回"全选"** — 新增 termSelectAll() 调用 term.selectAll()
12. **指数退避重连** — `Math.min(1000 * Math.pow(2, attempt - 1), 30000)`
13. **快捷命令双击编辑** — `@dblclick` 触发 editQuickCmd()
14. **硬编码高度修复** — `calc(100vh - 64px)` → `d-flex flex-column flex-grow-1`
15. **快捷命令 MySQL API 对接** — loadQuickCmds/saveQuickCmd/deleteQuickCmd 改用 http API，fallback localStorage
16. **Shell 语法高亮** — 命令输入栏实时着色：sudo→红色、关键字→蓝色、管道/重定向→黄色、字符串→绿色、flag→紫色

### 前端 — LoginPage 调整

17. **登录卡片居中** — 移除 v-container+v-row+v-col，改用 flexbox 居中
18. **删除 Logo 区域** — 移除 v-avatar + "登录 Nexus" + "服务器运维管理平台"

## 是否需迁移/重启

- ✅ 需重启 — 新增 MySQL 表 `quick_commands`，首次启动自动建表 + seed
- ✅ 前端需重新构建部署

## 验证方式

1. 打开终端 `?server_id=8` → 连接成功
2. 按 Ctrl+L → 终端清屏
3. 输入几个命令 → 刷新页面 → ArrowUp 回溯历史命令
4. 开两个标签连接不同服务器 → 断开一个 → 另一个不受影响
5. 右键菜单 → 有"全选"选项
6. 添加/编辑/删除自定义快捷命令 → 刷新后仍在（MySQL持久化）
7. 命令输入栏输入 `sudo systemctl restart nginx` → 看到语法着色
8. 登录页 → 卡片居中，无Logo
