fix(web): declare statusText and archOs before card template interpolation

.github/workflows/release.yml

@@ -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

README.md

@@ -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`）；
+- 升级异常（校验失败或无法启动）时**自动秒级回滚**，保证节点永不失联。
+
 ---
 
 ## 🛠️ 手动编译部署

internal/sysinfo/sysinfo.go

@@ -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()
+	load1m := getLoad1M()
-	diskPct := getDiskPercent()
+	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 {
+	return memPct, memAvl
-		swapUsed := swapTotal - swapFree
-		swapPct = int(float64(swapUsed) / float64(swapTotal) * 100)
-	}
-
-	return memPct, memAvl, swapPct
 }
 
-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)
+	diskPct = int(float64(used) / float64(total) * 100)
-	if pct > 100 {
+	if diskPct > 100 {
-		pct = 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 {

internal/web/static/app.css

@@ -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}
 
-/* 设备卡片与画像升级 */
+/* 设备卡片与画像升级 (方案 1: 经典主副标题分行) */
-.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}
+.devices{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
-.device-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
+.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}
-.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}
+.v1-head{display:flex;flex-direction:column;gap:4px;min-width:0}
-.role-badge{font-size:11px;padding:2px 6px;border-radius:5px;font-weight:600;letter-spacing:.5px;border:1px solid var(--border-strong)}
+.v1-row1{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
-.role-control{background:rgba(59,130,246,.15);color:#60a5fa;border-color:rgba(59,130,246,.3)}
+.v1-title{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
-.role-application{background:rgba(16,185,129,.15);color:#34d399;border-color:rgba(16,185,129,.3)}
+.v1-name{font-size:16px;font-weight:700;color:var(--text-main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
-.role-database{background:rgba(245,158,11,.15);color:#fbbf24;border-color:rgba(245,158,11,.3)}
+.v1-row2{font-size:12px;color:var(--text-muted);padding-left:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-.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}
+
+.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}
+.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}
+.p-item{display:flex;justify-content:space-between;align-items:center;gap:6px;min-height:20px}
-.p-label{color:var(--text-muted)}
+.p-label{color:var(--text-muted);font-weight:500;font-size:11px}
-.p-val{font-family:ui-monospace,monospace;font-weight:600;color:var(--text-main)}
+.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}
-.p-docker{grid-column:1/-1;display:flex;justify-content:flex-end}
+.badge-docker-text{padding:1px 6px;border-radius:4px;font-size:11px;font-weight:700}
-.badge-docker{font-size:11px;padding:2px 8px;border-radius:4px;font-weight:600}
+.badge-docker-text.yes{background:rgba(34,197,94,.15);color:var(--dot-online);border:1px solid rgba(34,197,94,.3)}
-.badge-docker.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)}
-.badge-docker.no{background:rgba(148,163,184,.15);color:var(--text-muted);border:1px solid var(--border)}

internal/web/static/app.js

@@ -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 loadStr = p.load_1m !== undefined ? p.load_1m.toFixed(2) : '-';
-    const swapStr = p.swap_percent !== undefined ? `${p.swap_percent}%` : '-';
+    const memStr = p.mem_available ? `${p.mem_available} (${p.mem_percent}%)` : (p.mem_percent !== undefined ? `${p.mem_percent}%` : '-');
-    const diskStr = p.disk_percent !== undefined ? `${p.disk_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="v1-head">
-          <div class="device-title">
+          <div class="v1-row1">
+            <div class="v1-title">
               <span class="dot"></span>
-            <strong class="device-name">${esc(d.name)}</strong>
+              <strong class="v1-name" title="${esc(d.name)}">${esc(d.name)}</strong>
-            <span class="role-badge role-${role.toLowerCase()}">${esc(role)}</span>
             </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">
+          <div class="v1-row2">${archOs}${statusText}</div>
-          <span>${esc(d.status)}</span> ·
-          <span>${d.is_local ? "local" : "remote"}</span> ·
-          <span>${esc(d.arch||"")}/${esc(d.os||"")}</span>
         </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">LOAD</span><span class="p-val">${loadStr}</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">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">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>
     `;

web/static/app.css

@@ -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}
 
-/* 设备卡片与画像升级 */
+/* 设备卡片与画像升级 (方案 1: 经典主副标题分行) */
-.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}
+.devices{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
-.device-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
+.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}
-.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}
+.v1-head{display:flex;flex-direction:column;gap:4px;min-width:0}
-.role-badge{font-size:11px;padding:2px 6px;border-radius:5px;font-weight:600;letter-spacing:.5px;border:1px solid var(--border-strong)}
+.v1-row1{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
-.role-control{background:rgba(59,130,246,.15);color:#60a5fa;border-color:rgba(59,130,246,.3)}
+.v1-title{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
-.role-application{background:rgba(16,185,129,.15);color:#34d399;border-color:rgba(16,185,129,.3)}
+.v1-name{font-size:16px;font-weight:700;color:var(--text-main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
-.role-database{background:rgba(245,158,11,.15);color:#fbbf24;border-color:rgba(245,158,11,.3)}
+.v1-row2{font-size:12px;color:var(--text-muted);padding-left:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-.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}
+
+.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}
+.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}
+.p-item{display:flex;justify-content:space-between;align-items:center;gap:6px;min-height:20px}
-.p-label{color:var(--text-muted)}
+.p-label{color:var(--text-muted);font-weight:500;font-size:11px}
-.p-val{font-family:ui-monospace,monospace;font-weight:600;color:var(--text-main)}
+.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}
-.p-docker{grid-column:1/-1;display:flex;justify-content:flex-end}
+.badge-docker-text{padding:1px 6px;border-radius:4px;font-size:11px;font-weight:700}
-.badge-docker{font-size:11px;padding:2px 8px;border-radius:4px;font-weight:600}
+.badge-docker-text.yes{background:rgba(34,197,94,.15);color:var(--dot-online);border:1px solid rgba(34,197,94,.3)}
-.badge-docker.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)}
-.badge-docker.no{background:rgba(148,163,184,.15);color:var(--text-muted);border:1px solid var(--border)}

web/static/app.js

@@ -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 loadStr = p.load_1m !== undefined ? p.load_1m.toFixed(2) : '-';
-    const swapStr = p.swap_percent !== undefined ? `${p.swap_percent}%` : '-';
+    const memStr = p.mem_available ? `${p.mem_available} (${p.mem_percent}%)` : (p.mem_percent !== undefined ? `${p.mem_percent}%` : '-');
-    const diskStr = p.disk_percent !== undefined ? `${p.disk_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="v1-head">
-          <div class="device-title">
+          <div class="v1-row1">
+            <div class="v1-title">
               <span class="dot"></span>
-            <strong class="device-name">${esc(d.name)}</strong>
+              <strong class="v1-name" title="${esc(d.name)}">${esc(d.name)}</strong>
-            <span class="role-badge role-${role.toLowerCase()}">${esc(role)}</span>
             </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">
+          <div class="v1-row2">${archOs}${statusText}</div>
-          <span>${esc(d.status)}</span> ·
-          <span>${d.is_local ? "local" : "remote"}</span> ·
-          <span>${esc(d.arch||"")}/${esc(d.os||"")}</span>
         </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">LOAD</span><span class="p-val">${loadStr}</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">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">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>
     `;