117 lines
3.2 KiB
JavaScript
117 lines
3.2 KiB
JavaScript
// src/views/Community/components/DynamicNewsDetail/CompactStockItem.js
|
||
// 精简模式股票卡片组件（浮动卡片样式）
|
||
|
||
import React from 'react';
|
||
import { useSelector } from 'react-redux';
|
||
import {
|
||
Box,
|
||
Text,
|
||
Tooltip,
|
||
useColorModeValue,
|
||
} from '@chakra-ui/react';
|
||
import { selectIsMobile } from '@store/slices/deviceSlice';
|
||
import { getChangeColor, getChangeBackgroundGradient, getChangeBorderColor } from '@utils/colorUtils';
|
||
|
||
/**
|
||
* 精简模式股票卡片组件
|
||
* @param {Object} props
|
||
* @param {Object} props.stock - 股票对象
|
||
* @param {Object} props.quote - 股票行情数据（可选）
|
||
*/
|
||
const CompactStockItem = ({ stock, quote = null }) => {
|
||
const isMobile = useSelector(selectIsMobile);
|
||
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)}%`;
|
||
};
|
||
|
||
// 获取涨跌幅数据（优先使用 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={getChangeBackgroundGradient(change)}
|
||
borderWidth="1px"
|
||
borderColor={getChangeBorderColor(change)}
|
||
borderRadius="xl"
|
||
p={2}
|
||
onClick={handleViewDetail}
|
||
cursor="pointer"
|
||
boxShadow="lg"
|
||
position="relative"
|
||
overflow="hidden"
|
||
_before={{
|
||
content: '""',
|
||
position: 'absolute',
|
||
top: 0,
|
||
left: 0,
|
||
right: 0,
|
||
height: '4px',
|
||
bg: getChangeBorderColor(change),
|
||
}}
|
||
_hover={{
|
||
boxShadow: '2xl',
|
||
transform: 'translateY(-4px) scale(1.02)',
|
||
}}
|
||
transition="all 0.3s ease-in-out"
|
||
display="inline-block"
|
||
minW="100px"
|
||
>
|
||
{/* 股票代码 */}
|
||
<Text
|
||
fontSize={isMobile ? "sm" : "md"}
|
||
fontWeight="bold"
|
||
color={getChangeColor(change)}
|
||
mb={isMobile ? 1 : 2}
|
||
textAlign="center"
|
||
>
|
||
{stock.stock_code}
|
||
</Text>
|
||
|
||
{/* 涨跌幅 - 超大号显示 */}
|
||
<Text
|
||
fontSize={isMobile ? "xl" : "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={isMobile ? "2xs" : "xs"}
|
||
color={nameColor}
|
||
mt={isMobile ? 1 : 2}
|
||
textAlign="center"
|
||
noOfLines={1}
|
||
fontWeight="medium"
|
||
>
|
||
{stock.stock_name}
|
||
</Text>
|
||
</Box>
|
||
</Tooltip>
|
||
);
|
||
};
|
||
|
||
export default CompactStockItem;
|