update pay function
This commit is contained in:
@@ -1,27 +1,9 @@
|
||||
// src/components/StockChart/KLineChartModal.tsx - K线图弹窗组件
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
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 { stockService } from '@services/eventService';
|
||||
import { logger } from '@utils/logger';
|
||||
import theme from '@theme/theme';
|
||||
|
||||
/**
|
||||
* 股票信息
|
||||
@@ -477,79 +459,153 @@ const KLineChartModal: React.FC<KLineChartModalProps> = ({
|
||||
// 获取 Portal 容器
|
||||
const portalContainer = document.getElementById('kline-modal-root') || document.body;
|
||||
|
||||
// 如果不显示则返回 null
|
||||
if (!isOpen) return null;
|
||||
|
||||
const modalContent = (
|
||||
<ChakraProvider theme={theme}>
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
size={size}
|
||||
blockScrollOnMount={false}
|
||||
isCentered
|
||||
<>
|
||||
{/* 遮罩层 */}
|
||||
<div
|
||||
style={{
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
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" />
|
||||
<ModalContent
|
||||
maxW="90vw"
|
||||
maxH="85vh"
|
||||
bg="#1a1a1a"
|
||||
border="2px solid #ffd700"
|
||||
boxShadow="0 0 30px rgba(255, 215, 0, 0.5)"
|
||||
{/* Header */}
|
||||
<div
|
||||
style={{
|
||||
padding: '16px 24px',
|
||||
borderBottom: '1px solid #404040',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'flex-start',
|
||||
}}
|
||||
>
|
||||
<ModalHeader pb={3} borderBottomWidth="1px" borderColor="#404040">
|
||||
<VStack align="flex-start" spacing={1}>
|
||||
<HStack spacing={3}>
|
||||
<Text fontSize="lg" fontWeight="bold" color="#e0e0e0">
|
||||
<div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
|
||||
<span style={{ fontSize: '18px', fontWeight: 'bold', color: '#e0e0e0' }}>
|
||||
{stock.stock_name || stock.stock_code} ({stock.stock_code})
|
||||
</Text>
|
||||
</span>
|
||||
{data.length > 0 && (
|
||||
<Text fontSize="xs" color="#666" fontStyle="italic">
|
||||
<span style={{ fontSize: '12px', color: '#666', fontStyle: 'italic' }}>
|
||||
共{data.length}个交易日（最多1年）
|
||||
</Text>
|
||||
</span>
|
||||
)}
|
||||
</HStack>
|
||||
<HStack spacing={4}>
|
||||
<Text fontSize="sm" color="#999">
|
||||
日K线图
|
||||
</Text>
|
||||
<Text fontSize="xs" color="#666">
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '16px', marginTop: '4px' }}>
|
||||
<span style={{ fontSize: '14px', color: '#999' }}>日K线图</span>
|
||||
<span style={{ fontSize: '12px', color: '#666' }}>
|
||||
💡 鼠标滚轮缩放 | 拖动查看不同时间段
|
||||
</Text>
|
||||
</HStack>
|
||||
</VStack>
|
||||
</ModalHeader>
|
||||
<ModalCloseButton color="#999" _hover={{ color: '#e0e0e0' }} />
|
||||
<ModalBody p={4}>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
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 && (
|
||||
<Alert status="error" bg="#2a1a1a" borderColor="#ef5350" mb={4}>
|
||||
<AlertIcon color="#ef5350" />
|
||||
<Text color="#e0e0e0">{error}</Text>
|
||||
</Alert>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#2a1a1a',
|
||||
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 && (
|
||||
<Flex
|
||||
position="absolute"
|
||||
top="0"
|
||||
left="0"
|
||||
right="0"
|
||||
bottom="0"
|
||||
bg="rgba(26, 26, 26, 0.7)"
|
||||
zIndex="10"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: 'rgba(26, 26, 26, 0.7)',
|
||||
zIndex: 10,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: '16px',
|
||||
}}
|
||||
>
|
||||
<VStack spacing={4}>
|
||||
<CircularProgress isIndeterminate color="blue.400" />
|
||||
<Text color="#e0e0e0">加载K线数据...</Text>
|
||||
</VStack>
|
||||
</Flex>
|
||||
<div
|
||||
style={{
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
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%' }} />
|
||||
</Box>
|
||||
</ModalBody>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
</ChakraProvider>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* 添加旋转动画的 CSS */}
|
||||
<style>{`
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
`}</style>
|
||||
</>
|
||||
);
|
||||
|
||||
return createPortal(modalContent, portalContainer);
|
||||
|
||||
Reference in New Issue
Block a user