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

update pay function

Browse Source
This commit is contained in:
zzlgreat
2025-11-25 15:28:12 +08:00
parent cb9f927e3e
commit b9eddbe752
1 changed files with 132 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,27 +1,9 @@
// src/components/StockChart/KLineChartModal.tsx - K线图弹窗组件 // src/components/StockChart/KLineChartModal.tsx - K线图弹窗组件
import React, { useEffect, useRef, useState } from 'react'; import React, { useEffect, useRef, useState } from 'react';
import { createPortal } from 'react-dom'; import { createPortal } from 'react-dom';
import {
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalCloseButton,
ModalBody,
VStack,
HStack,
Text,
Box,
Flex,
CircularProgress,
Alert,
AlertIcon,
ChakraProvider,
} from '@chakra-ui/react';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import { stockService } from '@services/eventService'; import { stockService } from '@services/eventService';
import { logger } from '@utils/logger'; import { logger } from '@utils/logger';
import theme from '@theme/theme';
/** /**
* 股票信息 * 股票信息
@@ -477,79 +459,153 @@ const KLineChartModal: React.FC<KLineChartModalProps> = ({
// 获取 Portal 容器 // 获取 Portal 容器
const portalContainer = document.getElementById('kline-modal-root') || document.body; const portalContainer = document.getElementById('kline-modal-root') || document.body;
// 如果不显示则返回 null
if (!isOpen) return null;
const modalContent = ( const modalContent = (
<ChakraProvider theme={theme}> <>
<Modal {/* 遮罩层 */}
isOpen={isOpen} <div
onClose={onClose} style={{
size={size} position: 'fixed',
blockScrollOnMount={false} top: 0,
isCentered left: 0,
right: 0,
bottom: 0,
backgroundColor: 'rgba(0, 0, 0, 0.7)',
zIndex: 10001,
}}
onClick={onClose}
/>
{/* 弹窗内容 */}
<div
style={{
position: 'fixed',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: '90vw',
maxWidth: '1400px',
maxHeight: '85vh',
backgroundColor: '#1a1a1a',
border: '2px solid #ffd700',
boxShadow: '0 0 30px rgba(255, 215, 0, 0.5)',
borderRadius: '8px',
zIndex: 10002,
display: 'flex',
flexDirection: 'column',
overflow: 'hidden',
}}
> >
<ModalOverlay bg="blackAlpha.700" /> {/* Header */}
<ModalContent <div
maxW="90vw" style={{
maxH="85vh" padding: '16px 24px',
bg="#1a1a1a" borderBottom: '1px solid #404040',
border="2px solid #ffd700" display: 'flex',
boxShadow="0 0 30px rgba(255, 215, 0, 0.5)" justifyContent: 'space-between',
alignItems: 'flex-start',
}}
> >
<ModalHeader pb={3} borderBottomWidth="1px" borderColor="#404040"> <div>
<VStack align="flex-start" spacing={1}> <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
<HStack spacing={3}> <span style={{ fontSize: '18px', fontWeight: 'bold', color: '#e0e0e0' }}>
<Text fontSize="lg" fontWeight="bold" color="#e0e0e0">
{stock.stock_name || stock.stock_code} ({stock.stock_code}) {stock.stock_name || stock.stock_code} ({stock.stock_code})
</Text> </span>
{data.length > 0 && ( {data.length > 0 && (
<Text fontSize="xs" color="#666" fontStyle="italic"> <span style={{ fontSize: '12px', color: '#666', fontStyle: 'italic' }}>
共{data.length}个交易日（最多1年） 共{data.length}个交易日（最多1年）
</Text> </span>
)} )}
</HStack> </div>
<HStack spacing={4}> <div style={{ display: 'flex', alignItems: 'center', gap: '16px', marginTop: '4px' }}>
<Text fontSize="sm" color="#999"> <span style={{ fontSize: '14px', color: '#999' }}>日K线图</span>
日K线图 <span style={{ fontSize: '12px', color: '#666' }}>
</Text>
<Text fontSize="xs" color="#666">
💡 鼠标滚轮缩放 | 拖动查看不同时间段 💡 鼠标滚轮缩放 | 拖动查看不同时间段
</Text> </span>
</HStack> </div>
</VStack> </div>
</ModalHeader> <button
<ModalCloseButton color="#999" _hover={{ color: '#e0e0e0' }} /> onClick={onClose}
<ModalBody p={4}> style={{
background: 'none',
border: 'none',
color: '#999',
fontSize: '24px',
cursor: 'pointer',
padding: '0 8px',
lineHeight: '1',
}}
onMouseOver={(e) => (e.currentTarget.style.color = '#e0e0e0')}
onMouseOut={(e) => (e.currentTarget.style.color = '#999')}
>
×
</button>
</div>
{/* Body */}
<div style={{ padding: '16px', flex: 1, overflow: 'auto' }}>
{error && ( {error && (
<Alert status="error" bg="#2a1a1a" borderColor="#ef5350" mb={4}> <div
<AlertIcon color="#ef5350" /> style={{
<Text color="#e0e0e0">{error}</Text> backgroundColor: '#2a1a1a',
</Alert> border: '1px solid #ef5350',
borderRadius: '4px',
padding: '12px 16px',
marginBottom: '16px',
display: 'flex',
alignItems: 'center',
gap: '8px',
}}
>
<span style={{ color: '#ef5350' }}>⚠</span>
<span style={{ color: '#e0e0e0' }}>{error}</span>
</div>
)} )}
<Box position="relative" h="680px" w="100%"> <div style={{ position: 'relative', height: '680px', width: '100%' }}>
{loading && ( {loading && (
<Flex <div
position="absolute" style={{
top="0" position: 'absolute',
left="0" top: 0,
right="0" left: 0,
bottom="0" right: 0,
bg="rgba(26, 26, 26, 0.7)" bottom: 0,
zIndex="10" backgroundColor: 'rgba(26, 26, 26, 0.7)',
alignItems="center" zIndex: 10,
justifyContent="center" display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
gap: '16px',
}}
> >
<VStack spacing={4}> <div
<CircularProgress isIndeterminate color="blue.400" /> style={{
<Text color="#e0e0e0">加载K线数据...</Text> width: '40px',
</VStack> height: '40px',
</Flex> border: '3px solid #404040',
borderTop: '3px solid #3182ce',
borderRadius: '50%',
animation: 'spin 1s linear infinite',
}}
/>
<span style={{ color: '#e0e0e0' }}>加载K线数据...</span>
</div>
)} )}
<div ref={chartRef} style={{ width: '100%', height: '100%' }} /> <div ref={chartRef} style={{ width: '100%', height: '100%' }} />
</Box> </div>
</ModalBody> </div>
</ModalContent> </div>
</Modal> {/* 添加旋转动画的 CSS */}
</ChakraProvider> <style>{`
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
`}</style>
</>
); );
return createPortal(modalContent, portalContainer); return createPortal(modalContent, portalContainer);