From 7d3f49741768cc9616afd403e6cfc9328244c88f Mon Sep 17 00:00:00 2001
From: "2569718930@qq.com" <2569718930@qq.com>
Date: Tue, 3 Mar 2026 22:49:10 +0800
Subject: [PATCH] feat: display current weather and max temperature time in
 hero section

---
 web/static/app.js     | 31 +++++++++++++++++++++++++++++--
 web/static/index.html |  2 ++
 web/static/style.css  | 19 +++++++++++++++++++
 3 files changed, 50 insertions(+), 2 deletions(-)

diff --git a/web/static/app.js b/web/static/app.js
index 6b5bf13c..10bd1f7c 100644
--- a/web/static/app.js
+++ b/web/static/app.js
@@ -255,14 +255,38 @@ function renderHero(data) {
   const sym = data.temp_symbol || "°C";
 
   const displayTemp =
-    cur.max_so_far != null && cur.max_so_far >= cur.temp
+    cur.max_so_far != null && cur.max_so_far >= (cur.temp || -999)
       ? cur.max_so_far
       : cur.temp;
 
+  // Use cloud_desc for the main weather indicator
+  const weatherText = cur.cloud_desc || cur.wx_desc || "未知";
+  const weatherIcon =
+    {
+      多云: "⛅",
+      阴天: "☁️",
+      少云: "🌤️",
+      散云: "⛅",
+      晴: "☀️",
+    }[cur.cloud_desc] || "🌡️";
+
+  document.getElementById("heroWeather").innerHTML = `
+        <span>${weatherIcon} ${weatherText}</span>
+    `;
+
   document.getElementById("heroTemp").textContent =
     displayTemp != null ? displayTemp.toFixed(1) : "—";
   document.getElementById("heroUnit").textContent = sym;
 
+  // Show if it's the peak recorded temperature
+  const isMax = cur.max_so_far != null && cur.max_so_far >= (cur.temp || -999);
+  const maxTimeEl = document.getElementById("heroMaxTime");
+  if (isMax && cur.max_temp_time) {
+    maxTimeEl.textContent = `该城市今日最高温出现于当地时间 ${cur.max_temp_time}`;
+  } else {
+    maxTimeEl.textContent = "";
+  }
+
   document.getElementById("heroCurrent").textContent =
     cur.temp != null ? `${cur.temp}${sym} @${cur.obs_time || "—"}` : "—";
   document.getElementById("heroWU").textContent =
@@ -279,7 +303,10 @@ function renderHero(data) {
     }
     parts.push(`<span>✈️ METAR ${cur.obs_time}${ageStr}</span>`);
   }
-  if (cur.cloud_desc) parts.push(`<span>☁️ ${cur.cloud_desc}</span>`);
+  // Remove redundant cloud_desc here as it's now in main hero
+  if (cur.wx_desc && cur.wx_desc !== cur.cloud_desc) {
+    parts.push(`<span>🌦️ ${cur.wx_desc}</span>`);
+  }
   if (cur.wind_speed_kt != null) {
     parts.push(`<span>💨 ${cur.wind_speed_kt}kt</span>`);
   }
diff --git a/web/static/index.html b/web/static/index.html
index c8252e85..ebe2679f 100644
--- a/web/static/index.html
+++ b/web/static/index.html
@@ -65,10 +65,12 @@
         <div id="panelContent" class="panel-body">
             <!-- ── Temperature Hero ── -->
             <section class="hero-section">
+                <div class="hero-weather" id="heroWeather"></div>
                 <div class="hero-temp">
                     <span class="hero-value" id="heroTemp">—</span>
                     <span class="hero-unit" id="heroUnit">°C</span>
                 </div>
+                <div class="hero-max-time" id="heroMaxTime"></div>
                 <div class="hero-details">
                     <div class="hero-item">
                         <span class="label">📍 当前实测</span>
diff --git a/web/static/style.css b/web/static/style.css
index fa6893e2..7a491ad2 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -467,12 +467,31 @@ body {
   padding-top: 12px !important;
 }
 
+.hero-weather {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--accent-cyan);
+  margin-bottom: -4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
+
 .hero-temp {
   display: flex;
   align-items: flex-start;
   justify-content: center;
   gap: 2px;
+  margin-bottom: 2px;
+}
+
+.hero-max-time {
+  font-size: 10px;
+  font-weight: 500;
+  color: var(--text-muted);
   margin-bottom: 16px;
+  min-height: 12px;
 }
 .hero-value {
   font-size: 56px;