From 4f13faa3116788049c3048cf4d9c8ce73ea55452 Mon Sep 17 00:00:00 2001 From: "2569718930@qq.com" <2569718930@qq.com> Date: Thu, 14 May 2026 17:31:25 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=97=A5=E5=86=85=E6=B8=A9?= =?UTF-8?q?=E5=BA=A6=E6=9B=B2=E7=BA=BF=E5=9B=BE=E5=8A=A0=E8=BD=BD=E6=80=A7?= =?UTF-8?q?=E8=83=BD=E5=B9=B6=E4=BF=AE=E5=A4=8D=E5=9B=BE=E6=A0=87=E6=97=8B?= =?UTF-8?q?=E8=BD=AC=E5=8A=A8=E7=94=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - AiCityTemperatureChart：React.memo 包裹 + useMemo 依赖移除 detail 避免每帧重算 - ScanTerminalCard 等 9 个 CSS Module：animation: spin 改为 :global(spin) 修复 CSS Modules 作用域问题 --- frontend/components/account/AccountCenter.module.css | 2 +- frontend/components/dashboard/DashboardMap.module.css | 2 +- .../components/dashboard/DashboardModalGuide.module.css | 2 +- frontend/components/dashboard/DashboardShell.module.css | 2 +- .../components/dashboard/DetailPanelSections.module.css | 2 +- .../components/dashboard/FutureForecastModal.module.css | 2 +- .../components/dashboard/ScanTerminalCard.module.css | 2 +- .../components/dashboard/ScanTerminalList.module.css | 2 +- .../components/dashboard/ScanTerminalShell.module.css | 2 +- .../dashboard/scan-terminal/AiCityTemperatureChart.tsx | 9 +++++---- 10 files changed, 14 insertions(+), 13 deletions(-) diff --git a/frontend/components/account/AccountCenter.module.css b/frontend/components/account/AccountCenter.module.css index f8e6c2fe..4c1198d6 100644 --- a/frontend/components/account/AccountCenter.module.css +++ b/frontend/components/account/AccountCenter.module.css @@ -358,7 +358,7 @@ } .spin { - animation: spin 0.9s linear infinite; + animation: :global(spin) 0.9s linear infinite; } @media (max-width: 960px) { diff --git a/frontend/components/dashboard/DashboardMap.module.css b/frontend/components/dashboard/DashboardMap.module.css index 1a3bf206..dbc872ac 100644 --- a/frontend/components/dashboard/DashboardMap.module.css +++ b/frontend/components/dashboard/DashboardMap.module.css @@ -544,7 +544,7 @@ border: 2px solid rgba(34, 211, 238, 0.1); border-top-color: var(--accent-cyan); border-radius: 50%; - animation: spin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite; + animation: :global(spin) 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite; box-shadow: 0 0 15px rgba(34, 211, 238, 0.1); } diff --git a/frontend/components/dashboard/DashboardModalGuide.module.css b/frontend/components/dashboard/DashboardModalGuide.module.css index 685f95e9..b56247c6 100644 --- a/frontend/components/dashboard/DashboardModalGuide.module.css +++ b/frontend/components/dashboard/DashboardModalGuide.module.css @@ -86,7 +86,7 @@ } .root :global(.future-refresh-btn.spinning svg) { - animation: spin 1s linear infinite; + animation: :global(spin) 1s linear infinite; color: var(--accent-cyan); } diff --git a/frontend/components/dashboard/DashboardShell.module.css b/frontend/components/dashboard/DashboardShell.module.css index 6d477821..fddf7675 100644 --- a/frontend/components/dashboard/DashboardShell.module.css +++ b/frontend/components/dashboard/DashboardShell.module.css @@ -209,7 +209,7 @@ color: var(--accent-cyan); } .root :global(.refresh-btn.spinning) { - animation: spin 1s linear infinite; + animation: :global(spin) 1s linear infinite; } .root :global(.locale-switch) { diff --git a/frontend/components/dashboard/DetailPanelSections.module.css b/frontend/components/dashboard/DetailPanelSections.module.css index 366ed2f0..98525be7 100644 --- a/frontend/components/dashboard/DetailPanelSections.module.css +++ b/frontend/components/dashboard/DetailPanelSections.module.css @@ -111,7 +111,7 @@ border-radius: 999px; border: 2px solid rgba(34, 211, 238, 0.22); border-top-color: rgba(34, 211, 238, 0.92); - animation: spin 0.8s linear infinite; + animation: :global(spin) 0.8s linear infinite; } .root :global(.panel-meta) { diff --git a/frontend/components/dashboard/FutureForecastModal.module.css b/frontend/components/dashboard/FutureForecastModal.module.css index 442b79cd..7a96c715 100644 --- a/frontend/components/dashboard/FutureForecastModal.module.css +++ b/frontend/components/dashboard/FutureForecastModal.module.css @@ -56,7 +56,7 @@ border: 2px solid rgba(34, 211, 238, 0.18); border-top-color: #22d3ee; border-radius: 999px; - animation: spin 0.8s linear infinite; + animation: :global(spin) 0.8s linear infinite; } .root :global(.future-v2-sync-strip) { diff --git a/frontend/components/dashboard/ScanTerminalCard.module.css b/frontend/components/dashboard/ScanTerminalCard.module.css index 7abedcc0..b3fdf151 100644 --- a/frontend/components/dashboard/ScanTerminalCard.module.css +++ b/frontend/components/dashboard/ScanTerminalCard.module.css @@ -648,7 +648,7 @@ } .root :global(.scan-ai-city-icon-button .spin) { - animation: spin 1s linear infinite; + animation: :global(spin) 1s linear infinite; } .root :global(.scan-ai-city-collapse) { diff --git a/frontend/components/dashboard/ScanTerminalList.module.css b/frontend/components/dashboard/ScanTerminalList.module.css index 6918e25d..778fb5d5 100644 --- a/frontend/components/dashboard/ScanTerminalList.module.css +++ b/frontend/components/dashboard/ScanTerminalList.module.css @@ -95,7 +95,7 @@ } .root :global(.scan-status-chip .spin) { - animation: spin 1s linear infinite; + animation: :global(spin) 1s linear infinite; } .root :global(.scan-table-shell) { diff --git a/frontend/components/dashboard/ScanTerminalShell.module.css b/frontend/components/dashboard/ScanTerminalShell.module.css index 84d78fde..c8531bce 100644 --- a/frontend/components/dashboard/ScanTerminalShell.module.css +++ b/frontend/components/dashboard/ScanTerminalShell.module.css @@ -280,5 +280,5 @@ } .root :global(.scan-ghost-button .spin) { - animation: spin 1s linear infinite; + animation: :global(spin) 1s linear infinite; } diff --git a/frontend/components/dashboard/scan-terminal/AiCityTemperatureChart.tsx b/frontend/components/dashboard/scan-terminal/AiCityTemperatureChart.tsx index c43a8507..f8d8c88c 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 { useMemo, useRef } from "react"; +import { memo, useMemo, useRef } from "react"; import { BarChart3 } from "lucide-react"; import type { CityDetail } from "@/lib/dashboard-types"; import { useChart } from "@/hooks/useChart"; @@ -61,7 +61,7 @@ function buildTemperatureChartSignature(detail: CityDetail) { ].join("::"); } -export function AiCityTemperatureChart({ detail }: { detail: CityDetail }) { +export const AiCityTemperatureChart = memo(function AiCityTemperatureChart({ detail }: { detail: CityDetail }) { const { locale } = useI18n(); const sectionRef = useRef(null); const cityKey = `${detail.name || detail.display_name || ""}:${detail.local_date || ""}`; @@ -71,7 +71,8 @@ export function AiCityTemperatureChart({ detail }: { detail: CityDetail }) { ); const computedChartData = useMemo( () => getTemperatureChartData(detail, locale), - [chartSignature, detail, locale], + // eslint-disable-next-line react-hooks/exhaustive-deps + [chartSignature, locale], ); const lastChartDataRef = useRef<{ cityKey: string; @@ -235,5 +236,5 @@ export function AiCityTemperatureChart({ detail }: { detail: CityDetail }) { ) : null} ); -} +});