diff --git a/src/views/Company/components/CompanyOverview/DeepAnalysisTab/components/CompetitiveAnalysisCard.tsx b/src/views/Company/components/CompanyOverview/DeepAnalysisTab/components/CompetitiveAnalysisCard.tsx index f94595d5..9eee2a10 100644 --- a/src/views/Company/components/CompanyOverview/DeepAnalysisTab/components/CompetitiveAnalysisCard.tsx +++ b/src/views/Company/components/CompanyOverview/DeepAnalysisTab/components/CompetitiveAnalysisCard.tsx @@ -2,6 +2,7 @@ * 竞争地位分析卡片 * * 显示竞争力评分、雷达图和竞争分析 + * 包含行业排名弹窗功能 */ import React, { memo, useMemo } from 'react'; @@ -22,6 +23,14 @@ import { Icon, Divider, SimpleGrid, + Button, + Modal, + ModalOverlay, + ModalContent, + ModalHeader, + ModalBody, + ModalCloseButton, + useDisclosure, } from '@chakra-ui/react'; import { FaTrophy, @@ -33,11 +42,32 @@ import { FaShieldAlt, FaRocket, FaUsers, + FaExternalLinkAlt, } from 'react-icons/fa'; import ReactECharts from 'echarts-for-react'; import { ScoreBar } from '../atoms'; import { getRadarChartOption } from '../utils/chartOptions'; -import type { ComprehensiveData, CompetitivePosition } from '../types'; +import { IndustryRankingView } from '../../../FinancialPanorama/components'; +import type { ComprehensiveData, CompetitivePosition, IndustryRankData } from '../types'; + +// 黑金主题弹窗样式 +const MODAL_STYLES = { + content: { + bg: 'gray.900', + borderColor: 'rgba(212, 175, 55, 0.3)', + borderWidth: '1px', + maxW: '900px', + }, + header: { + color: 'yellow.500', + borderBottomColor: 'rgba(212, 175, 55, 0.2)', + borderBottomWidth: '1px', + }, + closeButton: { + color: 'yellow.500', + _hover: { bg: 'rgba(212, 175, 55, 0.1)' }, + }, +} as const; // 样式常量 - 避免每次渲染创建新对象 const CARD_STYLES = { @@ -57,6 +87,7 @@ const CHART_STYLE = { height: '320px' } as const; interface CompetitiveAnalysisCardProps { comprehensiveData: ComprehensiveData; + industryRankData?: IndustryRankData[]; } // 竞争对手标签组件 @@ -141,8 +172,10 @@ const AdvantagesSection = memo( AdvantagesSection.displayName = 'AdvantagesSection'; const CompetitiveAnalysisCard: React.FC = memo( - ({ comprehensiveData }) => { + ({ comprehensiveData, industryRankData }) => { const competitivePosition = comprehensiveData.competitive_position; + const { isOpen, onOpen, onClose } = useDisclosure(); + if (!competitivePosition) return null; // 缓存雷达图配置 @@ -160,56 +193,99 @@ const CompetitiveAnalysisCard: React.FC = memo( [competitivePosition.analysis?.main_competitors] ); + // 判断是否有行业排名数据可展示 + const hasIndustryRankData = industryRankData && industryRankData.length > 0; + return ( - - - - - 竞争地位分析 - {competitivePosition.ranking && ( - - 行业排名 {competitivePosition.ranking.industry_rank}/ - {competitivePosition.ranking.total_companies} - - )} - - - - {/* 主要竞争对手 */} - {/* {competitors.length > 0 && } */} + <> + + + + + 竞争地位分析 + {competitivePosition.ranking && ( + + 行业排名 {competitivePosition.ranking.industry_rank}/ + {competitivePosition.ranking.total_companies} + + )} + {hasIndustryRankData && ( + + )} + + + + {/* 主要竞争对手 */} + {/* {competitors.length > 0 && } */} - {/* 评分和雷达图 */} - {/* - - - + {/* 评分和雷达图 */} + {/* + + + - - {radarOption && ( - + {radarOption && ( + + )} + + */} + + {/* */} + + {/* 竞争优势和劣势 */} + + + + + {/* 行业排名弹窗 - 黑金主题 */} + + + + + + + 行业排名详情 + + + + + {hasIndustryRankData && ( + )} - - */} - - {/* */} - - {/* 竞争优势和劣势 */} - - - + + + + ); } ); diff --git a/src/views/Company/components/CompanyOverview/DeepAnalysisTab/tabs/StrategyTab.tsx b/src/views/Company/components/CompanyOverview/DeepAnalysisTab/tabs/StrategyTab.tsx index 90be912f..7737e406 100644 --- a/src/views/Company/components/CompanyOverview/DeepAnalysisTab/tabs/StrategyTab.tsx +++ b/src/views/Company/components/CompanyOverview/DeepAnalysisTab/tabs/StrategyTab.tsx @@ -1,7 +1,7 @@ /** * 战略分析 Tab * - * 包含:核心定位 + 战略分析 + 竞争地位分析 + 行业排名 + * 包含:核心定位 + 战略分析 + 竞争地位分析(含行业排名弹窗) */ import React, { memo } from 'react'; @@ -11,7 +11,6 @@ import { StrategyAnalysisCard, CompetitiveAnalysisCard, } from '../components'; -import { IndustryRankingView } from '../../../FinancialPanorama/components'; import type { ComprehensiveData, IndustryRankData } from '../types'; export interface StrategyTabProps { @@ -43,17 +42,11 @@ const StrategyTab: React.FC = memo(({ /> )} - {/* 竞争地位分析 */} + {/* 竞争地位分析(包含行业排名弹窗) */} {comprehensiveData?.competitive_position && ( - - )} - - {/* 行业排名 */} - {industryRankData && industryRankData.length > 0 && ( - )}