UX 审查 P2 修复:X轴标签密度、极端温度视觉强化

- 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
This commit is contained in:
2569718930@qq.com
2026-05-10 17:39:22 +08:00
parent d94476f943
commit 341825747f
3 changed files with 22 additions and 3 deletions
+11
View File
@@ -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)
══════════════════════════════════════════════════════════════ */
@@ -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>
@@ -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,
},
},