update pay ui
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
// src/views/Community/components/HeroPanel.js
|
||||
// 顶部说明面板组件：事件中心 + 沪深指数K线图 + 热门概念3D动画
|
||||
// 交易时间内自动更新指数行情（每分钟一次）
|
||||
|
||||
import React, { useEffect, useState, useMemo, useCallback, useRef } from 'react';
|
||||
import {
|
||||
@@ -22,10 +23,12 @@ import {
|
||||
ModalHeader,
|
||||
ModalBody,
|
||||
ModalCloseButton,
|
||||
Tooltip,
|
||||
} from '@chakra-ui/react';
|
||||
import { AlertCircle, Clock, TrendingUp, Info } from 'lucide-react';
|
||||
import { AlertCircle, Clock, TrendingUp, Info, RefreshCw } from 'lucide-react';
|
||||
import ReactECharts from 'echarts-for-react';
|
||||
import { logger } from '../../../utils/logger';
|
||||
import { useIndexQuote } from '../../../hooks/useIndexQuote';
|
||||
|
||||
// 定义动画
|
||||
const animations = `
|
||||
@@ -104,6 +107,7 @@ const isInTradingTime = () => {
|
||||
|
||||
/**
|
||||
* 精美K线指数卡片 - 类似 KLineChartModal 风格
|
||||
* 交易时间内自动更新实时行情（每分钟一次）
|
||||
*/
|
||||
const CompactIndexCard = ({ indexCode, indexName }) => {
|
||||
const [chartData, setChartData] = useState(null);
|
||||
@@ -113,38 +117,66 @@ const CompactIndexCard = ({ indexCode, indexName }) => {
|
||||
const upColor = '#ef5350'; // 涨 - 红色
|
||||
const downColor = '#26a69a'; // 跌 - 绿色
|
||||
|
||||
const loadData = useCallback(async () => {
|
||||
// 使用实时行情 Hook - 交易时间内每分钟自动更新
|
||||
const { quote, isTrading, refresh: refreshQuote } = useIndexQuote(indexCode, {
|
||||
refreshInterval: 60000, // 1分钟
|
||||
autoRefresh: true,
|
||||
});
|
||||
|
||||
// 加载日K线图数据
|
||||
const loadChartData = useCallback(async () => {
|
||||
const data = await fetchIndexKline(indexCode);
|
||||
if (data?.data?.length > 0) {
|
||||
const latest = data.data[data.data.length - 1];
|
||||
const prevClose = latest.prev_close || data.data[data.data.length - 2]?.close || latest.open;
|
||||
const changeAmount = latest.close - prevClose;
|
||||
const changePct = prevClose ? ((changeAmount / prevClose) * 100) : 0;
|
||||
|
||||
setLatestData({
|
||||
close: latest.close,
|
||||
open: latest.open,
|
||||
high: latest.high,
|
||||
low: latest.low,
|
||||
changeAmount: changeAmount,
|
||||
changePct: changePct,
|
||||
isPositive: changeAmount >= 0
|
||||
});
|
||||
|
||||
const recentData = data.data.slice(-60); // 增加到60天
|
||||
const recentData = data.data.slice(-60); // 最近60天
|
||||
setChartData({
|
||||
dates: recentData.map(item => item.time),
|
||||
klineData: recentData.map(item => [item.open, item.close, item.low, item.high]),
|
||||
volumes: recentData.map(item => item.volume || 0),
|
||||
rawData: recentData
|
||||
});
|
||||
|
||||
// 如果没有实时行情，使用日线数据的最新值
|
||||
if (!quote) {
|
||||
const latest = data.data[data.data.length - 1];
|
||||
const prevClose = latest.prev_close || data.data[data.data.length - 2]?.close || latest.open;
|
||||
const changeAmount = latest.close - prevClose;
|
||||
const changePct = prevClose ? ((changeAmount / prevClose) * 100) : 0;
|
||||
|
||||
setLatestData({
|
||||
close: latest.close,
|
||||
open: latest.open,
|
||||
high: latest.high,
|
||||
low: latest.low,
|
||||
changeAmount: changeAmount,
|
||||
changePct: changePct,
|
||||
isPositive: changeAmount >= 0
|
||||
});
|
||||
}
|
||||
}
|
||||
setLoading(false);
|
||||
}, [indexCode]);
|
||||
}, [indexCode, quote]);
|
||||
|
||||
// 初始加载日K数据
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, [loadData]);
|
||||
loadChartData();
|
||||
}, [loadChartData]);
|
||||
|
||||
// 当实时行情更新时，更新 latestData
|
||||
useEffect(() => {
|
||||
if (quote) {
|
||||
setLatestData({
|
||||
close: quote.price,
|
||||
open: quote.open,
|
||||
high: quote.high,
|
||||
low: quote.low,
|
||||
changeAmount: quote.change,
|
||||
changePct: quote.change_pct,
|
||||
isPositive: quote.change >= 0,
|
||||
updateTime: quote.update_time,
|
||||
isRealtime: true,
|
||||
});
|
||||
}
|
||||
}, [quote]);
|
||||
|
||||
const chartOption = useMemo(() => {
|
||||
if (!chartData) return {};
|
||||
@@ -306,6 +338,30 @@ const CompactIndexCard = ({ indexCode, indexName }) => {
|
||||
<Text fontSize="sm" color="whiteAlpha.800" fontWeight="semibold">
|
||||
{indexName}
|
||||
</Text>
|
||||
{/* 实时状态指示 */}
|
||||
{isTrading && latestData?.isRealtime && (
|
||||
<Tooltip label="实时行情，每分钟更新" placement="top">
|
||||
<HStack
|
||||
spacing={1}
|
||||
px={1.5}
|
||||
py={0.5}
|
||||
bg="rgba(0,218,60,0.1)"
|
||||
borderRadius="full"
|
||||
border="1px solid rgba(0,218,60,0.3)"
|
||||
>
|
||||
<Box
|
||||
w="5px"
|
||||
h="5px"
|
||||
borderRadius="full"
|
||||
bg="#00da3c"
|
||||
animation="pulse 1.5s infinite"
|
||||
/>
|
||||
<Text fontSize="9px" color="#00da3c" fontWeight="bold">
|
||||
实时
|
||||
</Text>
|
||||
</HStack>
|
||||
</Tooltip>
|
||||
)}
|
||||
</HStack>
|
||||
<HStack spacing={3}>
|
||||
<Text fontSize="lg" fontWeight="bold" color="white" fontFamily="monospace">
|
||||
@@ -338,16 +394,22 @@ const CompactIndexCard = ({ indexCode, indexName }) => {
|
||||
style={{ height: '100%', width: '100%' }}
|
||||
opts={{ renderer: 'canvas' }}
|
||||
/>
|
||||
{/* 底部提示 */}
|
||||
<Text
|
||||
{/* 底部提示 - 显示更新时间 */}
|
||||
<HStack
|
||||
position="absolute"
|
||||
bottom={0}
|
||||
right={1}
|
||||
fontSize="9px"
|
||||
color="whiteAlpha.300"
|
||||
spacing={2}
|
||||
>
|
||||
滚轮缩放 · 拖动查看
|
||||
</Text>
|
||||
{latestData?.updateTime && (
|
||||
<Text fontSize="9px" color="whiteAlpha.400">
|
||||
{latestData.updateTime}
|
||||
</Text>
|
||||
)}
|
||||
<Text fontSize="9px" color="whiteAlpha.300">
|
||||
滚轮缩放 · 拖动查看
|
||||
</Text>
|
||||
</HStack>
|
||||
</Box>
|
||||
</Flex>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user