diff --git a/frontend/components/dashboard/Dashboard.module.css b/frontend/components/dashboard/Dashboard.module.css
index ec565686..09e48d14 100644
--- a/frontend/components/dashboard/Dashboard.module.css
+++ b/frontend/components/dashboard/Dashboard.module.css
@@ -3022,6 +3022,20 @@
line-height: 1.45;
}
+.root :global(.future-trend-summary-muted) {
+ color: var(--text-muted);
+ border: 1px dashed rgba(148, 163, 184, 0.18);
+ background: rgba(255, 255, 255, 0.018);
+}
+
+.root :global(.future-trend-card-empty) {
+ background: linear-gradient(
+ 180deg,
+ rgba(148, 163, 184, 0.05) 0%,
+ rgba(255, 255, 255, 0.02) 100%
+ );
+}
+
.root :global(.future-subsection-title) {
color: var(--text-primary);
font-size: 0.95rem;
diff --git a/frontend/components/dashboard/FutureForecastModal.tsx b/frontend/components/dashboard/FutureForecastModal.tsx
index 86b29523..8eb770f8 100644
--- a/frontend/components/dashboard/FutureForecastModal.tsx
+++ b/frontend/components/dashboard/FutureForecastModal.tsx
@@ -1600,17 +1600,22 @@ export function FutureForecastModal() {
))}
- {displayedUpperAirSummary ||
- displayedUpperAirMetrics.length > 0 ? (
- <>
-
- {locale === "en-US" ? "Upper-Air Structure" : "高空结构信号"}
+ <>
+
+ {locale === "en-US" ? "Upper-Air Structure" : "高空结构信号"}
+
+ {displayedUpperAirSummary ? (
+
+ {displayedUpperAirSummary}
- {displayedUpperAirSummary ? (
-
- {displayedUpperAirSummary}
-
- ) : null}
+ ) : (
+
+ {locale === "en-US"
+ ? "Upper-air structure is temporarily unavailable for this city. For now, lean on surface structure and TAF timing."
+ : "该城市当前暂无可用的高空结构数据,先以近地面结构和 TAF 时段作为主判断。"}
+
+ )}
+ {displayedUpperAirMetrics.length > 0 ? (
{displayedUpperAirMetrics.map((metric) => (
@@ -1653,8 +1658,22 @@ export function FutureForecastModal() {
))}
- >
- ) : null}
+ ) : (
+
+
+ {locale === "en-US" ? "Upper-air source" : "高空数据源"}
+
+
+ {locale === "en-US" ? "Not available" : "暂不可用"}
+
+
+ {locale === "en-US"
+ ? "No upper-air diagnostic feed is attached to this city right now."
+ : "当前该城市未接入可用的高空诊断源,所以这里先保留说明卡片。"}
+
+
+ )}
+ >
diff --git a/frontend/components/dashboard/WeatherAuraLayer.tsx b/frontend/components/dashboard/WeatherAuraLayer.tsx
index cd81c913..27e8dec1 100644
--- a/frontend/components/dashboard/WeatherAuraLayer.tsx
+++ b/frontend/components/dashboard/WeatherAuraLayer.tsx
@@ -67,13 +67,30 @@ export function WeatherAuraLayer() {
camera.position.z = 2;
const clock = new THREE.Clock();
+ const cleanupMaterials = new Set();
const particleGroups: Array<{
+ kind: "flow" | "rain" | "snow" | "fog" | "cloud";
geometry: THREE.BufferGeometry;
positions: Float32Array;
baseY: Float32Array;
drift: Float32Array;
phase: Float32Array;
+ material: THREE.Material;
+ mesh: THREE.Object3D;
}> = [];
+ const effectLights: THREE.Light[] = [];
+ const flashOverlay = new THREE.Mesh(
+ new THREE.PlaneGeometry(2.2, 2.2),
+ new THREE.MeshBasicMaterial({
+ color: new THREE.Color("#e0f2fe"),
+ transparent: true,
+ opacity: 0,
+ blending: THREE.AdditiveBlending,
+ }),
+ );
+ flashOverlay.position.z = -0.3;
+ scene.add(flashOverlay);
+ cleanupMaterials.add(flashOverlay.material as THREE.Material);
function createParticleField(
count: number,
@@ -127,12 +144,203 @@ export function WeatherAuraLayer() {
const points = new THREE.Points(geometry, material);
scene.add(points);
- particleGroups.push({ geometry, positions, baseY, drift, phase });
+ cleanupMaterials.add(material);
+ particleGroups.push({
+ geometry,
+ positions,
+ baseY,
+ drift,
+ phase,
+ kind: "flow",
+ material,
+ mesh: points,
+ });
+ }
+
+ function createRainField(count: number) {
+ const geometry = new THREE.BufferGeometry();
+ const positions = new Float32Array(count * 3);
+ const baseY = new Float32Array(count);
+ const drift = new Float32Array(count);
+ const phase = new Float32Array(count);
+
+ for (let index = 0; index < count; index += 1) {
+ const offset = index * 3;
+ positions[offset] = Math.random() * 2.8 - 1.4;
+ positions[offset + 1] = Math.random() * 2.2 - 1.1;
+ positions[offset + 2] = Math.random() * 0.4 - 0.2;
+ baseY[index] = positions[offset + 1];
+ drift[index] = (0.018 + Math.random() * 0.016) * aura.effectIntensity;
+ phase[index] = 0.004 + Math.random() * 0.004;
+ }
+
+ geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
+ const material = new THREE.PointsMaterial({
+ size: 0.018,
+ color: new THREE.Color("#7dd3fc"),
+ transparent: true,
+ opacity: 0.72,
+ depthWrite: false,
+ blending: THREE.AdditiveBlending,
+ });
+ const points = new THREE.Points(geometry, material);
+ scene.add(points);
+ cleanupMaterials.add(material);
+ particleGroups.push({
+ geometry,
+ positions,
+ baseY,
+ drift,
+ phase,
+ kind: "rain",
+ material,
+ mesh: points,
+ });
+ }
+
+ function createSnowField(count: number) {
+ const geometry = new THREE.BufferGeometry();
+ const positions = new Float32Array(count * 3);
+ const baseY = new Float32Array(count);
+ const drift = new Float32Array(count);
+ const phase = new Float32Array(count);
+
+ for (let index = 0; index < count; index += 1) {
+ const offset = index * 3;
+ positions[offset] = Math.random() * 2.8 - 1.4;
+ positions[offset + 1] = Math.random() * 2.1 - 1.05;
+ positions[offset + 2] = Math.random() * 0.35 - 0.18;
+ baseY[index] = positions[offset + 1];
+ drift[index] = (0.0045 + Math.random() * 0.0045) * aura.effectIntensity;
+ phase[index] = Math.random() * Math.PI * 2;
+ }
+
+ geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
+ const material = new THREE.PointsMaterial({
+ size: 0.024,
+ color: new THREE.Color("#f8fafc"),
+ transparent: true,
+ opacity: 0.85,
+ depthWrite: false,
+ blending: THREE.AdditiveBlending,
+ });
+ const points = new THREE.Points(geometry, material);
+ scene.add(points);
+ cleanupMaterials.add(material);
+ particleGroups.push({
+ geometry,
+ positions,
+ baseY,
+ drift,
+ phase,
+ kind: "snow",
+ material,
+ mesh: points,
+ });
+ }
+
+ function createFogField(count: number) {
+ const geometry = new THREE.BufferGeometry();
+ const positions = new Float32Array(count * 3);
+ const baseY = new Float32Array(count);
+ const drift = new Float32Array(count);
+ const phase = new Float32Array(count);
+
+ for (let index = 0; index < count; index += 1) {
+ const offset = index * 3;
+ positions[offset] = Math.random() * 2.6 - 1.3;
+ positions[offset + 1] = Math.random() * 0.9 - 0.45;
+ positions[offset + 2] = Math.random() * 0.45 - 0.2;
+ baseY[index] = positions[offset + 1];
+ drift[index] = (0.0014 + Math.random() * 0.001) * aura.effectIntensity;
+ phase[index] = Math.random() * Math.PI * 2;
+ }
+
+ geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
+ const material = new THREE.PointsMaterial({
+ size: 0.12,
+ color: new THREE.Color("#cbd5e1"),
+ transparent: true,
+ opacity: 0.18,
+ depthWrite: false,
+ blending: THREE.AdditiveBlending,
+ });
+ const points = new THREE.Points(geometry, material);
+ scene.add(points);
+ cleanupMaterials.add(material);
+ particleGroups.push({
+ geometry,
+ positions,
+ baseY,
+ drift,
+ phase,
+ kind: "fog",
+ material,
+ mesh: points,
+ });
+ }
+
+ function createCloudField(count: number) {
+ const geometry = new THREE.BufferGeometry();
+ const positions = new Float32Array(count * 3);
+ const baseY = new Float32Array(count);
+ const drift = new Float32Array(count);
+ const phase = new Float32Array(count);
+
+ for (let index = 0; index < count; index += 1) {
+ const offset = index * 3;
+ positions[offset] = Math.random() * 2.7 - 1.35;
+ positions[offset + 1] = Math.random() * 0.75 + 0.1;
+ positions[offset + 2] = Math.random() * 0.3 - 0.15;
+ baseY[index] = positions[offset + 1];
+ drift[index] = (0.0012 + Math.random() * 0.0009) * aura.effectIntensity;
+ phase[index] = Math.random() * Math.PI * 2;
+ }
+
+ geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
+ const material = new THREE.PointsMaterial({
+ size: 0.1,
+ color: new THREE.Color("#dbeafe"),
+ transparent: true,
+ opacity: 0.13,
+ depthWrite: false,
+ blending: THREE.AdditiveBlending,
+ });
+ const points = new THREE.Points(geometry, material);
+ scene.add(points);
+ cleanupMaterials.add(material);
+ particleGroups.push({
+ geometry,
+ positions,
+ baseY,
+ drift,
+ phase,
+ kind: "cloud",
+ material,
+ mesh: points,
+ });
}
createParticleField(90, 0.018, aura.particleOpacity * 0.9, -0.1);
createParticleField(60, 0.026, aura.particleOpacity * 0.65, 0.08);
+ if (aura.effect === "rain" || aura.effect === "storm") {
+ createRainField(aura.effect === "storm" ? 240 : 170);
+ } else if (aura.effect === "snow") {
+ createSnowField(150);
+ } else if (aura.effect === "fog") {
+ createFogField(90);
+ } else if (aura.effect === "cloud" || aura.effect === "wind") {
+ createCloudField(aura.effect === "wind" ? 80 : 54);
+ }
+
+ if (aura.effect === "storm") {
+ const flashLight = new THREE.PointLight(0xdbeafe, 0, 6, 2);
+ flashLight.position.set(0.2, 0.9, 1.1);
+ scene.add(flashLight);
+ effectLights.push(flashLight);
+ }
+
const resize = () => {
const width = host.clientWidth || window.innerWidth;
const height = host.clientHeight || window.innerHeight;
@@ -156,22 +364,73 @@ export function WeatherAuraLayer() {
for (const field of particleGroups) {
for (let index = 0; index < field.baseY.length; index += 1) {
const offset = index * 3;
- let nextX = field.positions[offset] + field.drift[index];
- if (nextX > 1.35) {
- nextX = -1.35;
- field.baseY[index] = Math.random() * 1.8 - 0.9;
+ if (field.kind === "flow") {
+ let nextX = field.positions[offset] + field.drift[index];
+ if (nextX > 1.35) {
+ nextX = -1.35;
+ field.baseY[index] = Math.random() * 1.8 - 0.9;
+ }
+ field.positions[offset] = nextX;
+ field.positions[offset + 1] =
+ field.baseY[index] +
+ Math.sin(elapsed * 0.45 + field.phase[index] + nextX * 2.4) *
+ 0.06 *
+ aura.intensity;
+ } else if (field.kind === "rain") {
+ let nextY = field.positions[offset + 1] - field.drift[index];
+ let nextX = field.positions[offset] + field.phase[index] * aura.drift;
+ if (nextY < -1.12 || nextX > 1.45) {
+ nextY = 1.15 + Math.random() * 0.25;
+ nextX = Math.random() * 2.9 - 1.45;
+ }
+ field.positions[offset] = nextX;
+ field.positions[offset + 1] = nextY;
+ } else if (field.kind === "snow") {
+ let nextY = field.positions[offset + 1] - field.drift[index];
+ let nextX =
+ field.positions[offset] +
+ Math.sin(elapsed * 0.9 + field.phase[index]) * 0.0024 * aura.effectIntensity;
+ if (nextY < -1.1) {
+ nextY = 1.12 + Math.random() * 0.2;
+ nextX = Math.random() * 2.8 - 1.4;
+ }
+ field.positions[offset] = nextX;
+ field.positions[offset + 1] = nextY;
+ } else if (field.kind === "fog" || field.kind === "cloud") {
+ let nextX = field.positions[offset] + field.drift[index];
+ if (nextX > 1.38) {
+ nextX = -1.38;
+ field.baseY[index] =
+ field.kind === "cloud"
+ ? Math.random() * 0.75 + 0.1
+ : Math.random() * 0.9 - 0.45;
+ }
+ field.positions[offset] = nextX;
+ field.positions[offset + 1] =
+ field.baseY[index] +
+ Math.sin(elapsed * 0.3 + field.phase[index]) *
+ (field.kind === "cloud" ? 0.03 : 0.05);
}
- field.positions[offset] = nextX;
- field.positions[offset + 1] =
- field.baseY[index] +
- Math.sin(elapsed * 0.45 + field.phase[index] + nextX * 2.4) *
- 0.06 *
- aura.intensity;
}
field.geometry.attributes.position.needsUpdate = true;
}
+ if (effectLights.length > 0) {
+ const flashPulse = Math.max(0, Math.sin(elapsed * 2.1) - 0.78) * 20;
+ for (const light of effectLights) {
+ if (light instanceof THREE.PointLight) {
+ light.intensity = flashPulse;
+ }
+ }
+ (flashOverlay.material as THREE.MeshBasicMaterial).opacity = Math.min(
+ 0.18,
+ flashPulse / 120,
+ );
+ } else {
+ (flashOverlay.material as THREE.MeshBasicMaterial).opacity = 0;
+ }
+
renderer.render(scene, camera);
};
@@ -187,6 +446,7 @@ export function WeatherAuraLayer() {
for (const field of particleGroups) {
field.geometry.dispose();
}
+ cleanupMaterials.forEach((material) => material.dispose());
renderer.dispose();
if (renderer.domElement.parentNode === host) {
host.removeChild(renderer.domElement);
@@ -199,6 +459,8 @@ export function WeatherAuraLayer() {
aura.primary,
aura.secondary,
aura.tertiary,
+ aura.effect,
+ aura.effectIntensity,
isDesktop,
prefersReducedMotion,
]);
@@ -212,6 +474,15 @@ export function WeatherAuraLayer() {
`radial-gradient(circle at 18% 22%, ${hexToRgba(aura.primary, 0.18 * aura.intensity)}, transparent 32%)`,
`radial-gradient(circle at 78% 20%, ${hexToRgba(aura.secondary, 0.14 * aura.intensity)}, transparent 34%)`,
`radial-gradient(circle at 52% 78%, ${hexToRgba(aura.tertiary, 0.12 * aura.intensity)}, transparent 38%)`,
+ aura.effect === "rain" || aura.effect === "storm"
+ ? `linear-gradient(180deg, ${hexToRgba("#67e8f9", 0.06 * aura.effectIntensity)}, transparent 45%)`
+ : aura.effect === "snow"
+ ? `linear-gradient(180deg, ${hexToRgba("#e2e8f0", 0.06 * aura.effectIntensity)}, transparent 45%)`
+ : aura.effect === "fog"
+ ? `radial-gradient(circle at 50% 56%, ${hexToRgba("#cbd5e1", 0.08 * aura.effectIntensity)}, transparent 60%)`
+ : aura.effect === "cloud"
+ ? `linear-gradient(180deg, ${hexToRgba("#dbeafe", 0.04 * aura.effectIntensity)}, transparent 40%)`
+ : "none",
].join(", "),
} as CSSProperties;
diff --git a/frontend/lib/weather-aura.ts b/frontend/lib/weather-aura.ts
index 867c46d4..12cddca6 100644
--- a/frontend/lib/weather-aura.ts
+++ b/frontend/lib/weather-aura.ts
@@ -7,9 +7,23 @@ export interface WeatherAuraProfile {
intensity: number;
drift: number;
particleOpacity: number;
+ effect: WeatherAuraEffect;
+ effectIntensity: number;
}
-const RISK_AURA: Record> =
+export type WeatherAuraEffect =
+ | "rain"
+ | "snow"
+ | "fog"
+ | "storm"
+ | "wind"
+ | "cloud"
+ | "clear";
+
+const RISK_AURA: Record<
+ string,
+ Omit
+> =
{
high: {
primary: "#ff7c2a",
@@ -56,11 +70,64 @@ export function getWeatherAuraProfile(
const intensity = clamp(0.7 + validTemp / 40, 0.72, 1.45);
const drift = clamp(0.45 + validTemp / 30, 0.55, 1.35);
const particleOpacity = clamp(base.particleOpacity + (intensity - 1) * 0.08, 0.22, 0.48);
+ const wxText = `${String(detail?.current?.wx_desc || "")} ${String(
+ detail?.current?.cloud_desc || "",
+ )}`.toUpperCase();
+ const windSpeed = Number(detail?.current?.wind_speed_kt);
+ const humidity = Number(detail?.current?.humidity);
+
+ let effect: WeatherAuraEffect = "clear";
+ if (
+ /(TS|VCTS|THUNDER|雷暴|LIGHTNING)/.test(wxText)
+ ) {
+ effect = "storm";
+ } else if (/(SN|SG|GS|ICE|SLEET|雪|霰)/.test(wxText)) {
+ effect = "snow";
+ } else if (/(RA|DZ|SHRA|SHOWER|RAIN|DRIZZLE|雨)/.test(wxText)) {
+ effect = "rain";
+ } else if (/(FG|BR|HZ|FU|MIST|FOG|雾|霾)/.test(wxText)) {
+ effect = "fog";
+ } else if (
+ /(BKN|OVC|SCT|FEW|CLOUD|云|阴)/.test(wxText)
+ ) {
+ effect = "cloud";
+ } else if (Number.isFinite(windSpeed) && windSpeed >= 18) {
+ effect = "wind";
+ }
+
+ const effectIntensity =
+ effect === "storm"
+ ? clamp(
+ 0.9 +
+ (Number.isFinite(windSpeed) ? windSpeed / 35 : 0) +
+ (Number.isFinite(humidity) ? humidity / 220 : 0),
+ 0.9,
+ 1.9,
+ )
+ : effect === "rain"
+ ? clamp(
+ 0.75 +
+ (Number.isFinite(humidity) ? humidity / 180 : 0) +
+ (Number.isFinite(windSpeed) ? windSpeed / 45 : 0),
+ 0.72,
+ 1.7,
+ )
+ : effect === "snow"
+ ? clamp(0.8 + (Number.isFinite(windSpeed) ? windSpeed / 50 : 0), 0.78, 1.4)
+ : effect === "fog"
+ ? clamp(0.78 + (Number.isFinite(humidity) ? humidity / 240 : 0), 0.75, 1.3)
+ : effect === "wind"
+ ? clamp(0.72 + (Number.isFinite(windSpeed) ? windSpeed / 40 : 0), 0.72, 1.5)
+ : effect === "cloud"
+ ? 0.82
+ : 0.72;
return {
...base,
intensity,
drift,
particleOpacity,
+ effect,
+ effectIntensity,
};
}