From 13a67cdc85ae7fd65ca226dad62ce0f3b936dff8 Mon Sep 17 00:00:00 2001
From: "2569718930@qq.com" <2569718930@qq.com>
Date: Sun, 10 May 2026 18:34:00 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=B8=A9=E5=BA=A6=E8=B5=B0?=
 =?UTF-8?q?=E5=8A=BF=E5=9B=BE=E4=B8=8D=E6=98=BE=E7=A4=BA=EF=BC=9A=E7=A7=BB?=
 =?UTF-8?q?=E9=99=A4=20IntersectionObserver=20=E5=BB=B6=E8=BF=9F=E6=B8=B2?=
 =?UTF-8?q?=E6=9F=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

问题：图表只在 IntersectionObserver 检测到视口交叉后才渲染
- 卡片折叠时图表区域永远不可见，IntersectionObserver 不触发
- 小屏幕/快速滚动时图表可能来不及渲染

修复：
- 移除 IntersectionObserver 懒加载逻辑
- 图表始终立即渲染（useChart 在挂载时初始化）
- Chart.js animation:false 确保快速渲染，无性能代价
- 清理未使用的 useState/useEffect 导入
---
 .../scan-terminal/AiCityTemperatureChart.tsx  | 39 +++----------------
 1 file changed, 6 insertions(+), 33 deletions(-)

diff --git a/frontend/components/dashboard/scan-terminal/AiCityTemperatureChart.tsx b/frontend/components/dashboard/scan-terminal/AiCityTemperatureChart.tsx
index 81d8424d..f67834fb 100644
--- a/frontend/components/dashboard/scan-terminal/AiCityTemperatureChart.tsx
+++ b/frontend/components/dashboard/scan-terminal/AiCityTemperatureChart.tsx
@@ -1,5 +1,5 @@
 import type { ChartConfiguration } from "chart.js";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useMemo, useRef } from "react";
 import { BarChart3 } from "lucide-react";
 import type { CityDetail } from "@/lib/dashboard-types";
 import { useChart } from "@/hooks/useChart";
@@ -64,15 +64,14 @@ function buildTemperatureChartSignature(detail: CityDetail) {
 export function AiCityTemperatureChart({ detail }: { detail: CityDetail }) {
   const { locale } = useI18n();
   const sectionRef = useRef<HTMLElement | null>(null);
-  const [shouldRenderChart, setShouldRenderChart] = useState(false);
   const cityKey = `${detail.name || detail.display_name || ""}:${detail.local_date || ""}`;
   const chartSignature = useMemo(
-    () => (shouldRenderChart ? buildTemperatureChartSignature(detail) : ""),
-    [detail, shouldRenderChart],
+    () => buildTemperatureChartSignature(detail),
+    [detail],
   );
   const computedChartData = useMemo(
-    () => (shouldRenderChart ? getTemperatureChartData(detail, locale) : null),
-    [chartSignature, detail, locale, shouldRenderChart],
+    () => getTemperatureChartData(detail, locale),
+    [chartSignature, detail, locale],
   );
   const lastChartDataRef = useRef<{
     cityKey: string;
@@ -233,26 +232,6 @@ export function AiCityTemperatureChart({ detail }: { detail: CityDetail }) {
     observationLabel,
   ]);
 
-  useEffect(() => {
-    if (shouldRenderChart) return;
-    if (typeof window === "undefined" || !("IntersectionObserver" in window)) {
-      setShouldRenderChart(true);
-      return;
-    }
-    const target = sectionRef.current;
-    if (!target) return;
-    const observer = new IntersectionObserver(
-      (entries) => {
-        if (!entries.some((entry) => entry.isIntersecting)) return;
-        setShouldRenderChart(true);
-        observer.disconnect();
-      },
-      { rootMargin: "220px 0px" },
-    );
-    observer.observe(target);
-    return () => observer.disconnect();
-  }, [shouldRenderChart]);
-
   return (
     <section className="scan-ai-city-section chart" ref={sectionRef}>
       <div className="scan-ai-city-section-title">
@@ -260,13 +239,7 @@ export function AiCityTemperatureChart({ detail }: { detail: CityDetail }) {
         <span>{locale === "en-US" ? "Evidence · intraday path" : "证据 · 今日日内路径"}</span>
       </div>
       <div className="scan-ai-city-chart">
-        {shouldRenderChart ? (
-          <canvas ref={canvasRef} />
-        ) : (
-          <div className="scan-ai-city-chart-placeholder">
-            {locale === "en-US" ? "Chart will render when visible" : "图表进入视口后再渲染"}
-          </div>
-        )}
+        <canvas ref={canvasRef} />
       </div>
       {chartData ? (
         <div className="scan-ai-city-chart-legend">