chore: 清理废弃的组件和样式文件
This commit is contained in:
zdl
@@ -1,160 +0,0 @@
|
||||
// 市场概况卡片 - 紧凑版（上证/深证/总市值/成交额）
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Box, Text, VStack, HStack, SimpleGrid } from '@chakra-ui/react';
|
||||
import { THEME } from '../../constants';
|
||||
import { getApiBase } from '@/utils/apiConfig';
|
||||
|
||||
/**
|
||||
* 格式化大数字（万亿/亿）
|
||||
*/
|
||||
const formatLargeNumber = (num) => {
|
||||
if (!num && num !== 0) return '--';
|
||||
const trillion = 1000000000000; // 万亿
|
||||
const billion = 100000000; // 亿
|
||||
|
||||
if (num >= trillion) {
|
||||
return `${(num / trillion).toFixed(1)}万亿`;
|
||||
} else if (num >= billion) {
|
||||
return `${(num / billion).toFixed(1)}亿`;
|
||||
}
|
||||
return num.toLocaleString();
|
||||
};
|
||||
|
||||
/**
|
||||
* 单个指数/统计项
|
||||
*/
|
||||
const SummaryItem = ({ label, value, change, changeAmount, subValue, isIndex = true }) => {
|
||||
const isUp = change > 0;
|
||||
const isFlat = change === 0;
|
||||
const changeColor = isFlat
|
||||
? 'rgba(255, 255, 255, 0.6)'
|
||||
: isUp ? THEME.status.up : THEME.status.down;
|
||||
|
||||
return (
|
||||
<VStack align="flex-start" spacing={0.5} py={2}>
|
||||
{/* 标签 */}
|
||||
<Text fontSize="xs" color="rgba(255, 255, 255, 0.5)">
|
||||
{label}
|
||||
</Text>
|
||||
|
||||
{/* 主数值 */}
|
||||
<Text
|
||||
fontSize="lg"
|
||||
fontWeight="bold"
|
||||
color="rgba(255, 255, 255, 0.95)"
|
||||
lineHeight="1.2"
|
||||
>
|
||||
{typeof value === 'number' ? value.toFixed(2) : value}
|
||||
</Text>
|
||||
|
||||
{/* 涨跌信息（仅指数显示） */}
|
||||
{isIndex && change !== undefined ? (
|
||||
<Text fontSize="xs" color={changeColor}>
|
||||
{changeAmount !== undefined && (
|
||||
<Text as="span" mr={1}>
|
||||
{isUp ? '+' : ''}{typeof changeAmount === 'number' ? changeAmount.toFixed(2) : changeAmount}
|
||||
</Text>
|
||||
)}
|
||||
{isUp ? '+' : ''}{change.toFixed(2)}%
|
||||
</Text>
|
||||
) : (
|
||||
// 非指数项显示副标签
|
||||
<Text fontSize="xs" color="rgba(255, 255, 255, 0.4)">
|
||||
{subValue || label}
|
||||
</Text>
|
||||
)}
|
||||
</VStack>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* 市场概况卡片
|
||||
*/
|
||||
const MarketSummaryCard = () => {
|
||||
const [marketData, setMarketData] = useState({
|
||||
shanghai: { value: 3391.88, change: 0.52, changeAmount: 17.55 },
|
||||
shenzhen: { value: 10723.49, change: 0.68, changeAmount: 72.38 },
|
||||
totalMarketCap: 105.6 * 1000000000000, // 105.6万亿
|
||||
turnover: 1.0 * 1000000000000, // 1.0万亿
|
||||
});
|
||||
|
||||
// 获取实时数据
|
||||
useEffect(() => {
|
||||
const fetchMarketData = async () => {
|
||||
try {
|
||||
const base = getApiBase();
|
||||
const response = await fetch(`${base}/api/market/summary`, {
|
||||
credentials: 'include',
|
||||
});
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
if (data.success && data.data) {
|
||||
setMarketData(prev => ({
|
||||
...prev,
|
||||
...data.data,
|
||||
}));
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
// 使用默认数据
|
||||
console.debug('Using default market data');
|
||||
}
|
||||
};
|
||||
|
||||
fetchMarketData();
|
||||
// 每分钟更新一次
|
||||
const interval = setInterval(fetchMarketData, 60000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Box
|
||||
bg="rgba(26, 26, 46, 0.6)"
|
||||
borderRadius="lg"
|
||||
px={3}
|
||||
py={2}
|
||||
border="1px solid"
|
||||
borderColor="rgba(212, 175, 55, 0.15)"
|
||||
backdropFilter="blur(8px)"
|
||||
minW="200px"
|
||||
>
|
||||
<SimpleGrid columns={2} spacing={0}>
|
||||
{/* 上证 */}
|
||||
<SummaryItem
|
||||
label="上证"
|
||||
value={marketData.shanghai.value}
|
||||
change={marketData.shanghai.change}
|
||||
changeAmount={marketData.shanghai.changeAmount}
|
||||
isIndex={true}
|
||||
/>
|
||||
|
||||
{/* 深证 */}
|
||||
<SummaryItem
|
||||
label="深证"
|
||||
value={marketData.shenzhen.value}
|
||||
change={marketData.shenzhen.change}
|
||||
changeAmount={marketData.shenzhen.changeAmount}
|
||||
isIndex={true}
|
||||
/>
|
||||
|
||||
{/* 总市值 */}
|
||||
<SummaryItem
|
||||
label="总市值"
|
||||
value={formatLargeNumber(marketData.totalMarketCap)}
|
||||
subValue={formatLargeNumber(marketData.totalMarketCap)}
|
||||
isIndex={false}
|
||||
/>
|
||||
|
||||
{/* 成交额 */}
|
||||
<SummaryItem
|
||||
label="成交额"
|
||||
value={formatLargeNumber(marketData.turnover)}
|
||||
subValue="成交万亿"
|
||||
isIndex={false}
|
||||
/>
|
||||
</SimpleGrid>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default MarketSummaryCard;
|
||||
@@ -8,10 +8,7 @@ export { default as StatItem } from './StatItem';
|
||||
export { default as RiseFallChart } from './RiseFallChart';
|
||||
export { default as HotSectorsRanking } from './HotSectorsRanking';
|
||||
|
||||
// 新增：K线指数卡片和涨跌分布进度条
|
||||
// K线指数卡片和涨跌分布进度条
|
||||
export { default as IndexKLineCard } from './IndexKLineCard';
|
||||
export { default as RiseFallProgressBar } from './RiseFallProgressBar';
|
||||
export { default as GemIndexCard } from './GemIndexCard';
|
||||
|
||||
// 市场概况卡片（上证/深证/总市值/成交额）
|
||||
export { default as MarketSummaryCard } from './MarketSummaryCard';
|
||||
|
||||
Reference in New Issue
Block a user