From e049429b094b4072baad5adb861258cfca9f6d2d Mon Sep 17 00:00:00 2001 From: zdl <3489966805@qq.com> Date: Fri, 12 Dec 2025 12:02:15 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20Tab=20=E5=AE=B9=E5=99=A8=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - TabPanelContainer: Loading 颜色改为金色 #D4AF37，与黑金主题一致 - SubTabContainer: 添加 memo 和 displayName - 子 Tab 组件: StrategyTab/BusinessTab/ValueChainTab/DevelopmentTab 添加 memo 和 displayName - TabContainer: 移除未使用的 showDivider 参数 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- src/components/SubTabContainer/index.tsx | 8 +++++--- src/components/TabContainer/constants.ts | 1 - src/components/TabContainer/index.tsx | 1 - src/components/TabContainer/types.ts | 2 -- src/components/TabPanelContainer/index.tsx | 2 +- .../CompanyOverview/DeepAnalysisTab/tabs/BusinessTab.tsx | 8 +++++--- .../DeepAnalysisTab/tabs/DevelopmentTab.tsx | 8 +++++--- .../CompanyOverview/DeepAnalysisTab/tabs/StrategyTab.tsx | 8 +++++--- .../DeepAnalysisTab/tabs/ValueChainTab.tsx | 8 +++++--- 9 files changed, 26 insertions(+), 20 deletions(-) diff --git a/src/components/SubTabContainer/index.tsx b/src/components/SubTabContainer/index.tsx index 6cbb994c..f46af027 100644 --- a/src/components/SubTabContainer/index.tsx +++ b/src/components/SubTabContainer/index.tsx @@ -17,7 +17,7 @@ * ``` */ -import React, { useState, useCallback } from 'react'; +import React, { useState, useCallback, memo } from 'react'; import { Box, Tabs, @@ -97,7 +97,7 @@ export interface SubTabContainerProps { isLazy?: boolean; } -const SubTabContainer: React.FC = ({ +const SubTabContainer: React.FC = memo(({ tabs, componentProps = {}, defaultIndex = 0, @@ -190,6 +190,8 @@ const SubTabContainer: React.FC = ({ ); -}; +}); + +SubTabContainer.displayName = 'SubTabContainer'; export default SubTabContainer; diff --git a/src/components/TabContainer/constants.ts b/src/components/TabContainer/constants.ts index 40c2e6ec..784bd3cd 100644 --- a/src/components/TabContainer/constants.ts +++ b/src/components/TabContainer/constants.ts @@ -49,7 +49,6 @@ export const DEFAULT_CONFIG = { themePreset: 'blackGold' as ThemePreset, isLazy: true, size: 'lg' as const, - showDivider: true, borderRadius: 'lg', shadow: 'lg', panelPadding: 0, diff --git a/src/components/TabContainer/index.tsx b/src/components/TabContainer/index.tsx index 17bf6fc0..4726a509 100644 --- a/src/components/TabContainer/index.tsx +++ b/src/components/TabContainer/index.tsx @@ -54,7 +54,6 @@ const TabContainer: React.FC = ({ themeColors: customThemeColors, isLazy = DEFAULT_CONFIG.isLazy, size = DEFAULT_CONFIG.size, - showDivider = DEFAULT_CONFIG.showDivider, borderRadius = DEFAULT_CONFIG.borderRadius, shadow = DEFAULT_CONFIG.shadow, panelPadding = DEFAULT_CONFIG.panelPadding, diff --git a/src/components/TabContainer/types.ts b/src/components/TabContainer/types.ts index dcf959d3..6845e48f 100644 --- a/src/components/TabContainer/types.ts +++ b/src/components/TabContainer/types.ts @@ -62,8 +62,6 @@ export interface TabContainerProps { isLazy?: boolean; /** Tab 尺寸 */ size?: 'sm' | 'md' | 'lg'; - /** 是否显示分割线 */ - showDivider?: boolean; /** 容器圆角 */ borderRadius?: string; /** 容器阴影 */ diff --git a/src/components/TabPanelContainer/index.tsx b/src/components/TabPanelContainer/index.tsx index be5eaddb..f45c3e9e 100644 --- a/src/components/TabPanelContainer/index.tsx +++ b/src/components/TabPanelContainer/index.tsx @@ -49,7 +49,7 @@ const LoadingState: React.FC<{ message: string; height: string }> = ({ }) => (
- + {message} diff --git a/src/views/Company/components/CompanyOverview/DeepAnalysisTab/tabs/BusinessTab.tsx b/src/views/Company/components/CompanyOverview/DeepAnalysisTab/tabs/BusinessTab.tsx index 75a9aa9a..7d26c742 100644 --- a/src/views/Company/components/CompanyOverview/DeepAnalysisTab/tabs/BusinessTab.tsx +++ b/src/views/Company/components/CompanyOverview/DeepAnalysisTab/tabs/BusinessTab.tsx @@ -4,7 +4,7 @@ * 包含：业务结构分析 + 业务板块详情 */ -import React from 'react'; +import React, { memo } from 'react'; import TabPanelContainer from '@components/TabPanelContainer'; import { BusinessStructureCard, BusinessSegmentsCard } from '../components'; import type { ComprehensiveData } from '../types'; @@ -16,7 +16,7 @@ export interface BusinessTabProps { onToggleSegment: (index: number) => void; } -const BusinessTab: React.FC = ({ +const BusinessTab: React.FC = memo(({ comprehensiveData, cardBg, expandedSegments, @@ -45,6 +45,8 @@ const BusinessTab: React.FC = ({ )} ); -}; +}); + +BusinessTab.displayName = 'BusinessTab'; export default BusinessTab; diff --git a/src/views/Company/components/CompanyOverview/DeepAnalysisTab/tabs/DevelopmentTab.tsx b/src/views/Company/components/CompanyOverview/DeepAnalysisTab/tabs/DevelopmentTab.tsx index 5fe59463..4419fc00 100644 --- a/src/views/Company/components/CompanyOverview/DeepAnalysisTab/tabs/DevelopmentTab.tsx +++ b/src/views/Company/components/CompanyOverview/DeepAnalysisTab/tabs/DevelopmentTab.tsx @@ -4,7 +4,7 @@ * 包含：关键因素 + 发展时间线（Grid 布局） */ -import React from 'react'; +import React, { memo } from 'react'; import { Grid, GridItem } from '@chakra-ui/react'; import TabPanelContainer from '@components/TabPanelContainer'; import { KeyFactorsCard, TimelineCard } from '../components'; @@ -15,7 +15,7 @@ export interface DevelopmentTabProps { cardBg?: string; } -const DevelopmentTab: React.FC = ({ +const DevelopmentTab: React.FC = memo(({ keyFactorsData, cardBg, }) => { @@ -42,6 +42,8 @@ const DevelopmentTab: React.FC = ({ ); -}; +}); + +DevelopmentTab.displayName = 'DevelopmentTab'; export default DevelopmentTab; diff --git a/src/views/Company/components/CompanyOverview/DeepAnalysisTab/tabs/StrategyTab.tsx b/src/views/Company/components/CompanyOverview/DeepAnalysisTab/tabs/StrategyTab.tsx index 2d9d67a6..7db0db88 100644 --- a/src/views/Company/components/CompanyOverview/DeepAnalysisTab/tabs/StrategyTab.tsx +++ b/src/views/Company/components/CompanyOverview/DeepAnalysisTab/tabs/StrategyTab.tsx @@ -4,7 +4,7 @@ * 包含：核心定位 + 战略分析 + 竞争地位分析 */ -import React from 'react'; +import React, { memo } from 'react'; import TabPanelContainer from '@components/TabPanelContainer'; import { CorePositioningCard, @@ -18,7 +18,7 @@ export interface StrategyTabProps { cardBg?: string; } -const StrategyTab: React.FC = ({ +const StrategyTab: React.FC = memo(({ comprehensiveData, cardBg, }) => { @@ -46,6 +46,8 @@ const StrategyTab: React.FC = ({ )} ); -}; +}); + +StrategyTab.displayName = 'StrategyTab'; export default StrategyTab; diff --git a/src/views/Company/components/CompanyOverview/DeepAnalysisTab/tabs/ValueChainTab.tsx b/src/views/Company/components/CompanyOverview/DeepAnalysisTab/tabs/ValueChainTab.tsx index 2c73fa12..b6785f05 100644 --- a/src/views/Company/components/CompanyOverview/DeepAnalysisTab/tabs/ValueChainTab.tsx +++ b/src/views/Company/components/CompanyOverview/DeepAnalysisTab/tabs/ValueChainTab.tsx @@ -4,7 +4,7 @@ * 包含：产业链分析（层级视图 + Sankey 流向图） */ -import React from 'react'; +import React, { memo } from 'react'; import TabPanelContainer from '@components/TabPanelContainer'; import { ValueChainCard } from '../components'; import type { ValueChainData } from '../types'; @@ -14,7 +14,7 @@ export interface ValueChainTabProps { cardBg?: string; } -const ValueChainTab: React.FC = ({ +const ValueChainTab: React.FC = memo(({ valueChainData, cardBg, }) => { @@ -25,6 +25,8 @@ const ValueChainTab: React.FC = ({ )} ); -}; +}); + +ValueChainTab.displayName = 'ValueChainTab'; export default ValueChainTab;