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:
@@ -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 && (
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user