style(StockSummaryCard): 优化黑金主题原子组件样式

This commit is contained in:
zdl
2025-12-16 15:19:40 +08:00
parent 03bc2d681b
commit d27cf5b7d8
6 changed files with 30 additions and 30 deletions

View File

@@ -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>

View File

@@ -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}

View File

@@ -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>

View File

@@ -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
} }

View File

@@ -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' },
}; };
/** /**

View File

@@ -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>