Compare commits
10
Commits
d84db86486
...
c3114492bb
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
c3114492bb | ||
|
|
ff04cb0c1a | ||
|
|
16ece31d57 | ||
|
|
8d8b201498 | ||
|
|
5744bf5585 | ||
|
|
9a070b77af | ||
|
|
886cb2af27 | ||
|
|
0381fe3f2f | ||
|
|
c11aadaa68 | ||
|
|
80db7a482a |
@@ -2,6 +2,8 @@ name: Release
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
tags:
|
||||
- 'v*'
|
||||
|
||||
@@ -15,6 +17,53 @@ jobs:
|
||||
steps:
|
||||
- name: Checkout code
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
fetch-depth: 0
|
||||
|
||||
- name: Determine Version Tag & Generate Notes
|
||||
id: versioning
|
||||
run: |
|
||||
PREV_TAG=$(git tag -l "v*" --sort=-v:refname | head -n1)
|
||||
echo "Previous tag: $PREV_TAG"
|
||||
|
||||
if [[ "${{ github.ref }}" == refs/tags/v* ]]; then
|
||||
TAG="${GITHUB_REF#refs/tags/}"
|
||||
else
|
||||
if [ -z "$PREV_TAG" ]; then
|
||||
TAG="v1.0.0"
|
||||
else
|
||||
VER_NUM="${PREV_TAG#v}"
|
||||
IFS='.' read -r MAJOR MINOR PATCH <<< "$VER_NUM"
|
||||
PATCH=$((PATCH + 1))
|
||||
TAG="v${MAJOR}.${MINOR}.${PATCH}"
|
||||
fi
|
||||
echo "Auto incremented patch version to $TAG"
|
||||
|
||||
git config user.name "github-actions[bot]"
|
||||
git config user.email "github-actions[bot]@users.noreply.github.com"
|
||||
git tag "$TAG"
|
||||
git push origin "$TAG"
|
||||
fi
|
||||
echo "tag=$TAG" >> $GITHUB_OUTPUT
|
||||
|
||||
# 生成详细的 Release Changelog 正文
|
||||
cat << NOTES > release_notes.md
|
||||
### 🚀 What's Changed in ${TAG}
|
||||
|
||||
NOTES
|
||||
|
||||
if [ -n "$PREV_TAG" ]; then
|
||||
git log "${PREV_TAG}..HEAD" --pretty=format:"- %s (%h by @kyaring)" >> release_notes.md
|
||||
else
|
||||
git log -n 10 --pretty=format:"- %s (%h by @kyaring)" >> release_notes.md
|
||||
fi
|
||||
|
||||
echo "" >> release_notes.md
|
||||
echo "" >> release_notes.md
|
||||
if [ -n "$PREV_TAG" ]; then
|
||||
echo "**Full Changelog**: https://github.com/${{ github.repository }}/compare/${PREV_TAG}...${TAG}" >> release_notes.md
|
||||
fi
|
||||
cat release_notes.md
|
||||
|
||||
- name: Set up Go
|
||||
uses: actions/setup-go@v5
|
||||
@@ -40,6 +89,8 @@ jobs:
|
||||
- name: Create GitHub Release
|
||||
uses: softprops/action-gh-release@v2
|
||||
with:
|
||||
tag_name: ${{ steps.versioning.outputs.tag }}
|
||||
name: Release ${{ steps.versioning.outputs.tag }}
|
||||
body_path: release_notes.md
|
||||
files: |
|
||||
dist/*
|
||||
generate_release_notes: true
|
||||
|
||||
@@ -73,17 +73,27 @@
|
||||
|
||||
---
|
||||
|
||||
## 🚀 极速一键部署 (推荐)
|
||||
## 🚀 极速一键部署与平滑升级
|
||||
|
||||
### 1. 一键全自动安装 (推荐)
|
||||
无论是在受控端 VPS 还是中心端,只需一行命令即可交互式安装与启动:
|
||||
|
||||
```bash
|
||||
bash <(curl -sSL https://raw.githubusercontent.com/kyaring/vps-commander/main/deploy/install.sh)
|
||||
```
|
||||
|
||||
- **安装 Agent (受控 VPS)**:输入 Hub 的 WSS 地址与通信密钥,全自动配置开机自启并秒级连入集群。
|
||||
- **安装 Hub (中心服务端)**:自动生成安全 API Key / Web 面板密码并以 Systemd 托管常驻。
|
||||
|
||||
### 2. 受控端 Agent 一键平滑升级 (免重输配置)
|
||||
当新版本发布后,无需重新配置通信密钥或重新安装,在任意受控机上直接运行升级脚本:
|
||||
|
||||
```bash
|
||||
curl -fsSL https://raw.githubusercontent.com/kyaring/vps-commander/main/deploy/upgrade-agent.sh | bash
|
||||
```
|
||||
- 自动检测并拉取 GitHub 最新版本架构包(AMD64 / ARM64);
|
||||
- 自动备份旧版本二进制(`.bak`);
|
||||
- 升级异常(校验失败或无法启动)时**自动秒级回滚**,保证节点永不失联。
|
||||
|
||||
---
|
||||
|
||||
## 🛠️ 手动编译部署
|
||||
@@ -140,20 +150,51 @@ Agent 启动后会通过 WSS 自动连入 Hub,在 Hub 管理面板与 `/api/v1
|
||||
|
||||
---
|
||||
|
||||
## 🤖 接入 ChatGPT / AI 客户端
|
||||
## 🤖 接入 ChatGPT (新版插件 Apps & MCP 模式)
|
||||
|
||||
### 方式 1:ChatGPT Actions (推荐)
|
||||
1. 在 ChatGPT 创建自定义 GPT(GPT Builder)-> **Actions** -> **Create new action**。
|
||||
2. **Schema 导入**:在 `Import from URL` 填入 `https://your-domain.com/openapi.json`。
|
||||
3. **Authentication (身份验证)**:
|
||||
- Authentication Type 选择 **API Key**。
|
||||
- Auth Type 选择 **Bearer**。
|
||||
- 填入你配置的 `VPS_COMMANDER_API_KEY`。
|
||||
当前 ChatGPT 已升级为以 **插件 / 应用 (Apps & MCP)** 规范连接外部服务。VPS-Commander 原生内置完整的 **MCP SSE + OAuth2** 协议支持,无需部署额外适配层。
|
||||
|
||||
### 方式 2:MCP (Model Context Protocol)
|
||||
- **SSE 端点**:`https://your-domain.com/mcp/sse`
|
||||
- **消息交互**:`https://your-domain.com/mcp/message`
|
||||
- **认证**:支持 URL 参数 `?token=...` 或标准 Header `Authorization: Bearer <TOKEN>`。
|
||||
### 接入配置步骤:
|
||||
|
||||
1. **进入 ChatGPT 插件/应用配置页**:
|
||||
- 打开 ChatGPT -> **Settings (设置)** -> **Apps & Integrations (应用与集成) / Plugins** -> **Create / Add App (添加应用)**。
|
||||
2. **连接方式选择 MCP**:
|
||||
- 连接协议选择 **MCP (Model Context Protocol)** 或 **Server-Sent Events (SSE)**。
|
||||
- **MCP Server URL**:填入 Hub 的 SSE 统一入口:
|
||||
```text
|
||||
https://your-domain.com/mcp/sse
|
||||
```
|
||||
3. **身份认证 (Authentication)**:
|
||||
- **方式 A (OAuth 2.0 自动授权,推荐)**:
|
||||
- Hub 内置了标准 RFC 8414 OAuth Metadata (`/.well-known/oauth-authorization-server`);
|
||||
- 授权端点与 Token 端点由 ChatGPT 自动识别,一键点击「Authorize」即可完成免密安全绑定。
|
||||
- **方式 B (Bearer API Key)**:
|
||||
- 若选择 API Key,填入 Hub 环境变量 `VPS_COMMANDER_API_KEY` 即可。
|
||||
4. **自动发现 4 大运维工具**:
|
||||
- 握手成功后,ChatGPT 会自动加载并列出 4 个原生运维工具:
|
||||
- `list_devices`:列出受控节点、CPU/内存/磁盘剩余绝对值及 Docker 状态;
|
||||
- `exec_command`:在目标机器(如 `m4-live-agent`)执行 Shell 指令;
|
||||
- `read_file`:分页读取目标文件;
|
||||
- `write_file`:远程编辑或创建文件。
|
||||
|
||||
---
|
||||
|
||||
### 传统客户端支持 (Claude Desktop / Cursor / VS Code)
|
||||
|
||||
支持通过本地 stdio 二进制连接 Hub:
|
||||
```json
|
||||
{
|
||||
"mcpServers": {
|
||||
"vps-commander": {
|
||||
"command": "/path/to/vps-commander-mcp-stdio-linux-amd64",
|
||||
"args": [
|
||||
"-hub", "https://your-domain.com",
|
||||
"-key", "YOUR_API_KEY"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
|
||||
+39
-30
@@ -12,13 +12,14 @@ import (
|
||||
)
|
||||
|
||||
type Profile struct {
|
||||
Role string `json:"role"`
|
||||
Role string `json:"role,omitempty"`
|
||||
CPUCores int `json:"cpu_cores"`
|
||||
CPUUsagePercent int `json:"cpu_usage_percent"`
|
||||
Load1M float64 `json:"load_1m"`
|
||||
MemPercent int `json:"mem_percent"`
|
||||
MemAvailable string `json:"mem_available"`
|
||||
SwapPercent int `json:"swap_percent"`
|
||||
DiskPercent int `json:"disk_percent"`
|
||||
DiskFree string `json:"disk_free"`
|
||||
IOPSI float64 `json:"io_psi"`
|
||||
Docker bool `json:"docker"`
|
||||
UpdatedAt int64 `json:"updated_at"`
|
||||
@@ -35,8 +36,9 @@ func Collect(defaultRole string) Profile {
|
||||
|
||||
cores := runtime.NumCPU()
|
||||
cpuPercent := getCPUUsage()
|
||||
memPct, memAvl, swapPct := getMemAndSwap()
|
||||
diskPct := getDiskPercent()
|
||||
load1m := getLoad1M()
|
||||
memPct, memAvl := getMemInfo()
|
||||
diskPct, diskFree := getDiskInfo()
|
||||
psi := getIOPSI()
|
||||
docker := hasDocker()
|
||||
|
||||
@@ -44,23 +46,34 @@ func Collect(defaultRole string) Profile {
|
||||
Role: role,
|
||||
CPUCores: cores,
|
||||
CPUUsagePercent: cpuPercent,
|
||||
Load1M: load1m,
|
||||
MemPercent: memPct,
|
||||
MemAvailable: memAvl,
|
||||
SwapPercent: swapPct,
|
||||
DiskPercent: diskPct,
|
||||
DiskFree: diskFree,
|
||||
IOPSI: psi,
|
||||
Docker: docker,
|
||||
UpdatedAt: time.Now().Unix(),
|
||||
}
|
||||
}
|
||||
|
||||
func getLoad1M() float64 {
|
||||
if data, err := os.ReadFile("/proc/loadavg"); err == nil {
|
||||
fields := strings.Fields(string(data))
|
||||
if len(fields) > 0 {
|
||||
if val, err := strconv.ParseFloat(fields[0], 64); err == nil {
|
||||
return val
|
||||
}
|
||||
}
|
||||
}
|
||||
return 0.0
|
||||
}
|
||||
|
||||
func getCPUUsage() int {
|
||||
// 尝试从 /proc/stat 快速采样或 /proc/loadavg
|
||||
pct := sampleCPUStat()
|
||||
if pct >= 0 {
|
||||
return pct
|
||||
}
|
||||
// 回退到 loadavg / cores * 100
|
||||
if data, err := os.ReadFile("/proc/loadavg"); err == nil {
|
||||
fields := strings.Fields(string(data))
|
||||
if len(fields) > 0 {
|
||||
@@ -127,14 +140,14 @@ func sampleCPUStat() int {
|
||||
return int(busy)
|
||||
}
|
||||
|
||||
func getMemAndSwap() (memPct int, memAvl string, swapPct int) {
|
||||
func getMemInfo() (memPct int, memAvl string) {
|
||||
f, err := os.Open("/proc/meminfo")
|
||||
if err != nil {
|
||||
return 0, "N/A", 0
|
||||
return 0, "N/A"
|
||||
}
|
||||
defer f.Close()
|
||||
|
||||
var total, free, avail, buffers, cached, swapTotal, swapFree uint64
|
||||
var total, free, avail, buffers, cached uint64
|
||||
scanner := bufio.NewScanner(f)
|
||||
for scanner.Scan() {
|
||||
line := scanner.Text()
|
||||
@@ -159,10 +172,6 @@ func getMemAndSwap() (memPct int, memAvl string, swapPct int) {
|
||||
buffers = v
|
||||
case "Cached":
|
||||
cached = v
|
||||
case "SwapTotal":
|
||||
swapTotal = v
|
||||
case "SwapFree":
|
||||
swapFree = v
|
||||
}
|
||||
}
|
||||
|
||||
@@ -182,34 +191,35 @@ func getMemAndSwap() (memPct int, memAvl string, swapPct int) {
|
||||
memAvl = "N/A"
|
||||
}
|
||||
|
||||
if swapTotal > 0 {
|
||||
swapUsed := swapTotal - swapFree
|
||||
swapPct = int(float64(swapUsed) / float64(swapTotal) * 100)
|
||||
}
|
||||
|
||||
return memPct, memAvl, swapPct
|
||||
return memPct, memAvl
|
||||
}
|
||||
|
||||
func getDiskPercent() int {
|
||||
func getDiskInfo() (diskPct int, diskFree string) {
|
||||
var stat syscall.Statfs_t
|
||||
if err := syscall.Statfs("/", &stat); err != nil {
|
||||
return 0
|
||||
return 0, "N/A"
|
||||
}
|
||||
total := stat.Blocks * uint64(stat.Bsize)
|
||||
free := stat.Bfree * uint64(stat.Bsize)
|
||||
free := stat.Bavail * uint64(stat.Bsize)
|
||||
if total == 0 {
|
||||
return 0
|
||||
return 0, "N/A"
|
||||
}
|
||||
used := total - free
|
||||
pct := int(float64(used) / float64(total) * 100)
|
||||
if pct > 100 {
|
||||
pct = 100
|
||||
diskPct = int(float64(used) / float64(total) * 100)
|
||||
if diskPct > 100 {
|
||||
diskPct = 100
|
||||
}
|
||||
return pct
|
||||
|
||||
if free >= 1024*1024*1024 {
|
||||
diskFree = fmt.Sprintf("%.1fG", float64(free)/(1024*1024*1024))
|
||||
} else {
|
||||
diskFree = fmt.Sprintf("%dM", free/(1024*1024))
|
||||
}
|
||||
|
||||
return diskPct, diskFree
|
||||
}
|
||||
|
||||
func getIOPSI() float64 {
|
||||
// 读取 /proc/pressure/io
|
||||
data, err := os.ReadFile("/proc/pressure/io")
|
||||
if err == nil {
|
||||
lines := strings.Split(string(data), "\n")
|
||||
@@ -227,7 +237,6 @@ func getIOPSI() float64 {
|
||||
}
|
||||
}
|
||||
}
|
||||
// 回退:/proc/loadavg 的 1min load
|
||||
if data, err := os.ReadFile("/proc/loadavg"); err == nil {
|
||||
fields := strings.Fields(string(data))
|
||||
if len(fields) > 0 {
|
||||
|
||||
+18
-19
@@ -17,25 +17,24 @@ header strong{font-size:18px}header span{margin-left:12px;color:var(--text-muted
|
||||
:root[data-theme="dark"] .svg-sun{display:block;color:#facc15}
|
||||
:root[data-theme="light"] .svg-moon{display:block;color:#475569}
|
||||
|
||||
/* 设备卡片与画像升级 */
|
||||
.device-card{min-width:0;padding:16px;border:1px solid var(--border);border-radius:12px;background:var(--bg-sub);display:flex;flex-direction:column;gap:10px}
|
||||
.device-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
|
||||
.device-title{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
|
||||
.device-name{font-size:15px;color:var(--text-main);overflow-wrap:anywhere;word-break:break-all}
|
||||
.role-badge{font-size:11px;padding:2px 6px;border-radius:5px;font-weight:600;letter-spacing:.5px;border:1px solid var(--border-strong)}
|
||||
.role-control{background:rgba(59,130,246,.15);color:#60a5fa;border-color:rgba(59,130,246,.3)}
|
||||
.role-application{background:rgba(16,185,129,.15);color:#34d399;border-color:rgba(16,185,129,.3)}
|
||||
.role-database{background:rgba(245,158,11,.15);color:#fbbf24;border-color:rgba(245,158,11,.3)}
|
||||
.btn-revoke{padding:3px 8px;font-size:12px;border-radius:6px;background:transparent;border:1px solid var(--border-strong);color:var(--dot-offline);cursor:pointer}
|
||||
/* 设备卡片与画像升级 (方案 1: 经典主副标题分行) */
|
||||
.devices{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
|
||||
.device-card{min-width:0;padding:16px;border:1px solid var(--border);border-radius:12px;background:var(--bg-sub);display:flex;flex-direction:column;gap:12px}
|
||||
|
||||
.v1-head{display:flex;flex-direction:column;gap:4px;min-width:0}
|
||||
.v1-row1{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
|
||||
.v1-title{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
|
||||
.v1-name{font-size:16px;font-weight:700;color:var(--text-main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
|
||||
.v1-row2{font-size:12px;color:var(--text-muted);padding-left:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||||
|
||||
.btn-revoke{padding:2px 8px;font-size:11px;border-radius:5px;background:transparent;border:1px solid var(--border-strong);color:var(--dot-offline);cursor:pointer;flex-shrink:0}
|
||||
.btn-revoke:hover{background:rgba(239,68,68,.15);border-color:var(--dot-offline)}
|
||||
.device-meta{font-size:12px;color:var(--text-muted);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
|
||||
|
||||
/* 资源画像 2列紧凑栅格 */
|
||||
.profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:10px;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;font-size:12px}
|
||||
.p-item{display:flex;justify-content:space-between;align-items:center;gap:6px}
|
||||
.p-label{color:var(--text-muted)}
|
||||
.p-val{font-family:ui-monospace,monospace;font-weight:600;color:var(--text-main)}
|
||||
.p-docker{grid-column:1/-1;display:flex;justify-content:flex-end}
|
||||
.badge-docker{font-size:11px;padding:2px 8px;border-radius:4px;font-weight:600}
|
||||
.badge-docker.yes{background:rgba(34,197,94,.15);color:var(--dot-online);border:1px solid rgba(34,197,94,.3)}
|
||||
.badge-docker.no{background:rgba(148,163,184,.15);color:var(--text-muted);border:1px solid var(--border)}
|
||||
.profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;padding:10px 12px;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;font-size:12px}
|
||||
.p-item{display:flex;justify-content:space-between;align-items:center;gap:6px;min-height:20px}
|
||||
.p-label{color:var(--text-muted);font-weight:500;font-size:11px}
|
||||
.p-val{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-weight:600;font-size:12px;color:var(--text-main);white-space:nowrap}
|
||||
.badge-docker-text{padding:1px 6px;border-radius:4px;font-size:11px;font-weight:700}
|
||||
.badge-docker-text.yes{background:rgba(34,197,94,.15);color:var(--dot-online);border:1px solid rgba(34,197,94,.3)}
|
||||
.badge-docker-text.no{background:rgba(148,163,184,.15);color:var(--text-muted);border:1px solid var(--border)}
|
||||
+20
-19
@@ -32,40 +32,41 @@ async function removeDevice(name){
|
||||
}
|
||||
|
||||
async function loadDevices(){
|
||||
let ds=await api("/devices");
|
||||
let all=await api("/devices");
|
||||
let ds=all.filter(d=>!d.is_local);
|
||||
$("#devices").innerHTML=ds.map(d=>{
|
||||
const p = d.profile || {};
|
||||
const role = p.role || (d.is_local ? "CONTROL" : "APPLICATION");
|
||||
const role = p.role || "APPLICATION";
|
||||
const isOnline = d.status === "online";
|
||||
const statusText = isOnline ? "在线" : "离线";
|
||||
const archOs = (d.arch || d.os) ? `${esc(d.arch||"")}/${esc(d.os||"")} · ` : "";
|
||||
const cpuStr = p.cpu_cores ? `${p.cpu_cores}C · ${p.cpu_usage_percent ?? 0}%` : '-';
|
||||
const memStr = p.mem_percent !== undefined ? `${p.mem_percent}%` + (p.mem_available ? ` (${p.mem_available})` : '') : '-';
|
||||
const swapStr = p.swap_percent !== undefined ? `${p.swap_percent}%` : '-';
|
||||
const diskStr = p.disk_percent !== undefined ? `${p.disk_percent}%` : '-';
|
||||
const loadStr = p.load_1m !== undefined ? p.load_1m.toFixed(2) : '-';
|
||||
const memStr = p.mem_available ? `${p.mem_available} (${p.mem_percent}%)` : (p.mem_percent !== undefined ? `${p.mem_percent}%` : '-');
|
||||
const diskStr = p.disk_free ? `${p.disk_free} (${p.disk_percent}%)` : (p.disk_percent !== undefined ? `${p.disk_percent}%` : '-');
|
||||
const psiStr = p.io_psi !== undefined ? p.io_psi.toFixed(2) : '-';
|
||||
const dockerBadge = p.docker ? '<span class="badge-docker yes">Docker YES</span>' : '<span class="badge-docker no">Docker NO</span>';
|
||||
const dockerVal = p.docker ? 'YES' : 'NO';
|
||||
const dockerClass = p.docker ? 'yes' : 'no';
|
||||
|
||||
return `
|
||||
<div class="device-card ${isOnline ? "online" : "offline"}">
|
||||
<div class="device-head">
|
||||
<div class="device-title">
|
||||
<div class="v1-head">
|
||||
<div class="v1-row1">
|
||||
<div class="v1-title">
|
||||
<span class="dot"></span>
|
||||
<strong class="device-name">${esc(d.name)}</strong>
|
||||
<span class="role-badge role-${role.toLowerCase()}">${esc(role)}</span>
|
||||
<strong class="v1-name" title="${esc(d.name)}">${esc(d.name)}</strong>
|
||||
</div>
|
||||
${d.is_local ? '' : `<button class="btn-revoke" onclick="removeDevice('${esc(d.name)}')">注销</button>`}
|
||||
<button class="btn-revoke" onclick="removeDevice('${esc(d.name)}')">注销</button>
|
||||
</div>
|
||||
<div class="device-meta">
|
||||
<span>${esc(d.status)}</span> ·
|
||||
<span>${d.is_local ? "local" : "remote"}</span> ·
|
||||
<span>${esc(d.arch||"")}/${esc(d.os||"")}</span>
|
||||
<div class="v1-row2">${archOs}${statusText}</div>
|
||||
</div>
|
||||
<div class="profile-grid">
|
||||
<div class="p-item"><span class="p-label">CPU</span><span class="p-val">${cpuStr}</span></div>
|
||||
<div class="p-item"><span class="p-label">Mem</span><span class="p-val">${memStr}</span></div>
|
||||
<div class="p-item"><span class="p-label">Swap</span><span class="p-val">${swapStr}</span></div>
|
||||
<div class="p-item"><span class="p-label">Disk</span><span class="p-val">${diskStr}</span></div>
|
||||
<div class="p-item"><span class="p-label">LOAD</span><span class="p-val">${loadStr}</span></div>
|
||||
<div class="p-item"><span class="p-label">MEM</span><span class="p-val">${memStr}</span></div>
|
||||
<div class="p-item"><span class="p-label">DISK</span><span class="p-val">${diskStr}</span></div>
|
||||
<div class="p-item"><span class="p-label">IO PSI</span><span class="p-val">${psiStr}</span></div>
|
||||
<div class="p-item p-docker">${dockerBadge}</div>
|
||||
<div class="p-item"><span class="p-label">DOCKER</span><span class="p-val badge-docker-text ${dockerClass}">${dockerVal}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
+18
-19
@@ -17,25 +17,24 @@ header strong{font-size:18px}header span{margin-left:12px;color:var(--text-muted
|
||||
:root[data-theme="dark"] .svg-sun{display:block;color:#facc15}
|
||||
:root[data-theme="light"] .svg-moon{display:block;color:#475569}
|
||||
|
||||
/* 设备卡片与画像升级 */
|
||||
.device-card{min-width:0;padding:16px;border:1px solid var(--border);border-radius:12px;background:var(--bg-sub);display:flex;flex-direction:column;gap:10px}
|
||||
.device-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
|
||||
.device-title{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
|
||||
.device-name{font-size:15px;color:var(--text-main);overflow-wrap:anywhere;word-break:break-all}
|
||||
.role-badge{font-size:11px;padding:2px 6px;border-radius:5px;font-weight:600;letter-spacing:.5px;border:1px solid var(--border-strong)}
|
||||
.role-control{background:rgba(59,130,246,.15);color:#60a5fa;border-color:rgba(59,130,246,.3)}
|
||||
.role-application{background:rgba(16,185,129,.15);color:#34d399;border-color:rgba(16,185,129,.3)}
|
||||
.role-database{background:rgba(245,158,11,.15);color:#fbbf24;border-color:rgba(245,158,11,.3)}
|
||||
.btn-revoke{padding:3px 8px;font-size:12px;border-radius:6px;background:transparent;border:1px solid var(--border-strong);color:var(--dot-offline);cursor:pointer}
|
||||
/* 设备卡片与画像升级 (方案 1: 经典主副标题分行) */
|
||||
.devices{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
|
||||
.device-card{min-width:0;padding:16px;border:1px solid var(--border);border-radius:12px;background:var(--bg-sub);display:flex;flex-direction:column;gap:12px}
|
||||
|
||||
.v1-head{display:flex;flex-direction:column;gap:4px;min-width:0}
|
||||
.v1-row1{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
|
||||
.v1-title{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
|
||||
.v1-name{font-size:16px;font-weight:700;color:var(--text-main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
|
||||
.v1-row2{font-size:12px;color:var(--text-muted);padding-left:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||||
|
||||
.btn-revoke{padding:2px 8px;font-size:11px;border-radius:5px;background:transparent;border:1px solid var(--border-strong);color:var(--dot-offline);cursor:pointer;flex-shrink:0}
|
||||
.btn-revoke:hover{background:rgba(239,68,68,.15);border-color:var(--dot-offline)}
|
||||
.device-meta{font-size:12px;color:var(--text-muted);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
|
||||
|
||||
/* 资源画像 2列紧凑栅格 */
|
||||
.profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:10px;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;font-size:12px}
|
||||
.p-item{display:flex;justify-content:space-between;align-items:center;gap:6px}
|
||||
.p-label{color:var(--text-muted)}
|
||||
.p-val{font-family:ui-monospace,monospace;font-weight:600;color:var(--text-main)}
|
||||
.p-docker{grid-column:1/-1;display:flex;justify-content:flex-end}
|
||||
.badge-docker{font-size:11px;padding:2px 8px;border-radius:4px;font-weight:600}
|
||||
.badge-docker.yes{background:rgba(34,197,94,.15);color:var(--dot-online);border:1px solid rgba(34,197,94,.3)}
|
||||
.badge-docker.no{background:rgba(148,163,184,.15);color:var(--text-muted);border:1px solid var(--border)}
|
||||
.profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;padding:10px 12px;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;font-size:12px}
|
||||
.p-item{display:flex;justify-content:space-between;align-items:center;gap:6px;min-height:20px}
|
||||
.p-label{color:var(--text-muted);font-weight:500;font-size:11px}
|
||||
.p-val{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-weight:600;font-size:12px;color:var(--text-main);white-space:nowrap}
|
||||
.badge-docker-text{padding:1px 6px;border-radius:4px;font-size:11px;font-weight:700}
|
||||
.badge-docker-text.yes{background:rgba(34,197,94,.15);color:var(--dot-online);border:1px solid rgba(34,197,94,.3)}
|
||||
.badge-docker-text.no{background:rgba(148,163,184,.15);color:var(--text-muted);border:1px solid var(--border)}
|
||||
+20
-19
@@ -32,40 +32,41 @@ async function removeDevice(name){
|
||||
}
|
||||
|
||||
async function loadDevices(){
|
||||
let ds=await api("/devices");
|
||||
let all=await api("/devices");
|
||||
let ds=all.filter(d=>!d.is_local);
|
||||
$("#devices").innerHTML=ds.map(d=>{
|
||||
const p = d.profile || {};
|
||||
const role = p.role || (d.is_local ? "CONTROL" : "APPLICATION");
|
||||
const role = p.role || "APPLICATION";
|
||||
const isOnline = d.status === "online";
|
||||
const statusText = isOnline ? "在线" : "离线";
|
||||
const archOs = (d.arch || d.os) ? `${esc(d.arch||"")}/${esc(d.os||"")} · ` : "";
|
||||
const cpuStr = p.cpu_cores ? `${p.cpu_cores}C · ${p.cpu_usage_percent ?? 0}%` : '-';
|
||||
const memStr = p.mem_percent !== undefined ? `${p.mem_percent}%` + (p.mem_available ? ` (${p.mem_available})` : '') : '-';
|
||||
const swapStr = p.swap_percent !== undefined ? `${p.swap_percent}%` : '-';
|
||||
const diskStr = p.disk_percent !== undefined ? `${p.disk_percent}%` : '-';
|
||||
const loadStr = p.load_1m !== undefined ? p.load_1m.toFixed(2) : '-';
|
||||
const memStr = p.mem_available ? `${p.mem_available} (${p.mem_percent}%)` : (p.mem_percent !== undefined ? `${p.mem_percent}%` : '-');
|
||||
const diskStr = p.disk_free ? `${p.disk_free} (${p.disk_percent}%)` : (p.disk_percent !== undefined ? `${p.disk_percent}%` : '-');
|
||||
const psiStr = p.io_psi !== undefined ? p.io_psi.toFixed(2) : '-';
|
||||
const dockerBadge = p.docker ? '<span class="badge-docker yes">Docker YES</span>' : '<span class="badge-docker no">Docker NO</span>';
|
||||
const dockerVal = p.docker ? 'YES' : 'NO';
|
||||
const dockerClass = p.docker ? 'yes' : 'no';
|
||||
|
||||
return `
|
||||
<div class="device-card ${isOnline ? "online" : "offline"}">
|
||||
<div class="device-head">
|
||||
<div class="device-title">
|
||||
<div class="v1-head">
|
||||
<div class="v1-row1">
|
||||
<div class="v1-title">
|
||||
<span class="dot"></span>
|
||||
<strong class="device-name">${esc(d.name)}</strong>
|
||||
<span class="role-badge role-${role.toLowerCase()}">${esc(role)}</span>
|
||||
<strong class="v1-name" title="${esc(d.name)}">${esc(d.name)}</strong>
|
||||
</div>
|
||||
${d.is_local ? '' : `<button class="btn-revoke" onclick="removeDevice('${esc(d.name)}')">注销</button>`}
|
||||
<button class="btn-revoke" onclick="removeDevice('${esc(d.name)}')">注销</button>
|
||||
</div>
|
||||
<div class="device-meta">
|
||||
<span>${esc(d.status)}</span> ·
|
||||
<span>${d.is_local ? "local" : "remote"}</span> ·
|
||||
<span>${esc(d.arch||"")}/${esc(d.os||"")}</span>
|
||||
<div class="v1-row2">${archOs}${statusText}</div>
|
||||
</div>
|
||||
<div class="profile-grid">
|
||||
<div class="p-item"><span class="p-label">CPU</span><span class="p-val">${cpuStr}</span></div>
|
||||
<div class="p-item"><span class="p-label">Mem</span><span class="p-val">${memStr}</span></div>
|
||||
<div class="p-item"><span class="p-label">Swap</span><span class="p-val">${swapStr}</span></div>
|
||||
<div class="p-item"><span class="p-label">Disk</span><span class="p-val">${diskStr}</span></div>
|
||||
<div class="p-item"><span class="p-label">LOAD</span><span class="p-val">${loadStr}</span></div>
|
||||
<div class="p-item"><span class="p-label">MEM</span><span class="p-val">${memStr}</span></div>
|
||||
<div class="p-item"><span class="p-label">DISK</span><span class="p-val">${diskStr}</span></div>
|
||||
<div class="p-item"><span class="p-label">IO PSI</span><span class="p-val">${psiStr}</span></div>
|
||||
<div class="p-item p-docker">${dockerBadge}</div>
|
||||
<div class="p-item"><span class="p-label">DOCKER</span><span class="p-val badge-docker-text ${dockerClass}">${dockerVal}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
Reference in New Issue
Block a user