vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 修复debugger报错

Browse Source
This commit is contained in:
zdl
2025-11-25 15:27:54 +08:00
parent a3cb5e928e
commit af54d8e070
9 changed files with 53 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/StockChart/KLineChartModal.tsx
View File

@@ -72,7 +72,7 @@ const KLineChartModal: React.FC<KLineChartModalProps> = ({
setError(null); setError(null);
try { try {
logger.debug('KLineChartModal', 'loadData', '开始加载K线数据', { logger.debug('KLineChartModal', '开始加载K线数据 (loadData)', {
stockCode: stock.stock_code, stockCode: stock.stock_code,
eventTime, eventTime,
}); });
@@ -91,7 +91,7 @@ const KLineChartModal: React.FC<KLineChartModalProps> = ({
console.log('[KLineChartModal] 数据条数:', response.data.length); console.log('[KLineChartModal] 数据条数:', response.data.length);
setData(response.data); setData(response.data);
logger.info('KLineChartModal', 'loadData', 'K线数据加载成功', { logger.info('KLineChartModal', 'K线数据加载成功 (loadData)', {
dataCount: response.data.length, dataCount: response.data.length,
}); });
} catch (err) { } catch (err) {

4
src/components/StockChart/StockChartKLineModal.tsx
View File

@@ -111,7 +111,7 @@ const StockChartKLineModal: React.FC<StockChartKLineModalProps> = ({
const newType = e.target.value as ChartType; const newType = e.target.value as ChartType;
setChartType(newType); setChartType(newType);
logger.debug('StockChartKLineModal', 'handleChartTypeChange', '切换图表类型', { logger.debug('StockChartKLineModal', '切换图表类型 (handleChartTypeChange)', {
newType, newType,
}); });
}, []); }, []);
@@ -131,7 +131,7 @@ const StockChartKLineModal: React.FC<StockChartKLineModalProps> = ({
// 然后创建新的指标 // 然后创建新的指标
createSubIndicators(chart, values); createSubIndicators(chart, values);
logger.debug('StockChartKLineModal', 'handleIndicatorChange', '切换副图指标', { logger.debug('StockChartKLineModal', '切换副图指标 (handleIndicatorChange)', {
indicators: values, indicators: values,
}); });
}, },

4
src/components/StockChart/TimelineChartModal.tsx
View File

@@ -76,7 +76,7 @@ const TimelineChartModal: React.FC<TimelineChartModalProps> = ({
setError(null); setError(null);
try { try {
logger.debug('TimelineChartModal', 'loadData', '开始加载分时图数据', { logger.debug('TimelineChartModal', '开始加载分时图数据 (loadData)', {
stockCode: stock.stock_code, stockCode: stock.stock_code,
eventTime, eventTime,
}); });
@@ -95,7 +95,7 @@ const TimelineChartModal: React.FC<TimelineChartModalProps> = ({
console.log('[TimelineChartModal] 数据条数:', response.data.length); console.log('[TimelineChartModal] 数据条数:', response.data.length);
setData(response.data); setData(response.data);
logger.info('TimelineChartModal', 'loadData', '分时图数据加载成功', { logger.info('TimelineChartModal', '分时图数据加载成功 (loadData)', {
dataCount: response.data.length, dataCount: response.data.length,
}); });
} catch (err) { } catch (err) {

14
src/components/StockChart/hooks/useEventMarker.ts
View File

@@ -77,7 +77,7 @@ export const useEventMarker = (
const createMarker = useCallback( const createMarker = useCallback(
(time: string, label: string, color?: string) => { (time: string, label: string, color?: string) => {
if (!chart || !data || data.length === 0) { if (!chart || !data || data.length === 0) {
logger.warn('useEventMarker', 'createMarker', '图表或数据未准备好', { logger.warn('useEventMarker', '图表或数据未准备好 (createMarker)', {
hasChart: !!chart, hasChart: !!chart,
dataLength: data?.length || 0, dataLength: data?.length || 0,
}); });
@@ -93,7 +93,7 @@ export const useEventMarker = (
const overlay = createEventMarkerOverlay(eventMarker, data); const overlay = createEventMarkerOverlay(eventMarker, data);
if (!overlay) { if (!overlay) {
logger.warn('useEventMarker', 'createMarker', 'Overlay 创建失败', { logger.warn('useEventMarker', 'Overlay 创建失败 (createMarker)', {
eventMarker, eventMarker,
}); });
return; return;
@@ -103,7 +103,7 @@ export const useEventMarker = (
const id = chart.createOverlay(overlay); const id = chart.createOverlay(overlay);
if (!id || (Array.isArray(id) && id.length === 0)) { if (!id || (Array.isArray(id) && id.length === 0)) {
logger.warn('useEventMarker', 'createMarker', '标记添加失败', { logger.warn('useEventMarker', '标记添加失败 (createMarker)', {
overlay, overlay,
}); });
return; return;
@@ -119,12 +119,12 @@ export const useEventMarker = (
const actualHighlightId = Array.isArray(highlightResult) ? highlightResult[0] : highlightResult; const actualHighlightId = Array.isArray(highlightResult) ? highlightResult[0] : highlightResult;
setHighlightId(actualHighlightId as string); setHighlightId(actualHighlightId as string);
logger.info('useEventMarker', 'createMarker', '事件高亮背景创建成功', { logger.info('useEventMarker', '事件高亮背景创建成功 (createMarker)', {
highlightId: actualHighlightId, highlightId: actualHighlightId,
}); });
} }
logger.info('useEventMarker', 'createMarker', '事件标记创建成功', { logger.info('useEventMarker', '事件标记创建成功 (createMarker)', {
markerId: actualId, markerId: actualId,
label, label,
time, time,
@@ -160,7 +160,7 @@ export const useEventMarker = (
setMarkerId(null); setMarkerId(null);
setHighlightId(null); setHighlightId(null);
logger.debug('useEventMarker', 'removeMarker', '移除事件标记和高亮', { logger.debug('useEventMarker', '移除事件标记和高亮 (removeMarker)', {
markerId, markerId,
highlightId, highlightId,
chartId: chart.id, chartId: chart.id,
@@ -187,7 +187,7 @@ export const useEventMarker = (
setMarkerId(null); setMarkerId(null);
setHighlightId(null); setHighlightId(null);
logger.debug('useEventMarker', 'removeAllMarkers', '移除所有事件标记和高亮', { logger.debug('useEventMarker', '移除所有事件标记和高亮 (removeAllMarkers)', {
chartId: chart.id, chartId: chart.id,
}); });
} catch (err) { } catch (err) {

18
src/components/StockChart/hooks/useKLineChart.ts
View File

@@ -78,12 +78,12 @@ export const useKLineChart = (
// 图表初始化函数 // 图表初始化函数
const initChart = (): boolean => { const initChart = (): boolean => {
if (!chartRef.current) { if (!chartRef.current) {
logger.warn('useKLineChart', 'init', '图表容器未挂载，将在 50ms 后重试', { containerId }); logger.warn('useKLineChart', '图表容器未挂载，将在 50ms 后重试 (init)', { containerId });
return false; return false;
} }
try { try {
logger.debug('useKLineChart', 'init', '开始初始化图表', { logger.debug('useKLineChart', '开始初始化图表 (init)', {
containerId, containerId,
height, height,
colorMode, colorMode,
@@ -116,17 +116,17 @@ export const useKLineChart = (
height: 100, // 固定高度 100px（约占整体的 20-25%） height: 100, // 固定高度 100px（约占整体的 20-25%）
}); });
logger.debug('useKLineChart', 'init', '成交量窗格创建成功', { logger.debug('useKLineChart', '成交量窗格创建成功 (init)', {
volumePaneId, volumePaneId,
}); });
} catch (err) { } catch (err) {
logger.warn('useKLineChart', 'init', '成交量窗格创建失败', { logger.warn('useKLineChart', '成交量窗格创建失败 (init)', {
error: err, error: err,
}); });
// 不阻塞主流程，继续执行 // 不阻塞主流程，继续执行
} }
logger.info('useKLineChart', 'init', '✅ 图表初始化成功', { logger.info('useKLineChart', '✅ 图表初始化成功 (init)', {
containerId, containerId,
chartId: chartInstance.id, chartId: chartInstance.id,
}); });
@@ -146,7 +146,7 @@ export const useKLineChart = (
// 成功，直接返回清理函数 // 成功，直接返回清理函数
return () => { return () => {
if (chartInstanceRef.current) { if (chartInstanceRef.current) {
logger.debug('useKLineChart', 'dispose', '销毁图表实例', { logger.debug('useKLineChart', '销毁图表实例 (dispose)', {
containerId, containerId,
chartId: chartInstanceRef.current.id, chartId: chartInstanceRef.current.id,
}); });
@@ -161,7 +161,7 @@ export const useKLineChart = (
// 失败则延迟重试（处理 Modal 动画延迟导致的 DOM 未挂载） // 失败则延迟重试（处理 Modal 动画延迟导致的 DOM 未挂载）
const timer = setTimeout(() => { const timer = setTimeout(() => {
logger.debug('useKLineChart', 'init', '执行延迟重试', { containerId }); logger.debug('useKLineChart', '执行延迟重试 (init)', { containerId });
initChart(); initChart();
}, 50); }, 50);
@@ -169,7 +169,7 @@ export const useKLineChart = (
return () => { return () => {
clearTimeout(timer); clearTimeout(timer);
if (chartInstanceRef.current) { if (chartInstanceRef.current) {
logger.debug('useKLineChart', 'dispose', '销毁图表实例', { logger.debug('useKLineChart', '销毁图表实例 (dispose)', {
containerId, containerId,
chartId: chartInstanceRef.current.id, chartId: chartInstanceRef.current.id,
}); });
@@ -196,7 +196,7 @@ export const useKLineChart = (
: getTheme(colorMode); : getTheme(colorMode);
chartInstanceRef.current.setStyles(newTheme); chartInstanceRef.current.setStyles(newTheme);
logger.debug('useKLineChart', 'updateTheme', '更新图表主题', { logger.debug('useKLineChart', '更新图表主题 (updateTheme)', {
colorMode, colorMode,
chartType, chartType,
chartId: chartInstanceRef.current.id, chartId: chartInstanceRef.current.id,

6
src/components/StockChart/hooks/useKLineData.ts
View File

@@ -78,7 +78,7 @@ export const useKLineData = (
*/ */
const loadData = useCallback(async () => { const loadData = useCallback(async () => {
if (!stockCode) { if (!stockCode) {
logger.warn('useKLineData', 'loadData', '股票代码为空', { chartType }); logger.warn('useKLineData', '股票代码为空 (loadData)', { chartType });
return; return;
} }
@@ -86,7 +86,7 @@ export const useKLineData = (
setError(null); setError(null);
try { try {
logger.debug('useKLineData', 'loadData', '开始加载数据', { logger.debug('useKLineData', '开始加载数据 (loadData)', {
stockCode, stockCode,
chartType, chartType,
eventTime, eventTime,
@@ -126,7 +126,7 @@ export const useKLineData = (
setData(processedData); setData(processedData);
logger.info('useKLineData', 'loadData', '数据加载成功', { logger.info('useKLineData', '数据加载成功 (loadData)', {
stockCode, stockCode,
chartType, chartType,
rawCount: rawDataList.length, rawCount: rawDataList.length,

24
src/components/StockChart/utils/chartUtils.ts
View File

@@ -50,7 +50,7 @@ export const createIndicator = (
isStack isStack
); );
logger.debug('chartUtils', 'createIndicator', '创建技术指标', { logger.debug('chartUtils', '创建技术指标 (createIndicator)', {
indicatorName, indicatorName,
params, params,
isStack, isStack,
@@ -70,7 +70,7 @@ export const createIndicator = (
export const removeIndicator = (chart: Chart, indicatorId?: string): void => { export const removeIndicator = (chart: Chart, indicatorId?: string): void => {
safeChartOperation('removeIndicator', () => { safeChartOperation('removeIndicator', () => {
chart.removeIndicator(indicatorId); chart.removeIndicator(indicatorId);
logger.debug('chartUtils', 'removeIndicator', '移除技术指标', { indicatorId }); logger.debug('chartUtils', '移除技术指标 (removeIndicator)', { indicatorId });
}); });
}; };
@@ -94,7 +94,7 @@ export const createSubIndicators = (
} }
}); });
logger.debug('chartUtils', 'createSubIndicators', '批量创建副图指标', { logger.debug('chartUtils', '批量创建副图指标 (createSubIndicators)', {
indicators, indicators,
createdIds: ids, createdIds: ids,
}); });
@@ -130,7 +130,7 @@ export const setChartZoom = (chart: Chart, zoom: number): void => {
}, },
}); });
logger.debug('chartUtils', 'setChartZoom', '设置图表缩放', { logger.debug('chartUtils', '设置图表缩放 (setChartZoom)', {
zoom, zoom,
newBarSpace, newBarSpace,
}); });
@@ -148,7 +148,7 @@ export const scrollToTimestamp = (chart: Chart, timestamp: number): void => {
// KLineChart 10.0: 使用 scrollToTimestamp 方法 // KLineChart 10.0: 使用 scrollToTimestamp 方法
chart.scrollToTimestamp(timestamp); chart.scrollToTimestamp(timestamp);
logger.debug('chartUtils', 'scrollToTimestamp', '滚动到指定时间', { timestamp }); logger.debug('chartUtils', '滚动到指定时间 (scrollToTimestamp)', { timestamp });
}); });
}; };
@@ -160,7 +160,7 @@ export const scrollToTimestamp = (chart: Chart, timestamp: number): void => {
export const resizeChart = (chart: Chart): void => { export const resizeChart = (chart: Chart): void => {
safeChartOperation('resizeChart', () => { safeChartOperation('resizeChart', () => {
chart.resize(); chart.resize();
logger.debug('chartUtils', 'resizeChart', '调整图表大小'); logger.debug('chartUtils', '调整图表大小 (resizeChart)');
}); });
}; };
@@ -194,7 +194,7 @@ export const getVisibleRange = (chart: Chart): { from: number; to: number } | nu
export const clearChartData = (chart: Chart): void => { export const clearChartData = (chart: Chart): void => {
safeChartOperation('clearChartData', () => { safeChartOperation('clearChartData', () => {
chart.resetData(); chart.resetData();
logger.debug('chartUtils', 'clearChartData', '清空图表数据'); logger.debug('chartUtils', '清空图表数据 (clearChartData)');
}); });
}; };
@@ -213,7 +213,7 @@ export const exportChartImage = (
// KLineChart 10.0: 使用 getConvertPictureUrl 方法 // KLineChart 10.0: 使用 getConvertPictureUrl 方法
const imageData = chart.getConvertPictureUrl(includeOverlay, 'png', '#ffffff'); const imageData = chart.getConvertPictureUrl(includeOverlay, 'png', '#ffffff');
logger.debug('chartUtils', 'exportChartImage', '导出图表图片', { logger.debug('chartUtils', '导出图表图片 (exportChartImage)', {
includeOverlay, includeOverlay,
hasData: !!imageData, hasData: !!imageData,
}); });
@@ -236,7 +236,7 @@ export const toggleCrosshair = (chart: Chart, show: boolean): void => {
}, },
}); });
logger.debug('chartUtils', 'toggleCrosshair', '切换十字光标', { show }); logger.debug('chartUtils', '切换十字光标 (toggleCrosshair)', { show });
}); });
}; };
@@ -254,7 +254,7 @@ export const toggleGrid = (chart: Chart, show: boolean): void => {
}, },
}); });
logger.debug('chartUtils', 'toggleGrid', '切换网格', { show }); logger.debug('chartUtils', '切换网格 (toggleGrid)', { show });
}); });
}; };
@@ -272,7 +272,7 @@ export const subscribeChartEvent = (
): void => { ): void => {
safeChartOperation(`subscribeChartEvent:${eventName}`, () => { safeChartOperation(`subscribeChartEvent:${eventName}`, () => {
chart.subscribeAction(eventName, handler); chart.subscribeAction(eventName, handler);
logger.debug('chartUtils', 'subscribeChartEvent', '订阅图表事件', { eventName }); logger.debug('chartUtils', '订阅图表事件 (subscribeChartEvent)', { eventName });
}); });
}; };
@@ -290,6 +290,6 @@ export const unsubscribeChartEvent = (
): void => { ): void => {
safeChartOperation(`unsubscribeChartEvent:${eventName}`, () => { safeChartOperation(`unsubscribeChartEvent:${eventName}`, () => {
chart.unsubscribeAction(eventName, handler); chart.unsubscribeAction(eventName, handler);
logger.debug('chartUtils', 'unsubscribeChartEvent', '取消订阅图表事件', { eventName }); logger.debug('chartUtils', '取消订阅图表事件 (unsubscribeChartEvent)', { eventName });
}); });
}; };

14
src/components/StockChart/utils/dataAdapter.ts
View File

@@ -22,7 +22,7 @@ export const convertToKLineData = (
eventTime?: string eventTime?: string
): KLineDataPoint[] => { ): KLineDataPoint[] => {
if (!rawData || !Array.isArray(rawData) || rawData.length === 0) { if (!rawData || !Array.isArray(rawData) || rawData.length === 0) {
logger.warn('dataAdapter', 'convertToKLineData', '原始数据为空', { chartType }); logger.warn('dataAdapter', '原始数据为空 (convertToKLineData)', { chartType });
return []; return [];
} }
@@ -90,7 +90,7 @@ const parseTimestamp = (
} }
// 默认返回当前时间（避免图表崩溃） // 默认返回当前时间（避免图表崩溃）
logger.warn('dataAdapter', 'parseTimestamp', '无法解析时间戳，使用当前时间', { item }); logger.warn('dataAdapter', '无法解析时间戳，使用当前时间 (parseTimestamp)', { item });
return Date.now(); return Date.now();
}; };
@@ -126,19 +126,19 @@ export const validateAndCleanData = (data: KLineDataPoint[]): KLineDataPoint[] =
return data.filter((item) => { return data.filter((item) => {
// 移除价格为 0 或负数的数据 // 移除价格为 0 或负数的数据
if (item.open <= 0 || item.high <= 0 || item.low <= 0 || item.close <= 0) { if (item.open <= 0 || item.high <= 0 || item.low <= 0 || item.close <= 0) {
logger.warn('dataAdapter', 'validateAndCleanData', '价格异常，已移除', { item }); logger.warn('dataAdapter', '价格异常，已移除 (validateAndCleanData)', { item });
return false; return false;
} }
// 移除 high < low 的数据（数据错误） // 移除 high < low 的数据（数据错误）
if (item.high < item.low) { if (item.high < item.low) {
logger.warn('dataAdapter', 'validateAndCleanData', '最高价 < 最低价，已移除', { item }); logger.warn('dataAdapter', '最高价 < 最低价，已移除 (validateAndCleanData)', { item });
return false; return false;
} }
// 移除成交量为负数的数据 // 移除成交量为负数的数据
if (item.volume < 0) { if (item.volume < 0) {
logger.warn('dataAdapter', 'validateAndCleanData', '成交量异常，已移除', { item }); logger.warn('dataAdapter', '成交量异常，已移除 (validateAndCleanData)', { item });
return false; return false;
} }
@@ -213,7 +213,7 @@ export const trimDataByEventTime = (
return item.timestamp >= startTime && item.timestamp <= endTime; return item.timestamp >= startTime && item.timestamp <= endTime;
}); });
logger.debug('dataAdapter', 'trimDataByEventTime', '数据时间范围裁剪完成', { logger.debug('dataAdapter', '数据时间范围裁剪完成 (trimDataByEventTime)', {
originalLength: data.length, originalLength: data.length,
trimmedLength: trimmedData.length, trimmedLength: trimmedData.length,
eventTime, eventTime,
@@ -260,7 +260,7 @@ export const processChartData = (
data = trimDataByEventTime(data, eventTime, chartType); data = trimDataByEventTime(data, eventTime, chartType);
} }
logger.debug('dataAdapter', 'processChartData', '数据处理完成', { logger.debug('dataAdapter', '数据处理完成 (processChartData)', {
rawLength: rawData.length, rawLength: rawData.length,
processedLength: data.length, processedLength: data.length,
chartType, chartType,

18
src/components/StockChart/utils/eventMarkerUtils.ts
View File

@@ -27,7 +27,7 @@ export const createEventMarkerOverlay = (
const closestPoint = findClosestDataPoint(data, marker.timestamp); const closestPoint = findClosestDataPoint(data, marker.timestamp);
if (!closestPoint) { if (!closestPoint) {
logger.warn('eventMarkerUtils', 'createEventMarkerOverlay', '未找到匹配的数据点', { logger.warn('eventMarkerUtils', '未找到匹配的数据点', {
markerId: marker.id, markerId: marker.id,
timestamp: marker.timestamp, timestamp: marker.timestamp,
}); });
@@ -77,7 +77,7 @@ export const createEventMarkerOverlay = (
}, },
}; };
logger.debug('eventMarkerUtils', 'createEventMarkerOverlay', '创建事件标记', { logger.debug('eventMarkerUtils', '创建事件标记', {
markerId: marker.id, markerId: marker.id,
timestamp: closestPoint.timestamp, timestamp: closestPoint.timestamp,
label: marker.label, label: marker.label,
@@ -108,7 +108,7 @@ export const createEventHighlightOverlay = (
const closestPoint = findClosestDataPoint(data, eventTimestamp); const closestPoint = findClosestDataPoint(data, eventTimestamp);
if (!closestPoint) { if (!closestPoint) {
logger.warn('eventMarkerUtils', 'createEventHighlightOverlay', '未找到匹配的数据点'); logger.warn('eventMarkerUtils', '未找到匹配的数据点');
return null; return null;
} }
@@ -135,7 +135,7 @@ export const createEventHighlightOverlay = (
}, },
}; };
logger.debug('eventMarkerUtils', 'createEventHighlightOverlay', '创建事件高亮覆盖层', { logger.debug('eventMarkerUtils', '创建事件高亮覆盖层', {
timestamp: closestPoint.timestamp, timestamp: closestPoint.timestamp,
eventTime, eventTime,
}); });
@@ -219,7 +219,7 @@ export const createEventMarkerOverlays = (
} }
}); });
logger.debug('eventMarkerUtils', 'createEventMarkerOverlays', '批量创建事件标记', { logger.debug('eventMarkerUtils', '批量创建事件标记', {
totalMarkers: markers.length, totalMarkers: markers.length,
createdOverlays: overlays.length, createdOverlays: overlays.length,
}); });
@@ -236,7 +236,7 @@ export const createEventMarkerOverlays = (
export const removeEventMarker = (chart: any, markerId: string): void => { export const removeEventMarker = (chart: any, markerId: string): void => {
try { try {
chart.removeOverlay(markerId); chart.removeOverlay(markerId);
logger.debug('eventMarkerUtils', 'removeEventMarker', '移除事件标记', { markerId }); logger.debug('eventMarkerUtils', '移除事件标记', { markerId });
} catch (error) { } catch (error) {
logger.error('eventMarkerUtils', 'removeEventMarker', error as Error, { markerId }); logger.error('eventMarkerUtils', 'removeEventMarker', error as Error, { markerId });
} }
@@ -251,7 +251,7 @@ export const removeAllEventMarkers = (chart: any): void => {
try { try {
// KLineChart 10.0 API: removeOverlay() 不传参数时移除所有 overlays // KLineChart 10.0 API: removeOverlay() 不传参数时移除所有 overlays
chart.removeOverlay(); chart.removeOverlay();
logger.debug('eventMarkerUtils', 'removeAllEventMarkers', '移除所有事件标记'); logger.debug('eventMarkerUtils', '移除所有事件标记');
} catch (error) { } catch (error) {
logger.error('eventMarkerUtils', 'removeAllEventMarkers', error as Error); logger.error('eventMarkerUtils', 'removeAllEventMarkers', error as Error);
} }
@@ -276,7 +276,7 @@ export const updateEventMarker = (
// 重新创建标记（KLineChart 10.0 不支持直接更新 overlay） // 重新创建标记（KLineChart 10.0 不支持直接更新 overlay）
// 注意：需要在调用方重新创建并添加 overlay // 注意：需要在调用方重新创建并添加 overlay
logger.debug('eventMarkerUtils', 'updateEventMarker', '更新事件标记', { logger.debug('eventMarkerUtils', '更新事件标记', {
markerId, markerId,
updates, updates,
}); });
@@ -309,7 +309,7 @@ export const highlightEventMarker = (
}, },
}); });
logger.debug('eventMarkerUtils', 'highlightEventMarker', '高亮事件标记', { logger.debug('eventMarkerUtils', '高亮事件标记', {
markerId, markerId,
highlight, highlight,
}); });