From 341825747fad149cde46e6ddfb92ae6799052fdb Mon Sep 17 00:00:00 2001
From: "2569718930@qq.com" <2569718930@qq.com>
Date: Sun, 10 May 2026 17:39:22 +0800
Subject: [PATCH] =?UTF-8?q?UX=20=E5=AE=A1=E6=9F=A5=20P2=20=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=EF=BC=9AX=E8=BD=B4=E6=A0=87=E7=AD=BE=E5=AF=86?=
 =?UTF-8?q?=E5=BA=A6=E3=80=81=E6=9E=81=E7=AB=AF=E6=B8=A9=E5=BA=A6=E8=A7=86?=
 =?UTF-8?q?=E8=A7=89=E5=BC=BA=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- AiCityTemperatureChart：X轴标签从每4个→每3个显示，maxTicksLimit 6→8
- globals.css：新增 temp-extreme-hot（≥40°C）和 temp-extreme-cold（≤-5°C）样式
- PanelSections：Hero 温度值自动应用极端温度 CSS 类（橙色辉光/蓝色辉光）
- 华氏度自动适配：≥104°F 为极热，≤23°F 为极冷

Tested: npx tsc --noEmit
---
 frontend/app/globals.css                              | 11 +++++++++++
 frontend/components/dashboard/PanelSections.tsx       | 10 +++++++++-
 .../scan-terminal/AiCityTemperatureChart.tsx          |  4 ++--
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index f3d8a991..1a1cdf65 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -305,6 +305,17 @@
   }
 }
 
+/* ── Extreme temperature emphasis ── */
+.temp-extreme-hot {
+  color: #f97316;
+  text-shadow: 0 0 12px rgba(249, 115, 22, 0.35);
+}
+
+.temp-extreme-cold {
+  color: #38bdf8;
+  text-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
+}
+
 /* ══════════════════════════════════════════════════════════════
    Map Marker Components (nearby stations, city bubbles)
    ══════════════════════════════════════════════════════════════ */
diff --git a/frontend/components/dashboard/PanelSections.tsx b/frontend/components/dashboard/PanelSections.tsx
index c18b2bb7..c6b9b231 100644
--- a/frontend/components/dashboard/PanelSections.tsx
+++ b/frontend/components/dashboard/PanelSections.tsx
@@ -1,5 +1,13 @@
 "use client";
 
+function getTempExtremeClass(temp: number | null | undefined, symbol?: string | null) {
+  if (temp == null || !Number.isFinite(temp)) return "";
+  const isF = String(symbol || "").toUpperCase().includes("F");
+  if (isF ? temp >= 104 : temp >= 40) return "temp-extreme-hot";
+  if (isF ? temp <= 23 : temp <= -5) return "temp-extreme-cold";
+  return "";
+}
+
 import type { ChartConfiguration } from "chart.js";
 import clsx from "clsx";
 import { startTransition, useMemo } from "react";
@@ -65,7 +73,7 @@ export function HeroSummary() {
           {weatherIcon} {weatherText}
         </span>
       </div>
-      <div className="hero-temp">
+      <div className={`hero-temp ${getTempExtremeClass(current.temp, data.temp_symbol)}`}>
         <span className="hero-value">
           {current.temp != null ? current.temp.toFixed(1) : "--"}
         </span>
diff --git a/frontend/components/dashboard/scan-terminal/AiCityTemperatureChart.tsx b/frontend/components/dashboard/scan-terminal/AiCityTemperatureChart.tsx
index d20575ee..81d8424d 100644
--- a/frontend/components/dashboard/scan-terminal/AiCityTemperatureChart.tsx
+++ b/frontend/components/dashboard/scan-terminal/AiCityTemperatureChart.tsx
@@ -192,12 +192,12 @@ export function AiCityTemperatureChart({ detail }: { detail: CityDetail }) {
             grid: { color: "rgba(159, 178, 199, 0.08)" },
             ticks: {
               callback: (_value, index) =>
-                typeof index === "number" && index % 4 === 0
+                typeof index === "number" && index % 3 === 0
                   ? chartData.times[index]
                   : "",
               color: "#6B7A90",
               font: { size: 10 },
-              maxTicksLimit: 6,
+              maxTicksLimit: 8,
               maxRotation: 0,
             },
           },