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