refactor: remove countdown/spin from header, simplify status bar

cmd/server/templates/index.html

@@ -163,6 +163,19 @@
             color: var(--dim)
         }
 
+        .hmid .ant-spin {
+            vertical-align: middle;
+            margin-right: 2px
+        }
+
+        .app-header > span:last-child,
+        .app-header > div:last-child {
+            white-space: nowrap;
+            display: flex;
+            align-items: center;
+            gap: 6px
+        }
+
         .dot {
             width: 6px;
             height: 6px;
@@ -386,8 +399,8 @@
 
         .dc-spinner {
             position: relative;
-            width: 16px;
+            width: 22px;
-            height: 16px;
+            height: 22px;
             display: inline-flex;
             align-items: center;
             justify-content: center
@@ -395,10 +408,21 @@
 
         .dc-spinner-txt {
             position: absolute;
-            font-size: 7px;
+            font-size: 8px;
             font-weight: 700;
             font-family: var(--mono);
-            color: var(--text)
+            color: var(--text);
+            z-index: 1
+        }
+
+        .ant-spin-dot {
+            color: var(--accent) !important
+        }
+
+        .ant-spin-text {
+            color: var(--text) !important;
+            font-size: 12px !important;
+            font-family: var(--mono) !important
         }
 
         .dc-sub {
@@ -407,16 +431,6 @@
             color: var(--dim)
         }
 
-        .dc-time {
-            font-size: 10px;
-            color: var(--dim);
-            font-family: var(--mono);
-            flex-shrink: 0;
-            display: flex;
-            align-items: center;
-            gap: 4px
-        }
-
         .dc-sub {
             padding: 1px 16px 0;
             font-size: 10px;
@@ -440,9 +454,20 @@
         }
 
         @media (max-width: 767px) {
-            .dc-left { border-right: none; border-bottom: 1px solid var(--border); margin-bottom: 8px }
+            .dc-left {
-            .dc-col { flex: none !important; width: 100% }
+                border-right: none;
-            .dashboard { display: none !important }
+                border-bottom: 1px solid var(--border);
+                margin-bottom: 8px
+            }
+
+            .dc-col {
+                flex: none !important;
+                width: 100%
+            }
+
+            .dashboard {
+                display: none !important
+            }
         }
 
         .dc-gpu-full {
@@ -962,7 +987,7 @@
         </div>
 
         <div class="dashboard" v-if="deviceCount > 0">
-            <a-row  :gutter="[12,12]">
+            <a-row :gutter="[12,12]">
                 <a-col :md="12">
                     <div class="dash-card">
                         <div class="dash-title">硬件状态</div>
@@ -1037,7 +1062,8 @@
             <!-- 全部在线 -->
             <template v-for="name in onlineDevices">
                 <div class="device-card" :key="name">
-                    <div class="dc-hd"><span class="dc-name">{{ name }}</span><span class="dc-time"><span class="dc-spinner"><a-icon type="loading" style="font-size:16px;color:var(--accent)" spin/><span class="dc-spinner-txt">{{ countdownVal }}</span></span></span></div>
+                    <div class="dc-hd"><span class="dc-name">{{ name }}</span><span class="dc-time">{{ ago(devices[name].info.last_seen) }}</span>
+                    </div>
                     <div class="dc-sub"
                          v-if="devices[name].info.motherboard && (devices[name].info.motherboard.manufacturer || devices[name].info.motherboard.product)">
                         {{ devices[name].info.motherboard.manufacturer }} {{ devices[name].info.motherboard.product }}
@@ -1098,14 +1124,15 @@
                     hwOnlyDevices.length }} 台仅硬件在线
                 </div>
                 <div class="device-card" :key="name">
-                    <div class="dc-hd"><span class="dc-name">{{ name }}</span><span class="dc-time"><span class="dc-spinner"><a-icon type="loading" style="font-size:16px;color:var(--accent)" spin/><span class="dc-spinner-txt">{{ countdownVal }}</span></span></span></div>
+                    <div class="dc-hd"><span class="dc-name">{{ name }}</span><span class="dc-time">{{ ago(devices[name].info.last_seen) }}</span>
+                    </div>
                     <div class="dc-sub"
                          v-if="devices[name].info.motherboard && (devices[name].info.motherboard.manufacturer || devices[name].info.motherboard.product)">
                         {{ devices[name].info.motherboard.manufacturer }} {{ devices[name].info.motherboard.product }}
                     </div>
                     <div class="dc-bd" style="padding:4px 14px 8px">
                         <hw-section :cpu="getLive(name).cpu||{}" :memory="getLive(name).memory||{}"
-                                     :info="devices[name].info" :is-on="true"></hw-section>
+                                    :info="devices[name].info" :is-on="true"></hw-section>
                         <gpu-section :gpus="getLive(name).gpus||[]" :expanded-gpu="expandedGpu"
                                      @toggle-gpu="toggleGpu"></gpu-section>
                     </div>
@@ -1118,7 +1145,8 @@
                     }} 台仅矿池在线
                 </div>
                 <div class="device-card offline" :key="name">
-                    <div class="dc-hd"><span class="dc-name">{{ name }}</span><span class="dc-time"><span class="dc-spinner"><a-icon type="loading" style="font-size:16px;color:var(--accent)" spin/><span class="dc-spinner-txt">{{ countdownVal }}</span></span></span></div>
+                    <div class="dc-hd"><span class="dc-name">{{ name }}</span><span class="dc-time">{{ ago(devices[name].info.last_seen) }}</span>
+                    </div>
                     <div class="dc-bd" style="padding:4px 14px 8px">
                         <mining-section :mining="devices[name].mining"
                                         :history="devices[name].hash_history"></mining-section>
@@ -1134,7 +1162,7 @@
                 <div class="device-card offline" :key="name">
                     <div class="dc-hd">
                         <span class="dc-name">{{ name }}</span>
-                        <span class="dc-time"><span class="dc-spinner"><a-icon type="loading" style="font-size:16px;color:var(--accent)" spin/><span class="dc-spinner-txt">{{ countdownVal }}</span></span></span>
+                        <span class="dc-time">{{ ago(devices[name].info.last_seen) }}</span>
                     </div>
                     <div class="dc-bd"
                          style="padding:4px 14px 8px;display:flex;align-items:center;justify-content:space-between">
@@ -1495,10 +1523,7 @@
                 devices: {},
                 expandedGpu: null,
                 clock: '',
-                ws: null,
+                ws: null
-                refreshing: true,
-                refreshInterval: 30,
-                countdownVal: 30
             }
         },
         created: function () {
@@ -1574,17 +1599,6 @@
                 return e && e.mining ? e.mining.country || '' : ''
             },
             ago: ago,
-        showRefresh: function () {
-            var self = this;
-            self.refreshing = true;
-            self.countdownVal = self.refreshInterval;
-            setTimeout(function () {
-                self.refreshing = false
-            }, 600)
-        },
-        countdown: function (iso) {
-            return this.countdownVal + 's'
-        },
             toggleGpu: function (i) {
                 this.expandedGpu = i
             },
@@ -1625,6 +1639,7 @@
                 var p = location.protocol === 'https:' ? 'wss:' : 'ws:';
                 this.ws = new WebSocket(p + '//' + location.host + '/ws/monitor');
                 this.ws.onopen = function () {
+                    self.wsOnline = true;
                     self.loginConn = '';
                     setTimeout(function () {
                         if (!self.authed) self.sendAuth(mid, pw)
@@ -1669,18 +1684,29 @@
                         this.loginLoading = false;
                         localStorage.removeItem('mm_pw');
                         break;
-                    case'snapshot':
+                case'snapshot':
-                        this.devices = {};
+                    var k;
-                        if (msg.devices) this.devices = Object.assign({}, msg.devices);
+                    for (k in devices) delete devices[k];
-                        if (this.authed) this.wsOnline = true;
+                    if (msg.devices) for (k in msg.devices) devices[k] = msg.devices[k];
-                        this.showRefresh();
+                    for (k in cards) {
-                        break;
+                        cards[k].remove();
+                        delete cards[k]
+                    }
+                    if (sepNode) {
+                        sepNode.remove();
+                        sepNode = null
+                    }
+                    if (authed) {
+                        $('ws-dot').className = 'dot on';
+                        $('ws-txt').textContent = '已连接'
+                    }
+                    scheduleRender();
+                    break;
                     case'device':
                         var prev = this.devices[msg.machine];
                         this.$set(this.devices, msg.machine, msg.device);
                         if (prev && prev.hash_history && (!msg.device.hash_history || !msg.device.hash_history.length)) this.$set(this.devices[msg.machine], 'hash_history', prev.hash_history);
-                        this.showRefresh();
+                                                break;
-                        break;
                     case'mining':
                         var mi = msg.mining || {};
                         var oAt = mi.opened_at > 0 ? new Date(mi.opened_at).toISOString() : null;
@@ -1701,8 +1727,7 @@
                                 }, online: false, mining: mi, hash_history: msg.hash_history
                             })
                         }
-                        this.showRefresh();
+                                                break;
-                        break;
                     case'remove':
                         this.$delete(this.devices, msg.machine);
                         this.expandedGpu = null;
@@ -1715,18 +1740,6 @@
             setInterval(function () {
                 self.clock = new Date().toLocaleTimeString('zh-CN', {hour12: false})
             }, 1000);
-            setInterval(function () {
-                if (self.authed && self.countdownVal > 0) {
-                    self.countdownVal--;
-                    if (self.countdownVal <= 0) {
-                        self.countdownVal = self.refreshInterval;
-                        self.refreshing = true;
-                        setTimeout(function () {
-                            self.refreshing = false
-                        }, 600)
-                    }
-                }
-            }, 1000);
             var savedId = localStorage.getItem('mm_id') || '';
             var savedPw = localStorage.getItem('mm_pw') || '';
             if (savedId && savedPw) {