perf(Calendar): FullCalendar 懒加载与代码分割优化

- HeroPanel: 使用 React.lazy + Suspense 懒加载 FullCalendarPro
- craco.config: 添加 @fullcalendar 独立分包配置(~15KB gzip)
- event mock: 生成连续概念数据(2-4天同概念)便于测试跨天效果
- LimitAnalyse: 文案优化(高潮→高涨)
- ForceGraphView: 层级图优化

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2026-01-09 13:03:43 +08:00
parent b2160347db
commit 9be87ad385
7 changed files with 75 additions and 34 deletions

View File

@@ -2,7 +2,7 @@
// 综合日历面板:融合涨停分析 + 投资日历
// 点击日期弹出详情弹窗TAB切换历史涨停/未来事件)
import React, { useEffect, useState, useCallback, useMemo, memo } from 'react';
import React, { useEffect, useState, useCallback, useMemo, memo, lazy, Suspense } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { loadWatchlist, toggleWatchlist } from '@store/slices/stockSlice';
import {
@@ -56,7 +56,10 @@ import { getApiBase } from '@utils/apiConfig';
import ReactMarkdown from 'react-markdown';
import dayjs from 'dayjs';
import KLineChartModal from '@components/StockChart/KLineChartModal';
import { FullCalendarPro } from '@components/Calendar';
// 懒加载 FullCalendar约 60KB gzip延迟加载提升首屏性能
const FullCalendarPro = lazy(() =>
import('@components/Calendar').then(module => ({ default: module.FullCalendarPro }))
);
import ThemeCometChart from './ThemeCometChart';
import EventDailyStats from './EventDailyStats';
@@ -2477,14 +2480,23 @@ const CombinedCalendar = () => {
backgroundSize="200% 100%"
/>
{/* FullCalendar Pro - 炫酷跨天事件条日历 */}
<FullCalendarPro
data={calendarData}
currentMonth={currentMonth}
onDateClick={handleDateClick}
onMonthChange={handleMonthChange}
height="650px"
/>
{/* FullCalendar Pro - 炫酷跨天事件条日历(懒加载) */}
<Suspense fallback={
<Center h="650px">
<VStack spacing={4}>
<Spinner size="xl" color="gold" thickness="3px" />
<Text color="whiteAlpha.600" fontSize="sm">加载日历组件...</Text>
</VStack>
</Center>
}>
<FullCalendarPro
data={calendarData}
currentMonth={currentMonth}
onDateClick={handleDateClick}
onMonthChange={handleMonthChange}
height="650px"
/>
</Suspense>
{/* 图例说明 */}
<HStack spacing={4} mt={4} justify="center" flexWrap="wrap">