update pay ui

2025-12-03 15:19:23 +08:00
parent ea1adcb2ca
commit c136c2aed8
3 changed files with 212 additions and 37 deletions
--- a/src/components/StockChart/KLineChartModal.tsx
+++ b/src/components/StockChart/KLineChartModal.tsx
@@ -1,9 +1,9 @@
 // src/components/StockChart/KLineChartModal.tsx - K线图弹窗组件
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import * as echarts from 'echarts';
 import dayjs from 'dayjs';
-import { klineDataCache, getCacheKey, fetchKlineData } from '@views/Community/components/StockDetailPanel/utils/klineDataCache';
+import { stockService } from '@services/eventService';

 /**
 * 股票信息
@@ -41,6 +41,31 @@ interface KLineDataPoint {
  volume: number;
 }

+/**
+ * 批量K线API响应
+ */
+interface BatchKlineResponse {
+  success: boolean;
+  data: {
+    [stockCode: string]: {
+      code: string;
+      name: string;
+      data: KLineDataPoint[];
+      trade_date: string;
+      type: string;
+      earliest_date?: string;
+    };
+  };
+  has_more: boolean;
+  query_start_date?: string;
+  query_end_date?: string;
+}
+
+// 每次加载的天数
+const DAYS_PER_LOAD = 60;
+// 最大加载天数（一年）
+const MAX_DAYS = 365;
+
 const KLineChartModal: React.FC<KLineChartModalProps> = ({
  isOpen,
  onClose,
@@ -51,8 +76,12 @@ const KLineChartModal: React.FC<KLineChartModalProps> = ({
  const chartRef = useRef<HTMLDivElement>(null);
  const chartInstance = useRef<echarts.ECharts | null>(null);
  const [loading, setLoading] = useState(false);
+  const [loadingMore, setLoadingMore] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [data, setData] = useState<KLineDataPoint[]>([]);
+  const [hasMore, setHasMore] = useState(true);
+  const [earliestDate, setEarliestDate] = useState<string | null>(null);
+  const [totalDaysLoaded, setTotalDaysLoaded] = useState(0);

  // 调试日志
  console.log('[KLineChartModal] 渲染状态:', {
@@ -61,48 +90,102 @@ const KLineChartModal: React.FC<KLineChartModalProps> = ({
    eventTime,
    dataLength: data.length,
    loading,
-    error
+    loadingMore,
+    hasMore,
+    earliestDate
  });

-  // 加载K线数据（优先使用缓存）
-  const loadData = async () => {
+  // 加载更多历史数据
+  const loadMoreData = useCallback(async () => {
+    if (!stock?.stock_code || !hasMore || loadingMore || !earliestDate) return;
+
+    console.log('[KLineChartModal] 加载更多历史数据, earliestDate:', earliestDate);
+    setLoadingMore(true);
+
+    try {
+      const stableEventTime = eventTime ? dayjs(eventTime).format('YYYY-MM-DD HH:mm') : '';
+
+      // 请求更早的数据，end_date 设置为当前最早日期的前一天
+      const endDate = dayjs(earliestDate).subtract(1, 'day').format('YYYY-MM-DD');
+
+      const response = await stockService.getBatchKlineData(
+        [stock.stock_code],
+        'daily',
+        stableEventTime,
+        { days_before: DAYS_PER_LOAD, end_date: endDate }
+      ) as BatchKlineResponse;
+
+      if (response?.success && response.data) {
+        const stockData = response.data[stock.stock_code];
+        const newData = stockData?.data || [];
+
+        if (newData.length > 0) {
+          // 将新数据添加到现有数据的前面
+          setData(prevData => [...newData, ...prevData]);
+          setEarliestDate(newData[0].time);
+          setTotalDaysLoaded(prev => prev + DAYS_PER_LOAD);
+          console.log('[KLineChartModal] 加载了更多数据:', newData.length, '条');
+        }
+
+        // 检查是否还有更多数据
+        const noMoreData = !response.has_more || totalDaysLoaded + DAYS_PER_LOAD >= MAX_DAYS || newData.length === 0;
+        setHasMore(!noMoreData);
+      }
+    } catch (err) {
+      console.error('[KLineChartModal] 加载更多数据失败:', err);
+    } finally {
+      setLoadingMore(false);
+    }
+  }, [stock?.stock_code, hasMore, loadingMore, earliestDate, eventTime, totalDaysLoaded]);
+
+  // 初始加载K线数据
+  const loadData = useCallback(async () => {
    if (!stock?.stock_code) return;

    setLoading(true);
    setError(null);
+    setData([]);
+    setHasMore(true);
+    setEarliestDate(null);
+    setTotalDaysLoaded(0);

    try {
-      // 标准化事件时间
      const stableEventTime = eventTime ? dayjs(eventTime).format('YYYY-MM-DD HH:mm') : '';

-      // 先检查缓存
-      const cacheKey = getCacheKey(stock.stock_code, stableEventTime, 'daily');
-      const cachedData = klineDataCache.get(cacheKey);
+      // 使用新的带分页参数的接口
+      const response = await stockService.getBatchKlineData(
+        [stock.stock_code],
+        'daily',
+        stableEventTime,
+        { days_before: DAYS_PER_LOAD, end_date: '' }
+      ) as BatchKlineResponse;

-      if (cachedData && cachedData.length > 0) {
-        console.log('[KLineChartModal] 使用缓存数据, 数据条数:', cachedData.length);
-        setData(cachedData);
-        setLoading(false);
-        return;
+      if (response?.success && response.data) {
+        const stockData = response.data[stock.stock_code];
+        const klineData = stockData?.data || [];
+
+        if (klineData.length === 0) {
+          throw new Error('暂无K线数据');
+        }
+
+        console.log('[KLineChartModal] 初始数据条数:', klineData.length);
+        setData(klineData);
+        setEarliestDate(klineData[0]?.time || null);
+        setTotalDaysLoaded(DAYS_PER_LOAD);
+        setHasMore(response.has_more !== false);
+      } else {
+        throw new Error('数据加载失败');
      }
-
-      // 缓存没有则请求（会自动存入缓存）
-      console.log('[KLineChartModal] 缓存未命中，发起请求');
-      const result = await fetchKlineData(stock.stock_code, stableEventTime, 'daily');
-
-      if (!result || result.length === 0) {
-        throw new Error('暂无K线数据');
-      }
-
-      console.log('[KLineChartModal] 数据条数:', result.length);
-      setData(result);
    } catch (err) {
      const errorMsg = err instanceof Error ? err.message : '数据加载失败';
      setError(errorMsg);
    } finally {
      setLoading(false);
    }
-  };
+  }, [stock?.stock_code, eventTime]);
+
+  // 用于防抖的 ref
+  const loadMoreDebounceRef = useRef<NodeJS.Timeout | null>(null);

  // 初始化图表
  useEffect(() => {
@@ -135,6 +218,9 @@ const KLineChartModal: React.FC<KLineChartModalProps> = ({

    return () => {
      clearTimeout(timer);
+      if (loadMoreDebounceRef.current) {
+        clearTimeout(loadMoreDebounceRef.current);
+      }
      if (chartInstance.current) {
        chartInstance.current.dispose();
        chartInstance.current = null;
@@ -142,6 +228,35 @@ const KLineChartModal: React.FC<KLineChartModalProps> = ({
    };
  }, [isOpen]);

+  // 监听 dataZoom 事件，当滑到左边界时加载更多数据
+  useEffect(() => {
+    if (!chartInstance.current || !hasMore || loadingMore) return;
+
+    const handleDataZoom = (params: any) => {
+      // 获取当前 dataZoom 的 start 值
+      const start = params.start ?? params.batch?.[0]?.start ?? 0;
+
+      // 当 start 接近 0（左边界）时，触发加载更多
+      if (start <= 5 && hasMore && !loadingMore) {
+        console.log('[KLineChartModal] 检测到滑动到左边界，准备加载更多数据');
+
+        // 防抖处理
+        if (loadMoreDebounceRef.current) {
+          clearTimeout(loadMoreDebounceRef.current);
+        }
+        loadMoreDebounceRef.current = setTimeout(() => {
+          loadMoreData();
+        }, 300);
+      }
+    };
+
+    chartInstance.current.on('datazoom', handleDataZoom);
+
+    return () => {
+      chartInstance.current?.off('datazoom', handleDataZoom);
+    };
+  }, [hasMore, loadingMore, loadMoreData]);
+
  // 更新图表数据
  useEffect(() => {
    if (data.length === 0) {
@@ -515,7 +630,22 @@ const KLineChartModal: React.FC<KLineChartModalProps> = ({
              </span>
              {data.length > 0 && (
                <span style={{ fontSize: '12px', color: '#666', fontStyle: 'italic' }}>
-                  共{data.length}个交易日（最多1年）
+                  共{data.length}个交易日
+                  {hasMore ? '（向左滑动加载更多）' : '（已加载全部）'}
+                </span>
+              )}
+              {loadingMore && (
+                <span style={{ fontSize: '12px', color: '#3182ce', display: 'flex', alignItems: 'center', gap: '4px' }}>
+                  <span style={{
+                    width: '12px',
+                    height: '12px',
+                    border: '2px solid #404040',
+                    borderTop: '2px solid #3182ce',
+                    borderRadius: '50%',
+                    animation: 'spin 1s linear infinite',
+                    display: 'inline-block'
+                  }} />
+                  加载更多...
                </span>
              )}
            </div>