From 2f6bea41d59ad4119c908bf58925a0e7411503bf Mon Sep 17 00:00:00 2001
From: ngfchl <ngfchl@126.comn>
Date: Sun, 21 Jun 2026 10:10:26 +0800
Subject: [PATCH] style: countdown spinner with text overlay, configurable
 refresh interval

---
 cmd/server/templates/index.html | 57 ++++++++++++++++++++-------------
 1 file changed, 35 insertions(+), 22 deletions(-)

diff --git a/cmd/server/templates/index.html b/cmd/server/templates/index.html
index ea15222..902f00d 100644
--- a/cmd/server/templates/index.html
+++ b/cmd/server/templates/index.html
@@ -384,6 +384,23 @@
             gap: 4px
         }
 
+        .dc-spinner {
+            position: relative;
+            width: 16px;
+            height: 16px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center
+        }
+
+        .dc-spinner-txt {
+            position: absolute;
+            font-size: 7px;
+            font-weight: 700;
+            font-family: var(--mono);
+            color: var(--text)
+        }
+
         .dc-sub {
             padding: 1px 16px 0;
             font-size: 11px;
@@ -1020,8 +1037,7 @@
             <!-- 全部在线 -->
             <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">{{ countdown(devices[name].info.last_seen) }}<a-icon
-                            type="loading" style="font-size:10px;color:var(--accent)" spin/></span></div>
+                    <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-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 }}
@@ -1082,15 +1098,14 @@
                     hwOnlyDevices.length }} 台仅硬件在线
                 </div>
                 <div class="device-card" :key="name">
-                    <div class="dc-hd"><span class="dc-name">{{ name }}</span><span class="dc-time">{{ countdown(devices[name].info.last_seen) }}<a-icon
-                            v-if="refreshing" type="loading" style="font-size:10px;color:var(--accent)"/></span></div>
+                    <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-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>
@@ -1103,8 +1118,7 @@
                     }} 台仅矿池在线
                 </div>
                 <div class="device-card offline" :key="name">
-                    <div class="dc-hd"><span class="dc-name">{{ name }}</span><span class="dc-time">{{ countdown(devices[name].info.last_seen) }}<a-icon
-                            v-if="refreshing" type="loading" style="font-size:10px;color:var(--accent)"/></span></div>
+                    <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-bd" style="padding:4px 14px 8px">
                         <mining-section :mining="devices[name].mining"
                                         :history="devices[name].hash_history"></mining-section>
@@ -1120,9 +1134,7 @@
                 <div class="device-card offline" :key="name">
                     <div class="dc-hd">
                         <span class="dc-name">{{ name }}</span>
-                        <span class="dc-time">{{ countdown(devices[name].info.last_seen) }}<a-icon v-if="refreshing"
-                                                                                                   type="loading"
-                                                                                                   style="font-size:10px;color:var(--accent)"/></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-bd"
                          style="padding:4px 14px 8px;display:flex;align-items:center;justify-content:space-between">
@@ -1485,6 +1497,7 @@
                 clock: '',
                 ws: null,
                 refreshing: true,
+                refreshInterval: 30,
                 countdownVal: 30
             }
         },
@@ -1561,17 +1574,17 @@
                 return e && e.mining ? e.mining.country || '' : ''
             },
             ago: ago,
-            showRefresh: function () {
-                var self = this;
-                self.refreshing = true;
-                self.countdownVal = 30;
-                setTimeout(function () {
-                    self.refreshing = false
-                }, 600)
-            },
-            countdown: function (iso) {
-                return this.countdownVal + 's'
-            },
+        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
             },
@@ -1706,7 +1719,7 @@
                 if (self.authed && self.countdownVal > 0) {
                     self.countdownVal--;
                     if (self.countdownVal <= 0) {
-                        self.countdownVal = 30;
+                        self.countdownVal = self.refreshInterval;
                         self.refreshing = true;
                         setTimeout(function () {
                             self.refreshing = false