style(StockQuoteCard): 优化布局和样式

- 数据区块改为三列布局:估值指标 | 市值股本 | 主力动态
- 流通市值、发行总股本、52周波动 放在同一列
- 区块标题高亮显示(金色 + 发光效果)
- 注释掉公司信息模块(成立日期、注册资本、所在地等)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-12-18 18:03:28 +08:00
parent ae397ac904
commit 8e679b56f4

View File

@@ -147,12 +147,13 @@ const GlassSection: React.FC<GlassSectionProps> = ({ title, children, flex = 1 }
/> />
<Text <Text
fontSize="13px" fontSize="14px"
fontWeight="600" fontWeight="700"
color={T.textSecondary} color={T.gold}
mb={3} mb={3}
textTransform="uppercase" textTransform="uppercase"
letterSpacing="0.1em" letterSpacing="0.1em"
textShadow={`0 0 12px ${T.gold}60`}
> >
{title} {title}
</Text> </Text>
@@ -369,10 +370,10 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
</Text> </Text>
</HStack> </HStack>
{/* ========== 数据区块(Bento Grid========== */} {/* ========== 数据区块(三列布局========== */}
<Flex gap={4} flexWrap={{ base: 'wrap', lg: 'nowrap' }}> <Flex gap={4} flexWrap={{ base: 'wrap', lg: 'nowrap' }}>
{/* 关键指标 */} {/* 第一列:估值指标 */}
<GlassSection title="关键指标" flex={1}> <GlassSection title="估值指标" flex={1}>
<VStack align="stretch" spacing={2}> <VStack align="stretch" spacing={2}>
<MetricRow <MetricRow
label="市盈率 (PE)" label="市盈率 (PE)"
@@ -380,6 +381,21 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
valueColor={T.cyan} valueColor={T.cyan}
highlight highlight
/> />
<MetricRow
label="流通股本"
value={quoteData.floatShares ? `${quoteData.floatShares}亿股` : '-'}
/>
<MetricRow
label="换手率"
value={quoteData.turnoverRate !== undefined ? `${quoteData.turnoverRate.toFixed(2)}%` : '-'}
valueColor={quoteData.turnoverRate && quoteData.turnoverRate > 5 ? T.orange : T.textWhite}
/>
</VStack>
</GlassSection>
{/* 第二列:市值股本 */}
<GlassSection title="市值股本" flex={1}>
<VStack align="stretch" spacing={2}>
<MetricRow <MetricRow
label="流通市值" label="流通市值"
value={quoteData.marketCap || '-'} value={quoteData.marketCap || '-'}
@@ -390,15 +406,6 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
label="发行总股本" label="发行总股本"
value={quoteData.totalShares ? `${quoteData.totalShares}亿股` : '-'} value={quoteData.totalShares ? `${quoteData.totalShares}亿股` : '-'}
/> />
<MetricRow
label="流通股本"
value={quoteData.floatShares ? `${quoteData.floatShares}亿股` : '-'}
/>
<MetricRow
label="换手率"
value={quoteData.turnoverRate !== undefined ? `${quoteData.turnoverRate.toFixed(2)}%` : '-'}
valueColor={quoteData.turnoverRate && quoteData.turnoverRate > 5 ? T.orange : T.textWhite}
/>
<MetricRow <MetricRow
label="52周波动" label="52周波动"
value={`${formatPrice(quoteData.week52Low)} - ${formatPrice(quoteData.week52High)}`} value={`${formatPrice(quoteData.week52Low)} - ${formatPrice(quoteData.week52High)}`}
@@ -406,7 +413,7 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
</VStack> </VStack>
</GlassSection> </GlassSection>
{/* 主力动态 */} {/* 第三列:主力动态 */}
<GlassSection title="主力动态" flex={1}> <GlassSection title="主力动态" flex={1}>
<VStack align="stretch" spacing={2}> <VStack align="stretch" spacing={2}>
<MetricRow <MetricRow
@@ -450,17 +457,15 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
</GlassSection> </GlassSection>
</Flex> </Flex>
{/* ========== 公司信息 ========== */} {/* ========== 公司信息(已注释)========== */}
{basicInfo && ( {/* {basicInfo && (
<> <>
{/* 分隔线 */}
<Box <Box
h="1px" h="1px"
bg={`linear-gradient(90deg, transparent, ${T.gold}30, transparent)`} bg={`linear-gradient(90deg, transparent, ${T.gold}30, transparent)`}
/> />
<Flex gap={8} flexWrap={{ base: 'wrap', lg: 'nowrap' }}> <Flex gap={8} flexWrap={{ base: 'wrap', lg: 'nowrap' }}>
{/* 公司属性 */}
<HStack spacing={6} flex={1} flexWrap="wrap" fontSize="14px"> <HStack spacing={6} flex={1} flexWrap="wrap" fontSize="14px">
<HStack spacing={2}> <HStack spacing={2}>
<Icon as={Calendar} color={T.textMuted} boxSize={4} /> <Icon as={Calendar} color={T.textMuted} boxSize={4} />
@@ -501,7 +506,6 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
</HStack> </HStack>
</HStack> </HStack>
{/* 公司简介 */}
<Box <Box
flex={2} flex={2}
borderLeftWidth="1px" borderLeftWidth="1px"
@@ -518,7 +522,7 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
</Box> </Box>
</Flex> </Flex>
</> </>
)} )} */}
</VStack> </VStack>
</Box> </Box>