style(StockSummaryCard): 优化黑金主题原子组件样式
This commit is contained in:
@@ -38,7 +38,7 @@ const MetricCard: React.FC<MetricCardProps> = ({
|
|||||||
rightIcon={rightIcon}
|
rightIcon={rightIcon}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<VStack align="start" spacing={1} mb={3}>
|
<VStack align="start" spacing={0.5} mb={2}>
|
||||||
<MetricValue
|
<MetricValue
|
||||||
label={mainLabel}
|
label={mainLabel}
|
||||||
value={mainValue}
|
value={mainValue}
|
||||||
@@ -47,7 +47,7 @@ const MetricCard: React.FC<MetricCardProps> = ({
|
|||||||
/>
|
/>
|
||||||
</VStack>
|
</VStack>
|
||||||
|
|
||||||
<Box color={darkGoldTheme.textMuted} fontSize="sm">
|
<Box color={darkGoldTheme.textMuted} fontSize="xs">
|
||||||
{subText}
|
{subText}
|
||||||
</Box>
|
</Box>
|
||||||
</DarkGoldCard>
|
</DarkGoldCard>
|
||||||
|
|||||||
@@ -41,43 +41,43 @@ const StockHeaderCard: React.FC<StockHeaderCardProps> = ({
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
{/* 股票名称和代码 */}
|
{/* 股票名称和代码 */}
|
||||||
<HStack spacing={2} mb={3}>
|
<HStack spacing={1.5} mb={2}>
|
||||||
<Text
|
<Text
|
||||||
color={darkGoldTheme.textPrimary}
|
color={darkGoldTheme.textPrimary}
|
||||||
fontSize="xl"
|
fontSize="md"
|
||||||
fontWeight="bold"
|
fontWeight="bold"
|
||||||
>
|
>
|
||||||
{stockName}
|
{stockName}
|
||||||
</Text>
|
</Text>
|
||||||
<Text color={darkGoldTheme.textMuted} fontSize="md">
|
<Text color={darkGoldTheme.textMuted} fontSize="xs">
|
||||||
({stockCode})
|
({stockCode})
|
||||||
</Text>
|
</Text>
|
||||||
</HStack>
|
</HStack>
|
||||||
|
|
||||||
{/* 价格和涨跌幅 */}
|
{/* 价格和涨跌幅 */}
|
||||||
<HStack spacing={3} align="baseline" mb={2}>
|
<HStack spacing={2} align="baseline" mb={1.5}>
|
||||||
<Text
|
<Text
|
||||||
color={priceColor}
|
color={priceColor}
|
||||||
fontSize="4xl"
|
fontSize="2xl"
|
||||||
fontWeight="bold"
|
fontWeight="bold"
|
||||||
lineHeight="1"
|
lineHeight="1"
|
||||||
>
|
>
|
||||||
{price.toFixed(2)}
|
{price.toFixed(2)}
|
||||||
</Text>
|
</Text>
|
||||||
<HStack spacing={1} align="center">
|
<HStack spacing={0.5} align="center">
|
||||||
<Icon
|
<Icon
|
||||||
as={isUp ? TrendingUp : TrendingDown}
|
as={isUp ? TrendingUp : TrendingDown}
|
||||||
color={priceColor}
|
color={priceColor}
|
||||||
boxSize={5}
|
boxSize={3}
|
||||||
/>
|
/>
|
||||||
<Text color={priceColor} fontSize="lg" fontWeight="bold">
|
<Text color={priceColor} fontSize="sm" fontWeight="bold">
|
||||||
{isUp ? '+' : ''}{changePercent.toFixed(2)}%
|
{isUp ? '+' : ''}{changePercent.toFixed(2)}%
|
||||||
</Text>
|
</Text>
|
||||||
</HStack>
|
</HStack>
|
||||||
</HStack>
|
</HStack>
|
||||||
|
|
||||||
{/* 走势简述 */}
|
{/* 走势简述 */}
|
||||||
<Text color={darkGoldTheme.textMuted} fontSize="sm">
|
<Text color={darkGoldTheme.textMuted} fontSize="xs">
|
||||||
走势简述:
|
走势简述:
|
||||||
<Text as="span" color={priceColor} fontWeight="medium">
|
<Text as="span" color={priceColor} fontWeight="medium">
|
||||||
{trendDesc}
|
{trendDesc}
|
||||||
|
|||||||
@@ -19,13 +19,13 @@ const CardTitle: React.FC<CardTitleProps> = ({
|
|||||||
leftIcon,
|
leftIcon,
|
||||||
rightIcon,
|
rightIcon,
|
||||||
}) => (
|
}) => (
|
||||||
<Flex justify="space-between" align="center" mb={4}>
|
<Flex justify="space-between" align="center" mb={2}>
|
||||||
<HStack spacing={2}>
|
<HStack spacing={1.5}>
|
||||||
<Box color={darkGoldTheme.gold}>{leftIcon}</Box>
|
<Box color={darkGoldTheme.gold}>{leftIcon}</Box>
|
||||||
<Text color={darkGoldTheme.gold} fontSize="lg" fontWeight="bold">
|
<Text color={darkGoldTheme.gold} fontSize="sm" fontWeight="bold">
|
||||||
{title}
|
{title}
|
||||||
</Text>
|
</Text>
|
||||||
<Text color={darkGoldTheme.textMuted} fontSize="sm">
|
<Text color={darkGoldTheme.textMuted} fontSize="xs">
|
||||||
({subtitle})
|
({subtitle})
|
||||||
</Text>
|
</Text>
|
||||||
</HStack>
|
</HStack>
|
||||||
|
|||||||
@@ -18,18 +18,18 @@ const DarkGoldCard: React.FC<DarkGoldCardProps> = ({
|
|||||||
}) => (
|
}) => (
|
||||||
<Box
|
<Box
|
||||||
bg={darkGoldTheme.bgCard}
|
bg={darkGoldTheme.bgCard}
|
||||||
borderRadius="xl"
|
borderRadius="lg"
|
||||||
border="1px solid"
|
border="1px solid"
|
||||||
borderColor={darkGoldTheme.border}
|
borderColor={darkGoldTheme.border}
|
||||||
p={5}
|
p={3}
|
||||||
transition="all 0.3s ease"
|
transition="all 0.3s ease"
|
||||||
_hover={
|
_hover={
|
||||||
hoverable
|
hoverable
|
||||||
? {
|
? {
|
||||||
bg: darkGoldTheme.bgCardHover,
|
bg: darkGoldTheme.bgCardHover,
|
||||||
borderColor: darkGoldTheme.borderHover,
|
borderColor: darkGoldTheme.borderHover,
|
||||||
transform: 'translateY(-2px)',
|
transform: 'translateY(-1px)',
|
||||||
boxShadow: '0 8px 24px rgba(0, 0, 0, 0.4)',
|
boxShadow: '0 4px 16px rgba(0, 0, 0, 0.4)',
|
||||||
}
|
}
|
||||||
: undefined
|
: undefined
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -12,9 +12,9 @@ interface MetricValueProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const sizeMap = {
|
const sizeMap = {
|
||||||
sm: { label: 'sm', value: '2xl', suffix: 'md' },
|
sm: { label: 'xs', value: 'lg', suffix: 'sm' },
|
||||||
md: { label: 'md', value: '3xl', suffix: 'lg' },
|
md: { label: 'xs', value: 'xl', suffix: 'md' },
|
||||||
lg: { label: 'md', value: '4xl', suffix: 'xl' },
|
lg: { label: 'xs', value: '2xl', suffix: 'md' },
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@@ -31,7 +31,7 @@ const StockSummaryCard: React.FC<StockSummaryCardProps> = ({ summary }) => {
|
|||||||
: { text: '-', color: darkGoldTheme.textMuted };
|
: { text: '-', color: darkGoldTheme.textMuted };
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<SimpleGrid columns={{ base: 1, md: 2, lg: 4 }} spacing={4}>
|
<SimpleGrid columns={{ base: 1, md: 2, lg: 4 }} spacing={3}>
|
||||||
{/* 卡片1: 股票信息 */}
|
{/* 卡片1: 股票信息 */}
|
||||||
{latest_trade && (
|
{latest_trade && (
|
||||||
<StockHeaderCard
|
<StockHeaderCard
|
||||||
@@ -45,8 +45,8 @@ const StockSummaryCard: React.FC<StockSummaryCardProps> = ({ summary }) => {
|
|||||||
<MetricCard
|
<MetricCard
|
||||||
title="交易热度"
|
title="交易热度"
|
||||||
subtitle="流动性"
|
subtitle="流动性"
|
||||||
leftIcon={<Flame size={22} />}
|
leftIcon={<Flame size={14} />}
|
||||||
rightIcon={<Coins size={22} />}
|
rightIcon={<Coins size={14} />}
|
||||||
mainLabel="成交额"
|
mainLabel="成交额"
|
||||||
mainValue={latest_trade ? formatNumber(latest_trade.amount) : '-'}
|
mainValue={latest_trade ? formatNumber(latest_trade.amount) : '-'}
|
||||||
mainColor={darkGoldTheme.orange}
|
mainColor={darkGoldTheme.orange}
|
||||||
@@ -68,13 +68,13 @@ const StockSummaryCard: React.FC<StockSummaryCardProps> = ({ summary }) => {
|
|||||||
<MetricCard
|
<MetricCard
|
||||||
title="估值 VS 安全"
|
title="估值 VS 安全"
|
||||||
subtitle="便宜否"
|
subtitle="便宜否"
|
||||||
leftIcon={<DollarSign size={22} />}
|
leftIcon={<DollarSign size={14} />}
|
||||||
rightIcon={<Shield size={22} />}
|
rightIcon={<Shield size={14} />}
|
||||||
mainLabel="市盈率(PE)"
|
mainLabel="市盈率(PE)"
|
||||||
mainValue={latest_trade?.pe_ratio?.toFixed(2) || '-'}
|
mainValue={latest_trade?.pe_ratio?.toFixed(2) || '-'}
|
||||||
mainColor={darkGoldTheme.orange}
|
mainColor={darkGoldTheme.orange}
|
||||||
subText={
|
subText={
|
||||||
<VStack align="start" spacing={1}>
|
<VStack align="start" spacing={0.5}>
|
||||||
<Text color={peStatus.color} fontWeight="medium">
|
<Text color={peStatus.color} fontWeight="medium">
|
||||||
{peStatus.text}
|
{peStatus.text}
|
||||||
</Text>
|
</Text>
|
||||||
@@ -92,14 +92,14 @@ const StockSummaryCard: React.FC<StockSummaryCardProps> = ({ summary }) => {
|
|||||||
<MetricCard
|
<MetricCard
|
||||||
title="情绪与风险"
|
title="情绪与风险"
|
||||||
subtitle="资金面"
|
subtitle="资金面"
|
||||||
leftIcon={<Flame size={22} />}
|
leftIcon={<Flame size={14} />}
|
||||||
mainLabel="融资余额"
|
mainLabel="融资余额"
|
||||||
mainValue={latest_funding ? formatNumber(latest_funding.financing_balance) : '-'}
|
mainValue={latest_funding ? formatNumber(latest_funding.financing_balance) : '-'}
|
||||||
mainColor={darkGoldTheme.green}
|
mainColor={darkGoldTheme.green}
|
||||||
subText={
|
subText={
|
||||||
<VStack align="start" spacing={0}>
|
<VStack align="start" spacing={0}>
|
||||||
<Text color={darkGoldTheme.textMuted}>(强调做多力量)</Text>
|
<Text color={darkGoldTheme.textMuted}>(强调做多力量)</Text>
|
||||||
<HStack spacing={1} flexWrap="wrap" mt={1}>
|
<HStack spacing={1} flexWrap="wrap" mt={0.5}>
|
||||||
<Text>
|
<Text>
|
||||||
融券 {latest_funding ? formatNumber(latest_funding.securities_balance) : '-'}
|
融券 {latest_funding ? formatNumber(latest_funding.securities_balance) : '-'}
|
||||||
</Text>
|
</Text>
|
||||||
|
|||||||
Reference in New Issue
Block a user