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:
@@ -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,
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user