重构城市决策卡 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:
@@ -399,14 +399,20 @@
|
||||
.root :global(.scan-ai-city-hero) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 18px;
|
||||
padding: 22px;
|
||||
align-items: flex-start;
|
||||
gap: 20px;
|
||||
padding: 18px 22px;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(77, 163, 255, 0.11), rgba(34, 197, 94, 0.03)),
|
||||
#111a2e;
|
||||
border-bottom: 1px solid rgba(159, 178, 199, 0.12);
|
||||
}
|
||||
|
||||
.root :global(.scan-ai-city-hero-left) {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.root :global(.scan-ai-city-kicker) {
|
||||
color: #4da3ff;
|
||||
font-size: 12px;
|
||||
@@ -414,10 +420,10 @@
|
||||
}
|
||||
|
||||
.root :global(.scan-ai-city-hero h3) {
|
||||
margin: 8px 0 12px;
|
||||
margin: 4px 0 8px;
|
||||
color: #e6edf3;
|
||||
font-size: 28px;
|
||||
line-height: 1.1;
|
||||
font-size: 22px;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.root :global(.scan-ai-city-mobile-priority) {
|
||||
@@ -487,32 +493,33 @@
|
||||
}
|
||||
|
||||
.root :global(.scan-ai-city-freshness) {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 6px;
|
||||
max-width: 620px;
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 4px 6px;
|
||||
margin-top: 6px;
|
||||
color: #9fb2c7;
|
||||
font-size: 11px;
|
||||
font-weight: 760;
|
||||
}
|
||||
|
||||
.root :global(.scan-ai-city-freshness strong) {
|
||||
grid-column: 1 / -1;
|
||||
color: #d8e7f8;
|
||||
font-size: 11px;
|
||||
font-weight: 900;
|
||||
color: #7d92b2;
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.root :global(.scan-ai-city-freshness span) {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
border-radius: 8px;
|
||||
background: rgba(148, 163, 184, 0.08);
|
||||
padding: 4px 7px;
|
||||
border-radius: 5px;
|
||||
background: rgba(148, 163, 184, 0.06);
|
||||
padding: 2px 6px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.root :global(.scan-ai-city-freshness b) {
|
||||
@@ -546,31 +553,58 @@
|
||||
}
|
||||
|
||||
.root :global(.scan-ai-city-hero-side) {
|
||||
min-width: 180px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.root :global(.scan-ai-city-metrics) {
|
||||
display: grid;
|
||||
justify-items: end;
|
||||
align-content: start;
|
||||
gap: 6px;
|
||||
text-align: right;
|
||||
grid-template-columns: repeat(3, auto);
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.root :global(.scan-ai-city-hero-side > span) {
|
||||
color: #9fb2c7;
|
||||
font-size: 12px;
|
||||
.root :global(.scan-ai-city-metrics > span) {
|
||||
display: grid;
|
||||
gap: 3px;
|
||||
min-width: 88px;
|
||||
text-align: center;
|
||||
padding: 8px 14px;
|
||||
border: 1px solid rgba(159, 178, 199, 0.12);
|
||||
border-radius: 11px;
|
||||
background: rgba(11, 18, 32, 0.42);
|
||||
}
|
||||
|
||||
.root :global(.scan-ai-city-metrics > span.primary) {
|
||||
border-color: rgba(77, 163, 255, 0.28);
|
||||
background: rgba(77, 163, 255, 0.09);
|
||||
}
|
||||
|
||||
.root :global(.scan-ai-city-metrics small) {
|
||||
color: #6b7a90;
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.02em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.root :global(.scan-ai-city-hero-side > strong) {
|
||||
.root :global(.scan-ai-city-metrics b) {
|
||||
color: #e6edf3;
|
||||
font-size: 30px;
|
||||
line-height: 1;
|
||||
font-size: 20px;
|
||||
font-weight: 900;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.root :global(.scan-ai-city-metrics > span.primary b) {
|
||||
color: #9ecbff;
|
||||
}
|
||||
|
||||
.root :global(.scan-ai-city-actions) {
|
||||
display: inline-flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.root :global(.scan-ai-city-icon-button),
|
||||
|
||||
@@ -446,14 +446,28 @@
|
||||
.root :global(.scan-terminal.light .scan-ai-decision-metrics span),
|
||||
.root :global(.scan-terminal.light .scan-ai-market-bucket),
|
||||
.root :global(.scan-terminal.light .scan-ai-city-pills span),
|
||||
.root :global(.scan-terminal.light .scan-ai-city-freshness span) {
|
||||
.root :global(.scan-terminal.light .scan-ai-city-freshness span),
|
||||
.root :global(.scan-terminal.light .scan-ai-city-metrics > span) {
|
||||
background: #eef2f7;
|
||||
border-color: #e2e8f0;
|
||||
}
|
||||
|
||||
.root :global(.scan-terminal.light .scan-ai-city-metrics > span.primary) {
|
||||
background: #dbeafe;
|
||||
border-color: rgba(59, 130, 246, 0.28);
|
||||
}
|
||||
|
||||
.root :global(.scan-terminal.light .scan-ai-city-metrics > span.primary b) {
|
||||
color: #1d4ed8;
|
||||
}
|
||||
|
||||
.root :global(.scan-terminal.light .scan-ai-city-metrics small) {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.root :global(.scan-terminal.light .scan-ai-workspace-head strong),
|
||||
.root :global(.scan-terminal.light .scan-ai-city-hero h3),
|
||||
.root :global(.scan-terminal.light .scan-ai-city-hero-side > strong),
|
||||
.root :global(.scan-terminal.light .scan-ai-city-metrics b),
|
||||
.root :global(.scan-terminal.light .scan-ai-decision-band strong),
|
||||
.root :global(.scan-terminal.light .scan-ai-decision-metrics b),
|
||||
.root :global(.scan-terminal.light .scan-ai-market-bucket strong),
|
||||
@@ -770,12 +784,30 @@
|
||||
.root:global(.light) :global(.scan-terminal.light .scan-ai-decision-metrics span),
|
||||
.root:global(.light) :global(.scan-terminal.light .scan-ai-city-pills span),
|
||||
.root:global(.light) :global(.scan-terminal.light .scan-ai-city-freshness span),
|
||||
.root:global(.light) :global(.scan-terminal.light .scan-ai-city-metrics > span),
|
||||
.root:global(.light) :global(.scan-terminal.light .scan-mobile-decision-metrics span),
|
||||
.root:global(.light) :global(.scan-terminal.light .scan-mobile-decision-reason) {
|
||||
background: #eef7ff !important;
|
||||
border-color: rgba(37, 99, 235, 0.16) !important;
|
||||
}
|
||||
|
||||
.root:global(.light) :global(.scan-terminal.light .scan-ai-city-metrics > span.primary) {
|
||||
background: #dbeafe !important;
|
||||
border-color: rgba(59, 130, 246, 0.34) !important;
|
||||
}
|
||||
|
||||
.root:global(.light) :global(.scan-terminal.light .scan-ai-city-metrics b) {
|
||||
color: #0f172a !important;
|
||||
}
|
||||
|
||||
.root:global(.light) :global(.scan-terminal.light .scan-ai-city-metrics > span.primary b) {
|
||||
color: #1d4ed8 !important;
|
||||
}
|
||||
|
||||
.root:global(.light) :global(.scan-terminal.light .scan-ai-city-metrics small) {
|
||||
color: #64748b !important;
|
||||
}
|
||||
|
||||
.root:global(.light) :global(.scan-terminal.light .scan-ai-city-card p),
|
||||
.root:global(.light) :global(.scan-terminal.light .scan-ai-city-card li),
|
||||
.root:global(.light) :global(.scan-terminal.light .scan-ai-city-card small),
|
||||
|
||||
@@ -591,9 +591,3 @@
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.root :global(.scan-ai-city-card:not(.collapsed) .scan-ai-city-hero) {
|
||||
position: sticky;
|
||||
top: 54px;
|
||||
z-index: 6;
|
||||
border-radius: 18px 18px 0 0;
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -43,16 +43,6 @@ def _city_ai_model_cluster_note(ai_input: Dict[str, Any], *, locale: str) -> str
|
||||
(_safe_float(item.get("value")) for item in sources if isinstance(item, dict) and "DEB" in str(item.get("model") or "")),
|
||||
None,
|
||||
)
|
||||
non_deb_values = [
|
||||
_safe_float(item.get("value"))
|
||||
for item in sources
|
||||
if isinstance(item, dict) and _safe_float(item.get("value")) is not None and "DEB" not in str(item.get("model") or "")
|
||||
]
|
||||
cluster_median = (
|
||||
sorted(non_deb_values)[len(non_deb_values) // 2]
|
||||
if non_deb_values
|
||||
else (values[0] if values else None)
|
||||
)
|
||||
if locale == "en-US":
|
||||
if count <= 0:
|
||||
return f"No usable model cluster was returned; rely on {observation_label} only."
|
||||
|
||||
Reference in New Issue
Block a user