Merge branch 'feature_bugfix/251217_stock' of https://git.valuefrontier.cn/vf/vf_react into feature_bugfix/251217_stock
This commit is contained in:
@@ -1,94 +0,0 @@
|
||||
/*!
|
||||
FullCalendar v5.6.0
|
||||
Docs & License: https://fullcalendar.io/
|
||||
(c) 2020 Adam Shaw
|
||||
*/
|
||||
|
||||
// Creative Tim Changes
|
||||
|
||||
.fc-theme-standard .fc-scrollgrid,
|
||||
.fc-scrollgrid {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.fc-theme-standard td,
|
||||
.fc-theme-standard th {
|
||||
border-color: $gray-200;
|
||||
}
|
||||
|
||||
.fc-theme-standard thead tr th{
|
||||
border-right: none;
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.fc-theme-standard td{
|
||||
&:last-child{
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-theme-standard tr{
|
||||
&:last-child td{
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-h-event{
|
||||
border: none;
|
||||
}
|
||||
|
||||
.fc-daygrid-block-event .fc-event-time,
|
||||
.fc-daygrid-block-event .fc-event-title{
|
||||
font-weight: $font-weight-bold;
|
||||
padding: $fc-event-title-padding-y $fc-event-title-padding-x;
|
||||
}
|
||||
|
||||
.fc .fc-daygrid-body-natural .fc-daygrid-day-events{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.fc .fc-col-header-cell-cushion{
|
||||
font-size: $font-size-sm;
|
||||
font-weight: $font-weight-bold;
|
||||
color: $gray-500;
|
||||
}
|
||||
|
||||
.fc .fc-daygrid-day-number{
|
||||
color: $gray-700;
|
||||
font-size: $font-size-sm;
|
||||
font-weight: $font-weight-bold;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fc .fc-toolbar-title{
|
||||
font-size: $font-size-lg;
|
||||
}
|
||||
|
||||
.fc .fc-button{
|
||||
font-size: $font-size-sm;
|
||||
padding-top: $spacer*0.25;
|
||||
box-shadow: $btn-box-shadow;
|
||||
transition: $btn-transition;
|
||||
.fc-icon{
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.fc .fc-button-primary{
|
||||
background-color: $secondary;
|
||||
border-color: $secondary;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:not(:disabled):active,
|
||||
&:not(:disabled):active:focus{
|
||||
transform: $btn-hover-transform;
|
||||
box-shadow: $btn-hover-box-shadow;
|
||||
background-color: $secondary;
|
||||
border-color: $secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-event.fc-daygrid-event{
|
||||
border-radius: $fc-daygrid-event-border-radius;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -3,8 +3,6 @@
|
||||
@import "choices";
|
||||
@import "glidejs";
|
||||
@import "green-audio-player";
|
||||
@import "fullcalendar";
|
||||
@import "fullcalendar-extend";
|
||||
@import "datatable";
|
||||
@import "datatable-extend";
|
||||
@import "dragula";
|
||||
|
||||
@@ -19,6 +19,10 @@ import PropTypes from 'prop-types';
|
||||
let widgetInitialized = false;
|
||||
let idleCallbackId = null;
|
||||
|
||||
// ⚡ STOMP WebSocket 重连限制（最多重试 3 次）
|
||||
let stompRetryCount = 0;
|
||||
const MAX_STOMP_RETRIES = 3;
|
||||
|
||||
const BytedeskWidget = ({
|
||||
config,
|
||||
autoLoad = true,
|
||||
@@ -118,18 +122,79 @@ const BytedeskWidget = ({
|
||||
// 5 秒后停止监听（避免性能问题）
|
||||
setTimeout(() => observer.disconnect(), 5000);
|
||||
|
||||
// ⚡ 屏蔽 STOMP WebSocket 错误日志（不影响功能）
|
||||
// ⚡ 屏蔽 STOMP WebSocket 相关日志（控制台降噪）
|
||||
// STOMP 连接失败是因为后端服务配置问题，不影响客服功能（使用 HTTP 轮询降级）
|
||||
const isStompLog = (args) => {
|
||||
const msg = args.map(a => String(a)).join(' ');
|
||||
// 只屏蔽包含 /stomp 路径的日志，避免误屏蔽其他 WebSocket 日志
|
||||
return msg.includes('/stomp') || msg.includes('stomp onWebSocketError');
|
||||
};
|
||||
|
||||
// 屏蔽 console.error
|
||||
const originalConsoleError = console.error;
|
||||
console.error = function(...args) {
|
||||
const errorMsg = args.join(' ');
|
||||
if (errorMsg.includes('/stomp') ||
|
||||
errorMsg.includes('stomp onWebSocketError') ||
|
||||
(errorMsg.includes('WebSocket connection to') && errorMsg.includes('/stomp'))) {
|
||||
return;
|
||||
}
|
||||
if (isStompLog(args)) return;
|
||||
originalConsoleError.apply(console, args);
|
||||
};
|
||||
|
||||
// 屏蔽 console.warn
|
||||
const originalConsoleWarn = console.warn;
|
||||
console.warn = function(...args) {
|
||||
if (isStompLog(args)) return;
|
||||
originalConsoleWarn.apply(console, args);
|
||||
};
|
||||
|
||||
// 屏蔽 console.log（仅屏蔽 STOMP 相关）
|
||||
const originalConsoleLog = console.log;
|
||||
console.log = function(...args) {
|
||||
if (isStompLog(args)) return;
|
||||
originalConsoleLog.apply(console, args);
|
||||
};
|
||||
|
||||
// ⚡ 限制 STOMP WebSocket 重连次数（最多 3 次）
|
||||
// 通过代理 WebSocket 构造函数实现
|
||||
const OriginalWebSocket = window.WebSocket;
|
||||
const WebSocketProxy = function(url, protocols) {
|
||||
// 检查是否是 STOMP 连接
|
||||
if (url && url.includes('/stomp')) {
|
||||
stompRetryCount++;
|
||||
|
||||
// 超过最大重试次数，阻止连接
|
||||
if (stompRetryCount > MAX_STOMP_RETRIES) {
|
||||
// 返回一个假的 WebSocket 对象，不实际连接
|
||||
const fakeWs = Object.create(OriginalWebSocket.prototype);
|
||||
fakeWs.url = url;
|
||||
fakeWs.readyState = 3; // CLOSED
|
||||
fakeWs.send = () => {};
|
||||
fakeWs.close = () => {};
|
||||
fakeWs.addEventListener = () => {};
|
||||
fakeWs.removeEventListener = () => {};
|
||||
fakeWs.onopen = null;
|
||||
fakeWs.onclose = null;
|
||||
fakeWs.onerror = null;
|
||||
fakeWs.onmessage = null;
|
||||
// 异步触发 onerror 和 onclose
|
||||
setTimeout(() => {
|
||||
if (fakeWs.onerror) fakeWs.onerror(new Event('error'));
|
||||
if (fakeWs.onclose) fakeWs.onclose(new CloseEvent('close', { code: 1006 }));
|
||||
}, 0);
|
||||
return fakeWs;
|
||||
}
|
||||
}
|
||||
|
||||
// 正常创建 WebSocket
|
||||
return protocols
|
||||
? new OriginalWebSocket(url, protocols)
|
||||
: new OriginalWebSocket(url);
|
||||
};
|
||||
// 保留原始 WebSocket 的静态属性和原型链
|
||||
WebSocketProxy.prototype = OriginalWebSocket.prototype;
|
||||
WebSocketProxy.CONNECTING = OriginalWebSocket.CONNECTING;
|
||||
WebSocketProxy.OPEN = OriginalWebSocket.OPEN;
|
||||
WebSocketProxy.CLOSING = OriginalWebSocket.CLOSING;
|
||||
WebSocketProxy.CLOSED = OriginalWebSocket.CLOSED;
|
||||
window.WebSocket = WebSocketProxy;
|
||||
|
||||
if (onLoad) {
|
||||
onLoad(bytedesk);
|
||||
}
|
||||
|
||||
@@ -18,6 +18,7 @@ import { getImportanceConfig } from '@constants/importanceLevels';
|
||||
import { eventService } from '@services/eventService';
|
||||
import { useEventStocks } from '@components/Charts/Stock';
|
||||
import { toggleEventFollow, selectEventFollowStatus } from '@store/slices/communityDataSlice';
|
||||
import { selectSubscriptionInfo } from '@store/slices/subscriptionSlice';
|
||||
import { useAuth } from '@contexts/AuthContext';
|
||||
import EventHeaderInfo from './EventHeaderInfo';
|
||||
import CompactMetaBar from './CompactMetaBar';
|
||||
@@ -102,6 +103,10 @@ const DynamicNewsDetailPanel = ({ event, showHeader = true }) => {
|
||||
// 获取用户会员等级（修复：字段名从 subscription_tier 改为 subscription_type）
|
||||
const userTier = user?.subscription_type || 'free';
|
||||
|
||||
// 获取订阅信息，用于判断会员是否过期
|
||||
const subscriptionInfo = useSelector(selectSubscriptionInfo);
|
||||
const isSubscriptionExpired = subscriptionInfo.type !== 'free' && !subscriptionInfo.is_active;
|
||||
|
||||
// 从 Redux 读取关注状态
|
||||
const eventFollowStatus = useSelector(selectEventFollowStatus);
|
||||
const isFollowing = event?.id ? (eventFollowStatus[event.id]?.isFollowing || false) : false;
|
||||
@@ -111,12 +116,16 @@ const DynamicNewsDetailPanel = ({ event, showHeader = true }) => {
|
||||
const [fullEventDetail, setFullEventDetail] = useState(null);
|
||||
const [loadingDetail, setLoadingDetail] = useState(false);
|
||||
|
||||
// 权限判断函数
|
||||
// 权限判断函数 - 会员过期时视为无权限
|
||||
const hasAccess = useCallback((requiredTier) => {
|
||||
// 会员已过期，视为无权限
|
||||
if (isSubscriptionExpired) {
|
||||
return false;
|
||||
}
|
||||
const tierLevel = { free: 0, pro: 1, max: 2 };
|
||||
const result = tierLevel[userTier] >= tierLevel[requiredTier];
|
||||
return result;
|
||||
}, [userTier]);
|
||||
}, [userTier, isSubscriptionExpired]);
|
||||
|
||||
// 升级弹窗状态
|
||||
const [upgradeModal, setUpgradeModal] = useState({
|
||||
@@ -169,14 +178,14 @@ const DynamicNewsDetailPanel = ({ event, showHeader = true }) => {
|
||||
// 子区块折叠状态管理 - 使用 useReducer 整合
|
||||
const [sectionState, dispatchSection] = useReducer(sectionReducer, initialSectionState);
|
||||
|
||||
// 锁定点击处理 - 弹出升级弹窗
|
||||
// 锁定点击处理 - 弹出升级弹窗（会员过期时显示续费提示）
|
||||
const handleLockedClick = useCallback((featureName, requiredLevel) => {
|
||||
setUpgradeModal({
|
||||
isOpen: true,
|
||||
requiredLevel,
|
||||
featureName
|
||||
requiredLevel: isSubscriptionExpired ? subscriptionInfo.type : requiredLevel,
|
||||
featureName: isSubscriptionExpired ? `${featureName}（会员已过期，请续费）` : featureName
|
||||
});
|
||||
}, []);
|
||||
}, [isSubscriptionExpired, subscriptionInfo.type]);
|
||||
|
||||
// 关闭升级弹窗
|
||||
const handleCloseUpgradeModal = useCallback(() => {
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
// 相关概念区组件 - 便当盒网格布局
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import {
|
||||
Box,
|
||||
Flex,
|
||||
@@ -18,6 +19,7 @@ import {
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { logger } from '@utils/logger';
|
||||
import { getApiBase } from '@utils/apiConfig';
|
||||
import { selectSubscriptionInfo } from '@store/slices/subscriptionSlice';
|
||||
|
||||
/**
|
||||
* 单个概念卡片组件（便当盒样式）
|
||||
@@ -100,6 +102,10 @@ const RelatedConceptsSection = ({
|
||||
const [error, setError] = useState(null);
|
||||
const navigate = useNavigate();
|
||||
|
||||
// 获取订阅信息，用于判断会员是否过期
|
||||
const subscriptionInfo = useSelector(selectSubscriptionInfo);
|
||||
const isSubscriptionExpired = subscriptionInfo.type !== 'free' && !subscriptionInfo.is_active;
|
||||
|
||||
// 颜色配置 - 使用深色主题固定颜色
|
||||
const sectionBg = 'transparent';
|
||||
const headingColor = '#e2e8f0';
|
||||
@@ -107,7 +113,7 @@ const RelatedConceptsSection = ({
|
||||
const countBadgeBg = '#3182ce';
|
||||
const countBadgeColor = '#ffffff';
|
||||
|
||||
// 获取相关概念
|
||||
// 获取相关概念 - 如果被锁定或会员过期则跳过 API 请求
|
||||
useEffect(() => {
|
||||
const fetchConcepts = async () => {
|
||||
if (!eventId) {
|
||||
@@ -115,6 +121,13 @@ const RelatedConceptsSection = ({
|
||||
return;
|
||||
}
|
||||
|
||||
// 如果被锁定或会员已过期，不发起 API 请求
|
||||
if (isLocked || isSubscriptionExpired) {
|
||||
setLoading(false);
|
||||
setConcepts([]);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
@@ -152,7 +165,7 @@ const RelatedConceptsSection = ({
|
||||
};
|
||||
|
||||
fetchConcepts();
|
||||
}, [eventId]);
|
||||
}, [eventId, isLocked, isSubscriptionExpired]);
|
||||
|
||||
// 跳转到概念中心
|
||||
const handleNavigate = (concept) => {
|
||||
|
||||
@@ -152,7 +152,7 @@ export default function HomeNavbar() {
|
||||
borderColor={navbarBorder}
|
||||
py={{ base: 2, md: 3 }}
|
||||
>
|
||||
<Container maxW="container.xl" px={{ base: 3, md: 4 }} style={{ paddingRight: 'max(16px, env(safe-area-inset-right))' }}>
|
||||
<Box px={{ base: 4, md: 6, lg: '80px' }}>
|
||||
<Flex justify="space-between" align="center">
|
||||
{/* Logo - 价小前投研 */}
|
||||
<BrandLogo />
|
||||
@@ -177,7 +177,7 @@ export default function HomeNavbar() {
|
||||
followingEvents={followingEvents}
|
||||
/>
|
||||
</Flex>
|
||||
</Container>
|
||||
</Box>
|
||||
|
||||
{/* 移动端抽屉菜单 (Phase 5 优化) */}
|
||||
<MobileDrawer
|
||||
|
||||
@@ -1,276 +0,0 @@
|
||||
/**
|
||||
* StockChartKLineModal - K 线图表模态框组件
|
||||
*
|
||||
* 使用 KLineChart 库实现的专业金融图表组件
|
||||
* 替换原有的 ECharts 实现（StockChartAntdModal.js）
|
||||
*/
|
||||
|
||||
import React, { useState, useCallback, useMemo } from 'react';
|
||||
import { Modal, Button, Radio, Select, Space, Spin, Alert } from 'antd';
|
||||
import type { RadioChangeEvent } from 'antd';
|
||||
import {
|
||||
LineChartOutlined,
|
||||
BarChartOutlined,
|
||||
SettingOutlined,
|
||||
ReloadOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { Box } from '@chakra-ui/react';
|
||||
|
||||
// 自定义 Hooks
|
||||
import { useKLineChart, useKLineData, useEventMarker } from './hooks';
|
||||
|
||||
// 类型定义
|
||||
import type { ChartType, StockInfo } from './types';
|
||||
|
||||
// 配置常量
|
||||
import {
|
||||
CHART_TYPE_CONFIG,
|
||||
CHART_HEIGHTS,
|
||||
INDICATORS,
|
||||
DEFAULT_SUB_INDICATORS,
|
||||
} from './config';
|
||||
|
||||
// 工具函数
|
||||
import { createSubIndicators } from './utils';
|
||||
|
||||
// ==================== 组件 Props ====================
|
||||
|
||||
export interface StockChartKLineModalProps {
|
||||
/** 是否显示模态框 */
|
||||
visible: boolean;
|
||||
/** 关闭模态框回调 */
|
||||
onClose: () => void;
|
||||
/** 股票信息 */
|
||||
stock: StockInfo;
|
||||
/** 事件时间（ISO 字符串，可选） */
|
||||
eventTime?: string;
|
||||
/** 事件标题（用于标记标签，可选） */
|
||||
eventTitle?: string;
|
||||
}
|
||||
|
||||
// ==================== 主组件 ====================
|
||||
|
||||
const StockChartKLineModal: React.FC<StockChartKLineModalProps> = ({
|
||||
visible,
|
||||
onClose,
|
||||
stock,
|
||||
eventTime,
|
||||
eventTitle,
|
||||
}) => {
|
||||
// ==================== 状态管理 ====================
|
||||
|
||||
/** 图表类型（分时图/日K线） */
|
||||
const [chartType, setChartType] = useState<ChartType>('daily');
|
||||
|
||||
/** 选中的副图指标 */
|
||||
const [selectedIndicators, setSelectedIndicators] = useState<string[]>(
|
||||
DEFAULT_SUB_INDICATORS
|
||||
);
|
||||
|
||||
// ==================== 自定义 Hooks ====================
|
||||
|
||||
/** 图表实例管理 */
|
||||
const { chart, chartRef, isInitialized, error: chartError } = useKLineChart({
|
||||
containerId: `kline-chart-${stock.stock_code}`,
|
||||
height: CHART_HEIGHTS.main,
|
||||
autoResize: true,
|
||||
});
|
||||
|
||||
/** 数据加载管理 */
|
||||
const {
|
||||
data,
|
||||
loading: dataLoading,
|
||||
error: dataError,
|
||||
loadData,
|
||||
} = useKLineData({
|
||||
chart,
|
||||
stockCode: stock.stock_code,
|
||||
chartType,
|
||||
eventTime,
|
||||
autoLoad: visible, // 模态框打开时自动加载
|
||||
});
|
||||
|
||||
/** 事件标记管理 */
|
||||
const { marker } = useEventMarker({
|
||||
chart,
|
||||
data,
|
||||
eventTime,
|
||||
eventTitle,
|
||||
autoCreate: true,
|
||||
});
|
||||
|
||||
// ==================== 事件处理 ====================
|
||||
|
||||
/**
|
||||
* 切换图表类型（分时图 ↔ 日K线）
|
||||
*/
|
||||
const handleChartTypeChange = useCallback((e: RadioChangeEvent) => {
|
||||
const newType = e.target.value as ChartType;
|
||||
setChartType(newType);
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* 切换副图指标
|
||||
*/
|
||||
const handleIndicatorChange = useCallback(
|
||||
(values: string[]) => {
|
||||
setSelectedIndicators(values);
|
||||
|
||||
if (!chart) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 先移除所有副图指标（KLineChart 会自动移除）
|
||||
// 然后创建新的指标
|
||||
createSubIndicators(chart, values);
|
||||
},
|
||||
[chart]
|
||||
);
|
||||
|
||||
/**
|
||||
* 刷新数据
|
||||
*/
|
||||
const handleRefresh = useCallback(() => {
|
||||
loadData();
|
||||
}, [loadData]);
|
||||
|
||||
// ==================== 计算属性 ====================
|
||||
|
||||
/** 是否有错误 */
|
||||
const hasError = useMemo(() => {
|
||||
return !!chartError || !!dataError;
|
||||
}, [chartError, dataError]);
|
||||
|
||||
/** 错误消息 */
|
||||
const errorMessage = useMemo(() => {
|
||||
if (chartError) {
|
||||
return `图表初始化失败: ${chartError.message}`;
|
||||
}
|
||||
if (dataError) {
|
||||
return `数据加载失败: ${dataError.message}`;
|
||||
}
|
||||
return null;
|
||||
}, [chartError, dataError]);
|
||||
|
||||
/** 模态框标题 */
|
||||
const modalTitle = useMemo(() => {
|
||||
return `${stock.stock_name}（${stock.stock_code}） - ${CHART_TYPE_CONFIG[chartType].label}`;
|
||||
}, [stock, chartType]);
|
||||
|
||||
/** 是否显示加载状态 */
|
||||
const showLoading = useMemo(() => {
|
||||
return dataLoading || !isInitialized;
|
||||
}, [dataLoading, isInitialized]);
|
||||
|
||||
// ==================== 副作用 ====================
|
||||
|
||||
// 无副作用，都在 Hooks 中管理
|
||||
|
||||
// ==================== 渲染 ====================
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={modalTitle}
|
||||
open={visible}
|
||||
onCancel={onClose}
|
||||
width={1200}
|
||||
footer={null}
|
||||
centered
|
||||
destroyOnHidden // 关闭时销毁组件（释放图表资源）
|
||||
>
|
||||
{/* 工具栏 */}
|
||||
<Box mb={4}>
|
||||
<Space wrap>
|
||||
{/* 图表类型切换 */}
|
||||
<Radio.Group value={chartType} onChange={handleChartTypeChange}>
|
||||
<Radio.Button value="timeline">
|
||||
<LineChartOutlined /> 分时图
|
||||
</Radio.Button>
|
||||
<Radio.Button value="daily">
|
||||
<BarChartOutlined /> 日K线
|
||||
</Radio.Button>
|
||||
</Radio.Group>
|
||||
|
||||
{/* 副图指标选择 */}
|
||||
<Select
|
||||
mode="multiple"
|
||||
placeholder="选择副图指标"
|
||||
value={selectedIndicators}
|
||||
onChange={handleIndicatorChange}
|
||||
style={{ minWidth: 200 }}
|
||||
maxTagCount={2}
|
||||
>
|
||||
{INDICATORS.sub.map((indicator) => (
|
||||
<Select.Option key={indicator.name} value={indicator.name}>
|
||||
<SettingOutlined /> {indicator.label}
|
||||
</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
|
||||
{/* 刷新按钮 */}
|
||||
<Button
|
||||
icon={<ReloadOutlined />}
|
||||
onClick={handleRefresh}
|
||||
loading={dataLoading}
|
||||
>
|
||||
刷新
|
||||
</Button>
|
||||
</Space>
|
||||
</Box>
|
||||
|
||||
{/* 错误提示 */}
|
||||
{hasError && (
|
||||
<Alert
|
||||
message="加载失败"
|
||||
description={errorMessage}
|
||||
type="error"
|
||||
closable
|
||||
showIcon
|
||||
style={{ marginBottom: 16 }}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 图表容器 */}
|
||||
<Box position="relative">
|
||||
{/* 加载遮罩 */}
|
||||
{showLoading && (
|
||||
<Box
|
||||
position="absolute"
|
||||
top="50%"
|
||||
left="50%"
|
||||
transform="translate(-50%, -50%)"
|
||||
zIndex={10}
|
||||
>
|
||||
<Spin size="large" tip="加载中..." />
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* KLineChart 容器 */}
|
||||
<div
|
||||
ref={chartRef}
|
||||
id={`kline-chart-${stock.stock_code}`}
|
||||
style={{
|
||||
width: '100%',
|
||||
minHeight: '300px',
|
||||
height: 'min(400px, 60vh)',
|
||||
opacity: showLoading ? 0.5 : 1,
|
||||
transition: 'opacity 0.3s',
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* 数据信息（调试用，生产环境可移除） */}
|
||||
{process.env.NODE_ENV === 'development' && (
|
||||
<Box mt={2} fontSize="12px" color="gray.500">
|
||||
<Space split="|">
|
||||
<span>数据点数: {data.length}</span>
|
||||
<span>事件标记: {marker ? marker.label : '无'}</span>
|
||||
<span>图表ID: {chart?.id || '未初始化'}</span>
|
||||
</Space>
|
||||
</Box>
|
||||
)}
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default StockChartKLineModal;
|
||||
@@ -1,558 +0,0 @@
|
||||
// src/components/StockChart/StockChartModal.js - 统一的股票图表组件
|
||||
import React, { useState, useEffect, useRef, useMemo } from 'react';
|
||||
import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, Button, ButtonGroup, VStack, HStack, Text, Badge, Box, Flex, CircularProgress } from '@chakra-ui/react';
|
||||
import ReactECharts from 'echarts-for-react';
|
||||
import * as echarts from 'echarts';
|
||||
import dayjs from 'dayjs';
|
||||
import { stockService } from '../../services/eventService';
|
||||
import { logger } from '../../utils/logger';
|
||||
import RiskDisclaimer from '../RiskDisclaimer';
|
||||
import { RelationDescription } from '../StockRelation';
|
||||
|
||||
const StockChartModal = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
stock,
|
||||
eventTime,
|
||||
isChakraUI = true, // 是否使用Chakra UI，默认true；如果false则使用Antd
|
||||
size = "6xl",
|
||||
initialChartType = 'timeline' // 初始图表类型（timeline/daily）
|
||||
}) => {
|
||||
const chartRef = useRef(null);
|
||||
const chartInstanceRef = useRef(null);
|
||||
const [chartType, setChartType] = useState(initialChartType);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [chartData, setChartData] = useState(null);
|
||||
const [preloadedData, setPreloadedData] = useState({});
|
||||
|
||||
// 预加载数据
|
||||
const preloadData = async (type) => {
|
||||
if (!stock || preloadedData[type]) return;
|
||||
|
||||
try {
|
||||
let adjustedEventTime = eventTime;
|
||||
if (eventTime) {
|
||||
try {
|
||||
const eventMoment = dayjs(eventTime);
|
||||
if (eventMoment.isValid() && eventMoment.hour() >= 15) {
|
||||
const nextDay = eventMoment.clone().add(1, 'day');
|
||||
nextDay.hour(9).minute(30).second(0).millisecond(0);
|
||||
adjustedEventTime = nextDay.format('YYYY-MM-DD HH:mm');
|
||||
}
|
||||
} catch (e) {
|
||||
logger.warn('StockChartModal', '事件时间解析失败', {
|
||||
eventTime,
|
||||
error: e.message
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const response = await stockService.getKlineData(stock.stock_code, type, adjustedEventTime);
|
||||
setPreloadedData(prev => ({...prev, [type]: response}));
|
||||
} catch (err) {
|
||||
logger.error('StockChartModal', 'preloadData', err, {
|
||||
stockCode: stock?.stock_code,
|
||||
type
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen && stock) {
|
||||
// 预加载两种图表类型的数据
|
||||
preloadData('timeline');
|
||||
preloadData('daily');
|
||||
|
||||
// 清理图表实例
|
||||
return () => {
|
||||
if (chartInstanceRef.current) {
|
||||
window.removeEventListener('resize', chartInstanceRef.current.resizeHandler);
|
||||
chartInstanceRef.current.dispose();
|
||||
chartInstanceRef.current = null;
|
||||
}
|
||||
};
|
||||
}
|
||||
}, [isOpen, stock, eventTime]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen && stock) {
|
||||
loadChartData(chartType);
|
||||
}
|
||||
}, [chartType, isOpen, stock]);
|
||||
|
||||
const loadChartData = async (type) => {
|
||||
if (!stock) return;
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
// 先尝试使用预加载的数据
|
||||
let response = preloadedData[type];
|
||||
|
||||
if (!response) {
|
||||
// 如果预加载数据不存在，则立即请求
|
||||
let adjustedEventTime = eventTime;
|
||||
if (eventTime) {
|
||||
try {
|
||||
const eventMoment = dayjs(eventTime);
|
||||
if (eventMoment.isValid() && eventMoment.hour() >= 15) {
|
||||
const nextDay = eventMoment.clone().add(1, 'day');
|
||||
nextDay.hour(9).minute(30).second(0).millisecond(0);
|
||||
adjustedEventTime = nextDay.format('YYYY-MM-DD HH:mm');
|
||||
}
|
||||
} catch (e) {
|
||||
logger.warn('StockChartModal', '事件时间解析失败', {
|
||||
eventTime,
|
||||
error: e.message
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
response = await stockService.getKlineData(stock.stock_code, type, adjustedEventTime);
|
||||
}
|
||||
|
||||
setChartData(response);
|
||||
|
||||
// 初始化图表
|
||||
if (chartRef.current && !chartInstanceRef.current) {
|
||||
const chart = echarts.init(chartRef.current);
|
||||
chart.resizeHandler = () => chart.resize();
|
||||
window.addEventListener('resize', chart.resizeHandler);
|
||||
chartInstanceRef.current = chart;
|
||||
}
|
||||
|
||||
if (chartInstanceRef.current) {
|
||||
const option = generateChartOption(response, type, eventTime);
|
||||
chartInstanceRef.current.setOption(option, true);
|
||||
}
|
||||
} catch (err) {
|
||||
logger.error('StockChartModal', 'loadChartData', err, {
|
||||
stockCode: stock?.stock_code,
|
||||
chartType: type
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const generateChartOption = (data, type, originalEventTime, adjustedEventTime) => {
|
||||
if (!data || !data.data || data.data.length === 0) {
|
||||
return { title: { text: '暂无数据', left: 'center', top: 'center', textStyle: { color: '#999', fontSize: 16 } } };
|
||||
}
|
||||
|
||||
const stockData = data.data;
|
||||
const tradeDate = data.trade_date;
|
||||
|
||||
// 分时图
|
||||
if (type === 'timeline') {
|
||||
const times = stockData.map(item => item.time);
|
||||
const prices = stockData.map(item => item.close || item.price);
|
||||
const avgPrices = stockData.map(item => item.avg_price);
|
||||
const volumes = stockData.map(item => item.volume);
|
||||
|
||||
// 获取昨收盘价作为基准
|
||||
const prevClose = data.prev_close || (prices.length > 0 ? prices[0] : 0);
|
||||
|
||||
// 计算涨跌幅数据
|
||||
const changePercentData = prices.map(price => ((price - prevClose) / prevClose * 100));
|
||||
const avgChangePercentData = avgPrices.map(avgPrice => ((avgPrice - prevClose) / prevClose * 100));
|
||||
|
||||
const currentPrice = prices[prices.length - 1];
|
||||
const currentChange = ((currentPrice - prevClose) / prevClose * 100);
|
||||
const isUp = currentChange >= 0;
|
||||
const lineColor = isUp ? '#ef5350' : '#26a69a';
|
||||
|
||||
// 计算事件标记线位置
|
||||
let eventMarkLineData = [];
|
||||
if (originalEventTime && times.length > 0) {
|
||||
const eventMoment = dayjs(originalEventTime);
|
||||
const eventDate = eventMoment.format('YYYY-MM-DD');
|
||||
const eventTime = eventMoment.format('HH:mm');
|
||||
|
||||
if (eventDate === tradeDate) {
|
||||
// 找到最接近的时间点
|
||||
let nearestIdx = 0;
|
||||
const eventMinutes = eventMoment.hour() * 60 + eventMoment.minute();
|
||||
|
||||
for (let i = 0; i < times.length; i++) {
|
||||
const [h, m] = times[i].split(':').map(Number);
|
||||
const timeMinutes = h * 60 + m;
|
||||
const currentDiff = Math.abs(timeMinutes - eventMinutes);
|
||||
const nearestDiff = Math.abs(
|
||||
(times[nearestIdx].split(':').map(Number)[0] * 60 + times[nearestIdx].split(':').map(Number)[1]) - eventMinutes
|
||||
);
|
||||
if (currentDiff < nearestDiff) {
|
||||
nearestIdx = i;
|
||||
}
|
||||
}
|
||||
|
||||
eventMarkLineData = [{
|
||||
name: '事件发生',
|
||||
xAxis: nearestIdx,
|
||||
label: {
|
||||
formatter: '事件发生',
|
||||
position: 'middle',
|
||||
color: '#FFD700',
|
||||
fontSize: 12
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#FFD700',
|
||||
type: 'solid',
|
||||
width: 2
|
||||
}
|
||||
}];
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
title: {
|
||||
text: `${stock.stock_name || stock.stock_code} - 分时图`,
|
||||
left: 'center',
|
||||
textStyle: { fontSize: 16, fontWeight: 'bold' }
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'cross' },
|
||||
formatter: function(params) {
|
||||
if (!params || params.length === 0) return '';
|
||||
const point = params[0];
|
||||
const idx = point.dataIndex;
|
||||
const priceChangePercent = ((prices[idx] - prevClose) / prevClose * 100);
|
||||
const avgChangePercent = ((avgPrices[idx] - prevClose) / prevClose * 100);
|
||||
const priceColor = priceChangePercent >= 0 ? '#ef5350' : '#26a69a';
|
||||
const avgColor = avgChangePercent >= 0 ? '#ef5350' : '#26a69a';
|
||||
|
||||
return `时间：${times[idx]}<br/>现价：<span style="color: ${priceColor}">¥${prices[idx]?.toFixed(2)} (${priceChangePercent >= 0 ? '+' : ''}${priceChangePercent.toFixed(2)}%)</span><br/>均价：<span style="color: ${avgColor}">¥${avgPrices[idx]?.toFixed(2)} (${avgChangePercent >= 0 ? '+' : ''}${avgChangePercent.toFixed(2)}%)</span><br/>昨收：¥${prevClose?.toFixed(2)}<br/>成交量：${Math.round(volumes[idx]/100)}手`;
|
||||
}
|
||||
},
|
||||
grid: [
|
||||
{ left: '10%', right: '10%', height: '60%', top: '15%' },
|
||||
{ left: '10%', right: '10%', top: '80%', height: '15%' }
|
||||
],
|
||||
xAxis: [
|
||||
{ type: 'category', data: times, gridIndex: 0, boundaryGap: false },
|
||||
{ type: 'category', data: times, gridIndex: 1, axisLabel: { show: false } }
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
gridIndex: 0,
|
||||
scale: false,
|
||||
position: 'left',
|
||||
axisLabel: {
|
||||
formatter: function(value) {
|
||||
return (value >= 0 ? '+' : '') + value.toFixed(2) + '%';
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#f0f0f0'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
gridIndex: 0,
|
||||
scale: false,
|
||||
position: 'right',
|
||||
axisLabel: {
|
||||
formatter: function(value) {
|
||||
return (value >= 0 ? '+' : '') + value.toFixed(2) + '%';
|
||||
}
|
||||
}
|
||||
},
|
||||
{ type: 'value', gridIndex: 1, scale: true, axisLabel: { formatter: v => Math.round(v/100) + '手' } }
|
||||
],
|
||||
dataZoom: [
|
||||
{ type: 'inside', xAxisIndex: [0, 1], start: 0, end: 100 },
|
||||
{ show: true, xAxisIndex: [0, 1], type: 'slider', bottom: '0%' }
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '分时价',
|
||||
type: 'line',
|
||||
xAxisIndex: 0,
|
||||
yAxisIndex: 0,
|
||||
data: changePercentData,
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
lineStyle: { color: lineColor, width: 2 },
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: isUp ? 'rgba(239, 83, 80, 0.3)' : 'rgba(38, 166, 154, 0.3)' },
|
||||
{ offset: 1, color: isUp ? 'rgba(239, 83, 80, 0.05)' : 'rgba(38, 166, 154, 0.05)' }
|
||||
])
|
||||
},
|
||||
markLine: {
|
||||
symbol: 'none',
|
||||
data: [
|
||||
// 昨收盘价基准线 (0%)
|
||||
{
|
||||
yAxis: 0,
|
||||
lineStyle: {
|
||||
color: '#666',
|
||||
type: 'dashed',
|
||||
width: 1.5,
|
||||
opacity: 0.8
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '昨收盘价',
|
||||
position: 'insideEndTop',
|
||||
color: '#666',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
...eventMarkLineData
|
||||
],
|
||||
animation: false
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '均价线',
|
||||
type: 'line',
|
||||
xAxisIndex: 0,
|
||||
yAxisIndex: 1,
|
||||
data: avgChangePercentData,
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
lineStyle: { color: '#FFA500', width: 1 }
|
||||
},
|
||||
{
|
||||
name: '成交量',
|
||||
type: 'bar',
|
||||
xAxisIndex: 1,
|
||||
yAxisIndex: 2,
|
||||
data: volumes,
|
||||
itemStyle: { color: '#b0c4de', opacity: 0.6 }
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
// 日K线
|
||||
if (type === 'daily') {
|
||||
const dates = stockData.map(item => item.time || item.date);
|
||||
const klineData = stockData.map(item => [item.open, item.close, item.low, item.high]);
|
||||
const volumes = stockData.map(item => item.volume);
|
||||
|
||||
// 计算事件标记线位置（重要修复）
|
||||
let eventMarkLineData = [];
|
||||
if (originalEventTime && dates.length > 0) {
|
||||
const eventMoment = dayjs(originalEventTime);
|
||||
const eventDate = eventMoment.format('YYYY-MM-DD');
|
||||
|
||||
// 找到事件发生日期或最接近的交易日
|
||||
let targetIndex = -1;
|
||||
|
||||
// 1. 先尝试找到完全匹配的日期
|
||||
targetIndex = dates.findIndex(date => date === eventDate);
|
||||
|
||||
// 2. 如果没有完全匹配，找到第一个大于等于事件日期的交易日
|
||||
if (targetIndex === -1) {
|
||||
for (let i = 0; i < dates.length; i++) {
|
||||
if (dates[i] >= eventDate) {
|
||||
targetIndex = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 3. 如果事件日期晚于所有交易日，则标记在最后一个交易日
|
||||
if (targetIndex === -1 && eventDate > dates[dates.length - 1]) {
|
||||
targetIndex = dates.length - 1;
|
||||
}
|
||||
|
||||
// 4. 如果事件日期早于所有交易日，则标记在第一个交易日
|
||||
if (targetIndex === -1 && eventDate < dates[0]) {
|
||||
targetIndex = 0;
|
||||
}
|
||||
|
||||
if (targetIndex >= 0) {
|
||||
let labelText = '事件发生';
|
||||
let labelPosition = 'middle';
|
||||
|
||||
// 根据事件时间和交易日的关系调整标签
|
||||
if (eventDate === dates[targetIndex]) {
|
||||
if (eventMoment.hour() >= 15) {
|
||||
labelText = '事件发生\n(盘后)';
|
||||
} else if (eventMoment.hour() < 9 || (eventMoment.hour() === 9 && eventMoment.minute() < 30)) {
|
||||
labelText = '事件发生\n(盘前)';
|
||||
}
|
||||
} else if (eventDate < dates[targetIndex]) {
|
||||
labelText = '事件发生\n(前一日)';
|
||||
labelPosition = 'start';
|
||||
} else {
|
||||
labelText = '事件发生\n(影响日)';
|
||||
labelPosition = 'end';
|
||||
}
|
||||
|
||||
eventMarkLineData = [{
|
||||
name: '事件发生',
|
||||
xAxis: targetIndex,
|
||||
label: {
|
||||
formatter: labelText,
|
||||
position: labelPosition,
|
||||
color: '#FFD700',
|
||||
fontSize: 12,
|
||||
backgroundColor: 'rgba(0,0,0,0.5)',
|
||||
padding: [4, 8],
|
||||
borderRadius: 4
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#FFD700',
|
||||
type: 'solid',
|
||||
width: 2
|
||||
}
|
||||
}];
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
title: {
|
||||
text: `${stock.stock_name || stock.stock_code} - 日K线`,
|
||||
left: 'center',
|
||||
textStyle: { fontSize: 16, fontWeight: 'bold' }
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'cross' },
|
||||
formatter: function(params) {
|
||||
if (!params || params.length === 0) return '';
|
||||
const kline = params[0];
|
||||
const volume = params[1];
|
||||
if (!kline || !kline.data) return '';
|
||||
|
||||
let tooltipHtml = `日期: ${kline.axisValue}<br/>开盘: ¥${kline.data[0]}<br/>收盘: ¥${kline.data[1]}<br/>最低: ¥${kline.data[2]}<br/>最高: ¥${kline.data[3]}`;
|
||||
|
||||
if (volume && volume.data) {
|
||||
tooltipHtml += `<br/>成交量: ${Math.round(volume.data/100)}手`;
|
||||
}
|
||||
|
||||
return tooltipHtml;
|
||||
}
|
||||
},
|
||||
grid: [
|
||||
{ left: '10%', right: '10%', height: '60%' },
|
||||
{ left: '10%', right: '10%', top: '75%', height: '20%' }
|
||||
],
|
||||
xAxis: [
|
||||
{ type: 'category', data: dates, scale: true, boundaryGap: true, gridIndex: 0 },
|
||||
{ type: 'category', data: dates, gridIndex: 1, axisLabel: { show: false } }
|
||||
],
|
||||
yAxis: [
|
||||
{ scale: true, splitArea: { show: true }, gridIndex: 0 },
|
||||
{ scale: true, gridIndex: 1, axisLabel: { formatter: (value) => Math.round(value/100) + '手' } }
|
||||
],
|
||||
dataZoom: [
|
||||
{ type: 'inside', xAxisIndex: [0, 1], start: 70, end: 100 },
|
||||
{ show: true, xAxisIndex: [0, 1], type: 'slider', bottom: '0%', start: 70, end: 100 }
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'K线',
|
||||
type: 'candlestick',
|
||||
yAxisIndex: 0,
|
||||
data: klineData,
|
||||
markLine: {
|
||||
symbol: 'none',
|
||||
data: eventMarkLineData,
|
||||
animation: false
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#ef5350',
|
||||
color0: '#26a69a',
|
||||
borderColor: '#ef5350',
|
||||
borderColor0: '#26a69a'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '成交量',
|
||||
type: 'bar',
|
||||
xAxisIndex: 1,
|
||||
yAxisIndex: 1,
|
||||
data: volumes.map((volume, index) => ({
|
||||
value: volume,
|
||||
itemStyle: {
|
||||
color: stockData[index].close >= stockData[index].open ? '#ef5350' : '#26a69a'
|
||||
}
|
||||
}))
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
return {};
|
||||
};
|
||||
|
||||
if (!stock) return null;
|
||||
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={onClose} size={size}>
|
||||
<ModalOverlay />
|
||||
<ModalContent maxW="90vw" maxH="90vh" overflow="hidden">
|
||||
<ModalHeader pb={4}>
|
||||
<VStack align="flex-start" spacing={2}>
|
||||
<HStack>
|
||||
<Text fontSize="lg" fontWeight="bold">
|
||||
{stock.stock_name || stock.stock_code} ({stock.stock_code}) - 股票详情
|
||||
</Text>
|
||||
{chartData && (
|
||||
<Badge colorScheme="blue">{chartData.trade_date}</Badge>
|
||||
)}
|
||||
</HStack>
|
||||
<ButtonGroup size="sm">
|
||||
<Button
|
||||
variant={chartType === 'timeline' ? 'solid' : 'outline'}
|
||||
onClick={() => setChartType('timeline')}
|
||||
colorScheme="blue"
|
||||
>
|
||||
分时线
|
||||
</Button>
|
||||
<Button
|
||||
variant={chartType === 'daily' ? 'solid' : 'outline'}
|
||||
onClick={() => setChartType('daily')}
|
||||
colorScheme="blue"
|
||||
>
|
||||
日K线
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
</VStack>
|
||||
</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody p={0} overflowY="auto" maxH="calc(90vh - 120px)">
|
||||
{/* 图表区域 */}
|
||||
<Box h="500px" w="100%" position="relative">
|
||||
{loading && (
|
||||
<Flex
|
||||
position="absolute"
|
||||
top="0" left="0" right="0" bottom="0"
|
||||
bg="rgba(255, 255, 255, 0.7)"
|
||||
zIndex="10"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
>
|
||||
<VStack spacing={4}>
|
||||
<CircularProgress isIndeterminate color="blue.300" />
|
||||
<Text>加载图表数据...</Text>
|
||||
</VStack>
|
||||
</Flex>
|
||||
)}
|
||||
<div ref={chartRef} style={{ height: '100%', width: '100%', minHeight: '500px' }} />
|
||||
</Box>
|
||||
|
||||
{/* 关联描述 */}
|
||||
<RelationDescription relationDesc={stock?.relation_desc} />
|
||||
|
||||
{/* 风险提示 */}
|
||||
<Box px={4} pb={4}>
|
||||
<RiskDisclaimer variant="default" />
|
||||
</Box>
|
||||
</ModalBody>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default StockChartModal;
|
||||
@@ -1,55 +0,0 @@
|
||||
import { useState } from "react";
|
||||
import { Pie } from "@visx/shape";
|
||||
import { Group } from "@visx/group";
|
||||
import { Text } from "@visx/text";
|
||||
import { useColorModeValue } from "@chakra-ui/react";
|
||||
|
||||
const VisxPieChart = ({ data, title, width }) => {
|
||||
const [active, setActive] = useState(null);
|
||||
const half = width / 2;
|
||||
|
||||
const textColor = useColorModeValue("gray.700", "white");
|
||||
|
||||
return (
|
||||
<svg width={width} height={width}>
|
||||
<Group top={half} left={half}>
|
||||
<Pie
|
||||
data={data}
|
||||
pieValue={(data) => data.percentage}
|
||||
outerRadius={half}
|
||||
innerRadius={({ data }) => {
|
||||
const size = active && active.name == data.name ? 12 : 8;
|
||||
return half - size;
|
||||
}}
|
||||
padAngle={0.01}
|
||||
>
|
||||
{(pie) => {
|
||||
return pie.arcs.map((arc) => {
|
||||
return (
|
||||
<g
|
||||
key={arc.data.name}
|
||||
onMouseEnter={() => setActive(arc.data)}
|
||||
onMouseLeave={() => setActive(null)}
|
||||
>
|
||||
<path d={pie.path(arc)} fill={arc.data.color}></path>
|
||||
</g>
|
||||
);
|
||||
});
|
||||
}}
|
||||
</Pie>
|
||||
|
||||
|
||||
<>
|
||||
|
||||
|
||||
<Text textAnchor="middle" fill={textColor} fontWeight="bold" fontSize={32} dy={20}>
|
||||
{title}
|
||||
</Text>
|
||||
</>
|
||||
|
||||
</Group>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default VisxPieChart;
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { Box, Container, VStack, HStack, Text, Link, useColorModeValue } from '@chakra-ui/react';
|
||||
import { Box, VStack, HStack, Text, Link, useColorModeValue } from '@chakra-ui/react';
|
||||
import RiskDisclaimer from '../components/RiskDisclaimer';
|
||||
|
||||
/**
|
||||
@@ -8,8 +8,7 @@ import RiskDisclaimer from '../components/RiskDisclaimer';
|
||||
*/
|
||||
const AppFooter = () => {
|
||||
return (
|
||||
<Box bg={useColorModeValue('gray.100', 'gray.800')} py={2}>
|
||||
<Container maxW="container.xl">
|
||||
<Box bg={useColorModeValue('gray.100', 'gray.800')} py={2} px={{ base: 4, md: 6, lg: '80px' }}>
|
||||
<VStack spacing={1}>
|
||||
<RiskDisclaimer />
|
||||
<Text color="gray.500" fontSize="sm">
|
||||
@@ -32,7 +31,6 @@ const AppFooter = () => {
|
||||
</Link>
|
||||
</HStack>
|
||||
</VStack>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -9,7 +9,7 @@ import BackToTopButton from "./components/BackToTopButton";
|
||||
import ErrorBoundary from "../components/ErrorBoundary";
|
||||
import PageLoader from "../components/Loading/PageLoader";
|
||||
import GlobalSidebar from "../components/GlobalSidebar";
|
||||
import { BACK_TO_TOP_CONFIG, LAYOUT_SIZE } from "./config/layoutConfig";
|
||||
import { BACK_TO_TOP_CONFIG, LAYOUT_SIZE, LAYOUT_PADDING } from "./config/layoutConfig";
|
||||
|
||||
// ✅ P0 性能优化：缓存静态组件，避免路由切换时不必要的重新渲染
|
||||
// HomeNavbar (1623行) 和 AppFooter 不依赖路由参数，使用 memo 可大幅减少渲染次数
|
||||
@@ -40,7 +40,7 @@ export default function MainLayout() {
|
||||
<Box flex="1" bg="#1A202C" position="relative" overflow="hidden">
|
||||
{/* 页面内容区域 - 全宽度，与导航栏对齐 */}
|
||||
<Box h="100%" overflowY="auto" display="flex" flexDirection="column">
|
||||
<Box flex="1" pt={LAYOUT_SIZE.navbarHeight}>
|
||||
<Box flex="1" pt={LAYOUT_SIZE.navbarHeight} px={LAYOUT_PADDING.x}>
|
||||
<ErrorBoundary>
|
||||
<Suspense fallback={<PageLoader message="页面加载中..." />}>
|
||||
<Outlet />
|
||||
|
||||
@@ -170,6 +170,15 @@ export const LAYOUT_SIZE = {
|
||||
contentMinHeight: 'calc(100vh - 60px)', // 100vh - navbar高度
|
||||
};
|
||||
|
||||
/**
|
||||
* 布局内边距配置
|
||||
* 统一控制页面内容的水平内边距
|
||||
* 右侧预留空间给 GlobalSidebar（收起宽度 72px）
|
||||
*/
|
||||
export const LAYOUT_PADDING = {
|
||||
x: { base: 4, md: 6, lg: '80px' }, // 移动端 16px，中屏 24px，大屏 80px（容纳工具栏）
|
||||
};
|
||||
|
||||
/**
|
||||
* 响应式断点
|
||||
* 与 Chakra UI 断点保持一致
|
||||
@@ -189,5 +198,6 @@ export default {
|
||||
BACK_TO_TOP_CONFIG,
|
||||
PAGE_LOADER_CONFIG,
|
||||
LAYOUT_SIZE,
|
||||
LAYOUT_PADDING,
|
||||
BREAKPOINTS
|
||||
};
|
||||
|
||||
@@ -216,24 +216,39 @@ const generateDailyAnalysis = (date) => {
|
||||
|
||||
// 统计数据
|
||||
const morningCount = Math.floor(totalStocks * 0.35); // 早盘涨停
|
||||
const middayCount = Math.floor(totalStocks * 0.25); // 午盘涨停
|
||||
const afternoonCount = totalStocks - morningCount - middayCount; // 尾盘涨停
|
||||
const announcementCount = sectorData['公告']?.count || 0;
|
||||
const topSector = sectorNames.filter(s => s !== '公告' && s !== '其他')
|
||||
.reduce((max, name) =>
|
||||
(sectorData[name]?.count || 0) > (sectorData[max]?.count || 0) ? name : max
|
||||
, '人工智能');
|
||||
|
||||
// 生成 chart_data（板块分布饼图需要）
|
||||
const sortedSectors = Object.entries(sectorData)
|
||||
.filter(([name]) => name !== '其他' && name !== '公告')
|
||||
.sort((a, b) => b[1].count - a[1].count)
|
||||
.slice(0, 10);
|
||||
|
||||
const chartData = {
|
||||
labels: sortedSectors.map(([name]) => name),
|
||||
counts: sortedSectors.map(([, info]) => info.count)
|
||||
};
|
||||
|
||||
return {
|
||||
date: date,
|
||||
total_stocks: totalStocks,
|
||||
total_sectors: Object.keys(sectorData).length,
|
||||
sector_data: sectorData, // 👈 SectorDetails 组件需要的数据
|
||||
chart_data: chartData, // 👈 板块分布饼图需要的数据
|
||||
summary: {
|
||||
top_sector: topSector,
|
||||
top_sector_count: sectorData[topSector]?.count || 0,
|
||||
announcement_stocks: announcementCount,
|
||||
zt_time_distribution: {
|
||||
morning: morningCount,
|
||||
afternoon: totalStocks - morningCount,
|
||||
midday: middayCount,
|
||||
afternoon: afternoonCount,
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -382,6 +397,22 @@ const generateDailyJson = (date) => {
|
||||
{ name: '区块链', value: Math.floor(Math.random() * 5) + 2 },
|
||||
];
|
||||
|
||||
// 生成 chart_data（板块分布饼图需要）
|
||||
const sortedSectors = Object.entries(sectorData)
|
||||
.filter(([name]) => name !== '其他' && name !== '公告')
|
||||
.sort((a, b) => b[1].count - a[1].count)
|
||||
.slice(0, 10);
|
||||
|
||||
const chartData = {
|
||||
labels: sortedSectors.map(([name]) => name),
|
||||
counts: sortedSectors.map(([, info]) => info.count)
|
||||
};
|
||||
|
||||
// 时间分布（早盘、午盘、尾盘）
|
||||
const morningCount = Math.floor(stocks.length * 0.35);
|
||||
const middayCount = Math.floor(stocks.length * 0.25);
|
||||
const afternoonCount = stocks.length - morningCount - middayCount;
|
||||
|
||||
return {
|
||||
date: date,
|
||||
total_stocks: stocks.length,
|
||||
@@ -389,13 +420,15 @@ const generateDailyJson = (date) => {
|
||||
stocks: stocks,
|
||||
sector_data: sectorData,
|
||||
word_freq_data: wordFreqData,
|
||||
chart_data: chartData, // 👈 板块分布饼图需要的数据
|
||||
summary: {
|
||||
top_sector: '人工智能',
|
||||
top_sector_count: sectorData['人工智能']?.count || 0,
|
||||
announcement_stocks: sectorData['公告']?.count || 0,
|
||||
zt_time_distribution: {
|
||||
morning: Math.floor(stocks.length * 0.4),
|
||||
afternoon: Math.floor(stocks.length * 0.6),
|
||||
morning: morningCount, // 早盘 9:30-11:30
|
||||
midday: middayCount, // 午盘 11:30-13:00
|
||||
afternoon: afternoonCount, // 尾盘 13:00-15:00
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -58,11 +58,25 @@ const saveWatchlistToCache = (data) => {
|
||||
|
||||
/**
|
||||
* 获取事件相关股票（Redux 缓存）
|
||||
* @param {Object} params
|
||||
* @param {string} params.eventId - 事件ID
|
||||
* @param {boolean} params.forceRefresh - 是否强制刷新
|
||||
* @param {boolean} params.skipIfNoAccess - 如果无权限则跳过请求（会员过期场景）
|
||||
*/
|
||||
export const fetchEventStocks = createAsyncThunk(
|
||||
'stock/fetchEventStocks',
|
||||
async ({ eventId, forceRefresh = false }, { getState }) => {
|
||||
logger.debug('stockSlice', 'fetchEventStocks', { eventId, forceRefresh });
|
||||
async ({ eventId, forceRefresh = false, skipIfNoAccess = false }, { getState }) => {
|
||||
logger.debug('stockSlice', 'fetchEventStocks', { eventId, forceRefresh, skipIfNoAccess });
|
||||
|
||||
// 检查订阅状态，如果会员过期则跳过请求
|
||||
if (skipIfNoAccess) {
|
||||
const subscriptionInfo = getState().subscription?.info;
|
||||
const isExpired = subscriptionInfo?.type !== 'free' && !subscriptionInfo?.is_active;
|
||||
if (isExpired) {
|
||||
logger.debug('stockSlice', '会员已过期，跳过 fetchEventStocks 请求', { eventId });
|
||||
return { eventId, stocks: [], skipped: true };
|
||||
}
|
||||
}
|
||||
|
||||
// Redux 状态缓存
|
||||
if (!forceRefresh) {
|
||||
@@ -132,11 +146,25 @@ export const fetchEventDetail = createAsyncThunk(
|
||||
|
||||
/**
|
||||
* 获取历史事件对比（Redux 缓存）
|
||||
* @param {Object} params
|
||||
* @param {string} params.eventId - 事件ID
|
||||
* @param {boolean} params.forceRefresh - 是否强制刷新
|
||||
* @param {boolean} params.skipIfNoAccess - 如果无权限则跳过请求（会员过期场景）
|
||||
*/
|
||||
export const fetchHistoricalEvents = createAsyncThunk(
|
||||
'stock/fetchHistoricalEvents',
|
||||
async ({ eventId, forceRefresh = false }, { getState }) => {
|
||||
logger.debug('stockSlice', 'fetchHistoricalEvents', { eventId });
|
||||
async ({ eventId, forceRefresh = false, skipIfNoAccess = false }, { getState }) => {
|
||||
logger.debug('stockSlice', 'fetchHistoricalEvents', { eventId, skipIfNoAccess });
|
||||
|
||||
// 检查订阅状态，如果会员过期则跳过请求
|
||||
if (skipIfNoAccess) {
|
||||
const subscriptionInfo = getState().subscription?.info;
|
||||
const isExpired = subscriptionInfo?.type !== 'free' && !subscriptionInfo?.is_active;
|
||||
if (isExpired) {
|
||||
logger.debug('stockSlice', '会员已过期，跳过 fetchHistoricalEvents 请求', { eventId });
|
||||
return { eventId, events: [], skipped: true };
|
||||
}
|
||||
}
|
||||
|
||||
// Redux 缓存
|
||||
if (!forceRefresh) {
|
||||
@@ -158,11 +186,25 @@ export const fetchHistoricalEvents = createAsyncThunk(
|
||||
|
||||
/**
|
||||
* 获取传导链分析（Redux 缓存）
|
||||
* @param {Object} params
|
||||
* @param {string} params.eventId - 事件ID
|
||||
* @param {boolean} params.forceRefresh - 是否强制刷新
|
||||
* @param {boolean} params.skipIfNoAccess - 如果无权限则跳过请求（会员过期场景）
|
||||
*/
|
||||
export const fetchChainAnalysis = createAsyncThunk(
|
||||
'stock/fetchChainAnalysis',
|
||||
async ({ eventId, forceRefresh = false }, { getState }) => {
|
||||
logger.debug('stockSlice', 'fetchChainAnalysis', { eventId });
|
||||
async ({ eventId, forceRefresh = false, skipIfNoAccess = false }, { getState }) => {
|
||||
logger.debug('stockSlice', 'fetchChainAnalysis', { eventId, skipIfNoAccess });
|
||||
|
||||
// 检查订阅状态，如果会员过期则跳过请求
|
||||
if (skipIfNoAccess) {
|
||||
const subscriptionInfo = getState().subscription?.info;
|
||||
const isExpired = subscriptionInfo?.type !== 'free' && !subscriptionInfo?.is_active;
|
||||
if (isExpired) {
|
||||
logger.debug('stockSlice', '会员已过期，跳过 fetchChainAnalysis 请求', { eventId });
|
||||
return { eventId, analysis: null, skipped: true };
|
||||
}
|
||||
}
|
||||
|
||||
// Redux 缓存
|
||||
if (!forceRefresh) {
|
||||
|
||||
@@ -23,7 +23,8 @@ const Center: React.FC = () => {
|
||||
|
||||
return (
|
||||
<Box bg={THEME.bg.primary} minH="100vh" overflowX="hidden">
|
||||
<Box px={{ base: 3, md: 4 }} py={{ base: 4, md: 6 }} maxW="container.xl" mx="auto">
|
||||
{/* padding 由 MainLayout 统一设置 */}
|
||||
<Box py={{ base: 4, md: 6 }}>
|
||||
{/* 市场概览仪表盘 */}
|
||||
<Box mb={4}>
|
||||
<MarketDashboard />
|
||||
|
||||
@@ -8,8 +8,6 @@ import {
|
||||
} from '@/store/slices/communityDataSlice';
|
||||
import {
|
||||
Box,
|
||||
Container,
|
||||
useBreakpointValue,
|
||||
Skeleton,
|
||||
} from '@chakra-ui/react';
|
||||
|
||||
@@ -45,23 +43,6 @@ const Community = () => {
|
||||
// Ref：用于首次滚动到内容区域
|
||||
const containerRef = useRef(null);
|
||||
|
||||
// 响应式容器宽度
|
||||
const containerMaxW = useBreakpointValue({
|
||||
base: '100%', // 移动端：全宽
|
||||
sm: '100%', // 小屏：全宽
|
||||
md: '100%', // 中屏：全宽
|
||||
lg: '1200px', // 大屏：1200px
|
||||
xl: '1400px', // 超大屏：1400px
|
||||
});
|
||||
|
||||
// 响应式内边距
|
||||
const containerPx = useBreakpointValue({
|
||||
base: 2, // 移动端：最小内边距
|
||||
sm: 3,
|
||||
md: 4,
|
||||
lg: 6,
|
||||
});
|
||||
|
||||
// ⚡ 通知权限引导
|
||||
const { browserPermission, requestBrowserPermission, registerEventUpdateCallback } = useNotification();
|
||||
|
||||
@@ -165,8 +146,8 @@ const Community = () => {
|
||||
|
||||
return (
|
||||
<Box minH="100vh" bg={bgColor}>
|
||||
{/* 主内容区域 */}
|
||||
<Container ref={containerRef} maxW={containerMaxW} px={containerPx} pt={{ base: 3, md: 6 }} pb={{ base: 4, md: 8 }}>
|
||||
{/* 主内容区域 - padding 由 MainLayout 统一设置 */}
|
||||
<Box ref={containerRef} pt={{ base: 3, md: 6 }} pb={{ base: 4, md: 8 }}>
|
||||
{/* ⚡ 顶部说明面板（懒加载）：产品介绍 + 沪深指数 + 热门概念词云 */}
|
||||
<Suspense fallback={
|
||||
<Box mb={6} p={4} borderRadius="xl" bg="rgba(255,255,255,0.02)">
|
||||
@@ -200,7 +181,7 @@ const Community = () => {
|
||||
events={hotEvents}
|
||||
onEventClick={communityEvents.trackNewsArticleClicked}
|
||||
/>
|
||||
</Container>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -7,6 +7,7 @@ import { Box, Flex, HStack, VStack, Text } from '@chakra-ui/react';
|
||||
import { AutoComplete, Input, Spin } from 'antd';
|
||||
import { SearchOutlined } from '@ant-design/icons';
|
||||
import { useStockSearch } from '@hooks/useStockSearch';
|
||||
import { LAYOUT_PADDING } from '@/layouts/config/layoutConfig';
|
||||
import { THEME } from '../../config';
|
||||
import { FUI_COLORS, FUI_GLOW } from '../../theme/fui';
|
||||
import type { CompanyHeaderProps, StockSearchResult } from '../../types';
|
||||
@@ -115,17 +116,17 @@ SearchBox.displayName = 'SearchBox';
|
||||
const CompanyHeader: React.FC<CompanyHeaderProps> = memo(({ onStockChange }) => (
|
||||
<Box
|
||||
position="relative"
|
||||
bg={FUI_COLORS.bg.primary}
|
||||
borderBottom="1px solid"
|
||||
borderColor={FUI_COLORS.line.default}
|
||||
px={6}
|
||||
py={4}
|
||||
border="1px solid"
|
||||
borderRadius="8px"
|
||||
sx={{
|
||||
bg: FUI_COLORS.bg.primary,
|
||||
borderColor: FUI_COLORS.line.default,
|
||||
padding: '20px 20px',
|
||||
}}
|
||||
>
|
||||
<Flex
|
||||
position="relative"
|
||||
zIndex={1}
|
||||
maxW="container.xl"
|
||||
mx="auto"
|
||||
justify="space-between"
|
||||
align="center"
|
||||
>
|
||||
|
||||
@@ -332,7 +332,8 @@ const CompanyIndex: React.FC = () => {
|
||||
position="relative"
|
||||
bg={THEME.bg}
|
||||
minH="calc(100vh - 60px)"
|
||||
overflow="hidden"
|
||||
overflowX="visible"
|
||||
overflowY="hidden"
|
||||
>
|
||||
{/* ========================================
|
||||
全局环境光效果
|
||||
@@ -371,12 +372,10 @@ const CompanyIndex: React.FC = () => {
|
||||
|
||||
{/*
|
||||
内容容器
|
||||
- maxW="container.xl": 最大宽度限制，保持内容可读性
|
||||
- mx="auto": 水平居中
|
||||
- px={4}: 左右内边距 16px
|
||||
- py={6}: 上下内边距 24px
|
||||
- 水平 padding 由 MainLayout 统一设置
|
||||
*/}
|
||||
<Box maxW="container.xl" mx="auto" px={4} py={6}>
|
||||
<Box py={6}>
|
||||
{/* ========================================
|
||||
股票行情卡片
|
||||
========================================
|
||||
|
||||
@@ -4,7 +4,6 @@ import { logger } from '../../utils/logger';
|
||||
import defaultEventImage from '../../assets/img/default-event.jpg';
|
||||
import {
|
||||
Box,
|
||||
Container,
|
||||
Heading,
|
||||
Text,
|
||||
Input,
|
||||
@@ -1538,12 +1537,14 @@ const ConceptCenter = () => {
|
||||
{/* 导航栏已由 MainLayout 提供 */}
|
||||
|
||||
{/* Hero Section - 精简版 */}
|
||||
{/* Hero Section - 使用负 margin 抵消 Layout 的 padding 实现全宽背景 */}
|
||||
<Box
|
||||
position="relative"
|
||||
bgGradient="linear(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%)"
|
||||
color="white"
|
||||
overflow="hidden"
|
||||
zIndex={1}
|
||||
mx={{ base: -4, md: -6, lg: '-80px' }}
|
||||
>
|
||||
{/* 科幻网格背景 */}
|
||||
<Box
|
||||
@@ -1579,7 +1580,7 @@ const ConceptCenter = () => {
|
||||
filter="blur(50px)"
|
||||
/>
|
||||
|
||||
<Container maxW="container.xl" position="relative" py={{ base: 8, md: 12 }}>
|
||||
<Box px={{ base: 4, md: 6, lg: '80px' }} position="relative" py={{ base: 8, md: 12 }}>
|
||||
<VStack spacing={6}>
|
||||
{/* 标题区域 */}
|
||||
<VStack spacing={3} textAlign="center">
|
||||
@@ -1743,11 +1744,11 @@ const ConceptCenter = () => {
|
||||
</VStack>
|
||||
</Box>
|
||||
</VStack>
|
||||
</Container>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* 主内容区域 - 深色主题 */}
|
||||
<Container maxW="container.xl" py={10} position="relative" zIndex={1}>
|
||||
{/* 主内容区域 - padding 由 MainLayout 统一设置 */}
|
||||
<Box py={10} position="relative" zIndex={1}>
|
||||
<Box mb={6}>
|
||||
<DateSelector />
|
||||
</Box>
|
||||
@@ -2102,7 +2103,7 @@ const ConceptCenter = () => {
|
||||
</Box>
|
||||
</Box>
|
||||
</Flex>
|
||||
</Container>
|
||||
</Box>
|
||||
|
||||
{/* 股票详情Modal - 复用通用组件 */}
|
||||
<ConceptStocksModal
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import React, { useState, useEffect, useMemo } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Container,
|
||||
Flex,
|
||||
Text,
|
||||
Input,
|
||||
@@ -480,7 +479,8 @@ const DataBrowser: React.FC = () => {
|
||||
pointerEvents="none"
|
||||
/>
|
||||
|
||||
<Container maxW="container.xl" position="relative" zIndex={1}>
|
||||
{/* padding 由 MainLayout 统一设置 */}
|
||||
<Box position="relative" zIndex={1}>
|
||||
{/* 标题区域 */}
|
||||
<MotionBox
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
@@ -866,7 +866,7 @@ const DataBrowser: React.FC = () => {
|
||||
</Card>
|
||||
</MotionBox>
|
||||
</Flex>
|
||||
</Container>
|
||||
</Box>
|
||||
|
||||
{/* 指标数据详情模态框 */}
|
||||
{selectedMetric && (
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import React, { useEffect, useState, useRef } from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
@@ -39,6 +40,7 @@ import CitedContent from '../../../components/Citation/CitedContent';
|
||||
import { logger } from '../../../utils/logger';
|
||||
import { getApiBase } from '../../../utils/apiConfig';
|
||||
import { PROFESSIONAL_COLORS } from '../../../constants/professionalTheme';
|
||||
import { selectSubscriptionInfo } from '../../../store/slices/subscriptionSlice';
|
||||
|
||||
// 节点样式配置 - 完全复刻Flask版本
|
||||
const NODE_STYLES = {
|
||||
@@ -460,6 +462,10 @@ function getSankeyOption(data) {
|
||||
}
|
||||
|
||||
const TransmissionChainAnalysis = ({ eventId }) => {
|
||||
// 获取订阅信息，用于判断会员是否过期
|
||||
const subscriptionInfo = useSelector(selectSubscriptionInfo);
|
||||
const isSubscriptionExpired = subscriptionInfo.type !== 'free' && !subscriptionInfo.is_active;
|
||||
|
||||
// 状态管理
|
||||
const [graphData, setGraphData] = useState(null);
|
||||
const [sankeyData, setSankeyData] = useState(null);
|
||||
@@ -474,7 +480,7 @@ const TransmissionChainAnalysis = ({ eventId }) => {
|
||||
const [stats, setStats] = useState({
|
||||
totalNodes: 0,
|
||||
involvedIndustries: 0,
|
||||
relatedCompanies: 0,
|
||||
relatedCompanies: 0,
|
||||
positiveImpact: 0,
|
||||
negativeImpact: 0,
|
||||
circularEffect: 0
|
||||
@@ -514,9 +520,18 @@ const TransmissionChainAnalysis = ({ eventId }) => {
|
||||
}
|
||||
}, [graphData]);
|
||||
|
||||
// 加载数据
|
||||
// 加载数据 - 如果会员过期则跳过 API 请求
|
||||
useEffect(() => {
|
||||
async function fetchData() {
|
||||
// 会员已过期，不发起 API 请求
|
||||
if (isSubscriptionExpired) {
|
||||
logger.debug('TransmissionChain', '会员已过期，跳过传导链数据加载', { eventId });
|
||||
setLoading(false);
|
||||
setGraphData(null);
|
||||
setSankeyData(null);
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
@@ -563,7 +578,7 @@ const TransmissionChainAnalysis = ({ eventId }) => {
|
||||
if (eventId) {
|
||||
fetchData();
|
||||
}
|
||||
}, [eventId]);
|
||||
}, [eventId, isSubscriptionExpired]);
|
||||
|
||||
// BFS路径查找 - 完全复刻Flask版本
|
||||
function findPath(nodes, edges, fromId, toId) {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useMemo, useState, useEffect, useRef } from 'react';
|
||||
import React, { useMemo } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Card,
|
||||
@@ -39,21 +39,6 @@ import {
|
||||
import { getFormattedTextProps } from '../../../utils/textUtils';
|
||||
import { ExternalLinkIcon } from '@chakra-ui/icons';
|
||||
import RiskDisclaimer from '../../../components/RiskDisclaimer';
|
||||
import {
|
||||
BarChart, Bar,
|
||||
PieChart, Pie, Cell,
|
||||
XAxis, YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip as RechartsTooltip,
|
||||
Legend,
|
||||
ResponsiveContainer,
|
||||
Treemap,
|
||||
Area, AreaChart,
|
||||
} from 'recharts';
|
||||
// 词云库 - 支持两种实现
|
||||
import { Wordcloud } from '@visx/wordcloud';
|
||||
import { scaleLog } from '@visx/scale';
|
||||
import { Text as VisxText } from '@visx/text';
|
||||
import ReactECharts from 'echarts-for-react';
|
||||
import 'echarts-wordcloud';
|
||||
// 颜色配置
|
||||
@@ -65,97 +50,7 @@ const CHART_COLORS = [
|
||||
// 词云颜色常量
|
||||
const WORDCLOUD_COLORS = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEEAD'];
|
||||
|
||||
// ==================== 词云组件实现 1: @visx/wordcloud ====================
|
||||
// 使用 SVG 渲染，React 18 原生支持，配置灵活
|
||||
const VisxWordCloud = ({ data }) => {
|
||||
const [dimensions, setDimensions] = useState({ width: 0, height: 400 });
|
||||
const containerRef = useRef(null);
|
||||
|
||||
// 监听容器尺寸变化
|
||||
useEffect(() => {
|
||||
if (!containerRef.current) return;
|
||||
|
||||
const updateDimensions = () => {
|
||||
if (containerRef.current) {
|
||||
setDimensions({
|
||||
width: containerRef.current.offsetWidth,
|
||||
height: 400
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
updateDimensions();
|
||||
const resizeObserver = new ResizeObserver(updateDimensions);
|
||||
resizeObserver.observe(containerRef.current);
|
||||
|
||||
return () => resizeObserver.disconnect();
|
||||
}, []);
|
||||
|
||||
if (!data || data.length === 0) {
|
||||
return (
|
||||
<Center h="400px">
|
||||
<VStack>
|
||||
<Text color="gray.500">暂无词云数据</Text>
|
||||
</VStack>
|
||||
</Center>
|
||||
);
|
||||
}
|
||||
|
||||
const words = data.slice(0, 100).map(item => ({
|
||||
name: item.name || item.text,
|
||||
value: item.value || item.count || 1
|
||||
}));
|
||||
|
||||
// 计算字体大小比例
|
||||
const fontScale = scaleLog({
|
||||
domain: [
|
||||
Math.min(...words.map(w => w.value)),
|
||||
Math.max(...words.map(w => w.value))
|
||||
],
|
||||
range: [16, 80],
|
||||
});
|
||||
|
||||
const fontSizeSetter = (datum) => fontScale(datum.value);
|
||||
|
||||
return (
|
||||
<Box ref={containerRef} h="400px" w="100%">
|
||||
{dimensions.width > 0 && (
|
||||
<svg width={dimensions.width} height={dimensions.height}>
|
||||
<Wordcloud
|
||||
words={words}
|
||||
width={dimensions.width}
|
||||
height={dimensions.height}
|
||||
fontSize={fontSizeSetter}
|
||||
font="Microsoft YaHei, sans-serif"
|
||||
padding={3}
|
||||
spiral="archimedean"
|
||||
rotate={0}
|
||||
random={() => 0.5}
|
||||
>
|
||||
{(cloudWords) =>
|
||||
cloudWords.map((w, i) => (
|
||||
<VisxText
|
||||
key={w.text}
|
||||
fill={WORDCLOUD_COLORS[i % WORDCLOUD_COLORS.length]}
|
||||
textAnchor="middle"
|
||||
transform={`translate(${w.x}, ${w.y}) rotate(${w.rotate})`}
|
||||
fontSize={w.size}
|
||||
fontFamily={w.font}
|
||||
fontWeight="bold"
|
||||
>
|
||||
{w.text}
|
||||
</VisxText>
|
||||
))
|
||||
}
|
||||
</Wordcloud>
|
||||
</svg>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
// ==================== 词云组件实现 2: ECharts Wordcloud ====================
|
||||
// 使用 Canvas 渲染，内置交互效果（tooltip、emphasis），配置简单
|
||||
// 词云组件 - 使用 ECharts 实现
|
||||
const EChartsWordCloud = ({ data }) => {
|
||||
if (!data || data.length === 0) {
|
||||
return (
|
||||
@@ -216,9 +111,8 @@ const EChartsWordCloud = ({ data }) => {
|
||||
);
|
||||
};
|
||||
|
||||
// ==================== 词云组件包装器 ====================
|
||||
// 统一接口，支持切换两种实现方式
|
||||
const WordCloud = ({ data, engine = 'echarts' }) => {
|
||||
// 词云组件
|
||||
const WordCloud = ({ data }) => {
|
||||
if (!data || data.length === 0) {
|
||||
return (
|
||||
<Center h="400px">
|
||||
@@ -229,8 +123,150 @@ const WordCloud = ({ data, engine = 'echarts' }) => {
|
||||
);
|
||||
}
|
||||
|
||||
// 根据 engine 参数选择实现方式
|
||||
return engine === 'visx' ? <VisxWordCloud data={data} /> : <EChartsWordCloud data={data} />;
|
||||
return <EChartsWordCloud data={data} />;
|
||||
};
|
||||
|
||||
// 板块分布饼图 - ECharts 实现
|
||||
const SectorPieChart = ({ data }) => {
|
||||
if (!data || data.length === 0) {
|
||||
return (
|
||||
<Center h="400px">
|
||||
<Text color="gray.500">暂无数据</Text>
|
||||
</Center>
|
||||
);
|
||||
}
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b}: {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
right: 10,
|
||||
top: 'center',
|
||||
textStyle: { fontSize: 12 }
|
||||
},
|
||||
series: [{
|
||||
type: 'pie',
|
||||
radius: ['0%', '65%'],
|
||||
center: ['40%', '50%'],
|
||||
avoidLabelOverlap: true,
|
||||
itemStyle: {
|
||||
borderRadius: 4,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '{b} {d}%',
|
||||
fontSize: 12
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
length: 10,
|
||||
length2: 15
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 14,
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
},
|
||||
data: data.map((item, index) => ({
|
||||
name: item.name,
|
||||
value: item.value,
|
||||
itemStyle: { color: CHART_COLORS[index % CHART_COLORS.length] }
|
||||
})),
|
||||
animationDuration: 800
|
||||
}]
|
||||
};
|
||||
|
||||
return (
|
||||
<ReactECharts
|
||||
option={option}
|
||||
style={{ height: '400px', width: '100%' }}
|
||||
opts={{ renderer: 'canvas' }}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
// 时间分布环形图 - ECharts 实现
|
||||
const TimeDistributionChart = ({ data }) => {
|
||||
if (!data || data.length === 0) {
|
||||
return (
|
||||
<Center h="300px">
|
||||
<Text color="gray.500">暂无数据</Text>
|
||||
</Center>
|
||||
);
|
||||
}
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b}: {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
orient: 'horizontal',
|
||||
bottom: 10,
|
||||
textStyle: { fontSize: 12 }
|
||||
},
|
||||
series: [{
|
||||
type: 'pie',
|
||||
radius: ['45%', '70%'],
|
||||
center: ['50%', '45%'],
|
||||
avoidLabelOverlap: true,
|
||||
padAngle: 3,
|
||||
itemStyle: {
|
||||
borderRadius: 6,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'outside',
|
||||
formatter: '{b}\n{c}只',
|
||||
fontSize: 11
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
length: 8,
|
||||
length2: 12
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 13,
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
},
|
||||
data: data.map(item => ({
|
||||
name: item.name,
|
||||
value: item.value,
|
||||
itemStyle: { color: item.color }
|
||||
})),
|
||||
animationDuration: 800
|
||||
}]
|
||||
};
|
||||
|
||||
return (
|
||||
<ReactECharts
|
||||
option={option}
|
||||
style={{ height: '300px', width: '100%' }}
|
||||
opts={{ renderer: 'canvas' }}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
// 板块热力图组件
|
||||
@@ -592,27 +628,7 @@ export const DataAnalysis = ({ dailyData, wordCloudData, totalStocks, dateStr })
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel>
|
||||
<ResponsiveContainer width="100%" height={400}>
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={pieData}
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
labelLine={false}
|
||||
label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
|
||||
outerRadius={120}
|
||||
fill="#8884d8"
|
||||
dataKey="value"
|
||||
animationBegin={0}
|
||||
animationDuration={800}
|
||||
>
|
||||
{pieData.map((entry, index) => (
|
||||
<Cell key={`cell-${index}`} fill={CHART_COLORS[index % CHART_COLORS.length]} />
|
||||
))}
|
||||
</Pie>
|
||||
<RechartsTooltip />
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
<SectorPieChart data={pieData} />
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel>
|
||||
@@ -641,25 +657,7 @@ export const DataAnalysis = ({ dailyData, wordCloudData, totalStocks, dateStr })
|
||||
|
||||
<TabPanel>
|
||||
<VStack spacing={4}>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={timeDistributionData}
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
innerRadius={60}
|
||||
outerRadius={100}
|
||||
fill="#8884d8"
|
||||
paddingAngle={5}
|
||||
dataKey="value"
|
||||
>
|
||||
{timeDistributionData.map((entry, index) => (
|
||||
<Cell key={`cell-${index}`} fill={entry.color} />
|
||||
))}
|
||||
</Pie>
|
||||
<RechartsTooltip />
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
<TimeDistributionChart data={timeDistributionData} />
|
||||
<SimpleGrid columns={3} spacing={4} w="full">
|
||||
{timeDistributionData.map((item, index) => (
|
||||
<Stat key={index} textAlign="center">
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Container,
|
||||
VStack,
|
||||
HStack,
|
||||
Heading,
|
||||
@@ -263,8 +262,7 @@ export default function LimitAnalyse() {
|
||||
{/* 导航栏已由 MainLayout 提供 */}
|
||||
|
||||
{/* 顶部Header */}
|
||||
<Box bgGradient="linear(to-br, blue.500, purple.600)" color="white" py={8}>
|
||||
<Container maxW="container.xl">
|
||||
<Box bgGradient="linear(to-br, blue.500, purple.600)" color="white" py={8} px={6} borderRadius="xl">
|
||||
<SimpleGrid columns={{ base: 1, lg: 2 }} spacing={6} alignItems="stretch">
|
||||
{/* 左侧：标题置顶，注释与图例贴底 */}
|
||||
<Flex direction="column" minH="420px" justify="space-between">
|
||||
@@ -366,11 +364,10 @@ export default function LimitAnalyse() {
|
||||
</CardBody>
|
||||
</Card>
|
||||
</SimpleGrid>
|
||||
</Container>
|
||||
</Box>
|
||||
|
||||
{/* 主内容区 */}
|
||||
<Container maxW="container.xl" py={8}>
|
||||
{/* 主内容区 - padding 由 MainLayout 统一设置 */}
|
||||
<Box py={8}>
|
||||
{/* 搜索框 */}
|
||||
<AdvancedSearch onSearch={handleSearch} loading={loading} />
|
||||
|
||||
@@ -402,7 +399,7 @@ export default function LimitAnalyse() {
|
||||
|
||||
{/* 高位股统计 */}
|
||||
<HighPositionStocks dateStr={dateStr} />
|
||||
</Container>
|
||||
</Box>
|
||||
|
||||
{/* 弹窗 */}
|
||||
<SearchResultsModal
|
||||
|
||||
@@ -182,7 +182,7 @@ export default function ProfilePage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<Container maxW="container.xl" py={8}>
|
||||
<Box py={8}>
|
||||
<VStack spacing={8} align="stretch">
|
||||
{/* 页面标题 */}
|
||||
<HStack justify="space-between">
|
||||
@@ -627,6 +627,6 @@ export default function ProfilePage() {
|
||||
</VStack>
|
||||
</SimpleGrid>
|
||||
</VStack>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -135,7 +135,6 @@ const ProfilePage = () => {
|
||||
|
||||
return (
|
||||
<Box bg={forumColors.background.main} minH="100vh" py="8">
|
||||
<Container maxW="container.xl">
|
||||
{/* 用户信息头部 */}
|
||||
<Card
|
||||
bg={forumColors.background.card}
|
||||
@@ -375,7 +374,6 @@ const ProfilePage = () => {
|
||||
</Tabs>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Container,
|
||||
VStack,
|
||||
HStack,
|
||||
Text,
|
||||
@@ -219,7 +218,7 @@ export default function SettingsPage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<Container maxW="container.xl" py={8}>
|
||||
<Box py={8}>
|
||||
<VStack spacing={8} align="stretch">
|
||||
{/* 页面标题 */}
|
||||
<Heading size="lg" color={headingColor}>账户设置</Heading>
|
||||
@@ -543,6 +542,6 @@ export default function SettingsPage() {
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -3,7 +3,6 @@ import { useNavigate } from 'react-router-dom';
|
||||
import { getApiBase } from '@utils/apiConfig';
|
||||
import {
|
||||
Box,
|
||||
Container,
|
||||
Heading,
|
||||
Text,
|
||||
Input,
|
||||
@@ -633,6 +632,7 @@ const StockOverview = () => {
|
||||
pt={{ base: 20, md: 24 }}
|
||||
pb={{ base: 16, md: 20 }}
|
||||
borderBottom={`1px solid rgba(139, 92, 246, 0.3)`}
|
||||
borderRadius="xl"
|
||||
zIndex={1}
|
||||
>
|
||||
{/* 背景装饰 */}
|
||||
@@ -648,7 +648,7 @@ const StockOverview = () => {
|
||||
filter="blur(60px)"
|
||||
/>
|
||||
|
||||
<Container maxW="container.xl" position="relative">
|
||||
<Box px={6} position="relative">
|
||||
<VStack spacing={8} align="center">
|
||||
<VStack spacing={4} textAlign="center" maxW="3xl">
|
||||
<HStack spacing={3}>
|
||||
@@ -855,11 +855,11 @@ const StockOverview = () => {
|
||||
</Stat>
|
||||
</SimpleGrid>
|
||||
</VStack>
|
||||
</Container>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* 主内容区 */}
|
||||
<Container maxW="container.xl" py={10} position="relative" zIndex={1}>
|
||||
<Box py={10} px={6} position="relative" zIndex={1}>
|
||||
{/* 日期选择器 */}
|
||||
<Box mb={6}>
|
||||
<Flex align="center" gap={4} flexWrap="wrap">
|
||||
@@ -1195,7 +1195,7 @@ const StockOverview = () => {
|
||||
)}
|
||||
</Card>
|
||||
</Box>
|
||||
</Container>
|
||||
</Box>
|
||||
|
||||
{/* 个股列表弹窗 */}
|
||||
<ConceptStocksModal
|
||||
|
||||
@@ -6,7 +6,6 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Container,
|
||||
Heading,
|
||||
Text,
|
||||
HStack,
|
||||
@@ -157,7 +156,6 @@ const PostDetail = () => {
|
||||
|
||||
return (
|
||||
<Box minH="100vh" bg={forumColors.background.main} pt="80px" pb="20">
|
||||
<Container maxW="container.xl">
|
||||
{/* 返回按钮 */}
|
||||
<Button
|
||||
leftIcon={<ArrowLeft size={18} />}
|
||||
@@ -374,7 +372,6 @@ const PostDetail = () => {
|
||||
</MotionBox>
|
||||
</Box>
|
||||
</SimpleGrid>
|
||||
</Container>
|
||||
|
||||
{/* 图片预览弹窗 */}
|
||||
<ImagePreviewModal
|
||||
|
||||
@@ -6,7 +6,6 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Container,
|
||||
Heading,
|
||||
Text,
|
||||
Button,
|
||||
@@ -224,7 +223,6 @@ const PredictionTopicDetail = () => {
|
||||
|
||||
return (
|
||||
<Box minH="100vh" bg={forumColors.background.main} pt={LAYOUT_SIZE.navbarHeight} pb={{ base: "6", md: "20" }}>
|
||||
<Container maxW="container.xl" px={{ base: "3", sm: "4", md: "6" }}>
|
||||
{/* 头部：返回按钮 */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
@@ -627,7 +625,6 @@ const PredictionTopicDetail = () => {
|
||||
</MotionBox>
|
||||
</Box>
|
||||
</SimpleGrid>
|
||||
</Container>
|
||||
|
||||
{/* 交易模态框 */}
|
||||
<TradeModal
|
||||
|
||||
@@ -6,7 +6,6 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Container,
|
||||
Heading,
|
||||
Text,
|
||||
Button,
|
||||
@@ -154,7 +153,8 @@ const ValueForum = () => {
|
||||
pt="80px"
|
||||
pb="20"
|
||||
>
|
||||
<Container maxW="container.xl">
|
||||
{/* padding 由 MainLayout 统一设置 */}
|
||||
<Box>
|
||||
{/* 顶部横幅 */}
|
||||
<MotionBox
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
@@ -469,7 +469,7 @@ const ValueForum = () => {
|
||||
</TabPanel>
|
||||
</TabPanels>
|
||||
</Tabs>
|
||||
</Container>
|
||||
</Box>
|
||||
|
||||
{/* 发帖模态框 */}
|
||||
<CreatePostModal
|
||||
|
||||
Reference in New Issue
Block a user