perf: Tab 容器组件优化

- 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 <noreply@anthropic.com>

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<SubTabContainerProps> = ({
+const SubTabContainer: React.FC<SubTabContainerProps> = memo(({
   tabs,
   componentProps = {},
   defaultIndex = 0,
@@ -190,6 +190,8 @@ const SubTabContainer: React.FC<SubTabContainerProps> = ({
       </Tabs>
     </Box>
   );
-};
+});
+
+SubTabContainer.displayName = 'SubTabContainer';
 
 export default SubTabContainer;

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,

src/components/TabContainer/index.tsx

@@ -54,7 +54,6 @@ const TabContainer: React.FC<TabContainerProps> = ({
   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,

src/components/TabContainer/types.ts

@@ -62,8 +62,6 @@ export interface TabContainerProps {
   isLazy?: boolean;
   /** Tab 尺寸 */
   size?: 'sm' | 'md' | 'lg';
-  /** 是否显示分割线 */
-  showDivider?: boolean;
   /** 容器圆角 */
   borderRadius?: string;
   /** 容器阴影 */

src/components/TabPanelContainer/index.tsx

@@ -49,7 +49,7 @@ const LoadingState: React.FC<{ message: string; height: string }> = ({
 }) => (
   <Center h={height}>
     <VStack spacing={3}>
-      <Spinner size="lg" color="blue.500" thickness="3px" />
+      <Spinner size="lg" color="#D4AF37" thickness="3px" />
       <Text fontSize="sm" color="gray.500">
         {message}
       </Text>

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<BusinessTabProps> = ({
+const BusinessTab: React.FC<BusinessTabProps> = memo(({
   comprehensiveData,
   cardBg,
   expandedSegments,
@@ -45,6 +45,8 @@ const BusinessTab: React.FC<BusinessTabProps> = ({
         )}
     </TabPanelContainer>
   );
-};
+});
+
+BusinessTab.displayName = 'BusinessTab';
 
 export default BusinessTab;

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<DevelopmentTabProps> = ({
+const DevelopmentTab: React.FC<DevelopmentTabProps> = memo(({
   keyFactorsData,
   cardBg,
 }) => {
@@ -42,6 +42,8 @@ const DevelopmentTab: React.FC<DevelopmentTabProps> = ({
       </Grid>
     </TabPanelContainer>
   );
-};
+});
+
+DevelopmentTab.displayName = 'DevelopmentTab';
 
 export default DevelopmentTab;

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<StrategyTabProps> = ({
+const StrategyTab: React.FC<StrategyTabProps> = memo(({
   comprehensiveData,
   cardBg,
 }) => {
@@ -46,6 +46,8 @@ const StrategyTab: React.FC<StrategyTabProps> = ({
       )}
     </TabPanelContainer>
   );
-};
+});
+
+StrategyTab.displayName = 'StrategyTab';
 
 export default StrategyTab;

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<ValueChainTabProps> = ({
+const ValueChainTab: React.FC<ValueChainTabProps> = memo(({
   valueChainData,
   cardBg,
 }) => {
@@ -25,6 +25,8 @@ const ValueChainTab: React.FC<ValueChainTabProps> = ({
       )}
     </TabPanelContainer>
   );
-};
+});
+
+ValueChainTab.displayName = 'ValueChainTab';
 
 export default ValueChainTab;