feat: GPU blocks display with click-to-expand, fix fan speed parsing, compress chart

cmd/client/main.go

@@ -1095,12 +1095,16 @@ func tryNvidiaSMI() []GPUInfo {
 	var gpus []GPUInfo
 	for _, line := range strings.Split(strings.TrimSpace(string(out)), "\n") {
 		parts := strings.Split(line, ",")
-		if len(parts) < 10 {
+		if len(parts) < 11 {
 			continue
 		}
 		for i := range parts {
 			parts[i] = strings.TrimSpace(parts[i])
 		}
+		fan := parseFloat(parts[10])
+		if parts[10] == "[N/A]" || parts[10] == "N/A" || strings.Contains(parts[10], "[") {
+			fan = 0
+		}
 		gpus = append(gpus, GPUInfo{
 			Name:        parts[1],
 			VRAMTotalMB: parseFloat(parts[2]),
@@ -1110,7 +1114,7 @@ func tryNvidiaSMI() []GPUInfo {
 			CoreClock:   parseFloat(parts[7]),
 			MemClock:    parseFloat(parts[8]),
 			Power:       parseFloat(parts[9]),
-			FanSpeed:    parseFloat(parts[10]),
+			FanSpeed:    fan,
 		})
 	}
 	return gpus

cmd/server/templates/index.html

@@ -507,7 +507,8 @@
             display: flex;
             flex-direction: column;
             gap: 3px;
-            padding: 0 12px 8px
+            padding: 0 12px 8px;
+            align-self: stretch
         }
 
         .card-left {
@@ -678,59 +679,100 @@
         }
 
         /* ═══ GPU ═══ */
-        .gpu-table-wrap {
-            overflow-x: auto
+        .gpu-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
+            gap: 5px
         }
 
-        .gpu-table {
-            width: 100%;
-            border-collapse: collapse;
+        .gpu-block {
+            background: rgba(0, 0, 0, .2);
+            border-radius: 6px;
+            padding: 6px;
+            cursor: pointer;
+            transition: background .2s, transform .15s
+        }
+
+        .gpu-block:hover {
+            background: rgba(0, 229, 160, .06);
+            transform: translateY(-1px)
+        }
+
+        .gb-top {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 4px
+        }
+
+        .gb-name {
             font-size: 8px;
+            color: var(--dim);
             font-family: var(--mono)
         }
 
-        .gpu-table th {
-            text-align: left;
-            font-size: 7px;
-            font-weight: 600;
-            letter-spacing: .4px;
-            text-transform: uppercase;
-            color: var(--dim);
-            padding: 2px 4px;
-            border-bottom: 1px solid var(--border);
-            white-space: nowrap
+        .gb-temp {
+            font-size: 11px;
+            font-weight: 700;
+            font-family: var(--mono)
         }
 
-        .gpu-table td {
-            padding: 2px 4px;
-            border-bottom: 1px solid rgba(30, 37, 58, .5);
-            white-space: nowrap
+        .gb-bar {
+            position: relative;
+            height: 14px;
+            background: var(--dim-bar);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 3px
         }
 
-        .gpu-table tr:last-child td {
-            border-bottom: none
+        .gb-fill {
+            height: 100%;
+            border-radius: 3px;
+            transition: width .5s ease
         }
 
-        .gpu-table tr:hover td {
-            background: rgba(0, 229, 160, .03)
-        }
-
-        .gpu-idx {
-            color: var(--dim);
-            font-size: 10px
-        }
-
-        .gpu-nm {
-            font-family: var(--font);
-            font-weight: 500;
-            font-size: 11px
-        }
-
-        .gpu-vram-cell {
+        .gb-pct {
+            position: absolute;
+            inset: 0;
             display: flex;
-            flex-direction: column;
-            gap: 2px;
-            min-width: 60px
+            align-items: center;
+            justify-content: center;
+            font-size: 8px;
+            font-weight: 700;
+            font-family: var(--mono);
+            color: #fff;
+            text-shadow: 0 1px 2px rgba(0,0,0,.6)
+        }
+
+        .gb-info {
+            display: flex;
+            justify-content: space-between;
+            font-size: 7px;
+            font-family: var(--mono)
+        }
+
+        .gpu-detail-grid {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 4px 10px
+        }
+
+        .gd-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center
+        }
+
+        .gd-l {
+            color: var(--dim);
+            font-size: 9px
+        }
+
+        .gd-v {
+            font-family: var(--mono);
+            font-size: 9px;
+            font-weight: 500
         }
 
         /* ═══ Mining ═══ */
@@ -1416,36 +1458,60 @@
 
         function buildGPU(gpus, infoGPUs, isOn) {
             var list = isOn ? gpus : (infoGPUs || []);
-            if (!list.length) return '<div class="sec"><div class="sec-tt">GPU</div><div style="color:var(--dim);font-size:11px">未检测到</div></div>';
+            if (!list.length) return '<div class="sec"><div class="sec-tt">GPU</div><div style="color:var(--dim);font-size:9px">未检测到</div></div>';
             var h = '<div class="sec"><div class="sec-tt">GPU \u00B7 <span class="hl">' + list.length + ' \u5F20</span></div>';
-            h += '<div class="gpu-table-wrap"><table class="gpu-table"><thead><tr>'
-                + '<th>\u7F16\u53F7</th><th>\u8D1F\u8F7D</th><th>\u6E29\u5EA6</th><th>\u529F\u8017</th><th>\u6838\u5FC3</th><th>\u663E\u5B58</th><th>\u7528\u91CF</th><th>\u98CE\u6247</th>'
-                + '</tr></thead><tbody>';
+            h += '<div class="gpu-grid">';
             for (var i = 0; i < list.length; i++) {
                 var g = list[i], gl = g.load_percent || 0, tmp = g.temperature || 0,
+                    vt = g.vram_total || g.vram_total_mb || 0,
+                    vu = g.vram_used || g.vram_used_mb || 0;
+                var vp = vt > 0 ? (vu / vt * 100) : 0;
+                var tc = tmp >= 85 ? 'var(--danger)' : tmp >= 70 ? 'var(--warn)' : 'var(--text)';
+                h += '<div class="gpu-block" onclick="window.__gpuDetail(' + i + ')" title="点击查看详细信息">';
+                h += '<div class="gb-top"><span class="gb-name">GPU' + (i + 1) + '</span><span class="gb-temp" style="color:' + tc + '">' + (tmp > 0 ? tmp.toFixed(0) + '\u00B0' : '\u2014') + '</span></div>';
+                h += '<div class="gb-bar"><div class="gb-fill" style="width:' + gl.toFixed(0) + '%;background:' + pC(gl) + '"></div><span class="gb-pct">' + gl.toFixed(0) + '%</span></div>';
+                h += '<div class="gb-info"><span style="color:' + pC(vp) + '">' + vp.toFixed(0) + '%</span><span style="color:var(--dim)">' + (vt > 0 ? (vu / 1024).toFixed(1) + '/' + (vt / 1024).toFixed(0) + 'G' : '\u2014') + '</span></div>';
+                h += '</div>';
+            }
+            h += '</div>';
+            h += '<div class="gpu-detail" id="gpu-detail" style="display:none"></div>';
+            h += '</div>';
+            return h + '</div>';
+        }
+
+        window.__gpuDetail = function (idx) {
+            var el = document.getElementById('gpu-detail');
+            if (!el) return;
+            if (el.dataset.idx == idx && el.style.display !== 'none') {
+                el.style.display = 'none';
+                return;
+            }
+            el.dataset.idx = idx;
+            var names = Object.keys(devices), name = names[0], e = devices[name];
+            if (!e) return;
+            var live = e.live || {}, gpus = live.gpus || [], g = gpus[idx];
+            if (!g) return;
+            var gl = g.load_percent || 0, tmp = g.temperature || 0,
                 pwr = g.power || g.power_watts || 0, cc = g.core_clock || g.core_clock_mhz || 0,
                 mc = g.mem_clock || g.mem_clock_mhz || 0, vt = g.vram_total || g.vram_total_mb || 0,
                 vu = g.vram_used || g.vram_used_mb || 0, fan = g.fan_speed || 0;
-                h += '<tr>'
-                    + '<td class="gpu-idx">GPU' + (i + 1) + '</td>'
-                    + '<td style="color:' + pC(gl) + '">' + gl.toFixed(0) + '%</td>'
-                    + '<td>' + tT(tmp > 0 ? tmp : null) + '</td>'
-                    + '<td>' + Math.round(pwr) + ' W</td>'
-                    + '<td>' + Math.round(cc) + ' MHz</td>'
-                    + '<td>' + Math.round(mc) + ' MHz</td>';
+            var h = '<div class="sec" style="margin-top:6px"><div class="sec-tt">GPU' + (idx + 1) + ' \u00B7 <span class="hl">' + esc(g.name || 'N/A') + '</span></div>';
+            h += '<div class="gpu-detail-grid">';
+            h += '<div class="gd-item"><span class="gd-l">\u8D1F\u8F7D</span><span class="gd-v" style="color:' + pC(gl) + '">' + gl.toFixed(1) + '%</span></div>';
+            h += '<div class="gd-item"><span class="gd-l">\u6E29\u5EA6</span><span class="gd-v">' + tT(tmp > 0 ? tmp : null) + '</span></div>';
+            h += '<div class="gd-item"><span class="gd-l">\u529F\u8017</span><span class="gd-v">' + Math.round(pwr) + ' W</span></div>';
+            h += '<div class="gd-item"><span class="gd-l">\u6838\u5FC3\u9891\u7387</span><span class="gd-v">' + Math.round(cc) + ' MHz</span></div>';
+            h += '<div class="gd-item"><span class="gd-l">\u663E\u5B58\u9891\u7387</span><span class="gd-v">' + Math.round(mc) + ' MHz</span></div>';
+            h += '<div class="gd-item"><span class="gd-l">\u98CE\u6247</span><span class="gd-v">' + (fan > 0 ? Math.round(fan) + '%' : '\u2014') + '</span></div>';
+            h += '</div>';
             if (vt > 0) {
                 var vp = vu / vt * 100;
-                    h += '<td><div class="gpu-vram-cell"><span>' + (vu / 1024).toFixed(1) + '/' + (vt / 1024).toFixed(0) + 'G</span>'
-                        + '<div class="bar mini"><div class="bf" style="width:' + vp + '%;background:' + pC(vp) + '"></div></div></div></td>';
-                } else {
-                    h += '<td>\u2014</td>';
-                }
-                h += '<td>' + (fan > 0 ? Math.round(fan) + '%' : '\u2014') + '</td>';
-                h += '</tr>';
-            }
-            h += '</tbody></table></div>';
-            return h + '</div>';
+                h += '<div style="margin-top:6px"><div class="sr" style="margin-bottom:3px"><span class="sl">\u663E\u5B58</span><span class="sv">' + (vu / 1024).toFixed(1) + ' / ' + (vt / 1024).toFixed(1) + ' GB</span></div><div class="bar"><div class="bf" style="width:' + vp + '%;background:' + pC(vp) + '"></div></div></div>';
             }
+            h += '</div>';
+            el.innerHTML = h;
+            el.style.display = '';
+        };
 
         /* ═══ Right Column: Mining Status + Mining ═══ */
         function buildRight(name, mining, hist, info, isOn) {
@@ -1521,7 +1587,7 @@
         /* ═══ SVG Chart ═══ */
         function buildChart(hist) {
             if (!hist || hist.length < 2) return '<div class="chart-empty">数据采集中 (' + ((hist && hist.length) || 0) + '/2)...</div>';
-            var W = 420, H = 70, pad = {t: 10, b: 12, l: 44, r: 8}, cW = W - pad.l - pad.r, cH = H - pad.t - pad.b;
+            var W = 420, H = 56, pad = {t: 8, b: 10, l: 40, r: 6}, cW = W - pad.l - pad.r, cH = H - pad.t - pad.b;
             var vals = [], i;
             for (i = 0; i < hist.length; i++) vals.push(hist[i].v);
             var lo = vals[0], hi = vals[0];