diff --git a/src/components/SubTabContainer/index.tsx b/src/components/SubTabContainer/index.tsx index f46af027..76a38d60 100644 --- a/src/components/SubTabContainer/index.tsx +++ b/src/components/SubTabContainer/index.tsx @@ -147,7 +147,8 @@ const SubTabContainer: React.FC = memo(({ bg={theme.bg} borderBottom="1px solid" borderColor={theme.borderColor} - px={4} + pl={0} + pr={4} py={2} flexWrap="wrap" gap={2} diff --git a/src/components/TabContainer/TabNavigation.tsx b/src/components/TabContainer/TabNavigation.tsx index be43930e..28d00812 100644 --- a/src/components/TabContainer/TabNavigation.tsx +++ b/src/components/TabContainer/TabNavigation.tsx @@ -20,7 +20,8 @@ const TabNavigation: React.FC = ({ borderColor={themeColors.dividerColor} borderTopLeftRadius={borderRadius} borderTopRightRadius={borderRadius} - px={4} + pl={0} + pr={4} py={2} flexWrap="wrap" gap={2} diff --git a/src/mocks/data/company.js b/src/mocks/data/company.js index 7fd10a6d..f0f55290 100644 --- a/src/mocks/data/company.js +++ b/src/mocks/data/company.js @@ -473,147 +473,65 @@ export const PINGAN_BANK_DATA = { }, business_structure: [ { - business_name: '零售金融', + business_name: '舒泰清(复方聚乙二醇电解质散IV)', business_level: 1, - revenue: 812300, + revenue: 17900, revenue_unit: '万元', financial_metrics: { - revenue_ratio: 50.1, - gross_margin: 42.5 + revenue_ratio: 55.16, + gross_margin: 78.21 }, growth_metrics: { - revenue_growth: 11.2 + revenue_growth: -8.20 }, - report_period: '2024Q3' + report_period: '2024年报' }, { - business_name: '信用卡业务', - business_level: 2, - revenue: 325000, - revenue_unit: '万元', - financial_metrics: { - revenue_ratio: 20.1, - gross_margin: 38.2 - }, - growth_metrics: { - revenue_growth: 15.8 - }, - report_period: '2024Q3' - }, - { - business_name: '财富管理', - business_level: 2, - revenue: 280500, - revenue_unit: '万元', - financial_metrics: { - revenue_ratio: 17.3, - gross_margin: 52.1 - }, - growth_metrics: { - revenue_growth: 22.5 - }, - report_period: '2024Q3' - }, - { - business_name: '消费信贷', - business_level: 2, - revenue: 206800, - revenue_unit: '万元', - financial_metrics: { - revenue_ratio: 12.7, - gross_margin: 35.8 - }, - growth_metrics: { - revenue_growth: 8.6 - }, - report_period: '2024Q3' - }, - { - business_name: '对公金融', + business_name: '苏肽生(注射用鼠神经生长因子)', business_level: 1, - revenue: 685400, + revenue: 13400, revenue_unit: '万元', financial_metrics: { - revenue_ratio: 42.2, - gross_margin: 38.6 + revenue_ratio: 41.21, + gross_margin: 89.11 }, growth_metrics: { - revenue_growth: 6.8 + revenue_growth: -17.30 }, - report_period: '2024Q3' + report_period: '2024年报' }, { - business_name: '公司贷款', - business_level: 2, - revenue: 412000, - revenue_unit: '万元', - financial_metrics: { - revenue_ratio: 25.4, - gross_margin: 36.2 - }, - growth_metrics: { - revenue_growth: 5.2 - }, - report_period: '2024Q3' - }, - { - business_name: '供应链金融', - business_level: 2, - revenue: 185600, - revenue_unit: '万元', - financial_metrics: { - revenue_ratio: 11.4, - gross_margin: 41.5 - }, - growth_metrics: { - revenue_growth: 18.3 - }, - report_period: '2024Q3' - }, - { - business_name: '投资银行', - business_level: 2, - revenue: 87800, - revenue_unit: '万元', - financial_metrics: { - revenue_ratio: 5.4, - gross_margin: 45.2 - }, - growth_metrics: { - revenue_growth: -2.3 - }, - report_period: '2024Q3' - }, - { - business_name: '资金同业', + business_name: '舒斯通(复方聚乙二醇(3350)电解质散)', business_level: 1, - revenue: 125800, + revenue: 771, revenue_unit: '万元', financial_metrics: { - revenue_ratio: 7.7, - gross_margin: 28.2 + revenue_ratio: 2.37 }, - growth_metrics: { - revenue_growth: 3.5 + report_period: '2024年报' + }, + { + business_name: '阿司匹林肠溶片', + business_level: 1, + revenue: 396, + revenue_unit: '万元', + financial_metrics: { + revenue_ratio: 1.22 }, - report_period: '2024Q3' + report_period: '2024年报' + }, + { + business_name: '研发业务', + business_level: 1, + report_period: '2024年报' } ], business_segments: [ { - segment_name: '信用卡业务', - description: '国内领先的信用卡发卡银行,流通卡量超7000万张', - key_metrics: { cards_issued: 7200, transaction_volume: 28500, market_share: 8.5 } - }, - { - segment_name: '财富管理', - description: '私人银行及财富管理业务快速发展,AUM突破4万亿', - key_metrics: { aum: 42000, private_banking_customers: 125000, wealth_customers: 1200000 } - }, - { - segment_name: '供应链金融', - description: '依托科技平台打造智慧供应链金融生态', - key_metrics: { platform_customers: 35000, financing_balance: 5600, digitization_rate: 95 } + segment_name: '已上市药品营销', + segment_description: '舒泰神已上市药品营销业务主要包括舒泰清(复方聚乙二醇电解质散IV)和苏肽生(注射用鼠神经生长因子)两大核心产品。2024年实现营业收入3.25亿元,其中舒泰清贡献1.79亿元(55.16%),苏肽生贡献1.34亿元(41.21%)。尽管面临市场竞争压力,产品毛利率保持高位,综合毛利率达80.83%,其中苏肽生毛利率高达89.11%。', + competitive_position: '舒泰清为《中国消化内镜诊疗肠道准备指南》和《慢性便秘诊治指南》一线用药,苏肽生是国内首个国药准字鼠神经生长因子产品。公司医保目录产品舒斯通已落地,并布局舒亦清、舒常轻等系列产品形成梯队,构建了一定市场竞争优势。然而,2024年集采中同类(III型)产品中选,对舒泰清(IV型)形成潜在价格压力。', + future_potential: '公司正在构建系列化产品线应对市场变化,研发投入保持高强度(1.62亿元,占营收49.97%)。在研管线中,STSP-0601血友病药物获FDA孤儿药资格,BDB-001被纳入突破性治疗品种,创新药研发持续推进。国家政策支持创新药发展,行业环境向好,同时国际化布局已有初步进展,未来3-5年有望通过新产品上市实现业绩突破。' } ] }, @@ -1336,11 +1254,68 @@ export const generateCompanyData = (stockCode, stockName = '示例公司') => { } }, business_structure: [ - { business_name: '核心产品', revenue: baseRevenue * 0.6, ratio: 60, growth: 12.5, report_period: '2024Q3' }, - { business_name: '增值服务', revenue: baseRevenue * 0.25, ratio: 25, growth: 18.2, report_period: '2024Q3' }, - { business_name: '其他业务', revenue: baseRevenue * 0.15, ratio: 15, growth: 5.8, report_period: '2024Q3' } + { + business_name: '舒泰清(复方聚乙二醇电解质散IV)', + business_level: 1, + revenue: 17900, + revenue_unit: '万元', + financial_metrics: { + revenue_ratio: 55.16, + gross_margin: 78.21 + }, + growth_metrics: { + revenue_growth: -8.20 + }, + report_period: '2024年报' + }, + { + business_name: '苏肽生(注射用鼠神经生长因子)', + business_level: 1, + revenue: 13400, + revenue_unit: '万元', + financial_metrics: { + revenue_ratio: 41.21, + gross_margin: 89.11 + }, + growth_metrics: { + revenue_growth: -17.30 + }, + report_period: '2024年报' + }, + { + business_name: '舒斯通(复方聚乙二醇(3350)电解质散)', + business_level: 1, + revenue: 771, + revenue_unit: '万元', + financial_metrics: { + revenue_ratio: 2.37 + }, + report_period: '2024年报' + }, + { + business_name: '阿司匹林肠溶片', + business_level: 1, + revenue: 396, + revenue_unit: '万元', + financial_metrics: { + revenue_ratio: 1.22 + }, + report_period: '2024年报' + }, + { + business_name: '研发业务', + business_level: 1, + report_period: '2024年报' + } ], - business_segments: [] + business_segments: [ + { + segment_name: '已上市药品营销', + segment_description: '舒泰神已上市药品营销业务主要包括舒泰清(复方聚乙二醇电解质散IV)和苏肽生(注射用鼠神经生长因子)两大核心产品。2024年实现营业收入3.25亿元,其中舒泰清贡献1.79亿元(55.16%),苏肽生贡献1.34亿元(41.21%)。尽管面临市场竞争压力,产品毛利率保持高位,综合毛利率达80.83%,其中苏肽生毛利率高达89.11%。', + competitive_position: '舒泰清为《中国消化内镜诊疗肠道准备指南》和《慢性便秘诊治指南》一线用药,苏肽生是国内首个国药准字鼠神经生长因子产品。公司医保目录产品舒斯通已落地,并布局舒亦清、舒常轻等系列产品形成梯队,构建了一定市场竞争优势。然而,2024年集采中同类(III型)产品中选,对舒泰清(IV型)形成潜在价格压力。', + future_potential: '公司正在构建系列化产品线应对市场变化,研发投入保持高强度(1.62亿元,占营收49.97%)。在研管线中,STSP-0601血友病药物获FDA孤儿药资格,BDB-001被纳入突破性治疗品种,创新药研发持续推进。国家政策支持创新药发展,行业环境向好,同时国际化布局已有初步进展,未来3-5年有望通过新产品上市实现业绩突破。' + } + ] }, valueChainAnalysis: { value_chain_flows: [ diff --git a/src/views/Company/components/CompanyOverview/DeepAnalysisTab/atoms/BusinessTreeItem.tsx b/src/views/Company/components/CompanyOverview/DeepAnalysisTab/atoms/BusinessTreeItem.tsx index 1533f27d..9ed5ad7f 100644 --- a/src/views/Company/components/CompanyOverview/DeepAnalysisTab/atoms/BusinessTreeItem.tsx +++ b/src/views/Company/components/CompanyOverview/DeepAnalysisTab/atoms/BusinessTreeItem.tsx @@ -3,6 +3,7 @@ * * 递归显示业务结构层级 * 使用位置:业务结构分析卡片 + * 黑金主题风格 */ import React from 'react'; @@ -10,9 +11,17 @@ import { Box, HStack, VStack, Text, Badge, Tag, TagLabel } from '@chakra-ui/reac import { formatPercentage, formatBusinessRevenue } from '@utils/priceFormatters'; import type { BusinessTreeItemProps } from '../types'; -const BusinessTreeItem: React.FC = ({ business, depth = 0 }) => { - const bgColor = 'gray.50'; +// 黑金主题配置 +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 = ({ business, depth = 0 }) => { // 获取营收显示 const getRevenueDisplay = (): string => { const revenue = business.revenue || business.financial_metrics?.revenue; @@ -27,40 +36,39 @@ const BusinessTreeItem: React.FC = ({ business, depth = 0 0 ? '4px solid' : 'none'} - borderLeftColor="blue.400" + borderLeftColor={THEME.gold} borderRadius="md" mb={2} - _hover={{ shadow: 'md' }} + _hover={{ shadow: 'md', bg: 'gray.600' }} transition="all 0.2s" > - + {business.business_name} {business.financial_metrics?.revenue_ratio && business.financial_metrics.revenue_ratio > 30 && ( - + 核心业务 )} - + 营收占比: {formatPercentage(business.financial_metrics?.revenue_ratio)} - + 毛利率: {formatPercentage(business.financial_metrics?.gross_margin)} {business.growth_metrics?.revenue_growth !== undefined && ( 0 ? 'red' : 'green' - } + bg={business.growth_metrics.revenue_growth > 0 ? 'red.600' : 'green.600'} + color="white" > 增长: {business.growth_metrics.revenue_growth > 0 ? '+' : ''} @@ -71,10 +79,10 @@ const BusinessTreeItem: React.FC = ({ business, depth = 0 - + {getRevenueDisplay()} - + 营业收入 diff --git a/src/views/Company/components/CompanyOverview/DeepAnalysisTab/components/BusinessSegmentsCard.tsx b/src/views/Company/components/CompanyOverview/DeepAnalysisTab/components/BusinessSegmentsCard.tsx index c7e63282..0710117c 100644 --- a/src/views/Company/components/CompanyOverview/DeepAnalysisTab/components/BusinessSegmentsCard.tsx +++ b/src/views/Company/components/CompanyOverview/DeepAnalysisTab/components/BusinessSegmentsCard.tsx @@ -2,6 +2,7 @@ * 业务板块详情卡片 * * 显示公司各业务板块的详细信息 + * 黑金主题风格 */ import React from 'react'; @@ -20,9 +21,19 @@ import { Button, } from '@chakra-ui/react'; import { FaIndustry, FaExpandAlt, FaCompressAlt } from 'react-icons/fa'; -import { DisclaimerBox } from '../atoms'; import type { BusinessSegment } from '../types'; +// 黑金主题配置 +const THEME = { + cardBg: 'gray.800', + innerCardBg: 'gray.700', + gold: '#D4AF37', + goldLight: '#F0D78C', + textPrimary: '#D4AF37', + textSecondary: 'gray.400', + border: 'rgba(212, 175, 55, 0.3)', +}; + interface BusinessSegmentsCardProps { businessSegments: BusinessSegment[]; expandedSegments: Record; @@ -34,31 +45,29 @@ const BusinessSegmentsCard: React.FC = ({ businessSegments, expandedSegments, onToggleSegment, - cardBg, }) => { if (!businessSegments || businessSegments.length === 0) return null; return ( - + - - 业务板块详情 - {businessSegments.length} 个板块 + + 业务板块详情 + {businessSegments.length} 个板块 - - + {businessSegments.map((segment, idx) => { const isExpanded = expandedSegments[idx]; return ( - - + + - + {segment.segment_name} - + 业务描述 {segment.segment_description || '暂无描述'} @@ -87,11 +98,12 @@ const BusinessSegmentsCard: React.FC = ({ - + 竞争地位 {segment.competitive_position || '暂无数据'} @@ -99,13 +111,13 @@ const BusinessSegmentsCard: React.FC = ({ - + 未来潜力 {segment.future_potential || '暂无数据'} @@ -113,10 +125,10 @@ const BusinessSegmentsCard: React.FC = ({ {isExpanded && segment.key_products && ( - + 主要产品 - + {segment.key_products} @@ -124,10 +136,10 @@ const BusinessSegmentsCard: React.FC = ({ {isExpanded && segment.market_share !== undefined && ( - + 市场份额 - + {segment.market_share}% @@ -135,10 +147,10 @@ const BusinessSegmentsCard: React.FC = ({ {isExpanded && segment.revenue_contribution !== undefined && ( - + 营收贡献 - + {segment.revenue_contribution}% diff --git a/src/views/Company/components/CompanyOverview/DeepAnalysisTab/components/BusinessStructureCard.tsx b/src/views/Company/components/CompanyOverview/DeepAnalysisTab/components/BusinessStructureCard.tsx index 9d51726b..83e75818 100644 --- a/src/views/Company/components/CompanyOverview/DeepAnalysisTab/components/BusinessStructureCard.tsx +++ b/src/views/Company/components/CompanyOverview/DeepAnalysisTab/components/BusinessStructureCard.tsx @@ -2,6 +2,7 @@ * 业务结构分析卡片 * * 显示公司业务结构树形图 + * 黑金主题风格 */ import React from 'react'; @@ -16,9 +17,17 @@ import { Icon, } from '@chakra-ui/react'; import { FaChartPie } from 'react-icons/fa'; -import { DisclaimerBox, BusinessTreeItem } from '../atoms'; +import { BusinessTreeItem } from '../atoms'; import type { BusinessStructure } from '../types'; +// 黑金主题配置 +const THEME = { + cardBg: 'gray.800', + gold: '#D4AF37', + textPrimary: '#D4AF37', + border: 'rgba(212, 175, 55, 0.3)', +}; + interface BusinessStructureCardProps { businessStructure: BusinessStructure[]; cardBg?: string; @@ -26,21 +35,19 @@ interface BusinessStructureCardProps { const BusinessStructureCard: React.FC = ({ businessStructure, - cardBg, }) => { if (!businessStructure || businessStructure.length === 0) return null; return ( - + - - 业务结构分析 - {businessStructure[0]?.report_period} + + 业务结构分析 + {businessStructure[0]?.report_period} - - + {businessStructure.map((business, idx) => (