29f6701de3
- @chakra-ui/icons → lucide-react - react-icons → lucide-react - IconType → LucideIcon 类型替换 - 涉及 50 个组件文件 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
66 lines
1.5 KiB
TypeScript
66 lines
1.5 KiB
TypeScript
/**
|
|
* 业务结构分析卡片
|
|
*
|
|
* 显示公司业务结构树形图
|
|
* 黑金主题风格
|
|
*/
|
|
|
|
import React from 'react';
|
|
import {
|
|
Card,
|
|
CardBody,
|
|
CardHeader,
|
|
VStack,
|
|
HStack,
|
|
Heading,
|
|
Badge,
|
|
Icon,
|
|
} from '@chakra-ui/react';
|
|
import { PieChart } from 'lucide-react';
|
|
import { BusinessTreeItem } from '../atoms';
|
|
import type { BusinessStructure } from '../types';
|
|
|
|
// 黑金主题配置
|
|
const THEME = {
|
|
cardBg: 'gray.800',
|
|
gold: '#F4D03F',
|
|
textPrimary: '#F4D03F',
|
|
border: 'rgba(212, 175, 55, 0.3)',
|
|
};
|
|
|
|
interface BusinessStructureCardProps {
|
|
businessStructure: BusinessStructure[];
|
|
cardBg?: string;
|
|
}
|
|
|
|
const BusinessStructureCard: React.FC<BusinessStructureCardProps> = ({
|
|
businessStructure,
|
|
}) => {
|
|
if (!businessStructure || businessStructure.length === 0) return null;
|
|
|
|
return (
|
|
<Card bg={THEME.cardBg} shadow="md">
|
|
<CardHeader>
|
|
<HStack>
|
|
<Icon as={PieChart} color={THEME.gold} />
|
|
<Heading size="sm" color={THEME.textPrimary}>业务结构分析</Heading>
|
|
<Badge bg={THEME.gold} color="gray.900">{businessStructure[0]?.report_period}</Badge>
|
|
</HStack>
|
|
</CardHeader>
|
|
<CardBody px={0}>
|
|
<VStack spacing={3} align="stretch">
|
|
{businessStructure.map((business, idx) => (
|
|
<BusinessTreeItem
|
|
key={idx}
|
|
business={business}
|
|
depth={business.business_level - 1}
|
|
/>
|
|
))}
|
|
</VStack>
|
|
</CardBody>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default BusinessStructureCard;
|