优化page3页面

web-ui.service/page3_handler.go

@@ -70,11 +70,18 @@ func timeStatusHandler(w http.ResponseWriter, r *http.Request) {
 		TimeSynced string `json:"time_synced"`
 	}
 
-	_ = callRPCResult(r.Context(), 7001, "core.getTimeSyncStatus", nil, &t)
+	callErr := callRPCResult(r.Context(), 7001, "core.getTimeSyncStatus", nil, &t)
 
 	sync := noValue
 	if t.TimeSynced == "true" {
-		sync = "已同步"
+		sync = "🟢正常"
+	}
+
+	timeSource := noValue
+	systemTime := time.Now().Format("2006-01-02 15:04:05")
+	if callErr == nil {
+		timeSource = "🟢" + strings.ToUpper(t.TimeSource)
+		systemTime = t.SystemTime
 	}
 
 	boot, uptime := noValue, noValue
@@ -97,10 +104,11 @@ func timeStatusHandler(w http.ResponseWriter, r *http.Request) {
 
 	w.Header().Set("Content-Type", "application/json; charset=utf-8")
 	json.NewEncoder(w).Encode(map[string]string{
-		"var1": sync,
-		"var2": strings.ToUpper(t.TimeSource),
-		"var3": t.SystemTime,
-		"var4": boot,
-		"var5": uptime,
+		"var1": map[bool]string{true: "🟢正常", false: noValue}[callErr == nil],
+		"var2": sync,
+		"var3": timeSource,
+		"var4": systemTime,
+		"var5": boot,
+		"var6": uptime,
 	})
 }

web-ui.service/web/pages/page3.html

@@ -13,25 +13,31 @@
 <div class="app">
   <main class="view page-time">
     <div class="status-bar">
-      <div class="status-row">
-        <span class="label">同步状态</span>
+     <div class="status-row">
+      <div class="status-item">
+        <span class="label">时间服务</span>
         <span class="value" id="var1">--</span>
       </div>
-      <div class="status-row">
-        <span class="label">同步协议</span>
+      <div class="status-item">
+        <span class="label">同步状态</span>
         <span class="value" id="var2">--</span>
       </div>
+      <div class="status-item">
+        <span class="label">同步协议</span>
+        <span class="value" id="var3">--</span>
+      </div>
+     </div>
       <div class="status-row">
         <span class="label">当前时间</span>
-        <span class="value" id="var3">--</span>
+        <span class="value" id="var4">--</span>
       </div>
       <div class="status-row">
         <span class="label">开机时间</span>
-        <span class="value" id="var4">--</span>
+        <span class="value" id="var5">--</span>
       </div>
       <div class="status-row">
         <span class="label">开机时长</span>
-        <span class="value" id="var5">--</span>
+        <span class="value" id="var6">--</span>
       </div>
     </div>
 

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

@@ -18,6 +18,21 @@
     flex-shrink: 0;
 }
 
+.status-item {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.status-item .label {
+    font-size: 14px;
+}
+
+.status-item .value {
+    font-size: 14px;
+    font-family: ui-monospace, Consolas, monospace;
+}
+
 .status-row {
     display: flex;
     align-items: center;

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

@@ -127,6 +127,7 @@ function getTimeStatus() {
       document.getElementById("var3").textContent = data.var3 || "--";
       document.getElementById("var4").textContent = data.var4 || "--";
       document.getElementById("var5").textContent = data.var5 || "--";
+      document.getElementById("var6").textContent = data.var6 || "--";
     })
     .catch(e => {
       console.error("time status failed:", e);
@@ -136,6 +137,7 @@ function getTimeStatus() {
       document.getElementById("var3").textContent = "--";
       document.getElementById("var4").textContent = "--";
       document.getElementById("var5").textContent = "--";
+      document.getElementById("var6").textContent = "--";
     });
 }