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

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

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

4
src/views/Company/components/CompanyOverview/DeepAnalysisTab/atoms/BusinessTreeItem.tsx
View File

@@ -58,10 +58,10 @@ const BusinessTreeItem: React.FC<BusinessTreeItemProps> = ({ business, depth = 0
)}
</HStack>
<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)}
</Tag>
<Tag size="sm" bg="gray.600" color={THEME.textPrimary}>
<Tag size="sm" bg="gray.600" color="white">
毛利率: {formatPercentage(business.financial_metrics?.gross_margin)}
</Tag>
{business.growth_metrics?.revenue_growth !== undefined && (

21
src/views/Company/components/CompanyOverview/DeepAnalysisTab/components/BusinessSegmentsCard.tsx
View File

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