Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
 kory
|
5744bf5585 | ||
|
kory
|
9a070b77af | ||
|
kory
|
886cb2af27 | ||
|
kory
|
0381fe3f2f | ||
|
kory
|
c11aadaa68 | ||
|
kory
|
80db7a482a | ||
|
kory
|
d84db86486 |
@@ -2,6 +2,8 @@ name: Release
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
tags:
|
||||
- 'v*'
|
||||
|
||||
@@ -15,6 +17,35 @@ jobs:
|
||||
steps:
|
||||
- name: Checkout code
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
fetch-depth: 0
|
||||
|
||||
- name: Determine Version Tag
|
||||
id: versioning
|
||||
run: |
|
||||
if [[ "${{ github.ref }}" == refs/tags/v* ]]; then
|
||||
TAG="${GITHUB_REF#refs/tags/}"
|
||||
else
|
||||
# 获取最新语义化版本 tag (例如 v1.1.0)
|
||||
LATEST_TAG=$(git tag -l "v*" --sort=-v:refname | head -n1)
|
||||
if [ -z "$LATEST_TAG" ]; then
|
||||
LATEST_TAG="v1.0.0"
|
||||
fi
|
||||
# 去除前缀 v
|
||||
VER_NUM="${LATEST_TAG#v}"
|
||||
# 拆解 MAJOR.MINOR.PATCH
|
||||
IFS='.' read -r MAJOR MINOR PATCH <<< "$VER_NUM"
|
||||
PATCH=$((PATCH + 1))
|
||||
TAG="v${MAJOR}.${MINOR}.${PATCH}"
|
||||
echo "Auto incremented patch version to $TAG"
|
||||
|
||||
# 打上本地 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
|
||||
|
||||
- name: Set up Go
|
||||
uses: actions/setup-go@v5
|
||||
@@ -40,6 +71,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 }}
|
||||
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`）；
|
||||
- 升级异常（校验失败或无法启动）时**自动秒级回滚**，保证节点永不失联。
|
||||
|
||||
---
|
||||
|
||||
## 🛠️ 手动编译部署
|
||||
|
||||
Executable
+80
@@ -0,0 +1,80 @@
|
||||
#!/bin/bash
|
||||
set -e
|
||||
|
||||
# VPS-Commander Agent 一键安全升级脚本
|
||||
# Repo: https://github.com/kyaring/vps-commander
|
||||
|
||||
REPO="kyaring/vps-commander"
|
||||
INSTALL_DIR="/opt/vps-commander"
|
||||
GITHUB_URL="https://github.com"
|
||||
|
||||
# 颜色输出
|
||||
RED='\033[0;31m'
|
||||
GREEN='\033[0;32m'
|
||||
YELLOW='\033[1;33m'
|
||||
BLUE='\033[0;34m'
|
||||
NC='\033[0m'
|
||||
|
||||
info() { echo -e "${BLUE}[INFO]${NC} $*"; }
|
||||
success() { echo -e "${GREEN}[SUCCESS]${NC} $*"; }
|
||||
warn() { echo -e "${YELLOW}[WARN]${NC} $*"; }
|
||||
error() { echo -e "${RED}[ERROR]${NC} $*"; exit 1; }
|
||||
|
||||
# 检查 root 权限
|
||||
[[ $EUID -ne 0 ]] && error "必须使用 root 权限运行此脚本"
|
||||
|
||||
# 检查是否安装过 agent
|
||||
if [ ! -f "${INSTALL_DIR}/vps-commander-agent" ]; then
|
||||
error "未检测到已安装的 Agent (${INSTALL_DIR}/vps-commander-agent)，请先使用 install.sh 完整安装。"
|
||||
fi
|
||||
|
||||
# 架构检测
|
||||
ARCH=$(uname -m)
|
||||
case "$ARCH" in
|
||||
x86_64|amd64) TARGET_ARCH="amd64" ;;
|
||||
aarch64|arm64) TARGET_ARCH="arm64" ;;
|
||||
*) error "暂不支持的系统架构: $ARCH" ;;
|
||||
esac
|
||||
|
||||
info "正在获取最新 Release 版本信息..."
|
||||
LATEST_TAG=$(curl -fsSL -k "https://api.github.com/repos/${REPO}/releases/latest" | grep '"tag_name":' | head -n1 | sed -E 's/.*"([^"]+)".*/\1/')
|
||||
if [ -z "$LATEST_TAG" ]; then
|
||||
warn "无法通过 GitHub API 自动获取 Tag，回退至 v1.1.0"
|
||||
LATEST_TAG="v1.1.0"
|
||||
fi
|
||||
info "目标升级版本: ${LATEST_TAG} (${TARGET_ARCH})"
|
||||
|
||||
BIN_NAME="vps-commander-agent-linux-${TARGET_ARCH}"
|
||||
DOWNLOAD_URL="${GITHUB_URL}/${REPO}/releases/download/${LATEST_TAG}/${BIN_NAME}"
|
||||
TMP_BIN="${INSTALL_DIR}/vps-commander-agent.tmp"
|
||||
BAK_BIN="${INSTALL_DIR}/vps-commander-agent.bak"
|
||||
|
||||
info "正在下载新版本二进制文件..."
|
||||
curl -fsSL -k -o "${TMP_BIN}" "${DOWNLOAD_URL}" || error "下载失败，请检查网络或 Release 是否存在"
|
||||
|
||||
# 完整性校验：文件大小不能小于 1MB
|
||||
FILE_SIZE=$(stat -c%s "${TMP_BIN}" 2>/dev/null || stat -f%z "${TMP_BIN}" 2>/dev/null || echo 0)
|
||||
if [ "$FILE_SIZE" -lt 1000000 ]; then
|
||||
rm -f "${TMP_BIN}"
|
||||
error "下载的文件不完整或损坏 (大小: ${FILE_SIZE} 字节)，已终止升级"
|
||||
fi
|
||||
|
||||
chmod +x "${TMP_BIN}"
|
||||
|
||||
info "备份旧版本并原子替换..."
|
||||
cp -f "${INSTALL_DIR}/vps-commander-agent" "${BAK_BIN}" 2>/dev/null || true
|
||||
mv -f "${TMP_BIN}" "${INSTALL_DIR}/vps-commander-agent"
|
||||
|
||||
info "重启 vps-commander-agent 服务..."
|
||||
systemctl restart vps-commander-agent
|
||||
sleep 2
|
||||
|
||||
if systemctl is-active --quiet vps-commander-agent; then
|
||||
success "Agent 成功平滑升级至 ${LATEST_TAG} 并已恢复运行！"
|
||||
rm -f "${BAK_BIN}"
|
||||
else
|
||||
warn "服务启动异常，正在自动回滚原版本..."
|
||||
mv -f "${BAK_BIN}" "${INSTALL_DIR}/vps-commander-agent"
|
||||
systemctl restart vps-commander-agent
|
||||
error "升级失败，已安全回滚至上一版本，请查看日志: journalctl -u vps-commander-agent -n 20"
|
||||
fi
|
||||
+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