vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/Company/components/MarketDataView/components/StockSummaryCard/MetricCard.tsx
View File

@@ -38,7 +38,7 @@ const MetricCard: React.FC<MetricCardProps> = ({
rightIcon={rightIcon}
/>
<VStack align="start" spacing={1} mb={3}>
<VStack align="start" spacing={0.5} mb={2}>
<MetricValue
label={mainLabel}
value={mainValue}
@@ -47,7 +47,7 @@ const MetricCard: React.FC<MetricCardProps> = ({
/>
</VStack>
<Box color={darkGoldTheme.textMuted} fontSize="sm">
<Box color={darkGoldTheme.textMuted} fontSize="xs">
{subText}
</Box>
</DarkGoldCard>

18
src/views/Company/components/MarketDataView/components/StockSummaryCard/StockHeaderCard.tsx
View File

@@ -41,43 +41,43 @@ const StockHeaderCard: React.FC<StockHeaderCardProps> = ({
/>
{/* 股票名称和代码 */}
<HStack spacing={2} mb={3}>
<HStack spacing={1.5} mb={2}>
<Text
color={darkGoldTheme.textPrimary}
fontSize="xl"
fontSize="md"
fontWeight="bold"
>
{stockName}
</Text>
<Text color={darkGoldTheme.textMuted} fontSize="md">
<Text color={darkGoldTheme.textMuted} fontSize="xs">
({stockCode})
</Text>
</HStack>
{/* 价格和涨跌幅 */}
<HStack spacing={3} align="baseline" mb={2}>
<HStack spacing={2} align="baseline" mb={1.5}>
<Text
color={priceColor}
fontSize="4xl"
fontSize="2xl"
fontWeight="bold"
lineHeight="1"
>
{price.toFixed(2)}
</Text>
<HStack spacing={1} align="center">
<HStack spacing={0.5} align="center">
<Icon
as={isUp ? TrendingUp : TrendingDown}
color={priceColor}
boxSize={5}
boxSize={3}
/>
<Text color={priceColor} fontSize="lg" fontWeight="bold">
<Text color={priceColor} fontSize="sm" fontWeight="bold">
{isUp ? '+' : ''}{changePercent.toFixed(2)}%
</Text>
</HStack>
</HStack>
{/* 走势简述 */}
<Text color={darkGoldTheme.textMuted} fontSize="sm">
<Text color={darkGoldTheme.textMuted} fontSize="xs">
走势简述：
<Text as="span" color={priceColor} fontWeight="medium">
{trendDesc}

8
src/views/Company/components/MarketDataView/components/StockSummaryCard/atoms/CardTitle.tsx
View File

@@ -19,13 +19,13 @@ const CardTitle: React.FC<CardTitleProps> = ({
leftIcon,
rightIcon,
}) => (
<Flex justify="space-between" align="center" mb={4}>
<HStack spacing={2}>
<Flex justify="space-between" align="center" mb={2}>
<HStack spacing={1.5}>
<Box color={darkGoldTheme.gold}>{leftIcon}</Box>
<Text color={darkGoldTheme.gold} fontSize="lg" fontWeight="bold">
<Text color={darkGoldTheme.gold} fontSize="sm" fontWeight="bold">
{title}
</Text>
<Text color={darkGoldTheme.textMuted} fontSize="sm">
<Text color={darkGoldTheme.textMuted} fontSize="xs">
({subtitle})
</Text>
</HStack>

8
src/views/Company/components/MarketDataView/components/StockSummaryCard/atoms/DarkGoldCard.tsx
View File

@@ -18,18 +18,18 @@ const DarkGoldCard: React.FC<DarkGoldCardProps> = ({
}) => (
<Box
bg={darkGoldTheme.bgCard}
borderRadius="xl"
borderRadius="lg"
border="1px solid"
borderColor={darkGoldTheme.border}
p={5}
p={3}
transition="all 0.3s ease"
_hover={
hoverable
? {
bg: darkGoldTheme.bgCardHover,
borderColor: darkGoldTheme.borderHover,
transform: 'translateY(-2px)',
boxShadow: '0 8px 24px rgba(0, 0, 0, 0.4)',
transform: 'translateY(-1px)',
boxShadow: '0 4px 16px rgba(0, 0, 0, 0.4)',
}
: undefined
}

6
src/views/Company/components/MarketDataView/components/StockSummaryCard/atoms/MetricValue.tsx
View File

@@ -12,9 +12,9 @@ interface MetricValueProps {
}
const sizeMap = {
sm: { label: 'sm', value: '2xl', suffix: 'md' },
md: { label: 'md', value: '3xl', suffix: 'lg' },
lg: { label: 'md', value: '4xl', suffix: 'xl' },
sm: { label: 'xs', value: 'lg', suffix: 'sm' },
md: { label: 'xs', value: 'xl', suffix: 'md' },
lg: { label: 'xs', value: '2xl', suffix: 'md' },
};
/**

16
src/views/Company/components/MarketDataView/components/StockSummaryCard/index.tsx
View File

@@ -31,7 +31,7 @@ const StockSummaryCard: React.FC<StockSummaryCardProps> = ({ summary }) => {
: { text: '-', color: darkGoldTheme.textMuted };
return (
<SimpleGrid columns={{ base: 1, md: 2, lg: 4 }} spacing={4}>
<SimpleGrid columns={{ base: 1, md: 2, lg: 4 }} spacing={3}>
{/* 卡片1: 股票信息 */}
{latest_trade && (
<StockHeaderCard
@@ -45,8 +45,8 @@ const StockSummaryCard: React.FC<StockSummaryCardProps> = ({ summary }) => {
<MetricCard
title="交易热度"
subtitle="流动性"
leftIcon={<Flame size={22} />}
rightIcon={<Coins size={22} />}
leftIcon={<Flame size={14} />}
rightIcon={<Coins size={14} />}
mainLabel="成交额"
mainValue={latest_trade ? formatNumber(latest_trade.amount) : '-'}
mainColor={darkGoldTheme.orange}
@@ -68,13 +68,13 @@ const StockSummaryCard: React.FC<StockSummaryCardProps> = ({ summary }) => {
<MetricCard
title="估值 VS 安全"
subtitle="便宜否"
leftIcon={<DollarSign size={22} />}
rightIcon={<Shield size={22} />}
leftIcon={<DollarSign size={14} />}
rightIcon={<Shield size={14} />}
mainLabel="市盈率(PE)"
mainValue={latest_trade?.pe_ratio?.toFixed(2) || '-'}
mainColor={darkGoldTheme.orange}
subText={
<VStack align="start" spacing={1}>
<VStack align="start" spacing={0.5}>
<Text color={peStatus.color} fontWeight="medium">
{peStatus.text}
</Text>
@@ -92,14 +92,14 @@ const StockSummaryCard: React.FC<StockSummaryCardProps> = ({ summary }) => {
<MetricCard
title="情绪与风险"
subtitle="资金面"
leftIcon={<Flame size={22} />}
leftIcon={<Flame size={14} />}
mainLabel="融资余额"
mainValue={latest_funding ? formatNumber(latest_funding.financing_balance) : '-'}
mainColor={darkGoldTheme.green}
subText={
<VStack align="start" spacing={0}>
<Text color={darkGoldTheme.textMuted}>(强调做多力量)</Text>
<HStack spacing={1} flexWrap="wrap" mt={1}>
<HStack spacing={1} flexWrap="wrap" mt={0.5}>
<Text>
融券 {latest_funding ? formatNumber(latest_funding.securities_balance) : '-'}
</Text>