update pay ui

src/views/Community/components/DynamicNewsDetail/MiniKLineChart.js

@@ -15,9 +15,11 @@ import {
  * @param {string} stockCode - 股票代码
  * @param {string} eventTime - 事件时间（可选）
  * @param {Function} onClick - 点击回调（可选）
+ * @param {Array} preloadedData - 预加载的K线数据（可选，由父组件批量加载后传入）
+ * @param {boolean} loading - 外部加载状态（可选）
  * @returns {JSX.Element}
  */
-const MiniKLineChart = React.memo(function MiniKLineChart({ stockCode, eventTime, onClick }) {
+const MiniKLineChart = React.memo(function MiniKLineChart({ stockCode, eventTime, onClick, preloadedData, loading: externalLoading }) {
     const [data, setData] = useState([]);
     const [loading, setLoading] = useState(false);
     const mountedRef = useRef(true);
@@ -44,6 +46,21 @@ const MiniKLineChart = React.memo(function MiniKLineChart({ stockCode, eventTime
             return;
         }
 
+        // 优先使用预加载的数据（由父组件批量请求后传入）
+        if (preloadedData !== undefined) {
+            setData(preloadedData || []);
+            setLoading(false);
+            loadedRef.current = true;
+            dataFetchedRef.current = true;
+            return;
+        }
+
+        // 如果外部正在加载，显示loading状态，不发起单独请求
+        if (externalLoading) {
+            setLoading(true);
+            return;
+        }
+
         if (dataFetchedRef.current) {
             return;
         }
@@ -52,8 +69,8 @@ const MiniKLineChart = React.memo(function MiniKLineChart({ stockCode, eventTime
         const cacheKey = getCacheKey(stockCode, stableEventTime, 'daily');
         const cachedData = klineDataCache.get(cacheKey);
 
-        if (cachedData && cachedData.length > 0) {
-            setData(cachedData);
+        if (cachedData !== undefined) {
+            setData(cachedData || []);
             loadedRef.current = true;
             dataFetchedRef.current = true;
             return;
@@ -62,7 +79,7 @@ const MiniKLineChart = React.memo(function MiniKLineChart({ stockCode, eventTime
         dataFetchedRef.current = true;
         setLoading(true);
 
-        // 获取日K线数据
+        // 获取日K线数据（备用方案）
         fetchKlineData(stockCode, stableEventTime, 'daily')
             .then((result) => {
                 if (mountedRef.current) {
@@ -78,7 +95,7 @@ const MiniKLineChart = React.memo(function MiniKLineChart({ stockCode, eventTime
                     loadedRef.current = true;
                 }
             });
-    }, [stockCode, stableEventTime]);
+    }, [stockCode, stableEventTime, preloadedData, externalLoading]);
 
     const chartOption = useMemo(() => {
         // 提取K线数据 [open, close, low, high]
@@ -179,7 +196,9 @@ const MiniKLineChart = React.memo(function MiniKLineChart({ stockCode, eventTime
 }, (prevProps, nextProps) => {
     return prevProps.stockCode === nextProps.stockCode &&
            prevProps.eventTime === nextProps.eventTime &&
-           prevProps.onClick === nextProps.onClick;
+           prevProps.onClick === nextProps.onClick &&
+           prevProps.preloadedData === nextProps.preloadedData &&
+           prevProps.loading === nextProps.loading;
 });
 
 export default MiniKLineChart;