diff --git a/src/views/Company/components/CompanyOverview/DeepAnalysisTab/atoms/KeyFactorCard.tsx b/src/views/Company/components/CompanyOverview/DeepAnalysisTab/atoms/KeyFactorCard.tsx index fb15fc75..aea12789 100644 --- a/src/views/Company/components/CompanyOverview/DeepAnalysisTab/atoms/KeyFactorCard.tsx +++ b/src/views/Company/components/CompanyOverview/DeepAnalysisTab/atoms/KeyFactorCard.tsx @@ -3,6 +3,7 @@ * * 显示单个关键因素的详细信息 * 使用位置:关键因素 Accordion 内 + * 黑金主题设计 */ import React from 'react'; @@ -19,6 +20,13 @@ import { import { FaArrowUp, FaArrowDown } from 'react-icons/fa'; import type { KeyFactorCardProps, ImpactDirection } from '../types'; +// 黑金主题样式常量 +const THEME = { + cardBg: '#252D3A', + textColor: '#E2E8F0', + subtextColor: '#A0AEC0', +} as const; + /** * 获取影响方向对应的颜色 */ @@ -47,31 +55,43 @@ const getImpactLabel = (direction?: ImpactDirection): string => { const KeyFactorCard: React.FC = ({ factor }) => { const impactColor = getImpactColor(factor.impact_direction); - const bgColor = 'white'; - const borderColor = 'gray.200'; return ( - + - + {factor.factor_name} - + {getImpactLabel(factor.impact_direction)} - + {factor.factor_value} {factor.factor_unit && ` ${factor.factor_unit}`} {factor.year_on_year !== undefined && ( 0 ? 'red' : 'green'} + bg="transparent" + border="1px solid" + borderColor={factor.year_on_year > 0 ? 'red.400' : 'green.400'} + color={factor.year_on_year > 0 ? 'red.400' : 'green.400'} > 0 ? FaArrowUp : FaArrowDown} @@ -84,17 +104,17 @@ const KeyFactorCard: React.FC = ({ factor }) => { {factor.factor_desc && ( - + {factor.factor_desc} )} - + 影响权重: {factor.impact_weight} {factor.report_period && ( - + {factor.report_period} )} diff --git a/src/views/Company/components/CompanyOverview/DeepAnalysisTab/atoms/ProcessNavigation.tsx b/src/views/Company/components/CompanyOverview/DeepAnalysisTab/atoms/ProcessNavigation.tsx index 836393b3..2c4e6518 100644 --- a/src/views/Company/components/CompanyOverview/DeepAnalysisTab/atoms/ProcessNavigation.tsx +++ b/src/views/Company/components/CompanyOverview/DeepAnalysisTab/atoms/ProcessNavigation.tsx @@ -16,19 +16,19 @@ const THEME = { upstream: { active: 'orange.500', activeBg: 'orange.900', - inactive: 'gray.600', + inactive: 'white', inactiveBg: 'gray.700', }, core: { active: 'blue.500', activeBg: 'blue.900', - inactive: 'gray.600', + inactive: 'white', inactiveBg: 'gray.700', }, downstream: { active: 'green.500', activeBg: 'green.900', - inactive: 'gray.600', + inactive: 'white', inactiveBg: 'gray.700', }, }; @@ -70,7 +70,7 @@ const NavItem: React.FC = memo(({ cursor="pointer" bg={isActive ? colors.activeBg : colors.inactiveBg} borderWidth={2} - borderColor={isActive ? colors.active : 'transparent'} + borderColor={isActive ? colors.active : 'gray.600'} onClick={onClick} transition="all 0.2s" _hover={{ @@ -88,7 +88,7 @@ const NavItem: React.FC = memo(({ {label} = memo(({ gap={3} > {/* 左侧筛选区 */} - + {/* - + */} {/* 右侧视图切换 */} = ({ - keyFactors, - cardBg, -}) => { +const KeyFactorsCard: React.FC = ({ keyFactors }) => { return ( - + - - 关键因素 - {keyFactors.total_factors} 项 + + + 关键因素 + + + {keyFactors.total_factors} 项 + - {keyFactors.categories.map((category, idx) => ( - - + + - {category.category_name} - + + {category.category_name} + + {category.factors.length} - + diff --git a/src/views/Company/components/CompanyOverview/DeepAnalysisTab/components/TimelineCard.tsx b/src/views/Company/components/CompanyOverview/DeepAnalysisTab/components/TimelineCard.tsx index 51c05026..87ab1065 100644 --- a/src/views/Company/components/CompanyOverview/DeepAnalysisTab/components/TimelineCard.tsx +++ b/src/views/Company/components/CompanyOverview/DeepAnalysisTab/components/TimelineCard.tsx @@ -2,6 +2,7 @@ * 发展时间线卡片 * * 显示公司发展历程时间线 + * 黑金主题设计 */ import React from 'react'; @@ -16,37 +17,73 @@ import { Icon, } from '@chakra-ui/react'; import { FaHistory } from 'react-icons/fa'; -import { DisclaimerBox } from '../atoms'; import TimelineComponent from '../organisms/TimelineComponent'; import type { DevelopmentTimeline } from '../types'; +// 黑金主题样式常量 +const THEME = { + bg: '#1A202C', + cardBg: '#252D3A', + border: '#C9A961', + borderGradient: 'linear-gradient(90deg, #C9A961, #8B7355)', + titleColor: '#C9A961', + textColor: '#E2E8F0', + subtextColor: '#A0AEC0', +} as const; + +const CARD_STYLES = { + bg: THEME.bg, + shadow: 'lg', + border: '1px solid', + borderColor: 'whiteAlpha.100', + overflow: 'hidden', + position: 'relative', + _before: { + content: '""', + position: 'absolute', + top: 0, + left: 0, + right: 0, + height: '3px', + background: THEME.borderGradient, + }, +} as const; + interface TimelineCardProps { developmentTimeline: DevelopmentTimeline; cardBg?: string; } -const TimelineCard: React.FC = ({ - developmentTimeline, - cardBg, -}) => { +const TimelineCard: React.FC = ({ developmentTimeline }) => { return ( - + - - 发展时间线 + + + 发展时间线 + - + 正面 {developmentTimeline.statistics?.positive_events || 0} - + 负面 {developmentTimeline.statistics?.negative_events || 0} - diff --git a/src/views/Company/components/CompanyOverview/DeepAnalysisTab/components/ValueChainCard.tsx b/src/views/Company/components/CompanyOverview/DeepAnalysisTab/components/ValueChainCard.tsx index 3e46b8f5..246db4c9 100644 --- a/src/views/Company/components/CompanyOverview/DeepAnalysisTab/components/ValueChainCard.tsx +++ b/src/views/Company/components/CompanyOverview/DeepAnalysisTab/components/ValueChainCard.tsx @@ -131,8 +131,8 @@ const ValueChainCard: React.FC = memo(({ return ( {/* 头部区域 */} - - + + 产业链分析 @@ -146,17 +146,14 @@ const ValueChainCard: React.FC = memo(({ - + {/* 工具栏:左侧流程导航 + 右侧筛选 */} {/* 左侧:流程式导航 */}