这是一个功能完整的运维 Agent 管理控制台，采用单页应用 (SPA) 架构，页面结构如下：
📌 Gitee 仓库地址
主机运维智能体 https://gitee.com/weedlu/som-agent
📐 整体布局
┌─────────────────────────────────────────────────────────┐
│ Header (页眉) - 标题 + 主题切换 + 退出按钮 │
├─────────────────────────────────────────────────────────┤
│ Nav (导航栏) - 6个功能模块切换 │
├─────────────────────────────────────────────────────────┤
│ Main (主内容区) - 根据导航显示对应面板 │
└─────────────────────────────────────────────────────────┘🎛️ 六大功能模块
| 模块 | ID | 功能描述 |
|---|---|---|
| 运维对话 | #chat | AI 对话界面，支持多会话、流式输出、命令审批 |
| 模型配置 | #models | 添加/删除 LLM 模型供应商 |
| 服务器配置 | #servers | 管理 SSH 连接目标服务器 |
| SSH秘钥 | #sshkeys | 集中管理 SSH 私钥 |
| 云账号(MCP) | #clouds | 配置云服务 MCP 集成 |
| 审计日志 | #audits | 查看操作历史记录 |
| 终端操作 | #term | WebSocket 交互式终端 |
🔧 对话模块详细结构 (核心)
┌───────────────┬─────────────────────────────────┐
│ 会话历史 │ 对话主区域 │
│ ───────── │ ─────────────────────────────── │
│ [新建会话] │ 消息展示区 (可滚动) │
│ • 会话1 │ - 用户消息 (蓝色) │
│ • 会话2 │ - Agent 回复 (绿色) │
│ • 会话3 │ - 工具调用块 (带高亮) │
│ • ... │ - 执行结果 (可折叠) │
│ │ - 调试信息 (可选显示) │
│ ├─────────────────────────────────┤
│ │ 审批框 (命令确认) │
│ ├─────────────────────────────────┤
│ │ 目标选择栏 │
│ │ - 服务器选择 (复选) │
│ │ - 自动审批开关 │
│ │ - 调试开关 │
│ ├─────────────────────────────────┤
│ │ 输入区 + 发送/中断/结束按钮 │
└───────────────┴─────────────────────────────────┘🎨 设计特点
- 主题支持: 默认浅色/深色模式，通过 CSS 变量实现
- 响应式布局: 768px 断点移动端适配（两栏变单栏）
- Shell 语法高亮: 命令、参数、变量、字符串等不同颜色
- 状态指示: 运行中(蓝)、等待(黄)、完成(绿)、错误(红)
- 操作分级标签:
readonly(只读)、mutating(变更)、dangerous(危险)
🔌 外部依赖
- xterm.js: 终端模拟器组件 (v5.3.0)
- FitAddon: 终端自适应尺寸
- CDN 加载，无需构建工具
这是一个典型的前后端分离架构，前端纯 HTML/CSS/JS，通过 REST API + WebSocket 与后端通信。