mirror of
https://github.com/MengMengCode/CLICD.git
synced 2026-08-04 21:31:23 +08:00
已测试LXC功能基本正常 KVM功能暂未进行测试
This commit is contained in:
欢
@@ -0,0 +1,375 @@
|
||||
# CLICD 魔方财务对接模块
|
||||
|
||||
这是用于智简魔方 / IDCSMART 的 CLICD 服务器模块。模块通过 CLICD API 完成实例开通、删除、开关机、重启、重装、改密、资源变更、流量重置、NAT 端口映射管理、实例信息展示和 WebSSH 入口。
|
||||
|
||||
## 文件结构
|
||||
|
||||
```text
|
||||
clicd.php
|
||||
README.md
|
||||
handlers/
|
||||
webssh.php
|
||||
templates/
|
||||
info.html
|
||||
nat.html
|
||||
```
|
||||
|
||||
安装时请保持目录结构不变，将整个 `clicd` 目录放入魔方服务器模块目录：
|
||||
|
||||
```text
|
||||
public/plugins/servers/clicd/
|
||||
```
|
||||
|
||||
## 服务器配置
|
||||
|
||||
在魔方后台添加服务器时，模块名称选择 `clicd`。
|
||||
|
||||
CLICD 面板地址建议使用 HTTPS：
|
||||
|
||||
```text
|
||||
主机名 = https://0.0.0.0:8999
|
||||
```
|
||||
|
||||
也可以拆分填写：
|
||||
|
||||
```text
|
||||
IP地址 = 0.0.0.0
|
||||
端口 = 8999
|
||||
secure = 开启
|
||||
```
|
||||
|
||||
API Key 可以填写在以下任意一个字段中：
|
||||
|
||||
```text
|
||||
Hash
|
||||
密码
|
||||
```
|
||||
|
||||
模块请求 CLICD 时会同时携带：
|
||||
|
||||
```text
|
||||
X-API-Key: clicd_sk_xxxx
|
||||
Authorization: Bearer clicd_sk_xxxx
|
||||
Content-Type: application/json
|
||||
```
|
||||
|
||||
## 产品配置项
|
||||
|
||||
| 字段 | 说明 |
|
||||
| --- | --- |
|
||||
| `virtualization` | 虚拟化类型，`lxc` 或 `kvm` |
|
||||
| `template_id` | CLICD 模板 / 镜像 ID |
|
||||
| `vcpu` | CPU 核心数 |
|
||||
| `cpu_percent` | CPU 使用率限制，`0` 表示不额外限制 |
|
||||
| `ram_mb` | 内存，单位 MB |
|
||||
| `disk_gb` | 系统盘，单位 GB |
|
||||
| `network_bw_mbps` | 带宽，单位 Mbps |
|
||||
| `traffic_mode` | `total` 总流量，或 `in_out` 入 / 出分开 |
|
||||
| `monthly_traffic_gb` | 月流量 GB |
|
||||
| `traffic_in_gb` | 入站流量 GB，`in_out` 模式使用 |
|
||||
| `traffic_out_gb` | 出站流量 GB，`in_out` 模式使用 |
|
||||
| `io_speed_mbps` | 磁盘 IO 限制，`0` 表示不限制 |
|
||||
| `port_mapping_count` | 开通时分配的 NAT 端口数量，最小 2 |
|
||||
| `snapshot_limit` | 快照配额 |
|
||||
| `extra_ports` | 额外映射的容器端口，逗号分隔，例如 `80,443` |
|
||||
| `assign_ipv6` | 开通时是否自动分配 IPv6 |
|
||||
| `sync_expiry` | 是否同步魔方到期时间到 CLICD |
|
||||
|
||||
客户产品的 `domain` 会作为 CLICD 容器名称。模块会自动把不适合作为容器名的字符替换为 `-`。
|
||||
|
||||
## 开通后字段同步
|
||||
|
||||
开通、同步、重装、改密后，模块会从 CLICD 容器详情拉取最新信息并写回魔方主机表：
|
||||
|
||||
| 魔方字段 | 写入内容 |
|
||||
| --- | --- |
|
||||
| `dedicatedip` | NAT 外网 IP，优先使用 API 返回的公网字段，否则使用服务器 IP |
|
||||
| `username` | 固定写入 `root` |
|
||||
| `password` | CLICD 返回的 SSH 密码，兼容魔方 `cmf_encrypt()` |
|
||||
| `port` | CLICD 返回的 `ssh_port` |
|
||||
| `domainstatus` | CLICD 状态为 `running` 时写 `Active`，否则写 `Suspended` |
|
||||
|
||||
如果接口返回的密码是 `***` 这类脱敏值，模块不会覆盖魔方里已有密码。
|
||||
|
||||
## 客户区页面
|
||||
|
||||
模块提供两个客户区选项卡：
|
||||
|
||||
```text
|
||||
实例信息
|
||||
NAT转发
|
||||
```
|
||||
|
||||
客户区按钮提供：
|
||||
|
||||
```text
|
||||
WebSSH
|
||||
```
|
||||
|
||||
## 实例信息
|
||||
|
||||
实例信息页展示：
|
||||
|
||||
- 实例名称、运行状态、SSH 地址、IPv6
|
||||
- CPU、内存、负载、磁盘圆环状态
|
||||
- 月流量进度
|
||||
- CPU 使用率、内存使用、网络流量、磁盘 IO 图表
|
||||
- IPv4、SSH 端口、SSH 密码、资源配置、到期时间
|
||||
|
||||
图表数据通过客户区懒加载接口获取，不会强制刷新整个魔方页面。页面首次打开会加载一次数据，之后由用户选择是否自动刷新：
|
||||
|
||||
```text
|
||||
不刷新
|
||||
10 秒
|
||||
1 分钟
|
||||
5 分钟
|
||||
10 分钟
|
||||
```
|
||||
|
||||
也可以点击“立即刷新”手动刷新一次。当前 CLICD 用量接口返回的是实时值，不是历史数组；图表曲线由客户区前端持续采样生成。若需要打开页面立即显示历史曲线，需要 CLICD 额外提供历史指标接口。
|
||||
|
||||
流量显示支持智能单位，小流量会显示 B / KB / MB，大流量显示 GB，例如：
|
||||
|
||||
```text
|
||||
370.5 KB / 100 GB
|
||||
```
|
||||
|
||||
模块会优先调用：
|
||||
|
||||
```text
|
||||
GET /api/v1/containers/{name}/usage
|
||||
GET /api/v1/containers/{name}/traffic
|
||||
```
|
||||
|
||||
如果 `/api/v1/containers/{name}/usage` 不可用，模块会在容器详情存在 `uuid` 时尝试兼容：
|
||||
|
||||
```text
|
||||
GET /api/containers/{uuid}/usage
|
||||
```
|
||||
|
||||
已兼容的常见用量字段包括：
|
||||
|
||||
```text
|
||||
cpu_usage_pct
|
||||
memory_usage_bytes
|
||||
disk_usage_bytes
|
||||
network_rx_bps
|
||||
network_tx_bps
|
||||
disk_read_bps
|
||||
disk_write_bps
|
||||
rx_used_bytes
|
||||
tx_used_bytes
|
||||
total_used_bytes
|
||||
limit_gb
|
||||
used_pct
|
||||
```
|
||||
|
||||
## NAT 转发
|
||||
|
||||
NAT 转发是独立页面，支持：
|
||||
|
||||
- 查看端口映射
|
||||
- 获取随机可用端口
|
||||
- 添加端口映射
|
||||
- 修改端口映射
|
||||
- 删除端口映射
|
||||
|
||||
删除端口映射时使用页面内确认弹窗，不使用浏览器自带确认框。
|
||||
|
||||
使用的 CLICD API：
|
||||
|
||||
```text
|
||||
GET /api/v1/containers/{id|uuid|name}
|
||||
GET /api/v1/containers/{id}/random-port
|
||||
POST /api/v1/containers/{id}/port-mappings
|
||||
PUT /api/v1/containers/{id}/port-mappings/{index}
|
||||
DELETE /api/v1/containers/{id}/port-mappings/{index}
|
||||
```
|
||||
|
||||
添加 / 修改 NAT 映射时必须使用 JSON 请求体，例如：
|
||||
|
||||
```json
|
||||
{
|
||||
"container_port": 8080,
|
||||
"host_port": 61320,
|
||||
"protocol": "tcp",
|
||||
"description": "HTTP"
|
||||
}
|
||||
```
|
||||
|
||||
## WebSSH
|
||||
|
||||
WebSSH 按钮会调用：
|
||||
|
||||
```text
|
||||
POST /api/v1/ssh-ticket
|
||||
```
|
||||
|
||||
请求体：
|
||||
|
||||
```json
|
||||
{
|
||||
"container_name": "example-vm"
|
||||
}
|
||||
```
|
||||
|
||||
接口返回 60 秒有效票据后，模块会打开本地 handler：
|
||||
|
||||
```text
|
||||
/plugins/servers/clicd/handlers/webssh.php
|
||||
```
|
||||
|
||||
浏览器会从该页面直连 CLICD：
|
||||
|
||||
```text
|
||||
wss://0.0.0.0:8999/api/ssh?container=example-vm
|
||||
Sec-WebSocket-Protocol: clicd-ticket.xxxxx
|
||||
```
|
||||
|
||||
注意：WebSSH 受浏览器安全策略和 CLICD 后端 Origin 校验影响。魔方客户区通常是 HTTPS，因此 CLICD 面板也必须启用 HTTPS/WSS。请把魔方服务器配置里的 `主机名` 改为 `https://0.0.0.0:8999`，或把 `secure` 设为 `开启`。
|
||||
|
||||
新版 CLICD 已支持 WebSSH Origin 放行。部署时需要在 CLICD 后端把魔方财务客户区域名加入 WebSSH Origin 白名单，例如：
|
||||
|
||||
```text
|
||||
https://www.example.com
|
||||
```
|
||||
|
||||
如果 WebSSH 页面显示 `WebSocket error`、`Disconnected code=1006`，但直接以 CLICD 自身 Origin 测试能返回 `101 Switching Protocols`，通常说明 CLICD 后端未放行魔方客户区域名的 WebSocket Origin。此时请检查 CLICD 的 WebSSH Origin 白名单配置；前端页面无法伪造浏览器 Origin。
|
||||
|
||||
## 支持的魔方操作
|
||||
|
||||
| 魔方操作 | CLICD API |
|
||||
| --- | --- |
|
||||
| 连接测试 | `GET /api/v1/dashboard` |
|
||||
| 开通 | `POST /api/v1/containers` |
|
||||
| 删除 | `DELETE /api/v1/containers/{name}/delete` |
|
||||
| 开机 | `POST /api/v1/containers/{name}/start` |
|
||||
| 关机 | `POST /api/v1/containers/{name}/stop` |
|
||||
| 重启 | `POST /api/v1/containers/{name}/restart` |
|
||||
| 重装 | `POST /api/v1/containers/{name}/reinstall` |
|
||||
| 改密 | `POST /api/v1/containers/{name}/reset-password` |
|
||||
| 重置流量 | `POST /api/v1/containers/{name}/traffic-reset` |
|
||||
| 变更资源 | `PUT /api/v1/containers/{name}/resource-limit` |
|
||||
| 变更流量 | `PUT /api/v1/containers/{name}/traffic-limit` |
|
||||
| 同步到期 | `PUT /api/v1/containers/{name}/expiry` |
|
||||
| WebSSH | `POST /api/v1/ssh-ticket` |
|
||||
|
||||
## 建议 API 权限
|
||||
|
||||
API Key 至少需要以下权限，具体名称以 CLICD 后端实际权限系统为准：
|
||||
|
||||
```text
|
||||
dashboard:read
|
||||
container:read
|
||||
container:create
|
||||
container:power
|
||||
container:delete
|
||||
container:reinstall
|
||||
container:password
|
||||
container:traffic
|
||||
container:resize
|
||||
container:port
|
||||
task:read
|
||||
ssh-ticket:create
|
||||
```
|
||||
|
||||
如果 API Key 使用 `*` 或 `admin:*`，通常可以覆盖上述权限。
|
||||
|
||||
## 建议先测试的 curl
|
||||
|
||||
连接测试：
|
||||
|
||||
```bash
|
||||
curl -H "X-API-Key: clicd_sk_xxxx" \
|
||||
https://0.0.0.0:8999/api/v1/dashboard
|
||||
```
|
||||
|
||||
容器详情：
|
||||
|
||||
```bash
|
||||
curl -H "X-API-Key: clicd_sk_xxxx" \
|
||||
https://0.0.0.0:8999/api/v1/containers/example-vm
|
||||
```
|
||||
|
||||
资源用量：
|
||||
|
||||
```bash
|
||||
curl -H "X-API-Key: clicd_sk_xxxx" \
|
||||
https://0.0.0.0:8999/api/v1/containers/example-vm/usage
|
||||
```
|
||||
|
||||
流量统计：
|
||||
|
||||
```bash
|
||||
curl -H "X-API-Key: clicd_sk_xxxx" \
|
||||
https://0.0.0.0:8999/api/v1/containers/example-vm/traffic
|
||||
```
|
||||
|
||||
修改 NAT：
|
||||
|
||||
```bash
|
||||
curl --location --request PUT \
|
||||
"https://0.0.0.0:8999/api/v1/containers/10/port-mappings/1" \
|
||||
--header "X-API-Key: clicd_sk_xxxx" \
|
||||
--header "Authorization: Bearer clicd_sk_xxxx" \
|
||||
--header "Content-Type: application/json" \
|
||||
--data-raw '{"container_port":8081,"host_port":61320,"protocol":"tcp","description":"HTTP"}'
|
||||
```
|
||||
|
||||
创建 WebSSH 票据：
|
||||
|
||||
```bash
|
||||
curl --location --request POST \
|
||||
"https://0.0.0.0:8999/api/v1/ssh-ticket" \
|
||||
--header "X-API-Key: clicd_sk_xxxx" \
|
||||
--header "Content-Type: application/json" \
|
||||
--data-raw '{"container_name":"example-vm"}'
|
||||
```
|
||||
|
||||
## 常见问题
|
||||
|
||||
### NAT 修改不生效
|
||||
|
||||
确认请求体必须是 JSON，不要使用 `multipart/form-data`。正确请求头：
|
||||
|
||||
```text
|
||||
Content-Type: application/json
|
||||
```
|
||||
|
||||
### 图表刚打开只有一条横线
|
||||
|
||||
CLICD 当前用量接口返回的是实时值，不是历史序列。页面刚打开时只有一个采样点，所以会显示当前值横线。选择 `10 秒` 自动刷新或点击“立即刷新”多采样几次后，会逐步形成折线。
|
||||
|
||||
### 流量显示为 0
|
||||
|
||||
旧版本只显示 GB，小流量换算后会被四舍五入成 `0 GB`。当前版本已改为智能单位，会显示 B / KB / MB / GB。
|
||||
|
||||
### WebSSH 打不开或提示不安全 WebSocket
|
||||
|
||||
请确认 CLICD 面板已经启用 HTTPS/WSS，并且魔方服务器配置使用 HTTPS：
|
||||
|
||||
```text
|
||||
server_host = https://0.0.0.0:8999
|
||||
```
|
||||
|
||||
如果仍然使用 `http://`，模块会生成 `ws://` 地址，HTTPS 客户区页面会被浏览器拦截。
|
||||
|
||||
如果 WSS 证书正常但仍返回 `Forbidden` 或浏览器显示 `code=1006`，请检查 CLICD 的 WebSSH Origin 白名单。新版 CLICD 已支持放行魔方财务域名，需要把魔方客户区访问域名完整加入白名单，例如：
|
||||
|
||||
```text
|
||||
https://www.example.com
|
||||
```
|
||||
|
||||
注意需要填写浏览器实际访问魔方客户区时的协议和域名，`http` / `https`、带不带 `www` 都要与实际访问地址一致。
|
||||
|
||||
### 开通后魔方里的 IP、端口、密码不对
|
||||
|
||||
执行“同步状态”或重装 / 改密后，模块会重新拉取容器详情。请确认 CLICD 容器详情接口能返回：
|
||||
|
||||
```text
|
||||
ssh_port
|
||||
ssh_password
|
||||
status
|
||||
```
|
||||
|
||||
公网 IP 优先使用 `nat_public_ip/public_ip/host_ip/external_ip/node_ip/nat_host` 等字段；如果接口没有返回，则使用魔方服务器配置的 IP。
|
||||
+1368
File diff suppressed because it is too large
Load Diff
Binary file not shown.
@@ -0,0 +1,384 @@
|
||||
<?php
|
||||
$ws = isset($_GET['ws']) ? (string)$_GET['ws'] : (isset($_GET['amp;ws']) ? (string)$_GET['amp;ws'] : '');
|
||||
$protocol = isset($_GET['protocol']) ? (string)$_GET['protocol'] : (isset($_GET['amp;protocol']) ? (string)$_GET['amp;protocol'] : '');
|
||||
$container = isset($_GET['container']) ? (string)$_GET['container'] : (isset($_GET['amp;container']) ? (string)$_GET['amp;container'] : '');
|
||||
|
||||
if ($ws === '' || $protocol === '') {
|
||||
http_response_code(400);
|
||||
header('Content-Type: text/plain; charset=utf-8');
|
||||
echo "Missing WebSSH parameters\n";
|
||||
echo "Received query: " . ($_SERVER['QUERY_STRING'] ?? '') . "\n";
|
||||
exit;
|
||||
}
|
||||
?>
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>WebSSH</title>
|
||||
<style>
|
||||
html,body{height:100%;margin:0;background:#0b1020;color:#e5e7eb;font-family:Consolas,Menlo,monospace}
|
||||
body{cursor:text}
|
||||
.bar{height:44px;display:flex;align-items:center;gap:12px;padding:0 14px;background:#111827;border-bottom:1px solid #243047}
|
||||
.dot{width:9px;height:9px;border-radius:50%;background:#f59e0b}
|
||||
.dot.ok{background:#22c55e}.dot.err{background:#ef4444}
|
||||
.title{font-size:14px;color:#cbd5e1;flex:1}
|
||||
.tools{display:flex;align-items:center;gap:8px;font-size:12px;color:#94a3b8;flex-wrap:wrap;justify-content:flex-end}
|
||||
.tools select{height:26px;background:#0f172a;color:#cbd5e1;border:1px solid #334155;border-radius:4px}
|
||||
.tools button{height:26px;border:1px solid #334155;background:#0f172a;color:#cbd5e1;border-radius:4px;padding:0 8px;cursor:pointer}
|
||||
#keyhint{min-width:44px;text-align:right}
|
||||
#iostat{min-width:120px;text-align:right}
|
||||
#term{height:calc(100% - 89px);box-sizing:border-box;padding:14px;overflow:auto;white-space:pre-wrap;word-break:break-word;font-size:14px;line-height:1.45;outline:none}
|
||||
.inputbar{height:44px;display:flex;align-items:center;gap:8px;padding:6px 10px;box-sizing:border-box;background:#111827;border-top:1px solid #243047}
|
||||
#cmd{flex:1;height:30px;background:#020617;color:#e5e7eb;border:1px solid #334155;border-radius:4px;padding:0 8px;font:14px Consolas,Menlo,monospace;outline:none}
|
||||
#sendcmd{height:30px;border:1px solid #2563eb;background:#2563eb;color:#fff;border-radius:4px;padding:0 12px;cursor:pointer}
|
||||
.hint{color:#94a3b8}
|
||||
.meta{color:#94a3b8}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="bar">
|
||||
<span id="state" class="dot"></span>
|
||||
<span class="title">WebSSH <?php echo htmlspecialchars($container, ENT_QUOTES, 'UTF-8'); ?></span>
|
||||
<span class="tools">
|
||||
<span>发送模式</span>
|
||||
<select id="send-mode">
|
||||
<option value="raw" selected>raw</option>
|
||||
<option value="binary">binary</option>
|
||||
<option value="json-input">json input</option>
|
||||
<option value="json-data">json data</option>
|
||||
<option value="json-stdin">json stdin</option>
|
||||
</select>
|
||||
<button id="send-enter" type="button">回车</button>
|
||||
<span id="iostat">S0 R0</span>
|
||||
<span id="keyhint"></span>
|
||||
</span>
|
||||
</div>
|
||||
<div id="term" tabindex="0"><span class="hint">正在连接...</span></div>
|
||||
<div class="inputbar">
|
||||
<input id="cmd" type="text" autocomplete="off" spellcheck="false" placeholder="在这里输入命令，例如 ls -la">
|
||||
<button id="sendcmd" type="button">发送</button>
|
||||
</div>
|
||||
<script>
|
||||
(function(){
|
||||
var wsUrl = <?php echo json_encode($ws, JSON_UNESCAPED_SLASHES); ?>;
|
||||
var protocol = <?php echo json_encode($protocol, JSON_UNESCAPED_SLASHES); ?>;
|
||||
var term = document.getElementById('term');
|
||||
var state = document.getElementById('state');
|
||||
var modeSelect = document.getElementById('send-mode');
|
||||
var keyhint = document.getElementById('keyhint');
|
||||
var iostat = document.getElementById('iostat');
|
||||
var sendEnter = document.getElementById('send-enter');
|
||||
var cmd = document.getElementById('cmd');
|
||||
var sendcmd = document.getElementById('sendcmd');
|
||||
var socket;
|
||||
var hintTimer;
|
||||
var sentCount = 0;
|
||||
var recvCount = 0;
|
||||
var decoder = window.TextDecoder ? new TextDecoder('utf-8') : null;
|
||||
var termLines = [''];
|
||||
var cursorRow = 0;
|
||||
var cursorCol = 0;
|
||||
var maxLines = 2000;
|
||||
|
||||
function append(text) {
|
||||
writeTerminal(stripTerminalControls(String(text || '')));
|
||||
renderTerminal();
|
||||
}
|
||||
|
||||
function clearTerminal() {
|
||||
termLines = [''];
|
||||
cursorRow = 0;
|
||||
cursorCol = 0;
|
||||
renderTerminal();
|
||||
}
|
||||
|
||||
function stripTerminalControls(text) {
|
||||
return text
|
||||
.replace(/\x1b\][\s\S]*?(?:\x07|\x1b\\)/g, '')
|
||||
.replace(/\x1b\[(?:2J|H)/g, '\f')
|
||||
.replace(/\x1b\[[0-?]*[ -/]*K/g, '\v')
|
||||
.replace(/\ufffd\[[0-?]*[ -/]*K/g, '\v')
|
||||
.replace(/\x1b\[[0-?]*[ -/]*[@-~]/g, '')
|
||||
.replace(/\ufffd\[[0-?]*[ -/]*[@-~]/g, '')
|
||||
.replace(/\x1b[()][A-Za-z0-9]/g, '')
|
||||
.replace(/\x1b[@-Z\\-_]/g, '')
|
||||
.replace(/[\x00-\x08\x0e-\x1f\x7f]/g, '');
|
||||
}
|
||||
|
||||
function ensureLine() {
|
||||
while (cursorRow >= termLines.length) {
|
||||
termLines.push('');
|
||||
}
|
||||
}
|
||||
|
||||
function trimTerminal() {
|
||||
if (termLines.length <= maxLines) {
|
||||
return;
|
||||
}
|
||||
var overflow = termLines.length - maxLines;
|
||||
termLines.splice(0, overflow);
|
||||
cursorRow = Math.max(0, cursorRow - overflow);
|
||||
}
|
||||
|
||||
function writeTerminal(text) {
|
||||
for (var i = 0; i < text.length; i++) {
|
||||
var ch = text.charAt(i);
|
||||
if (ch === '\f') {
|
||||
termLines = [''];
|
||||
cursorRow = 0;
|
||||
cursorCol = 0;
|
||||
continue;
|
||||
}
|
||||
if (ch === '\v') {
|
||||
ensureLine();
|
||||
termLines[cursorRow] = termLines[cursorRow].slice(0, cursorCol);
|
||||
continue;
|
||||
}
|
||||
if (ch === '\r') {
|
||||
cursorCol = 0;
|
||||
continue;
|
||||
}
|
||||
if (ch === '\n') {
|
||||
cursorRow++;
|
||||
cursorCol = 0;
|
||||
ensureLine();
|
||||
trimTerminal();
|
||||
continue;
|
||||
}
|
||||
if (ch === '\b') {
|
||||
cursorCol = Math.max(0, cursorCol - 1);
|
||||
continue;
|
||||
}
|
||||
if (ch === '\t') {
|
||||
var spaces = 4 - (cursorCol % 4);
|
||||
for (var s = 0; s < spaces; s++) {
|
||||
writePrintable(' ');
|
||||
}
|
||||
continue;
|
||||
}
|
||||
writePrintable(ch);
|
||||
}
|
||||
trimTerminal();
|
||||
}
|
||||
|
||||
function writePrintable(ch) {
|
||||
ensureLine();
|
||||
var line = termLines[cursorRow];
|
||||
if (cursorCol > line.length) {
|
||||
line += new Array(cursorCol - line.length + 1).join(' ');
|
||||
}
|
||||
termLines[cursorRow] = line.slice(0, cursorCol) + ch + line.slice(cursorCol + 1);
|
||||
cursorCol++;
|
||||
}
|
||||
|
||||
function renderTerminal() {
|
||||
term.textContent = termLines.join('\n');
|
||||
term.scrollTop = term.scrollHeight;
|
||||
}
|
||||
|
||||
function setState(cls, text) {
|
||||
state.className = 'dot ' + cls;
|
||||
append(text);
|
||||
}
|
||||
|
||||
function updateIoStatus() {
|
||||
if (!iostat) return;
|
||||
var stateText = socket ? ['CONNECTING','OPEN','CLOSING','CLOSED'][socket.readyState] : '-';
|
||||
iostat.textContent = 'S' + sentCount + ' R' + recvCount + ' ' + stateText;
|
||||
}
|
||||
|
||||
try {
|
||||
socket = new WebSocket(wsUrl, protocol);
|
||||
socket.binaryType = 'arraybuffer';
|
||||
} catch (e) {
|
||||
setState('err', '\nWebSocket 创建失败：' + e.message + '\n');
|
||||
return;
|
||||
}
|
||||
|
||||
socket.onopen = function(){
|
||||
clearTerminal();
|
||||
setState('ok', '已连接。\r\n');
|
||||
updateIoStatus();
|
||||
if (cmd) cmd.focus();
|
||||
};
|
||||
socket.onmessage = function(event){
|
||||
recvCount++;
|
||||
updateIoStatus();
|
||||
if (typeof event.data === 'string') {
|
||||
handleIncomingText(event.data);
|
||||
return;
|
||||
}
|
||||
if (event.data instanceof ArrayBuffer) {
|
||||
handleIncomingText(decodeIncoming(event.data));
|
||||
return;
|
||||
}
|
||||
if (window.Blob && event.data instanceof Blob) {
|
||||
event.data.arrayBuffer().then(function(buffer){
|
||||
handleIncomingText(decodeIncoming(buffer));
|
||||
}).catch(function(){
|
||||
append('\n[WebSSH] 无法解码服务端返回内容。\n');
|
||||
});
|
||||
}
|
||||
};
|
||||
socket.onerror = function(){
|
||||
setState('err', '\nWebSocket 连接错误，请检查 HTTPS 证书、WSS 服务、Origin 策略和票据有效期。\n');
|
||||
};
|
||||
socket.onclose = function(event){
|
||||
updateIoStatus();
|
||||
setState('err', '\n连接已断开。code=' + event.code + ' reason=' + (event.reason || '-') + ' clean=' + event.wasClean + '\n');
|
||||
};
|
||||
|
||||
function flashKey(text) {
|
||||
if (!keyhint) return;
|
||||
keyhint.textContent = text;
|
||||
window.clearTimeout(hintTimer);
|
||||
hintTimer = window.setTimeout(function(){ keyhint.textContent = ''; }, 500);
|
||||
}
|
||||
|
||||
function decodeIncoming(buffer) {
|
||||
if (decoder) {
|
||||
return decoder.decode(new Uint8Array(buffer));
|
||||
}
|
||||
var bytes = new Uint8Array(buffer);
|
||||
var text = '';
|
||||
for (var i = 0; i < bytes.length; i++) {
|
||||
text += String.fromCharCode(bytes[i]);
|
||||
}
|
||||
try {
|
||||
return decodeURIComponent(escape(text));
|
||||
} catch (e) {
|
||||
return text;
|
||||
}
|
||||
}
|
||||
|
||||
function handleIncomingText(text) {
|
||||
append(text);
|
||||
if (text.indexOf('SSH shell ready') !== -1) {
|
||||
window.setTimeout(function(){ send('\r'); }, 250);
|
||||
}
|
||||
}
|
||||
|
||||
function wsPayload(data) {
|
||||
var mode = modeSelect ? modeSelect.value : 'raw';
|
||||
if (mode === 'raw') {
|
||||
return data;
|
||||
}
|
||||
if (mode === 'binary') {
|
||||
return new TextEncoder().encode(data);
|
||||
}
|
||||
if (mode === 'json-data') {
|
||||
return JSON.stringify({type:'data', data:data});
|
||||
}
|
||||
if (mode === 'json-stdin') {
|
||||
return JSON.stringify({type:'stdin', data:data});
|
||||
}
|
||||
return JSON.stringify({type:'input', data:data});
|
||||
}
|
||||
|
||||
function send(data) {
|
||||
if (!socket || socket.readyState !== WebSocket.OPEN) {
|
||||
return false;
|
||||
}
|
||||
socket.send(wsPayload(data));
|
||||
sentCount++;
|
||||
updateIoStatus();
|
||||
flashKey(data === '\r' ? '回车' : data === '\x7f' ? '退格' : data.length > 1 ? data.length + ' 字符' : data);
|
||||
return true;
|
||||
}
|
||||
|
||||
function keyToData(e) {
|
||||
if (e.ctrlKey && !e.altKey && !e.metaKey && e.key.length === 1) {
|
||||
var code = e.key.toUpperCase().charCodeAt(0);
|
||||
if (code >= 64 && code <= 95) {
|
||||
return String.fromCharCode(code - 64);
|
||||
}
|
||||
}
|
||||
var map = {
|
||||
Enter: '\r',
|
||||
Backspace: '\x7f',
|
||||
Tab: '\t',
|
||||
Escape: '\x1b',
|
||||
ArrowUp: '\x1b[A',
|
||||
ArrowDown: '\x1b[B',
|
||||
ArrowRight: '\x1b[C',
|
||||
ArrowLeft: '\x1b[D',
|
||||
Delete: '\x1b[3~',
|
||||
Home: '\x1b[H',
|
||||
End: '\x1b[F',
|
||||
PageUp: '\x1b[5~',
|
||||
PageDown: '\x1b[6~'
|
||||
};
|
||||
if (map[e.key]) {
|
||||
return map[e.key];
|
||||
}
|
||||
if (!e.ctrlKey && !e.altKey && !e.metaKey && e.key.length === 1) {
|
||||
return e.key;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', function(e){
|
||||
if (e.target === cmd) {
|
||||
return;
|
||||
}
|
||||
var data = keyToData(e);
|
||||
if (data !== null && send(data)) {
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('paste', function(e){
|
||||
if (e.target === cmd) {
|
||||
return;
|
||||
}
|
||||
var text = e.clipboardData ? e.clipboardData.getData('text/plain') : '';
|
||||
if (text && send(text)) {
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('mousedown', function(){
|
||||
if (cmd) cmd.focus();
|
||||
});
|
||||
|
||||
function sendCommandLine() {
|
||||
if (!cmd) return;
|
||||
var value = cmd.value;
|
||||
if (value === '') {
|
||||
send('\r');
|
||||
return;
|
||||
}
|
||||
if (send(value + '\r')) {
|
||||
cmd.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
if (sendcmd) {
|
||||
sendcmd.addEventListener('click', sendCommandLine);
|
||||
}
|
||||
if (sendEnter) {
|
||||
sendEnter.addEventListener('click', function(){
|
||||
send('\r');
|
||||
if (cmd) cmd.focus();
|
||||
});
|
||||
}
|
||||
if (cmd) {
|
||||
cmd.addEventListener('keydown', function(e){
|
||||
if (e.key === 'Enter') {
|
||||
sendCommandLine();
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
if (e.ctrlKey && e.key.toLowerCase() === 'c') {
|
||||
send('\x03');
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
}
|
||||
window.setInterval(updateIoStatus, 1000);
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,378 @@
|
||||
<style>
|
||||
.clicd-info{font-size:14px;color:#1f2937;background:#f6f8fb;padding:14px;border-radius:6px;max-width:100%;overflow:hidden}
|
||||
.clicd-info *{box-sizing:border-box}
|
||||
.clicd-head{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-bottom:12px}
|
||||
.clicd-mini{background:#fff;border:1px solid #e5e7eb;border-radius:6px;padding:10px}
|
||||
.clicd-mini-label{font-size:12px;color:#6b7280;margin-bottom:4px}
|
||||
.clicd-mini-value{font-size:16px;font-weight:600;color:#111827;word-break:break-all}
|
||||
.clicd-section{background:#fff;border:1px solid #e5e7eb;border-radius:6px;margin-top:12px;padding:14px}
|
||||
.clicd-section-title{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:15px;font-weight:700;margin-bottom:12px;color:#111827;min-width:0;flex-wrap:wrap}
|
||||
.clicd-section-title>span:first-child{min-width:0}
|
||||
.clicd-refresh{display:flex;align-items:center;justify-content:flex-end;gap:8px;font-size:12px;color:#6b7280;font-weight:400;flex-wrap:wrap;min-width:0;max-width:100%}
|
||||
.clicd-refresh label{display:inline-flex;align-items:center;gap:4px;min-width:0;white-space:nowrap}
|
||||
.clicd-refresh-select{height:28px;border:1px solid #d1d5db;border-radius:4px;background:#fff;color:#374151;padding:3px 6px;font-size:12px}
|
||||
.clicd-refresh-btn{height:28px;border:1px solid #2563eb;background:#2563eb;color:#fff;border-radius:4px;padding:3px 8px;font-size:12px;cursor:pointer;white-space:nowrap;max-width:96px;overflow:hidden;text-overflow:ellipsis}
|
||||
.clicd-refresh-btn[disabled]{opacity:.6;cursor:not-allowed}
|
||||
.clicd-gauges{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
|
||||
.clicd-gauge{display:flex;align-items:center;gap:12px;min-height:92px}
|
||||
.clicd-ring{--p:0%;width:78px;height:78px;border-radius:50%;background:conic-gradient(#2f80ed var(--p),#e5e7eb 0);display:grid;place-items:center;flex:0 0 auto;position:relative}
|
||||
.clicd-ring:before{content:"";width:66px;height:66px;border-radius:50%;background:#fff;position:absolute}
|
||||
.clicd-ring span{position:relative;display:inline-flex;align-items:center;justify-content:center;max-width:62px;min-width:0;font-size:17px;font-weight:700;line-height:1;color:#111827;white-space:nowrap;text-align:center;background:#fff;border-radius:3px;padding:0 1px}
|
||||
.clicd-ring[data-tight="1"] span{font-size:15px}
|
||||
.clicd-ring[data-tight="2"] span{font-size:14px}
|
||||
.clicd-gauge-title{font-weight:700;color:#111827;margin-bottom:4px}
|
||||
.clicd-gauge-sub{font-size:12px;color:#6b7280;line-height:1.45}
|
||||
.clicd-progress{height:12px;background:#e5e7eb;border-radius:999px;overflow:hidden}
|
||||
.clicd-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,#2f80ed,#10b981);transition:width .25s ease}
|
||||
.clicd-traffic-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;margin-top:8px;color:#374151;min-width:0}
|
||||
.clicd-traffic-row>div{min-width:0;word-break:break-word}
|
||||
.clicd-charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
|
||||
.clicd-chart{border:1px solid #e5e7eb;border-radius:6px;padding:12px;background:#fff;min-height:190px;min-width:0;overflow:hidden}
|
||||
.clicd-chart-title{display:flex;justify-content:space-between;gap:8px;align-items:center;font-weight:700;margin-bottom:8px;color:#111827;min-width:0;flex-wrap:wrap}
|
||||
.clicd-chart-value{font-size:12px;color:#6b7280;font-weight:400;white-space:normal;overflow-wrap:anywhere;text-align:right}
|
||||
.clicd-chart canvas{width:100%;height:132px;display:block}
|
||||
.clicd-table{width:100%;border-collapse:collapse;background:#fff}
|
||||
.clicd-table th,.clicd-table td{border:1px solid #e5e7eb;padding:8px;text-align:left}
|
||||
.clicd-table th{width:16%;background:#f9fafb;color:#374151;font-weight:600}
|
||||
.clicd-debug{display:none;margin-top:10px;padding:8px;background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:6px;font-size:12px}
|
||||
@media (max-width:640px){
|
||||
.clicd-info{padding:10px}
|
||||
.clicd-section-title{align-items:flex-start}
|
||||
.clicd-refresh{justify-content:flex-start;width:100%}
|
||||
.clicd-charts{grid-template-columns:1fr}
|
||||
.clicd-table th,.clicd-table td{display:block;width:100%}
|
||||
.clicd-ring{width:70px;height:70px}
|
||||
.clicd-ring:before{width:60px;height:60px}
|
||||
.clicd-ring span{max-width:56px;font-size:15px}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="clicd-info" data-clicd-info-root="1">
|
||||
<div class="clicd-head">
|
||||
<div class="clicd-mini">
|
||||
<div class="clicd-mini-label">实例名称</div>
|
||||
<div class="clicd-mini-value">{$container.name|default='-'}</div>
|
||||
</div>
|
||||
<div class="clicd-mini">
|
||||
<div class="clicd-mini-label">运行状态</div>
|
||||
<div class="clicd-mini-value">{$status_text|default='-'}</div>
|
||||
</div>
|
||||
<div class="clicd-mini">
|
||||
<div class="clicd-mini-label">SSH 地址</div>
|
||||
<div class="clicd-mini-value">{$ssh_host|default='-'}:{$ssh_port|default='-'}</div>
|
||||
</div>
|
||||
<div class="clicd-mini">
|
||||
<div class="clicd-mini-label">IPv6</div>
|
||||
<div class="clicd-mini-value">{$ipv6|default='-'}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clicd-section">
|
||||
<div class="clicd-section-title">
|
||||
<span>状态</span>
|
||||
<span class="clicd-refresh">
|
||||
<span>更新于 <span data-clicd-info="chart_time">-</span></span>
|
||||
<label>
|
||||
自动刷新
|
||||
<select class="clicd-refresh-select" id="clicd-info-refresh">
|
||||
<option value="0" selected>不刷新</option>
|
||||
<option value="10000">10 秒</option>
|
||||
<option value="60000">1 分钟</option>
|
||||
<option value="300000">5 分钟</option>
|
||||
<option value="600000">10 分钟</option>
|
||||
</select>
|
||||
</label>
|
||||
<button class="clicd-refresh-btn" type="button" id="clicd-info-refresh-now">立即刷新</button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="clicd-gauges">
|
||||
<div class="clicd-gauge">
|
||||
<div class="clicd-ring" data-gauge="cpu_percent"><span><span data-clicd-info="cpu_percent">0</span>%</span></div>
|
||||
<div>
|
||||
<div class="clicd-gauge-title">CPU</div>
|
||||
<div class="clicd-gauge-sub" data-clicd-info="cpu_detail">-</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clicd-gauge">
|
||||
<div class="clicd-ring" data-gauge="mem_percent"><span><span data-clicd-info="mem_percent">0</span>%</span></div>
|
||||
<div>
|
||||
<div class="clicd-gauge-title">内存</div>
|
||||
<div class="clicd-gauge-sub" data-clicd-info="mem_detail">-</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clicd-gauge">
|
||||
<div class="clicd-ring" data-gauge="load_percent"><span><span data-clicd-info="load_percent">0</span>%</span></div>
|
||||
<div>
|
||||
<div class="clicd-gauge-title">负载</div>
|
||||
<div class="clicd-gauge-sub" data-clicd-info="load_detail">-</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clicd-gauge">
|
||||
<div class="clicd-ring" data-gauge="disk_percent"><span><span data-clicd-info="disk_percent">0</span>%</span></div>
|
||||
<div>
|
||||
<div class="clicd-gauge-title">磁盘</div>
|
||||
<div class="clicd-gauge-sub" data-clicd-info="disk_detail">-</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top:14px">
|
||||
<div class="clicd-traffic-row">
|
||||
<div>月流量</div>
|
||||
<div><span data-clicd-info="traffic_used_text">{$traffic_used_text|default='-'}</span> / <span data-clicd-info="traffic_limit_text">{$traffic_limit_text|default='-'}</span></div>
|
||||
</div>
|
||||
<div class="clicd-progress"><span data-progress="traffic_percent"></span></div>
|
||||
<div class="clicd-traffic-row" style="font-size:12px;color:#6b7280">
|
||||
<div>入站 <span data-clicd-info="traffic_in_text">{$traffic_in_text|default='-'}</span></div>
|
||||
<div>出站 <span data-clicd-info="traffic_out_text">{$traffic_out_text|default='-'}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clicd-section">
|
||||
<div class="clicd-section-title"><span>统计信息</span></div>
|
||||
<div class="clicd-charts">
|
||||
<div class="clicd-chart">
|
||||
<div class="clicd-chart-title">CPU 使用率 <span class="clicd-chart-value" data-clicd-info="cpu_detail">-</span></div>
|
||||
<canvas data-chart="cpu_percent"></canvas>
|
||||
</div>
|
||||
<div class="clicd-chart">
|
||||
<div class="clicd-chart-title">内存使用 <span class="clicd-chart-value" data-clicd-info="mem_detail">-</span></div>
|
||||
<canvas data-chart="mem_percent"></canvas>
|
||||
</div>
|
||||
<div class="clicd-chart">
|
||||
<div class="clicd-chart-title">网络流量 <span class="clicd-chart-value"><span data-clicd-info="net_in_rate">0 B/s</span> / <span data-clicd-info="net_out_rate">0 B/s</span></span></div>
|
||||
<canvas data-chart="network"></canvas>
|
||||
</div>
|
||||
<div class="clicd-chart">
|
||||
<div class="clicd-chart-title">磁盘 IO <span class="clicd-chart-value"><span data-clicd-info="disk_read_rate">0 B/s</span> / <span data-clicd-info="disk_write_rate">0 B/s</span></span></div>
|
||||
<canvas data-chart="diskio"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clicd-section">
|
||||
<div class="clicd-section-title"><span>实例信息</span></div>
|
||||
<table class="clicd-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>IPv4</th><td>{$ipv4|default='-'}</td>
|
||||
<th>用户名</th><td>root</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>SSH 端口</th><td>{$ssh_port|default='-'}</td>
|
||||
<th>SSH 密码</th><td>{$ssh_password|default='-'}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>CPU</th><td>{$vcpu|default='-'} 核</td>
|
||||
<th>内存</th><td>{$ram_mb|default='-'} MB</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>硬盘</th><td>{$disk_gb|default='-'} GB</td>
|
||||
<th>带宽</th><td>{$bandwidth|default='-'} Mbps</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>到期时间</th><td colspan="3">{$expires_at|default='-'}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="clicd-debug" id="clicd-info-debug"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
var root = document.querySelector('[data-clicd-info-root="1"]:not([data-info-bound="1"])');
|
||||
if (!root) return;
|
||||
root.setAttribute('data-info-bound', '1');
|
||||
|
||||
var history = {
|
||||
cpu_percent: [],
|
||||
mem_percent: [],
|
||||
network_in: [],
|
||||
network_out: [],
|
||||
disk_read: [],
|
||||
disk_write: []
|
||||
};
|
||||
var maxPoints = 18;
|
||||
var refreshTimer = null;
|
||||
|
||||
function endpoint() {
|
||||
return "{$MODULE_CUSTOM_API}";
|
||||
}
|
||||
|
||||
function number(value) {
|
||||
var n = parseFloat(value);
|
||||
return isFinite(n) ? n : 0;
|
||||
}
|
||||
|
||||
function push(name, value) {
|
||||
history[name].push(number(value));
|
||||
if (history[name].length > maxPoints) history[name].shift();
|
||||
}
|
||||
|
||||
function setText(key, value) {
|
||||
root.querySelectorAll('[data-clicd-info="' + key + '"]').forEach(function(node){
|
||||
if (typeof value !== 'object') node.textContent = value;
|
||||
});
|
||||
}
|
||||
|
||||
function setGauge(key, value) {
|
||||
var pct = Math.max(0, Math.min(100, number(value)));
|
||||
root.querySelectorAll('[data-gauge="' + key + '"]').forEach(function(node){
|
||||
node.style.setProperty('--p', pct + '%');
|
||||
});
|
||||
}
|
||||
|
||||
function fitGaugeText() {
|
||||
root.querySelectorAll('.clicd-ring').forEach(function(ring){
|
||||
var label = ring.querySelector('span');
|
||||
if (!label) return;
|
||||
ring.removeAttribute('data-tight');
|
||||
if (label.scrollWidth > label.clientWidth) {
|
||||
ring.setAttribute('data-tight', '1');
|
||||
}
|
||||
if (label.scrollWidth > label.clientWidth) {
|
||||
ring.setAttribute('data-tight', '2');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function setProgress(key, value) {
|
||||
var pct = Math.max(0, Math.min(100, number(value)));
|
||||
root.querySelectorAll('[data-progress="' + key + '"]').forEach(function(node){
|
||||
node.style.width = pct + '%';
|
||||
});
|
||||
}
|
||||
|
||||
function draw(canvas, series, colors, maxValue) {
|
||||
if (!canvas || !canvas.getContext) return;
|
||||
var rect = canvas.getBoundingClientRect();
|
||||
var ratio = window.devicePixelRatio || 1;
|
||||
var width = Math.max(220, Math.floor(rect.width || canvas.clientWidth || 220));
|
||||
var height = Math.max(120, Math.floor(rect.height || canvas.clientHeight || 132));
|
||||
if (canvas.width !== width * ratio || canvas.height !== height * ratio) {
|
||||
canvas.width = width * ratio;
|
||||
canvas.height = height * ratio;
|
||||
}
|
||||
var ctx = canvas.getContext('2d');
|
||||
if (!ctx) return;
|
||||
ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
ctx.strokeStyle = '#e5e7eb';
|
||||
ctx.lineWidth = 1;
|
||||
for (var i = 1; i < 4; i++) {
|
||||
var y = Math.round((height / 4) * i);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, y);
|
||||
ctx.lineTo(width, y);
|
||||
ctx.stroke();
|
||||
}
|
||||
series.forEach(function(values, idx){
|
||||
if (!values.length) return;
|
||||
var color = colors[idx] || '#2f80ed';
|
||||
ctx.strokeStyle = color;
|
||||
ctx.lineWidth = 2;
|
||||
ctx.beginPath();
|
||||
if (values.length === 1) {
|
||||
var singleY = height - (Math.max(0, Math.min(maxValue, number(values[0]))) / maxValue) * (height - 6) - 3;
|
||||
ctx.moveTo(0, singleY);
|
||||
ctx.lineTo(width, singleY);
|
||||
ctx.stroke();
|
||||
ctx.fillStyle = color;
|
||||
ctx.beginPath();
|
||||
ctx.arc(width - 8, singleY, 3, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
return;
|
||||
}
|
||||
values.forEach(function(value, i){
|
||||
var x = values.length <= 1 ? width : (i / (values.length - 1)) * width;
|
||||
var y = height - (Math.max(0, Math.min(maxValue, number(value))) / maxValue) * (height - 6) - 3;
|
||||
if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
|
||||
});
|
||||
ctx.stroke();
|
||||
});
|
||||
}
|
||||
|
||||
function redraw() {
|
||||
draw(root.querySelector('[data-chart="cpu_percent"]'), [history.cpu_percent], ['#2f80ed'], 100);
|
||||
draw(root.querySelector('[data-chart="mem_percent"]'), [history.mem_percent], ['#10b981'], 100);
|
||||
var netMax = Math.max(1, Math.max.apply(null, history.network_in.concat(history.network_out, [1])));
|
||||
draw(root.querySelector('[data-chart="network"]'), [history.network_in, history.network_out], ['#2f80ed', '#f59e0b'], netMax);
|
||||
var ioMax = Math.max(1, Math.max.apply(null, history.disk_read.concat(history.disk_write, [1])));
|
||||
draw(root.querySelector('[data-chart="diskio"]'), [history.disk_read, history.disk_write], ['#10b981', '#ef4444'], ioMax);
|
||||
}
|
||||
|
||||
function showInfoError(text) {
|
||||
var debug = document.getElementById('clicd-info-debug');
|
||||
if (debug) {
|
||||
debug.style.display = 'block';
|
||||
debug.textContent = text || 'info load failed';
|
||||
}
|
||||
}
|
||||
|
||||
function loadInfo() {
|
||||
var refreshNow = document.getElementById('clicd-info-refresh-now');
|
||||
if (refreshNow) refreshNow.disabled = true;
|
||||
var body = new URLSearchParams();
|
||||
body.set('id', '{$service_id}');
|
||||
body.set('func', 'infoData');
|
||||
fetch(endpoint(), {
|
||||
method:'POST',
|
||||
headers:{
|
||||
'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8',
|
||||
'Authorization':'JWT {$Think.get.jwt}'
|
||||
},
|
||||
credentials:'same-origin',
|
||||
body: body.toString()
|
||||
})
|
||||
.then(function(res){ return res.json(); })
|
||||
.then(function(json){
|
||||
if (!json || (json.status !== 200 && json.status !== 'success') || !json.data) {
|
||||
showInfoError(json && json.msg ? json.msg : 'info load failed');
|
||||
return;
|
||||
}
|
||||
var data = json.data;
|
||||
Object.keys(data).forEach(function(key){ setText(key, data[key]); });
|
||||
['cpu_percent','mem_percent','load_percent','disk_percent'].forEach(function(key){ setGauge(key, data[key]); });
|
||||
fitGaugeText();
|
||||
setProgress('traffic_percent', data.traffic_percent);
|
||||
push('cpu_percent', data.cpu_percent);
|
||||
push('mem_percent', data.mem_percent);
|
||||
push('network_in', data.net_in_bps);
|
||||
push('network_out', data.net_out_bps);
|
||||
push('disk_read', data.disk_read_bps);
|
||||
push('disk_write', data.disk_write_bps);
|
||||
redraw();
|
||||
})
|
||||
.catch(function(error){
|
||||
showInfoError(error && error.message ? error.message : 'info request failed');
|
||||
})
|
||||
.finally(function(){
|
||||
if (refreshNow) refreshNow.disabled = false;
|
||||
});
|
||||
}
|
||||
|
||||
loadInfo();
|
||||
var refreshSelect = document.getElementById('clicd-info-refresh');
|
||||
var refreshNow = document.getElementById('clicd-info-refresh-now');
|
||||
if (refreshNow) {
|
||||
refreshNow.addEventListener('click', loadInfo);
|
||||
}
|
||||
if (refreshSelect) {
|
||||
refreshSelect.addEventListener('change', function(){
|
||||
if (refreshTimer) {
|
||||
window.clearInterval(refreshTimer);
|
||||
refreshTimer = null;
|
||||
}
|
||||
var ms = number(refreshSelect.value);
|
||||
if (ms > 0) {
|
||||
loadInfo();
|
||||
refreshTimer = window.setInterval(loadInfo, ms);
|
||||
}
|
||||
});
|
||||
}
|
||||
window.addEventListener('resize', function(){ window.setTimeout(function(){ fitGaugeText(); redraw(); }, 50); });
|
||||
})();
|
||||
</script>
|
||||
@@ -0,0 +1,328 @@
|
||||
<style>
|
||||
.clicd-nat-panel{font-size:14px;color:#1f2937}
|
||||
.clicd-nat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:16px}
|
||||
.clicd-nat-card{border:1px solid #e5e7eb;border-radius:6px;padding:12px;background:#fff}
|
||||
.clicd-nat-label{color:#6b7280;font-size:12px;margin-bottom:4px}
|
||||
.clicd-nat-value{font-size:18px;font-weight:600;word-break:break-all}
|
||||
.clicd-nat-title{font-weight:600;margin:18px 0 8px}
|
||||
.clicd-nat-muted{color:#6b7280}
|
||||
.clicd-nat-form{border:1px solid #e5e7eb;border-radius:6px;background:#fff;padding:12px;margin-top:8px}
|
||||
.clicd-nat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;align-items:end}
|
||||
.clicd-nat-field label{display:block;color:#6b7280;font-size:12px;margin-bottom:4px}
|
||||
.clicd-nat-input,.clicd-nat-select{width:100%;height:34px;border:1px solid #d1d5db;border-radius:4px;padding:6px 8px;box-sizing:border-box}
|
||||
.clicd-nat-actions{display:flex;gap:8px;flex-wrap:wrap}
|
||||
.clicd-nat-btn{height:34px;border:1px solid #2563eb;background:#2563eb;color:#fff;border-radius:4px;padding:0 12px;cursor:pointer}
|
||||
.clicd-nat-btn[disabled]{opacity:.6;cursor:not-allowed}
|
||||
.clicd-nat-btn-secondary{border-color:#d1d5db;background:#fff;color:#374151}
|
||||
.clicd-nat-btn-danger{border-color:#dc2626;background:#dc2626;color:#fff}
|
||||
.clicd-nat-list{display:flex;flex-direction:column;gap:10px;margin-top:8px}
|
||||
.clicd-nat-item{border:1px solid #e5e7eb;border-radius:6px;background:#fff;padding:12px}
|
||||
.clicd-nat-message{border:1px solid #bfdbfe;background:#eff6ff;color:#1d4ed8;border-radius:6px;padding:10px 12px;margin-bottom:12px;display:none}
|
||||
.clicd-nat-message.error{border-color:#fecaca;background:#fef2f2;color:#b91c1c}
|
||||
.clicd-nat-debug{margin-top:12px;border:1px dashed #d1d5db;border-radius:6px;background:#f9fafb;padding:10px;color:#374151;white-space:pre-wrap;font-size:12px;display:none}
|
||||
.clicd-nat-modal-mask{position:fixed;inset:0;background:rgba(15,23,42,.42);display:none;align-items:center;justify-content:center;z-index:9999;padding:16px}
|
||||
.clicd-nat-modal{width:min(420px,100%);background:#fff;border-radius:6px;border:1px solid #e5e7eb;box-shadow:0 18px 48px rgba(15,23,42,.22);padding:16px}
|
||||
.clicd-nat-modal-title{font-size:16px;font-weight:700;color:#111827;margin-bottom:8px}
|
||||
.clicd-nat-modal-body{font-size:14px;color:#4b5563;line-height:1.6;margin-bottom:14px}
|
||||
.clicd-nat-modal-actions{display:flex;justify-content:flex-end;gap:8px}
|
||||
</style>
|
||||
|
||||
<div class="clicd-nat-panel" id="clicd-nat-panel" data-service-id="{$service_id}" data-area-key="{$area_key}">
|
||||
<div class="clicd-nat-message" id="clicd-nat-message"></div>
|
||||
|
||||
<div class="clicd-nat-grid">
|
||||
<div class="clicd-nat-card">
|
||||
<div class="clicd-nat-label">实例名称</div>
|
||||
<div class="clicd-nat-value">{$container_name}</div>
|
||||
</div>
|
||||
<div class="clicd-nat-card">
|
||||
<div class="clicd-nat-label">公网地址</div>
|
||||
<div class="clicd-nat-value">{$nat_host}</div>
|
||||
</div>
|
||||
<div class="clicd-nat-card">
|
||||
<div class="clicd-nat-label">SSH 端口</div>
|
||||
<div class="clicd-nat-value">{$ssh_port}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clicd-nat-title">添加端口映射</div>
|
||||
<div class="clicd-nat-form">
|
||||
<div class="clicd-nat-row">
|
||||
<div class="clicd-nat-field">
|
||||
<label>公网端口</label>
|
||||
<input class="clicd-nat-input" id="clicd-add-host-port" type="number" min="1" max="65535" placeholder="61320">
|
||||
</div>
|
||||
<div class="clicd-nat-field">
|
||||
<label>容器端口</label>
|
||||
<input class="clicd-nat-input" id="clicd-add-container-port" type="number" min="1" max="65535" placeholder="8080">
|
||||
</div>
|
||||
<div class="clicd-nat-field">
|
||||
<label>协议</label>
|
||||
<select class="clicd-nat-select" id="clicd-add-protocol">
|
||||
<option value="tcp">TCP</option>
|
||||
<option value="udp">UDP</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="clicd-nat-field">
|
||||
<label>说明</label>
|
||||
<input class="clicd-nat-input" id="clicd-add-description" type="text" placeholder="HTTP">
|
||||
</div>
|
||||
<div class="clicd-nat-actions">
|
||||
<button class="clicd-nat-btn" type="button" data-clicd-action="add">添加</button>
|
||||
<button class="clicd-nat-btn clicd-nat-btn-secondary" type="button" data-clicd-action="random-port">获取随机端口</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clicd-nat-title">现有端口映射</div>
|
||||
<div id="clicd-nat-list" class="clicd-nat-list">
|
||||
{if condition="empty($port_mappings)"}
|
||||
<div class="clicd-nat-form clicd-nat-muted">暂无端口映射</div>
|
||||
{else/}
|
||||
{foreach name="port_mappings" item="mapping"}
|
||||
<div class="clicd-nat-item" data-index="{$mapping.index}">
|
||||
<div class="clicd-nat-row">
|
||||
<div class="clicd-nat-field">
|
||||
<label>索引</label>
|
||||
<div class="clicd-nat-value">{$mapping.index}</div>
|
||||
</div>
|
||||
<div class="clicd-nat-field">
|
||||
<label>公网访问</label>
|
||||
<div class="clicd-nat-value">{$nat_host}:{$mapping.host_port}</div>
|
||||
</div>
|
||||
<div class="clicd-nat-field">
|
||||
<label>公网端口</label>
|
||||
<input class="clicd-nat-input" data-field="host_port" type="number" min="1" max="65535" value="{$mapping.host_port}">
|
||||
</div>
|
||||
<div class="clicd-nat-field">
|
||||
<label>容器端口</label>
|
||||
<input class="clicd-nat-input" data-field="container_port" type="number" min="1" max="65535" value="{$mapping.container_port}">
|
||||
</div>
|
||||
<div class="clicd-nat-field">
|
||||
<label>协议</label>
|
||||
<select class="clicd-nat-select" data-field="protocol">
|
||||
<option value="tcp" {$mapping.tcp_selected}>TCP</option>
|
||||
<option value="udp" {$mapping.udp_selected}>UDP</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="clicd-nat-field">
|
||||
<label>说明</label>
|
||||
<input class="clicd-nat-input" data-field="description" type="text" value="{$mapping.description}">
|
||||
</div>
|
||||
<div class="clicd-nat-actions">
|
||||
<button class="clicd-nat-btn clicd-nat-btn-secondary" type="button" data-clicd-action="update">保存</button>
|
||||
<button class="clicd-nat-btn clicd-nat-btn-danger" type="button" data-clicd-action="delete">删除</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/foreach}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<pre class="clicd-nat-debug" id="clicd-nat-debug"></pre>
|
||||
<div class="clicd-nat-modal-mask" id="clicd-nat-delete-modal">
|
||||
<div class="clicd-nat-modal">
|
||||
<div class="clicd-nat-modal-title">确认删除</div>
|
||||
<div class="clicd-nat-modal-body" id="clicd-nat-delete-text">确认删除该端口映射？</div>
|
||||
<div class="clicd-nat-modal-actions">
|
||||
<button class="clicd-nat-btn clicd-nat-btn-secondary" type="button" id="clicd-nat-delete-cancel">取消</button>
|
||||
<button class="clicd-nat-btn clicd-nat-btn-danger" type="button" id="clicd-nat-delete-confirm">删除</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
var panel = document.getElementById('clicd-nat-panel');
|
||||
if (!panel || panel.getAttribute('data-bound') === '1') return;
|
||||
panel.setAttribute('data-bound', '1');
|
||||
|
||||
var message = document.getElementById('clicd-nat-message');
|
||||
var debugBox = document.getElementById('clicd-nat-debug');
|
||||
var list = document.getElementById('clicd-nat-list');
|
||||
var natHost = '{$nat_host}';
|
||||
var deleteModal = document.getElementById('clicd-nat-delete-modal');
|
||||
var deleteText = document.getElementById('clicd-nat-delete-text');
|
||||
var deleteCancel = document.getElementById('clicd-nat-delete-cancel');
|
||||
var deleteConfirm = document.getElementById('clicd-nat-delete-confirm');
|
||||
var pendingDeletePayload = null;
|
||||
|
||||
function showMessage(type, text) {
|
||||
message.className = 'clicd-nat-message' + (type === 'error' ? ' error' : '');
|
||||
message.style.display = 'block';
|
||||
message.textContent = text || '';
|
||||
}
|
||||
|
||||
function showDebug(data) {
|
||||
debugBox.style.display = 'block';
|
||||
debugBox.textContent = JSON.stringify(data || {}, null, 2);
|
||||
}
|
||||
|
||||
function endpoint() {
|
||||
return "{$MODULE_CUSTOM_API}";
|
||||
}
|
||||
|
||||
function field(item, name) {
|
||||
return item.querySelector('[data-field="' + name + '"]');
|
||||
}
|
||||
|
||||
function setBusy(busy) {
|
||||
panel.querySelectorAll('button').forEach(function(btn){ btn.disabled = !!busy; });
|
||||
}
|
||||
|
||||
function renderList(items) {
|
||||
if (!Array.isArray(items) || items.length === 0) {
|
||||
list.innerHTML = '<div class="clicd-nat-form clicd-nat-muted">暂无端口映射</div>';
|
||||
return;
|
||||
}
|
||||
list.innerHTML = items.map(function(item) {
|
||||
var protocol = (item.protocol || 'tcp').toLowerCase();
|
||||
var desc = escapeHtml(item.description || '');
|
||||
var index = escapeHtml(String(item.index));
|
||||
var hostPort = escapeHtml(String(item.host_port || ''));
|
||||
var containerPort = escapeHtml(String(item.container_port || ''));
|
||||
return '<div class="clicd-nat-item" data-index="' + index + '">' +
|
||||
'<div class="clicd-nat-row">' +
|
||||
'<div class="clicd-nat-field"><label>索引</label><div class="clicd-nat-value">' + index + '</div></div>' +
|
||||
'<div class="clicd-nat-field"><label>公网访问</label><div class="clicd-nat-value">' + escapeHtml(natHost) + ':' + hostPort + '</div></div>' +
|
||||
'<div class="clicd-nat-field"><label>公网端口</label><input class="clicd-nat-input" data-field="host_port" type="number" min="1" max="65535" value="' + hostPort + '"></div>' +
|
||||
'<div class="clicd-nat-field"><label>容器端口</label><input class="clicd-nat-input" data-field="container_port" type="number" min="1" max="65535" value="' + containerPort + '"></div>' +
|
||||
'<div class="clicd-nat-field"><label>协议</label><select class="clicd-nat-select" data-field="protocol">' +
|
||||
'<option value="tcp"' + (protocol === 'tcp' ? ' selected' : '') + '>TCP</option>' +
|
||||
'<option value="udp"' + (protocol === 'udp' ? ' selected' : '') + '>UDP</option>' +
|
||||
'</select></div>' +
|
||||
'<div class="clicd-nat-field"><label>说明</label><input class="clicd-nat-input" data-field="description" type="text" value="' + desc + '"></div>' +
|
||||
'<div class="clicd-nat-actions"><button class="clicd-nat-btn clicd-nat-btn-secondary" type="button" data-clicd-action="update">保存</button>' +
|
||||
'<button class="clicd-nat-btn clicd-nat-btn-danger" type="button" data-clicd-action="delete">删除</button></div>' +
|
||||
'</div></div>';
|
||||
}).join('');
|
||||
}
|
||||
|
||||
function escapeHtml(value) {
|
||||
return String(value)
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''');
|
||||
}
|
||||
|
||||
async function request(action, payload, silent) {
|
||||
setBusy(true);
|
||||
try {
|
||||
var funcMap = {
|
||||
'random-port': 'randomPort',
|
||||
'add': 'addNat',
|
||||
'update': 'updateNat',
|
||||
'delete': 'deleteNat',
|
||||
'list': 'natList'
|
||||
};
|
||||
var body = new URLSearchParams();
|
||||
body.set('id', panel.getAttribute('data-service-id') || '');
|
||||
body.set('func', funcMap[action] || action);
|
||||
Object.keys(payload || {}).forEach(function(key){ body.set(key, payload[key]); });
|
||||
var res = await fetch(endpoint(), {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
|
||||
'Authorization': 'JWT {$Think.get.jwt}'
|
||||
},
|
||||
credentials: 'same-origin',
|
||||
body: body.toString()
|
||||
});
|
||||
var text = await res.text();
|
||||
var data;
|
||||
try { data = JSON.parse(text); } catch (e) { data = {status:'error', msg:'\u975e JSON \u54cd\u5e94: ' + text}; }
|
||||
showDebug((data.data && data.data.debug) || data.debug || data);
|
||||
if (data.status === 200 || data.status === 'success') {
|
||||
if (!silent) {
|
||||
showMessage('success', data.msg || '\u64cd\u4f5c\u6210\u529f');
|
||||
}
|
||||
if (data.data && data.data.port) {
|
||||
document.getElementById('clicd-add-host-port').value = data.data.port;
|
||||
}
|
||||
if (data.data && Array.isArray(data.data.port_mappings)) {
|
||||
renderList(data.data.port_mappings);
|
||||
} else if (action !== 'random-port') {
|
||||
request('list', {}, true);
|
||||
}
|
||||
} else {
|
||||
showMessage('error', data.msg || '\u64cd\u4f5c\u5931\u8d25');
|
||||
}
|
||||
} catch (e) {
|
||||
showMessage('error', e.message || '\u8bf7\u6c42\u5931\u8d25');
|
||||
showDebug({error: String(e)});
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
function openDeleteModal(payload) {
|
||||
pendingDeletePayload = payload;
|
||||
if (deleteText) {
|
||||
deleteText.textContent = '\u786e\u8ba4\u5220\u9664\u7aef\u53e3\u6620\u5c04 ' + natHost + ':' + (payload.host_port || '-') + ' -> ' + (payload.container_port || '-') + '/' + (payload.protocol || 'tcp') + ' \u5417\uff1f';
|
||||
}
|
||||
if (deleteModal) {
|
||||
deleteModal.style.display = 'flex';
|
||||
}
|
||||
}
|
||||
|
||||
function closeDeleteModal() {
|
||||
pendingDeletePayload = null;
|
||||
if (deleteModal) {
|
||||
deleteModal.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
panel.addEventListener('click', function(event) {
|
||||
var button = event.target.closest('[data-clicd-action]');
|
||||
if (!button) return;
|
||||
var action = button.getAttribute('data-clicd-action');
|
||||
if (action === 'random-port') {
|
||||
request('random-port', {});
|
||||
return;
|
||||
}
|
||||
if (action === 'add') {
|
||||
request('add', {
|
||||
host_port: document.getElementById('clicd-add-host-port').value,
|
||||
container_port: document.getElementById('clicd-add-container-port').value,
|
||||
protocol: document.getElementById('clicd-add-protocol').value,
|
||||
description: document.getElementById('clicd-add-description').value
|
||||
});
|
||||
return;
|
||||
}
|
||||
var item = button.closest('.clicd-nat-item');
|
||||
if (!item) return;
|
||||
var payload = {
|
||||
index: item.getAttribute('data-index'),
|
||||
host_port: field(item, 'host_port') ? field(item, 'host_port').value : '',
|
||||
container_port: field(item, 'container_port') ? field(item, 'container_port').value : '',
|
||||
protocol: field(item, 'protocol') ? field(item, 'protocol').value : 'tcp',
|
||||
description: field(item, 'description') ? field(item, 'description').value : ''
|
||||
};
|
||||
if (action === 'delete') {
|
||||
openDeleteModal(payload);
|
||||
return;
|
||||
}
|
||||
request(action, payload);
|
||||
});
|
||||
|
||||
if (deleteCancel) {
|
||||
deleteCancel.addEventListener('click', closeDeleteModal);
|
||||
}
|
||||
if (deleteModal) {
|
||||
deleteModal.addEventListener('click', function(event){
|
||||
if (event.target === deleteModal) closeDeleteModal();
|
||||
});
|
||||
}
|
||||
if (deleteConfirm) {
|
||||
deleteConfirm.addEventListener('click', function(){
|
||||
if (!pendingDeletePayload) return;
|
||||
var payload = pendingDeletePayload;
|
||||
closeDeleteModal();
|
||||
request('delete', payload);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
Reference in New Issue
Block a user