274 lines
8.7 KiB
TypeScript
274 lines
8.7 KiB
TypeScript
/**
|
||
* StockQuoteCard - 股票行情卡片组件
|
||
*
|
||
* 展示股票的实时行情、关键指标和主力动态
|
||
*/
|
||
|
||
import React from 'react';
|
||
import {
|
||
Box,
|
||
Card,
|
||
CardBody,
|
||
Flex,
|
||
HStack,
|
||
VStack,
|
||
Text,
|
||
Badge,
|
||
Progress,
|
||
Skeleton,
|
||
IconButton,
|
||
Tooltip,
|
||
} from '@chakra-ui/react';
|
||
import { Share2 } from 'lucide-react';
|
||
|
||
import FavoriteButton from '@components/FavoriteButton';
|
||
import type { StockQuoteCardProps } from './types';
|
||
import { mockStockQuoteData } from './mockData';
|
||
|
||
/**
|
||
* 格式化价格显示
|
||
*/
|
||
const formatPrice = (price: number): string => {
|
||
return price.toLocaleString('zh-CN', {
|
||
minimumFractionDigits: 2,
|
||
maximumFractionDigits: 2,
|
||
});
|
||
};
|
||
|
||
/**
|
||
* 格式化涨跌幅显示
|
||
*/
|
||
const formatChangePercent = (percent: number): string => {
|
||
const sign = percent >= 0 ? '+' : '';
|
||
return `${sign}${percent.toFixed(2)}%`;
|
||
};
|
||
|
||
/**
|
||
* 格式化主力净流入显示
|
||
*/
|
||
const formatNetInflow = (value: number): string => {
|
||
const sign = value >= 0 ? '+' : '';
|
||
return `${sign}${value.toFixed(2)}亿`;
|
||
};
|
||
|
||
const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
|
||
data = mockStockQuoteData,
|
||
isLoading = false,
|
||
isInWatchlist = false,
|
||
isWatchlistLoading = false,
|
||
onWatchlistToggle,
|
||
onShare,
|
||
}) => {
|
||
// 处理分享点击
|
||
const handleShare = () => {
|
||
onShare?.();
|
||
};
|
||
|
||
// 黑金主题颜色配置
|
||
const cardBg = '#1A202C';
|
||
const borderColor = '#C9A961';
|
||
const labelColor = '#C9A961';
|
||
const valueColor = '#F4D03F';
|
||
const sectionTitleColor = '#F4D03F';
|
||
|
||
// 涨跌颜色（红涨绿跌）
|
||
const upColor = '#F44336'; // 涨 - 红色
|
||
const downColor = '#4CAF50'; // 跌 - 绿色
|
||
const priceColor = data.changePercent >= 0 ? upColor : downColor;
|
||
const inflowColor = data.mainNetInflow >= 0 ? upColor : downColor;
|
||
|
||
if (isLoading) {
|
||
return (
|
||
<Card bg={cardBg} shadow="sm" borderWidth="1px" borderColor={borderColor}>
|
||
<CardBody>
|
||
<Skeleton height="120px" />
|
||
</CardBody>
|
||
</Card>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<Card bg={cardBg} shadow="sm" borderWidth="1px" borderColor={borderColor}>
|
||
<CardBody>
|
||
{/* 顶部：股票名称 + 关注/分享按钮 + 更新时间 */}
|
||
<Flex justify="space-between" align="center" mb={4}>
|
||
{/* 左侧：名称（代码） | 指数标签 */}
|
||
<HStack spacing={2}>
|
||
<Text fontSize="22px" fontWeight="bold" color={valueColor}>
|
||
{data.name}（{data.code}）
|
||
</Text>
|
||
{data.indexTags.length > 0 && (
|
||
<>
|
||
<Text color={labelColor} fontSize="22px" fontWeight="light">|</Text>
|
||
<Text fontSize="16px" color={labelColor}>
|
||
{data.indexTags.join('、')}
|
||
</Text>
|
||
</>
|
||
)}
|
||
</HStack>
|
||
|
||
{/* 右侧：关注 + 分享 + 时间 */}
|
||
<HStack spacing={3}>
|
||
<FavoriteButton
|
||
isFavorite={isInWatchlist}
|
||
isLoading={isWatchlistLoading}
|
||
onClick={onWatchlistToggle || (() => {})}
|
||
colorScheme="gold"
|
||
size="sm"
|
||
/>
|
||
<Tooltip label="分享" placement="top">
|
||
<IconButton
|
||
aria-label="分享"
|
||
icon={<Share2 size={18} />}
|
||
variant="ghost"
|
||
color={labelColor}
|
||
size="sm"
|
||
onClick={handleShare}
|
||
_hover={{ bg: 'whiteAlpha.100' }}
|
||
/>
|
||
</Tooltip>
|
||
<Text fontSize="14px" color={labelColor}>
|
||
{data.updateTime.split(' ')[1]}
|
||
</Text>
|
||
</HStack>
|
||
</Flex>
|
||
|
||
{/* 三栏布局 */}
|
||
<Flex gap={8}>
|
||
{/* 左栏：价格信息 */}
|
||
<Box flex="1">
|
||
<HStack align="baseline" spacing={3} mb={3}>
|
||
<Text fontSize="48px" fontWeight="bold" color={priceColor}>
|
||
{formatPrice(data.currentPrice)}
|
||
</Text>
|
||
<Badge
|
||
bg={data.changePercent >= 0 ? upColor : downColor}
|
||
color="#FFFFFF"
|
||
fontSize="20px"
|
||
fontWeight="bold"
|
||
px={3}
|
||
py={1}
|
||
borderRadius="md"
|
||
>
|
||
{formatChangePercent(data.changePercent)}
|
||
</Badge>
|
||
</HStack>
|
||
{/* 次要行情：今开 | 昨收 | 最高 | 最低 */}
|
||
<HStack spacing={4} fontSize="14px" flexWrap="wrap">
|
||
<Text color={labelColor}>
|
||
今开：
|
||
<Text as="span" color={valueColor} fontWeight="bold">
|
||
{formatPrice(data.todayOpen)}
|
||
</Text>
|
||
</Text>
|
||
<Text color={borderColor}>|</Text>
|
||
<Text color={labelColor}>
|
||
昨收：
|
||
<Text as="span" color={valueColor} fontWeight="bold">
|
||
{formatPrice(data.yesterdayClose)}
|
||
</Text>
|
||
</Text>
|
||
<Text color={borderColor}>|</Text>
|
||
<Text color={labelColor}>
|
||
最高：
|
||
<Text as="span" color={upColor} fontWeight="bold">
|
||
{formatPrice(data.todayHigh)}
|
||
</Text>
|
||
</Text>
|
||
<Text color={borderColor}>|</Text>
|
||
<Text color={labelColor}>
|
||
最低：
|
||
<Text as="span" color={downColor} fontWeight="bold">
|
||
{formatPrice(data.todayLow)}
|
||
</Text>
|
||
</Text>
|
||
</HStack>
|
||
</Box>
|
||
|
||
{/* 中栏：关键指标 */}
|
||
<Box flex="1" borderLeftWidth="1px" borderColor={borderColor} pl={8}>
|
||
<Text
|
||
fontSize="14px"
|
||
fontWeight="bold"
|
||
color={sectionTitleColor}
|
||
mb={3}
|
||
>
|
||
关键指标
|
||
</Text>
|
||
<VStack align="stretch" spacing={2} fontSize="14px">
|
||
<HStack justify="space-between">
|
||
<Text color={labelColor}>市盈率(PE)：</Text>
|
||
<Text color={valueColor} fontWeight="bold" fontSize="16px">
|
||
{data.pe.toFixed(2)}
|
||
</Text>
|
||
</HStack>
|
||
<HStack justify="space-between">
|
||
<Text color={labelColor}>市净率(PB)：</Text>
|
||
<Text color={valueColor} fontWeight="bold" fontSize="16px">
|
||
{data.pb.toFixed(2)}
|
||
</Text>
|
||
</HStack>
|
||
<HStack justify="space-between">
|
||
<Text color={labelColor}>流通市值：</Text>
|
||
<Text color={valueColor} fontWeight="bold" fontSize="16px">
|
||
{data.marketCap}
|
||
</Text>
|
||
</HStack>
|
||
<HStack justify="space-between">
|
||
<Text color={labelColor}>52周波动：</Text>
|
||
<Text color={valueColor} fontWeight="bold" fontSize="16px">
|
||
{formatPrice(data.week52Low)}-{formatPrice(data.week52High)}
|
||
</Text>
|
||
</HStack>
|
||
</VStack>
|
||
</Box>
|
||
|
||
{/* 右栏：主力动态 */}
|
||
<Box flex="1" borderLeftWidth="1px" borderColor={borderColor} pl={8}>
|
||
<Text
|
||
fontSize="14px"
|
||
fontWeight="bold"
|
||
color={sectionTitleColor}
|
||
mb={3}
|
||
>
|
||
主力动态
|
||
</Text>
|
||
<VStack align="stretch" spacing={2} fontSize="14px">
|
||
<HStack justify="space-between">
|
||
<Text color={labelColor}>主力净流入：</Text>
|
||
<Text color={inflowColor} fontWeight="bold" fontSize="16px">
|
||
{formatNetInflow(data.mainNetInflow)}
|
||
</Text>
|
||
</HStack>
|
||
<HStack justify="space-between">
|
||
<Text color={labelColor}>机构持仓：</Text>
|
||
<Text color={valueColor} fontWeight="bold" fontSize="16px">
|
||
{data.institutionHolding.toFixed(2)}%
|
||
</Text>
|
||
</HStack>
|
||
{/* 买卖比例条 */}
|
||
<Box mt={1}>
|
||
<Progress
|
||
value={data.buyRatio}
|
||
size="sm"
|
||
sx={{
|
||
'& > div': { bg: upColor },
|
||
}}
|
||
bg={downColor}
|
||
borderRadius="full"
|
||
/>
|
||
<HStack justify="space-between" mt={1} fontSize="14px">
|
||
<Text color={upColor}>买入{data.buyRatio}%</Text>
|
||
<Text color={downColor}>卖出{data.sellRatio}%</Text>
|
||
</HStack>
|
||
</Box>
|
||
</VStack>
|
||
</Box>
|
||
</Flex>
|
||
</CardBody>
|
||
</Card>
|
||
);
|
||
};
|
||
|
||
export default StockQuoteCard;
|