fix(FinancialOverviewPanel): 主营业务"历史对比"改为"历史数据"

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/components/Navbars/components/UserMenu/TabletUserMenu.js

@@ -9,6 +9,7 @@ import {
     MenuItem,
     MenuDivider,
     Box,
+    Flex,
     Text,
     Badge,
     useColorModeValue

src/components/SubTabContainer/index.tsx

@@ -50,6 +50,14 @@ export interface SubTabConfig {
   fallback?: React.ReactNode;
 }
 
+/**
+ * Tab 分组配置
+ */
+export interface SubTabGroup {
+  name: string;
+  tabs: SubTabConfig[];
+}
+
 /**
  * 深空 FUI 主题配置
  */
@@ -129,8 +137,10 @@ const THEME_PRESETS: Record<string, SubTabTheme> = {
 };
 
 export interface SubTabContainerProps {
-  /** Tab 配置数组 */
-  tabs: SubTabConfig[];
+  /** Tab 配置数组（与 groups 二选一） */
+  tabs?: SubTabConfig[];
+  /** Tab 分组配置（与 tabs 二选一） */
+  groups?: SubTabGroup[];
   /** 传递给 Tab 内容组件的 props */
   componentProps?: Record<string, any>;
   /** 默认选中的 Tab 索引 */
@@ -156,7 +166,8 @@ export interface SubTabContainerProps {
 }
 
 const SubTabContainer: React.FC<SubTabContainerProps> = memo(({
-  tabs,
+  tabs: tabsProp,
+  groups,
   componentProps = {},
   defaultIndex = 0,
   index: controlledIndex,
@@ -171,6 +182,21 @@ const SubTabContainer: React.FC<SubTabContainerProps> = memo(({
 }) => {
   // 获取尺寸配置
   const sizeConfig = SIZE_CONFIG[size];
+
+  // 将分组展平为 tabs 数组，同时保留分组信息用于渲染分隔符
+  const { tabs, groupBoundaries } = React.useMemo(() => {
+    if (groups && groups.length > 0) {
+      const flatTabs: SubTabConfig[] = [];
+      const boundaries: number[] = []; // 记录每个分组的起始索引
+      groups.forEach((group) => {
+        boundaries.push(flatTabs.length);
+        flatTabs.push(...group.tabs);
+      });
+      return { tabs: flatTabs, groupBoundaries: boundaries };
+    }
+    return { tabs: tabsProp || [], groupBoundaries: [] };
+  }, [groups, tabsProp]);
+
   // 内部状态（非受控模式）
   const [internalIndex, setInternalIndex] = useState(defaultIndex);
 
@@ -280,64 +306,90 @@ const SubTabContainer: React.FC<SubTabContainerProps> = memo(({
             >
               {tabs.map((tab, idx) => {
                 const isSelected = idx === currentIndex;
+                // 检查是否需要在此 Tab 前显示分组标签
+                const groupIndex = groupBoundaries.indexOf(idx);
+                const showGroupLabel = groups && groupIndex !== -1;
 
                 return (
-                  <Tab
-                    key={tab.key}
-                    color={theme.tabUnselectedColor}
-                    borderRadius={DEEP_SPACE.radius}
-                    px={sizeConfig.px}
-                    py={sizeConfig.py}
-                    fontSize={sizeConfig.fontSize}
-                    fontWeight="500"
-                    whiteSpace="nowrap"
-                    flexShrink={0}
-                    border="1px solid transparent"
-                    position="relative"
-                    letterSpacing="0.03em"
-                    transition={DEEP_SPACE.transition}
-                    _before={{
-                      content: '""',
-                      position: 'absolute',
-                      bottom: '-1px',
-                      left: '50%',
-                      transform: 'translateX(-50%)',
-                      width: isSelected ? '70%' : '0%',
-                      height: '2px',
-                      bg: '#D4AF37',
-                      borderRadius: 'full',
-                      transition: 'width 0.3s ease',
-                      boxShadow: isSelected ? '0 0 10px rgba(212, 175, 55, 0.5)' : 'none',
-                    }}
-                    _selected={{
-                      bg: theme.tabSelectedBg,
-                      color: theme.tabSelectedColor,
-                      fontWeight: '700',
-                      boxShadow: DEEP_SPACE.glowGold,
-                      border: `1px solid ${DEEP_SPACE.borderGoldHover}`,
-                      transform: 'translateY(-2px)',
-                    }}
-                    _hover={{
-                      bg: isSelected ? undefined : theme.tabHoverBg,
-                      border: isSelected ? undefined : `1px solid ${DEEP_SPACE.borderGold}`,
-                      transform: 'translateY(-1px)',
-                    }}
-                    _active={{
-                      transform: 'translateY(0)',
-                    }}
-                  >
-                    <HStack spacing={size === 'sm' ? 1.5 : 2}>
-                      {tab.icon && (
-                        <Icon
-                          as={tab.icon}
-                          boxSize={sizeConfig.iconSize}
-                          opacity={isSelected ? 1 : 0.7}
-                          transition="opacity 0.2s"
-                        />
-                      )}
-                      <Text>{tab.name}</Text>
-                    </HStack>
-                  </Tab>
+                  <React.Fragment key={tab.key}>
+                    {/* 分组标签 */}
+                    {showGroupLabel && (
+                      <HStack
+                        spacing={2}
+                        flexShrink={0}
+                        pl={groupIndex > 0 ? 3 : 0}
+                        pr={2}
+                        borderLeft={groupIndex > 0 ? '1px solid' : 'none'}
+                        borderColor={DEEP_SPACE.borderGold}
+                        ml={groupIndex > 0 ? 2 : 0}
+                      >
+                        <Text
+                          fontSize="xs"
+                          color={DEEP_SPACE.textMuted}
+                          fontWeight="500"
+                          whiteSpace="nowrap"
+                          letterSpacing="0.05em"
+                        >
+                          {groups[groupIndex].name}
+                        </Text>
+                      </HStack>
+                    )}
+                    <Tab
+                      color={theme.tabUnselectedColor}
+                      borderRadius={DEEP_SPACE.radius}
+                      px={sizeConfig.px}
+                      py={sizeConfig.py}
+                      fontSize={sizeConfig.fontSize}
+                      fontWeight="500"
+                      whiteSpace="nowrap"
+                      flexShrink={0}
+                      border="1px solid transparent"
+                      position="relative"
+                      letterSpacing="0.03em"
+                      transition={DEEP_SPACE.transition}
+                      _before={{
+                        content: '""',
+                        position: 'absolute',
+                        bottom: '-1px',
+                        left: '50%',
+                        transform: 'translateX(-50%)',
+                        width: isSelected ? '70%' : '0%',
+                        height: '2px',
+                        bg: '#D4AF37',
+                        borderRadius: 'full',
+                        transition: 'width 0.3s ease',
+                        boxShadow: isSelected ? '0 0 10px rgba(212, 175, 55, 0.5)' : 'none',
+                      }}
+                      _selected={{
+                        bg: theme.tabSelectedBg,
+                        color: theme.tabSelectedColor,
+                        fontWeight: '700',
+                        boxShadow: DEEP_SPACE.glowGold,
+                        border: `1px solid ${DEEP_SPACE.borderGoldHover}`,
+                        transform: 'translateY(-2px)',
+                      }}
+                      _hover={{
+                        bg: isSelected ? undefined : theme.tabHoverBg,
+                        border: isSelected ? undefined : `1px solid ${DEEP_SPACE.borderGold}`,
+                        transform: 'translateY(-1px)',
+                      }}
+                      _active={{
+                        transform: 'translateY(0)',
+                      }}
+                    >
+                      <HStack spacing={size === 'sm' ? 1.5 : 2}>
+                        {tab.icon && (
+                          <Icon
+                            as={tab.icon}
+                            boxSize={sizeConfig.iconSize}
+                            opacity={isSelected ? 1 : 0.7}
+                            transition="opacity 0.2s"
+                          />
+                        )}
+                        <Text>{tab.name}</Text>
+                      </HStack>
+                    </Tab>
+                  </React.Fragment>
                 );
               })}
             </TabList>

src/mocks/data/company.js

@@ -361,8 +361,8 @@ export const PINGAN_BANK_DATA = {
         { shareholder_rank: 4, shareholder_name: '中国证券金融股份有限公司', holding_shares: 298654200, circulation_share_ratio: 1.54, shareholder_type: '券商', end_date: '2024-09-30' },
         { shareholder_rank: 5, shareholder_name: '中央汇金资产管理有限责任公司', holding_shares: 267842100, circulation_share_ratio: 1.38, shareholder_type: '法人', end_date: '2024-09-30' },
         { shareholder_rank: 6, shareholder_name: '全国社保基金一零三组合', holding_shares: 156234500, circulation_share_ratio: 0.80, shareholder_type: '社保', end_date: '2024-09-30' },
-        { shareholder_rank: 7, shareholder_name: '华夏上证50交易型开放式指数证券投资基金', holding_shares: 142356700, circulation_share_ratio: 0.73, shareholder_type: '基金', end_date: '2024-09-30' },
-        { shareholder_rank: 8, shareholder_name: '中国人寿保险股份有限公司-分红-个人分红-005L-FH002深', holding_shares: 128945600, circulation_share_ratio: 0.66, shareholder_type: '保险', end_date: '2024-09-30' },
+        { shareholder_rank: 7, shareholder_name: '华夏上证50交易型开放式指数证券投资基金', holding_shares: 142356700, circulation_share_ratio: 0.73, shareholder_type: '资产管理公司资产管理计划', end_date: '2024-09-30' },
+        { shareholder_rank: 8, shareholder_name: '中国人寿保险股份有限公司-分红-个人分红-005L-FH002深', holding_shares: 128945600, circulation_share_ratio: 0.66, shareholder_type: '保险资产管理产品', end_date: '2024-09-30' },
         { shareholder_rank: 9, shareholder_name: '易方达沪深300交易型开放式指数发起式证券投资基金', holding_shares: 98765400, circulation_share_ratio: 0.51, shareholder_type: '基金', end_date: '2024-09-30' },
         { shareholder_rank: 10, shareholder_name: '嘉实沪深300交易型开放式指数证券投资基金', holding_shares: 87654300, circulation_share_ratio: 0.45, shareholder_type: '基金', end_date: '2024-09-30' }
     ],
@@ -375,8 +375,8 @@ export const PINGAN_BANK_DATA = {
         { shareholder_rank: 4, shareholder_name: '中国证券金融股份有限公司', holding_shares: 298654200, total_share_ratio: 1.54, shareholder_type: '券商', share_nature: '流通A股', end_date: '2024-09-30' },
         { shareholder_rank: 5, shareholder_name: '中央汇金资产管理有限责任公司', holding_shares: 267842100, total_share_ratio: 1.38, shareholder_type: '法人', share_nature: '流通A股', end_date: '2024-09-30' },
         { shareholder_rank: 6, shareholder_name: '全国社保基金一零三组合', holding_shares: 156234500, total_share_ratio: 0.80, shareholder_type: '社保', share_nature: '流通A股', end_date: '2024-09-30' },
-        { shareholder_rank: 7, shareholder_name: '华夏上证50交易型开放式指数证券投资基金', holding_shares: 142356700, total_share_ratio: 0.73, shareholder_type: '基金', share_nature: '流通A股', end_date: '2024-09-30' },
-        { shareholder_rank: 8, shareholder_name: '中国人寿保险股份有限公司-分红-个人分红-005L-FH002深', holding_shares: 128945600, total_share_ratio: 0.66, shareholder_type: '保险', share_nature: '流通A股', end_date: '2024-09-30' },
+        { shareholder_rank: 7, shareholder_name: '华夏上证50交易型开放式指数证券投资基金', holding_shares: 142356700, total_share_ratio: 0.73, shareholder_type: '资产管理公司资产管理计划', share_nature: '限售流通A股', end_date: '2024-09-30' },
+        { shareholder_rank: 8, shareholder_name: '中国人寿保险股份有限公司-分红-个人分红-005L-FH002深', holding_shares: 128945600, total_share_ratio: 0.66, shareholder_type: '保险资产管理产品', share_nature: '限售流通A股、质押股份', end_date: '2024-09-30' },
         { shareholder_rank: 9, shareholder_name: '易方达沪深300交易型开放式指数发起式证券投资基金', holding_shares: 98765400, total_share_ratio: 0.51, shareholder_type: '基金', share_nature: '流通A股', end_date: '2024-09-30' },
         { shareholder_rank: 10, shareholder_name: '嘉实沪深300交易型开放式指数证券投资基金', holding_shares: 87654300, total_share_ratio: 0.45, shareholder_type: '基金', share_nature: '流通A股', end_date: '2024-09-30' }
     ],
@@ -843,53 +843,105 @@ export const PINGAN_BANK_DATA = {
     // 关键因素时间线 - 结构与组件期望格式匹配
     keyFactorsTimeline: {
         key_factors: {
-            total_factors: 5,
+            total_factors: 8,
             categories: [
                 {
-                    category_name: '正面因素',
-                    category_type: 'positive',
+                    category_name: '财务指标',
                     factors: [
                         {
-                            factor_name: '零售转型深化',
-                            impact_score: 9.2,
-                            description: '零售业务收入占比持续提升，已超过50%，客户基础和AUM稳步增长',
-                            trend: 'improving'
+                            factor_name: '净息差',
+                            factor_value: 2.45,
+                            factor_unit: '%',
+                            factor_desc: '利率市场化推进下，净息差较上年同期收窄12bp，但仍处于行业中上水平',
+                            impact_direction: 'negative',
+                            impact_weight: 85,
+                            year_on_year: -4.7,
+                            report_period: '2024Q3'
                         },
                         {
-                            factor_name: '金融科技领先',
-                            impact_score: 8.8,
-                            description: 'AI、大数据等技术应用深化，智能化转型成效显著',
-                            trend: 'stable'
+                            factor_name: '不良贷款率',
+                            factor_value: 1.05,
+                            factor_unit: '%',
+                            factor_desc: '资产质量稳中向好，不良贷款率环比下降3bp，拨备覆盖率保持在280%以上',
+                            impact_direction: 'positive',
+                            impact_weight: 90,
+                            year_on_year: -2.8,
+                            report_period: '2024Q3'
                         },
                         {
-                            factor_name: '资产质量稳定',
-                            impact_score: 8.5,
-                            description: '不良贷款率控制在较低水平，风险抵御能力强',
-                            trend: 'stable'
+                            factor_name: '零售AUM',
+                            factor_value: 4.2,
+                            factor_unit: '万亿',
+                            factor_desc: '零售客户资产管理规模持续增长，同比增长15.3%，财富管理转型成效显著',
+                            impact_direction: 'positive',
+                            impact_weight: 88,
+                            year_on_year: 15.3,
+                            report_period: '2024Q3'
                         }
                     ]
                 },
                 {
-                    category_name: '负面因素',
-                    category_type: 'negative',
+                    category_name: '业务发展',
                     factors: [
                         {
-                            factor_name: '息差压力',
-                            impact_score: 6.5,
-                            description: '利率市场化持续推进，净息差面临收窄压力',
-                            trend: 'declining'
+                            factor_name: '零售营收占比',
+                            factor_value: 58.3,
+                            factor_unit: '%',
+                            factor_desc: '零售银行转型深化，零售业务收入占比持续提升，成为最主要的盈利来源',
+                            impact_direction: 'positive',
+                            impact_weight: 92,
+                            year_on_year: 3.2,
+                            report_period: '2024Q3'
+                        },
+                        {
+                            factor_name: '对公贷款增速',
+                            factor_value: 8.5,
+                            factor_unit: '%',
+                            factor_desc: '对公业务稳步发展，聚焦制造业、绿色金融等重点领域',
+                            impact_direction: 'neutral',
+                            impact_weight: 70,
+                            year_on_year: -1.2,
+                            report_period: '2024Q3'
                         }
                     ]
                 },
                 {
-                    category_name: '中性因素',
-                    category_type: 'neutral',
+                    category_name: '风险因素',
                     factors: [
                         {
-                            factor_name: '监管趋严',
-                            impact_score: 7.0,
-                            description: '金融监管持续强化，合规成本有所上升',
-                            trend: 'stable'
+                            factor_name: '房地产敞口',
+                            factor_value: 3200,
+                            factor_unit: '亿元',
+                            factor_desc: '房地产相关贷款余额约3200亿，占比8.5%，需持续关注行业风险演变',
+                            impact_direction: 'negative',
+                            impact_weight: 75,
+                            year_on_year: -5.2,
+                            report_period: '2024Q3'
+                        },
+                        {
+                            factor_name: '信用成本',
+                            factor_value: 1.32,
+                            factor_unit: '%',
+                            factor_desc: '信用成本率保持相对稳定，风险抵补能力充足',
+                            impact_direction: 'neutral',
+                            impact_weight: 72,
+                            year_on_year: 0.05,
+                            report_period: '2024Q3'
+                        }
+                    ]
+                },
+                {
+                    category_name: '战略布局',
+                    factors: [
+                        {
+                            factor_name: '科技投入',
+                            factor_value: 120,
+                            factor_unit: '亿元',
+                            factor_desc: '持续加大金融科技投入，AI、大数据应用深化，数字化转型领先同业',
+                            impact_direction: 'positive',
+                            impact_weight: 85,
+                            year_on_year: 18.5,
+                            report_period: '2024'
                         }
                     ]
                 }
@@ -1422,41 +1474,80 @@ export const generateCompanyData = (stockCode, stockName = '示例公司') => {
         },
         keyFactorsTimeline: {
             key_factors: {
-                total_factors: 3,
+                total_factors: 6,
                 categories: [
                     {
-                        category_name: '正面因素',
-                        category_type: 'positive',
+                        category_name: '财务指标',
                         factors: [
                             {
-                                factor_name: '业绩增长',
-                                impact_score: 8.5,
-                                description: '营收和利润保持稳定增长态势',
-                                trend: 'improving'
+                                factor_name: '营收增速',
+                                factor_value: 12.5,
+                                factor_unit: '%',
+                                factor_desc: '营业收入保持稳定增长，主营业务发展良好',
+                                impact_direction: 'positive',
+                                impact_weight: 85,
+                                year_on_year: 2.3,
+                                report_period: '2024Q3'
+                            },
+                            {
+                                factor_name: '毛利率',
+                                factor_value: 35.2,
+                                factor_unit: '%',
+                                factor_desc: '毛利率水平稳定，成本控制能力较强',
+                                impact_direction: 'neutral',
+                                impact_weight: 75,
+                                year_on_year: -0.8,
+                                report_period: '2024Q3'
                             }
                         ]
                     },
                     {
-                        category_name: '负面因素',
-                        category_type: 'negative',
+                        category_name: '业务发展',
+                        factors: [
+                            {
+                                factor_name: '市场份额',
+                                factor_value: 15.8,
+                                factor_unit: '%',
+                                factor_desc: '市场份额稳步提升，竞争优势逐步巩固',
+                                impact_direction: 'positive',
+                                impact_weight: 82,
+                                year_on_year: 1.5,
+                                report_period: '2024Q3'
+                            },
+                            {
+                                factor_name: '新产品贡献',
+                                factor_value: 22.3,
+                                factor_unit: '%',
+                                factor_desc: '新产品收入占比提升，创新驱动成效明显',
+                                impact_direction: 'positive',
+                                impact_weight: 78,
+                                year_on_year: 5.2,
+                                report_period: '2024Q3'
+                            }
+                        ]
+                    },
+                    {
+                        category_name: '风险因素',
                         factors: [
                             {
                                 factor_name: '原材料成本',
-                                impact_score: 6.0,
-                                description: '原材料价格波动影响毛利率',
-                                trend: 'declining'
-                            }
-                        ]
-                    },
-                    {
-                        category_name: '中性因素',
-                        category_type: 'neutral',
-                        factors: [
+                                factor_value: 28.5,
+                                factor_unit: '%',
+                                factor_desc: '原材料成本占比上升，需关注价格波动影响',
+                                impact_direction: 'negative',
+                                impact_weight: 70,
+                                year_on_year: 3.2,
+                                report_period: '2024Q3'
+                            },
                             {
-                                factor_name: '市场竞争',
-                                impact_score: 7.0,
-                                description: '行业竞争加剧，需持续提升竞争力',
-                                trend: 'stable'
+                                factor_name: '应收账款周转',
+                                factor_value: 85,
+                                factor_unit: '天',
+                                factor_desc: '应收账款周转天数有所增加，需加强回款管理',
+                                impact_direction: 'negative',
+                                impact_weight: 65,
+                                year_on_year: 8,
+                                report_period: '2024Q3'
                             }
                         ]
                     }
@@ -1465,14 +1556,50 @@ export const generateCompanyData = (stockCode, stockName = '示例公司') => {
             development_timeline: {
                 statistics: {
                     positive_events: 4,
-                    negative_events: 0,
-                    neutral_events: 0
+                    negative_events: 1,
+                    neutral_events: 1
                 },
                 events: [
-                    { date: '2024-10-28', event: '发布三季报', type: '业绩公告', importance: 'high', impact: '业绩超预期', change: '+3.5%', sentiment: 'positive' },
-                    { date: '2024-08-28', event: '发布中报', type: '业绩公告', importance: 'high', impact: '业绩稳定增长', change: '+2.8%', sentiment: 'positive' },
-                    { date: '2024-06-15', event: '新产品发布', type: '产品发布', importance: 'medium', impact: '丰富产品线', change: '+1.5%', sentiment: 'positive' },
-                    { date: '2024-04-28', event: '发布一季报', type: '业绩公告', importance: 'high', impact: '开门红', change: '+2.2%', sentiment: 'positive' }
+                    {
+                        event_date: '2024-10-28',
+                        event_title: '发布2024年三季报',
+                        event_type: '业绩公告',
+                        event_desc: '前三季度业绩稳健增长，营收和净利润均实现双位数增长',
+                        impact_metrics: { impact_score: 82, is_positive: true },
+                        related_info: { financial_impact: '股价当日上涨3.5%' }
+                    },
+                    {
+                        event_date: '2024-08-28',
+                        event_title: '发布2024年中报',
+                        event_type: '业绩公告',
+                        event_desc: '上半年业绩稳定增长，各项经营指标符合预期',
+                        impact_metrics: { impact_score: 75, is_positive: true },
+                        related_info: { financial_impact: '股价累计上涨2.8%' }
+                    },
+                    {
+                        event_date: '2024-06-15',
+                        event_title: '新产品发布会',
+                        event_type: '产品发布',
+                        event_desc: '发布新一代产品系列，技术升级明显，市场反响良好',
+                        impact_metrics: { impact_score: 70, is_positive: true },
+                        related_info: { financial_impact: '预计贡献增量收入10-15%' }
+                    },
+                    {
+                        event_date: '2024-05-20',
+                        event_title: '原材料价格上涨',
+                        event_type: '成本压力',
+                        event_desc: '主要原材料价格上涨约8%，对毛利率形成一定压力',
+                        impact_metrics: { impact_score: 55, is_positive: false },
+                        related_info: { financial_impact: '预计影响毛利率0.5-1个百分点' }
+                    },
+                    {
+                        event_date: '2024-04-28',
+                        event_title: '发布2024年一季报',
+                        event_type: '业绩公告',
+                        event_desc: '一季度业绩实现开门红，主要指标好于市场预期',
+                        impact_metrics: { impact_score: 78, is_positive: true },
+                        related_info: { financial_impact: '股价上涨2.2%' }
+                    }
                 ]
             }
         },

src/mocks/data/financial.js

@@ -155,13 +155,13 @@ export const generateFinancialData = (stockCode) => {
                 asset_disposal_income: 340 - i * 10
             },
             profit: {
-                operating_profit: 68450 - i * 1500,
-                total_profit: 69500 - i * 1500,
-                income_tax_expense: 16640 - i * 300,
-                net_profit: 52860 - i * 1200,
-                parent_net_profit: 51200 - i * 1150,
-                minority_profit: 1660 - i * 50,
-                continuing_operations_net_profit: 52860 - i * 1200,
+                operating_profit: (68450 - i * 1500) * 10000,
+                total_profit: (69500 - i * 1500) * 10000,
+                income_tax_expense: (16640 - i * 300) * 10000,
+                net_profit: (52860 - i * 1200) * 10000,
+                parent_net_profit: (51200 - i * 1150) * 10000,
+                minority_profit: (1660 - i * 50) * 10000,
+                continuing_operations_net_profit: (52860 - i * 1200) * 10000,
                 discontinued_operations_net_profit: 0
             },
             non_operating: {
@@ -272,16 +272,19 @@ export const generateFinancialData = (stockCode) => {
             }
         })),
 
-        // 主营业务 - 按产品/业务分类
+        // 主营业务 - 按产品/业务分类（6个业务）
         mainBusiness: {
             product_classification: [
                 {
                     period: '2024-09-30',
                     report_type: '2024年三季报',
                     products: [
-                        { content: '零售金融业务', revenue: 81320000000, gross_margin: 68.5, profit_margin: 42.3, profit: 34398160000 },
-                        { content: '对公金融业务', revenue: 68540000000, gross_margin: 62.8, profit_margin: 38.6, profit: 26456440000 },
-                        { content: '金融市场业务', revenue: 12490000000, gross_margin: 75.2, profit_margin: 52.1, profit: 6507290000 },
+                        { content: '零售业务', revenue: 56822500000, gross_margin: 68.5, profit_margin: 42.3, profit: 24035877500 },
+                        { content: '金融服务', revenue: 32470000000, gross_margin: 62.8, profit_margin: 38.6, profit: 12533420000 },
+                        { content: '对冲投资', revenue: 24352500000, gross_margin: 75.2, profit_margin: 52.1, profit: 12687652500 },
+                        { content: '云服务', revenue: 19482000000, gross_margin: 72.0, profit_margin: 48.5, profit: 9448770000 },
+                        { content: '物流网络', revenue: 16235000000, gross_margin: 58.5, profit_margin: 32.8, profit: 5325080000 },
+                        { content: '其他业务', revenue: 12988000000, gross_margin: 55.2, profit_margin: 28.6, profit: 3714568000 },
                         { content: '合计', revenue: 162350000000, gross_margin: 67.5, profit_margin: 41.2, profit: 66883200000 },
                     ]
                 },
@@ -289,9 +292,12 @@ export const generateFinancialData = (stockCode) => {
                     period: '2024-06-30',
                     report_type: '2024年中报',
                     products: [
-                        { content: '零售金融业务', revenue: 78650000000, gross_margin: 67.8, profit_margin: 41.5, profit: 32639750000 },
-                        { content: '对公金融业务', revenue: 66280000000, gross_margin: 61.9, profit_margin: 37.8, profit: 25053840000 },
-                        { content: '金融市场业务', revenue: 11870000000, gross_margin: 74.5, profit_margin: 51.2, profit: 6077440000 },
+                        { content: '零售业务', revenue: 54880000000, gross_margin: 67.8, profit_margin: 41.5, profit: 22775200000 },
+                        { content: '金融服务', revenue: 31360000000, gross_margin: 61.9, profit_margin: 37.8, profit: 11854080000 },
+                        { content: '对冲投资', revenue: 23520000000, gross_margin: 74.5, profit_margin: 51.2, profit: 12042240000 },
+                        { content: '云服务', revenue: 18816000000, gross_margin: 71.2, profit_margin: 47.8, profit: 8994048000 },
+                        { content: '物流网络', revenue: 15680000000, gross_margin: 57.8, profit_margin: 32.1, profit: 5033280000 },
+                        { content: '其他业务', revenue: 12544000000, gross_margin: 54.5, profit_margin: 28.0, profit: 3512320000 },
                         { content: '合计', revenue: 156800000000, gross_margin: 66.8, profit_margin: 40.5, profit: 63504000000 },
                     ]
                 },
@@ -299,9 +305,12 @@ export const generateFinancialData = (stockCode) => {
                     period: '2024-03-31',
                     report_type: '2024年一季报',
                     products: [
-                        { content: '零售金融业务', revenue: 38920000000, gross_margin: 67.2, profit_margin: 40.8, profit: 15879360000 },
-                        { content: '对公金融业务', revenue: 32650000000, gross_margin: 61.2, profit_margin: 37.1, profit: 12113150000 },
-                        { content: '金融市场业务', revenue: 5830000000, gross_margin: 73.8, profit_margin: 50.5, profit: 2944150000 },
+                        { content: '零售业务', revenue: 27090000000, gross_margin: 67.2, profit_margin: 40.8, profit: 11052720000 },
+                        { content: '金融服务', revenue: 15480000000, gross_margin: 61.2, profit_margin: 37.1, profit: 5743080000 },
+                        { content: '对冲投资', revenue: 11610000000, gross_margin: 73.8, profit_margin: 50.5, profit: 5863050000 },
+                        { content: '云服务', revenue: 9288000000, gross_margin: 70.5, profit_margin: 47.0, profit: 4365360000 },
+                        { content: '物流网络', revenue: 7740000000, gross_margin: 57.0, profit_margin: 31.5, profit: 2438100000 },
+                        { content: '其他业务', revenue: 6192000000, gross_margin: 53.8, profit_margin: 27.2, profit: 1684224000 },
                         { content: '合计', revenue: 77400000000, gross_margin: 66.1, profit_margin: 39.8, profit: 30805200000 },
                     ]
                 },
@@ -309,9 +318,12 @@ export const generateFinancialData = (stockCode) => {
                     period: '2023-12-31',
                     report_type: '2023年年报',
                     products: [
-                        { content: '零售金融业务', revenue: 152680000000, gross_margin: 66.5, profit_margin: 40.2, profit: 61377360000 },
-                        { content: '对公金融业务', revenue: 128450000000, gross_margin: 60.5, profit_margin: 36.5, profit: 46884250000 },
-                        { content: '金融市场业务', revenue: 22870000000, gross_margin: 73.2, profit_margin: 49.8, profit: 11389260000 },
+                        { content: '零售业务', revenue: 106400000000, gross_margin: 66.5, profit_margin: 40.2, profit: 42772800000 },
+                        { content: '金融服务', revenue: 60800000000, gross_margin: 60.5, profit_margin: 36.5, profit: 22192000000 },
+                        { content: '对冲投资', revenue: 45600000000, gross_margin: 73.2, profit_margin: 49.8, profit: 22708800000 },
+                        { content: '云服务', revenue: 36480000000, gross_margin: 69.8, profit_margin: 46.2, profit: 16853760000 },
+                        { content: '物流网络', revenue: 30400000000, gross_margin: 56.2, profit_margin: 30.8, profit: 9363200000 },
+                        { content: '其他业务', revenue: 24320000000, gross_margin: 53.0, profit_margin: 26.5, profit: 6444800000 },
                         { content: '合计', revenue: 304000000000, gross_margin: 65.2, profit_margin: 39.2, profit: 119168000000 },
                     ]
                 },

src/mocks/data/market.js

@@ -170,22 +170,84 @@ export const generateMarketData = (stockCode) => {
             }
         },
 
-        // 涨停分析 - 返回数组格式，每个元素对应一个交易日
+        // 涨幅分析 - 匹配 RiseAnalysis 类型，每个交易日一条记录
         riseAnalysisData: {
             success: true,
             data: Array(30).fill(null).map((_, i) => {
                 const tradeDate = new Date(Date.now() - (29 - i) * 24 * 60 * 60 * 1000).toISOString().split('T')[0];
-                const isLimitUp = Math.random() < 0.05; // 5%概率涨停
+                const riseRate = parseFloat(((Math.random() - 0.5) * 10).toFixed(2)); // -5% ~ +5%
+                const closePrice = parseFloat((basePrice * (1 + riseRate / 100)).toFixed(2));
+                const volume = Math.floor(Math.random() * 500000000) + 100000000;
+                const amount = Math.floor(volume * closePrice);
+
+                // 涨幅分析详情模板
+                const riseReasons = [
+                    {
+                        brief: '业绩超预期',
+                        detail: `## 业绩驱动\n\n${stockInfo.name}发布业绩公告，主要经营指标超出市场预期：\n\n- **营业收入**：同比增长15.3%，环比增长5.2%\n- **净利润**：同比增长18.7%，创历史新高\n- **毛利率**：提升2.1个百分点至35.8%\n\n### 核心亮点\n\n1. 主营业务增长强劲，市场份额持续提升\n2. 成本管控效果显著，盈利能力改善\n3. 新产品放量，贡献增量收入`,
+                        announcements: `**重要公告**\n\n1. [${stockInfo.name}：关于2024年度业绩预告的公告](javascript:void(0))\n2. [${stockInfo.name}：关于获得政府补助的公告](javascript:void(0))`
+                    },
+                    {
+                        brief: '政策利好',
+                        detail: `## 政策催化\n\n近期行业政策密集出台，对${stockInfo.name}形成重大利好：\n\n### 政策要点\n\n- **行业支持政策**：国家出台支持措施，加大对行业的扶持力度\n- **税收优惠**：符合条件的企业可享受税收减免\n- **融资支持**：拓宽企业融资渠道，降低融资成本\n\n### 受益分析\n\n公司作为行业龙头，有望充分受益于政策红利，预计：\n\n1. 订单量将显著增长\n2. 毛利率有望提升\n3. 市场份额进一步扩大`,
+                        announcements: `**相关公告**\n\n1. [${stockInfo.name}：关于行业政策影响的说明公告](javascript:void(0))`
+                    },
+                    {
+                        brief: '资金流入',
+                        detail: `## 资金面分析\n\n今日${stockInfo.name}获得主力资金大幅流入：\n\n### 资金流向\n\n| 指标 | 数值 | 变化 |\n|------|------|------|\n| 主力净流入 | 3.2亿 | +156% |\n| 超大单净流入 | 1.8亿 | +89% |\n| 大单净流入 | 1.4亿 | +67% |\n\n### 分析结论\n\n1. 机构资金持续加仓，看好公司长期价值\n2. 北向资金连续3日净买入\n3. 融资余额创近期新高`,
+                        announcements: ''
+                    },
+                    {
+                        brief: '技术突破',
+                        detail: `## 技术面分析\n\n${stockInfo.name}今日实现技术突破：\n\n### 技术信号\n\n- **突破关键阻力位**：成功站上${(closePrice * 0.95).toFixed(2)}元重要阻力\n- **量价配合良好**：成交量较昨日放大1.5倍\n- **均线多头排列**：5日、10日、20日均线呈多头排列\n\n### 后市展望\n\n技术面看，股价有望继续向上挑战${(closePrice * 1.05).toFixed(2)}元目标位。建议关注：\n\n1. 能否持续放量\n2. 均线支撑情况\n3. MACD金叉确认`,
+                        announcements: ''
+                    }
+                ];
+
+                const reasonIndex = i % riseReasons.length;
+                const reason = riseReasons[reasonIndex];
+
+                // 研报数据
+                const publishers = ['中信证券', '华泰证券', '国泰君安', '招商证券', '中金公司', '海通证券'];
+                const authors = ['张三', '李四', '王五', '赵六', '钱七', '孙八'];
+                const matchScores = ['好', '中', '差'];
+
                 return {
+                    stock_code: stockCode,
+                    stock_name: stockInfo.name,
                     trade_date: tradeDate,
-                    is_limit_up: isLimitUp,
-                    limit_up_price: (basePrice * 1.10).toFixed(2),
-                    current_price: (basePrice + (Math.random() - 0.5) * 0.5).toFixed(2),
-                    distance_to_limit: (Math.random() * 10).toFixed(2), // %
-                    consecutive_days: isLimitUp ? Math.floor(Math.random() * 3) + 1 : 0,
-                    reason: isLimitUp ? '业绩超预期' : '',
-                    concept_tags: ['银行', '深圳国资', 'MSCI', '沪深300'],
-                    analysis: isLimitUp ? '股价触及涨停板，资金流入明显' : '股价正常波动，交投活跃'
+                    rise_rate: riseRate,
+                    close_price: closePrice,
+                    volume: volume,
+                    amount: amount,
+                    main_business: stockInfo.business || '金融服务、零售银行、对公业务、资产管理等',
+                    rise_reason_brief: reason.brief,
+                    rise_reason_detail: reason.detail,
+                    announcements: reason.announcements || '',
+                    verification_reports: [
+                        {
+                            publisher: publishers[i % publishers.length],
+                            match_score: matchScores[Math.floor(Math.random() * 3)],
+                            match_ratio: parseFloat((Math.random() * 0.5 + 0.5).toFixed(2)),
+                            declare_date: tradeDate,
+                            report_title: `${stockInfo.name}深度研究：${reason.brief}带来投资机会`,
+                            author: authors[i % authors.length],
+                            verification_item: `${reason.brief}对公司业绩的影响分析`,
+                            content: `我们认为${stockInfo.name}在${reason.brief}的背景下，有望实现业绩的持续增长。维持"买入"评级，目标价${(closePrice * 1.2).toFixed(2)}元。`
+                        },
+                        {
+                            publisher: publishers[(i + 1) % publishers.length],
+                            match_score: matchScores[Math.floor(Math.random() * 3)],
+                            match_ratio: parseFloat((Math.random() * 0.4 + 0.3).toFixed(2)),
+                            declare_date: tradeDate,
+                            report_title: `${stockInfo.name}跟踪报告：关注${reason.brief}`,
+                            author: authors[(i + 1) % authors.length],
+                            verification_item: '估值分析与投资建议',
+                            content: `当前估值处于历史中低位，安全边际充足。建议投资者积极关注。`
+                        }
+                    ],
+                    update_time: new Date().toISOString().split('T')[0] + ' 18:30:00',
+                    create_time: tradeDate + ' 15:30:00'
                 };
             })
         },

src/views/Authentication/Lock/LockBasic.js

@@ -1,117 +0,0 @@
-/*!
-
-=========================================================
-* Argon Dashboard Chakra PRO - v1.0.0
-=========================================================
-
-* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
-* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
-
-* Designed and Coded by Simmmple & Creative Tim
-
-=========================================================
-
-* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-*/
-
-// Chakra imports
-import {
-  Button,
-  Flex,
-  FormControl,
-  FormLabel,
-  HStack,
-  Icon,
-  Input,
-  Link,
-  Switch,
-  Text,
-  useColorModeValue,
-} from "@chakra-ui/react";
-// Assets
-import BasicImage from "assets/img/BasicImage.png";
-import React from "react";
-import AuthBasic from "layouts/AuthBasic";
-
-function LockBasic() {
-  // Chakra color mode
-  const textColor = useColorModeValue("gray.700", "white");
-  const bgForm = useColorModeValue("white", "navy.800");
-  return (
-    <AuthBasic
-      title="Welcome!"
-      description="Use these awesome forms to login or create new account in your project for free."
-      image={BasicImage}
-    >
-      <Flex
-        w="100%"
-        h="100%"
-        alignItems="center"
-        justifyContent="center"
-        mb="60px"
-        mt={{ base: "60px", md: "0px" }}
-      >
-        <Flex
-          zIndex="2"
-          direction="column"
-          w="445px"
-          background="transparent"
-          borderRadius="15px"
-          p="40px"
-          mx={{ base: "20px", md: "100px" }}
-          mb={{ base: "20px", md: "auto" }}
-          bg={bgForm}
-          boxShadow={useColorModeValue(
-            "0px 5px 14px rgba(0, 0, 0, 0.05)",
-            "unset"
-          )}
-        >
-          <Text
-            fontWeight="bold"
-            color={textColor}
-            textAlign="center"
-            mb="10px"
-            fontSize={{ base: "3xl", md: "4xl" }}
-          >
-            Mike Priesler
-          </Text>
-          <Text
-            fontWeight="regular"
-            textAlign="center"
-            color="gray.400"
-            mb="35px"
-          >
-            Enter your password to unlock your account.
-          </Text>
-          <FormControl>
-            <FormLabel ms="4px" fontSize="sm" fontWeight="normal">
-              Password
-            </FormLabel>
-            <Input
-              variant="auth"
-              fontSize="sm"
-              ms="4px"
-              type="password"
-              placeholder="Your password"
-              mb="24px"
-              size="lg"
-            />
-            <Button
-              fontSize="10px"
-              variant="dark"
-              fontWeight="bold"
-              w="100%"
-              h="45"
-              mb="24px"
-            >
-              UNLOCK
-            </Button>
-          </FormControl>
-        </Flex>
-      </Flex>
-    </AuthBasic>
-  );
-}
-
-export default LockBasic;

src/views/Authentication/Lock/LockCover.js

@@ -1,109 +0,0 @@
-/*!
-
-=========================================================
-* Argon Dashboard Chakra PRO - v1.0.0
-=========================================================
-
-* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
-* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
-
-* Designed and Coded by Simmmple & Creative Tim
-
-=========================================================
-
-* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-*/
-
-// Chakra imports
-import {
-  Button,
-  Flex,
-  FormControl,
-  FormLabel,
-  Input,
-  Text,
-  useColorModeValue,
-} from "@chakra-ui/react";
-// Assets
-import CoverImage from "assets/img/CoverImage.png";
-import React from "react";
-import AuthCover from "layouts/AuthCover";
-
-function LockCover() {
-  // Chakra color mode
-  const textColor = useColorModeValue("gray.700", "white");
-  const bgForm = useColorModeValue("white", "navy.800");
-  return (
-    <AuthCover image={CoverImage}>
-      <Flex
-        w="100%"
-        h="100%"
-        alignItems="center"
-        justifyContent="center"
-        mb="60px"
-        mt={{ base: "60px", md: "30vh" }}
-      >
-        <Flex
-          zIndex="2"
-          direction="column"
-          w="445px"
-          background="transparent"
-          borderRadius="15px"
-          p="40px"
-          mx={{ base: "20px", md: "100px" }}
-          mb={{ base: "20px", md: "auto" }}
-          bg={bgForm}
-          boxShadow={useColorModeValue(
-            "0px 5px 14px rgba(0, 0, 0, 0.05)",
-            "unset"
-          )}
-        >
-          <Text
-            fontWeight="bold"
-            color={textColor}
-            textAlign="center"
-            mb="10px"
-            fontSize={{ base: "3xl", md: "4xl" }}
-          >
-            Mike Priesler
-          </Text>
-          <Text
-            fontWeight="regular"
-            textAlign="center"
-            color="gray.400"
-            mb="35px"
-          >
-            Enter your password to unlock your account.
-          </Text>
-          <FormControl>
-            <FormLabel ms="4px" fontSize="sm" fontWeight="normal">
-              Email
-            </FormLabel>
-            <Input
-              variant="auth"
-              fontSize="sm"
-              ms="4px"
-              type="text"
-              placeholder="Your email address"
-              mb="24px"
-              size="lg"
-            />
-            <Button
-              fontSize="10px"
-              variant="dark"
-              fontWeight="bold"
-              w="100%"
-              h="45"
-              mb="24px"
-            >
-              UNLOCK
-            </Button>
-          </FormControl>
-        </Flex>
-      </Flex>
-    </AuthCover>
-  );
-}
-
-export default LockCover;

src/views/Authentication/Lock/LockIllustration.js

@@ -1,81 +0,0 @@
-import React from "react";
-// Chakra imports
-import {
-  Button,
-  Flex,
-  FormControl,
-  FormLabel,
-  Input,
-  Text,
-  useColorModeValue,
-  LightMode,
-} from "@chakra-ui/react";
-// Assets
-import illustration from "assets/img/illustration-auth.png";
-import AuthIllustration from "layouts/AuthIllustration";
-
-function LockIllustration() {
-  // Chakra color mode
-  const textColor = useColorModeValue("blue.500", "blue.500");
-  return (
-    <AuthIllustration
-      illustrationBackground='linear-gradient(180deg, #3182CE 0%, #63B3ED 100%)'
-      image={illustration}>
-      <Flex
-        w='100%'
-        h='100%'
-        alignItems='start'
-        justifyContent='start'
-        mb={{ base: "0px", md: "60px" }}
-        mt={{ base: "60px", md: "34vh" }}>
-        <Flex
-          zIndex='2'
-          direction='column'
-          w='445px'
-          background='transparent'
-          borderRadius='15px'
-          pe={{ base: "0px", md: "80px" }}
-          mx={{ base: "20px", md: "0px" }}
-          mb={{ base: "20px", md: "auto" }}>
-          <Text
-            fontWeight='bold'
-            color={textColor}
-            mb='10px'
-            fontSize={{ base: "3xl", md: "4xl" }}>
-            Mike Priesler
-          </Text>
-          <Text fontWeight='regular' color='gray.400' mb='35px'>
-            Enter your password to unlock your account.
-          </Text>
-          <FormControl>
-            <FormLabel ms='4px' fontSize='sm' fontWeight='normal'>
-              Password
-            </FormLabel>
-            <Input
-              variant='main'
-              fontSize='sm'
-              ms='4px'
-              type='password'
-              placeholder='Your password'
-              mb='24px'
-              size='lg'
-            />
-            <LightMode>
-              <Button
-                fontSize='10px'
-                colorScheme='blue'
-                fontWeight='bold'
-                w='100%'
-                h='45'
-                mb='24px'>
-                UNLOCK
-              </Button>
-            </LightMode>
-          </FormControl>
-        </Flex>
-      </Flex>
-    </AuthIllustration>
-  );
-}
-
-export default LockIllustration;

src/views/Authentication/Reset/ResetBasic.js

@@ -1,125 +0,0 @@
-/*!
-
-=========================================================
-* Argon Dashboard Chakra PRO - v1.0.0
-=========================================================
-
-* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
-* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
-
-* Designed and Coded by Simmmple & Creative Tim
-
-=========================================================
-
-* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-*/
-
-// Chakra imports
-import {
-  Button,
-  Flex,
-  FormControl,
-  FormLabel,
-  Input,
-  Text,
-  useColorModeValue,
-} from "@chakra-ui/react";
-// Assets
-import BasicImage from "assets/img/BasicImage.png";
-import React from "react";
-import AuthBasic from "layouts/AuthBasic";
-
-function ResetCover() {
-  // Chakra color mode
-  const textColor = useColorModeValue("gray.700", "white");
-  const bgForm = useColorModeValue("white", "navy.800");
-  return (
-    <AuthBasic
-      title="Welcome!"
-      description="Use these awesome forms to login or create new account in your project for free."
-      image={BasicImage}
-    >
-      <Flex
-        w="100%"
-        h="100%"
-        alignItems="center"
-        justifyContent="center"
-        mb="60px"
-        mt={{ base: "60px", md: "0px" }}
-      >
-        <Flex
-          zIndex="2"
-          direction="column"
-          w="445px"
-          background="transparent"
-          borderRadius="15px"
-          p="40px"
-          mx={{ base: "20px", md: "100px" }}
-          mb={{ base: "20px", md: "auto" }}
-          bg={bgForm}
-          boxShadow={useColorModeValue(
-            "0px 5px 14px rgba(0, 0, 0, 0.05)",
-            "unset"
-          )}
-        >
-          <Text
-            fontWeight="bold"
-            color={textColor}
-            textAlign="center"
-            mb="10px"
-            fontSize={{ base: "3xl", md: "4xl" }}
-          >
-            Reset password
-          </Text>
-          <Text
-            fontWeight="regular"
-            textAlign="center"
-            color="gray.400"
-            mb="35px"
-          >
-            You will receive an e-mail in maximum 60 seconds.
-          </Text>
-          <FormControl>
-            <FormLabel ms="4px" fontSize="sm" fontWeight="normal">
-              Email
-            </FormLabel>
-            <Input
-              variant="auth"
-              fontSize="sm"
-              ms="4px"
-              type="text"
-              placeholder="Your email address"
-              mb="24px"
-              size="lg"
-            />
-            {/* <FormLabel ms='4px' fontSize='sm' fontWeight='normal'>
-              Password
-            </FormLabel>
-            <Input
-              variant='auth'
-              fontSize='sm'
-              ms='4px'
-              type='password'
-              placeholder='Your password'
-              mb='24px'
-              size='lg'
-            />  */}
-            <Button
-              fontSize="10px"
-              variant="dark"
-              fontWeight="bold"
-              w="100%"
-              h="45"
-              mb="24px"
-            >
-              SEND
-            </Button>
-          </FormControl>
-        </Flex>
-      </Flex>
-    </AuthBasic>
-  );
-}
-
-export default ResetCover;

src/views/Authentication/Reset/ResetCover.js

@@ -1,109 +0,0 @@
-/*!
-
-=========================================================
-* Argon Dashboard Chakra PRO - v1.0.0
-=========================================================
-
-* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
-* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
-
-* Designed and Coded by Simmmple & Creative Tim
-
-=========================================================
-
-* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-*/
-
-// Chakra imports
-import {
-  Button,
-  Flex,
-  FormControl,
-  FormLabel,
-  Input,
-  Text,
-  useColorModeValue,
-} from "@chakra-ui/react";
-// Assets
-import CoverImage from "assets/img/CoverImage.png";
-import React from "react";
-import AuthCover from "layouts/AuthCover";
-
-function ResetCover() {
-  // Chakra color mode
-  const textColor = useColorModeValue("gray.700", "white");
-  const bgForm = useColorModeValue("white", "navy.800");
-  return (
-    <AuthCover image={CoverImage}>
-      <Flex
-        w="100%"
-        h="100%"
-        alignItems="center"
-        justifyContent="center"
-        mb="60px"
-        mt={{ base: "60px", md: "30vh" }}
-      >
-        <Flex
-          zIndex="2"
-          direction="column"
-          w="445px"
-          background="transparent"
-          borderRadius="15px"
-          p="40px"
-          mx={{ base: "20px", md: "100px" }}
-          mb={{ base: "20px", md: "auto" }}
-          bg={bgForm}
-          boxShadow={useColorModeValue(
-            "0px 5px 14px rgba(0, 0, 0, 0.05)",
-            "unset"
-          )}
-        >
-          <Text
-            fontWeight="bold"
-            color={textColor}
-            textAlign="center"
-            mb="10px"
-            fontSize={{ base: "3xl", md: "4xl" }}
-          >
-            Reset password
-          </Text>
-          <Text
-            fontWeight="regular"
-            textAlign="center"
-            color="gray.400"
-            mb="35px"
-          >
-            You will receive an e-mail in maximum 60 seconds.
-          </Text>
-          <FormControl>
-            <FormLabel ms="4px" fontSize="sm" fontWeight="normal">
-              Email
-            </FormLabel>
-            <Input
-              variant="auth"
-              fontSize="sm"
-              ms="4px"
-              type="text"
-              placeholder="Your email address"
-              mb="24px"
-              size="lg"
-            />
-            <Button
-              fontSize="10px"
-              variant="dark"
-              fontWeight="bold"
-              w="100%"
-              h="45"
-              mb="24px"
-            >
-              SEND
-            </Button>
-          </FormControl>
-        </Flex>
-      </Flex>
-    </AuthCover>
-  );
-}
-
-export default ResetCover;

src/views/Authentication/Reset/ResetIllustration.js

@@ -1,81 +0,0 @@
-import React from "react";
-// Chakra imports
-import {
-  Button,
-  Flex,
-  FormControl,
-  FormLabel,
-  Input,
-  Text,
-  useColorModeValue,
-  LightMode,
-} from "@chakra-ui/react";
-// Assets
-import illustration from "assets/img/illustration-auth.png";
-import AuthIllustration from "layouts/AuthIllustration";
-
-function ResetIllustration() {
-  // Chakra color mode
-  const textColor = useColorModeValue("blue.500", "blue.500");
-  return (
-    <AuthIllustration
-      illustrationBackground='linear-gradient(180deg, #3182CE 0%, #63B3ED 100%)'
-      image={illustration}>
-      <Flex
-        w='100%'
-        h='100%'
-        alignItems='start'
-        justifyContent='start'
-        mb={{ base: "0px", md: "60px" }}
-        mt={{ base: "60px", md: "34vh" }}>
-        <Flex
-          zIndex='2'
-          direction='column'
-          w='445px'
-          background='transparent'
-          borderRadius='15px'
-          pe={{ base: "0px", md: "80px" }}
-          mx={{ base: "20px", md: "0px" }}
-          mb={{ base: "20px", md: "auto" }}>
-          <Text
-            fontWeight='bold'
-            color={textColor}
-            mb='10px'
-            fontSize={{ base: "3xl", md: "4xl" }}>
-            Reset password
-          </Text>
-          <Text fontWeight='regular' color='gray.400' mb='35px'>
-            You will receive an e-mail in maximum 60 seconds.
-          </Text>
-          <FormControl>
-            <FormLabel ms='4px' fontSize='sm' fontWeight='normal'>
-              Email
-            </FormLabel>
-            <Input
-              variant='main'
-              fontSize='sm'
-              ms='4px'
-              type='text'
-              placeholder='Your email address'
-              mb='24px'
-              size='lg'
-            />
-            <LightMode>
-              <Button
-                fontSize='10px'
-                colorScheme='blue'
-                fontWeight='bold'
-                w='100%'
-                h='45'
-                mb='24px'>
-                SEND
-              </Button>
-            </LightMode>
-          </FormControl>
-        </Flex>
-      </Flex>
-    </AuthIllustration>
-  );
-}
-
-export default ResetIllustration;

src/views/Authentication/Verification/VerificationBasic.js

@@ -1,116 +0,0 @@
-/*!
-
-=========================================================
-* Argon Dashboard Chakra PRO - v1.0.0
-=========================================================
-
-* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
-* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
-
-* Designed and Coded by Simmmple & Creative Tim
-
-=========================================================
-
-* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-*/
-
-// Chakra imports
-import {
-  Button,
-  Link,
-  Flex,
-  FormControl,
-  Text,
-  Icon,
-  useColorModeValue,
-} from "@chakra-ui/react";
-// Assets
-import BasicImage from "assets/img/BasicImage.png";
-import React from "react";
-import AuthBasic from "layouts/AuthBasic";
-import { PinInputLight } from "components/PinInput/PinInput";
-import { Rocket } from "lucide-react";
-
-function LockBasic() {
-  // Chakra color mode
-  const textColor = useColorModeValue("gray.700", "white");
-  const bgForm = useColorModeValue("white", "navy.800");
-  return (
-    <AuthBasic
-      title="Welcome!"
-      description="Use these awesome forms to login or create new account in your project for free."
-      image={BasicImage}
-    >
-      <Flex
-        w="100%"
-        h="100%"
-        alignItems="center"
-        justifyContent="center"
-        mb="60px"
-        mt={{ base: "60px", md: "0px" }}
-      >
-        <Flex
-          zIndex="2"
-          direction="column"
-          w="445px"
-          background="transparent"
-          borderRadius="15px"
-          p="40px"
-          mx={{ base: "20px", md: "100px" }}
-          mb={{ base: "20px", md: "auto" }}
-          bg={bgForm}
-          boxShadow={useColorModeValue(
-            "0px 5px 14px rgba(0, 0, 0, 0.05)",
-            "unset"
-          )}
-        >
-          <Flex
-            mx="auto"
-            borderRadius="50%"
-            bg="blue.500"
-            w={{ base: "100px" }}
-            h={{ base: "100px" }}
-            justify="center"
-            align="center"
-            mb="30px"
-          >
-            <Icon as={Rocket} color="white" w="36px" h="36px" />
-          </Flex>
-          <Text
-            fontWeight="bold"
-            color={textColor}
-            textAlign="center"
-            mb="10px"
-            fontSize={{ base: "3xl", md: "4xl" }}
-          >
-            2-Step Verification
-          </Text>
-          <FormControl>
-            <Flex justify="center" align="center" mx="auto" mb="30px">
-              <PinInputLight />
-            </Flex>
-            <Button
-              fontSize="10px"
-              variant="dark"
-              fontWeight="bold"
-              w="100%"
-              h="45"
-              mb="24px"
-            >
-              UNLOCK
-            </Button>
-          </FormControl>
-          <Text color="gray.400" fontWeight="400" textAlign="center">
-            Haven't received it?{" "}
-            <Link color={textColor} as="span" fontWeight="700">
-              Resend a new code.
-            </Link>
-          </Text>
-        </Flex>
-      </Flex>
-    </AuthBasic>
-  );
-}
-
-export default LockBasic;

src/views/Authentication/Verification/VerificationCover.js

@@ -1,104 +0,0 @@
-/*!
-
-=========================================================
-* Argon Dashboard Chakra PRO - v1.0.0
-=========================================================
-
-* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
-* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
-
-* Designed and Coded by Simmmple & Creative Tim
-
-=========================================================
-
-* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-*/
-
-// Chakra imports
-import {
-  Button,
-  Flex,
-  Link,
-  Icon,
-  FormControl,
-  Text,
-  useColorModeValue,
-} from "@chakra-ui/react";
-// Assets
-import { PinInputLight } from "components/PinInput/PinInput";
-import { Rocket } from "lucide-react";
-import CoverImage from "assets/img/CoverImage.png";
-import React from "react";
-import AuthCover from "layouts/AuthCover";
-
-function LockCover() {
-  // Chakra color mode
-  const textColor = useColorModeValue("gray.700", "white");
-  const bgForm = useColorModeValue("white", "navy.800");
-  return (
-    <AuthCover image={CoverImage}>
-      <Flex
-        zIndex="2"
-        direction="column"
-        w="445px"
-        background="transparent"
-        borderRadius="15px"
-        p="40px"
-        mx={{ base: "20px", md: "auto" }}
-        mb={{ base: "20px", md: "auto" }}
-        bg={bgForm}
-        boxShadow={useColorModeValue(
-          "0px 5px 14px rgba(0, 0, 0, 0.05)",
-          "unset"
-        )}
-        mt="25vh"
-      >
-        <Flex
-          mx="auto"
-          borderRadius="50%"
-          bg="blue.500"
-          w={{ base: "100px" }}
-          h={{ base: "100px" }}
-          justify="center"
-          align="center"
-          mb="30px"
-        >
-          <Icon as={Rocket} color="white" w="36px" h="36px" />
-        </Flex>
-        <Text
-          fontWeight="bold"
-          color={textColor}
-          textAlign="center"
-          mb="10px"
-          fontSize={{ base: "3xl", md: "4xl" }}
-        >
-          2-Step Verification
-        </Text>
-        <FormControl>
-          <Flex justify="center" align="center" mx="auto" mb="30px">
-            <PinInputLight />
-          </Flex>
-          <Button
-            fontSize="10px"
-            variant="dark"
-            fontWeight="bold"
-            w="100%"
-            h="45"
-            mb="24px"
-          >
-            UNLOCK
-          </Button>
-        </FormControl>
-        <Text color="gray.400" fontWeight="400" textAlign="center">
-          Haven't received it?{" "}
-          <Link color={textColor} as="span" fontWeight="700">
-            Resend a new code.
-          </Link>
-        </Text>
-      </Flex>
-    </AuthCover>
-  );
-}
-
-export default LockCover;

src/views/Authentication/Verification/VerificationIllustration.js

@@ -1,93 +0,0 @@
-import React from "react";
-// Chakra imports
-import {
-  Button,
-  Flex,
-  FormControl,
-  Link,
-  Text,
-  Icon,
-  useColorModeValue,
-} from "@chakra-ui/react";
-// Assets
-import illustration from "assets/img/illustration-auth.png";
-import AuthIllustration from "layouts/AuthIllustration";
-import { PinInputDark } from "components/PinInput/PinInput";
-import { Rocket } from "lucide-react";
-
-function LockIllustration() {
-  // Chakra color mode
-  const textColor = useColorModeValue("blue.500", "blue.500");
-  const inputBg = useColorModeValue(
-    { background: "white !important" },
-    { background: "red !important" }
-  );
-  return (
-    <AuthIllustration
-      illustrationBackground='linear-gradient(180deg, #3182CE 0%, #63B3ED 100%)'
-      image={illustration}>
-      <Flex
-        w='100%'
-        h='100%'
-        alignItems='start'
-        justifyContent='start'
-        mb={{ base: "0px", md: "60px" }}
-        mt={{ base: "60px", md: "30vh" }}>
-        <Flex
-          zIndex='2'
-          direction='column'
-          w='445px'
-          background='transparent'
-          borderRadius='15px'
-          pe={{ base: "0px", md: "80px" }}
-          mx={{ base: "20px", md: "0px" }}
-          mb={{ base: "20px", md: "auto" }}>
-          <Flex
-            mx={{ base: "auto", md: "0px" }}
-            borderRadius='50%'
-            bg='blue.500'
-            w={{ base: "100px" }}
-            h={{ base: "100px" }}
-            justify='center'
-            align='center'
-            mb='30px'>
-            <Icon as={Rocket} color='white' w='36px' h='36px' />
-          </Flex>
-          <Text
-            fontWeight='bold'
-            color={textColor}
-            textAlign='start'
-            mb='10px'
-            fontSize={{ base: "3xl", md: "4xl" }}>
-            2-Step Verification
-          </Text>
-          <FormControl>
-            <Flex mx={{ base: "auto", md: "0px" }} mb='30px'>
-              <PinInputDark />
-            </Flex>
-            <Button
-              fontSize='10px'
-              variant='dark'
-              fontWeight='bold'
-              w='100%'
-              h='45'
-              mb='24px'>
-              UNLOCK
-            </Button>
-          </FormControl>
-          <Text
-            color='gray.400'
-            fontWeight='400'
-            textAlign={{ base: "center", md: "start" }}>
-            Haven't received it?{" "}
-            <Link color={textColor} as='span' fontWeight='700'>
-              Resend a new code.
-            </Link>
-          </Text>
-        </Flex>
-      </Flex>
-    </AuthIllustration>
-  );
-}
-
-export default LockIllustration;

src/views/Company/ForecastReport.js

@@ -1,31 +0,0 @@
-import React from 'react';
-import { Box, Text, VStack, Icon } from '@chakra-ui/react';
-import { LineChart } from 'lucide-react';
-
-/**
- * 预测报告组件 - 占位符
- * TODO: 实现完整功能
- */
-const ForecastReport = ({ stockCode }) => {
-  return (
-    <Box
-      p={8}
-      borderRadius="lg"
-      bg="gray.50"
-      _dark={{ bg: 'gray.800' }}
-      textAlign="center"
-    >
-      <VStack spacing={4}>
-        <Icon as={LineChart} boxSize={12} color="gray.400" />
-        <Text fontSize="lg" fontWeight="medium" color="gray.600" _dark={{ color: 'gray.400' }}>
-          预测报告功能开发中
-        </Text>
-        <Text fontSize="sm" color="gray.500">
-          股票代码: {stockCode || '未选择'}
-        </Text>
-      </VStack>
-    </Box>
-  );
-};
-
-export default ForecastReport;

src/views/Company/MarketDataView.js

@@ -1,31 +0,0 @@
-import React from 'react';
-import { Box, Text, VStack, Icon } from '@chakra-ui/react';
-import { BarChart2 } from 'lucide-react';
-
-/**
- * 市场数据视图组件 - 占位符
- * TODO: 实现完整功能
- */
-const MarketDataView = ({ stockCode }) => {
-  return (
-    <Box
-      p={8}
-      borderRadius="lg"
-      bg="gray.50"
-      _dark={{ bg: 'gray.800' }}
-      textAlign="center"
-    >
-      <VStack spacing={4}>
-        <Icon as={BarChart2} boxSize={12} color="gray.400" />
-        <Text fontSize="lg" fontWeight="medium" color="gray.600" _dark={{ color: 'gray.400' }}>
-          市场数据功能开发中
-        </Text>
-        <Text fontSize="sm" color="gray.500">
-          股票代码: {stockCode || '未选择'}
-        </Text>
-      </VStack>
-    </Box>
-  );
-};
-
-export default MarketDataView;

src/views/Company/components/CompanyOverview/BasicInfoTab/components/BranchesPanel.tsx

@@ -1,7 +1,7 @@
 // src/views/Company/components/CompanyOverview/BasicInfoTab/components/BranchesPanel.tsx
 // 分支机构 Tab Panel - 黑金风格
 
-import React from "react";
+import React, { memo, useMemo } from "react";
 import {
   Box,
   VStack,
@@ -11,7 +11,13 @@ import {
   SimpleGrid,
   Center,
 } from "@chakra-ui/react";
-import { GitBranch, Building2, CheckCircle, XCircle } from "lucide-react";
+import {
+  GitBranch,
+  Building2,
+  CheckCircle,
+  XCircle,
+  HelpCircle,
+} from "lucide-react";
 
 import { useBranchesData } from "../../hooks/useBranchesData";
 import { THEME } from "../config";
@@ -24,23 +30,42 @@ interface BranchesPanelProps {
   isActive?: boolean;
 }
 
-// 黑金卡片样式
-const cardStyles = {
-  bg: "linear-gradient(145deg, rgba(30, 30, 35, 0.95), rgba(20, 20, 25, 0.98))",
-  border: "1px solid",
-  borderColor: "rgba(212, 175, 55, 0.3)",
-  borderRadius: "12px",
-  overflow: "hidden",
-  transition: "all 0.3s ease",
-  _hover: {
-    borderColor: "rgba(212, 175, 55, 0.6)",
-    boxShadow: "0 4px 20px rgba(212, 175, 55, 0.15), inset 0 1px 0 rgba(212, 175, 55, 0.1)",
-    transform: "translateY(-2px)",
+// 状态分类关键词
+const ACTIVE_KEYWORDS = ["存续", "在营", "开业", "在册", "在业"];
+const INACTIVE_KEYWORDS = ["吊销", "注销", "撤销", "关闭", "歇业", "迁出"];
+
+// 获取状态分类
+type StatusType = "active" | "inactive" | "unknown";
+const getStatusType = (status: string | undefined): StatusType => {
+  if (!status || status === "其他") return "unknown";
+  // 优先判断异常状态（因为"吊销，未注销"同时包含两个关键词）
+  if (INACTIVE_KEYWORDS.some((keyword) => status.includes(keyword))) {
+    return "inactive";
+  }
+  if (ACTIVE_KEYWORDS.some((keyword) => status.includes(keyword))) {
+    return "active";
+  }
+  return "unknown";
+};
+
+// 状态样式配置（使用 THEME.status 配置）
+const STATUS_CONFIG = {
+  active: {
+    icon: CheckCircle,
+    ...THEME.status.active,
+  },
+  inactive: {
+    icon: XCircle,
+    ...THEME.status.inactive,
+  },
+  unknown: {
+    icon: HelpCircle,
+    ...THEME.status.unknown,
   },
 };
 
-// 状态徽章样式
-const getStatusBadgeStyles = (isActive: boolean) => ({
+// 状态徽章基础样式（静态部分）
+const STATUS_BADGE_BASE = {
   display: "inline-flex",
   alignItems: "center",
   gap: "4px",
@@ -49,14 +74,38 @@ const getStatusBadgeStyles = (isActive: boolean) => ({
   borderRadius: "full",
   fontSize: "xs",
   fontWeight: "medium",
-  bg: isActive ? "rgba(212, 175, 55, 0.15)" : "rgba(255, 100, 100, 0.15)",
-  color: isActive ? THEME.gold : "#ff6b6b",
   border: "1px solid",
-  borderColor: isActive ? "rgba(212, 175, 55, 0.3)" : "rgba(255, 100, 100, 0.3)",
-});
+} as const;
 
-// 信息项组件
-const InfoItem: React.FC<{ label: string; value: string | number }> = ({ label, value }) => (
+// 预计算各状态的完整徽章样式，避免每次渲染创建新对象
+const STATUS_BADGE_STYLES = {
+  active: {
+    ...STATUS_BADGE_BASE,
+    bg: STATUS_CONFIG.active.bgColor,
+    color: STATUS_CONFIG.active.color,
+    borderColor: STATUS_CONFIG.active.borderColor,
+  },
+  inactive: {
+    ...STATUS_BADGE_BASE,
+    bg: STATUS_CONFIG.inactive.bgColor,
+    color: STATUS_CONFIG.inactive.color,
+    borderColor: STATUS_CONFIG.inactive.borderColor,
+  },
+  unknown: {
+    ...STATUS_BADGE_BASE,
+    bg: STATUS_CONFIG.unknown.bgColor,
+    color: STATUS_CONFIG.unknown.color,
+    borderColor: STATUS_CONFIG.unknown.borderColor,
+  },
+} as const;
+
+// 信息项组件 - memo 优化
+interface InfoItemProps {
+  label: string;
+  value: string | number;
+}
+
+const InfoItem = memo<InfoItemProps>(({ label, value }) => (
   <VStack align="start" spacing={0.5}>
     <Text fontSize="xs" color={THEME.textSecondary} letterSpacing="0.5px">
       {label}
@@ -65,106 +114,127 @@ const InfoItem: React.FC<{ label: string; value: string | number }> = ({ label,
       {value || "-"}
     </Text>
   </VStack>
-);
+));
 
-const BranchesPanel: React.FC<BranchesPanelProps> = ({ stockCode, isActive = true }) => {
-  const { branches, loading } = useBranchesData({ stockCode, enabled: isActive });
+InfoItem.displayName = "BranchInfoItem";
 
-  if (loading) {
-    return <BranchesSkeleton />;
-  }
+// 空状态组件 - 独立 memo 避免重复渲染
+const EmptyState = memo(() => (
+  <Center h="200px">
+    <VStack spacing={3}>
+      <Box
+        p={4}
+        borderRadius="full"
+        bg={THEME.iconBg}
+        border="1px solid"
+        borderColor={THEME.iconBgLight}
+      >
+        <Icon as={GitBranch} boxSize={10} color={THEME.gold} opacity={0.6} />
+      </Box>
+      <Text color={THEME.textSecondary} fontSize="sm">
+        暂无分支机构信息
+      </Text>
+    </VStack>
+  </Center>
+));
 
-  if (branches.length === 0) {
-    return (
-      <Center h="200px">
-        <VStack spacing={3}>
-          <Box
-            p={4}
-            borderRadius="full"
-            bg="rgba(212, 175, 55, 0.1)"
-            border="1px solid"
-            borderColor="rgba(212, 175, 55, 0.2)"
-          >
-            <Icon as={GitBranch} boxSize={10} color={THEME.gold} opacity={0.6} />
-          </Box>
-          <Text color={THEME.textSecondary} fontSize="sm">
-            暂无分支机构信息
-          </Text>
-        </VStack>
-      </Center>
-    );
-  }
+EmptyState.displayName = "BranchesEmptyState";
+
+// 分支卡片组件 - 独立 memo 优化列表渲染
+interface BranchCardProps {
+  branch: any;
+}
+
+const BranchCard = memo<BranchCardProps>(({ branch }) => {
+  const statusType = useMemo(() => getStatusType(branch.business_status), [
+    branch.business_status,
+  ]);
+  const StatusIcon = STATUS_CONFIG[statusType].icon;
+
+  // 缓存关联企业显示值
+  const relatedCompanyValue = useMemo(
+    () => `${branch.related_company_count || 0} 家`,
+    [branch.related_company_count]
+  );
 
   return (
-    <SimpleGrid columns={{ base: 1, md: 2 }} spacing={4}>
-      {branches.map((branch: any, idx: number) => {
-        const isActive = branch.business_status === "存续";
+    <Box sx={THEME.card}>
+      {/* 顶部金色装饰线 */}
+      <Box h="2px" bgGradient={THEME.gradients.decorLine} />
 
-        return (
-          <Box key={idx} sx={cardStyles}>
-            {/* 顶部金色装饰线 */}
-            <Box
-              h="2px"
-              bgGradient="linear(to-r, transparent, rgba(212, 175, 55, 0.6), transparent)"
-            />
+      <Box p={4}>
+        <VStack align="start" spacing={4}>
+          {/* 标题行 */}
+          <HStack justify="space-between" w="full" align="flex-start">
+            <HStack spacing={2} flex={1}>
+              <Box p={1.5} borderRadius="md" bg={THEME.iconBg}>
+                <Icon as={Building2} boxSize={3.5} color={THEME.gold} />
+              </Box>
+              <Text
+                fontWeight="bold"
+                color={THEME.textPrimary}
+                fontSize="sm"
+                noOfLines={2}
+                lineHeight="tall"
+              >
+                {branch.branch_name}
+              </Text>
+            </HStack>
 
-            <Box p={4}>
-              <VStack align="start" spacing={4}>
-                {/* 标题行 */}
-                <HStack justify="space-between" w="full" align="flex-start">
-                  <HStack spacing={2} flex={1}>
-                    <Box
-                      p={1.5}
-                      borderRadius="md"
-                      bg="rgba(212, 175, 55, 0.1)"
-                    >
-                      <Icon as={Building2} boxSize={3.5} color={THEME.gold} />
-                    </Box>
-                    <Text
-                      fontWeight="bold"
-                      color={THEME.textPrimary}
-                      fontSize="sm"
-                      noOfLines={2}
-                      lineHeight="tall"
-                    >
-                      {branch.branch_name}
-                    </Text>
-                  </HStack>
-
-                  {/* 状态徽章 */}
-                  <Box sx={getStatusBadgeStyles(isActive)}>
-                    <Icon
-                      as={isActive ? CheckCircle : XCircle}
-                      boxSize={3}
-                    />
-                    <Text>{branch.business_status}</Text>
-                  </Box>
-                </HStack>
-
-                {/* 分隔线 */}
-                <Box
-                  w="full"
-                  h="1px"
-                  bgGradient="linear(to-r, rgba(212, 175, 55, 0.3), transparent)"
-                />
-
-                {/* 信息网格 */}
-                <SimpleGrid columns={2} spacing={3} w="full">
-                  <InfoItem label="注册资本" value={branch.register_capital} />
-                  <InfoItem label="法人代表" value={branch.legal_person} />
-                  <InfoItem label="成立日期" value={formatDate(branch.register_date)} />
-                  <InfoItem
-                    label="关联企业"
-                    value={`${branch.related_company_count || 0} 家`}
-                  />
-                </SimpleGrid>
-              </VStack>
+            {/* 状态徽章 */}
+            <Box sx={STATUS_BADGE_STYLES[statusType]}>
+              <Icon as={StatusIcon} boxSize={3} />
+              <Text>{branch.business_status || "未知"}</Text>
             </Box>
-          </Box>
-        );
-      })}
-    </SimpleGrid>
+          </HStack>
+
+          {/* 分隔线 */}
+          <Box w="full" h="1px" bgGradient={THEME.gradients.divider} />
+
+          {/* 信息网格 */}
+          <SimpleGrid columns={2} spacing={3} w="full">
+            <InfoItem label="注册资本" value={branch.register_capital} />
+            <InfoItem label="法人代表" value={branch.legal_person} />
+            <InfoItem
+              label="成立日期"
+              value={formatDate(branch.register_date)}
+            />
+            <InfoItem label="关联企业" value={relatedCompanyValue} />
+          </SimpleGrid>
+        </VStack>
+      </Box>
+    </Box>
   );
-};
+});
+
+BranchCard.displayName = "BranchCard";
+
+// 主组件
+const BranchesPanel: React.FC<BranchesPanelProps> = memo(
+  ({ stockCode, isActive = true }) => {
+    const { branches, loading } = useBranchesData({
+      stockCode,
+      enabled: isActive,
+    });
+
+    if (loading) {
+      return <BranchesSkeleton />;
+    }
+
+    if (branches.length === 0) {
+      return <EmptyState />;
+    }
+
+    return (
+      <SimpleGrid columns={{ base: 1, md: 2 }} spacing={4}>
+        {branches.map((branch: any, idx: number) => (
+          <BranchCard key={branch.branch_name || idx} branch={branch} />
+        ))}
+      </SimpleGrid>
+    );
+  }
+);
+
+BranchesPanel.displayName = "BranchesPanel";
 
 export default BranchesPanel;

src/views/Company/components/CompanyOverview/BasicInfoTab/components/management/ManagementCard.tsx

@@ -44,6 +44,7 @@ const ManagementCard: React.FC<ManagementCardProps> = ({ person, categoryColor }
             name={person.name}
             size="md"
             bg={categoryColor}
+            color="black"
           />
           <VStack align="start" spacing={1} flex={1}>
             {/* 姓名和性别 */}

src/views/Company/components/CompanyOverview/BasicInfoTab/config.ts

@@ -3,6 +3,28 @@
 
 import { LucideIcon, Share2, UserRound, GitBranch, Info } from "lucide-react";
 
+// 状态颜色类型
+export interface StatusColors {
+  color: string;
+  bgColor: string;
+  borderColor: string;
+}
+
+// 卡片样式类型
+export interface CardStyles {
+  bg: string;
+  border: string;
+  borderColor: string;
+  borderRadius: string;
+  overflow: string;
+  transition: string;
+  _hover: {
+    borderColor: string;
+    boxShadow: string;
+    transform: string;
+  };
+}
+
 // 主题类型定义
 export interface Theme {
   bg: string;
@@ -21,6 +43,23 @@ export interface Theme {
   tabUnselected: {
     color: string;
   };
+  // 状态颜色配置
+  status: {
+    active: StatusColors;
+    inactive: StatusColors;
+    unknown: StatusColors;
+  };
+  // 渐变配置
+  gradients: {
+    cardBg: string;
+    decorLine: string;
+    divider: string;
+  };
+  // 图标容器背景
+  iconBg: string;
+  iconBgLight: string;
+  // 通用卡片样式
+  card: CardStyles;
 }
 
 // 黑金主题配置
@@ -30,17 +69,62 @@ export const THEME: Theme = {
   cardBg: "gray.800",
   tableBg: "gray.700",
   tableHoverBg: "gray.600",
-  gold: "#F4D03F",            // 亮黄金色（用于文字，对比度更好）
-  goldLight: "#F0D78C",       // 浅金色（用于次要文字）
+  gold: "#F4D03F", // 亮黄金色（用于文字，对比度更好）
+  goldLight: "#F0D78C", // 浅金色（用于次要文字）
   textPrimary: "white",
   textSecondary: "gray.400",
-  border: "rgba(212, 175, 55, 0.3)",  // 边框保持原色
+  border: "rgba(212, 175, 55, 0.3)", // 边框保持原色
   tabSelected: {
-    bg: "#D4AF37",            // 选中背景保持深金色
+    bg: "#D4AF37", // 选中背景保持深金色
     color: "gray.900",
   },
   tabUnselected: {
-    color: "#F4D03F",         // 未选中使用亮金色
+    color: "#F4D03F", // 未选中使用亮金色
+  },
+  // 状态颜色配置（用于分支机构等状态显示）
+  status: {
+    active: {
+      color: "#F4D03F",
+      bgColor: "rgba(212, 175, 55, 0.15)",
+      borderColor: "rgba(212, 175, 55, 0.3)",
+    },
+    inactive: {
+      color: "#ff6b6b",
+      bgColor: "rgba(255, 100, 100, 0.15)",
+      borderColor: "rgba(255, 100, 100, 0.3)",
+    },
+    unknown: {
+      color: "#a0aec0",
+      bgColor: "rgba(160, 174, 192, 0.15)",
+      borderColor: "rgba(160, 174, 192, 0.3)",
+    },
+  },
+  // 渐变配置
+  gradients: {
+    cardBg:
+      "linear-gradient(145deg, rgba(30, 30, 35, 0.95), rgba(20, 20, 25, 0.98))",
+    decorLine:
+      "linear(to-r, transparent, rgba(212, 175, 55, 0.6), transparent)",
+    divider: "linear(to-r, rgba(212, 175, 55, 0.3), transparent)",
+  },
+  // 图标容器背景
+  iconBg: "rgba(212, 175, 55, 0.1)",
+  iconBgLight: "rgba(212, 175, 55, 0.2)",
+  // 通用卡片样式
+  card: {
+    bg:
+      "linear-gradient(145deg, rgba(30, 30, 35, 0.95), rgba(20, 20, 25, 0.98))",
+    border: "1px solid",
+    borderColor: "rgba(212, 175, 55, 0.3)",
+    borderRadius: "12px",
+    overflow: "hidden",
+    transition: "all 0.3s ease",
+    _hover: {
+      borderColor: "rgba(212, 175, 55, 0.6)",
+      boxShadow:
+        "0 4px 20px rgba(212, 175, 55, 0.15), inset 0 1px 0 rgba(212, 175, 55, 0.1)",
+      transform: "translateY(-2px)",
+    },
   },
 };
 

src/views/Company/components/CompanyOverview/DeepAnalysisTab/atoms/BusinessTreeItem.tsx

@@ -58,10 +58,10 @@ const BusinessTreeItem: React.FC<BusinessTreeItemProps> = ({ business, depth = 0
               )}
           </HStack>
           <HStack spacing={4} flexWrap="wrap">
-            <Tag size="sm" bg="gray.600" color={THEME.textPrimary}>
+            <Tag size="sm" bg="gray.600" color="white">
               营收占比: {formatPercentage(business.financial_metrics?.revenue_ratio)}
             </Tag>
-            <Tag size="sm" bg="gray.600" color={THEME.textPrimary}>
+            <Tag size="sm" bg="gray.600" color="white">
               毛利率: {formatPercentage(business.financial_metrics?.gross_margin)}
             </Tag>
             {business.growth_metrics?.revenue_growth !== undefined && (

src/views/Company/components/CompanyOverview/DeepAnalysisTab/atoms/ScoreBar.tsx

@@ -5,20 +5,23 @@
  * 使用位置：竞争力分析区域（共 8 处）
  */
 
-import React from 'react';
-import { Box, HStack, Text, Badge, Progress, Icon } from '@chakra-ui/react';
-import type { ScoreBarProps } from '../types';
+import React from "react";
+import { Box, HStack, Text, Badge, Progress, Icon } from "@chakra-ui/react";
+import type { ScoreBarProps } from "../types";
 
 /**
  * 根据分数百分比获取颜色方案
  */
 const getColorScheme = (percentage: number): string => {
-  if (percentage >= 80) return 'purple';
-  if (percentage >= 60) return 'blue';
-  if (percentage >= 40) return 'yellow';
-  return 'orange';
+  if (percentage >= 80) return "purple";
+  if (percentage >= 60) return "blue";
+  if (percentage >= 40) return "yellow";
+  return "orange";
 };
 
+// 黑金主题颜色
+const THEME_GOLD = "#F4D03F";
+
 const ScoreBar: React.FC<ScoreBarProps> = ({ label, score, icon }) => {
   const percentage = ((score || 0) / 100) * 100;
   const colorScheme = getColorScheme(percentage);
@@ -27,10 +30,8 @@ const ScoreBar: React.FC<ScoreBarProps> = ({ label, score, icon }) => {
     <Box>
       <HStack justify="space-between" mb={1}>
         <HStack>
-          {icon && (
-            <Icon as={icon} boxSize={4} color={`${colorScheme}.500`} />
-          )}
-          <Text fontSize="sm" fontWeight="medium">
+          {icon && <Icon as={icon} boxSize={4} color={`${colorScheme}.400`} />}
+          <Text fontSize="sm" fontWeight="medium" color={THEME_GOLD}>
             {label}
           </Text>
         </HStack>

src/views/Company/components/CompanyOverview/DeepAnalysisTab/components/BusinessSegmentsCard.tsx

@@ -29,8 +29,9 @@ const THEME = {
   innerCardBg: 'gray.700',
   gold: '#F4D03F',
   goldLight: '#F0D78C',
-  textPrimary: '#F4D03F',
-  textSecondary: 'gray.400',
+  textTitle: '#F4D03F',       // 标题用金色
+  textContent: 'white',       // 内容用白色，提高辨识度
+  textSecondary: 'gray.400',  // 小标题用灰色
   border: 'rgba(212, 175, 55, 0.3)',
 };
 
@@ -53,7 +54,7 @@ const BusinessSegmentsCard: React.FC<BusinessSegmentsCardProps> = ({
       <CardHeader>
         <HStack>
           <Icon as={Factory} color={THEME.gold} />
-          <Heading size="sm" color={THEME.textPrimary}>业务板块详情</Heading>
+          <Heading size="sm" color={THEME.textTitle}>业务板块详情</Heading>
           <Badge bg={THEME.gold} color="gray.900">{businessSegments.length} 个板块</Badge>
         </HStack>
       </CardHeader>
@@ -67,7 +68,7 @@ const BusinessSegmentsCard: React.FC<BusinessSegmentsCardProps> = ({
                 <CardBody px={2}>
                   <VStack align="stretch" spacing={3}>
                     <HStack justify="space-between">
-                      <Text fontWeight="bold" fontSize="md" color={THEME.textPrimary}>
+                      <Text fontWeight="bold" fontSize="md" color={THEME.textTitle}>
                         {segment.segment_name}
                       </Text>
                       <Button
@@ -85,12 +86,12 @@ const BusinessSegmentsCard: React.FC<BusinessSegmentsCardProps> = ({
                     </HStack>
 
                     <Box>
-                      <Text fontSize="xs" color={THEME.textSecondary} mb={1}>
+                      <Text fontSize="xs" color={THEME.gold} fontWeight="bold" mb={1}>
                         业务描述
                       </Text>
                       <Text
                         fontSize="sm"
-                        color={THEME.textPrimary}
+                        color={THEME.textContent}
                         noOfLines={isExpanded ? undefined : 3}
                       >
                         {segment.segment_description || '暂无描述'}
@@ -98,12 +99,12 @@ const BusinessSegmentsCard: React.FC<BusinessSegmentsCardProps> = ({
                     </Box>
 
                     <Box>
-                      <Text fontSize="xs" color={THEME.textSecondary} mb={1}>
+                      <Text fontSize="xs" color={THEME.gold} fontWeight="bold" mb={1}>
                         竞争地位
                       </Text>
                       <Text
                         fontSize="sm"
-                        color={THEME.textPrimary}
+                        color={THEME.textContent}
                         noOfLines={isExpanded ? undefined : 2}
                       >
                         {segment.competitive_position || '暂无数据'}
@@ -111,13 +112,13 @@ const BusinessSegmentsCard: React.FC<BusinessSegmentsCardProps> = ({
                     </Box>
 
                     <Box>
-                      <Text fontSize="xs" color={THEME.textSecondary} mb={1}>
+                      <Text fontSize="xs" color={THEME.gold} fontWeight="bold" mb={1}>
                         未来潜力
                       </Text>
                       <Text
                         fontSize="sm"
                         noOfLines={isExpanded ? undefined : 2}
-                        color={THEME.goldLight}
+                        color={THEME.textContent}
                       >
                         {segment.future_potential || '暂无数据'}
                       </Text>

src/views/Company/components/CompanyOverview/DeepAnalysisTab/components/CompetitiveAnalysisCard.tsx

@@ -5,7 +5,7 @@
  * 包含行业排名弹窗功能
  */
 
-import React, { memo, useMemo } from 'react';
+import React, { memo, useMemo } from "react";
 import {
   Card,
   CardBody,
@@ -28,10 +28,12 @@ import {
   ModalOverlay,
   ModalContent,
   ModalHeader,
+  UnorderedList,
+  ListItem,
   ModalBody,
   ModalCloseButton,
   useDisclosure,
-} from '@chakra-ui/react';
+} from "@chakra-ui/react";
 import {
   Trophy,
   Settings,
@@ -43,47 +45,51 @@ import {
   Rocket,
   Users,
   ExternalLink,
-} from 'lucide-react';
-import ReactECharts from 'echarts-for-react';
-import { ScoreBar } from '../atoms';
-import { getRadarChartOption } from '../utils/chartOptions';
-import { IndustryRankingView } from '../../../FinancialPanorama/components';
-import type { ComprehensiveData, CompetitivePosition, IndustryRankData } from '../types';
+} from "lucide-react";
+import ReactECharts from "echarts-for-react";
+import { ScoreBar } from "../atoms";
+import { getRadarChartOption } from "../utils/chartOptions";
+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',
+    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',
+    color: "yellow.500",
+    borderBottomColor: "rgba(212, 175, 55, 0.2)",
+    borderBottomWidth: "1px",
   },
   closeButton: {
-    color: 'yellow.500',
-    _hover: { bg: 'rgba(212, 175, 55, 0.1)' },
+    color: "yellow.500",
+    _hover: { bg: "rgba(212, 175, 55, 0.1)" },
   },
 } as const;
 
 // 样式常量 - 避免每次渲染创建新对象
 const CARD_STYLES = {
-  bg: 'transparent',
-  shadow: 'md',
+  bg: "transparent",
+  shadow: "md",
 } as const;
 
 const CONTENT_BOX_STYLES = {
   p: 4,
-  border: '1px solid',
-  borderColor: 'yellow.600',
-  borderRadius: 'md',
+  border: "1px solid",
+  borderColor: "yellow.600",
+  borderRadius: "md",
 } as const;
 
 const GRID_COLSPAN = { base: 2, lg: 1 } as const;
-const CHART_STYLE = { height: '320px' } as const;
+const CHART_STYLE = { height: "320px" } as const;
 
 interface CompetitiveAnalysisCardProps {
   comprehensiveData: ComprehensiveData;
@@ -118,11 +124,11 @@ const CompetitorTags = memo<CompetitorTagsProps>(({ competitors }) => (
   </Box>
 ));
 
-CompetitorTags.displayName = 'CompetitorTags';
+CompetitorTags.displayName = "CompetitorTags";
 
 // 评分区域组件
 interface ScoreSectionProps {
-  scores: CompetitivePosition['scores'];
+  scores: CompetitivePosition["scores"];
 }
 
 const ScoreSection = memo<ScoreSectionProps>(({ scores }) => (
@@ -138,7 +144,52 @@ const ScoreSection = memo<ScoreSectionProps>(({ scores }) => (
   </VStack>
 ));
 
-ScoreSection.displayName = 'ScoreSection';
+ScoreSection.displayName = "ScoreSection";
+
+// 将文本按换行符或分号拆分为列表项
+const parseToList = (text: string): string[] => {
+  if (!text) return [];
+  // 优先按换行符拆分，其次按分号拆分
+  const items = text.includes("\n")
+    ? text.split("\n")
+    : text.split(/[；;、,，]/);
+  // 清理数字序号（如 "1. "）并过滤空项
+  return items.map((s) => s.trim().replace(/^\d+\.\s*/, "")).filter(Boolean);
+};
+
+// 优劣势列表项组件
+interface AdvantageListProps {
+  title: string;
+  content?: string;
+  color: string;
+}
+
+const AdvantageList = memo<AdvantageListProps>(({ title, content, color }) => {
+  const items = useMemo(() => parseToList(content || ""), [content]);
+
+  return (
+    <Box {...CONTENT_BOX_STYLES}>
+      <Text fontWeight="bold" fontSize="sm" mb={2} color={color}>
+        {title}
+      </Text>
+      {items.length > 0 ? (
+        <UnorderedList spacing={1} pl={2} styleType="disc" color={color}>
+          {items.map((item, index) => (
+            <ListItem key={index} fontSize="sm" color="white">
+              {item}
+            </ListItem>
+          ))}
+        </UnorderedList>
+      ) : (
+        <Text fontSize="sm" color="white">
+          暂无数据
+        </Text>
+      )}
+    </Box>
+  );
+});
+
+AdvantageList.displayName = "AdvantageList";
 
 // 竞争优劣势组件
 interface AdvantagesSectionProps {
@@ -149,27 +200,13 @@ interface AdvantagesSectionProps {
 const AdvantagesSection = memo<AdvantagesSectionProps>(
   ({ advantages, disadvantages }) => (
     <SimpleGrid columns={{ base: 1, md: 2 }} spacing={4}>
-      <Box {...CONTENT_BOX_STYLES}>
-        <Text fontWeight="bold" fontSize="sm" mb={2} color="green.400">
-          竞争优势
-        </Text>
-        <Text fontSize="sm" color="white">
-          {advantages || '暂无数据'}
-        </Text>
-      </Box>
-      <Box {...CONTENT_BOX_STYLES}>
-        <Text fontWeight="bold" fontSize="sm" mb={2} color="red.400">
-          竞争劣势
-        </Text>
-        <Text fontSize="sm" color="white">
-          {disadvantages || '暂无数据'}
-        </Text>
-      </Box>
+      <AdvantageList title="竞争优势" content={advantages} color="green.400" />
+      <AdvantageList title="竞争劣势" content={disadvantages} color="red.400" />
     </SimpleGrid>
   )
 );
 
-AdvantagesSection.displayName = 'AdvantagesSection';
+AdvantagesSection.displayName = "AdvantagesSection";
 
 const CompetitiveAnalysisCard: React.FC<CompetitiveAnalysisCardProps> = memo(
   ({ comprehensiveData, industryRankData }) => {
@@ -179,16 +216,15 @@ const CompetitiveAnalysisCard: React.FC<CompetitiveAnalysisCardProps> = memo(
     if (!competitivePosition) return null;
 
     // 缓存雷达图配置
-    const radarOption = useMemo(
-      () => getRadarChartOption(comprehensiveData),
-      [comprehensiveData]
-    );
+    const radarOption = useMemo(() => getRadarChartOption(comprehensiveData), [
+      comprehensiveData,
+    ]);
 
     // 缓存竞争对手列表
     const competitors = useMemo(
       () =>
         competitivePosition.analysis?.main_competitors
-          ?.split(',')
+          ?.split(",")
           .map((c) => c.trim()) || [],
       [competitivePosition.analysis?.main_competitors]
     );
@@ -202,7 +238,9 @@ const CompetitiveAnalysisCard: React.FC<CompetitiveAnalysisCardProps> = memo(
           <CardHeader>
             <HStack>
               <Icon as={Trophy} color="yellow.500" />
-              <Heading size="sm" color="yellow.500">竞争地位分析</Heading>
+              <Heading size="sm" color="yellow.500">
+                竞争地位分析
+              </Heading>
               {competitivePosition.ranking && (
                 <Badge
                   ml={2}
@@ -210,9 +248,13 @@ const CompetitiveAnalysisCard: React.FC<CompetitiveAnalysisCardProps> = memo(
                   border="1px solid"
                   borderColor="yellow.600"
                   color="yellow.500"
-                  cursor={hasIndustryRankData ? 'pointer' : 'default'}
+                  cursor={hasIndustryRankData ? "pointer" : "default"}
                   onClick={hasIndustryRankData ? onOpen : undefined}
-                  _hover={hasIndustryRankData ? { bg: 'rgba(212, 175, 55, 0.1)' } : undefined}
+                  _hover={
+                    hasIndustryRankData
+                      ? { bg: "rgba(212, 175, 55, 0.1)" }
+                      : undefined
+                  }
                 >
                   行业排名 {competitivePosition.ranking.industry_rank}/
                   {competitivePosition.ranking.total_companies}
@@ -225,7 +267,7 @@ const CompetitiveAnalysisCard: React.FC<CompetitiveAnalysisCardProps> = memo(
                   color="yellow.500"
                   rightIcon={<Icon as={ExternalLink} boxSize={3} />}
                   onClick={onOpen}
-                  _hover={{ bg: 'rgba(212, 175, 55, 0.1)' }}
+                  _hover={{ bg: "rgba(212, 175, 55, 0.1)" }}
                 >
                   查看详情
                 </Button>
@@ -234,7 +276,9 @@ const CompetitiveAnalysisCard: React.FC<CompetitiveAnalysisCardProps> = memo(
           </CardHeader>
           <CardBody>
             {/* 主要竞争对手 */}
-            {competitors.length > 0 && <CompetitorTags competitors={competitors} />}
+            {competitors.length > 0 && (
+              <CompetitorTags competitors={competitors} />
+            )}
 
             {/* 评分和雷达图 */}
             <Grid templateColumns="repeat(2, 1fr)" gap={6}>
@@ -258,13 +302,20 @@ const CompetitiveAnalysisCard: React.FC<CompetitiveAnalysisCardProps> = memo(
             {/* 竞争优势和劣势 */}
             <AdvantagesSection
               advantages={competitivePosition.analysis?.competitive_advantages}
-              disadvantages={competitivePosition.analysis?.competitive_disadvantages}
+              disadvantages={
+                competitivePosition.analysis?.competitive_disadvantages
+              }
             />
           </CardBody>
         </Card>
 
         {/* 行业排名弹窗 - 黑金主题 */}
-        <Modal isOpen={isOpen} onClose={onClose} size="4xl" scrollBehavior="inside">
+        <Modal
+          isOpen={isOpen}
+          onClose={onClose}
+          size="4xl"
+          scrollBehavior="inside"
+        >
           <ModalOverlay bg="blackAlpha.700" />
           <ModalContent {...MODAL_STYLES.content}>
             <ModalHeader {...MODAL_STYLES.header}>
@@ -290,6 +341,6 @@ const CompetitiveAnalysisCard: React.FC<CompetitiveAnalysisCardProps> = memo(
   }
 );
 
-CompetitiveAnalysisCard.displayName = 'CompetitiveAnalysisCard';
+CompetitiveAnalysisCard.displayName = "CompetitiveAnalysisCard";
 
 export default CompetitiveAnalysisCard;

src/views/Company/components/CompanyOverview/DeepAnalysisTab/components/StrategyAnalysisCard.tsx

@@ -4,7 +4,7 @@
  * 显示公司战略方向和战略举措
  */
 
-import React, { memo, useMemo } from 'react';
+import React, { memo, useMemo } from "react";
 import {
   Card,
   CardBody,
@@ -18,27 +18,29 @@ import {
   Grid,
   GridItem,
   Center,
-} from '@chakra-ui/react';
-import { Rocket, BarChart2 } from 'lucide-react';
-import type { Strategy } from '../types';
+  UnorderedList,
+  ListItem,
+} from "@chakra-ui/react";
+import { Rocket, BarChart2 } from "lucide-react";
+import type { Strategy } from "../types";
 
 // 样式常量 - 避免每次渲染创建新对象
 const CARD_STYLES = {
-  bg: 'transparent',
-  shadow: 'md',
+  bg: "transparent",
+  shadow: "md",
 } as const;
 
 const CONTENT_BOX_STYLES = {
   p: 4,
-  border: '1px solid',
-  borderColor: 'yellow.600',
-  borderRadius: 'md',
+  border: "1px solid",
+  borderColor: "yellow.600",
+  borderRadius: "md",
 } as const;
 
 const EMPTY_BOX_STYLES = {
-  border: '1px dashed',
-  borderColor: 'yellow.600',
-  borderRadius: 'md',
+  border: "1px dashed",
+  borderColor: "yellow.600",
+  borderRadius: "md",
   py: 12,
 } as const;
 
@@ -64,7 +66,17 @@ const EmptyState = memo(() => (
   </Box>
 ));
 
-EmptyState.displayName = 'StrategyEmptyState';
+EmptyState.displayName = "StrategyEmptyState";
+
+// 将文本按分号拆分为列表项
+const parseToList = (text: string): string[] => {
+  if (!text) return [];
+  // 按中英文分号拆分，过滤空项
+  return text
+    .split(/[；;]/)
+    .map((s) => s.trim())
+    .filter(Boolean);
+};
 
 // 内容项组件 - 复用结构
 interface ContentItemProps {
@@ -72,24 +84,40 @@ interface ContentItemProps {
   content: string;
 }
 
-const ContentItem = memo<ContentItemProps>(({ title, content }) => (
-  <VStack align="stretch" spacing={2}>
-    <Text fontWeight="bold" fontSize="sm" color="yellow.500">
-      {title}
-    </Text>
-    <Text fontSize="sm" color="white">
-      {content}
-    </Text>
-  </VStack>
-));
+const ContentItem = memo<ContentItemProps>(({ title, content }) => {
+  // 缓存解析结果，避免每次渲染重新计算
+  const items = useMemo(() => parseToList(content), [content]);
 
-ContentItem.displayName = 'StrategyContentItem';
+  return (
+    <VStack align="stretch" spacing={2}>
+      <Text fontWeight="bold" fontSize="sm" color="yellow.500">
+        {title}
+      </Text>
+      {items.length > 1 ? (
+        <UnorderedList spacing={1} pl={2} styleType="disc" color="yellow.500">
+          {items.map((item, index) => (
+            <ListItem key={index} fontSize="sm" color="white">
+              {item}
+            </ListItem>
+          ))}
+        </UnorderedList>
+      ) : (
+        <Text fontSize="sm" color="white">
+          {content || "暂无数据"}
+        </Text>
+      )}
+    </VStack>
+  );
+});
+
+ContentItem.displayName = "StrategyContentItem";
 
 const StrategyAnalysisCard: React.FC<StrategyAnalysisCardProps> = memo(
   ({ strategy }) => {
     // 缓存数据检测结果
     const hasData = useMemo(
-      () => !!(strategy?.strategy_description || strategy?.strategic_initiatives),
+      () =>
+        !!(strategy?.strategy_description || strategy?.strategic_initiatives),
       [strategy?.strategy_description, strategy?.strategic_initiatives]
     );
 
@@ -98,7 +126,9 @@ const StrategyAnalysisCard: React.FC<StrategyAnalysisCardProps> = memo(
         <CardHeader>
           <HStack>
             <Icon as={Rocket} color="yellow.500" />
-            <Heading size="sm" color="yellow.500">战略分析</Heading>
+            <Heading size="sm" color="yellow.500">
+              战略分析
+            </Heading>
           </HStack>
         </CardHeader>
         <CardBody>
@@ -110,13 +140,13 @@ const StrategyAnalysisCard: React.FC<StrategyAnalysisCardProps> = memo(
                 <GridItem colSpan={GRID_RESPONSIVE_COLSPAN}>
                   <ContentItem
                     title="战略方向"
-                    content={strategy.strategy_description || '暂无数据'}
+                    content={strategy.strategy_description || "暂无数据"}
                   />
                 </GridItem>
                 <GridItem colSpan={GRID_RESPONSIVE_COLSPAN}>
                   <ContentItem
                     title="战略举措"
-                    content={strategy.strategic_initiatives || '暂无数据'}
+                    content={strategy.strategic_initiatives || "暂无数据"}
                   />
                 </GridItem>
               </Grid>
@@ -128,6 +158,6 @@ const StrategyAnalysisCard: React.FC<StrategyAnalysisCardProps> = memo(
   }
 );
 
-StrategyAnalysisCard.displayName = 'StrategyAnalysisCard';
+StrategyAnalysisCard.displayName = "StrategyAnalysisCard";
 
 export default StrategyAnalysisCard;

src/views/Company/components/CompanyOverview/DeepAnalysisTab/components/ValueChainCard.tsx

@@ -131,16 +131,16 @@ const ValueChainCard: React.FC<ValueChainCardProps> = memo(({
   return (
     <Card bg={THEME.cardBg} shadow="md">
       {/* 头部区域 */}
-      <CardHeader py={0}>
-        <HStack flexWrap="wrap" gap={0}>
-          <Icon as={Network} color={THEME.gold} />
+      <CardHeader py={3}>
+        <HStack flexWrap="wrap" spacing={3}>
+          <Icon as={Network} color={THEME.gold} boxSize={5} />
           <Heading size="sm" color={THEME.textPrimary}>
             产业链分析
           </Heading>
           <Text color={THEME.textSecondary} fontSize="sm">
-            | {companyName}供应链图谱
+            {companyName}供应链图谱
           </Text>
-          <Badge bg={THEME.gold} color="gray.900">
+          <Badge bg={THEME.gold} color="gray.900" px={2} py={1}>
             节点 {totalNodes}
           </Badge>
         </HStack>

src/views/Company/components/CompanyOverview/DeepAnalysisTab/organisms/ValueChainNodeCard/RelatedCompaniesModal.tsx

@@ -246,7 +246,7 @@ const RelatedCompaniesModal: React.FC<RelatedCompaniesModalProps> = ({
                                 variant="ghost"
                                 colorScheme="blue"
                                 onClick={() => {
-                                  window.location.href = `/company?stock_code=${company.stock_code}`;
+                                  window.open(`/company?scode=${company.stock_code}`, '_blank');
                                 }}
                                 aria-label="查看公司详情"
                               />

src/views/Company/components/CompanyOverview/DeepAnalysisTab/types.ts

@@ -8,7 +8,10 @@
 
 export interface FormatUtils {
   formatCurrency: (value: number | null | undefined) => string;
-  formatBusinessRevenue: (value: number | null | undefined, unit?: string) => string;
+  formatBusinessRevenue: (
+    value: number | null | undefined,
+    unit?: string
+  ) => string;
   formatPercentage: (value: number | null | undefined) => string;
 }
 
@@ -186,7 +189,7 @@ export interface ValueChainData {
 // ==================== 相关公司类型 ====================
 
 export interface RelatedCompanyRelationship {
-  role: 'source' | 'target';
+  role: "source" | "target";
   connected_node: string;
 }
 
@@ -205,7 +208,7 @@ export interface RelatedCompany {
 
 // ==================== 关键因素类型 ====================
 
-export type ImpactDirection = 'positive' | 'negative' | 'neutral' | 'mixed';
+export type ImpactDirection = "positive" | "negative" | "neutral" | "mixed";
 
 export interface KeyFactor {
   factor_name: string;
@@ -297,7 +300,11 @@ export interface IndustryRankData {
 // ==================== 主组件 Props 类型 ====================
 
 /** Tab 类型 */
-export type DeepAnalysisTabKey = 'strategy' | 'business' | 'valueChain' | 'development';
+export type DeepAnalysisTabKey =
+  | "strategy"
+  | "business"
+  | "valueChain"
+  | "development";
 
 export interface DeepAnalysisTabProps {
   comprehensiveData?: ComprehensiveData;
@@ -353,12 +360,23 @@ export interface RadarIndicator {
 }
 
 export interface RadarChartOption {
-  tooltip: { trigger: string };
+  tooltip: {
+    trigger: string;
+    backgroundColor?: string;
+    borderColor?: string;
+    textStyle?: { color: string };
+  };
   radar: {
     indicator: RadarIndicator[];
     shape: string;
     splitNumber: number;
-    name: { textStyle: { color: string; fontSize: number } };
+    name: {
+      textStyle: {
+        color: string;
+        fontSize: number;
+        fontWeight?: string;
+      };
+    };
     splitLine: { lineStyle: { color: string[] } };
     splitArea: { show: boolean; areaStyle: { color: string[] } };
     axisLine: { lineStyle: { color: string } };
@@ -373,7 +391,12 @@ export interface RadarChartOption {
       symbolSize: number;
       lineStyle: { width: number; color: string };
       areaStyle: { color: string };
-      label: { show: boolean; formatter: (params: { value: number }) => number; color: string; fontSize: number };
+      label: {
+        show: boolean;
+        formatter: (params: { value: number }) => number;
+        color: string;
+        fontSize: number;
+      };
     }>;
   }>;
 }

src/views/Company/components/CompanyOverview/DeepAnalysisTab/utils/chartOptions.ts

@@ -9,7 +9,7 @@ import type {
   ValueChainData,
   RadarChartOption,
   SankeyChartOption,
-} from '../types';
+} from "../types";
 
 /**
  * 生成竞争力雷达图配置
@@ -23,14 +23,14 @@ export const getRadarChartOption = (
 
   const scores = comprehensiveData.competitive_position.scores;
   const indicators = [
-    { name: '市场地位', max: 100 },
-    { name: '技术实力', max: 100 },
-    { name: '品牌价值', max: 100 },
-    { name: '运营效率', max: 100 },
-    { name: '财务健康', max: 100 },
-    { name: '创新能力', max: 100 },
-    { name: '风险控制', max: 100 },
-    { name: '成长潜力', max: 100 },
+    { name: "市场地位", max: 100 },
+    { name: "技术实力", max: 100 },
+    { name: "品牌价值", max: 100 },
+    { name: "运营效率", max: 100 },
+    { name: "财务健康", max: 100 },
+    { name: "创新能力", max: 100 },
+    { name: "风险控制", max: 100 },
+    { name: "成长潜力", max: 100 },
   ];
 
   const data = [
@@ -44,40 +44,71 @@ export const getRadarChartOption = (
     scores.growth || 0,
   ];
 
+  // 黑金主题配色
+  const THEME = {
+    gold: "#F4D03F",
+    goldLight: "rgba(212, 175, 55, 0.6)",
+    goldDim: "rgba(212, 175, 55, 0.3)",
+    blue: "#3182ce",
+    blueArea: "rgba(49, 130, 206, 0.3)",
+  };
+
   return {
-    tooltip: { trigger: 'item' },
+    tooltip: {
+      trigger: "item",
+      backgroundColor: "rgba(30, 30, 35, 0.95)",
+      borderColor: THEME.goldDim,
+      textStyle: { color: "#fff" },
+    },
     radar: {
       indicator: indicators,
-      shape: 'polygon',
+      shape: "polygon",
       splitNumber: 4,
-      name: { textStyle: { color: '#666', fontSize: 12 } },
-      splitLine: {
-        lineStyle: { color: ['#e8e8e8', '#e0e0e0', '#d0d0d0', '#c0c0c0'] },
+      // 指标名称 - 使用金色确保在深色背景上清晰可见
+      name: {
+        textStyle: {
+          color: THEME.gold,
+          fontSize: 12,
+          fontWeight: "bold",
+        },
       },
+      // 分割线 - 金色系
+      splitLine: {
+        lineStyle: {
+          color: [
+            THEME.goldDim,
+            "rgba(212, 175, 55, 0.2)",
+            "rgba(212, 175, 55, 0.15)",
+            "rgba(212, 175, 55, 0.1)",
+          ],
+        },
+      },
+      // 分割区域 - 深色透明
       splitArea: {
         show: true,
         areaStyle: {
-          color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
+          color: ["rgba(30, 30, 35, 0.6)", "rgba(40, 40, 45, 0.4)"],
         },
       },
-      axisLine: { lineStyle: { color: '#ddd' } },
+      // 轴线 - 金色
+      axisLine: { lineStyle: { color: THEME.goldDim } },
     },
     series: [
       {
-        name: '竞争力评分',
-        type: 'radar',
+        name: "竞争力评分",
+        type: "radar",
         data: [
           {
             value: data,
-            name: '当前评分',
-            symbol: 'circle',
+            name: "当前评分",
+            symbol: "circle",
             symbolSize: 5,
-            lineStyle: { width: 2, color: '#3182ce' },
-            areaStyle: { color: 'rgba(49, 130, 206, 0.3)' },
+            lineStyle: { width: 2, color: THEME.blue },
+            areaStyle: { color: THEME.blueArea },
             label: {
               show: true,
               formatter: (params: { value: number }) => params.value,
-              color: '#3182ce',
+              color: THEME.gold,
               fontSize: 10,
             },
           },
@@ -117,22 +148,22 @@ export const getSankeyChartOption = (
     links.push({
       source: flow.source.node_name,
       target: flow.target.node_name,
-      value: parseFloat(flow.flow_metrics?.flow_ratio || '1') || 1,
-      lineStyle: { color: 'source', opacity: 0.6 },
+      value: parseFloat(flow.flow_metrics?.flow_ratio || "1") || 1,
+      lineStyle: { color: "source", opacity: 0.6 },
     });
   });
 
   return {
-    tooltip: { trigger: 'item', triggerOn: 'mousemove' },
+    tooltip: { trigger: "item", triggerOn: "mousemove" },
     series: [
       {
-        type: 'sankey',
-        layout: 'none',
-        emphasis: { focus: 'adjacency' },
+        type: "sankey",
+        layout: "none",
+        emphasis: { focus: "adjacency" },
         data: Array.from(nodes).map((name) => ({ name })),
         links: links,
-        lineStyle: { color: 'gradient', curveness: 0.5 },
-        label: { color: '#333', fontSize: 10 },
+        lineStyle: { color: "gradient", curveness: 0.5 },
+        label: { color: "#333", fontSize: 10 },
       },
     ],
   };

src/views/Company/components/CompanyOverview/components/shareholder/ShareholdersTable.tsx

@@ -4,6 +4,7 @@
 import React, { useMemo, memo } from "react";
 import { Box, HStack, Heading, Badge, Icon, useBreakpointValue } from "@chakra-ui/react";
 import { Table, Tag, Tooltip, ConfigProvider } from "antd";
+import zhCN from "antd/locale/zh_CN";
 import type { ColumnsType } from "antd/es/table";
 import { Users, LineChart } from "lucide-react";
 import type { Shareholder } from "../../types";
@@ -22,7 +23,7 @@ const TABLE_THEME = {
     Table: {
       headerBg: "#1A202C",            // gray.900
       headerColor: "#F4D03F",         // 亮金色（提高对比度）
-      rowHoverBg: "rgba(212, 175, 55, 0.15)",  // 金色半透明，文字更清晰
+      rowHoverBg: "rgba(156, 163, 175, 0.15)",  // 浅灰色悬停背景
       borderColor: "rgba(212, 175, 55, 0.2)",
     },
   },
@@ -133,10 +134,13 @@ const ShareholdersTable: React.FC<ShareholdersTableProps> = ({
         title: "股东名称",
         dataIndex: "shareholder_name",
         key: "name",
-        ellipsis: true,
+        width: 200,
+        ellipsis: {
+          showTitle: false,
+        },
         render: (name: string) => (
-          <Tooltip title={name}>
-            <span style={{ fontWeight: 500, color: "#F4D03F" }}>{name}</span>
+          <Tooltip title={name} placement="topLeft">
+            <span style={{ fontWeight: 500, color: "#F4D03F", display: 'block', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: 180 }}>{name}</span>
           </Tooltip>
         ),
       },
@@ -144,10 +148,9 @@ const ShareholdersTable: React.FC<ShareholdersTableProps> = ({
         title: "股东类型",
         dataIndex: "shareholder_type",
         key: "type",
-        width: 90,
         responsive: ["md"],
         render: (shareholderType: string) => (
-          <Tag color={getShareholderTypeColor(shareholderType)}>{shareholderType || "-"}</Tag>
+          <Tag color={getShareholderTypeColor(shareholderType)} style={{ whiteSpace: 'nowrap' }}>{shareholderType || "-"}</Tag>
         ),
       },
       {
@@ -158,6 +161,7 @@ const ShareholdersTable: React.FC<ShareholdersTableProps> = ({
         align: "right",
         responsive: ["md"],
         sorter: (a: Shareholder, b: Shareholder) => (a.holding_shares || 0) - (b.holding_shares || 0),
+        sortDirections: ["descend", "ascend"],
         render: (shares: number) => (
           <span style={{ color: "#F4D03F" }}>{formatShares(shares)}</span>
         ),
@@ -173,6 +177,7 @@ const ShareholdersTable: React.FC<ShareholdersTableProps> = ({
           const bVal = (b[config.ratioField] as number) || 0;
           return aVal - bVal;
         },
+        sortDirections: ["descend", "ascend"],
         defaultSortOrder: "descend",
         render: (ratio: number) => (
           <span style={{ color: type === "circulation" ? "#805AD5" : "#3182CE", fontWeight: "bold" }}>
@@ -188,10 +193,9 @@ const ShareholdersTable: React.FC<ShareholdersTableProps> = ({
         title: "股份性质",
         dataIndex: "share_nature",
         key: "nature",
-        width: 80,
         responsive: ["lg"],
         render: (nature: string) => (
-          <Tag color="default">{nature || "流通股"}</Tag>
+          <Tag color="default" style={{ whiteSpace: 'nowrap' }}>{nature || "流通股"}</Tag>
         ),
       });
     }
@@ -211,14 +215,15 @@ const ShareholdersTable: React.FC<ShareholdersTableProps> = ({
         <Heading size="sm" color={THEME.gold}>{config.title}</Heading>
         {reportDate && <Badge colorScheme="yellow" variant="subtle">{formatDate(reportDate)}</Badge>}
       </HStack>
-      <ConfigProvider theme={TABLE_THEME}>
+      <ConfigProvider theme={TABLE_THEME} locale={zhCN}>
         <Table
           columns={columns}
           dataSource={shareholders.slice(0, 10)}
           rowKey={(record: Shareholder) => `${record.shareholder_name}-${record.shareholder_rank ?? ''}-${record.end_date ?? ''}`}
           pagination={false}
           size={isMobile ? "small" : "middle"}
-          scroll={{ x: isMobile ? 400 : undefined }}
+          scroll={{ x: 'max-content' }}
+          showSorterTooltip={{ title: '点击切换排序' }}
         />
       </ConfigProvider>
     </Box>

src/views/Company/components/DeepAnalysis/hooks/useDeepAnalysisData.ts

@@ -7,23 +7,23 @@
  * - 竞态条件处理
  */
 
-import { useState, useCallback, useRef, useEffect } from 'react';
-import axios from '@utils/axiosConfig';
-import { logger } from '@utils/logger';
+import { useState, useCallback, useRef, useEffect } from "react";
+import axios from "@utils/axiosConfig";
+import { logger } from "@utils/logger";
 import type {
   ApiKey,
   ApiLoadingState,
   DataState,
   UseDeepAnalysisDataReturn,
-} from '../types';
-import { TAB_API_MAP } from '../types';
+} from "../types";
+import { TAB_API_MAP } from "../types";
 
 /** API 端点映射 */
 const API_ENDPOINTS: Record<ApiKey, string> = {
-  comprehensive: '/api/company/comprehensive-analysis',
-  valueChain: '/api/company/value-chain-analysis',
-  keyFactors: '/api/company/key-factors-timeline',
-  industryRank: '/api/financial/industry-rank',
+  comprehensive: "/api/company/comprehensive-analysis",
+  valueChain: "/api/company/value-chain-analysis",
+  keyFactors: "/api/company/key-factors-timeline",
+  industryRank: "/api/financial/industry-rank",
 };
 
 /** 初始数据状态 */
@@ -48,7 +48,9 @@ const initialLoadingState: ApiLoadingState = {
  * @param stockCode 股票代码
  * @returns 数据、loading 状态、加载函数
  */
-export const useDeepAnalysisData = (stockCode: string): UseDeepAnalysisDataReturn => {
+export const useDeepAnalysisData = (
+  stockCode: string
+): UseDeepAnalysisDataReturn => {
   // 数据状态
   const [data, setData] = useState<DataState>(initialDataState);
 
@@ -91,7 +93,9 @@ export const useDeepAnalysisData = (stockCode: string): UseDeepAnalysisDataRetur
           loadedApisRef.current[apiKey] = true;
         }
       } catch (err) {
-        logger.error('DeepAnalysis', `loadApiData:${apiKey}`, err, { stockCode });
+        logger.error("DeepAnalysis", `loadApiData:${apiKey}`, err, {
+          stockCode,
+        });
       } finally {
         // 清除 loading（再次检查 stockCode）
         if (currentStockCodeRef.current === stockCode) {
@@ -103,13 +107,13 @@ export const useDeepAnalysisData = (stockCode: string): UseDeepAnalysisDataRetur
   );
 
   /**
-   * 根据 Tab 加载对应数据
+   * 根据 Tab 加载对应数据（支持一个 Tab 对应多个 API）
    */
   const loadTabData = useCallback(
     (tabKey: string) => {
-      const apiKey = TAB_API_MAP[tabKey];
-      if (apiKey) {
-        loadApiData(apiKey);
+      const apiKeys = TAB_API_MAP[tabKey];
+      if (apiKeys && apiKeys.length > 0) {
+        apiKeys.forEach((apiKey) => loadApiData(apiKey));
       }
     },
     [loadApiData]
@@ -134,8 +138,11 @@ export const useDeepAnalysisData = (stockCode: string): UseDeepAnalysisDataRetur
     if (stockCode) {
       currentStockCodeRef.current = stockCode;
       resetData();
-      // 只加载默认 Tab（comprehensive）
-      loadApiData('comprehensive');
+      // 加载默认 Tab (strategy) 所需的所有数据
+      const defaultTabApis = TAB_API_MAP["strategy"];
+      if (defaultTabApis) {
+        defaultTabApis.forEach((apiKey) => loadApiData(apiKey));
+      }
     }
   }, [stockCode, loadApiData, resetData]);
 

src/views/Company/components/DeepAnalysis/index.tsx

@@ -7,12 +7,12 @@
  * - 业务板块展开状态管理
  */
 
-import React, { useState, useCallback, useEffect, memo } from 'react';
-import DeepAnalysisTab from '../CompanyOverview/DeepAnalysisTab';
-import type { DeepAnalysisTabKey } from '../CompanyOverview/DeepAnalysisTab/types';
-import { useDeepAnalysisData } from './hooks';
-import { TAB_API_MAP } from './types';
-import type { DeepAnalysisProps } from './types';
+import React, { useState, useCallback, useEffect, memo } from "react";
+import DeepAnalysisTab from "../CompanyOverview/DeepAnalysisTab";
+import type { DeepAnalysisTabKey } from "../CompanyOverview/DeepAnalysisTab/types";
+import { useDeepAnalysisData } from "./hooks";
+import { TAB_API_MAP } from "./types";
+import type { DeepAnalysisProps } from "./types";
 
 /**
  * 深度分析组件
@@ -21,10 +21,12 @@ import type { DeepAnalysisProps } from './types';
  */
 const DeepAnalysis: React.FC<DeepAnalysisProps> = memo(({ stockCode }) => {
   // 当前 Tab
-  const [activeTab, setActiveTab] = useState<DeepAnalysisTabKey>('strategy');
+  const [activeTab, setActiveTab] = useState<DeepAnalysisTabKey>("strategy");
 
   // 业务板块展开状态
-  const [expandedSegments, setExpandedSegments] = useState<Record<number, boolean>>({});
+  const [expandedSegments, setExpandedSegments] = useState<
+    Record<number, boolean>
+  >({});
 
   // 数据获取 Hook
   const { data, loading, loadTabData } = useDeepAnalysisData(stockCode);
@@ -32,7 +34,7 @@ const DeepAnalysis: React.FC<DeepAnalysisProps> = memo(({ stockCode }) => {
   // stockCode 变更时重置 UI 状态
   useEffect(() => {
     if (stockCode) {
-      setActiveTab('strategy');
+      setActiveTab("strategy");
       setExpandedSegments({});
     }
   }, [stockCode]);
@@ -54,10 +56,11 @@ const DeepAnalysis: React.FC<DeepAnalysisProps> = memo(({ stockCode }) => {
     [loadTabData]
   );
 
-  // 获取当前 Tab 的 loading 状态
+  // 获取当前 Tab 的 loading 状态（任一相关 API loading 则显示 loading）
   const currentLoading = (() => {
-    const apiKey = TAB_API_MAP[activeTab];
-    return apiKey ? loading[apiKey] : false;
+    const apiKeys = TAB_API_MAP[activeTab];
+    if (!apiKeys || apiKeys.length === 0) return false;
+    return apiKeys.some((apiKey) => loading[apiKey]);
   })();
 
   return (
@@ -76,6 +79,6 @@ const DeepAnalysis: React.FC<DeepAnalysisProps> = memo(({ stockCode }) => {
   );
 });
 
-DeepAnalysis.displayName = 'DeepAnalysis';
+DeepAnalysis.displayName = "DeepAnalysis";
 
 export default DeepAnalysis;

src/views/Company/components/DeepAnalysis/types.ts

@@ -9,17 +9,21 @@ export type {
   KeyFactorsData,
   IndustryRankData,
   DeepAnalysisTabKey,
-} from '../CompanyOverview/DeepAnalysisTab/types';
+} from "../CompanyOverview/DeepAnalysisTab/types";
 
 /** API 接口类型 */
-export type ApiKey = 'comprehensive' | 'valueChain' | 'keyFactors' | 'industryRank';
+export type ApiKey =
+  | "comprehensive"
+  | "valueChain"
+  | "keyFactors"
+  | "industryRank";
 
-/** Tab 与 API 映射 */
-export const TAB_API_MAP: Record<string, ApiKey> = {
-  strategy: 'comprehensive',
-  business: 'comprehensive',
-  valueChain: 'valueChain',
-  development: 'keyFactors',
+/** Tab 与 API 映射（支持一个 Tab 对应多个 API） */
+export const TAB_API_MAP: Record<string, ApiKey[]> = {
+  strategy: ["comprehensive", "industryRank"], // 战略分析需要综合分析 + 行业排名
+  business: ["comprehensive"],
+  valueChain: ["valueChain"],
+  development: ["keyFactors"],
 } as const;
 
 /** API 加载状态 */
@@ -69,4 +73,4 @@ import type {
   ValueChainData,
   KeyFactorsData,
   IndustryRankData,
-} from '../CompanyOverview/DeepAnalysisTab/types';
+} from "../CompanyOverview/DeepAnalysisTab/types";

src/views/Company/components/DynamicTracking/NewsEventsTab/index.tsx

@@ -2,7 +2,6 @@
 // 新闻动态 Tab 组件 - 黑金主题
 
 import React, { memo, useCallback } from 'react';
-import { useNavigate } from 'react-router-dom';
 import { VStack, Card, CardBody } from '@chakra-ui/react';
 import { getEventDetailUrl } from '@/utils/idEncoder';
 import { THEME_PRESETS } from './constants';
@@ -52,20 +51,18 @@ const NewsEventsTab: React.FC<NewsEventsTabProps> = ({
   cardBg,
   themePreset = 'default',
 }) => {
-  const navigate = useNavigate();
-
   // 获取主题配色
   const theme = THEME_PRESETS[themePreset] || THEME_PRESETS.default;
   const isBlackGold = themePreset === 'blackGold';
 
-  // 点击事件卡片，跳转到详情页
+  // 点击事件卡片，在新标签页打开详情页
   const handleEventClick = useCallback(
     (eventId: string | number | undefined) => {
       if (eventId) {
-        navigate(getEventDetailUrl(eventId));
+        window.open(getEventDetailUrl(eventId), '_blank');
       }
     },
-    [navigate]
+    []
   );
 
   // 处理搜索输入

src/views/Company/components/FinancialPanorama/components/FinancialOverviewPanel.tsx

@@ -1,23 +1,40 @@
 /**
- * 财务全景面板组件 - 三列布局
+ * 财务全景面板组件 - 四列布局
  * 复用 MarketDataView 的 MetricCard 组件
  */
 
-import React, { memo } from 'react';
-import { SimpleGrid, HStack, VStack, Text, Badge } from '@chakra-ui/react';
-import { TrendingUp, Coins, Shield, TrendingDown, Activity, PieChart } from 'lucide-react';
+import React, { memo, useMemo } from 'react';
+import {
+  SimpleGrid,
+  HStack,
+  VStack,
+  Text,
+  Badge,
+  Box,
+  Button,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalCloseButton,
+  ModalBody,
+  useDisclosure,
+} from '@chakra-ui/react';
+import { TrendingUp, Coins, Shield, TrendingDown, Activity, History, PieChart } from 'lucide-react';
 import { formatUtils } from '@services/financialService';
 
 // 复用 MarketDataView 的组件
 import MetricCard from '../../MarketDataView/components/StockSummaryCard/MetricCard';
 import { StatusTag } from '../../MarketDataView/components/StockSummaryCard/atoms';
 import { darkGoldTheme } from '../../MarketDataView/constants';
+import { HistoricalComparisonTable } from './MainBusinessAnalysis';
 
-import type { StockInfo, FinancialMetricsData } from '../types';
+import type { StockInfo, FinancialMetricsData, MainBusinessData, BusinessItem, ProductClassification, IndustryClassification } from '../types';
 
 export interface FinancialOverviewPanelProps {
   stockInfo: StockInfo | null;
   financialMetrics: FinancialMetricsData[];
+  mainBusiness?: MainBusinessData | null;
 }
 
 /**
@@ -60,7 +77,42 @@ const getDebtStatus = (value: number | undefined): { text: string; color: string
 export const FinancialOverviewPanel: React.FC<FinancialOverviewPanelProps> = memo(({
   stockInfo,
   financialMetrics,
+  mainBusiness,
 }) => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  // 主营业务数据处理
+  const mainBusinessData = useMemo(() => {
+    if (!mainBusiness) return null;
+
+    const hasProductData = mainBusiness.product_classification && mainBusiness.product_classification.length > 0;
+    const hasIndustryData = mainBusiness.industry_classification && mainBusiness.industry_classification.length > 0;
+
+    if (!hasProductData && !hasIndustryData) return null;
+
+    // 获取最新期间数据
+    const latestPeriod = hasProductData
+      ? mainBusiness.product_classification![0] as ProductClassification
+      : mainBusiness.industry_classification![0] as IndustryClassification;
+
+    // 获取业务项目
+    const businessItems: BusinessItem[] = hasProductData
+      ? (latestPeriod as ProductClassification).products
+      : (latestPeriod as IndustryClassification).industries;
+
+    // 历史对比数据
+    const historicalData = hasProductData
+      ? mainBusiness.product_classification! as ProductClassification[]
+      : mainBusiness.industry_classification! as IndustryClassification[];
+
+    return {
+      hasProductData,
+      latestPeriod,
+      businessItems,
+      historicalData,
+    };
+  }, [mainBusiness]);
+
   if (!stockInfo && (!financialMetrics || financialMetrics.length === 0)) {
     return null;
   }
@@ -96,7 +148,8 @@ export const FinancialOverviewPanel: React.FC<FinancialOverviewPanelProps> = mem
   };
 
   return (
-    <SimpleGrid columns={{ base: 1, md: 3 }} spacing={3}>
+    <>
+    <SimpleGrid columns={{ base: 1, md: 2, lg: 4 }} spacing={3}>
       {/* 卡片1: 成长能力 */}
       <MetricCard
         title="成长能力"
@@ -179,7 +232,118 @@ export const FinancialOverviewPanel: React.FC<FinancialOverviewPanelProps> = mem
           </VStack>
         }
       />
+
+      {/* 卡片4: 主营业务 - 使用 MetricCard 组件 */}
+      <MetricCard
+        title="主营业务"
+        subtitle="核心构成"
+        leftIcon={<PieChart size={14} />}
+        rightIcon={
+          <Button
+            size="xs"
+            bg="rgba(59, 130, 246, 0.9)"
+            color="white"
+            _hover={{ bg: 'rgba(59, 130, 246, 1)' }}
+            leftIcon={<History size={10} />}
+            onClick={onOpen}
+            isDisabled={!mainBusinessData}
+            fontSize="2xs"
+            h="18px"
+            px={1.5}
+            borderRadius="full"
+          >
+            历史数据
+          </Button>
+        }
+        mainLabel="营收总额"
+        mainValue={mainBusinessData ? `¥${((() => {
+          const items = mainBusinessData.businessItems.filter((item: BusinessItem) => item.content !== '合计');
+          const totalItem = mainBusinessData.businessItems.find((item: BusinessItem) => item.content === '合计');
+          return totalItem?.revenue || items.reduce((sum: number, item: BusinessItem) => sum + (item.revenue || 0), 0);
+        })() / 100000000).toFixed(1)}` : '-'}
+        mainColor={darkGoldTheme.gold}
+        mainSuffix="亿"
+        subText={
+          mainBusinessData ? (
+            (() => {
+              const BUSINESS_COLORS = ['#D4AF37', '#4A90D9', '#6B7280', '#10B981', '#9333EA', '#EF4444'];
+              const items = mainBusinessData.businessItems.filter((item: BusinessItem) => item.content !== '合计');
+              const totalItem = mainBusinessData.businessItems.find((item: BusinessItem) => item.content === '合计');
+              const totalRevenue = totalItem?.revenue || items.reduce((sum: number, item: BusinessItem) => sum + (item.revenue || 0), 0);
+              const businessWithRatio = items.map((item: BusinessItem, idx: number) => ({
+                ...item,
+                ratio: totalRevenue > 0 ? ((item.revenue || 0) / totalRevenue * 100) : 0,
+                color: BUSINESS_COLORS[idx % BUSINESS_COLORS.length],
+              })).sort((a, b) => b.ratio - a.ratio);
+
+              return (
+                <VStack spacing={2} align="stretch">
+                  {/* 堆叠条形图 */}
+                  <HStack
+                    h="8px"
+                    borderRadius="sm"
+                    overflow="hidden"
+                    spacing={0}
+                    border="1px solid"
+                    borderColor="rgba(212, 175, 55, 0.3)"
+                  >
+                    {businessWithRatio.slice(0, 6).map((item, idx) => (
+                      <Box
+                        key={idx}
+                        w={`${item.ratio}%`}
+                        h="100%"
+                        bg={item.color}
+                        transition="width 0.5s ease"
+                      />
+                    ))}
+                  </HStack>
+
+                  {/* 图例网格（2列3行） */}
+                  <SimpleGrid columns={2} spacing={2} spacingY={0.5}>
+                    {businessWithRatio.slice(0, 6).map((item, idx) => (
+                      <HStack key={idx} spacing={1.5}>
+                        <Box w="10px" h="10px" borderRadius="sm" bg={item.color} flexShrink={0} />
+                        <Text fontSize="xs" fontWeight="medium" color="gray.300" noOfLines={1} flex={1}>
+                          {item.content}
+                        </Text>
+                        <Text fontSize="xs" fontWeight="bold" color="gray.100" flexShrink={0}>
+                          {item.ratio.toFixed(1)}%
+                        </Text>
+                      </HStack>
+                    ))}
+                  </SimpleGrid>
+                </VStack>
+              );
+            })()
+          ) : (
+            <Text textAlign="center">暂无数据</Text>
+          )
+        }
+      />
     </SimpleGrid>
+
+    {/* 历史数据弹窗 */}
+    <Modal isOpen={isOpen} onClose={onClose} size="5xl" isCentered>
+      <ModalOverlay bg="blackAlpha.700" />
+      <ModalContent bg="gray.900" maxW="1000px" border="1px solid" borderColor="rgba(212, 175, 55, 0.3)">
+        <ModalHeader color={darkGoldTheme.gold} borderBottom="1px solid" borderColor="rgba(212, 175, 55, 0.2)">
+          主营业务历史数据
+        </ModalHeader>
+        <ModalCloseButton color="white" />
+        <ModalBody pb={6}>
+          {mainBusinessData && (
+            <HistoricalComparisonTable
+              historicalData={mainBusinessData.historicalData}
+              businessItems={mainBusinessData.businessItems}
+              hasProductData={mainBusinessData.hasProductData}
+              latestReportType={mainBusinessData.latestPeriod.report_type}
+              hideTitle
+            />
+          )}
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+    </>
   );
 });
 

src/views/Company/components/FinancialPanorama/components/MainBusinessAnalysis.tsx

@@ -48,7 +48,7 @@ const BLACK_GOLD_THEME = {
     Table: {
       headerBg: 'rgba(212, 175, 55, 0.1)',
       headerColor: '#D4AF37',
-      rowHoverBg: 'rgba(212, 175, 55, 0.05)',
+      rowHoverBg: 'rgba(156, 163, 175, 0.15)', // 浅灰色悬停背景
       borderColor: 'rgba(212, 175, 55, 0.2)',
       cellPaddingBlock: 8,
       cellPaddingInline: 12,
@@ -67,7 +67,7 @@ const fixedColumnStyles = `
     background: rgba(26, 32, 44, 0.95) !important;
   }
   .main-business-table .ant-table-tbody > tr:hover > td {
-    background: rgba(212, 175, 55, 0.08) !important;
+    background: rgba(156, 163, 175, 0.15) !important;
   }
   .main-business-table .ant-table-tbody > tr:hover > td.ant-table-cell-fix-left,
   .main-business-table .ant-table-tbody > tr:hover > td.ant-table-cell-fix-right {
@@ -88,19 +88,35 @@ interface HistoricalRowData {
 }
 
 // 历史对比表格组件（整合业务明细）
-interface HistoricalComparisonTableProps {
+export interface HistoricalComparisonTableProps {
   historicalData: (ProductClassification | IndustryClassification)[];
   businessItems: BusinessItem[];
   hasProductData: boolean;
   latestReportType: string;
+  /** 是否隐藏标题（用于弹窗中避免重复） */
+  hideTitle?: boolean;
 }
 
-const HistoricalComparisonTable: React.FC<HistoricalComparisonTableProps> = ({
+export const HistoricalComparisonTable: React.FC<HistoricalComparisonTableProps> = ({
   historicalData,
   businessItems,
   hasProductData,
   latestReportType,
+  hideTitle = false,
 }) => {
+  // 简化报告类型显示（2024年三季报 -> 24Q3）
+  const formatReportType = (reportType: string): string => {
+    const match = reportType.match(/(\d{4})年(.+)/);
+    if (!match) return reportType;
+    const year = match[1].slice(2); // 2024 -> 24
+    const type = match[2];
+    if (type.includes('一季')) return `${year}Q1`;
+    if (type.includes('中报') || type.includes('半年')) return `${year}Q2`;
+    if (type.includes('三季')) return `${year}Q3`;
+    if (type.includes('年报')) return `${year}Y`;
+    return `${year}`;
+  };
+
   // 动态生成列配置
   const columns: ColumnsType<HistoricalRowData> = useMemo(() => {
     const cols: ColumnsType<HistoricalRowData> = [
@@ -109,23 +125,24 @@ const HistoricalComparisonTable: React.FC<HistoricalComparisonTableProps> = ({
         dataIndex: 'business',
         key: 'business',
         fixed: 'left',
-        width: 150,
+        width: 120,
+        ellipsis: true,
       },
       {
-        title: `毛利率(${latestReportType})`,
+        title: `毛利率`,
         dataIndex: 'grossMargin',
         key: 'grossMargin',
         align: 'right',
-        width: 120,
+        width: 80,
         render: (value: number | undefined) =>
           value !== undefined ? formatUtils.formatPercent(value) : '-',
       },
       {
-        title: `利润(${latestReportType})`,
+        title: `利润`,
         dataIndex: 'profit',
         key: 'profit',
         align: 'right',
-        width: 100,
+        width: 90,
         render: (value: number | undefined) =>
           value !== undefined ? formatUtils.formatLargeNumber(value) : '-',
       },
@@ -133,12 +150,13 @@ const HistoricalComparisonTable: React.FC<HistoricalComparisonTableProps> = ({
 
     // 添加各期间营收列
     historicalData.slice(0, 4).forEach((period) => {
+      const shortPeriod = formatReportType(period.report_type);
       cols.push({
-        title: `营收(${period.report_type})`,
+        title: shortPeriod,
         dataIndex: period.period,
         key: period.period,
         align: 'right',
-        width: 120,
+        width: 90,
         render: (value: number | string | undefined) =>
           value !== undefined && value !== '-'
             ? formatUtils.formatLargeNumber(value as number)
@@ -179,20 +197,19 @@ const HistoricalComparisonTable: React.FC<HistoricalComparisonTableProps> = ({
   return (
     <Box
       bg={THEME.cardBg}
-      border="1px solid"
-      borderColor={THEME.border}
-      borderRadius="md"
       overflow="hidden"
       h="100%"
       className="main-business-table"
     >
       <style>{fixedColumnStyles}</style>
-      <Box px={4} py={3} borderBottom="1px solid" borderColor={THEME.border}>
-        <Heading size="sm" color={THEME.headingColor}>
-          主营业务明细与历史对比
-        </Heading>
-      </Box>
-      <Box p={4} overflowX="auto">
+      {!hideTitle && (
+        <Box px={4} py={3} borderBottom="1px solid" borderColor={THEME.border}>
+          <Heading size="sm" color={THEME.headingColor}>
+            主营业务明细与历史对比
+          </Heading>
+        </Box>
+      )}
+      <Box p={2} overflowX="auto">
         <ConfigProvider theme={BLACK_GOLD_THEME}>
           <AntTable<HistoricalRowData>
             columns={columns}
@@ -248,8 +265,8 @@ export const MainBusinessAnalysis: React.FC<MainBusinessAnalysisProps> = ({
     }));
 
   const pieOption = getMainBusinessPieOption(
-    `主营业务构成 - ${latestPeriod.report_type}`,
-    dataSource === 'industry' ? '按行业分类' : '按产品分类',
+    `主营业务构成（${latestPeriod.report_type}）`,
+    '',
     pieData
   );
 

src/views/Company/components/FinancialPanorama/components/NetProfitTrendChart.tsx

@@ -0,0 +1,163 @@
+/**
+ * 归母净利润趋势分析图表
+ * 柱状图（净利润）+ 折线图（同比）+ 筛选器 + 查看详细数据
+ */
+
+import React, { useState, useMemo, memo, useCallback } from 'react';
+import {
+  Box,
+  HStack,
+  Text,
+  Link,
+  Skeleton,
+  useDisclosure,
+} from '@chakra-ui/react';
+import ReactECharts from 'echarts-for-react';
+import { ExternalLink } from 'lucide-react';
+
+import PeriodFilterDropdown from './PeriodFilterDropdown';
+import { MetricChartModal } from './MetricChartModal';
+import { useNetProfitData, type ReportPeriodType } from '../hooks/useNetProfitData';
+import { getNetProfitTrendChartOption } from '../utils/chartOptions';
+import type { IncomeStatementData } from '../types';
+
+/** 主题配置 */
+const THEME = {
+  gold: '#D4AF37',
+  goldLight: 'rgba(212, 175, 55, 0.1)',
+  goldBorder: 'rgba(212, 175, 55, 0.3)',
+  textPrimary: '#E2E8F0',
+  textSecondary: '#A0AEC0',
+  cardBg: 'transparent',
+};
+
+export interface NetProfitTrendChartProps {
+  /** 利润表数据 */
+  incomeStatement: IncomeStatementData[];
+  /** 加载状态 */
+  loading?: boolean;
+}
+
+const NetProfitTrendChart: React.FC<NetProfitTrendChartProps> = ({
+  incomeStatement,
+  loading = false,
+}) => {
+  // 筛选状态
+  const [viewMode, setViewMode] = useState<'quarterly' | 'annual'>('annual');
+  const [annualType, setAnnualType] = useState<ReportPeriodType>('annual');
+
+  // 详情弹窗状态
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  // 根据视图模式决定筛选类型
+  const filterType = useMemo(() => {
+    if (viewMode === 'quarterly') {
+      return 'all'; // 单季度显示所有数据
+    }
+    return annualType;
+  }, [viewMode, annualType]);
+
+  // 获取处理后的数据
+  const netProfitData = useNetProfitData(incomeStatement, filterType);
+
+  // 生成图表配置
+  const chartOption = useMemo(() => {
+    if (!netProfitData || netProfitData.length === 0) return null;
+    return getNetProfitTrendChartOption(netProfitData);
+  }, [netProfitData]);
+
+  // 处理查看详细数据
+  const handleViewDetail = useCallback(() => {
+    onOpen();
+  }, [onOpen]);
+
+  // 转换为 MetricChartModal 需要的数据格式
+  const modalData = useMemo(() => {
+    return incomeStatement.map((item) => ({
+      period: item.period,
+      profit: item.profit,
+    }));
+  }, [incomeStatement]);
+
+  // 加载状态
+  if (loading) {
+    return (
+      <Box
+        bg={THEME.cardBg}
+        border="1px solid"
+        borderColor={THEME.goldBorder}
+        borderRadius="md"
+        p={4}
+      >
+        <HStack justify="space-between" mb={4}>
+          <Skeleton height="24px" width="150px" />
+          <Skeleton height="32px" width="200px" />
+        </HStack>
+        <Skeleton height="350px" />
+      </Box>
+    );
+  }
+
+  // 无数据状态
+  if (!netProfitData || netProfitData.length === 0) {
+    return null;
+  }
+
+  return (
+    <Box
+      bg={THEME.cardBg}
+      border="1px solid"
+      borderColor={THEME.goldBorder}
+      borderRadius="md"
+      p={4}
+    >
+      {/* 头部：标题 + 筛选器 */}
+      <HStack justify="space-between" mb={4}>
+        <HStack spacing={3}>
+          <Text fontSize="lg" fontWeight="bold" color={THEME.gold}>
+            归母净利润趋势
+          </Text>
+          <Link
+            fontSize="sm"
+            color={THEME.gold}
+            _hover={{ textDecoration: 'underline' }}
+            onClick={handleViewDetail}
+            cursor="pointer"
+          >
+            <HStack spacing={1}>
+              <Text>查看详细数据</Text>
+              <ExternalLink size={12} />
+            </HStack>
+          </Link>
+        </HStack>
+
+        <PeriodFilterDropdown
+          viewMode={viewMode}
+          annualType={annualType}
+          onViewModeChange={setViewMode}
+          onAnnualTypeChange={setAnnualType}
+        />
+      </HStack>
+
+      {/* 图表 */}
+      {chartOption && (
+        <ReactECharts
+          option={chartOption}
+          style={{ height: '350px', width: '100%' }}
+          opts={{ renderer: 'canvas' }}
+        />
+      )}
+
+      {/* 详细数据弹窗 */}
+      <MetricChartModal
+        isOpen={isOpen}
+        onClose={onClose}
+        metricName="归母净利润"
+        data={modalData}
+        dataPath="profit.parent_net_profit"
+      />
+    </Box>
+  );
+};
+
+export default memo(NetProfitTrendChart);

src/views/Company/components/FinancialPanorama/components/PeriodFilterDropdown.tsx

@@ -0,0 +1,116 @@
+/**
+ * 期数筛选下拉组件
+ * 支持：单季度 | 年报（含子选项：全部、年报、中报、一季报、三季报）
+ */
+
+import React, { memo } from 'react';
+import {
+  HStack,
+  Button,
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuItem,
+  Text,
+} from '@chakra-ui/react';
+import { ChevronDown } from 'lucide-react';
+import type { ReportPeriodType } from '../hooks/useNetProfitData';
+
+/** 筛选选项配置 */
+const FILTER_OPTIONS: { value: ReportPeriodType; label: string }[] = [
+  { value: 'all', label: '全部' },
+  { value: 'annual', label: '年报' },
+  { value: 'mid', label: '中报' },
+  { value: 'q1', label: '一季报' },
+  { value: 'q3', label: '三季报' },
+];
+
+/** 主题配置 */
+const THEME = {
+  gold: '#D4AF37',
+  goldLight: 'rgba(212, 175, 55, 0.1)',
+  goldBorder: 'rgba(212, 175, 55, 0.3)',
+  textPrimary: '#E2E8F0',
+  textSecondary: '#A0AEC0',
+  menuBg: 'rgba(26, 32, 44, 0.98)',
+};
+
+export interface PeriodFilterDropdownProps {
+  /** 当前视图模式：单季度 | 年报 */
+  viewMode: 'quarterly' | 'annual';
+  /** 年报类型筛选 */
+  annualType: ReportPeriodType;
+  /** 视图模式变化回调 */
+  onViewModeChange: (mode: 'quarterly' | 'annual') => void;
+  /** 年报类型变化回调 */
+  onAnnualTypeChange: (type: ReportPeriodType) => void;
+}
+
+const PeriodFilterDropdown: React.FC<PeriodFilterDropdownProps> = ({
+  viewMode,
+  annualType,
+  onViewModeChange,
+  onAnnualTypeChange,
+}) => {
+  const currentLabel = FILTER_OPTIONS.find((o) => o.value === annualType)?.label || '年报';
+
+  return (
+    <HStack spacing={2}>
+      {/* 单季度按钮 */}
+      <Button
+        size="sm"
+        variant={viewMode === 'quarterly' ? 'solid' : 'ghost'}
+        bg={viewMode === 'quarterly' ? THEME.goldLight : 'transparent'}
+        color={viewMode === 'quarterly' ? THEME.gold : THEME.textSecondary}
+        borderWidth="1px"
+        borderColor={viewMode === 'quarterly' ? THEME.goldBorder : 'transparent'}
+        _hover={{ bg: THEME.goldLight, color: THEME.gold }}
+        onClick={() => onViewModeChange('quarterly')}
+      >
+        单季度
+      </Button>
+
+      {/* 年报下拉菜单 */}
+      <Menu>
+        <MenuButton
+          as={Button}
+          size="sm"
+          variant={viewMode === 'annual' ? 'solid' : 'ghost'}
+          bg={viewMode === 'annual' ? THEME.goldLight : 'transparent'}
+          color={viewMode === 'annual' ? THEME.gold : THEME.textSecondary}
+          borderWidth="1px"
+          borderColor={viewMode === 'annual' ? THEME.goldBorder : 'transparent'}
+          _hover={{ bg: THEME.goldLight, color: THEME.gold }}
+          rightIcon={<ChevronDown size={14} />}
+          onClick={() => onViewModeChange('annual')}
+        >
+          {currentLabel}
+        </MenuButton>
+        <MenuList
+          bg={THEME.menuBg}
+          borderColor={THEME.goldBorder}
+          minW="100px"
+          py={1}
+        >
+          {FILTER_OPTIONS.map((option) => (
+            <MenuItem
+              key={option.value}
+              bg="transparent"
+              color={annualType === option.value ? THEME.gold : THEME.textPrimary}
+              fontWeight={annualType === option.value ? 'bold' : 'normal'}
+              _hover={{ bg: THEME.goldLight, color: THEME.gold }}
+              onClick={() => {
+                onAnnualTypeChange(option.value);
+                onViewModeChange('annual');
+              }}
+            >
+              <Text fontSize="sm">{option.label}</Text>
+            </MenuItem>
+          ))}
+        </MenuList>
+      </Menu>
+    </HStack>
+  );
+};
+
+export default memo(PeriodFilterDropdown);

src/views/Company/components/FinancialPanorama/components/UnifiedFinancialTable.tsx

@@ -10,7 +10,6 @@ import React, { useMemo, memo } from 'react';
 import { Box, Text, HStack, Badge as ChakraBadge, Button, Spinner, Center } from '@chakra-ui/react';
 import { Table, ConfigProvider, Tooltip } from 'antd';
 import type { ColumnsType } from 'antd/es/table';
-import { Eye } from 'lucide-react';
 import { formatUtils } from '@services/financialService';
 import { BLACK_GOLD_TABLE_THEME, getTableStyles, calculateYoY, getValueByPath, isNegativeIndicator } from '../utils';
 import type { MetricConfig, MetricSectionConfig } from '../types';
@@ -308,15 +307,19 @@ const UnifiedFinancialTableInner: React.FC<UnifiedFinancialTableProps> = ({
 
           if (type === 'metrics') {
             return (
-              <Eye
-                size={14}
+              <Text
+                fontSize="xs"
                 color="#D4AF37"
-                style={{ cursor: 'pointer', opacity: 0.7 }}
+                cursor="pointer"
+                opacity={0.7}
+                _hover={{ opacity: 1 }}
                 onClick={(e) => {
                   e.stopPropagation();
                   showMetricChart(record.name, record.key, data, record.path);
                 }}
-              />
+              >
+                详情
+              </Text>
             );
           }
 

src/views/Company/components/FinancialPanorama/components/index.ts

@@ -16,3 +16,6 @@ export { FinancialPanoramaSkeleton } from './FinancialPanoramaSkeleton';
 // 统一财务表格组件
 export { UnifiedFinancialTable } from './UnifiedFinancialTable';
 export type { UnifiedFinancialTableProps, TableType, FinancialDataItem } from './UnifiedFinancialTable';
+// 归母净利润趋势图表
+export { default as NetProfitTrendChart } from './NetProfitTrendChart';
+export { default as PeriodFilterDropdown } from './PeriodFilterDropdown';

src/views/Company/components/FinancialPanorama/hooks/index.ts

@@ -5,3 +5,6 @@
 export { useFinancialData } from './useFinancialData';
 export type { DataTypeKey } from './useFinancialData';
 export type { default as UseFinancialDataReturn } from './useFinancialData';
+
+export { useNetProfitData } from './useNetProfitData';
+export type { ReportPeriodType, NetProfitDataItem } from './useNetProfitData';

src/views/Company/components/FinancialPanorama/hooks/useFinancialData.ts

@@ -83,7 +83,7 @@ export const useFinancialData = (
   // 参数状态
   const [stockCode, setStockCode] = useState(initialStockCode);
   const [selectedPeriods, setSelectedPeriodsState] = useState(initialPeriods);
-  const [activeTab, setActiveTab] = useState<DataTypeKey>('profitability');
+  const [activeTab, setActiveTab] = useState<DataTypeKey>('balance');
 
   // 加载状态
   const [loading, setLoading] = useState(false);
@@ -252,17 +252,21 @@ export const useFinancialData = (
     setError(null);
 
     try {
-      // 只加载核心数据（概览面板需要的）
+      // 只加载核心数据（概览面板 + 归母净利润趋势图 + 默认Tab资产负债表需要的）
       const [
         stockInfoRes,
         metricsRes,
         comparisonRes,
         businessRes,
+        incomeRes,
+        balanceRes,
       ] = await Promise.all([
         financialService.getStockInfo(stockCode, options),
         financialService.getFinancialMetrics(stockCode, selectedPeriods, options),
         financialService.getPeriodComparison(stockCode, selectedPeriods, options),
         financialService.getMainBusiness(stockCode, 4, options),
+        financialService.getIncomeStatement(stockCode, selectedPeriods, options),
+        financialService.getBalanceSheet(stockCode, selectedPeriods, options),
       ]);
 
       // 设置数据
@@ -273,6 +277,14 @@ export const useFinancialData = (
       }
       if (comparisonRes.success) setComparison(comparisonRes.data);
       if (businessRes.success) setMainBusiness(businessRes.data);
+      if (incomeRes.success) {
+        setIncomeStatement(incomeRes.data);
+        dataPeriodsRef.current.income = selectedPeriods;
+      }
+      if (balanceRes.success) {
+        setBalanceSheet(balanceRes.data);
+        dataPeriodsRef.current.balance = selectedPeriods;
+      }
 
       logger.info('useFinancialData', '核心财务数据加载成功', { stockCode });
     } catch (err) {

src/views/Company/components/FinancialPanorama/hooks/useNetProfitData.ts

@@ -0,0 +1,131 @@
+/**
+ * 归母净利润数据处理 Hook
+ * 从利润表提取归母净利润并计算同比增长率
+ */
+
+import { useMemo } from 'react';
+import { formatUtils } from '@services/financialService';
+import type { IncomeStatementData } from '../types';
+
+/** 报告期类型筛选 */
+export type ReportPeriodType = 'all' | 'annual' | 'mid' | 'q1' | 'q3';
+
+/** 净利润数据项 */
+export interface NetProfitDataItem {
+  period: string;          // 原始期间 "20231231"
+  periodLabel: string;     // 显示标签 "2023年报"
+  netProfit: number;       // 归母净利润（亿）
+  yoyGrowth: number | null;// 同比增长率（%）
+}
+
+/**
+ * 获取报告期类型
+ * @param period 期间字符串 "20231231" 或 "2023-12-31"
+ * @returns 报告类型 'annual' | 'mid' | 'q1' | 'q3'
+ */
+const getReportPeriodType = (period: string): ReportPeriodType => {
+  // 兼容两种格式：20231231 或 2023-12-31
+  const normalized = period.replace(/-/g, '');
+  const month = normalized.slice(4, 6);
+  switch (month) {
+    case '12':
+      return 'annual';
+    case '06':
+      return 'mid';
+    case '03':
+      return 'q1';
+    case '09':
+      return 'q3';
+    default:
+      return 'annual';
+  }
+};
+
+/**
+ * 查找同比数据（去年同期）
+ * 兼容两种格式：20231231 或 2023-12-31
+ */
+const findYoYData = (
+  data: IncomeStatementData[],
+  currentPeriod: string
+): IncomeStatementData | undefined => {
+  // 检测是否带有连字符
+  const hasHyphen = currentPeriod.includes('-');
+  const normalized = currentPeriod.replace(/-/g, '');
+  const currentYear = parseInt(normalized.slice(0, 4), 10);
+  const currentMonthDay = normalized.slice(4);
+
+  // 根据原格式构建去年同期
+  const lastYearPeriod = hasHyphen
+    ? `${currentYear - 1}-${currentMonthDay.slice(0, 2)}-${currentMonthDay.slice(2)}`
+    : `${currentYear - 1}${currentMonthDay}`;
+
+  return data.find((item) => item.period === lastYearPeriod);
+};
+
+/**
+ * 计算同比增长率
+ */
+const calculateYoYGrowth = (
+  current: number | undefined,
+  previous: number | undefined
+): number | null => {
+  if (
+    current === undefined ||
+    previous === undefined ||
+    previous === 0
+  ) {
+    return null;
+  }
+  return ((current - previous) / Math.abs(previous)) * 100;
+};
+
+/**
+ * 归母净利润数据 Hook
+ * @param incomeStatement 利润表数据
+ * @param filterType 筛选类型 'all' | 'annual' | 'mid' | 'q1' | 'q3'
+ */
+export const useNetProfitData = (
+  incomeStatement: IncomeStatementData[],
+  filterType: ReportPeriodType = 'all'
+): NetProfitDataItem[] => {
+  return useMemo(() => {
+    if (!incomeStatement || incomeStatement.length === 0) {
+      return [];
+    }
+
+    // 按期间排序（升序，旧的在前）
+    const sortedData = [...incomeStatement].sort((a, b) =>
+      a.period.localeCompare(b.period)
+    );
+
+    // 筛选数据
+    const filteredData =
+      filterType === 'all'
+        ? sortedData
+        : sortedData.filter(
+            (item) => getReportPeriodType(item.period) === filterType
+          );
+
+    // 转换数据
+    return filteredData.map((item) => {
+      const netProfit = item.profit?.parent_net_profit ?? 0;
+      // 转换为亿元
+      const netProfitInBillion = netProfit / 100000000;
+
+      // 计算同比
+      const lastYearItem = findYoYData(incomeStatement, item.period);
+      const lastYearProfit = lastYearItem?.profit?.parent_net_profit;
+      const yoyGrowth = calculateYoYGrowth(netProfit, lastYearProfit);
+
+      return {
+        period: item.period,
+        periodLabel: formatUtils.getReportType(item.period),
+        netProfit: parseFloat(netProfitInBillion.toFixed(2)),
+        yoyGrowth: yoyGrowth !== null ? parseFloat(yoyGrowth.toFixed(2)) : null,
+      };
+    });
+  }, [incomeStatement, filterType]);
+};
+
+export default useNetProfitData;

src/views/Company/components/FinancialPanorama/index.tsx

@@ -5,12 +5,10 @@
 
 import React, { useState, useMemo, useCallback } from 'react';
 import {
-  Box,
   Container,
   VStack,
   Card,
   CardBody,
-  Text,
   Alert,
   AlertIcon,
   useDisclosure,
@@ -29,7 +27,7 @@ import {
 } from 'lucide-react';
 
 // 通用组件
-import SubTabContainer, { type SubTabConfig } from '@components/SubTabContainer';
+import SubTabContainer, { type SubTabConfig, type SubTabGroup } from '@components/SubTabContainer';
 
 // 内部模块导入
 import { useFinancialData, type DataTypeKey } from './hooks';
@@ -38,10 +36,10 @@ import { calculateYoYChange, getCellBackground } from './utils';
 import {
   PeriodSelector,
   FinancialOverviewPanel,
-  MainBusinessAnalysis,
   ComparisonAnalysis,
   MetricChartModal,
   FinancialPanoramaSkeleton,
+  NetProfitTrendChart,
 } from './components';
 import {
   BalanceSheetTab,
@@ -61,7 +59,13 @@ import type { FinancialPanoramaProps } from './types';
  * 财务全景主组件
  */
 // Tab key 映射表（SubTabContainer index -> DataTypeKey）
+// 顺序：基础报表（3个） + 财务指标分析（7个）
 const TAB_KEY_MAP: DataTypeKey[] = [
+  // 基础报表
+  'balance',
+  'income',
+  'cashflow',
+  // 财务指标分析
   'profitability',
   'perShare',
   'growth',
@@ -69,9 +73,6 @@ const TAB_KEY_MAP: DataTypeKey[] = [
   'solvency',
   'expense',
   'cashflowMetrics',
-  'balance',
-  'income',
-  'cashflow',
 ];
 
 const FinancialPanorama: React.FC<FinancialPanoramaProps> = ({ stockCode: propStockCode }) => {
@@ -124,21 +125,29 @@ const FinancialPanorama: React.FC<FinancialPanoramaProps> = ({ stockCode: propSt
     onOpen();
   }, [onOpen]);
 
-  // Tab 配置 - 财务指标分类 + 三大财务报表
-  const tabConfigs: SubTabConfig[] = useMemo(
+  // Tab 分组配置 - 基础报表 + 财务指标分析
+  const tabGroups: SubTabGroup[] = useMemo(
     () => [
-      // 财务指标分类（7个）
-      { key: 'profitability', name: '盈利能力', icon: PieChart, component: ProfitabilityTab },
-      { key: 'perShare', name: '每股指标', icon: Percent, component: PerShareTab },
-      { key: 'growth', name: '成长能力', icon: TrendingUp, component: GrowthTab },
-      { key: 'operational', name: '运营效率', icon: Activity, component: OperationalTab },
-      { key: 'solvency', name: '偿债能力', icon: Shield, component: SolvencyTab },
-      { key: 'expense', name: '费用率', icon: Receipt, component: ExpenseTab },
-      { key: 'cashflowMetrics', name: '现金流指标', icon: Banknote, component: CashflowMetricsTab },
-      // 三大财务报表
-      { key: 'balance', name: '资产负债表', icon: BarChart3, component: BalanceSheetTab },
-      { key: 'income', name: '利润表', icon: DollarSign, component: IncomeStatementTab },
-      { key: 'cashflow', name: '现金流量表', icon: TrendingDown, component: CashflowTab },
+      {
+        name: '基础报表',
+        tabs: [
+          { key: 'balance', name: '资产负债表', icon: BarChart3, component: BalanceSheetTab },
+          { key: 'income', name: '利润表', icon: DollarSign, component: IncomeStatementTab },
+          { key: 'cashflow', name: '现金流量表', icon: TrendingDown, component: CashflowTab },
+        ],
+      },
+      {
+        name: '财务指标分析',
+        tabs: [
+          { key: 'profitability', name: '盈利能力', icon: PieChart, component: ProfitabilityTab },
+          { key: 'perShare', name: '每股指标', icon: Percent, component: PerShareTab },
+          { key: 'growth', name: '成长能力', icon: TrendingUp, component: GrowthTab },
+          { key: 'operational', name: '运营效率', icon: Activity, component: OperationalTab },
+          { key: 'solvency', name: '偿债能力', icon: Shield, component: SolvencyTab },
+          { key: 'expense', name: '费用率', icon: Receipt, component: ExpenseTab },
+          { key: 'cashflowMetrics', name: '现金流指标', icon: Banknote, component: CashflowMetricsTab },
+        ],
+      },
     ],
     []
   );
@@ -184,10 +193,11 @@ const FinancialPanorama: React.FC<FinancialPanoramaProps> = ({ stockCode: propSt
   return (
     <Container maxW="container.xl" py={5}>
       <VStack spacing={6} align="stretch">
-        {/* 财务全景面板（三列布局：成长能力、盈利与回报、风险与运营） */}
+        {/* 财务全景面板（四列布局：成长能力、盈利与回报、风险与运营、主营业务按钮） */}
         <FinancialOverviewPanel
           stockInfo={stockInfo}
           financialMetrics={financialMetrics}
+          mainBusiness={mainBusiness}
         />
 
         {/* 营收与利润趋势 */}
@@ -195,21 +205,20 @@ const FinancialPanorama: React.FC<FinancialPanoramaProps> = ({ stockCode: propSt
           <ComparisonAnalysis comparison={comparison} />
         )}
 
-        {/* 主营业务 */}
-        {stockInfo && (
-          <Box>
-            <Text fontSize="lg" fontWeight="bold" mb={4} color="#D4AF37">
-              主营业务
-            </Text>
-            <MainBusinessAnalysis mainBusiness={mainBusiness} />
-          </Box>
+        {/* 归母净利润趋势分析 */}
+        {incomeStatement && incomeStatement.length > 0 && (
+          <NetProfitTrendChart
+            incomeStatement={incomeStatement}
+            loading={loadingTab === 'income'}
+          />
         )}
 
         {/* 三大财务报表 - 使用 SubTabContainer 二级导航 */}
         <Card bg="gray.900" shadow="md" border="1px solid" borderColor="rgba(212, 175, 55, 0.3)">
           <CardBody p={0}>
             <SubTabContainer
-              tabs={tabConfigs}
+              groups={tabGroups}
+              defaultIndex={0}
               componentProps={componentProps}
               themePreset="blackGold"
               isLazy

src/views/Company/components/FinancialPanorama/utils/calculations.ts

@@ -97,3 +97,28 @@ export const isNegativeIndicator = (key: string): boolean => {
     key.includes('debt_ratio')
   );
 };
+
+/**
+ * 计算两个值的差异百分比
+ * @param value1 当前股票值
+ * @param value2 对比股票值
+ * @param format 格式类型：percent 直接相减，number 计算变化率
+ * @returns 差异百分比或 null
+ */
+export const calculateDiff = (
+  value1: number | null | undefined,
+  value2: number | null | undefined,
+  format: 'percent' | 'number'
+): number | null => {
+  if (value1 == null || value2 == null) return null;
+
+  if (format === 'percent') {
+    return value1 - value2;
+  }
+
+  if (value2 !== 0) {
+    return ((value1 - value2) / Math.abs(value2)) * 100;
+  }
+
+  return null;
+};

src/views/Company/components/FinancialPanorama/utils/chartOptions.ts

@@ -127,7 +127,10 @@ export const getComparisonChartOption = (
       },
     },
     legend: {
-      data: ['营业收入', '净利润'],
+      data: [
+        { name: '营业收入', itemStyle: { color: '#EF4444' } },
+        { name: '净利润', itemStyle: { color: fui.gold } },
+      ],
       bottom: 0,
       textStyle: {
         color: '#A0AEC0',
@@ -200,14 +203,7 @@ export const getComparisonChartOption = (
         type: 'bar',
         data: revenueData.map((d) => d.value?.toFixed(2)),
         itemStyle: {
-          color: (params: { dataIndex: number; value: number }) => {
-            const idx = params.dataIndex;
-            if (idx === 0) return fui.gold; // 金色作为基准
-            const prevValue = revenueData[idx - 1].value;
-            const currValue = params.value;
-            // 红涨绿跌
-            return currValue >= prevValue ? '#EF4444' : '#10B981';
-          },
+          color: '#EF4444', // 统一红色
         },
       },
       {
@@ -238,25 +234,22 @@ const BLACK_GOLD_PIE_COLORS = chartTheme.goldSeries;
  */
 export const getMainBusinessPieOption = (
   title: string,
-  subtitle: string,
+  _subtitle: string,
   data: { name: string; value: number }[]
 ) => {
   return {
     title: {
       text: title,
-      subtext: subtitle,
       left: 'center',
+      top: 0,
       textStyle: {
         color: fui.gold,
         fontSize: 14,
       },
-      subtextStyle: {
-        color: '#A0AEC0',
-        fontSize: 12,
-      },
     },
     tooltip: {
       trigger: 'item',
+      confine: true,
       backgroundColor: chartTheme.tooltip.bg,
       borderColor: chartTheme.tooltip.border,
       textStyle: {
@@ -269,28 +262,40 @@ export const getMainBusinessPieOption = (
       },
     },
     legend: {
-      orient: 'vertical',
-      left: 'left',
-      top: 'center',
+      orient: 'horizontal',
+      bottom: 5,
+      left: 'center',
       textStyle: {
         color: '#E2E8F0',
-        fontSize: 12,
+        fontSize: 10,
       },
+      itemWidth: 10,
+      itemHeight: 10,
+      itemGap: 6,
     },
     color: BLACK_GOLD_PIE_COLORS,
     series: [
       {
         type: 'pie',
-        radius: '55%',
-        center: ['55%', '50%'],
+        radius: '50%',
+        center: ['50%', '42%'],
         data: data,
         label: {
           show: true,
           color: '#E2E8F0',
           fontSize: 11,
-          formatter: '{b}: {d}%',
+          formatter: (params: { name: string; percent: number }) => {
+            // 业务名称过长时截断
+            const name = params.name.length > 6
+              ? params.name.slice(0, 6) + '...'
+              : params.name;
+            return `${name}\n${params.percent.toFixed(1)}%`;
+          },
+          lineHeight: 14,
         },
         labelLine: {
+          length: 12,
+          length2: 8,
           lineStyle: {
             color: alpha('gold', 0.5),
           },
@@ -308,7 +313,7 @@ export const getMainBusinessPieOption = (
 };
 
 /**
- * 生成对比柱状图配置
+ * 生成对比柱状图配置 - 黑金主题
  * @param title 标题
  * @param stockName1 股票1名称
  * @param stockName2 股票2名称
@@ -326,13 +331,50 @@ export const getCompareBarChartOption = (
   data2: (number | undefined)[]
 ) => {
   return {
-    tooltip: { trigger: 'axis' },
-    legend: { data: [stockName1, stockName2] },
+    backgroundColor: 'transparent',
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: chartTheme.tooltip.bg,
+      borderColor: chartTheme.tooltip.border,
+      textStyle: {
+        color: '#E2E8F0',
+      },
+    },
+    legend: {
+      data: [stockName1, stockName2],
+      textStyle: {
+        color: '#E2E8F0',
+      },
+    },
     xAxis: {
       type: 'category',
       data: categories,
+      axisLine: {
+        lineStyle: {
+          color: chartTheme.axisLine,
+        },
+      },
+      axisLabel: {
+        color: '#A0AEC0',
+      },
+    },
+    yAxis: {
+      type: 'value',
+      axisLabel: {
+        formatter: '{value}%',
+        color: '#A0AEC0',
+      },
+      axisLine: {
+        lineStyle: {
+          color: chartTheme.axisLine,
+        },
+      },
+      splitLine: {
+        lineStyle: {
+          color: chartTheme.splitLine,
+        },
+      },
     },
-    yAxis: { type: 'value', axisLabel: { formatter: '{value}%' } },
     series: [
       {
         name: stockName1,
@@ -347,3 +389,170 @@ export const getCompareBarChartOption = (
     ],
   };
 };
+
+/** 净利润数据项接口 */
+interface NetProfitDataItem {
+  periodLabel: string;
+  netProfit: number;
+  yoyGrowth: number | null;
+}
+
+/**
+ * 生成归母净利润趋势图表配置 - 黑金主题
+ * 柱状图（净利润）+ 折线图（同比增长率）
+ * @param data 净利润数据数组
+ * @returns ECharts 配置
+ */
+export const getNetProfitTrendChartOption = (data: NetProfitDataItem[]) => {
+  const barColor = '#5B8DEF';   // 统一蓝色
+  const lineColor = '#F6AD55';  // 橙色
+
+  const periods = data.map((d) => d.periodLabel);
+  const profitValues = data.map((d) => d.netProfit);
+  const growthValues = data.map((d) => d.yoyGrowth);
+
+  return {
+    backgroundColor: 'transparent',
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: chartTheme.tooltip.bg,
+      borderColor: chartTheme.tooltip.border,
+      textStyle: {
+        color: '#E2E8F0',
+      },
+      axisPointer: {
+        type: 'cross',
+        crossStyle: {
+          color: alpha('gold', 0.5),
+        },
+      },
+      formatter: (params: Array<{ seriesName: string; value: number | null; color: string; axisValue: string }>) => {
+        if (!params || params.length === 0) return '';
+        const period = params[0].axisValue;
+        let html = `<div style="font-weight:600;margin-bottom:8px;color:${fui.gold}">${period}</div>`;
+        params.forEach((item) => {
+          const value = item.value;
+          const unit = item.seriesName === '归母净利润' ? '亿' : '%';
+          const displayValue = value !== null && value !== undefined ? `${value.toFixed(2)}${unit}` : '-';
+          html += `<div style="display:flex;justify-content:space-between;align-items:center;margin:4px 0">
+            <span style="display:flex;align-items:center">
+              <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${item.color};margin-right:8px"></span>
+              ${item.seriesName}
+            </span>
+            <span style="font-weight:500;margin-left:20px;font-family:'Menlo','Monaco',monospace">${displayValue}</span>
+          </div>`;
+        });
+        return html;
+      },
+    },
+    legend: {
+      data: [
+        { name: '归母净利润', itemStyle: { color: barColor } },
+        { name: '同比(右)', itemStyle: { color: lineColor } },
+      ],
+      bottom: 0,
+      textStyle: {
+        color: '#A0AEC0',
+      },
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '12%',
+      top: '15%',
+      containLabel: true,
+    },
+    xAxis: {
+      type: 'category',
+      data: periods,
+      axisLine: {
+        lineStyle: {
+          color: chartTheme.axisLine,
+        },
+      },
+      axisLabel: {
+        color: '#A0AEC0',
+        rotate: 30,
+      },
+    },
+    yAxis: [
+      {
+        type: 'value',
+        name: '(亿)',
+        position: 'left',
+        nameTextStyle: {
+          color: barColor,
+        },
+        axisLine: {
+          lineStyle: {
+            color: chartTheme.axisLine,
+          },
+        },
+        axisLabel: {
+          color: barColor,
+        },
+        splitLine: {
+          lineStyle: {
+            color: chartTheme.splitLine,
+          },
+        },
+      },
+      {
+        type: 'value',
+        name: '(%)',
+        position: 'right',
+        nameTextStyle: {
+          color: lineColor,
+        },
+        axisLine: {
+          lineStyle: {
+            color: chartTheme.axisLine,
+          },
+        },
+        axisLabel: {
+          color: lineColor,
+          formatter: '{value}',
+        },
+        splitLine: {
+          show: false,
+        },
+      },
+    ],
+    series: [
+      {
+        name: '归母净利润',
+        type: 'bar',
+        data: profitValues,
+        barMaxWidth: 40,
+        itemStyle: {
+          color: barColor,
+        },
+        label: {
+          show: true,
+          position: 'top',
+          color: '#E2E8F0',
+          fontSize: 11,
+          formatter: (params: { value: number }) => {
+            return params.value?.toFixed(2) ?? '';
+          },
+        },
+      },
+      {
+        name: '同比(右)',
+        type: 'line',
+        yAxisIndex: 1,
+        data: growthValues,
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 8,
+        itemStyle: {
+          color: lineColor,
+        },
+        lineStyle: {
+          width: 2,
+          color: lineColor,
+        },
+      },
+    ],
+  };
+};

src/views/Company/components/FinancialPanorama/utils/index.ts

@@ -7,6 +7,7 @@ export {
   getCellBackground,
   getValueByPath,
   isNegativeIndicator,
+  calculateDiff,
 } from './calculations';
 
 export {
@@ -14,6 +15,7 @@ export {
   getComparisonChartOption,
   getMainBusinessPieOption,
   getCompareBarChartOption,
+  getNetProfitTrendChartOption,
 } from './chartOptions';
 
 export {

src/views/Company/components/FinancialPanorama/utils/tableTheme.ts

@@ -18,7 +18,7 @@ export const BLACK_GOLD_TABLE_THEME: ThemeConfig = {
     Table: {
       headerBg: 'rgba(26, 32, 44, 0.8)',
       headerColor: '#D4AF37',
-      rowHoverBg: 'rgba(212, 175, 55, 0.1)',
+      rowHoverBg: 'rgba(156, 163, 175, 0.15)', // 浅灰色悬停背景
       borderColor: 'rgba(212, 175, 55, 0.15)',
       cellPaddingBlock: 6,
       cellPaddingInline: 8,
@@ -58,7 +58,7 @@ export const getTableStyles = (className: string): string => `
     font-size: 12px;
   }
   .${className} .ant-table-tbody > tr:hover > td {
-    background: rgba(212, 175, 55, 0.08) !important;
+    background: rgba(156, 163, 175, 0.15) !important;
   }
   .${className} .ant-table-tbody > tr.total-row > td {
     background: rgba(212, 175, 55, 0.15) !important;

src/views/Company/components/ForecastReport/components/DetailTable.tsx

@@ -27,7 +27,7 @@ const BLACK_GOLD_THEME = {
     Table: {
       headerBg: 'rgba(212, 175, 55, 0.12)',
       headerColor: '#D4AF37',
-      rowHoverBg: 'rgba(212, 175, 55, 0.08)',
+      rowHoverBg: 'rgba(156, 163, 175, 0.15)', // 浅灰色悬停背景
       borderColor: 'rgba(212, 175, 55, 0.2)',
       cellPaddingBlock: 12,  // 增加行高
       cellPaddingInline: 14,
@@ -89,10 +89,15 @@ const DetailTable: React.FC<DetailTableProps> = ({ data }) => {
           const isGrowthMetric = record['指标']?.includes('增长') || record['指标']?.includes('率');
           const isPositiveGrowth = isGrowthMetric && !isNaN(numValue) && numValue > 0;
 
+          // PE 和 PEG 需要显示单位"倍"
+          const metricName = record['指标'] as string;
+          const isPeOrPeg = metricName === 'PE' || metricName === 'PEG';
+          const displayValue = isPeOrPeg ? `${value}倍` : value;
+
           // 数值类添加样式类名
           const className = `data-cell ${isNegative ? 'negative-value' : ''} ${isPositiveGrowth ? 'positive-growth' : ''}`;
 
-          return <span className={className}>{value}</span>;
+          return <span className={className}>{displayValue}</span>;
         },
       });
     });

src/views/Company/components/ForecastReport/components/EpsChart.tsx

@@ -51,7 +51,10 @@ const EpsChart: React.FC<EpsChartProps> = ({ data }) => {
     },
     legend: {
       ...BASE_CHART_CONFIG.legend,
-      data: ['EPS(稀释)', '行业平均'],
+      data: [
+        { name: 'EPS(稀释)', itemStyle: { color: CHART_COLORS.eps } },
+        { name: '行业平均', itemStyle: { color: CHART_COLORS.epsAvg } },
+      ],
       bottom: 0,
     },
     xAxis: {

src/views/Company/components/ForecastReport/components/IncomeProfitGrowthChart.tsx

@@ -61,7 +61,11 @@ const IncomeProfitGrowthChart: React.FC<IncomeProfitGrowthChartProps> = ({
     },
     legend: {
       ...BASE_CHART_CONFIG.legend,
-      data: ['营业总收入', '归母净利润', '营收增长率'],
+      data: [
+        { name: '营业总收入', itemStyle: { color: CHART_COLORS.income } },
+        { name: '归母净利润', itemStyle: { color: CHART_COLORS.profit } },
+        { name: '营收增长率', itemStyle: { color: CHART_COLORS.growth } },
+      ],
       bottom: 0,
     },
     grid: {

src/views/Company/components/ForecastReport/components/PePegChart.tsx

@@ -31,7 +31,7 @@ const PePegChart: React.FC<PePegChartProps> = ({ data }) => {
         </div>`;
 
         params.forEach((item: any) => {
-          const unit = item.seriesName === 'PE' ? '倍' : '';
+          const unit = '倍'; // PE 和 PEG 都是倍数单位
           html += `<div style="display:flex;justify-content:space-between;align-items:center;margin:4px 0">
             <span style="display:flex;align-items:center">
               <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${item.color};margin-right:8px"></span>
@@ -46,9 +46,19 @@ const PePegChart: React.FC<PePegChartProps> = ({ data }) => {
     },
     legend: {
       ...BASE_CHART_CONFIG.legend,
-      data: ['PE', 'PEG'],
+      data: [
+        { name: 'PE', itemStyle: { color: CHART_COLORS.pe } },
+        { name: 'PEG', itemStyle: { color: CHART_COLORS.peg } },
+      ],
       bottom: 0,
     },
+    grid: {
+      left: 50,
+      right: 50,  // 增加右侧间距，避免 PEG 轴数字被遮挡
+      bottom: 40,
+      top: 40,
+      containLabel: false,
+    },
     xAxis: {
       ...BASE_CHART_CONFIG.xAxis,
       type: 'category',
@@ -70,7 +80,7 @@ const PePegChart: React.FC<PePegChartProps> = ({ data }) => {
       {
         ...BASE_CHART_CONFIG.yAxis,
         type: 'value',
-        name: 'PEG',
+        name: 'PEG(倍)',
         nameTextStyle: { color: CHART_COLORS.peg },
         axisLine: { lineStyle: { color: CHART_COLORS.peg } },
         axisLabel: { color: CHART_COLORS.peg },

src/views/Company/components/ForecastReport/constants.ts

@@ -22,7 +22,7 @@ export const CHART_COLORS = {
   profit: '#F6AD55',      // 利润 - 橙金色
   growth: '#10B981',      // 增长率 - 翠绿色
   eps: '#DAA520',         // EPS - 金菊色
-  epsAvg: '#4A5568',      // EPS行业平均 - 灰色
+  epsAvg: '#A0AEC0',      // EPS行业平均 - 亮灰色（提高对比度）
   pe: '#D4AF37',          // PE - 金色
   peg: '#38B2AC',         // PEG - 青色（优化对比度）
 };
@@ -126,25 +126,32 @@ export const DETAIL_TABLE_STYLES = `
     background: rgba(26, 32, 44, 0.98) !important;
   }
   .forecast-detail-table .ant-table-tbody > tr:hover > td.ant-table-cell-fix-left {
-    background: #242d3d !important;
+    background: rgba(156, 163, 175, 0.15) !important;
   }
 
-  /* 指标标签样式 */
+  /* 所有行悬停背景色 - 统一浅灰色 */
+  .forecast-detail-table .ant-table-tbody > tr:hover > td {
+    background: rgba(156, 163, 175, 0.15) !important;
+  }
+
+  /* 指标标签样式 - 统一字体字号和粗细 */
   .forecast-detail-table .metric-tag {
     background: rgba(212, 175, 55, 0.15);
     border-color: rgba(212, 175, 55, 0.3);
     color: #D4AF37;
+    font-size: 13px;
     font-weight: 500;
   }
 
-  /* 重要指标行高亮 */
+  /* 重要指标行高亮 - 保持字体字号一致，仅背景色区分 */
   .forecast-detail-table .important-row {
     background: rgba(212, 175, 55, 0.06) !important;
   }
   .forecast-detail-table .important-row .metric-tag {
     background: rgba(212, 175, 55, 0.25);
     color: #FFD700;
-    font-weight: 600;
+    font-size: 13px;
+    font-weight: 500;
   }
 
   /* 斑马纹 - 奇数行 */
@@ -152,7 +159,7 @@ export const DETAIL_TABLE_STYLES = `
     background: rgba(255, 255, 255, 0.02);
   }
   .forecast-detail-table .ant-table-tbody > tr:nth-child(odd):hover > td {
-    background: rgba(212, 175, 55, 0.08) !important;
+    background: rgba(156, 163, 175, 0.15) !important;
   }
 
   /* 等宽字体 - 数值列 */

src/views/Company/components/MarketDataView/components/StockSummaryCard/MetricCard.tsx

@@ -50,7 +50,7 @@ const MetricCard: React.FC<MetricCardProps> = ({
   const ambientColor = getAmbientColor(mainColor);
 
   return (
-    <DarkGoldCard cornerDecor={true} position="relative" overflow="hidden">
+    <DarkGoldCard cornerDecor={true} position="relative" overflow="hidden" display="flex" flexDirection="column">
       {/* James Turrell 环境光效果 */}
       <Box
         position="absolute"
@@ -98,18 +98,25 @@ const MetricCard: React.FC<MetricCardProps> = ({
         />
       </VStack>
 
-      {/* 辅助信息 */}
+      {/* 辅助信息 - 在剩余高度居中 */}
       <Box
-        color={darkGoldTheme.textMuted}
-        fontSize="xs"
+        flex={1}
+        display="flex"
+        alignItems="center"
         position="relative"
         zIndex={1}
-        p={2}
-        bg="rgba(0, 0, 0, 0.2)"
-        borderRadius="md"
-        border="1px solid rgba(212, 175, 55, 0.1)"
       >
-        {subText}
+        <Box
+          w="100%"
+          color={darkGoldTheme.textMuted}
+          fontSize="xs"
+          p={2}
+          bg="rgba(0, 0, 0, 0.2)"
+          borderRadius="md"
+          border="1px solid rgba(212, 175, 55, 0.1)"
+        >
+          {subText}
+        </Box>
       </Box>
 
       {/* 底部渐变线 */}

src/views/Company/components/MarketDataView/components/StockSummaryCard/atoms/DarkGoldCard.tsx

@@ -111,7 +111,7 @@ const DarkGoldCard: React.FC<DarkGoldCardProps> = ({
     />
 
     {/* 内容 */}
-    <Box position="relative" zIndex={1}>
+    <Box position="relative" zIndex={1} display="inherit" flexDirection="inherit" flex={1}>
       {children}
     </Box>
   </Box>

src/views/Company/components/StockQuoteCard/components/CompareStockInput.tsx

@@ -4,7 +4,7 @@
  */
 
 import React, { useState, useEffect, useRef } from 'react';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import {
   Box,
   HStack,
@@ -18,6 +18,8 @@ import {
 } from '@chakra-ui/react';
 import { BarChart2, Search } from 'lucide-react';
 import { useStockSearch, type Stock } from '../../../hooks/useStockSearch';
+import { loadAllStocks } from '@store/slices/stockSlice';
+import { DEEP_SPACE_THEME as T } from './theme';
 
 interface CompareStockInputProps {
   onCompare: (stockCode: string) => void;
@@ -40,13 +42,21 @@ const CompareStockInput: React.FC<CompareStockInputProps> = ({
   const [showDropdown, setShowDropdown] = useState(false);
   const [selectedStock, setSelectedStock] = useState<Stock | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
+  const dispatch = useDispatch();
 
   // 从 Redux 获取全部股票列表
   const allStocks = useSelector((state: RootState) => state.stock.allStocks);
 
+  // 确保股票列表已加载（用于模糊搜索）
+  useEffect(() => {
+    if (!allStocks || allStocks.length === 0) {
+      dispatch(loadAllStocks() as any);
+    }
+  }, [dispatch, allStocks]);
+
   // 黑金主题颜色（提高对比度）
   const borderColor = '#E8C14D';
-  const textColor = 'rgba(245, 240, 225, 0.95)';
+  const textColor = T.textSecondary;
   const goldColor = '#F4D03F';
   const bgColor = '#1A202C';
 
@@ -108,7 +118,7 @@ const CompareStockInput: React.FC<CompareStockInputProps> = ({
             <Search size={12} color={textColor} />
           </InputLeftElement>
           <Input
-            placeholder="对比股票"
+            placeholder="请输入股票代码"
             value={inputValue}
             onChange={(e) => {
               setInputValue(e.target.value);
@@ -121,7 +131,7 @@ const CompareStockInput: React.FC<CompareStockInputProps> = ({
             fontSize="sm"
             borderColor={borderColor}
             bg="transparent"
-            _placeholder={{ color: textColor, fontSize: 'sm' }}
+            _placeholder={{ color: T.textPlaceholder, fontSize: 'sm' }}
             _focus={{
               borderColor: goldColor,
               boxShadow: `0 0 0 1px ${goldColor}`,

src/views/Company/components/StockQuoteCard/components/StockCompareModal.tsx

@@ -1,43 +1,35 @@
 /**
  * StockCompareModal - 股票对比弹窗组件
  * 展示对比明细、盈利能力对比、成长力对比
+ *
+ * 使用 Ant Design Modal + Table
+ * 主题配置使用 Company/theme 统一配置
  */
 
-import React from 'react';
-import {
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalHeader,
-  ModalBody,
-  ModalCloseButton,
-  VStack,
-  HStack,
-  Grid,
-  GridItem,
-  Card,
-  CardHeader,
-  CardBody,
-  Heading,
-  Text,
-  Table,
-  Thead,
-  Tbody,
-  Tr,
-  Th,
-  Td,
-  TableContainer,
-  Spinner,
-  Center,
-} from '@chakra-ui/react';
-import { ArrowUp, ArrowDown } from 'lucide-react';
+import React, { useMemo } from 'react';
+import { Modal, Table, Spin, Row, Col, Card, Typography, Space, ConfigProvider } from 'antd';
+import type { ColumnsType } from 'antd/es/table';
+import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
 import ReactECharts from 'echarts-for-react';
 
 import { COMPARE_METRICS } from '../../FinancialPanorama/constants';
-import { getValueByPath, getCompareBarChartOption } from '../../FinancialPanorama/utils';
+import { getValueByPath, getCompareBarChartOption, calculateDiff } from '../../FinancialPanorama/utils';
 import { formatUtils } from '@services/financialService';
 import type { StockInfo } from '../../FinancialPanorama/types';
+import {
+  antdDarkTheme,
+  modalStyles,
+  cardStyle,
+  cardStyles,
+  chartCardStyles,
+  FUI_COLORS,
+} from '../../../theme';
 
+const { Title, Text } = Typography;
+
+// ============================================
+// 类型定义
+// ============================================
 interface StockCompareModalProps {
   isOpen: boolean;
   onClose: () => void;
@@ -48,6 +40,70 @@ interface StockCompareModalProps {
   isLoading?: boolean;
 }
 
+interface CompareTableRow {
+  key: string;
+  metric: string;
+  currentValue: number | null | undefined;
+  compareValue: number | null | undefined;
+  diff: number | null;
+  format: 'percent' | 'number';
+}
+
+// ============================================
+// 工具函数
+// ============================================
+const formatValue = (
+  value: number | null | undefined,
+  format: 'percent' | 'number'
+): string => {
+  if (value == null) return '-';
+  return format === 'percent'
+    ? formatUtils.formatPercent(value)
+    : formatUtils.formatLargeNumber(value);
+};
+
+// ============================================
+// 子组件
+// ============================================
+const DiffCell: React.FC<{ diff: number | null }> = ({ diff }) => {
+  if (diff === null) return <span style={{ color: FUI_COLORS.text.muted }}>-</span>;
+
+  const isPositive = diff > 0;
+  const color = isPositive ? FUI_COLORS.status.positive : FUI_COLORS.status.negative;
+  const Icon = isPositive ? ArrowUpOutlined : ArrowDownOutlined;
+
+  return (
+    <Space size={4} style={{ color, justifyContent: 'center' }}>
+      <Icon style={{ fontSize: 11 }} />
+      <span style={{ fontWeight: 500 }}>{Math.abs(diff).toFixed(2)}%</span>
+    </Space>
+  );
+};
+
+const CardTitle: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <Title level={5} style={{ margin: 0, color: FUI_COLORS.gold[400], fontSize: 14 }}>
+    {children}
+  </Title>
+);
+
+const LoadingState: React.FC = () => (
+  <div style={{ textAlign: 'center', padding: '80px 0' }}>
+    <Spin size="large" />
+    <Text style={{ display: 'block', marginTop: 16, color: FUI_COLORS.text.muted }}>
+      加载对比数据中...
+    </Text>
+  </div>
+);
+
+const EmptyState: React.FC = () => (
+  <div style={{ textAlign: 'center', padding: '80px 0' }}>
+    <Text style={{ color: FUI_COLORS.text.muted, fontSize: 14 }}>暂无对比数据</Text>
+  </div>
+);
+
+// ============================================
+// 主组件
+// ============================================
 const StockCompareModal: React.FC<StockCompareModalProps> = ({
   isOpen,
   onClose,
@@ -57,187 +113,201 @@ const StockCompareModal: React.FC<StockCompareModalProps> = ({
   compareStockInfo,
   isLoading = false,
 }) => {
-  // 黑金主题颜色
-  const bgColor = '#1A202C';
-  const borderColor = '#C9A961';
-  const goldColor = '#F4D03F';
-  const positiveColor = '#EF4444'; // 红涨
-  const negativeColor = '#10B981'; // 绿跌
+  // 构建表格数据
+  const tableData = useMemo<CompareTableRow[]>(() => {
+    if (!currentStockInfo || !compareStockInfo) return [];
 
-  // 加载中或无数据时的显示
-  if (isLoading || !currentStockInfo || !compareStockInfo) {
-    return (
-      <Modal isOpen={isOpen} onClose={onClose} size="5xl" scrollBehavior="inside">
-        <ModalOverlay />
-        <ModalContent bg={bgColor} borderColor={borderColor} borderWidth="1px">
-          <ModalHeader color={goldColor}>股票对比</ModalHeader>
-          <ModalCloseButton color={borderColor} />
-          <ModalBody pb={6}>
-            <Center py={20}>
-              {isLoading ? (
-                <VStack spacing={4}>
-                  <Spinner size="xl" color={goldColor} />
-                  <Text color={borderColor}>加载对比数据中...</Text>
-                </VStack>
-              ) : (
-                <Text color={borderColor}>暂无对比数据</Text>
-              )}
-            </Center>
-          </ModalBody>
-        </ModalContent>
-      </Modal>
+    return COMPARE_METRICS.map((metric) => {
+      const currentValue = getValueByPath<number>(currentStockInfo, metric.path);
+      const compareValue = getValueByPath<number>(compareStockInfo, metric.path);
+      const format = (metric.format || 'number') as 'percent' | 'number';
+
+      return {
+        key: metric.key,
+        metric: metric.label,
+        currentValue,
+        compareValue,
+        diff: calculateDiff(currentValue, compareValue, format),
+        format,
+      };
+    });
+  }, [currentStockInfo, compareStockInfo]);
+
+  // 表格列定义
+  const columns = useMemo<ColumnsType<CompareTableRow>>(() => [
+    {
+      title: '指标',
+      dataIndex: 'metric',
+      key: 'metric',
+      align: 'center',
+      width: '25%',
+      render: (text) => <span style={{ color: FUI_COLORS.gold[400] }}>{text}</span>,
+    },
+    {
+      title: currentStockInfo?.stock_name || currentStock,
+      dataIndex: 'currentValue',
+      key: 'currentValue',
+      align: 'center',
+      width: '25%',
+      render: (value, record) => (
+        <span style={{ color: FUI_COLORS.gold[400], fontWeight: 500 }}>
+          {formatValue(value, record.format)}
+        </span>
+      ),
+    },
+    {
+      title: compareStockInfo?.stock_name || compareStock,
+      dataIndex: 'compareValue',
+      key: 'compareValue',
+      align: 'center',
+      width: '25%',
+      render: (value, record) => (
+        <span style={{ color: FUI_COLORS.gold[400], fontWeight: 500 }}>
+          {formatValue(value, record.format)}
+        </span>
+      ),
+    },
+    {
+      title: '差异',
+      dataIndex: 'diff',
+      key: 'diff',
+      align: 'center',
+      width: '25%',
+      render: (diff: number | null) => <DiffCell diff={diff} />,
+    },
+  ], [currentStock, compareStock, currentStockInfo?.stock_name, compareStockInfo?.stock_name]);
+
+  // 盈利能力图表配置
+  const profitabilityChartOption = useMemo(() => {
+    if (!currentStockInfo || !compareStockInfo) return {};
+
+    return getCompareBarChartOption(
+      '盈利能力对比',
+      currentStockInfo.stock_name || '',
+      compareStockInfo.stock_name || '',
+      ['ROE', 'ROA', '毛利率', '净利率'],
+      [
+        currentStockInfo.key_metrics?.roe,
+        currentStockInfo.key_metrics?.roa,
+        currentStockInfo.key_metrics?.gross_margin,
+        currentStockInfo.key_metrics?.net_margin,
+      ],
+      [
+        compareStockInfo.key_metrics?.roe,
+        compareStockInfo.key_metrics?.roa,
+        compareStockInfo.key_metrics?.gross_margin,
+        compareStockInfo.key_metrics?.net_margin,
+      ]
     );
-  }
+  }, [currentStockInfo, compareStockInfo]);
+
+  // 成长能力图表配置
+  const growthChartOption = useMemo(() => {
+    if (!currentStockInfo || !compareStockInfo) return {};
+
+    return getCompareBarChartOption(
+      '成长能力对比',
+      currentStockInfo.stock_name || '',
+      compareStockInfo.stock_name || '',
+      ['营收增长', '利润增长', '资产增长', '权益增长'],
+      [
+        currentStockInfo.growth_rates?.revenue_growth,
+        currentStockInfo.growth_rates?.profit_growth,
+        currentStockInfo.growth_rates?.asset_growth,
+        currentStockInfo.growth_rates?.equity_growth,
+      ],
+      [
+        compareStockInfo.growth_rates?.revenue_growth,
+        compareStockInfo.growth_rates?.profit_growth,
+        compareStockInfo.growth_rates?.asset_growth,
+        compareStockInfo.growth_rates?.equity_growth,
+      ]
+    );
+  }, [currentStockInfo, compareStockInfo]);
+
+  // Modal 标题
+  const modalTitle = useMemo(() => {
+    if (!currentStockInfo || !compareStockInfo) return '股票对比';
+    return `${currentStockInfo.stock_name} (${currentStock}) vs ${compareStockInfo.stock_name} (${compareStock})`;
+  }, [currentStock, compareStock, currentStockInfo, compareStockInfo]);
+
+  // 渲染内容
+  const renderContent = () => {
+    if (isLoading) return <LoadingState />;
+    if (!currentStockInfo || !compareStockInfo) return <EmptyState />;
+
+    return (
+      <Space direction="vertical" size={20} style={{ width: '100%' }}>
+        {/* 对比明细表格 */}
+        <Card
+          title={<CardTitle>对比明细</CardTitle>}
+          variant="borderless"
+          style={cardStyle}
+          styles={{
+            ...cardStyles,
+            body: { padding: '12px 0' },
+          }}
+        >
+          <Table
+            columns={columns}
+            dataSource={tableData}
+            pagination={false}
+            size="middle"
+            showHeader
+          />
+        </Card>
+
+        {/* 对比图表 */}
+        <Row gutter={16}>
+          <Col span={12}>
+            <Card
+              title={<CardTitle>盈利能力对比</CardTitle>}
+              variant="borderless"
+              style={cardStyle}
+              styles={chartCardStyles}
+            >
+              <ReactECharts
+                option={profitabilityChartOption}
+                style={{ height: 280 }}
+                notMerge
+              />
+            </Card>
+          </Col>
+
+          <Col span={12}>
+            <Card
+              title={<CardTitle>成长能力对比</CardTitle>}
+              variant="borderless"
+              style={cardStyle}
+              styles={chartCardStyles}
+            >
+              <ReactECharts
+                option={growthChartOption}
+                style={{ height: 280 }}
+                notMerge
+              />
+            </Card>
+          </Col>
+        </Row>
+      </Space>
+    );
+  };
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose} size="5xl" scrollBehavior="inside">
-      <ModalOverlay />
-      <ModalContent bg={bgColor} borderColor={borderColor} borderWidth="1px">
-        <ModalHeader color={goldColor}>
-          {currentStockInfo?.stock_name} ({currentStock}) vs {compareStockInfo?.stock_name} ({compareStock})
-        </ModalHeader>
-        <ModalCloseButton color={borderColor} />
-        <ModalBody pb={6}>
-          <VStack spacing={6} align="stretch">
-            {/* 对比明细表格 */}
-            <Card bg={bgColor} borderColor={borderColor} borderWidth="1px">
-              <CardHeader pb={2}>
-                <Heading size="sm" color={goldColor}>对比明细</Heading>
-              </CardHeader>
-              <CardBody pt={0}>
-                <TableContainer>
-                  <Table size="sm" variant="unstyled">
-                    <Thead>
-                      <Tr borderBottom="1px solid" borderColor={borderColor}>
-                        <Th color={borderColor} fontSize="xs">指标</Th>
-                        <Th isNumeric color={borderColor} fontSize="xs">{currentStockInfo?.stock_name}</Th>
-                        <Th isNumeric color={borderColor} fontSize="xs">{compareStockInfo?.stock_name}</Th>
-                        <Th isNumeric color={borderColor} fontSize="xs">差异</Th>
-                      </Tr>
-                    </Thead>
-                    <Tbody>
-                      {COMPARE_METRICS.map((metric) => {
-                        const value1 = getValueByPath<number>(currentStockInfo, metric.path);
-                        const value2 = getValueByPath<number>(compareStockInfo, metric.path);
-
-                        let diff: number | null = null;
-                        let diffColor = borderColor;
-
-                        if (value1 !== undefined && value2 !== undefined && value1 !== null && value2 !== null) {
-                          if (metric.format === 'percent') {
-                            diff = value1 - value2;
-                            diffColor = diff > 0 ? positiveColor : negativeColor;
-                          } else if (value2 !== 0) {
-                            diff = ((value1 - value2) / Math.abs(value2)) * 100;
-                            diffColor = diff > 0 ? positiveColor : negativeColor;
-                          }
-                        }
-
-                        return (
-                          <Tr key={metric.key} borderBottom="1px solid" borderColor="whiteAlpha.100">
-                            <Td color={borderColor} fontSize="sm">{metric.label}</Td>
-                            <Td isNumeric color={goldColor} fontSize="sm">
-                              {metric.format === 'percent'
-                                ? formatUtils.formatPercent(value1)
-                                : formatUtils.formatLargeNumber(value1)}
-                            </Td>
-                            <Td isNumeric color={goldColor} fontSize="sm">
-                              {metric.format === 'percent'
-                                ? formatUtils.formatPercent(value2)
-                                : formatUtils.formatLargeNumber(value2)}
-                            </Td>
-                            <Td isNumeric color={diffColor} fontSize="sm">
-                              {diff !== null ? (
-                                <HStack spacing={1} justify="flex-end">
-                                  {diff > 0 && <ArrowUp size={12} />}
-                                  {diff < 0 && <ArrowDown size={12} />}
-                                  <Text>
-                                    {metric.format === 'percent'
-                                      ? `${Math.abs(diff).toFixed(2)}pp`
-                                      : `${Math.abs(diff).toFixed(2)}%`}
-                                  </Text>
-                                </HStack>
-                              ) : (
-                                '-'
-                              )}
-                            </Td>
-                          </Tr>
-                        );
-                      })}
-                    </Tbody>
-                  </Table>
-                </TableContainer>
-              </CardBody>
-            </Card>
-
-            {/* 对比图表 */}
-            <Grid templateColumns="repeat(2, 1fr)" gap={4}>
-              <GridItem>
-                <Card bg={bgColor} borderColor={borderColor} borderWidth="1px">
-                  <CardHeader pb={2}>
-                    <Heading size="sm" color={goldColor}>盈利能力对比</Heading>
-                  </CardHeader>
-                  <CardBody pt={0}>
-                    <ReactECharts
-                      option={getCompareBarChartOption(
-                        '盈利能力对比',
-                        currentStockInfo?.stock_name || '',
-                        compareStockInfo?.stock_name || '',
-                        ['ROE', 'ROA', '毛利率', '净利率'],
-                        [
-                          currentStockInfo?.key_metrics?.roe,
-                          currentStockInfo?.key_metrics?.roa,
-                          currentStockInfo?.key_metrics?.gross_margin,
-                          currentStockInfo?.key_metrics?.net_margin,
-                        ],
-                        [
-                          compareStockInfo?.key_metrics?.roe,
-                          compareStockInfo?.key_metrics?.roa,
-                          compareStockInfo?.key_metrics?.gross_margin,
-                          compareStockInfo?.key_metrics?.net_margin,
-                        ]
-                      )}
-                      style={{ height: '280px' }}
-                    />
-                  </CardBody>
-                </Card>
-              </GridItem>
-
-              <GridItem>
-                <Card bg={bgColor} borderColor={borderColor} borderWidth="1px">
-                  <CardHeader pb={2}>
-                    <Heading size="sm" color={goldColor}>成长能力对比</Heading>
-                  </CardHeader>
-                  <CardBody pt={0}>
-                    <ReactECharts
-                      option={getCompareBarChartOption(
-                        '成长能力对比',
-                        currentStockInfo?.stock_name || '',
-                        compareStockInfo?.stock_name || '',
-                        ['营收增长', '利润增长', '资产增长', '股东权益增长'],
-                        [
-                          currentStockInfo?.growth_rates?.revenue_growth,
-                          currentStockInfo?.growth_rates?.profit_growth,
-                          currentStockInfo?.growth_rates?.asset_growth,
-                          currentStockInfo?.growth_rates?.equity_growth,
-                        ],
-                        [
-                          compareStockInfo?.growth_rates?.revenue_growth,
-                          compareStockInfo?.growth_rates?.profit_growth,
-                          compareStockInfo?.growth_rates?.asset_growth,
-                          compareStockInfo?.growth_rates?.equity_growth,
-                        ]
-                      )}
-                      style={{ height: '280px' }}
-                    />
-                  </CardBody>
-                </Card>
-              </GridItem>
-            </Grid>
-          </VStack>
-        </ModalBody>
-      </ModalContent>
-    </Modal>
+    <ConfigProvider theme={antdDarkTheme}>
+      <Modal
+        open={isOpen}
+        onCancel={onClose}
+        title={modalTitle}
+        footer={null}
+        width={1000}
+        centered
+        destroyOnHidden
+        styles={modalStyles}
+      >
+        {renderContent()}
+      </Modal>
+    </ConfigProvider>
   );
 };
 

src/views/Company/components/StockQuoteCard/components/StockHeader.tsx

@@ -7,7 +7,7 @@
  * - 操作按钮悬停态有玻璃效果
  */
 
-import React, { memo } from 'react';
+import React, { memo, useState } from 'react';
 import { Flex, HStack, Text, Badge, IconButton, Tooltip } from '@chakra-ui/react';
 import { Share2 } from 'lucide-react';
 import FavoriteButton from '@components/FavoriteButton';
@@ -25,8 +25,6 @@ export interface StockHeaderProps {
   industry?: string;
   /** 指数标签（沪深300、中证500等） */
   indexTags?: string[];
-  /** 更新时间 */
-  updateTime?: string;
   // 关注相关
   isInWatchlist?: boolean;
   isWatchlistLoading?: boolean;
@@ -51,7 +49,6 @@ export const StockHeader: React.FC<StockHeaderProps> = memo(({
   industryL1,
   industry,
   indexTags,
-  updateTime,
   isInWatchlist = false,
   isWatchlistLoading = false,
   onWatchlistToggle,
@@ -59,6 +56,17 @@ export const StockHeader: React.FC<StockHeaderProps> = memo(({
   isCompareLoading = false,
   onCompare,
 }) => {
+  // 页面打开时间（组件首次渲染时记录，格式：年月日时分）
+  const [openTime] = useState(() => {
+    const now = new Date();
+    const year = now.getFullYear();
+    const month = (now.getMonth() + 1).toString().padStart(2, '0');
+    const day = now.getDate().toString().padStart(2, '0');
+    const hour = now.getHours().toString().padStart(2, '0');
+    const minute = now.getMinutes().toString().padStart(2, '0');
+    return `${year}-${month}-${day} ${hour}:${minute}`;
+  });
+
   return (
     <Flex justify="space-between" align="center">
       {/* 左侧：股票名称 + 行业标签 + 指数标签 */}
@@ -131,7 +139,7 @@ export const StockHeader: React.FC<StockHeaderProps> = memo(({
           />
         </Tooltip>
         <Text fontSize="13px" color={T.textMuted}>
-          {updateTime?.split(' ')[1] || '--:--'}
+          {openTime}
         </Text>
       </HStack>
     </Flex>

src/views/Company/components/StockQuoteCard/components/theme.ts

@@ -61,6 +61,8 @@ export const DEEP_SPACE_THEME = {
   textSecondary: 'rgba(245, 240, 225, 0.95)',
   // 标签文字（柔和白色）
   textMuted: 'rgba(235, 230, 215, 0.85)',
+  // 占位符文字（低透明度，避免过亮）
+  textPlaceholder: 'rgba(235, 230, 215, 0.45)',
   // 纯白文字
   textWhite: 'rgba(255, 255, 255, 0.98)',
   textWhiteMuted: 'rgba(255, 255, 255, 0.8)',

src/views/Company/components/StockQuoteCard/index.tsx

@@ -14,8 +14,8 @@
  * - MainForceInfo：主力动态
  */
 
-import React, { memo } from 'react';
-import { Box, Flex, VStack, useDisclosure } from '@chakra-ui/react';
+import React, { memo, useCallback } from 'react';
+import { Box, Flex, VStack, useDisclosure, useToast } from '@chakra-ui/react';
 import { CardGlow } from '@components/FUI';
 
 // 子组件导入
@@ -64,6 +64,34 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
     clearCompare();
   };
 
+  // Toast 提示
+  const toast = useToast();
+
+  // 分享功能：复制链接到剪贴板
+  const handleShare = useCallback(async () => {
+    const shareUrl = `https://valuefrontier.cn/company?scode=${stockCode}`;
+
+    try {
+      await navigator.clipboard.writeText(shareUrl);
+      toast({
+        title: '链接已复制',
+        description: '快去分享给好友吧~',
+        status: 'success',
+        duration: 2000,
+        isClosable: true,
+        position: 'top',
+      });
+    } catch (err) {
+      toast({
+        title: '复制失败',
+        description: '请手动复制链接',
+        status: 'error',
+        duration: 2000,
+        position: 'top',
+      });
+    }
+  }, [stockCode, toast]);
+
   // 加载中
   if (isLoading || !quoteData) {
     return <LoadingSkeleton />;
@@ -83,10 +111,10 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
             industryL1={quoteData.industryL1}
             industry={quoteData.industry}
             indexTags={quoteData.indexTags}
-            updateTime={quoteData.updateTime}
             isInWatchlist={isInWatchlist}
             isWatchlistLoading={isWatchlistLoading}
             onWatchlistToggle={onWatchlistToggle}
+            onShare={handleShare}
             isCompareLoading={isCompareLoading}
             onCompare={handleCompare}
           />

src/views/Company/hooks/useCompanyStock.js

@@ -1,91 +0,0 @@
-// src/views/Company/hooks/useCompanyStock.js
-// 股票代码管理 Hook - 处理 URL 参数同步和搜索逻辑
-
-import { useState, useEffect, useCallback } from 'react';
-import { useSearchParams } from 'react-router-dom';
-import { DEFAULT_STOCK_CODE, URL_PARAM_NAME } from '../constants';
-
-/**
- * 股票代码管理 Hook
- *
- * 功能：
- * - 管理当前股票代码状态
- * - 双向同步 URL 参数
- * - 处理搜索输入和提交
- *
- * @param {Object} options - 配置选项
- * @param {string} [options.defaultCode] - 默认股票代码
- * @param {string} [options.paramName] - URL 参数名
- * @param {Function} [options.onStockChange] - 股票代码变化回调 (newCode, prevCode) => void
- * @returns {Object} 股票代码状态和操作方法
- */
-export const useCompanyStock = (options = {}) => {
-  const {
-    defaultCode = DEFAULT_STOCK_CODE,
-    paramName = URL_PARAM_NAME,
-    onStockChange,
-  } = options;
-
-  const [searchParams, setSearchParams] = useSearchParams();
-
-  // 从 URL 参数初始化股票代码
-  const [stockCode, setStockCode] = useState(
-    searchParams.get(paramName) || defaultCode
-  );
-
-  // 输入框状态（默认为空，不显示默认股票代码）
-  const [inputCode, setInputCode] = useState('');
-
-  /**
-   * 监听 URL 参数变化，同步到本地状态
-   * 支持浏览器前进/后退按钮
-   */
-  useEffect(() => {
-    const urlCode = searchParams.get(paramName);
-    if (urlCode && urlCode !== stockCode) {
-      setStockCode(urlCode);
-      setInputCode(urlCode);
-    }
-  }, [searchParams, paramName, stockCode]);
-
-  /**
-   * 执行搜索 - 更新 stockCode 和 URL
-   * @param {string} [code] - 可选，直接传入股票代码（用于下拉选择）
-   */
-  const handleSearch = useCallback((code) => {
-    const trimmedCode = code || inputCode?.trim();
-
-    if (trimmedCode && trimmedCode !== stockCode) {
-      // 触发变化回调（用于追踪）
-      onStockChange?.(trimmedCode, stockCode);
-
-      // 更新状态
-      setStockCode(trimmedCode);
-
-      // 更新 URL 参数
-      setSearchParams({ [paramName]: trimmedCode });
-    }
-  }, [inputCode, stockCode, paramName, setSearchParams, onStockChange]);
-
-  /**
-   * 处理键盘事件 - 回车键触发搜索
-   */
-  const handleKeyDown = useCallback((e) => {
-    if (e.key === 'Enter') {
-      handleSearch();
-    }
-  }, [handleSearch]);
-
-  return {
-    // 状态
-    stockCode,      // 当前确认的股票代码
-    inputCode,      // 输入框中的值（未确认）
-
-    // 操作方法
-    setInputCode,   // 更新输入框
-    handleSearch,   // 执行搜索
-    handleKeyDown,  // 处理回车键（改用 onKeyDown）
-  };
-};
-
-export default useCompanyStock;

src/views/Company/hooks/useCompanyWatchlist.js

@@ -1,166 +0,0 @@
-// src/views/Company/hooks/useCompanyWatchlist.js
-// 自选股管理 Hook - Company 页面专用，复用 Redux stockSlice
-
-import { useEffect, useCallback, useMemo, useRef } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { useToast } from '@chakra-ui/react';
-import { useAuth } from '@contexts/AuthContext';
-import { logger } from '@utils/logger';
-import {
-  loadWatchlist,
-  toggleWatchlist,
-  optimisticAddWatchlist,
-  optimisticRemoveWatchlist
-} from '@store/slices/stockSlice';
-import { TOAST_MESSAGES } from '../constants';
-
-/**
- * Company 页面自选股管理 Hook
- *
- * 功能：
- * - 检查当前股票是否在自选股中
- * - 提供添加/移除自选股功能
- * - 与 Redux stockSlice 同步
- *
- * @param {Object} options - 配置选项
- * @param {string} options.stockCode - 当前股票代码
- * @param {Object} [options.tracking] - 追踪回调
- * @param {Function} [options.tracking.onAdd] - 添加自选时的追踪回调
- * @param {Function} [options.tracking.onRemove] - 移除自选时的追踪回调
- * @returns {Object} 自选股状态和操作方法
- */
-export const useCompanyWatchlist = ({ stockCode, tracking = {} } = {}) => {
-  const dispatch = useDispatch();
-  const toast = useToast();
-  const { isAuthenticated } = useAuth();
-
-  // 从 Redux 获取自选股列表
-  const watchlist = useSelector((state) => state.stock.watchlist);
-  const watchlistLoading = useSelector((state) => state.stock.loading.watchlist);
-
-  // 追踪是否已初始化（防止无限循环）
-  const hasInitializedRef = useRef(false);
-
-  /**
-   * 派生状态：判断当前股票是否在自选股中
-   * 使用 useMemo 避免重复计算
-   */
-  const isInWatchlist = useMemo(() => {
-    if (!stockCode || !Array.isArray(watchlist)) {
-      return false;
-    }
-
-    // 标准化股票代码（提取6位数字）
-    const normalize = (code) => String(code || '').match(/(\d{6})/)?.[1] || '';
-    const targetCode = normalize(stockCode);
-
-    return watchlist.some((item) => normalize(item.stock_code) === targetCode);
-  }, [watchlist, stockCode]);
-
-  /**
-   * 初始化：加载自选股列表
-   * 使用 hasInitializedRef 防止无限循环（用户可能确实没有自选股）
-   */
-  useEffect(() => {
-    if (!hasInitializedRef.current && isAuthenticated && !watchlistLoading) {
-      hasInitializedRef.current = true;
-      dispatch(loadWatchlist());
-    }
-  }, [isAuthenticated, watchlistLoading, dispatch]);
-
-  /**
-   * 切换自选股状态（乐观更新模式）
-   * 1. 立即更新 UI（无 loading）
-   * 2. 后台静默请求 API
-   * 3. 失败时回滚并提示
-   */
-  const toggle = useCallback(async () => {
-    // 参数校验
-    if (!stockCode) {
-      logger.warn('useCompanyWatchlist', 'toggle', '无效的股票代码', { stockCode });
-      toast(TOAST_MESSAGES.INVALID_CODE);
-      return;
-    }
-
-    // 权限校验
-    if (!isAuthenticated) {
-      logger.warn('useCompanyWatchlist', 'toggle', '用户未登录', { stockCode });
-      toast(TOAST_MESSAGES.LOGIN_REQUIRED);
-      return;
-    }
-
-    // 标准化股票代码用于匹配
-    const normalize = (code) => String(code || '').match(/(\d{6})/)?.[1] || '';
-    const targetCode = normalize(stockCode);
-
-    // 从 watchlist 中找到原始 stock_code（保持与后端数据结构一致）
-    const matchedItem = watchlist.find(
-      item => normalize(item.stock_code) === targetCode
-    );
-    // 移除时使用原始 stock_code，添加时使用传入的 stockCode
-    const codeForApi = isInWatchlist ? (matchedItem?.stock_code || stockCode) : stockCode;
-
-    // 保存当前状态用于回滚
-    const wasInWatchlist = isInWatchlist;
-
-    logger.debug('useCompanyWatchlist', '切换自选股（乐观更新）', {
-      stockCode,
-      codeForApi,
-      wasInWatchlist,
-      action: wasInWatchlist ? 'remove' : 'add',
-    });
-
-    // 1. 乐观更新：立即更新 UI（不显示 loading）
-    if (wasInWatchlist) {
-      dispatch(optimisticRemoveWatchlist({ stockCode: codeForApi }));
-    } else {
-      dispatch(optimisticAddWatchlist({ stockCode: codeForApi, stockName: matchedItem?.stock_name || '' }));
-    }
-
-    try {
-      // 2. 后台静默请求 API
-      await dispatch(
-        toggleWatchlist({
-          stockCode: codeForApi,
-          stockName: matchedItem?.stock_name || '',
-          isInWatchlist: wasInWatchlist,
-        })
-      ).unwrap();
-
-      // 3. 成功：触发追踪回调（不显示 toast，状态已更新）
-      if (wasInWatchlist) {
-        tracking.onRemove?.(stockCode);
-      } else {
-        tracking.onAdd?.(stockCode);
-      }
-    } catch (error) {
-      // 4. 失败：回滚状态 + 显示错误提示
-      logger.error('useCompanyWatchlist', 'toggle', error, {
-        stockCode,
-        wasInWatchlist,
-      });
-
-      // 回滚操作
-      if (wasInWatchlist) {
-        // 之前在自选中，乐观删除了，现在要恢复
-        dispatch(optimisticAddWatchlist({ stockCode: codeForApi, stockName: matchedItem?.stock_name || '' }));
-      } else {
-        // 之前不在自选中，乐观添加了，现在要移除
-        dispatch(optimisticRemoveWatchlist({ stockCode: codeForApi }));
-      }
-
-      toast(TOAST_MESSAGES.WATCHLIST_ERROR);
-    }
-  }, [stockCode, isAuthenticated, isInWatchlist, watchlist, dispatch, toast, tracking]);
-
-  return {
-    // 状态
-    isInWatchlist,                          // 是否在自选股中
-    isLoading: watchlistLoading,            // 仅初始加载时显示 loading（乐观更新模式）
-
-    // 操作方法
-    toggle,                                 // 切换自选状态
-  };
-};
-
-export default useCompanyWatchlist;

src/views/Company/theme/antdTheme.ts

@@ -0,0 +1,270 @@
+/**
+ * Company 页面 Ant Design 主题配置
+ *
+ * 与 FUI 主题系统保持一致的 Ant Design ConfigProvider 主题配置
+ *
+ * @example
+ * import { antdDarkTheme, modalStyles, cardStyle } from '@views/Company/theme/antdTheme';
+ *
+ * <ConfigProvider theme={antdDarkTheme}>
+ *   <Modal styles={modalStyles}>...</Modal>
+ * </ConfigProvider>
+ */
+
+import { theme } from 'antd';
+import { FUI_COLORS, FUI_GLOW, FUI_GLASS } from './fui';
+import { alpha, fui } from './utils';
+
+// ============================================
+// Ant Design 深空主题 Token
+// ============================================
+
+export const antdDarkTheme = {
+  algorithm: theme.darkAlgorithm,
+  token: {
+    // 主色调
+    colorPrimary: FUI_COLORS.gold[400],
+    colorPrimaryHover: FUI_COLORS.gold[300],
+    colorPrimaryActive: FUI_COLORS.gold[500],
+
+    // 背景色
+    colorBgBase: FUI_COLORS.bg.deep,
+    colorBgContainer: FUI_COLORS.bg.elevated,
+    colorBgElevated: FUI_COLORS.bg.surface,
+    colorBgLayout: FUI_COLORS.bg.primary,
+    colorBgMask: 'rgba(0, 0, 0, 0.6)',
+
+    // 边框
+    colorBorder: fui.border('default'),
+    colorBorderSecondary: fui.border('subtle'),
+
+    // 文字
+    colorText: FUI_COLORS.text.primary,
+    colorTextSecondary: FUI_COLORS.text.secondary,
+    colorTextTertiary: FUI_COLORS.text.muted,
+    colorTextQuaternary: FUI_COLORS.text.dim,
+    colorTextHeading: FUI_COLORS.gold[400],
+
+    // 链接
+    colorLink: FUI_COLORS.gold[400],
+    colorLinkHover: FUI_COLORS.gold[300],
+    colorLinkActive: FUI_COLORS.gold[500],
+
+    // 成功/错误状态（涨跌色）
+    colorSuccess: FUI_COLORS.status.negative, // 绿色
+    colorError: FUI_COLORS.status.positive, // 红色
+    colorWarning: FUI_COLORS.status.warning,
+    colorInfo: FUI_COLORS.status.info,
+
+    // 圆角
+    borderRadius: 8,
+    borderRadiusLG: 12,
+    borderRadiusSM: 6,
+    borderRadiusXS: 4,
+
+    // 字体
+    fontFamily: 'inherit',
+    fontSize: 14,
+
+    // 间距
+    padding: 16,
+    paddingLG: 24,
+    paddingSM: 12,
+    paddingXS: 8,
+  },
+  components: {
+    // Modal 组件
+    Modal: {
+      headerBg: FUI_COLORS.bg.deep,
+      contentBg: FUI_COLORS.bg.deep,
+      footerBg: FUI_COLORS.bg.deep,
+      titleColor: FUI_COLORS.gold[400],
+      titleFontSize: 18,
+      colorIcon: FUI_COLORS.text.muted,
+      colorIconHover: FUI_COLORS.gold[400],
+    },
+
+    // Table 组件
+    Table: {
+      headerBg: alpha('gold', 0.05),
+      headerColor: FUI_COLORS.text.muted,
+      headerSplitColor: fui.border('subtle'),
+      rowHoverBg: 'rgba(156, 163, 175, 0.15)', // 浅灰色悬停背景
+      rowSelectedBg: alpha('white', 0.12),
+      rowSelectedHoverBg: alpha('white', 0.15),
+      borderColor: fui.border('subtle'),
+      cellFontSize: 13,
+      cellPaddingBlock: 14,
+      cellPaddingInline: 16,
+    },
+
+    // Card 组件
+    Card: {
+      headerBg: 'transparent',
+      colorBgContainer: FUI_COLORS.bg.elevated,
+      colorBorderSecondary: fui.border('default'),
+      paddingLG: 16,
+    },
+
+    // Button 组件
+    Button: {
+      primaryColor: FUI_COLORS.bg.deep,
+      colorPrimaryHover: FUI_COLORS.gold[300],
+      colorPrimaryActive: FUI_COLORS.gold[500],
+      defaultBg: 'transparent',
+      defaultBorderColor: fui.border('default'),
+      defaultColor: FUI_COLORS.text.secondary,
+    },
+
+    // Input 组件
+    Input: {
+      colorBgContainer: FUI_COLORS.bg.primary,
+      colorBorder: fui.border('default'),
+      hoverBorderColor: fui.border('hover'),
+      activeBorderColor: FUI_COLORS.gold[400],
+      activeShadow: FUI_GLOW.gold.sm,
+    },
+
+    // Select 组件
+    Select: {
+      colorBgContainer: FUI_COLORS.bg.primary,
+      colorBorder: fui.border('default'),
+      optionSelectedBg: alpha('gold', 0.15),
+    },
+
+    // Spin 组件
+    Spin: {
+      colorPrimary: FUI_COLORS.gold[400],
+    },
+
+    // Tabs 组件
+    Tabs: {
+      inkBarColor: FUI_COLORS.gold[400],
+      itemActiveColor: FUI_COLORS.gold[400],
+      itemHoverColor: FUI_COLORS.gold[300],
+      itemSelectedColor: FUI_COLORS.gold[400],
+    },
+
+    // Tag 组件
+    Tag: {
+      defaultBg: alpha('gold', 0.1),
+      defaultColor: FUI_COLORS.gold[400],
+    },
+
+    // Tooltip 组件
+    Tooltip: {
+      colorBgSpotlight: FUI_COLORS.bg.surface,
+      colorTextLightSolid: FUI_COLORS.text.primary,
+    },
+
+    // Divider 组件
+    Divider: {
+      colorSplit: fui.border('subtle'),
+    },
+  },
+};
+
+// ============================================
+// 组件样式预设
+// ============================================
+
+/**
+ * Modal 样式配置
+ * 用于 Modal 组件的 styles 属性
+ */
+export const modalStyles = {
+  mask: {
+    backdropFilter: FUI_GLASS.blur.md,
+  },
+  content: {
+    background: FUI_COLORS.bg.deep,
+    border: fui.glassBorder('default'),
+    borderRadius: 16,
+    boxShadow: FUI_GLOW.gold.md,
+  },
+  header: {
+    background: 'transparent',
+    borderBottom: fui.glassBorder('subtle'),
+    padding: '16px 24px',
+  },
+  body: {
+    padding: 24,
+    maxHeight: 'calc(100vh - 200px)',
+    overflowY: 'auto' as const,
+  },
+  footer: {
+    background: 'transparent',
+    borderTop: fui.glassBorder('subtle'),
+    padding: '12px 24px',
+  },
+};
+
+/**
+ * 玻璃卡片样式
+ * 用于 Card 组件的 style 属性
+ */
+export const cardStyle = {
+  background: FUI_COLORS.bg.elevated,
+  border: fui.glassBorder('default'),
+  borderRadius: 12,
+};
+
+/**
+ * Card 内部样式配置
+ * 用于 Card 组件的 styles 属性
+ */
+export const cardStyles = {
+  header: {
+    borderBottom: fui.glassBorder('subtle'),
+    padding: '12px 16px',
+  },
+  body: {
+    padding: 16,
+  },
+};
+
+/**
+ * 图表卡片样式配置
+ */
+export const chartCardStyles = {
+  header: {
+    borderBottom: fui.glassBorder('subtle'),
+    padding: '12px 16px',
+  },
+  body: {
+    padding: 12,
+  },
+};
+
+/**
+ * 表格样式
+ * 用于 Table 组件的 style 属性
+ */
+export const tableStyle = {
+  background: 'transparent',
+};
+
+// ============================================
+// 工具函数
+// ============================================
+
+/**
+ * 创建自定义 Ant Design 主题
+ * 可在基础主题上覆盖特定配置
+ */
+export function createAntdTheme(overrides?: Partial<typeof antdDarkTheme>) {
+  return {
+    ...antdDarkTheme,
+    ...overrides,
+    token: {
+      ...antdDarkTheme.token,
+      ...overrides?.token,
+    },
+    components: {
+      ...antdDarkTheme.components,
+      ...overrides?.components,
+    },
+  };
+}
+
+export default antdDarkTheme;

src/views/Company/theme/index.ts

@@ -5,6 +5,7 @@
  * import { COLORS, GLOW, GLASS } from '@views/Company/theme';
  * import { FUI_COLORS, FUI_THEME } from '@views/Company/theme';
  * import { alpha, fui, chartTheme } from '@views/Company/theme';
+ * import { antdDarkTheme, modalStyles, cardStyle } from '@views/Company/theme';
  */
 
 // 完整主题对象
@@ -18,6 +19,17 @@ export {
   FUI_STYLES,
 } from './fui';
 
+// Ant Design 主题配置
+export {
+  antdDarkTheme,
+  modalStyles,
+  cardStyle,
+  cardStyles,
+  chartCardStyles,
+  tableStyle,
+  createAntdTheme,
+} from './antdTheme';
+
 // 主题组件
 export * from './components';
 

src/views/Landing/index.js

@@ -1,29 +0,0 @@
-// src/views/Landing/index.js
-// Landing 页面 - 使用 iframe 嵌入静态 landing.html
-
-/**
- * Landing 组件
- *
- * 使用 iframe 全屏嵌入 landing.html，保持静态页面的完整功能
- * 同时可以通过 React 路由访问
- */
-export default function Landing() {
-    return (
-        <iframe
-            src="/landing.html"
-            title="价值前沿 - 金融AI舆情分析系统"
-            style={{
-                position: 'fixed',
-                top: 0,
-                left: 0,
-                width: '100%',
-                height: '100%',
-                border: 'none',
-                margin: 0,
-                padding: 0,
-                overflow: 'hidden',
-                zIndex: 9999,
-            }}
-        />
-    );
-}

src/views/Pricing/content.tsx

@@ -1,35 +0,0 @@
-export const pricing = [
-    {
-        title: "STARTER",
-        price: 99,
-        features: [
-            "1 Active Bot",
-            "1,000 Conversations per month",
-            "Web & WhatsApp Integration",
-            "Basic Dashboard & Chat Reports",
-            "Email Support",
-        ],
-    },
-    {
-        title: "PRO",
-        price: 149,
-        features: [
-            "Up to 5 Active Bots",
-            "10,000 Conversations per month",
-            "Multi-Channel (Web, WhatsApp, IG, Telegram)",
-            "Custom Workflows & Automation",
-            "Real-Time Reports & Zapier Integration",
-        ],
-    },
-    {
-        title: "ENTERPRISE",
-        price: 199,
-        features: [
-            "Unlimited Bots & Chats",
-            "Role-Based Access & Team Management",
-            "Integration to CRM & Custom APIs",
-            "Advanced AI Training (LLM/NLP)",
-            "Dedicated Onboarding Team",
-        ],
-    },
-];

src/views/Pricing/index.tsx

@@ -1,129 +0,0 @@
-import { motion } from "framer-motion";
-import Button from "@/components/Button";
-
-import { pricing } from "./content";
-
-const Pricing = () => (
-    <div
-        id="pricing"
-        className="pt-34.5 pb-25 max-2xl:pt-25 max-lg:py-20 max-md:py-15"
-    >
-        <div className="center">
-            <motion.div
-                className="max-w-175 mx-auto mb-17.5 text-center max-xl:mb-14 max-md:mb-8"
-                initial={{ opacity: 0 }}
-                whileInView={{ opacity: 1 }}
-                transition={{ delay: 0.2, duration: 0.7 }}
-                viewport={{ amount: 0.7 }}
-            >
-                <div className="label mb-3 max-md:mb-1.5">Pricing</div>
-                <div className="bg-radial-white-2 bg-clip-text text-transparent text-title-1 max-lg:text-title-2 max-md:text-title-1-mobile">
-                    Start Automation Today
-                </div>
-            </motion.div>
-            <motion.div
-                className="flex gap-4 max-lg:-mx-10 max-lg:px-10 max-lg:overflow-x-auto max-lg:scrollbar-none max-md:-mx-5 max-md:px-5"
-                initial={{ opacity: 0 }}
-                whileInView={{ opacity: 1 }}
-                transition={{ delay: 0.2, duration: 0.7 }}
-                viewport={{ amount: 0.35 }}
-            >
-                {pricing.map((item, index) => (
-                    <div
-                        className={`relative flex flex-col flex-1 rounded-[1.25rem] overflow-hidden after:absolute after:inset-0 after:border after:border-line after:rounded-[1.25rem] after:pointer-events-none max-lg:shrink-0 max-lg:flex-auto max-lg:w-84 ${
-                            item.title === "PRO"
-                                ? "shadow-2 before:absolute before:-top-20 before:left-1/2 before:z-1 before:-translate-x-1/2 before:w-65 before:h-57 before:bg-green/10 before:rounded-full before:blur-[3.375rem]"
-                                : "shadow-[0.0625rem_0.0625rem_0.0625rem_0_rgba(255,255,255,0.10)_inset]"
-                        }`}
-                        key={index}
-                    >
-                        {item.title === "PRO" && (
-                            <div className="absolute -top-36 left-13 w-105 mask-radial-at-center mask-radial-from-20% mask-radial-to-52%">
-                                <video
-                                    className="w-full"
-                                    src="/videos/video-1.mp4"
-                                    autoPlay
-                                    loop
-                                    muted
-                                    playsInline
-                                />
-                            </div>
-                        )}
-                        <div
-                            className={`relative z-2 pt-8 px-8.5 pb-10 text-title-4 max-md:text-title-5 ${
-                                item.title === "PRO"
-                                    ? "bg-[#175673]/20 rounded-t-[1.25rem] text-green"
-                                    : "text-white"
-                            }`}
-                        >
-                            {item.title}
-                        </div>
-                        <div
-                            className={`relative z-3 flex flex-col grow -mt-5 p-3.5 pb-8.25 rounded-[1.25rem] after:absolute after:inset-0 after:border after:border-line after:rounded-[1.25rem] after:pointer-events-none ${
-                                item.title === "PRO"
-                                    ? "backdrop-blur-[2rem] shadow-2 bg-white/7"
-                                    : "backdrop-blur-[1.25rem] bg-white/1"
-                            }`}
-                        >
-                            <div
-                                className={`relative mb-8 p-5 rounded-[0.8125rem] backdrop-blur-[1.25rem] shadow-2 after:absolute after:inset-0 after:border after:border-line after:rounded-[0.8125rem] after:pointer-events-none ${
-                                    item.title === "PRO"
-                                        ? "bg-line"
-                                        : "bg-white/2"
-                                }`}
-                            >
-                                <div className="flex items-end gap-3 mb-4">
-                                    <div className="bg-radial-white-2 bg-clip-text text-transparent text-title-1 leading-[3.1rem] max-xl:text-title-2 max-xl:leading-[2.4rem]">
-                                        ${item.price}
-                                    </div>
-                                    <div className="text-title-5">/Month</div>
-                                </div>
-                                <Button
-                                    className={`w-full bg-line ${
-                                        item.title !== "PRO"
-                                            ? "!text-description hover:!text-white"
-                                            : ""
-                                    }`}
-                                    isPrimary={item.title === "PRO"}
-                                    isSecondary={item.title !== "PRO"}
-                                >
-                                    {item.title === "STARTER"
-                                        ? "Start with Beginner"
-                                        : item.title === "PRO"
-                                        ? "Choose Pro Plan"
-                                        : "Contact for Enterprise"}
-                                </Button>
-                            </div>
-                            <div className="flex flex-col gap-6.5 px-3.5 max-xl:px-0 max-xl:gap-5 max-md:px-3.5">
-                                {item.features.map((feature, index) => (
-                                    <div
-                                        className="flex items-center gap-2.5 text-description max-xl:text-description-2 max-md:text-description-mobile"
-                                        key={index}
-                                    >
-                                        <div className="flex justify-center items-center shrink-0 size-5 bg-green rounded-full shadow-[0.0625rem_0.0625rem_0.0625rem_0_rgba(255,255,255,0.20)_inset,_0_0_0.625rem_0_rgba(255,255,255,0.50)_inset]">
-                                            <svg
-                                                className="size-5 fill-black"
-                                                xmlns="http://www.w3.org/2000/svg"
-                                                width="20"
-                                                height="20"
-                                                viewBox="0 0 20 20"
-                                            >
-                                                <path d="M13.47 6.97A.75.75 0 0 1 14.53 8.03l-5 5a.75.75 0 0 1-1.061 0l-3-3A.75.75 0 0 1 6.53 8.97L9 11.439l4.47-4.469z" />
-                                            </svg>
-                                        </div>
-                                        {feature}
-                                    </div>
-                                ))}
-                            </div>
-                        </div>
-                    </div>
-                ))}
-            </motion.div>
-            <div className="mt-13.5 text-center max-md:mt-8 max-md:text-title-3-mobile">
-                Free 7 Day Trial
-            </div>
-        </div>
-    </div>
-);
-
-export default Pricing;