ngfchl/BitMonitor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: countdown spinner with text overlay, configurable refresh interval

Browse Source
This commit is contained in:
ngfchl
2026-06-21 10:10:26 +08:00
parent 5ef7937d3c
commit 2f6bea41d5
1 changed files with 35 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cmd/server/templates/index.html
+35 -22
View File
@@ -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