重构城市决策卡 hero 布局:去除 sticky 固定效果,右侧改为三指标并列对比

将 scan-ai-city-hero 从"左重右轻"改为左右均衡布局,右侧从单一预计高温数字
替换为当前温度/预计最高温/峰值时间三列并排指标卡,中间列高亮为主指标。
移除冗余的 pills 行和隐藏的 mobile-priority div,新鲜度条改为水平单行。
同步更新亮色主题 CSS 新增 metrics 样式。修复 fallback 模块未使用变量。

Constraint: dark/light 双主题完整覆盖
Scope-risk: hero 高度缩减约 30%,需确认移动端 MobileDecisionCard 不受影响
This commit is contained in:
2569718930@qq.com
2026-05-06 17:57:40 +08:00
parent 227fe7906c
commit 2f73828d4d
5 changed files with 112 additions and 70 deletions
@@ -59,32 +59,12 @@ export function CityCardHeader({
}) {
return (
<header className="scan-ai-city-hero">
<div>
<div className="scan-ai-city-hero-left">
<span className="scan-ai-city-kicker">
{isEn ? "Deep analysis" : "城市深度分析"}
</span>
<h3>{displayName}</h3>
<div className="scan-ai-city-mobile-priority" aria-label={isEn ? "Key city decision metrics" : "城市决策重点"}>
<span>
<small>{isEn ? "Observed" : "当前温度"}</small>
<b>{currentTempText}</b>
</span>
<span>
<small>{isEn ? "Expected high" : "预测高点"}</small>
<b>{expectedHighText}</b>
</span>
<span>
<small>{isEn ? "Peak" : "峰值时间"}</small>
<b>{peakWindow}</b>
</span>
</div>
<CityStatusTags tags={statusTags} />
<div className="scan-ai-city-pills">
<span>{detailLocalTime || rowLocalTime || "--"}</span>
<span>DEB {debText}</span>
<span>{isEn ? "Model" : "模型"} {modelRange}</span>
<span>{isEn ? "Peak" : "峰值"} {peakWindow}</span>
</div>
<DataFreshnessBar
aiStatusLabel={aiStatusLabel}
aiStatusTone={aiStatusTone}
@@ -94,8 +74,20 @@ export function CityCardHeader({
/>
</div>
<div className="scan-ai-city-hero-side">
<span>{isEn ? "Expected high" : "预计最高温"}</span>
<strong>{expectedHighText}</strong>
<div className="scan-ai-city-metrics">
<span>
<small>{isEn ? "Observed" : "当前温度"}</small>
<b>{currentTempText}</b>
</span>
<span className="primary">
<small>{isEn ? "Expected high" : "预计最高温"}</small>
<b>{expectedHighText}</b>
</span>
<span>
<small>{isEn ? "Peak" : "峰值时间"}</small>
<b>{peakWindow}</b>
</span>
</div>
<div className="scan-ai-city-actions">
<button
type="button"