ci(release): attribute changelog commits directly to @kyaring

.github/workflows/release.yml

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

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`）；
+- 升级异常（校验失败或无法启动）时**自动秒级回滚**，保证节点永不失联。
+
 ---
 
 ## 🛠️ 手动编译部署
@@ -140,20 +150,51 @@ Agent 启动后会通过 WSS 自动连入 Hub，在 Hub 管理面板与 `/api/v1
 
 ---
 
-## 🤖 接入 ChatGPT / AI 客户端
+## 🤖 接入 ChatGPT (新版插件 Apps & MCP 模式)
 
-### 方式 1：ChatGPT Actions (推荐)
+当前 ChatGPT 已升级为以 **插件 / 应用 (Apps & MCP)** 规范连接外部服务。VPS-Commander 原生内置完整的 **MCP SSE + OAuth2** 协议支持，无需部署额外适配层。
-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`。
 
-### 方式 2：MCP (Model Context Protocol)
+### 接入配置步骤：
-- **SSE 端点**：`https://your-domain.com/mcp/sse`
+
-- **消息交互**：`https://your-domain.com/mcp/message`
+1. **进入 ChatGPT 插件/应用配置页**：
-- **认证**：支持 URL 参数 `?token=...` 或标准 Header `Authorization: Bearer <TOKEN>`。
+   - 打开 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"
+      ]
+    }
+  }
+}
+```
 
 ---
 

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>
     `;