138 lines
3.6 KiB
JavaScript
138 lines
3.6 KiB
JavaScript
// src/views/Community/components/DynamicNewsDetail/CompactStockItem.js
|
||
// 精简模式股票卡片组件（浮动卡片样式）
|
||
|
||
import React from 'react';
|
||
import {
|
||
Box,
|
||
Text,
|
||
Tooltip,
|
||
useColorModeValue,
|
||
} from '@chakra-ui/react';
|
||
|
||
/**
|
||
* 精简模式股票卡片组件
|
||
* @param {Object} props
|
||
* @param {Object} props.stock - 股票对象
|
||
* @param {Object} props.quote - 股票行情数据（可选）
|
||
*/
|
||
const CompactStockItem = ({ stock, quote = null }) => {
|
||
const nameColor = useColorModeValue('gray.700', 'gray.300');
|
||
|
||
const handleViewDetail = () => {
|
||
const stockCode = stock.stock_code.split('.')[0];
|
||
window.open(`https://valuefrontier.cn/company?scode=${stockCode}`, '_blank');
|
||
};
|
||
|
||
// 格式化涨跌幅显示
|
||
const formatChange = (value) => {
|
||
if (value === null || value === undefined || isNaN(value)) return '--';
|
||
const prefix = value > 0 ? '+' : '';
|
||
return `${prefix}${parseFloat(value).toFixed(2)}%`;
|
||
};
|
||
|
||
// 获取涨跌幅颜色（涨红跌绿）
|
||
const getChangeColor = (value) => {
|
||
const num = parseFloat(value);
|
||
if (isNaN(num) || num === 0) return 'gray.500';
|
||
return num > 0 ? 'red.500' : 'green.500';
|
||
};
|
||
|
||
// 获取背景渐变色（涨红跌绿）
|
||
const getBackgroundGradient = (value) => {
|
||
const num = parseFloat(value);
|
||
if (isNaN(num) || num === 0) {
|
||
return 'linear(to-br, gray.50, gray.100)';
|
||
}
|
||
return num > 0
|
||
? 'linear(to-br, red.50, red.100)'
|
||
: 'linear(to-br, green.50, green.100)';
|
||
};
|
||
|
||
// 获取边框颜色
|
||
const getBorderColor = (value) => {
|
||
const num = parseFloat(value);
|
||
if (isNaN(num) || num === 0) return 'gray.300';
|
||
return num > 0 ? 'red.300' : 'green.300';
|
||
};
|
||
|
||
// 获取涨跌幅数据（优先使用 quote，fallback 到 stock）
|
||
const change = quote?.change ?? stock.daily_change ?? null;
|
||
|
||
return (
|
||
<Tooltip
|
||
label={`${stock.stock_name} - 点击查看详情`}
|
||
placement="top"
|
||
hasArrow
|
||
bg="gray.700"
|
||
color="white"
|
||
fontSize="xs"
|
||
>
|
||
<Box
|
||
bgGradient={getBackgroundGradient(change)}
|
||
borderWidth="3px"
|
||
borderColor={getBorderColor(change)}
|
||
borderRadius="2xl"
|
||
p={4}
|
||
onClick={handleViewDetail}
|
||
cursor="pointer"
|
||
boxShadow="lg"
|
||
position="relative"
|
||
overflow="hidden"
|
||
_before={{
|
||
content: '""',
|
||
position: 'absolute',
|
||
top: 0,
|
||
left: 0,
|
||
right: 0,
|
||
height: '4px',
|
||
bg: getBorderColor(change),
|
||
}}
|
||
_hover={{
|
||
boxShadow: '2xl',
|
||
transform: 'translateY(-4px) scale(1.02)',
|
||
}}
|
||
transition="all 0.3s ease-in-out"
|
||
display="inline-block"
|
||
minW="150px"
|
||
>
|
||
{/* 股票代码 */}
|
||
<Text
|
||
fontSize="md"
|
||
fontWeight="bold"
|
||
color={getChangeColor(change)}
|
||
mb={2}
|
||
textAlign="center"
|
||
>
|
||
{stock.stock_code}
|
||
</Text>
|
||
|
||
{/* 涨跌幅 - 超大号显示 */}
|
||
<Text
|
||
fontSize="3xl"
|
||
fontWeight="black"
|
||
color={getChangeColor(change)}
|
||
textAlign="center"
|
||
lineHeight="1"
|
||
textShadow="0 1px 2px rgba(0,0,0,0.1)"
|
||
>
|
||
{formatChange(change)}
|
||
</Text>
|
||
|
||
{/* 股票名称（小字） */}
|
||
<Text
|
||
fontSize="xs"
|
||
color={nameColor}
|
||
mt={2}
|
||
textAlign="center"
|
||
noOfLines={1}
|
||
fontWeight="medium"
|
||
>
|
||
{stock.stock_name}
|
||
</Text>
|
||
</Box>
|
||
</Tooltip>
|
||
);
|
||
};
|
||
|
||
export default CompactStockItem;
|