7c7c70c4d9
- TabNavigation/SubTabContainer: 移除左侧 padding (pl=0) - BusinessStructureCard/BusinessSegmentsCard: 移除 CardBody 左右 padding - BusinessTreeItem: 黑金主题样式优化 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
95 lines
3.0 KiB
TypeScript
95 lines
3.0 KiB
TypeScript
/**
|
|
* 业务结构树形项组件
|
|
*
|
|
* 递归显示业务结构层级
|
|
* 使用位置：业务结构分析卡片
|
|
* 黑金主题风格
|
|
*/
|
|
|
|
import React from 'react';
|
|
import { Box, HStack, VStack, Text, Badge, Tag, TagLabel } from '@chakra-ui/react';
|
|
import { formatPercentage, formatBusinessRevenue } from '@utils/priceFormatters';
|
|
import type { BusinessTreeItemProps } from '../types';
|
|
|
|
// 黑金主题配置
|
|
const THEME = {
|
|
bg: 'gray.700',
|
|
gold: '#D4AF37',
|
|
goldLight: '#F0D78C',
|
|
textPrimary: '#D4AF37',
|
|
textSecondary: 'gray.400',
|
|
border: 'rgba(212, 175, 55, 0.5)',
|
|
};
|
|
|
|
const BusinessTreeItem: React.FC<BusinessTreeItemProps> = ({ business, depth = 0 }) => {
|
|
// 获取营收显示
|
|
const getRevenueDisplay = (): string => {
|
|
const revenue = business.revenue || business.financial_metrics?.revenue;
|
|
const unit = business.revenue_unit;
|
|
if (revenue !== undefined && revenue !== null) {
|
|
return formatBusinessRevenue(revenue, unit);
|
|
}
|
|
return '-';
|
|
};
|
|
|
|
return (
|
|
<Box
|
|
ml={depth * 6}
|
|
p={3}
|
|
bg={THEME.bg}
|
|
borderLeft={depth > 0 ? '4px solid' : 'none'}
|
|
borderLeftColor={THEME.gold}
|
|
borderRadius="md"
|
|
mb={2}
|
|
_hover={{ shadow: 'md', bg: 'gray.600' }}
|
|
transition="all 0.2s"
|
|
>
|
|
<HStack justify="space-between">
|
|
<VStack align="start" spacing={1}>
|
|
<HStack>
|
|
<Text fontWeight="bold" fontSize={depth === 0 ? 'md' : 'sm'} color={THEME.textPrimary}>
|
|
{business.business_name}
|
|
</Text>
|
|
{business.financial_metrics?.revenue_ratio &&
|
|
business.financial_metrics.revenue_ratio > 30 && (
|
|
<Badge bg={THEME.gold} color="gray.900" size="sm">
|
|
核心业务
|
|
</Badge>
|
|
)}
|
|
</HStack>
|
|
<HStack spacing={4} flexWrap="wrap">
|
|
<Tag size="sm" bg="gray.600" color={THEME.textPrimary}>
|
|
营收占比: {formatPercentage(business.financial_metrics?.revenue_ratio)}
|
|
</Tag>
|
|
<Tag size="sm" bg="gray.600" color={THEME.textPrimary}>
|
|
毛利率: {formatPercentage(business.financial_metrics?.gross_margin)}
|
|
</Tag>
|
|
{business.growth_metrics?.revenue_growth !== undefined && (
|
|
<Tag
|
|
size="sm"
|
|
bg={business.growth_metrics.revenue_growth > 0 ? 'red.600' : 'green.600'}
|
|
color="white"
|
|
>
|
|
<TagLabel>
|
|
增长: {business.growth_metrics.revenue_growth > 0 ? '+' : ''}
|
|
{formatPercentage(business.growth_metrics.revenue_growth)}
|
|
</TagLabel>
|
|
</Tag>
|
|
)}
|
|
</HStack>
|
|
</VStack>
|
|
<VStack align="end" spacing={0}>
|
|
<Text fontSize="lg" fontWeight="bold" color={THEME.gold}>
|
|
{getRevenueDisplay()}
|
|
</Text>
|
|
<Text fontSize="xs" color={THEME.textSecondary}>
|
|
营业收入
|
|
</Text>
|
|
</VStack>
|
|
</HStack>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default BusinessTreeItem;
|