Nexus/docs/changelog/2026-06-01-terminal-spa-iteration.md

Changelog — 终端页 SPA 迭代

日期: 2026-06-01

摘要

迭代 #/terminal：全屏布局、路由 server_id/path 联动、统一 WebSocket URL、连接状态与空状态 UX；文件管理页增加「终端」入口。

动机

用户要求对 app/#/terminal 继续迭代；生产页存在终端区域高度不足、从服务器二次进入不建会话、连接态不清晰等问题。

涉及文件

• frontend/src/App.vue — nexus-terminal-main 布局
• frontend/src/pages/TerminalPage.vue — 核心迭代
• frontend/src/utils/wsUrl.ts（新）
• frontend/src/pages/FilesPage.vue — 带当前路径打开终端
• docs/design/specs/2026-06-01-terminal-spa-iteration-design.md（新）

验证

1. cd frontend && npm run type-check
2. 打开 #/terminal?server_id=8 → 终端区占满、状态「已连接」、可输入
3. 已在终端时从服务器点「终端」→ 切换对应标签
4. 文件管理选服务器+路径 →「终端」→ 自动 cd 到当前目录
5. npm run test:e2e 中 terminal 用例

迁移 / 重启

• 仅前端：需 vite build + 上传 web/app/
• 后端无变更

回滚

还原上述前端文件并重新构建部署。

---

补充（同日）— SSH 输出 ANSI 颜色

• 术语：ANSI 颜色（终端输出）；底部输入栏为 Shell 语法高亮
• 前端：xterm 浅色主题补全 16 色 ANSI 调色板，drawBoldTextInBrightColors
• 后端：连接后 export TERM=xterm-256color COLORTERM=truecolor FORCE_COLOR=1

补充（同日）— Shell 语法高亮增强

• 新增 frontend/src/utils/shellHighlight.ts：命令/管道/重定向/字符串/变量/注释/路径等分词着色
• 新增 ShellHighlightField.vue：底部命令栏 + 快捷命令编辑框统一高亮
• 深浅色主题各一套配色（:deep(.sh-*)）