style(DeepAnalysisTab): 优化业务结构分析配色提高辨识度

- BusinessTreeItem: 营收占比、毛利率标签改为白色
- BusinessSegmentsCard: 内容文字从金色改为白色
- 小标题(业务描述/竞争地位/未来潜力)改为金色加粗
- 配色层次:金色加粗(小标题) → 白色(内容)

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-12-26 15:41:36 +08:00
parent e93d1e5e81
commit caff57d1f1
2 changed files with 13 additions and 12 deletions

View File

@@ -58,10 +58,10 @@ const BusinessTreeItem: React.FC<BusinessTreeItemProps> = ({ business, depth = 0
)} )}
</HStack> </HStack>
<HStack spacing={4} flexWrap="wrap"> <HStack spacing={4} flexWrap="wrap">
<Tag size="sm" bg="gray.600" color={THEME.textPrimary}> <Tag size="sm" bg="gray.600" color="white">
: {formatPercentage(business.financial_metrics?.revenue_ratio)} : {formatPercentage(business.financial_metrics?.revenue_ratio)}
</Tag> </Tag>
<Tag size="sm" bg="gray.600" color={THEME.textPrimary}> <Tag size="sm" bg="gray.600" color="white">
: {formatPercentage(business.financial_metrics?.gross_margin)} : {formatPercentage(business.financial_metrics?.gross_margin)}
</Tag> </Tag>
{business.growth_metrics?.revenue_growth !== undefined && ( {business.growth_metrics?.revenue_growth !== undefined && (

View File

@@ -29,8 +29,9 @@ const THEME = {
innerCardBg: 'gray.700', innerCardBg: 'gray.700',
gold: '#F4D03F', gold: '#F4D03F',
goldLight: '#F0D78C', goldLight: '#F0D78C',
textPrimary: '#F4D03F', textTitle: '#F4D03F', // 标题用金色
textSecondary: 'gray.400', textContent: 'white', // 内容用白色,提高辨识度
textSecondary: 'gray.400', // 小标题用灰色
border: 'rgba(212, 175, 55, 0.3)', border: 'rgba(212, 175, 55, 0.3)',
}; };
@@ -53,7 +54,7 @@ const BusinessSegmentsCard: React.FC<BusinessSegmentsCardProps> = ({
<CardHeader> <CardHeader>
<HStack> <HStack>
<Icon as={Factory} color={THEME.gold} /> <Icon as={Factory} color={THEME.gold} />
<Heading size="sm" color={THEME.textPrimary}></Heading> <Heading size="sm" color={THEME.textTitle}></Heading>
<Badge bg={THEME.gold} color="gray.900">{businessSegments.length} </Badge> <Badge bg={THEME.gold} color="gray.900">{businessSegments.length} </Badge>
</HStack> </HStack>
</CardHeader> </CardHeader>
@@ -67,7 +68,7 @@ const BusinessSegmentsCard: React.FC<BusinessSegmentsCardProps> = ({
<CardBody px={2}> <CardBody px={2}>
<VStack align="stretch" spacing={3}> <VStack align="stretch" spacing={3}>
<HStack justify="space-between"> <HStack justify="space-between">
<Text fontWeight="bold" fontSize="md" color={THEME.textPrimary}> <Text fontWeight="bold" fontSize="md" color={THEME.textTitle}>
{segment.segment_name} {segment.segment_name}
</Text> </Text>
<Button <Button
@@ -85,12 +86,12 @@ const BusinessSegmentsCard: React.FC<BusinessSegmentsCardProps> = ({
</HStack> </HStack>
<Box> <Box>
<Text fontSize="xs" color={THEME.textSecondary} mb={1}> <Text fontSize="xs" color={THEME.gold} fontWeight="bold" mb={1}>
</Text> </Text>
<Text <Text
fontSize="sm" fontSize="sm"
color={THEME.textPrimary} color={THEME.textContent}
noOfLines={isExpanded ? undefined : 3} noOfLines={isExpanded ? undefined : 3}
> >
{segment.segment_description || '暂无描述'} {segment.segment_description || '暂无描述'}
@@ -98,12 +99,12 @@ const BusinessSegmentsCard: React.FC<BusinessSegmentsCardProps> = ({
</Box> </Box>
<Box> <Box>
<Text fontSize="xs" color={THEME.textSecondary} mb={1}> <Text fontSize="xs" color={THEME.gold} fontWeight="bold" mb={1}>
</Text> </Text>
<Text <Text
fontSize="sm" fontSize="sm"
color={THEME.textPrimary} color={THEME.textContent}
noOfLines={isExpanded ? undefined : 2} noOfLines={isExpanded ? undefined : 2}
> >
{segment.competitive_position || '暂无数据'} {segment.competitive_position || '暂无数据'}
@@ -111,13 +112,13 @@ const BusinessSegmentsCard: React.FC<BusinessSegmentsCardProps> = ({
</Box> </Box>
<Box> <Box>
<Text fontSize="xs" color={THEME.textSecondary} mb={1}> <Text fontSize="xs" color={THEME.gold} fontWeight="bold" mb={1}>
</Text> </Text>
<Text <Text
fontSize="sm" fontSize="sm"
noOfLines={isExpanded ? undefined : 2} noOfLines={isExpanded ? undefined : 2}
color={THEME.goldLight} color={THEME.textContent}
> >
{segment.future_potential || '暂无数据'} {segment.future_potential || '暂无数据'}
</Text> </Text>