优化webui页面, 修复自测试bug

web-ui.service/main.go

@@ -37,10 +37,10 @@ func (p *program) Start(s service.Service) error {
 
 	p.webUI = ui
 
-	baseapp.Logger.Infof("[%s] webui starting on http :8080 ...", p.name)
+	baseapp.Logger.Infof("[%s] Web UI starting on http :8080 ...", p.name)
 	go func() {
 		if err := ui.Start(); err != nil {
-			baseapp.Logger.Warnf("[%s] webui stopped: %v\n!", p.name, err)
+			baseapp.Logger.Warnf("[%s] Web UI stopped: %v\n!", p.name, err)
 			os.Exit(1)
 		}
 	}()
@@ -60,12 +60,12 @@ func main() {
 	baseapp.SetOptDirs(false, false, false, false)
 	baseapp.InitPath()
 
-	svcFlag := flag.String("service", "", "Control the yfkj-webui service.")
+	svcFlag := flag.String("service", "", "Control the yfkj-web-ui service.")
 	flag.Parse()
 
 	svcConfig := &service.Config{
-		Name:        "yfkj-webui",
-		DisplayName: "yfkj-webui",
+		Name:        "yfkj-web-ui",
+		DisplayName: "yfkj-web-ui",
 		Description: "Yunfei Device Web Management UI",
 		Option: map[string]any{
 			"Restart": "always",

web-ui.service/web/app.html

@@ -24,6 +24,9 @@
       </div>
     </div>
     <div class="actions">
+      <!-- 系统时间 -->
+      <span id="sys-time" class="clock">--</span>
+      <!-- 退出系统 -->
       <button class="btn btn-red" onclick="logout()">退出</button>
     </div>
   </header>

web-ui.service/web/static/css/app.css

@@ -78,6 +78,28 @@ body{
     gap:10px;
 }
 
+.clock {
+  font-size: 16px;
+  font-weight: 700;
+  letter-spacing: 1px;
+
+  background: linear-gradient(
+    90deg,
+    #00e5ff,
+    #2196ff,
+    #00ffcc
+  );
+
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+
+  background-clip: text;
+
+  text-shadow:
+    0 0 6px rgba(0, 229, 255, 0.6),
+    0 0 12px rgba(33, 150, 255, 0.5);
+}
+
 /* 次布局 */
 .layout{
     display:flex;

web-ui.service/web/static/js/app.js

@@ -64,8 +64,44 @@ function setText(id, value)
   }
 }
 
+let sysTimeTimer = null;
+function startSysTime() {
+  if (sysTimeTimer !== null) {
+    return;
+  }
+
+  function update() {
+    const el = document.getElementById("sys-time");
+    if (!el) {
+      return;
+    }
+
+    const now = new Date();
+
+    const year = now.getFullYear();
+    const month = String(now.getMonth() + 1).padStart(2, "0");
+    const day = String(now.getDate()).padStart(2, "0");
+
+    const hour = String(now.getHours()).padStart(2, "0");
+    const min = String(now.getMinutes()).padStart(2, "0");
+    const sec = String(now.getSeconds()).padStart(2, "0");
+
+    el.textContent =
+      `${year}-${month}-${day} ${hour}:${min}:${sec}`;
+  }
+
+  update();
+
+  sysTimeTimer = setInterval(update, 1000);
+}
+
+
+document.addEventListener("DOMContentLoaded", () => {
+  startSysTime();
+});
+
 function loadIMEI() {
-    fetchIMEI();
+  fetchIMEI();
 }
 
 loadIMEI();