Merge branch 'feature_bugfix/251201_py_h5_ui' into feature_2025/251209_stock_pref

* feature_bugfix/251201_py_h5_ui:
  feat: Company 页面搜索框添加股票模糊搜索功能
  update pay ui
  update pay ui
  fix: 个股中心bug修复
  update pay ui
  update pay ui
  update pay ui
  update pay ui
  update pay ui
  update pay ui
  update pay ui
  update pay ui
  update pay ui
  update pay ui
  update pay ui
  update pay ui
  update pay ui
  update pay ui
  feat: 替换公众号文件
  update pay ui

src/components/FavoriteButton/index.tsx

@@ -0,0 +1,84 @@
+/**
+ * FavoriteButton - 通用关注/收藏按钮组件（图标按钮）
+ */
+
+import React from 'react';
+import { IconButton, Tooltip, Spinner } from '@chakra-ui/react';
+import { Star } from 'lucide-react';
+
+export interface FavoriteButtonProps {
+  /** 是否已关注 */
+  isFavorite: boolean;
+  /** 加载状态 */
+  isLoading?: boolean;
+  /** 点击回调 */
+  onClick: () => void;
+  /** 按钮大小 */
+  size?: 'sm' | 'md' | 'lg';
+  /** 颜色主题 */
+  colorScheme?: 'gold' | 'default';
+  /** 是否显示 tooltip */
+  showTooltip?: boolean;
+}
+
+// 颜色配置
+const COLORS = {
+  gold: {
+    active: '#F4D03F',    // 已关注 - 亮金色
+    inactive: '#C9A961',  // 未关注 - 暗金色
+    hoverBg: 'whiteAlpha.100',
+  },
+  default: {
+    active: 'yellow.400',
+    inactive: 'gray.400',
+    hoverBg: 'gray.100',
+  },
+};
+
+const FavoriteButton: React.FC<FavoriteButtonProps> = ({
+  isFavorite,
+  isLoading = false,
+  onClick,
+  size = 'sm',
+  colorScheme = 'gold',
+  showTooltip = true,
+}) => {
+  const colors = COLORS[colorScheme];
+  const currentColor = isFavorite ? colors.active : colors.inactive;
+  const label = isFavorite ? '取消关注' : '加入自选';
+
+  const iconButton = (
+    <IconButton
+      aria-label={label}
+      icon={
+        isLoading ? (
+          <Spinner size="sm" color={currentColor} />
+        ) : (
+          <Star
+            size={size === 'sm' ? 18 : size === 'md' ? 20 : 24}
+            fill={isFavorite ? currentColor : 'none'}
+            stroke={currentColor}
+          />
+        )
+      }
+      variant="ghost"
+      color={currentColor}
+      size={size}
+      onClick={onClick}
+      isDisabled={isLoading}
+      _hover={{ bg: colors.hoverBg }}
+    />
+  );
+
+  if (showTooltip) {
+    return (
+      <Tooltip label={label} placement="top">
+        {iconButton}
+      </Tooltip>
+    );
+  }
+
+  return iconButton;
+};
+
+export default FavoriteButton;

src/components/InvestmentCalendar/index.js

@@ -544,19 +544,13 @@ const InvestmentCalendar = () => {
             render: (concepts) => (
                 <Space wrap>
                     {concepts && concepts.length > 0 ? (
-                        concepts.slice(0, 3).map((concept, index) => {
-                            // 兼容多种数据格式：字符串、数组、对象
-                            const conceptName = typeof concept === 'string'
-                                ? concept
-                                : Array.isArray(concept)
-                                    ? concept[0]
-                                    : concept?.concept || concept?.name || '';
-                            return (
-                                <Tag key={index} icon={<TagsOutlined />}>
-                                    {conceptName}
-                                </Tag>
-                            );
-                        })
+                        concepts.slice(0, 3).map((concept, index) => (
+                            <Tag key={index} icon={<TagsOutlined />}>
+                                {typeof concept === 'string'
+                                    ? concept
+                                    : (concept?.concept || concept?.name || '未知')}
+                            </Tag>
+                        ))
                     ) : (
                         <Text type="secondary">无</Text>
                     )}
@@ -948,7 +942,7 @@ const InvestmentCalendar = () => {
                     <Table
                         dataSource={selectedStocks}
                         columns={stockColumns}
-                        rowKey={(record) => record[0]}
+                        rowKey={(record) => record.code}
                         size="middle"
                         pagination={false}
                     />

src/mocks/handlers/company.js

@@ -43,12 +43,10 @@ export const companyHandlers = [
         const { stockCode } = params;
         const data = getCompanyData(stockCode);
 
+        // 直接返回 keyFactorsTimeline 对象（包含 key_factors 和 development_timeline）
         return HttpResponse.json({
             success: true,
-            data: {
-                timeline: data.keyFactorsTimeline,
-                total: data.keyFactorsTimeline.length
-            }
+            data: data.keyFactorsTimeline
         });
     }),
 

src/mocks/handlers/stock.js

@@ -368,6 +368,25 @@ export const stockHandlers = [
                 stockMap[s.code] = s.name;
             });
 
+            // 行业和指数映射表
+            const stockIndustryMap = {
+                '000001': { industry_l1: '金融', industry: '银行', index_tags: ['沪深300', '上证180'] },
+                '600519': { industry_l1: '消费', industry: '白酒', index_tags: ['沪深300', '上证50'] },
+                '300750': { industry_l1: '工业', industry: '电池', index_tags: ['创业板50'] },
+                '601318': { industry_l1: '金融', industry: '保险', index_tags: ['沪深300', '上证50'] },
+                '600036': { industry_l1: '金融', industry: '银行', index_tags: ['沪深300', '上证50'] },
+                '000858': { industry_l1: '消费', industry: '白酒', index_tags: ['沪深300'] },
+                '002594': { industry_l1: '汽车', industry: '乘用车', index_tags: ['沪深300', '创业板指'] },
+            };
+
+            const defaultIndustries = [
+                { industry_l1: '科技', industry: '软件' },
+                { industry_l1: '医药', industry: '化学制药' },
+                { industry_l1: '消费', industry: '食品' },
+                { industry_l1: '金融', industry: '证券' },
+                { industry_l1: '工业', industry: '机械' },
+            ];
+
             // 为每只股票生成报价数据
             const quotesData = {};
             codes.forEach(stockCode => {
@@ -380,6 +399,11 @@ export const stockHandlers = [
                 // 昨收
                 const prevClose = parseFloat((basePrice - change).toFixed(2));
 
+                // 获取行业和指数信息
+                const codeWithoutSuffix = stockCode.replace(/\.(SH|SZ)$/i, '');
+                const industryInfo = stockIndustryMap[codeWithoutSuffix] ||
+                    defaultIndustries[Math.floor(Math.random() * defaultIndustries.length)];
+
                 quotesData[stockCode] = {
                     code: stockCode,
                     name: stockMap[stockCode] || `股票${stockCode}`,
@@ -393,7 +417,11 @@ export const stockHandlers = [
                     volume: Math.floor(Math.random() * 100000000),
                     amount: parseFloat((Math.random() * 10000000000).toFixed(2)),
                     market: stockCode.startsWith('6') ? 'SH' : 'SZ',
-                    update_time: new Date().toISOString()
+                    update_time: new Date().toISOString(),
+                    // 行业和指数标签
+                    industry_l1: industryInfo.industry_l1,
+                    industry: industryInfo.industry,
+                    index_tags: industryInfo.index_tags || []
                 };
             });
 

src/routes/lazy-components.js

@@ -35,9 +35,9 @@ export const lazyComponents = {
 
     // 公司相关模块
     CompanyIndex: React.lazy(() => import('@views/Company')),
-    ForecastReport: React.lazy(() => import('@views/Company/ForecastReport')),
-    FinancialPanorama: React.lazy(() => import('@views/Company/FinancialPanorama')),
-    MarketDataView: React.lazy(() => import('@views/Company/MarketDataView')),
+    ForecastReport: React.lazy(() => import('@views/Company/components/ForecastReport')),
+    FinancialPanorama: React.lazy(() => import('@views/Company/components/FinancialPanorama')),
+    MarketDataView: React.lazy(() => import('@views/Company/components/MarketDataView')),
 
     // Agent模块
     AgentChat: React.lazy(() => import('@views/AgentChat')),

src/store/slices/stockSlice.js

@@ -4,6 +4,56 @@ import { eventService, stockService } from '../../services/eventService';
 import { logger } from '../../utils/logger';
 import { getApiBase } from '../../utils/apiConfig';
 
+// ==================== Watchlist 缓存配置 ====================
+const WATCHLIST_CACHE_KEY = 'watchlist_cache';
+const WATCHLIST_CACHE_DURATION = 7 * 24 * 60 * 60 * 1000; // 7天
+
+/**
+ * 从 localStorage 读取自选股缓存
+ */
+const loadWatchlistFromCache = () => {
+  try {
+    const cached = localStorage.getItem(WATCHLIST_CACHE_KEY);
+    if (!cached) return null;
+
+    const { data, timestamp } = JSON.parse(cached);
+    const now = Date.now();
+
+    // 检查缓存是否过期（7天）
+    if (now - timestamp > WATCHLIST_CACHE_DURATION) {
+      localStorage.removeItem(WATCHLIST_CACHE_KEY);
+      logger.debug('stockSlice', '自选股缓存已过期');
+      return null;
+    }
+
+    logger.debug('stockSlice', '自选股 localStorage 缓存命中', {
+      count: data?.length || 0,
+      age: Math.round((now - timestamp) / 1000 / 60) + '分钟前'
+    });
+    return data;
+  } catch (error) {
+    logger.error('stockSlice', 'loadWatchlistFromCache', error);
+    return null;
+  }
+};
+
+/**
+ * 保存自选股到 localStorage
+ */
+const saveWatchlistToCache = (data) => {
+  try {
+    localStorage.setItem(WATCHLIST_CACHE_KEY, JSON.stringify({
+      data,
+      timestamp: Date.now()
+    }));
+    logger.debug('stockSlice', '自选股已缓存到 localStorage', {
+      count: data?.length || 0
+    });
+  } catch (error) {
+    logger.error('stockSlice', 'saveWatchlistToCache', error);
+  }
+};
+
 // ==================== Async Thunks ====================
 
 /**
@@ -153,13 +203,28 @@ export const fetchExpectationScore = createAsyncThunk(
 
 /**
  * 加载用户自选股列表（包含完整信息）
+ * 缓存策略：Redux 内存缓存 → localStorage 持久缓存（7天） → API 请求
  */
 export const loadWatchlist = createAsyncThunk(
   'stock/loadWatchlist',
-  async () => {
+  async (_, { getState }) => {
     logger.debug('stockSlice', 'loadWatchlist');
 
     try {
+      // 1. 先检查 Redux 内存缓存
+      const reduxCached = getState().stock.watchlist;
+      if (reduxCached && reduxCached.length > 0) {
+        logger.debug('stockSlice', 'Redux watchlist 缓存命中', { count: reduxCached.length });
+        return reduxCached;
+      }
+
+      // 2. 再检查 localStorage 持久缓存（7天有效期）
+      const localCached = loadWatchlistFromCache();
+      if (localCached && localCached.length > 0) {
+        return localCached;
+      }
+
+      // 3. 缓存无效，调用 API
       const apiBase = getApiBase();
       const response = await fetch(`${apiBase}/api/account/watchlist`, {
         credentials: 'include'
@@ -172,6 +237,10 @@ export const loadWatchlist = createAsyncThunk(
           stock_code: item.stock_code,
           stock_name: item.stock_name,
         }));
+
+        // 保存到 localStorage 缓存
+        saveWatchlistToCache(watchlistData);
+
         logger.debug('stockSlice', '自选股列表加载成功', {
           count: watchlistData.length
         });
@@ -340,6 +409,26 @@ const stockSlice = createSlice({
       delete state.historicalEventsCache[eventId];
       delete state.chainAnalysisCache[eventId];
       delete state.expectationScores[eventId];
+    },
+
+    /**
+     * 乐观更新：添加自选股（同步）
+     */
+    optimisticAddWatchlist: (state, action) => {
+      const { stockCode, stockName } = action.payload;
+      // 避免重复添加
+      const exists = state.watchlist.some(item => item.stock_code === stockCode);
+      if (!exists) {
+        state.watchlist.push({ stock_code: stockCode, stock_name: stockName || '' });
+      }
+    },
+
+    /**
+     * 乐观更新：移除自选股（同步）
+     */
+    optimisticRemoveWatchlist: (state, action) => {
+      const { stockCode } = action.payload;
+      state.watchlist = state.watchlist.filter(item => item.stock_code !== stockCode);
     }
   },
   extraReducers: (builder) => {
@@ -470,9 +559,10 @@ const stockSlice = createSlice({
           state.watchlist = state.watchlist.filter(item => item.stock_code !== stockCode);
         }
       })
-      // fulfilled: 乐观更新模式下状态已在 pending 更新，这里无需操作
-      .addCase(toggleWatchlist.fulfilled, () => {
-        // 状态已在 pending 时更新
+      // fulfilled: 同步更新 localStorage 缓存
+      .addCase(toggleWatchlist.fulfilled, (state) => {
+        // 状态已在 pending 时更新，这里同步到 localStorage
+        saveWatchlistToCache(state.watchlist);
       });
   }
 });
@@ -481,7 +571,9 @@ export const {
   updateQuote,
   updateQuotes,
   clearQuotes,
-  clearEventCache
+  clearEventCache,
+  optimisticAddWatchlist,
+  optimisticRemoveWatchlist
 } = stockSlice.actions;
 
 export default stockSlice.reducer;

src/views/Company/components/CompanyHeader/SearchBar.js

@@ -0,0 +1,155 @@
+// src/views/Company/components/CompanyHeader/SearchBar.js
+// 股票搜索栏组件 - 金色主题 + 模糊搜索下拉
+
+import React, { useState, useEffect, useRef } from 'react';
+import { useSelector } from 'react-redux';
+import {
+  Box,
+  HStack,
+  Input,
+  InputGroup,
+  InputLeftElement,
+  Text,
+  VStack,
+} from '@chakra-ui/react';
+import { SearchIcon } from '@chakra-ui/icons';
+
+/**
+ * 股票搜索栏组件（带模糊搜索下拉）
+ *
+ * @param {Object} props
+ * @param {string} props.inputCode - 输入框当前值
+ * @param {Function} props.onInputChange - 输入变化回调
+ * @param {Function} props.onSearch - 搜索按钮点击回调
+ * @param {Function} props.onKeyDown - 键盘事件回调
+ */
+const SearchBar = ({
+  inputCode,
+  onInputChange,
+  onSearch,
+  onKeyDown,
+}) => {
+  // 下拉状态
+  const [showDropdown, setShowDropdown] = useState(false);
+  const [filteredStocks, setFilteredStocks] = useState([]);
+  const containerRef = useRef(null);
+
+  // 从 Redux 获取全部股票列表
+  const allStocks = useSelector(state => state.stock.allStocks);
+
+  // 模糊搜索过滤
+  useEffect(() => {
+    if (inputCode && inputCode.trim()) {
+      const searchTerm = inputCode.trim().toLowerCase();
+      const filtered = allStocks.filter(stock =>
+        stock.code.toLowerCase().includes(searchTerm) ||
+        stock.name.includes(inputCode.trim())
+      ).slice(0, 10); // 限制显示10条
+      setFilteredStocks(filtered);
+      setShowDropdown(filtered.length > 0);
+    } else {
+      setFilteredStocks([]);
+      setShowDropdown(false);
+    }
+  }, [inputCode, allStocks]);
+
+  // 点击外部关闭下拉
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setShowDropdown(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  // 选择股票 - 直接触发搜索跳转
+  const handleSelectStock = (stock) => {
+    onInputChange(stock.code);
+    setShowDropdown(false);
+    onSearch(stock.code);
+  };
+
+  // 处理键盘事件
+  const handleKeyDownWrapper = (e) => {
+    if (e.key === 'Enter') {
+      setShowDropdown(false);
+    }
+    onKeyDown?.(e);
+  };
+
+  return (
+    <Box ref={containerRef} position="relative" w="300px">
+      <InputGroup size="lg">
+        <InputLeftElement pointerEvents="none">
+          <SearchIcon color="#C9A961" />
+        </InputLeftElement>
+        <Input
+          placeholder="输入股票代码或名称"
+          value={inputCode}
+          onChange={(e) => onInputChange(e.target.value)}
+          onKeyDown={handleKeyDownWrapper}
+          onFocus={() => inputCode && filteredStocks.length > 0 && setShowDropdown(true)}
+          borderRadius="md"
+          color="white"
+          borderColor="#C9A961"
+          _placeholder={{ color: '#C9A961' }}
+          _focus={{
+            borderColor: '#F4D03F',
+            boxShadow: '0 0 0 1px #F4D03F',
+          }}
+          _hover={{
+            borderColor: '#F4D03F',
+          }}
+        />
+      </InputGroup>
+
+      {/* 模糊搜索下拉列表 */}
+      {showDropdown && (
+        <Box
+          position="absolute"
+          top="100%"
+          left={0}
+          mt={1}
+          w="100%"
+          bg="#1A202C"
+          border="1px solid #C9A961"
+          borderRadius="md"
+          maxH="300px"
+          overflowY="auto"
+          zIndex={1000}
+          boxShadow="0 4px 12px rgba(0, 0, 0, 0.3)"
+        >
+          <VStack align="stretch" spacing={0}>
+            {filteredStocks.map((stock) => (
+              <Box
+                key={stock.code}
+                px={4}
+                py={2}
+                cursor="pointer"
+                _hover={{ bg: 'whiteAlpha.100' }}
+                onClick={() => handleSelectStock(stock)}
+                borderBottom="1px solid"
+                borderColor="whiteAlpha.100"
+                _last={{ borderBottom: 'none' }}
+              >
+                <HStack justify="space-between">
+                  <Text color="#F4D03F" fontWeight="bold" fontSize="sm">
+                    {stock.code}
+                  </Text>
+                  <Text color="#C9A961" fontSize="sm" noOfLines={1} maxW="180px">
+                    {stock.name}
+                  </Text>
+                </HStack>
+              </Box>
+            ))}
+          </VStack>
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+export default SearchBar;

src/views/Company/components/CompanyHeader/index.js

@@ -0,0 +1,62 @@
+// src/views/Company/components/CompanyHeader/index.js
+// 公司详情页面头部区域组件
+
+import React from 'react';
+import {
+  Card,
+  CardBody,
+  HStack,
+  VStack,
+  Heading,
+  Text,
+} from '@chakra-ui/react';
+
+import SearchBar from './SearchBar';
+
+/**
+ * 公司详情页面头部区域组件
+ *
+ * 包含：
+ * - 页面标题和描述（金色主题）
+ * - 股票搜索栏（支持模糊搜索）
+ *
+ * @param {Object} props
+ * @param {string} props.inputCode - 搜索输入框值
+ * @param {Function} props.onInputChange - 输入变化回调
+ * @param {Function} props.onSearch - 搜索回调
+ * @param {Function} props.onKeyDown - 键盘事件回调
+ * @param {string} props.bgColor - 背景颜色
+ */
+const CompanyHeader = ({
+  inputCode,
+  onInputChange,
+  onSearch,
+  onKeyDown,
+  bgColor,
+}) => {
+  return (
+    <Card bg={bgColor} shadow="md">
+      <CardBody>
+        <HStack justify="space-between" align="center">
+          {/* 标题区域 - 金色主题 */}
+          <VStack align="start" spacing={1}>
+            <Heading size="lg" color="#F4D03F">个股详情</Heading>
+            <Text color="#C9A961" fontSize="sm">
+              查看股票实时行情、财务数据和盈利预测
+            </Text>
+          </VStack>
+
+          {/* 搜索栏 */}
+          <SearchBar
+            inputCode={inputCode}
+            onInputChange={onInputChange}
+            onSearch={onSearch}
+            onKeyDown={onKeyDown}
+          />
+        </HStack>
+      </CardBody>
+    </Card>
+  );
+};
+
+export default CompanyHeader;

src/views/Company/components/CompanyOverview/BasicInfoTab.js

@@ -0,0 +1,994 @@
+// src/views/Company/components/CompanyOverview/BasicInfoTab.js
+// 基本信息 Tab - 股权结构、管理团队、公司公告、分支机构、工商信息
+// 懒加载优化：使用 isLazy + 独立 Hooks，点击 Tab 时才加载对应数据
+
+import React from "react";
+import {
+  Box,
+  VStack,
+  HStack,
+  Text,
+  Heading,
+  Badge,
+  Icon,
+  Card,
+  CardBody,
+  CardHeader,
+  SimpleGrid,
+  Avatar,
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+  TableContainer,
+  Tag,
+  Tooltip,
+  Divider,
+  Center,
+  Code,
+  Tabs,
+  TabList,
+  TabPanels,
+  Tab,
+  TabPanel,
+  Stat,
+  StatLabel,
+  StatNumber,
+  StatHelpText,
+  IconButton,
+  Button,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalCloseButton,
+  ModalBody,
+  ModalFooter,
+  useDisclosure,
+  Spinner,
+} from "@chakra-ui/react";
+
+// 懒加载 Hooks
+import { useShareholderData } from "./hooks/useShareholderData";
+import { useManagementData } from "./hooks/useManagementData";
+import { useAnnouncementsData } from "./hooks/useAnnouncementsData";
+import { useBranchesData } from "./hooks/useBranchesData";
+import { useDisclosureData } from "./hooks/useDisclosureData";
+import { ExternalLinkIcon } from "@chakra-ui/icons";
+import {
+  FaShareAlt,
+  FaUserTie,
+  FaBullhorn,
+  FaSitemap,
+  FaInfoCircle,
+  FaCrown,
+  FaChartPie,
+  FaUsers,
+  FaChartLine,
+  FaArrowUp,
+  FaArrowDown,
+  FaChartBar,
+  FaBuilding,
+  FaGlobe,
+  FaShieldAlt,
+  FaBriefcase,
+  FaCircle,
+  FaEye,
+  FaVenusMars,
+  FaGraduationCap,
+  FaPassport,
+  FaCalendarAlt,
+} from "react-icons/fa";
+
+// 格式化工具函数
+const formatUtils = {
+  formatPercentage: (value) => {
+    if (value === null || value === undefined) return "-";
+    return `${(value * 100).toFixed(2)}%`;
+  },
+  formatNumber: (value) => {
+    if (value === null || value === undefined) return "-";
+    if (value >= 100000000) {
+      return `${(value / 100000000).toFixed(2)}亿`;
+    } else if (value >= 10000) {
+      return `${(value / 10000).toFixed(2)}万`;
+    }
+    return value.toLocaleString();
+  },
+  formatShares: (value) => {
+    if (value === null || value === undefined) return "-";
+    if (value >= 100000000) {
+      return `${(value / 100000000).toFixed(2)}亿股`;
+    } else if (value >= 10000) {
+      return `${(value / 10000).toFixed(2)}万股`;
+    }
+    return `${value.toLocaleString()}股`;
+  },
+  formatDate: (dateStr) => {
+    if (!dateStr) return "-";
+    return dateStr.split("T")[0];
+  },
+};
+
+// 股东类型标签组件
+const ShareholderTypeBadge = ({ type }) => {
+  const typeConfig = {
+    基金: { color: "blue", icon: FaChartBar },
+    个人: { color: "green", icon: FaUserTie },
+    法人: { color: "purple", icon: FaBuilding },
+    QFII: { color: "orange", icon: FaGlobe },
+    社保: { color: "red", icon: FaShieldAlt },
+    保险: { color: "teal", icon: FaShieldAlt },
+    信托: { color: "cyan", icon: FaBriefcase },
+    券商: { color: "pink", icon: FaChartLine },
+  };
+
+  const config = Object.entries(typeConfig).find(([key]) =>
+    type?.includes(key)
+  )?.[1] || { color: "gray", icon: FaCircle };
+
+  return (
+    <Badge colorScheme={config.color} size="sm">
+      <Icon as={config.icon} mr={1} boxSize={3} />
+      {type}
+    </Badge>
+  );
+};
+
+// ============================================
+// 懒加载 TabPanel 子组件
+// 每个子组件独立调用 Hook，配合 isLazy 实现真正的懒加载
+// ============================================
+
+/**
+ * 股权结构 Tab Panel - 懒加载子组件
+ */
+const ShareholderTabPanel = ({ stockCode }) => {
+  const {
+    actualControl,
+    concentration,
+    topShareholders,
+    topCirculationShareholders,
+    loading,
+  } = useShareholderData(stockCode);
+
+  // 计算股权集中度变化
+  const getConcentrationTrend = () => {
+    const grouped = {};
+    concentration.forEach((item) => {
+      if (!grouped[item.end_date]) {
+        grouped[item.end_date] = {};
+      }
+      grouped[item.end_date][item.stat_item] = item;
+    });
+    return Object.entries(grouped)
+      .sort((a, b) => b[0].localeCompare(a[0]))
+      .slice(0, 5);
+  };
+
+  if (loading) {
+    return (
+      <Center h="200px">
+        <VStack>
+          <Spinner size="lg" color="blue.500" />
+          <Text fontSize="sm" color="gray.500">
+            加载股权结构数据...
+          </Text>
+        </VStack>
+      </Center>
+    );
+  }
+
+  return (
+    <VStack spacing={6} align="stretch">
+      {actualControl.length > 0 && (
+        <Box>
+          <HStack mb={4}>
+            <Icon as={FaCrown} color="gold" boxSize={5} />
+            <Heading size="sm">实际控制人</Heading>
+          </HStack>
+          <Card variant="outline">
+            <CardBody>
+              <HStack justify="space-between">
+                <VStack align="start">
+                  <Text fontWeight="bold" fontSize="lg">
+                    {actualControl[0].actual_controller_name}
+                  </Text>
+                  <HStack>
+                    <Badge colorScheme="purple">
+                      {actualControl[0].control_type}
+                    </Badge>
+                    <Text fontSize="sm" color="gray.500">
+                      截至 {formatUtils.formatDate(actualControl[0].end_date)}
+                    </Text>
+                  </HStack>
+                </VStack>
+                <Stat textAlign="right">
+                  <StatLabel>控制比例</StatLabel>
+                  <StatNumber color="purple.500">
+                    {formatUtils.formatPercentage(actualControl[0].holding_ratio)}
+                  </StatNumber>
+                  <StatHelpText>
+                    {formatUtils.formatShares(actualControl[0].holding_shares)}
+                  </StatHelpText>
+                </Stat>
+              </HStack>
+            </CardBody>
+          </Card>
+        </Box>
+      )}
+
+      {concentration.length > 0 && (
+        <Box>
+          <HStack mb={4}>
+            <Icon as={FaChartPie} color="blue.500" boxSize={5} />
+            <Heading size="sm">股权集中度</Heading>
+          </HStack>
+          <SimpleGrid columns={{ base: 1, md: 2 }} spacing={4}>
+            {getConcentrationTrend()
+              .slice(0, 1)
+              .map(([date, items]) => (
+                <Card key={date} variant="outline">
+                  <CardHeader pb={2}>
+                    <Text fontSize="sm" color="gray.500">
+                      {formatUtils.formatDate(date)}
+                    </Text>
+                  </CardHeader>
+                  <CardBody pt={2}>
+                    <VStack spacing={3} align="stretch">
+                      {Object.entries(items).map(([key, item]) => (
+                        <HStack key={key} justify="space-between">
+                          <Text fontSize="sm">{item.stat_item}</Text>
+                          <HStack>
+                            <Text fontWeight="bold" color="blue.500">
+                              {formatUtils.formatPercentage(item.holding_ratio)}
+                            </Text>
+                            {item.ratio_change && (
+                              <Badge
+                                colorScheme={
+                                  item.ratio_change > 0 ? "red" : "green"
+                                }
+                              >
+                                <Icon
+                                  as={
+                                    item.ratio_change > 0 ? FaArrowUp : FaArrowDown
+                                  }
+                                  mr={1}
+                                  boxSize={3}
+                                />
+                                {Math.abs(item.ratio_change).toFixed(2)}%
+                              </Badge>
+                            )}
+                          </HStack>
+                        </HStack>
+                      ))}
+                    </VStack>
+                  </CardBody>
+                </Card>
+              ))}
+          </SimpleGrid>
+        </Box>
+      )}
+
+      {topShareholders.length > 0 && (
+        <Box>
+          <HStack mb={4}>
+            <Icon as={FaUsers} color="green.500" boxSize={5} />
+            <Heading size="sm">十大股东</Heading>
+            <Badge>
+              {formatUtils.formatDate(topShareholders[0].end_date)}
+            </Badge>
+          </HStack>
+          <TableContainer>
+            <Table size="sm" variant="striped">
+              <Thead>
+                <Tr>
+                  <Th>排名</Th>
+                  <Th>股东名称</Th>
+                  <Th>股东类型</Th>
+                  <Th isNumeric>持股数量</Th>
+                  <Th isNumeric>持股比例</Th>
+                  <Th>股份性质</Th>
+                </Tr>
+              </Thead>
+              <Tbody>
+                {topShareholders.slice(0, 10).map((shareholder, idx) => (
+                  <Tr key={idx}>
+                    <Td>
+                      <Badge colorScheme={idx < 3 ? "red" : "gray"}>
+                        {shareholder.shareholder_rank}
+                      </Badge>
+                    </Td>
+                    <Td>
+                      <Tooltip label={shareholder.shareholder_name}>
+                        <Text noOfLines={1} maxW="200px">
+                          {shareholder.shareholder_name}
+                        </Text>
+                      </Tooltip>
+                    </Td>
+                    <Td>
+                      <ShareholderTypeBadge type={shareholder.shareholder_type} />
+                    </Td>
+                    <Td isNumeric fontWeight="medium">
+                      {formatUtils.formatShares(shareholder.holding_shares)}
+                    </Td>
+                    <Td isNumeric>
+                      <Text color="blue.500" fontWeight="bold">
+                        {formatUtils.formatPercentage(
+                          shareholder.total_share_ratio
+                        )}
+                      </Text>
+                    </Td>
+                    <Td>
+                      <Badge size="sm" variant="outline">
+                        {shareholder.share_nature || "流通股"}
+                      </Badge>
+                    </Td>
+                  </Tr>
+                ))}
+              </Tbody>
+            </Table>
+          </TableContainer>
+        </Box>
+      )}
+
+      {topCirculationShareholders.length > 0 && (
+        <Box>
+          <HStack mb={4}>
+            <Icon as={FaChartLine} color="purple.500" boxSize={5} />
+            <Heading size="sm">十大流通股东</Heading>
+            <Badge>
+              {formatUtils.formatDate(topCirculationShareholders[0].end_date)}
+            </Badge>
+          </HStack>
+          <TableContainer>
+            <Table size="sm" variant="striped">
+              <Thead>
+                <Tr>
+                  <Th>排名</Th>
+                  <Th>股东名称</Th>
+                  <Th>股东类型</Th>
+                  <Th isNumeric>持股数量</Th>
+                  <Th isNumeric>流通股比例</Th>
+                </Tr>
+              </Thead>
+              <Tbody>
+                {topCirculationShareholders.slice(0, 10).map((shareholder, idx) => (
+                  <Tr key={idx}>
+                    <Td>
+                      <Badge colorScheme={idx < 3 ? "orange" : "gray"}>
+                        {shareholder.shareholder_rank}
+                      </Badge>
+                    </Td>
+                    <Td>
+                      <Tooltip label={shareholder.shareholder_name}>
+                        <Text noOfLines={1} maxW="250px">
+                          {shareholder.shareholder_name}
+                        </Text>
+                      </Tooltip>
+                    </Td>
+                    <Td>
+                      <ShareholderTypeBadge type={shareholder.shareholder_type} />
+                    </Td>
+                    <Td isNumeric fontWeight="medium">
+                      {formatUtils.formatShares(shareholder.holding_shares)}
+                    </Td>
+                    <Td isNumeric>
+                      <Text color="purple.500" fontWeight="bold">
+                        {formatUtils.formatPercentage(
+                          shareholder.circulation_share_ratio
+                        )}
+                      </Text>
+                    </Td>
+                  </Tr>
+                ))}
+              </Tbody>
+            </Table>
+          </TableContainer>
+        </Box>
+      )}
+    </VStack>
+  );
+};
+
+/**
+ * 管理团队 Tab Panel - 懒加载子组件
+ */
+const ManagementTabPanel = ({ stockCode }) => {
+  const { management, loading } = useManagementData(stockCode);
+
+  // 管理层职位分类
+  const getManagementByCategory = () => {
+    const categories = {
+      高管: [],
+      董事: [],
+      监事: [],
+      其他: [],
+    };
+
+    management.forEach((person) => {
+      if (
+        person.position_category === "高管" ||
+        person.position_name?.includes("总")
+      ) {
+        categories["高管"].push(person);
+      } else if (
+        person.position_category === "董事" ||
+        person.position_name?.includes("董事")
+      ) {
+        categories["董事"].push(person);
+      } else if (
+        person.position_category === "监事" ||
+        person.position_name?.includes("监事")
+      ) {
+        categories["监事"].push(person);
+      } else {
+        categories["其他"].push(person);
+      }
+    });
+
+    return categories;
+  };
+
+  if (loading) {
+    return (
+      <Center h="200px">
+        <VStack>
+          <Spinner size="lg" color="blue.500" />
+          <Text fontSize="sm" color="gray.500">
+            加载管理团队数据...
+          </Text>
+        </VStack>
+      </Center>
+    );
+  }
+
+  return (
+    <VStack spacing={6} align="stretch">
+      {Object.entries(getManagementByCategory()).map(
+        ([category, people]) =>
+          people.length > 0 && (
+            <Box key={category}>
+              <HStack mb={4}>
+                <Icon
+                  as={
+                    category === "高管"
+                      ? FaUserTie
+                      : category === "董事"
+                      ? FaCrown
+                      : category === "监事"
+                      ? FaEye
+                      : FaUsers
+                  }
+                  color={
+                    category === "高管"
+                      ? "blue.500"
+                      : category === "董事"
+                      ? "purple.500"
+                      : category === "监事"
+                      ? "green.500"
+                      : "gray.500"
+                  }
+                  boxSize={5}
+                />
+                <Heading size="sm">{category}</Heading>
+                <Badge>{people.length}人</Badge>
+              </HStack>
+
+              <SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} spacing={4}>
+                {people.map((person, idx) => (
+                  <Card key={idx} variant="outline" size="sm">
+                    <CardBody>
+                      <HStack spacing={3} align="start">
+                        <Avatar
+                          name={person.name}
+                          size="md"
+                          bg={
+                            category === "高管"
+                              ? "blue.500"
+                              : category === "董事"
+                              ? "purple.500"
+                              : category === "监事"
+                              ? "green.500"
+                              : "gray.500"
+                          }
+                        />
+                        <VStack align="start" spacing={1} flex={1}>
+                          <HStack>
+                            <Text fontWeight="bold">{person.name}</Text>
+                            {person.gender && (
+                              <Icon
+                                as={FaVenusMars}
+                                color={
+                                  person.gender === "男"
+                                    ? "blue.400"
+                                    : "pink.400"
+                                }
+                                boxSize={3}
+                              />
+                            )}
+                          </HStack>
+                          <Text fontSize="sm" color="blue.600">
+                            {person.position_name}
+                          </Text>
+                          <HStack spacing={2} flexWrap="wrap">
+                            {person.education && (
+                              <Tag size="sm" variant="subtle">
+                                <Icon as={FaGraduationCap} mr={1} boxSize={3} />
+                                {person.education}
+                              </Tag>
+                            )}
+                            {person.birth_year && (
+                              <Tag size="sm" variant="subtle">
+                                {new Date().getFullYear() -
+                                  parseInt(person.birth_year)}
+                                岁
+                              </Tag>
+                            )}
+                            {person.nationality &&
+                              person.nationality !== "中国" && (
+                                <Tag size="sm" colorScheme="orange">
+                                  <Icon as={FaPassport} mr={1} boxSize={3} />
+                                  {person.nationality}
+                                </Tag>
+                              )}
+                          </HStack>
+                          <Text fontSize="xs" color="gray.500">
+                            任职日期：{formatUtils.formatDate(person.start_date)}
+                          </Text>
+                        </VStack>
+                      </HStack>
+                    </CardBody>
+                  </Card>
+                ))}
+              </SimpleGrid>
+            </Box>
+          )
+      )}
+    </VStack>
+  );
+};
+
+/**
+ * 公司公告 Tab Panel - 懒加载子组件
+ */
+const AnnouncementsTabPanel = ({ stockCode }) => {
+  const { announcements, loading: announcementsLoading } =
+    useAnnouncementsData(stockCode);
+  const { disclosureSchedule, loading: disclosureLoading } =
+    useDisclosureData(stockCode);
+
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [selectedAnnouncement, setSelectedAnnouncement] = React.useState(null);
+
+  const handleAnnouncementClick = (announcement) => {
+    setSelectedAnnouncement(announcement);
+    onOpen();
+  };
+
+  const loading = announcementsLoading || disclosureLoading;
+
+  if (loading) {
+    return (
+      <Center h="200px">
+        <VStack>
+          <Spinner size="lg" color="blue.500" />
+          <Text fontSize="sm" color="gray.500">
+            加载公告数据...
+          </Text>
+        </VStack>
+      </Center>
+    );
+  }
+
+  return (
+    <>
+      <VStack spacing={4} align="stretch">
+        {disclosureSchedule.length > 0 && (
+          <Box>
+            <HStack mb={3}>
+              <Icon as={FaCalendarAlt} color="orange.500" />
+              <Text fontWeight="bold">财报披露日程</Text>
+            </HStack>
+            <SimpleGrid columns={{ base: 2, md: 4 }} spacing={3}>
+              {disclosureSchedule.slice(0, 4).map((schedule, idx) => (
+                <Card
+                  key={idx}
+                  variant="outline"
+                  size="sm"
+                  bg={schedule.is_disclosed ? "green.50" : "orange.50"}
+                >
+                  <CardBody p={3}>
+                    <VStack spacing={1}>
+                      <Badge
+                        colorScheme={schedule.is_disclosed ? "green" : "orange"}
+                      >
+                        {schedule.report_name}
+                      </Badge>
+                      <Text fontSize="sm" fontWeight="bold">
+                        {schedule.is_disclosed ? "已披露" : "预计"}
+                      </Text>
+                      <Text fontSize="xs">
+                        {formatUtils.formatDate(
+                          schedule.is_disclosed
+                            ? schedule.actual_date
+                            : schedule.latest_scheduled_date
+                        )}
+                      </Text>
+                    </VStack>
+                  </CardBody>
+                </Card>
+              ))}
+            </SimpleGrid>
+          </Box>
+        )}
+
+        <Divider />
+
+        <Box>
+          <HStack mb={3}>
+            <Icon as={FaBullhorn} color="blue.500" />
+            <Text fontWeight="bold">最新公告</Text>
+          </HStack>
+          <VStack spacing={2} align="stretch">
+            {announcements.map((announcement, idx) => (
+              <Card
+                key={idx}
+                variant="outline"
+                size="sm"
+                cursor="pointer"
+                onClick={() => handleAnnouncementClick(announcement)}
+                _hover={{ bg: "gray.50" }}
+              >
+                <CardBody p={3}>
+                  <HStack justify="space-between">
+                    <VStack align="start" spacing={1} flex={1}>
+                      <HStack>
+                        <Badge size="sm" colorScheme="blue">
+                          {announcement.info_type || "公告"}
+                        </Badge>
+                        <Text fontSize="xs" color="gray.500">
+                          {formatUtils.formatDate(announcement.announce_date)}
+                        </Text>
+                      </HStack>
+                      <Text fontSize="sm" fontWeight="medium" noOfLines={1}>
+                        {announcement.title}
+                      </Text>
+                    </VStack>
+                    <HStack>
+                      {announcement.format && (
+                        <Tag size="sm" variant="subtle">
+                          {announcement.format}
+                        </Tag>
+                      )}
+                      <IconButton
+                        size="sm"
+                        icon={<ExternalLinkIcon />}
+                        variant="ghost"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          window.open(announcement.url, "_blank");
+                        }}
+                      />
+                    </HStack>
+                  </HStack>
+                </CardBody>
+              </Card>
+            ))}
+          </VStack>
+        </Box>
+      </VStack>
+
+      {/* 公告详情模态框 */}
+      <Modal isOpen={isOpen} onClose={onClose} size="xl">
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>
+            <VStack align="start" spacing={1}>
+              <Text>{selectedAnnouncement?.title}</Text>
+              <HStack>
+                <Badge colorScheme="blue">
+                  {selectedAnnouncement?.info_type || "公告"}
+                </Badge>
+                <Text fontSize="sm" color="gray.500">
+                  {formatUtils.formatDate(selectedAnnouncement?.announce_date)}
+                </Text>
+              </HStack>
+            </VStack>
+          </ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <VStack align="start" spacing={3}>
+              <Text fontSize="sm">
+                文件格式：{selectedAnnouncement?.format || "-"}
+              </Text>
+              <Text fontSize="sm">
+                文件大小：{selectedAnnouncement?.file_size || "-"} KB
+              </Text>
+            </VStack>
+          </ModalBody>
+          <ModalFooter>
+            <Button
+              colorScheme="blue"
+              mr={3}
+              onClick={() => window.open(selectedAnnouncement?.url, "_blank")}
+            >
+              查看原文
+            </Button>
+            <Button variant="ghost" onClick={onClose}>
+              关闭
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};
+
+/**
+ * 分支机构 Tab Panel - 懒加载子组件
+ */
+const BranchesTabPanel = ({ stockCode }) => {
+  const { branches, loading } = useBranchesData(stockCode);
+
+  if (loading) {
+    return (
+      <Center h="200px">
+        <VStack>
+          <Spinner size="lg" color="blue.500" />
+          <Text fontSize="sm" color="gray.500">
+            加载分支机构数据...
+          </Text>
+        </VStack>
+      </Center>
+    );
+  }
+
+  if (branches.length === 0) {
+    return (
+      <Center h="200px">
+        <VStack>
+          <Icon as={FaSitemap} boxSize={12} color="gray.300" />
+          <Text color="gray.500">暂无分支机构信息</Text>
+        </VStack>
+      </Center>
+    );
+  }
+
+  return (
+    <SimpleGrid columns={{ base: 1, md: 2 }} spacing={4}>
+      {branches.map((branch, idx) => (
+        <Card key={idx} variant="outline">
+          <CardBody>
+            <VStack align="start" spacing={3}>
+              <HStack justify="space-between" w="full">
+                <Text fontWeight="bold">{branch.branch_name}</Text>
+                <Badge
+                  colorScheme={
+                    branch.business_status === "存续" ? "green" : "red"
+                  }
+                >
+                  {branch.business_status}
+                </Badge>
+              </HStack>
+
+              <SimpleGrid columns={2} spacing={2} w="full">
+                <VStack align="start" spacing={1}>
+                  <Text fontSize="xs" color="gray.500">
+                    注册资本
+                  </Text>
+                  <Text fontSize="sm" fontWeight="medium">
+                    {branch.register_capital || "-"}
+                  </Text>
+                </VStack>
+                <VStack align="start" spacing={1}>
+                  <Text fontSize="xs" color="gray.500">
+                    法人代表
+                  </Text>
+                  <Text fontSize="sm" fontWeight="medium">
+                    {branch.legal_person || "-"}
+                  </Text>
+                </VStack>
+                <VStack align="start" spacing={1}>
+                  <Text fontSize="xs" color="gray.500">
+                    成立日期
+                  </Text>
+                  <Text fontSize="sm" fontWeight="medium">
+                    {formatUtils.formatDate(branch.register_date)}
+                  </Text>
+                </VStack>
+                <VStack align="start" spacing={1}>
+                  <Text fontSize="xs" color="gray.500">
+                    关联企业
+                  </Text>
+                  <Text fontSize="sm" fontWeight="medium">
+                    {branch.related_company_count || 0} 家
+                  </Text>
+                </VStack>
+              </SimpleGrid>
+            </VStack>
+          </CardBody>
+        </Card>
+      ))}
+    </SimpleGrid>
+  );
+};
+
+/**
+ * 工商信息 Tab Panel - 使用父组件传入的 basicInfo
+ */
+const BusinessInfoTabPanel = ({ basicInfo }) => {
+  if (!basicInfo) {
+    return (
+      <Center h="200px">
+        <Text color="gray.500">暂无工商信息</Text>
+      </Center>
+    );
+  }
+
+  return (
+    <VStack spacing={4} align="stretch">
+      <SimpleGrid columns={{ base: 1, md: 2 }} spacing={6}>
+        <Box>
+          <Heading size="sm" mb={3}>
+            工商信息
+          </Heading>
+          <VStack align="start" spacing={2}>
+            <HStack w="full">
+              <Text fontSize="sm" color="gray.600" minW="80px">
+                统一信用代码
+              </Text>
+              <Code fontSize="xs">{basicInfo.credit_code}</Code>
+            </HStack>
+            <HStack w="full">
+              <Text fontSize="sm" color="gray.600" minW="80px">
+                公司规模
+              </Text>
+              <Text fontSize="sm">{basicInfo.company_size}</Text>
+            </HStack>
+            <HStack w="full">
+              <Text fontSize="sm" color="gray.600" minW="80px">
+                注册地址
+              </Text>
+              <Text fontSize="sm" noOfLines={2}>
+                {basicInfo.reg_address}
+              </Text>
+            </HStack>
+            <HStack w="full">
+              <Text fontSize="sm" color="gray.600" minW="80px">
+                办公地址
+              </Text>
+              <Text fontSize="sm" noOfLines={2}>
+                {basicInfo.office_address}
+              </Text>
+            </HStack>
+          </VStack>
+        </Box>
+
+        <Box>
+          <Heading size="sm" mb={3}>
+            服务机构
+          </Heading>
+          <VStack align="start" spacing={2}>
+            <Box>
+              <Text fontSize="sm" color="gray.600">
+                会计师事务所
+              </Text>
+              <Text fontSize="sm" fontWeight="medium">
+                {basicInfo.accounting_firm}
+              </Text>
+            </Box>
+            <Box>
+              <Text fontSize="sm" color="gray.600">
+                律师事务所
+              </Text>
+              <Text fontSize="sm" fontWeight="medium">
+                {basicInfo.law_firm}
+              </Text>
+            </Box>
+          </VStack>
+        </Box>
+      </SimpleGrid>
+
+      <Divider />
+
+      <Box>
+        <Heading size="sm" mb={3}>
+          主营业务
+        </Heading>
+        <Text fontSize="sm" lineHeight="tall">
+          {basicInfo.main_business}
+        </Text>
+      </Box>
+
+      <Box>
+        <Heading size="sm" mb={3}>
+          经营范围
+        </Heading>
+        <Text fontSize="sm" lineHeight="tall" color="gray.700">
+          {basicInfo.business_scope}
+        </Text>
+      </Box>
+    </VStack>
+  );
+};
+
+// ============================================
+// 主组件
+// ============================================
+
+/**
+ * 基本信息 Tab 组件（懒加载版本）
+ *
+ * Props:
+ * - stockCode: 股票代码（用于懒加载数据）
+ * - basicInfo: 公司基本信息（从父组件传入，用于工商信息 Tab）
+ * - cardBg: 卡片背景色
+ *
+ * 懒加载策略：
+ * - 使用 Chakra UI Tabs 的 isLazy 属性
+ * - 每个 TabPanel 使用独立子组件，在首次激活时才渲染并加载数据
+ */
+const BasicInfoTab = ({ stockCode, basicInfo, cardBg }) => {
+  return (
+    <Card bg={cardBg} shadow="md">
+      <CardBody>
+        <Tabs isLazy variant="enclosed" colorScheme="blue">
+          <TabList flexWrap="wrap">
+            <Tab>
+              <Icon as={FaShareAlt} mr={2} />
+              股权结构
+            </Tab>
+            <Tab>
+              <Icon as={FaUserTie} mr={2} />
+              管理团队
+            </Tab>
+            <Tab>
+              <Icon as={FaBullhorn} mr={2} />
+              公司公告
+            </Tab>
+            <Tab>
+              <Icon as={FaSitemap} mr={2} />
+              分支机构
+            </Tab>
+            <Tab>
+              <Icon as={FaInfoCircle} mr={2} />
+              工商信息
+            </Tab>
+          </TabList>
+
+          <TabPanels>
+            {/* 股权结构 - 懒加载 */}
+            <TabPanel>
+              <ShareholderTabPanel stockCode={stockCode} />
+            </TabPanel>
+
+            {/* 管理团队 - 懒加载 */}
+            <TabPanel>
+              <ManagementTabPanel stockCode={stockCode} />
+            </TabPanel>
+
+            {/* 公司公告 - 懒加载 */}
+            <TabPanel>
+              <AnnouncementsTabPanel stockCode={stockCode} />
+            </TabPanel>
+
+            {/* 分支机构 - 懒加载 */}
+            <TabPanel>
+              <BranchesTabPanel stockCode={stockCode} />
+            </TabPanel>
+
+            {/* 工商信息 - 使用父组件传入的 basicInfo */}
+            <TabPanel>
+              <BusinessInfoTabPanel basicInfo={basicInfo} />
+            </TabPanel>
+          </TabPanels>
+        </Tabs>
+      </CardBody>
+    </Card>
+  );
+};
+
+export default BasicInfoTab;

src/views/Company/components/CompanyOverview/CompanyHeaderCard.tsx

@@ -0,0 +1,167 @@
+// src/views/Company/components/CompanyOverview/CompanyHeaderCard.tsx
+// 公司头部信息卡片组件
+
+import React from "react";
+import {
+  VStack,
+  HStack,
+  Text,
+  Badge,
+  Card,
+  CardBody,
+  Heading,
+  SimpleGrid,
+  Divider,
+  Icon,
+  Grid,
+  GridItem,
+  Stat,
+  StatLabel,
+  StatNumber,
+  Circle,
+  Link,
+} from "@chakra-ui/react";
+import {
+  FaBuilding,
+  FaMapMarkerAlt,
+  FaUserShield,
+  FaBriefcase,
+  FaCalendarAlt,
+  FaGlobe,
+  FaEnvelope,
+  FaPhone,
+  FaCrown,
+} from "react-icons/fa";
+import { ExternalLinkIcon } from "@chakra-ui/icons";
+
+import type { CompanyHeaderCardProps } from "./types";
+import { formatRegisteredCapital, formatDate } from "./utils";
+
+/**
+ * 公司头部信息卡片组件
+ */
+const CompanyHeaderCard: React.FC<CompanyHeaderCardProps> = ({ basicInfo }) => {
+  return (
+    <Card
+      bg="white"
+      shadow="lg"
+      borderTop="4px solid"
+      borderTopColor="blue.500"
+    >
+      <CardBody>
+        <Grid templateColumns="repeat(12, 1fr)" gap={6}>
+          {/* 左侧：公司基本信息 */}
+          <GridItem colSpan={{ base: 12, lg: 8 }}>
+            <VStack align="start" spacing={4}>
+              {/* 公司名称和代码 */}
+              <HStack spacing={4}>
+                <Circle size="60px" bg="blue.500">
+                  <Icon as={FaBuilding} color="white" boxSize={8} />
+                </Circle>
+                <VStack align="start" spacing={1}>
+                  <HStack>
+                    <Heading size="lg" color="blue.600">
+                      {basicInfo.ORGNAME || basicInfo.SECNAME}
+                    </Heading>
+                    <Badge colorScheme="blue" fontSize="md" px={2} py={1}>
+                      {basicInfo.SECCODE}
+                    </Badge>
+                  </HStack>
+                  <HStack spacing={2}>
+                    <Badge colorScheme="purple" fontSize="xs">
+                      {basicInfo.sw_industry_l1}
+                    </Badge>
+                    <Badge colorScheme="orange" fontSize="xs">
+                      {basicInfo.sw_industry_l2}
+                    </Badge>
+                    {basicInfo.sw_industry_l3 && (
+                      <Badge colorScheme="green" fontSize="xs">
+                        {basicInfo.sw_industry_l3}
+                      </Badge>
+                    )}
+                  </HStack>
+                </VStack>
+              </HStack>
+
+              <Divider />
+
+              {/* 管理层信息 */}
+              <SimpleGrid columns={{ base: 1, md: 2 }} spacing={3} w="full">
+                <HStack>
+                  <Icon as={FaUserShield} color="gray.500" boxSize={4} />
+                  <Text fontSize="sm">
+                    <Text as="span" color="gray.500">法定代表人：</Text>
+                    <Text as="span" fontWeight="bold">{basicInfo.legal_representative}</Text>
+                  </Text>
+                </HStack>
+                <HStack>
+                  <Icon as={FaCrown} color="gray.500" boxSize={4} />
+                  <Text fontSize="sm">
+                    <Text as="span" color="gray.500">董事长：</Text>
+                    <Text as="span" fontWeight="bold">{basicInfo.chairman}</Text>
+                  </Text>
+                </HStack>
+                <HStack>
+                  <Icon as={FaBriefcase} color="gray.500" boxSize={4} />
+                  <Text fontSize="sm">
+                    <Text as="span" color="gray.500">总经理：</Text>
+                    <Text as="span" fontWeight="bold">{basicInfo.general_manager}</Text>
+                  </Text>
+                </HStack>
+                <HStack>
+                  <Icon as={FaCalendarAlt} color="gray.500" boxSize={4} />
+                  <Text fontSize="sm">
+                    <Text as="span" color="gray.500">成立日期：</Text>
+                    <Text as="span" fontWeight="bold">{formatDate(basicInfo.establish_date)}</Text>
+                  </Text>
+                </HStack>
+              </SimpleGrid>
+
+              {/* 公司简介 */}
+              <Text fontSize="sm" color="gray.600" noOfLines={2}>
+                {basicInfo.company_intro}
+              </Text>
+            </VStack>
+          </GridItem>
+
+          {/* 右侧：注册资本和联系方式 */}
+          <GridItem colSpan={{ base: 12, lg: 4 }}>
+            <VStack spacing={3} align="stretch">
+              <Stat>
+                <StatLabel>注册资本</StatLabel>
+                <StatNumber fontSize="2xl" color="blue.500">
+                  {formatRegisteredCapital(basicInfo.reg_capital)}
+                </StatNumber>
+              </Stat>
+
+              <Divider />
+
+              <VStack align="stretch" spacing={1}>
+                <HStack fontSize="sm">
+                  <Icon as={FaMapMarkerAlt} color="gray.500" boxSize={3} />
+                  <Text noOfLines={1}>{basicInfo.province} {basicInfo.city}</Text>
+                </HStack>
+                <HStack fontSize="sm">
+                  <Icon as={FaGlobe} color="gray.500" boxSize={3} />
+                  <Link href={basicInfo.website} isExternal color="blue.500" noOfLines={1}>
+                    {basicInfo.website} <ExternalLinkIcon mx="2px" />
+                  </Link>
+                </HStack>
+                <HStack fontSize="sm">
+                  <Icon as={FaEnvelope} color="gray.500" boxSize={3} />
+                  <Text noOfLines={1}>{basicInfo.email}</Text>
+                </HStack>
+                <HStack fontSize="sm">
+                  <Icon as={FaPhone} color="gray.500" boxSize={3} />
+                  <Text>{basicInfo.tel}</Text>
+                </HStack>
+              </VStack>
+            </VStack>
+          </GridItem>
+        </Grid>
+      </CardBody>
+    </Card>
+  );
+};
+
+export default CompanyHeaderCard;

src/views/Company/components/CompanyOverview/NewsEventsTab.js

@@ -0,0 +1,537 @@
+// src/views/Company/components/CompanyOverview/NewsEventsTab.js
+// 新闻动态 Tab - 相关新闻事件列表 + 分页
+
+import React from "react";
+import {
+  Box,
+  VStack,
+  HStack,
+  Text,
+  Badge,
+  Icon,
+  Card,
+  CardBody,
+  Button,
+  Input,
+  InputGroup,
+  InputLeftElement,
+  Tag,
+  Center,
+  Spinner,
+} from "@chakra-ui/react";
+import { SearchIcon } from "@chakra-ui/icons";
+import {
+  FaNewspaper,
+  FaBullhorn,
+  FaGavel,
+  FaFlask,
+  FaDollarSign,
+  FaShieldAlt,
+  FaFileAlt,
+  FaIndustry,
+  FaEye,
+  FaFire,
+  FaChartLine,
+  FaChevronLeft,
+  FaChevronRight,
+} from "react-icons/fa";
+
+/**
+ * 新闻动态 Tab 组件
+ *
+ * Props:
+ * - newsEvents: 新闻事件列表数组
+ * - newsLoading: 加载状态
+ * - newsPagination: 分页信息 { page, per_page, total, pages, has_next, has_prev }
+ * - searchQuery: 搜索关键词
+ * - onSearchChange: 搜索输入回调 (value) => void
+ * - onSearch: 搜索提交回调 () => void
+ * - onPageChange: 分页回调 (page) => void
+ * - cardBg: 卡片背景色
+ */
+const NewsEventsTab = ({
+  newsEvents = [],
+  newsLoading = false,
+  newsPagination = {
+    page: 1,
+    per_page: 10,
+    total: 0,
+    pages: 0,
+    has_next: false,
+    has_prev: false,
+  },
+  searchQuery = "",
+  onSearchChange,
+  onSearch,
+  onPageChange,
+  cardBg,
+}) => {
+  // 事件类型图标映射
+  const getEventTypeIcon = (eventType) => {
+    const iconMap = {
+      企业公告: FaBullhorn,
+      政策: FaGavel,
+      技术突破: FaFlask,
+      企业融资: FaDollarSign,
+      政策监管: FaShieldAlt,
+      政策动态: FaFileAlt,
+      行业事件: FaIndustry,
+    };
+    return iconMap[eventType] || FaNewspaper;
+  };
+
+  // 重要性颜色映射
+  const getImportanceColor = (importance) => {
+    const colorMap = {
+      S: "red",
+      A: "orange",
+      B: "yellow",
+      C: "green",
+    };
+    return colorMap[importance] || "gray";
+  };
+
+  // 处理搜索输入
+  const handleInputChange = (e) => {
+    onSearchChange?.(e.target.value);
+  };
+
+  // 处理搜索提交
+  const handleSearchSubmit = () => {
+    onSearch?.();
+  };
+
+  // 处理键盘事件
+  const handleKeyPress = (e) => {
+    if (e.key === "Enter") {
+      handleSearchSubmit();
+    }
+  };
+
+  // 处理分页
+  const handlePageChange = (page) => {
+    onPageChange?.(page);
+    // 滚动到列表顶部
+    document
+      .getElementById("news-list-top")
+      ?.scrollIntoView({ behavior: "smooth" });
+  };
+
+  // 渲染分页按钮
+  const renderPaginationButtons = () => {
+    const { page: currentPage, pages: totalPages } = newsPagination;
+    const pageButtons = [];
+
+    // 显示当前页及前后各2页
+    let startPage = Math.max(1, currentPage - 2);
+    let endPage = Math.min(totalPages, currentPage + 2);
+
+    // 如果开始页大于1，显示省略号
+    if (startPage > 1) {
+      pageButtons.push(
+        <Text key="start-ellipsis" fontSize="sm" color="gray.400">
+          ...
+        </Text>
+      );
+    }
+
+    for (let i = startPage; i <= endPage; i++) {
+      pageButtons.push(
+        <Button
+          key={i}
+          size="sm"
+          variant={i === currentPage ? "solid" : "outline"}
+          colorScheme={i === currentPage ? "blue" : "gray"}
+          onClick={() => handlePageChange(i)}
+          isDisabled={newsLoading}
+        >
+          {i}
+        </Button>
+      );
+    }
+
+    // 如果结束页小于总页数，显示省略号
+    if (endPage < totalPages) {
+      pageButtons.push(
+        <Text key="end-ellipsis" fontSize="sm" color="gray.400">
+          ...
+        </Text>
+      );
+    }
+
+    return pageButtons;
+  };
+
+  return (
+    <VStack spacing={4} align="stretch">
+      <Card bg={cardBg} shadow="md">
+        <CardBody>
+          <VStack spacing={4} align="stretch">
+            {/* 搜索框和统计信息 */}
+            <HStack justify="space-between" flexWrap="wrap">
+              <HStack flex={1} minW="300px">
+                <InputGroup>
+                  <InputLeftElement pointerEvents="none">
+                    <SearchIcon color="gray.400" />
+                  </InputLeftElement>
+                  <Input
+                    placeholder="搜索相关新闻..."
+                    value={searchQuery}
+                    onChange={handleInputChange}
+                    onKeyPress={handleKeyPress}
+                  />
+                </InputGroup>
+                <Button
+                  colorScheme="blue"
+                  onClick={handleSearchSubmit}
+                  isLoading={newsLoading}
+                  minW="80px"
+                >
+                  搜索
+                </Button>
+              </HStack>
+
+              {newsPagination.total > 0 && (
+                <HStack spacing={2}>
+                  <Icon as={FaNewspaper} color="blue.500" />
+                  <Text fontSize="sm" color="gray.600">
+                    共找到{" "}
+                    <Text as="span" fontWeight="bold" color="blue.600">
+                      {newsPagination.total}
+                    </Text>{" "}
+                    条新闻
+                  </Text>
+                </HStack>
+              )}
+            </HStack>
+
+            <div id="news-list-top" />
+
+            {/* 新闻列表 */}
+            {newsLoading ? (
+              <Center h="400px">
+                <VStack spacing={3}>
+                  <Spinner size="xl" color="blue.500" thickness="4px" />
+                  <Text color="gray.600">正在加载新闻...</Text>
+                </VStack>
+              </Center>
+            ) : newsEvents.length > 0 ? (
+              <>
+                <VStack spacing={3} align="stretch">
+                  {newsEvents.map((event, idx) => {
+                    const importanceColor = getImportanceColor(
+                      event.importance
+                    );
+                    const eventTypeIcon = getEventTypeIcon(event.event_type);
+
+                    return (
+                      <Card
+                        key={event.id || idx}
+                        variant="outline"
+                        _hover={{
+                          bg: "gray.50",
+                          shadow: "md",
+                          borderColor: "blue.300",
+                        }}
+                        transition="all 0.2s"
+                      >
+                        <CardBody p={4}>
+                          <VStack align="stretch" spacing={3}>
+                            {/* 标题栏 */}
+                            <HStack justify="space-between" align="start">
+                              <VStack align="start" spacing={2} flex={1}>
+                                <HStack>
+                                  <Icon
+                                    as={eventTypeIcon}
+                                    color="blue.500"
+                                    boxSize={5}
+                                  />
+                                  <Text
+                                    fontWeight="bold"
+                                    fontSize="lg"
+                                    lineHeight="1.3"
+                                  >
+                                    {event.title}
+                                  </Text>
+                                </HStack>
+
+                                {/* 标签栏 */}
+                                <HStack spacing={2} flexWrap="wrap">
+                                  {event.importance && (
+                                    <Badge
+                                      colorScheme={importanceColor}
+                                      variant="solid"
+                                      px={2}
+                                    >
+                                      {event.importance}级
+                                    </Badge>
+                                  )}
+                                  {event.event_type && (
+                                    <Badge colorScheme="blue" variant="outline">
+                                      {event.event_type}
+                                    </Badge>
+                                  )}
+                                  {event.invest_score && (
+                                    <Badge
+                                      colorScheme="purple"
+                                      variant="subtle"
+                                    >
+                                      投资分: {event.invest_score}
+                                    </Badge>
+                                  )}
+                                  {event.keywords && event.keywords.length > 0 && (
+                                    <>
+                                      {event.keywords
+                                        .slice(0, 4)
+                                        .map((keyword, kidx) => (
+                                          <Tag
+                                            key={kidx}
+                                            size="sm"
+                                            colorScheme="cyan"
+                                            variant="subtle"
+                                          >
+                                            {typeof keyword === "string"
+                                              ? keyword
+                                              : keyword?.concept ||
+                                                keyword?.name ||
+                                                "未知"}
+                                          </Tag>
+                                        ))}
+                                    </>
+                                  )}
+                                </HStack>
+                              </VStack>
+
+                              {/* 右侧信息栏 */}
+                              <VStack align="end" spacing={1} minW="100px">
+                                <Text fontSize="xs" color="gray.500">
+                                  {event.created_at
+                                    ? new Date(
+                                        event.created_at
+                                      ).toLocaleDateString("zh-CN", {
+                                        year: "numeric",
+                                        month: "2-digit",
+                                        day: "2-digit",
+                                      })
+                                    : ""}
+                                </Text>
+                                <HStack spacing={3}>
+                                  {event.view_count !== undefined && (
+                                    <HStack spacing={1}>
+                                      <Icon
+                                        as={FaEye}
+                                        boxSize={3}
+                                        color="gray.400"
+                                      />
+                                      <Text fontSize="xs" color="gray.500">
+                                        {event.view_count}
+                                      </Text>
+                                    </HStack>
+                                  )}
+                                  {event.hot_score !== undefined && (
+                                    <HStack spacing={1}>
+                                      <Icon
+                                        as={FaFire}
+                                        boxSize={3}
+                                        color="orange.400"
+                                      />
+                                      <Text fontSize="xs" color="gray.500">
+                                        {event.hot_score.toFixed(1)}
+                                      </Text>
+                                    </HStack>
+                                  )}
+                                </HStack>
+                                {event.creator && (
+                                  <Text fontSize="xs" color="gray.400">
+                                    @{event.creator.username}
+                                  </Text>
+                                )}
+                              </VStack>
+                            </HStack>
+
+                            {/* 描述 */}
+                            {event.description && (
+                              <Text
+                                fontSize="sm"
+                                color="gray.700"
+                                lineHeight="1.6"
+                              >
+                                {event.description}
+                              </Text>
+                            )}
+
+                            {/* 收益率数据 */}
+                            {(event.related_avg_chg !== null ||
+                              event.related_max_chg !== null ||
+                              event.related_week_chg !== null) && (
+                              <Box
+                                pt={2}
+                                borderTop="1px"
+                                borderColor="gray.200"
+                              >
+                                <HStack spacing={6} flexWrap="wrap">
+                                  <HStack spacing={1}>
+                                    <Icon
+                                      as={FaChartLine}
+                                      boxSize={3}
+                                      color="gray.500"
+                                    />
+                                    <Text
+                                      fontSize="xs"
+                                      color="gray.500"
+                                      fontWeight="medium"
+                                    >
+                                      相关涨跌:
+                                    </Text>
+                                  </HStack>
+                                  {event.related_avg_chg !== null &&
+                                    event.related_avg_chg !== undefined && (
+                                      <HStack spacing={1}>
+                                        <Text fontSize="xs" color="gray.500">
+                                          平均
+                                        </Text>
+                                        <Text
+                                          fontSize="sm"
+                                          fontWeight="bold"
+                                          color={
+                                            event.related_avg_chg > 0
+                                              ? "red.500"
+                                              : "green.500"
+                                          }
+                                        >
+                                          {event.related_avg_chg > 0 ? "+" : ""}
+                                          {event.related_avg_chg.toFixed(2)}%
+                                        </Text>
+                                      </HStack>
+                                    )}
+                                  {event.related_max_chg !== null &&
+                                    event.related_max_chg !== undefined && (
+                                      <HStack spacing={1}>
+                                        <Text fontSize="xs" color="gray.500">
+                                          最大
+                                        </Text>
+                                        <Text
+                                          fontSize="sm"
+                                          fontWeight="bold"
+                                          color={
+                                            event.related_max_chg > 0
+                                              ? "red.500"
+                                              : "green.500"
+                                          }
+                                        >
+                                          {event.related_max_chg > 0 ? "+" : ""}
+                                          {event.related_max_chg.toFixed(2)}%
+                                        </Text>
+                                      </HStack>
+                                    )}
+                                  {event.related_week_chg !== null &&
+                                    event.related_week_chg !== undefined && (
+                                      <HStack spacing={1}>
+                                        <Text fontSize="xs" color="gray.500">
+                                          周
+                                        </Text>
+                                        <Text
+                                          fontSize="sm"
+                                          fontWeight="bold"
+                                          color={
+                                            event.related_week_chg > 0
+                                              ? "red.500"
+                                              : "green.500"
+                                          }
+                                        >
+                                          {event.related_week_chg > 0
+                                            ? "+"
+                                            : ""}
+                                          {event.related_week_chg.toFixed(2)}%
+                                        </Text>
+                                      </HStack>
+                                    )}
+                                </HStack>
+                              </Box>
+                            )}
+                          </VStack>
+                        </CardBody>
+                      </Card>
+                    );
+                  })}
+                </VStack>
+
+                {/* 分页控件 */}
+                {newsPagination.pages > 1 && (
+                  <Box pt={4}>
+                    <HStack
+                      justify="space-between"
+                      align="center"
+                      flexWrap="wrap"
+                    >
+                      {/* 分页信息 */}
+                      <Text fontSize="sm" color="gray.600">
+                        第 {newsPagination.page} / {newsPagination.pages} 页
+                      </Text>
+
+                      {/* 分页按钮 */}
+                      <HStack spacing={2}>
+                        <Button
+                          size="sm"
+                          onClick={() => handlePageChange(1)}
+                          isDisabled={!newsPagination.has_prev || newsLoading}
+                          leftIcon={<Icon as={FaChevronLeft} />}
+                        >
+                          首页
+                        </Button>
+                        <Button
+                          size="sm"
+                          onClick={() =>
+                            handlePageChange(newsPagination.page - 1)
+                          }
+                          isDisabled={!newsPagination.has_prev || newsLoading}
+                        >
+                          上一页
+                        </Button>
+
+                        {/* 页码按钮 */}
+                        {renderPaginationButtons()}
+
+                        <Button
+                          size="sm"
+                          onClick={() =>
+                            handlePageChange(newsPagination.page + 1)
+                          }
+                          isDisabled={!newsPagination.has_next || newsLoading}
+                        >
+                          下一页
+                        </Button>
+                        <Button
+                          size="sm"
+                          onClick={() => handlePageChange(newsPagination.pages)}
+                          isDisabled={!newsPagination.has_next || newsLoading}
+                          rightIcon={<Icon as={FaChevronRight} />}
+                        >
+                          末页
+                        </Button>
+                      </HStack>
+                    </HStack>
+                  </Box>
+                )}
+              </>
+            ) : (
+              <Center h="400px">
+                <VStack spacing={3}>
+                  <Icon as={FaNewspaper} boxSize={16} color="gray.300" />
+                  <Text color="gray.500" fontSize="lg" fontWeight="medium">
+                    暂无相关新闻
+                  </Text>
+                  <Text fontSize="sm" color="gray.400">
+                    {searchQuery ? "尝试修改搜索关键词" : "该公司暂无新闻动态"}
+                  </Text>
+                </VStack>
+              </Center>
+            )}
+          </VStack>
+        </CardBody>
+      </Card>
+    </VStack>
+  );
+};
+
+export default NewsEventsTab;

src/views/Company/components/CompanyOverview/hooks/useAnnouncementsData.ts

@@ -0,0 +1,61 @@
+// src/views/Company/components/CompanyOverview/hooks/useAnnouncementsData.ts
+// 公告数据 Hook - 用于公司公告 Tab
+
+import { useState, useEffect, useCallback } from "react";
+import { logger } from "@utils/logger";
+import { getApiBase } from "@utils/apiConfig";
+import type { Announcement } from "../types";
+
+const API_BASE_URL = getApiBase();
+
+interface ApiResponse<T> {
+  success: boolean;
+  data: T;
+}
+
+interface UseAnnouncementsDataResult {
+  announcements: Announcement[];
+  loading: boolean;
+  error: string | null;
+}
+
+/**
+ * 公告数据 Hook
+ * @param stockCode - 股票代码
+ */
+export const useAnnouncementsData = (stockCode?: string): UseAnnouncementsDataResult => {
+  const [announcements, setAnnouncements] = useState<Announcement[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const loadData = useCallback(async () => {
+    if (!stockCode) return;
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const response = await fetch(
+        `${API_BASE_URL}/api/stock/${stockCode}/announcements?limit=20`
+      );
+      const result = (await response.json()) as ApiResponse<Announcement[]>;
+
+      if (result.success) {
+        setAnnouncements(result.data);
+      } else {
+        setError("加载公告数据失败");
+      }
+    } catch (err) {
+      logger.error("useAnnouncementsData", "loadData", err, { stockCode });
+      setError("网络请求失败");
+    } finally {
+      setLoading(false);
+    }
+  }, [stockCode]);
+
+  useEffect(() => {
+    loadData();
+  }, [loadData]);
+
+  return { announcements, loading, error };
+};

src/views/Company/components/CompanyOverview/hooks/useBasicInfo.ts

@@ -0,0 +1,59 @@
+// src/views/Company/components/CompanyOverview/hooks/useBasicInfo.ts
+// 公司基本信息 Hook - 用于 CompanyHeaderCard
+
+import { useState, useEffect, useCallback } from "react";
+import { logger } from "@utils/logger";
+import { getApiBase } from "@utils/apiConfig";
+import type { BasicInfo } from "../types";
+
+const API_BASE_URL = getApiBase();
+
+interface ApiResponse<T> {
+  success: boolean;
+  data: T;
+}
+
+interface UseBasicInfoResult {
+  basicInfo: BasicInfo | null;
+  loading: boolean;
+  error: string | null;
+}
+
+/**
+ * 公司基本信息 Hook
+ * @param stockCode - 股票代码
+ */
+export const useBasicInfo = (stockCode?: string): UseBasicInfoResult => {
+  const [basicInfo, setBasicInfo] = useState<BasicInfo | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const loadData = useCallback(async () => {
+    if (!stockCode) return;
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const response = await fetch(`${API_BASE_URL}/api/stock/${stockCode}/basic-info`);
+      const result = (await response.json()) as ApiResponse<BasicInfo>;
+
+      if (result.success) {
+        setBasicInfo(result.data);
+      } else {
+        setError("加载基本信息失败");
+      }
+    } catch (err) {
+      logger.error("useBasicInfo", "loadData", err, { stockCode });
+      setError("网络请求失败");
+    } finally {
+      setLoading(false);
+    }
+  }, [stockCode]);
+
+  useEffect(() => {
+    loadData();
+  }, [loadData]);
+
+  return { basicInfo, loading, error };
+};

src/views/Company/components/CompanyOverview/hooks/useBranchesData.ts

@@ -0,0 +1,59 @@
+// src/views/Company/components/CompanyOverview/hooks/useBranchesData.ts
+// 分支机构数据 Hook - 用于分支机构 Tab
+
+import { useState, useEffect, useCallback } from "react";
+import { logger } from "@utils/logger";
+import { getApiBase } from "@utils/apiConfig";
+import type { Branch } from "../types";
+
+const API_BASE_URL = getApiBase();
+
+interface ApiResponse<T> {
+  success: boolean;
+  data: T;
+}
+
+interface UseBranchesDataResult {
+  branches: Branch[];
+  loading: boolean;
+  error: string | null;
+}
+
+/**
+ * 分支机构数据 Hook
+ * @param stockCode - 股票代码
+ */
+export const useBranchesData = (stockCode?: string): UseBranchesDataResult => {
+  const [branches, setBranches] = useState<Branch[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const loadData = useCallback(async () => {
+    if (!stockCode) return;
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const response = await fetch(`${API_BASE_URL}/api/stock/${stockCode}/branches`);
+      const result = (await response.json()) as ApiResponse<Branch[]>;
+
+      if (result.success) {
+        setBranches(result.data);
+      } else {
+        setError("加载分支机构数据失败");
+      }
+    } catch (err) {
+      logger.error("useBranchesData", "loadData", err, { stockCode });
+      setError("网络请求失败");
+    } finally {
+      setLoading(false);
+    }
+  }, [stockCode]);
+
+  useEffect(() => {
+    loadData();
+  }, [loadData]);
+
+  return { branches, loading, error };
+};

src/views/Company/components/CompanyOverview/hooks/useCompanyOverviewData.ts

@@ -0,0 +1,140 @@
+// src/views/Company/components/CompanyOverview/hooks/useCompanyOverviewData.ts
+// 公司概览数据加载 Hook
+
+import { useState, useEffect, useCallback } from "react";
+import { logger } from "@utils/logger";
+import { getApiBase } from "@utils/apiConfig";
+import type {
+  BasicInfo,
+  ActualControl,
+  Concentration,
+  Management,
+  Shareholder,
+  Branch,
+  Announcement,
+  DisclosureSchedule,
+  CompanyOverviewData,
+} from "../types";
+
+const API_BASE_URL = getApiBase();
+
+interface ApiResponse<T> {
+  success: boolean;
+  data: T;
+}
+
+/**
+ * 公司概览数据加载 Hook
+ * @param propStockCode - 股票代码
+ * @returns 公司概览数据
+ */
+export const useCompanyOverviewData = (propStockCode?: string): CompanyOverviewData => {
+  const [stockCode, setStockCode] = useState(propStockCode || "000001");
+  const [loading, setLoading] = useState(false);
+  const [dataLoaded, setDataLoaded] = useState(false);
+
+  // 基本信息数据
+  const [basicInfo, setBasicInfo] = useState<BasicInfo | null>(null);
+  const [actualControl, setActualControl] = useState<ActualControl[]>([]);
+  const [concentration, setConcentration] = useState<Concentration[]>([]);
+  const [management, setManagement] = useState<Management[]>([]);
+  const [topCirculationShareholders, setTopCirculationShareholders] = useState<Shareholder[]>([]);
+  const [topShareholders, setTopShareholders] = useState<Shareholder[]>([]);
+  const [branches, setBranches] = useState<Branch[]>([]);
+  const [announcements, setAnnouncements] = useState<Announcement[]>([]);
+  const [disclosureSchedule, setDisclosureSchedule] = useState<DisclosureSchedule[]>([]);
+
+  // 监听 props 中的 stockCode 变化
+  useEffect(() => {
+    if (propStockCode && propStockCode !== stockCode) {
+      setStockCode(propStockCode);
+      setDataLoaded(false);
+    }
+  }, [propStockCode, stockCode]);
+
+  // 加载基本信息数据（9个接口）
+  const loadBasicInfoData = useCallback(async () => {
+    if (dataLoaded) return;
+
+    setLoading(true);
+
+    try {
+      const [
+        basicRes,
+        actualRes,
+        concentrationRes,
+        managementRes,
+        circulationRes,
+        shareholdersRes,
+        branchesRes,
+        announcementsRes,
+        disclosureRes,
+      ] = await Promise.all([
+        fetch(`${API_BASE_URL}/api/stock/${stockCode}/basic-info`).then((r) =>
+          r.json()
+        ) as Promise<ApiResponse<BasicInfo>>,
+        fetch(`${API_BASE_URL}/api/stock/${stockCode}/actual-control`).then((r) =>
+          r.json()
+        ) as Promise<ApiResponse<ActualControl[]>>,
+        fetch(`${API_BASE_URL}/api/stock/${stockCode}/concentration`).then((r) =>
+          r.json()
+        ) as Promise<ApiResponse<Concentration[]>>,
+        fetch(`${API_BASE_URL}/api/stock/${stockCode}/management?active_only=true`).then((r) =>
+          r.json()
+        ) as Promise<ApiResponse<Management[]>>,
+        fetch(`${API_BASE_URL}/api/stock/${stockCode}/top-circulation-shareholders?limit=10`).then((r) =>
+          r.json()
+        ) as Promise<ApiResponse<Shareholder[]>>,
+        fetch(`${API_BASE_URL}/api/stock/${stockCode}/top-shareholders?limit=10`).then((r) =>
+          r.json()
+        ) as Promise<ApiResponse<Shareholder[]>>,
+        fetch(`${API_BASE_URL}/api/stock/${stockCode}/branches`).then((r) =>
+          r.json()
+        ) as Promise<ApiResponse<Branch[]>>,
+        fetch(`${API_BASE_URL}/api/stock/${stockCode}/announcements?limit=20`).then((r) =>
+          r.json()
+        ) as Promise<ApiResponse<Announcement[]>>,
+        fetch(`${API_BASE_URL}/api/stock/${stockCode}/disclosure-schedule`).then((r) =>
+          r.json()
+        ) as Promise<ApiResponse<DisclosureSchedule[]>>,
+      ]);
+
+      if (basicRes.success) setBasicInfo(basicRes.data);
+      if (actualRes.success) setActualControl(actualRes.data);
+      if (concentrationRes.success) setConcentration(concentrationRes.data);
+      if (managementRes.success) setManagement(managementRes.data);
+      if (circulationRes.success) setTopCirculationShareholders(circulationRes.data);
+      if (shareholdersRes.success) setTopShareholders(shareholdersRes.data);
+      if (branchesRes.success) setBranches(branchesRes.data);
+      if (announcementsRes.success) setAnnouncements(announcementsRes.data);
+      if (disclosureRes.success) setDisclosureSchedule(disclosureRes.data);
+
+      setDataLoaded(true);
+    } catch (err) {
+      logger.error("useCompanyOverviewData", "loadBasicInfoData", err, { stockCode });
+    } finally {
+      setLoading(false);
+    }
+  }, [stockCode, dataLoaded]);
+
+  // 首次加载
+  useEffect(() => {
+    if (stockCode) {
+      loadBasicInfoData();
+    }
+  }, [stockCode, loadBasicInfoData]);
+
+  return {
+    basicInfo,
+    actualControl,
+    concentration,
+    management,
+    topCirculationShareholders,
+    topShareholders,
+    branches,
+    announcements,
+    disclosureSchedule,
+    loading,
+    dataLoaded,
+  };
+};

src/views/Company/components/CompanyOverview/hooks/useDisclosureData.ts

@@ -0,0 +1,61 @@
+// src/views/Company/components/CompanyOverview/hooks/useDisclosureData.ts
+// 披露日程数据 Hook - 用于工商信息 Tab
+
+import { useState, useEffect, useCallback } from "react";
+import { logger } from "@utils/logger";
+import { getApiBase } from "@utils/apiConfig";
+import type { DisclosureSchedule } from "../types";
+
+const API_BASE_URL = getApiBase();
+
+interface ApiResponse<T> {
+  success: boolean;
+  data: T;
+}
+
+interface UseDisclosureDataResult {
+  disclosureSchedule: DisclosureSchedule[];
+  loading: boolean;
+  error: string | null;
+}
+
+/**
+ * 披露日程数据 Hook
+ * @param stockCode - 股票代码
+ */
+export const useDisclosureData = (stockCode?: string): UseDisclosureDataResult => {
+  const [disclosureSchedule, setDisclosureSchedule] = useState<DisclosureSchedule[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const loadData = useCallback(async () => {
+    if (!stockCode) return;
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const response = await fetch(
+        `${API_BASE_URL}/api/stock/${stockCode}/disclosure-schedule`
+      );
+      const result = (await response.json()) as ApiResponse<DisclosureSchedule[]>;
+
+      if (result.success) {
+        setDisclosureSchedule(result.data);
+      } else {
+        setError("加载披露日程数据失败");
+      }
+    } catch (err) {
+      logger.error("useDisclosureData", "loadData", err, { stockCode });
+      setError("网络请求失败");
+    } finally {
+      setLoading(false);
+    }
+  }, [stockCode]);
+
+  useEffect(() => {
+    loadData();
+  }, [loadData]);
+
+  return { disclosureSchedule, loading, error };
+};

src/views/Company/components/CompanyOverview/hooks/useManagementData.ts

@@ -0,0 +1,61 @@
+// src/views/Company/components/CompanyOverview/hooks/useManagementData.ts
+// 管理团队数据 Hook - 用于管理团队 Tab
+
+import { useState, useEffect, useCallback } from "react";
+import { logger } from "@utils/logger";
+import { getApiBase } from "@utils/apiConfig";
+import type { Management } from "../types";
+
+const API_BASE_URL = getApiBase();
+
+interface ApiResponse<T> {
+  success: boolean;
+  data: T;
+}
+
+interface UseManagementDataResult {
+  management: Management[];
+  loading: boolean;
+  error: string | null;
+}
+
+/**
+ * 管理团队数据 Hook
+ * @param stockCode - 股票代码
+ */
+export const useManagementData = (stockCode?: string): UseManagementDataResult => {
+  const [management, setManagement] = useState<Management[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const loadData = useCallback(async () => {
+    if (!stockCode) return;
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const response = await fetch(
+        `${API_BASE_URL}/api/stock/${stockCode}/management?active_only=true`
+      );
+      const result = (await response.json()) as ApiResponse<Management[]>;
+
+      if (result.success) {
+        setManagement(result.data);
+      } else {
+        setError("加载管理团队数据失败");
+      }
+    } catch (err) {
+      logger.error("useManagementData", "loadData", err, { stockCode });
+      setError("网络请求失败");
+    } finally {
+      setLoading(false);
+    }
+  }, [stockCode]);
+
+  useEffect(() => {
+    loadData();
+  }, [loadData]);
+
+  return { management, loading, error };
+};

src/views/Company/components/CompanyOverview/hooks/useShareholderData.ts

@@ -0,0 +1,83 @@
+// src/views/Company/components/CompanyOverview/hooks/useShareholderData.ts
+// 股权结构数据 Hook - 用于股权结构 Tab
+
+import { useState, useEffect, useCallback } from "react";
+import { logger } from "@utils/logger";
+import { getApiBase } from "@utils/apiConfig";
+import type { ActualControl, Concentration, Shareholder } from "../types";
+
+const API_BASE_URL = getApiBase();
+
+interface ApiResponse<T> {
+  success: boolean;
+  data: T;
+}
+
+interface UseShareholderDataResult {
+  actualControl: ActualControl[];
+  concentration: Concentration[];
+  topShareholders: Shareholder[];
+  topCirculationShareholders: Shareholder[];
+  loading: boolean;
+  error: string | null;
+}
+
+/**
+ * 股权结构数据 Hook
+ * @param stockCode - 股票代码
+ */
+export const useShareholderData = (stockCode?: string): UseShareholderDataResult => {
+  const [actualControl, setActualControl] = useState<ActualControl[]>([]);
+  const [concentration, setConcentration] = useState<Concentration[]>([]);
+  const [topShareholders, setTopShareholders] = useState<Shareholder[]>([]);
+  const [topCirculationShareholders, setTopCirculationShareholders] = useState<Shareholder[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const loadData = useCallback(async () => {
+    if (!stockCode) return;
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const [actualRes, concentrationRes, shareholdersRes, circulationRes] = await Promise.all([
+        fetch(`${API_BASE_URL}/api/stock/${stockCode}/actual-control`).then((r) =>
+          r.json()
+        ) as Promise<ApiResponse<ActualControl[]>>,
+        fetch(`${API_BASE_URL}/api/stock/${stockCode}/concentration`).then((r) =>
+          r.json()
+        ) as Promise<ApiResponse<Concentration[]>>,
+        fetch(`${API_BASE_URL}/api/stock/${stockCode}/top-shareholders?limit=10`).then((r) =>
+          r.json()
+        ) as Promise<ApiResponse<Shareholder[]>>,
+        fetch(`${API_BASE_URL}/api/stock/${stockCode}/top-circulation-shareholders?limit=10`).then((r) =>
+          r.json()
+        ) as Promise<ApiResponse<Shareholder[]>>,
+      ]);
+
+      if (actualRes.success) setActualControl(actualRes.data);
+      if (concentrationRes.success) setConcentration(concentrationRes.data);
+      if (shareholdersRes.success) setTopShareholders(shareholdersRes.data);
+      if (circulationRes.success) setTopCirculationShareholders(circulationRes.data);
+    } catch (err) {
+      logger.error("useShareholderData", "loadData", err, { stockCode });
+      setError("加载股权结构数据失败");
+    } finally {
+      setLoading(false);
+    }
+  }, [stockCode]);
+
+  useEffect(() => {
+    loadData();
+  }, [loadData]);
+
+  return {
+    actualControl,
+    concentration,
+    topShareholders,
+    topCirculationShareholders,
+    loading,
+    error,
+  };
+};

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

@@ -0,0 +1,65 @@
+// src/views/Company/components/CompanyOverview/index.tsx
+// 公司概览 - 主组件（组合层）
+// 懒加载优化：只加载头部卡片数据，BasicInfoTab 内部懒加载各 Tab 数据
+
+import React from "react";
+import { VStack, Spinner, Center, Text } from "@chakra-ui/react";
+
+import { useBasicInfo } from "./hooks/useBasicInfo";
+import CompanyHeaderCard from "./CompanyHeaderCard";
+import type { CompanyOverviewProps } from "./types";
+
+// 子组件（暂保持 JS）
+import BasicInfoTab from "./BasicInfoTab";
+
+/**
+ * 公司概览组件
+ *
+ * 功能：
+ * - 显示公司头部信息卡片（useBasicInfo）
+ * - 显示基本信息 Tab（内部懒加载各子 Tab 数据）
+ *
+ * 懒加载策略：
+ * - 主组件只加载 basicInfo（1 个 API）
+ * - BasicInfoTab 内部根据 Tab 切换懒加载其他数据
+ */
+const CompanyOverview: React.FC<CompanyOverviewProps> = ({ stockCode }) => {
+  const { basicInfo, loading, error } = useBasicInfo(stockCode);
+
+  // 加载状态
+  if (loading && !basicInfo) {
+    return (
+      <Center h="300px">
+        <VStack spacing={4}>
+          <Spinner size="xl" color="blue.500" thickness="4px" />
+          <Text>正在加载公司概览数据...</Text>
+        </VStack>
+      </Center>
+    );
+  }
+
+  // 错误状态
+  if (error && !basicInfo) {
+    return (
+      <Center h="300px">
+        <Text color="red.500">{error}</Text>
+      </Center>
+    );
+  }
+
+  return (
+    <VStack spacing={6} align="stretch">
+      {/* 公司头部信息卡片 */}
+      {basicInfo && <CompanyHeaderCard basicInfo={basicInfo} />}
+
+      {/* 基本信息内容 - 传入 stockCode，内部懒加载各 Tab 数据 */}
+      <BasicInfoTab
+        stockCode={stockCode}
+        basicInfo={basicInfo}
+        cardBg="white"
+      />
+    </VStack>
+  );
+};
+
+export default CompanyOverview;

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

@@ -0,0 +1,118 @@
+// src/views/Company/components/CompanyOverview/types.ts
+// 公司概览组件类型定义
+
+/**
+ * 公司基本信息
+ */
+export interface BasicInfo {
+  ORGNAME?: string;
+  SECNAME?: string;
+  SECCODE?: string;
+  sw_industry_l1?: string;
+  sw_industry_l2?: string;
+  sw_industry_l3?: string;
+  legal_representative?: string;
+  chairman?: string;
+  general_manager?: string;
+  establish_date?: string;
+  reg_capital?: number;
+  province?: string;
+  city?: string;
+  website?: string;
+  email?: string;
+  tel?: string;
+  company_intro?: string;
+}
+
+/**
+ * 实际控制人
+ */
+export interface ActualControl {
+  controller_name?: string;
+  controller_type?: string;
+  holding_ratio?: number;
+}
+
+/**
+ * 股权集中度
+ */
+export interface Concentration {
+  top1_ratio?: number;
+  top5_ratio?: number;
+  top10_ratio?: number;
+}
+
+/**
+ * 管理层信息
+ */
+export interface Management {
+  name?: string;
+  position?: string;
+  start_date?: string;
+  end_date?: string;
+}
+
+/**
+ * 股东信息
+ */
+export interface Shareholder {
+  shareholder_name?: string;
+  holding_ratio?: number;
+  holding_amount?: number;
+}
+
+/**
+ * 分支机构
+ */
+export interface Branch {
+  branch_name?: string;
+  address?: string;
+}
+
+/**
+ * 公告信息
+ */
+export interface Announcement {
+  title?: string;
+  publish_date?: string;
+  url?: string;
+}
+
+/**
+ * 披露计划
+ */
+export interface DisclosureSchedule {
+  report_type?: string;
+  disclosure_date?: string;
+}
+
+/**
+ * useCompanyOverviewData Hook 返回值
+ */
+export interface CompanyOverviewData {
+  basicInfo: BasicInfo | null;
+  actualControl: ActualControl[];
+  concentration: Concentration[];
+  management: Management[];
+  topCirculationShareholders: Shareholder[];
+  topShareholders: Shareholder[];
+  branches: Branch[];
+  announcements: Announcement[];
+  disclosureSchedule: DisclosureSchedule[];
+  loading: boolean;
+  dataLoaded: boolean;
+}
+
+/**
+ * CompanyOverview 组件 Props
+ */
+export interface CompanyOverviewProps {
+  stockCode?: string;
+}
+
+/**
+ * CompanyHeaderCard 组件 Props
+ */
+export interface CompanyHeaderCardProps {
+  basicInfo: BasicInfo;
+}

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

@@ -0,0 +1,26 @@
+// src/views/Company/components/CompanyOverview/utils.ts
+// 公司概览格式化工具函数
+
+/**
+ * 格式化注册资本
+ * @param value - 注册资本（万元）
+ * @returns 格式化后的字符串
+ */
+export const formatRegisteredCapital = (value: number | null | undefined): string => {
+  if (!value && value !== 0) return "-";
+  const absValue = Math.abs(value);
+  if (absValue >= 100000) {
+    return (value / 10000).toFixed(2) + "亿元";
+  }
+  return value.toFixed(2) + "万元";
+};
+
+/**
+ * 格式化日期
+ * @param dateString - 日期字符串
+ * @returns 格式化后的日期字符串
+ */
+export const formatDate = (dateString: string | null | undefined): string => {
+  if (!dateString) return "-";
+  return new Date(dateString).toLocaleDateString("zh-CN");
+};

src/views/Company/components/CompanyTabs/TabNavigation.js

@@ -0,0 +1,55 @@
+// src/views/Company/components/CompanyTabs/TabNavigation.js
+// Tab 导航组件 - 动态渲染 Tab 按钮（黑金主题）
+
+import React from 'react';
+import {
+  TabList,
+  Tab,
+  HStack,
+  Icon,
+  Text,
+} from '@chakra-ui/react';
+
+import { COMPANY_TABS } from '../../constants';
+
+// 黑金主题颜色配置
+const THEME_COLORS = {
+  bg: '#1A202C',           // 背景纯黑
+  selectedBg: '#C9A961',   // 选中项金色背景
+  selectedText: '#FFFFFF', // 选中项白色文字
+  unselectedText: '#999999', // 未选中项深灰色
+};
+
+/**
+ * Tab 导航组件（黑金主题）
+ */
+const TabNavigation = () => {
+  return (
+    <TabList py={4} bg={THEME_COLORS.bg} borderTopLeftRadius="16px" borderTopRightRadius="16px">
+      {COMPANY_TABS.map((tab, index) => (
+        <Tab
+          key={tab.key}
+          color={THEME_COLORS.unselectedText}
+          borderRadius="full"
+          px={4}
+          py={2}
+          _selected={{
+            bg: THEME_COLORS.selectedBg,
+            color: THEME_COLORS.selectedText,
+          }}
+          _hover={{
+            color: THEME_COLORS.selectedText,
+          }}
+          mr={index < COMPANY_TABS.length - 1 ? 2 : 0}
+        >
+          <HStack spacing={2}>
+            <Icon as={tab.icon} boxSize="18px" />
+            <Text fontSize="15px">{tab.name}</Text>
+          </HStack>
+        </Tab>
+      ))}
+    </TabList>
+  );
+};
+
+export default TabNavigation;

src/views/Company/components/CompanyTabs/index.js

@@ -0,0 +1,99 @@
+// src/views/Company/components/CompanyTabs/index.js
+// Tab 容器组件 - 管理 Tab 切换和内容渲染
+
+import React, { useState } from 'react';
+import {
+  Card,
+  CardBody,
+  Tabs,
+  TabPanels,
+  TabPanel,
+  Divider,
+} from '@chakra-ui/react';
+
+import TabNavigation from './TabNavigation';
+import { COMPANY_TABS, getTabNameByIndex } from '../../constants';
+
+// 子组件导入（Tab 内容组件）
+import CompanyOverview from '../CompanyOverview';
+import DeepAnalysis from '../DeepAnalysis';
+import MarketDataView from '../MarketDataView';
+import FinancialPanorama from '../FinancialPanorama';
+import ForecastReport from '../ForecastReport';
+import DynamicTracking from '../DynamicTracking';
+
+/**
+ * Tab 组件映射
+ * key 与 COMPANY_TABS 中的 key 对应
+ */
+const TAB_COMPONENTS = {
+  overview: CompanyOverview,
+  analysis: DeepAnalysis,
+  market: MarketDataView,
+  financial: FinancialPanorama,
+  forecast: ForecastReport,
+  tracking: DynamicTracking,
+};
+
+/**
+ * Tab 容器组件
+ *
+ * 功能：
+ * - 管理 Tab 切换状态
+ * - 动态渲染 Tab 导航和内容
+ * - 触发 Tab 变更追踪
+ *
+ * @param {Object} props
+ * @param {string} props.stockCode - 当前股票代码
+ * @param {Function} props.onTabChange - Tab 变更回调 (index, tabName, prevIndex) => void
+ */
+const CompanyTabs = ({ stockCode, onTabChange }) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  /**
+   * 处理 Tab 切换
+   */
+  const handleTabChange = (index) => {
+    const tabName = getTabNameByIndex(index);
+
+    // 触发追踪回调
+    onTabChange?.(index, tabName, currentIndex);
+
+    // 更新状态
+    setCurrentIndex(index);
+  };
+
+  return (
+    <Card shadow="lg" bg='#1A202C'>
+      <CardBody p={0}>
+        <Tabs
+          isLazy
+          variant="soft-rounded"
+          colorScheme="blue"
+          size="lg"
+          index={currentIndex}
+          onChange={handleTabChange}
+        >
+          {/* Tab 导航（黑金主题） */}
+          <TabNavigation />
+
+          <Divider />
+
+          {/* Tab 内容面板 */}
+          <TabPanels>
+            {COMPANY_TABS.map((tab) => {
+              const Component = TAB_COMPONENTS[tab.key];
+              return (
+                <TabPanel key={tab.key}>
+                  <Component stockCode={stockCode} />
+                </TabPanel>
+              );
+            })}
+          </TabPanels>
+        </Tabs>
+      </CardBody>
+    </Card>
+  );
+};
+
+export default CompanyTabs;

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

@@ -0,0 +1,100 @@
+// src/views/Company/components/DeepAnalysis/index.js
+// 深度分析 - 独立一级 Tab 组件
+
+import React, { useState, useEffect } from "react";
+import { logger } from "@utils/logger";
+import { getApiBase } from "@utils/apiConfig";
+
+// 复用原有的展示组件
+import DeepAnalysisTab from "../CompanyOverview/DeepAnalysisTab";
+
+const API_BASE_URL = getApiBase();
+
+/**
+ * 深度分析组件
+ *
+ * 功能：
+ * - 加载深度分析数据（3个接口）
+ * - 管理展开状态
+ * - 渲染 DeepAnalysisTab 展示组件
+ *
+ * @param {Object} props
+ * @param {string} props.stockCode - 股票代码
+ */
+const DeepAnalysis = ({ stockCode }) => {
+  // 数据状态
+  const [comprehensiveData, setComprehensiveData] = useState(null);
+  const [valueChainData, setValueChainData] = useState(null);
+  const [keyFactorsData, setKeyFactorsData] = useState(null);
+  const [loading, setLoading] = useState(false);
+
+  // 业务板块展开状态
+  const [expandedSegments, setExpandedSegments] = useState({});
+
+  // 切换业务板块展开状态
+  const toggleSegmentExpansion = (segmentIndex) => {
+    setExpandedSegments((prev) => ({
+      ...prev,
+      [segmentIndex]: !prev[segmentIndex],
+    }));
+  };
+
+  // 加载深度分析数据（3个接口）
+  const loadDeepAnalysisData = async () => {
+    if (!stockCode) return;
+
+    setLoading(true);
+
+    try {
+      const requests = [
+        fetch(
+          `${API_BASE_URL}/api/company/comprehensive-analysis/${stockCode}`
+        ).then((r) => r.json()),
+        fetch(
+          `${API_BASE_URL}/api/company/value-chain-analysis/${stockCode}`
+        ).then((r) => r.json()),
+        fetch(
+          `${API_BASE_URL}/api/company/key-factors-timeline/${stockCode}`
+        ).then((r) => r.json()),
+      ];
+
+      const [comprehensiveRes, valueChainRes, keyFactorsRes] =
+        await Promise.all(requests);
+
+      if (comprehensiveRes.success) setComprehensiveData(comprehensiveRes.data);
+      if (valueChainRes.success) setValueChainData(valueChainRes.data);
+      if (keyFactorsRes.success) setKeyFactorsData(keyFactorsRes.data);
+    } catch (err) {
+      logger.error("DeepAnalysis", "loadDeepAnalysisData", err, { stockCode });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // stockCode 变更时重新加载数据
+  useEffect(() => {
+    if (stockCode) {
+      // 重置数据
+      setComprehensiveData(null);
+      setValueChainData(null);
+      setKeyFactorsData(null);
+      setExpandedSegments({});
+      // 加载新数据
+      loadDeepAnalysisData();
+    }
+  }, [stockCode]);
+
+  return (
+    <DeepAnalysisTab
+      comprehensiveData={comprehensiveData}
+      valueChainData={valueChainData}
+      keyFactorsData={keyFactorsData}
+      loading={loading}
+      cardBg="white"
+      expandedSegments={expandedSegments}
+      onToggleSegment={toggleSegmentExpansion}
+    />
+  );
+};
+
+export default DeepAnalysis;

src/views/Company/components/DynamicTracking/index.js

@@ -0,0 +1,184 @@
+// src/views/Company/components/DynamicTracking/index.js
+// 动态跟踪 - 独立一级 Tab 组件（包含新闻动态等二级 Tab）
+
+import React, { useState, useEffect, useCallback } from "react";
+import {
+  Box,
+  Tabs,
+  TabList,
+  TabPanels,
+  Tab,
+  TabPanel,
+} from "@chakra-ui/react";
+import { FaNewspaper } from "react-icons/fa";
+
+import { logger } from "@utils/logger";
+import { getApiBase } from "@utils/apiConfig";
+import NewsEventsTab from "../CompanyOverview/NewsEventsTab";
+
+// API配置
+const API_BASE_URL = getApiBase();
+
+// 二级 Tab 配置
+const TRACKING_TABS = [
+  { key: "news", name: "新闻动态", icon: FaNewspaper },
+  // 后续可扩展更多二级 Tab
+];
+
+/**
+ * 动态跟踪组件
+ *
+ * 功能：
+ * - 二级 Tab 结构
+ * - Tab1: 新闻动态（复用 NewsEventsTab）
+ * - 预留后续扩展
+ *
+ * @param {Object} props
+ * @param {string} props.stockCode - 股票代码
+ */
+const DynamicTracking = ({ stockCode: propStockCode }) => {
+  const [stockCode, setStockCode] = useState(propStockCode || "000001");
+  const [activeTab, setActiveTab] = useState(0);
+
+  // 新闻动态状态
+  const [newsEvents, setNewsEvents] = useState([]);
+  const [newsLoading, setNewsLoading] = useState(false);
+  const [newsPagination, setNewsPagination] = useState({
+    page: 1,
+    per_page: 10,
+    total: 0,
+    pages: 0,
+    has_next: false,
+    has_prev: false,
+  });
+  const [searchQuery, setSearchQuery] = useState("");
+  const [stockName, setStockName] = useState("");
+  const [dataLoaded, setDataLoaded] = useState(false);
+
+  // 监听 props 中的 stockCode 变化
+  useEffect(() => {
+    if (propStockCode && propStockCode !== stockCode) {
+      setStockCode(propStockCode);
+      setDataLoaded(false);
+      setNewsEvents([]);
+      setStockName("");
+      setSearchQuery("");
+    }
+  }, [propStockCode, stockCode]);
+
+  // 获取股票名称（用于搜索）
+  const fetchStockName = useCallback(async () => {
+    try {
+      const response = await fetch(
+        `${API_BASE_URL}/api/stock/${stockCode}/basic-info`
+      );
+      const result = await response.json();
+      if (result.success && result.data) {
+        const name = result.data.SECNAME || result.data.ORGNAME || stockCode;
+        setStockName(name);
+        return name;
+      }
+      return stockCode;
+    } catch (err) {
+      logger.error("DynamicTracking", "fetchStockName", err, { stockCode });
+      return stockCode;
+    }
+  }, [stockCode]);
+
+  // 加载新闻事件数据
+  const loadNewsEvents = useCallback(
+    async (query, page = 1) => {
+      setNewsLoading(true);
+      try {
+        const searchTerm = query || stockName || stockCode;
+        const response = await fetch(
+          `${API_BASE_URL}/api/events?q=${encodeURIComponent(searchTerm)}&page=${page}&per_page=10`
+        );
+        const result = await response.json();
+
+        if (result.success) {
+          setNewsEvents(result.data || []);
+          setNewsPagination({
+            page: result.pagination?.page || page,
+            per_page: result.pagination?.per_page || 10,
+            total: result.pagination?.total || 0,
+            pages: result.pagination?.pages || 0,
+            has_next: result.pagination?.has_next || false,
+            has_prev: result.pagination?.has_prev || false,
+          });
+        }
+      } catch (err) {
+        logger.error("DynamicTracking", "loadNewsEvents", err, { stockCode });
+        setNewsEvents([]);
+      } finally {
+        setNewsLoading(false);
+      }
+    },
+    [stockCode, stockName]
+  );
+
+  // 首次加载
+  useEffect(() => {
+    const initLoad = async () => {
+      if (stockCode && !dataLoaded) {
+        const name = await fetchStockName();
+        await loadNewsEvents(name, 1);
+        setDataLoaded(true);
+      }
+    };
+    initLoad();
+  }, [stockCode, dataLoaded, fetchStockName, loadNewsEvents]);
+
+  // 搜索处理
+  const handleSearchChange = (value) => {
+    setSearchQuery(value);
+  };
+
+  const handleSearch = () => {
+    loadNewsEvents(searchQuery || stockName, 1);
+  };
+
+  // 分页处理
+  const handlePageChange = (page) => {
+    loadNewsEvents(searchQuery || stockName, page);
+  };
+
+  return (
+    <Box>
+      <Tabs
+        variant="enclosed"
+        colorScheme="blue"
+        index={activeTab}
+        onChange={setActiveTab}
+      >
+        <TabList>
+          {TRACKING_TABS.map((tab) => (
+            <Tab key={tab.key} fontWeight="medium">
+              {tab.name}
+            </Tab>
+          ))}
+        </TabList>
+
+        <TabPanels>
+          {/* 新闻动态 Tab */}
+          <TabPanel p={4}>
+            <NewsEventsTab
+              newsEvents={newsEvents}
+              newsLoading={newsLoading}
+              newsPagination={newsPagination}
+              searchQuery={searchQuery}
+              onSearchChange={handleSearchChange}
+              onSearch={handleSearch}
+              onPageChange={handlePageChange}
+              cardBg="white"
+            />
+          </TabPanel>
+
+          {/* 后续可扩展更多 Tab Panel */}
+        </TabPanels>
+      </Tabs>
+    </Box>
+  );
+};
+
+export default DynamicTracking;

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

@@ -1,6 +1,6 @@
 // src/views/Company/FinancialPanorama.jsx
 import React, { useState, useEffect, useMemo } from 'react';
-import { logger } from '../../utils/logger';
+import { logger } from '@utils/logger';
 import {
   Box,
   Container,
@@ -35,7 +35,6 @@ import {
   VStack,
   HStack,
   Divider,
-  useColorModeValue,
   Select,
   Button,
   Tooltip,
@@ -60,7 +59,6 @@ import {
   ButtonGroup,
   Stack,
   Collapse,
-  useColorMode,
 } from '@chakra-ui/react';
 import { 
   ChevronDownIcon, 
@@ -75,7 +73,7 @@ import {
   ArrowDownIcon,
 } from '@chakra-ui/icons';
 import ReactECharts from 'echarts-for-react';
-import { financialService, formatUtils, chartUtils } from '../../services/financialService';
+import { financialService, formatUtils, chartUtils } from '@services/financialService';
 
 const FinancialPanorama = ({ stockCode: propStockCode }) => {
   // 状态管理
@@ -84,7 +82,7 @@ const FinancialPanorama = ({ stockCode: propStockCode }) => {
   const [error, setError] = useState(null);
   const [selectedPeriods, setSelectedPeriods] = useState(8);
   const [activeTab, setActiveTab] = useState(0);
-  
+
   // 财务数据状态
   const [stockInfo, setStockInfo] = useState(null);
   const [balanceSheet, setBalanceSheet] = useState([]);
@@ -101,14 +99,13 @@ const FinancialPanorama = ({ stockCode: propStockCode }) => {
   const [modalContent, setModalContent] = useState(null);
   const [expandedRows, setExpandedRows] = useState({});
   const toast = useToast();
-  const { colorMode } = useColorMode();
-  
+
   // 颜色配置（中国市场：红涨绿跌）
-  const bgColor = useColorModeValue('white', 'gray.800');
-  const borderColor = useColorModeValue('gray.200', 'gray.600');
-  const hoverBg = useColorModeValue('gray.50', 'gray.700');
-  const positiveColor = useColorModeValue('red.500', 'red.400');  // 红涨
-  const negativeColor = useColorModeValue('green.500', 'green.400');  // 绿跌
+  const bgColor = 'white';
+  const borderColor = 'gray.200';
+  const hoverBg = 'gray.50';
+  const positiveColor = 'red.500';  // 红涨
+  const negativeColor = 'green.500';  // 绿跌
 
   // 加载所有财务数据
   const loadFinancialData = async () => {
@@ -492,7 +489,7 @@ const FinancialPanorama = ({ stockCode: propStockCode }) => {
           <React.Fragment key={section.key}>
             {section.title !== '资产总计' && section.title !== '负债合计' && (
               <Tr
-                bg={useColorModeValue('gray.50', 'gray.700')}
+                bg="gray.50"
                 cursor="pointer"
                 onClick={() => toggleSection(section.key)}
               >
@@ -515,7 +512,7 @@ const FinancialPanorama = ({ stockCode: propStockCode }) => {
                   key={metric.key}
                   _hover={{ bg: hoverBg, cursor: 'pointer' }}
                   onClick={() => showMetricChart(metric.name, metric.key, balanceSheet, metric.path)}
-                  bg={metric.isTotal ? useColorModeValue('blue.50', 'blue.900') : 'transparent'}
+                  bg={metric.isTotal ? 'blue.50' : 'transparent'}
                 >
                   <Td position="sticky" left={0} bg={bgColor} zIndex={1}>
                     <HStack spacing={2}>
@@ -733,7 +730,7 @@ const FinancialPanorama = ({ stockCode: propStockCode }) => {
     const renderSection = (section) => (
       <React.Fragment key={section.key}>
         <Tr
-          bg={useColorModeValue('gray.50', 'gray.700')}
+          bg="gray.50"
           cursor="pointer"
           onClick={() => toggleSection(section.key)}
         >
@@ -755,8 +752,8 @@ const FinancialPanorama = ({ stockCode: propStockCode }) => {
               key={metric.key}
               _hover={{ bg: hoverBg, cursor: 'pointer' }}
               onClick={() => showMetricChart(metric.name, metric.key, incomeStatement, metric.path)}
-              bg={metric.isTotal ? useColorModeValue('blue.50', 'blue.900') : 
-                  metric.isSubtotal ? useColorModeValue('orange.50', 'orange.900') : 'transparent'}
+              bg={metric.isTotal ? 'blue.50' :
+                  metric.isSubtotal ? 'orange.50' : 'transparent'}
             >
               <Td position="sticky" left={0} bg={bgColor} zIndex={1}>
                 <HStack spacing={2}>
@@ -1268,7 +1265,7 @@ const FinancialPanorama = ({ stockCode: propStockCode }) => {
                 { label: '资产负债率', value: financialMetrics[0].solvency?.asset_liability_ratio, format: 'percent' },
                 { label: '研发费用率', value: financialMetrics[0].expense_ratios?.rd_expense_ratio, format: 'percent' },
               ].map((item, idx) => (
-                <Box key={idx} p={3} borderRadius="md" bg={useColorModeValue('gray.50', 'gray.700')}>
+                <Box key={idx} p={3} borderRadius="md" bg="gray.50">
                   <Text fontSize="xs" color="gray.500">{item.label}</Text>
                   <Text fontSize="lg" fontWeight="bold">
                     {item.format === 'percent' ? 

src/views/Company/components/ForecastReport/index.js

@@ -4,7 +4,7 @@ import { Box, Flex, Input, Button, SimpleGrid, HStack, Text, Skeleton, VStack }
 import { Card, CardHeader, CardBody, Heading, Table, Thead, Tr, Th, Tbody, Td, Tag } from '@chakra-ui/react';
 import { RepeatIcon } from '@chakra-ui/icons';
 import ReactECharts from 'echarts-for-react';
-import { stockService } from '../../services/eventService';
+import { stockService } from '@services/eventService';
 
 const ForecastReport = ({ stockCode: propStockCode }) => {
     const [code, setCode] = useState(propStockCode || '600000');

src/views/Company/components/MarketDataView/index.js

@@ -1,7 +1,7 @@
 // src/views/Market/MarketDataPro.jsx
 import React, { useState, useEffect, useMemo } from 'react';
-import { logger } from '../../utils/logger';
-import { getApiBase } from '../../utils/apiConfig';
+import { logger } from '@utils/logger';
+import { getApiBase } from '@utils/apiConfig';
 import {
   Box,
   Container,
@@ -36,7 +36,6 @@ import {
   VStack,
   HStack,
   Divider,
-  useColorModeValue,
   Select,
   Button,
   Tooltip,
@@ -60,7 +59,6 @@ import {
   GridItem,
   ButtonGroup,
   Stack,
-  useColorMode,
   Icon,
   InputGroup,
   InputLeftElement,
@@ -121,25 +119,6 @@ const themes = {
     border: '#CBD5E0',
     chartBg: '#FFFFFF',
   },
-  dark: {
-    // 夜间模式 - 黑+金
-    primary: '#FFD700',
-    primaryDark: '#FFA500',
-    secondary: '#1A1A1A',
-    secondaryDark: '#000000',
-    success: '#FF4444', // 涨 - 红色
-    danger: '#00C851', // 跌 - 绿色
-    warning: '#FFA500',
-    info: '#00BFFF',
-    bgMain: '#0A0A0A',
-    bgCard: '#141414',
-    bgDark: '#000000',
-    textPrimary: '#FFFFFF',
-    textSecondary: '#FFD700',
-    textMuted: '#999999',
-    border: '#333333',
-    chartBg: '#141414',
-  }
 };
 
 // API服务
@@ -236,9 +215,9 @@ const ThemedCard = ({ children, theme, ...props }) => {
 };
 
 // Markdown渲染组件
-const MarkdownRenderer = ({ children, theme, colorMode }) => {
+const MarkdownRenderer = ({ children, theme }) => {
   return (
-    <Box 
+    <Box
       color={theme.textPrimary}
       sx={{
         '& h1, & h2, & h3, & h4, & h5, & h6': {
@@ -269,7 +248,7 @@ const MarkdownRenderer = ({ children, theme, colorMode }) => {
           fontStyle: 'italic'
         },
         '& code': {
-          backgroundColor: colorMode === 'light' ? 'rgba(0,0,0,0.05)' : 'rgba(255,255,255,0.1)',
+          backgroundColor: 'rgba(0,0,0,0.05)',
           padding: '2px 4px',
           borderRadius: '4px',
           fontSize: '0.9em'
@@ -290,20 +269,19 @@ const MarkdownRenderer = ({ children, theme, colorMode }) => {
 
 // 主组件
 const MarketDataView = ({ stockCode: propStockCode }) => {
-  const { colorMode } = useColorMode();
   const toast = useToast();
   const { isOpen, onOpen, onClose } = useDisclosure();
   const [modalContent, setModalContent] = useState(null);
-  
+
   // 获取当前主题
-  const theme = colorMode === 'light' ? themes.light : themes.dark;
+  const theme = themes.light;
   
   // 状态管理
   const [stockCode, setStockCode] = useState(propStockCode || '600000');
   const [loading, setLoading] = useState(false);
   const [activeTab, setActiveTab] = useState(0);
   const [selectedPeriod, setSelectedPeriod] = useState(60);
-  
+
   // 数据状态
   const [summary, setSummary] = useState(null);
   const [tradeData, setTradeData] = useState([]);
@@ -464,7 +442,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
             opacity: 0.8
           }
         },
-        backgroundColor: colorMode === 'light' ? 'rgba(255,255,255,0.9)' : 'rgba(0,0,0,0.8)',
+        backgroundColor: 'rgba(255,255,255,0.9)',
         borderColor: theme.primary,
         borderWidth: 1,
         textStyle: {
@@ -682,7 +660,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
       tooltip: {
         trigger: 'axis',
         axisPointer: { type: 'cross' },
-        backgroundColor: colorMode === 'light' ? 'rgba(255,255,255,0.95)' : 'rgba(0,0,0,0.85)',
+        backgroundColor: 'rgba(255,255,255,0.95)',
         borderColor: theme.primary,
         borderWidth: 1,
         textStyle: {
@@ -889,7 +867,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
       },
       tooltip: {
         trigger: 'axis',
-        backgroundColor: colorMode === 'light' ? 'rgba(255,255,255,0.9)' : 'rgba(0,0,0,0.8)',
+        backgroundColor: 'rgba(255,255,255,0.9)',
         borderColor: theme.primary,
         borderWidth: 1,
         textStyle: {
@@ -1022,7 +1000,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
       },
       tooltip: {
         trigger: 'axis',
-        backgroundColor: colorMode === 'light' ? 'rgba(255,255,255,0.9)' : 'rgba(0,0,0,0.8)',
+        backgroundColor: 'rgba(255,255,255,0.9)',
         borderColor: theme.primary,
         borderWidth: 1,
         textStyle: {
@@ -1130,7 +1108,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
                         <Heading size="xl" color={theme.textSecondary}>
                           {summary.stock_name}
                         </Heading>
-                        <Badge colorScheme={colorMode === 'light' ? 'blue' : 'yellow'} fontSize="lg">
+                        <Badge colorScheme={'blue'} fontSize="lg">
                           {summary.stock_code}
                         </Badge>
                       </HStack>
@@ -1236,7 +1214,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
           ) : (
             <Tabs
               variant="soft-rounded"
-              colorScheme={colorMode === 'light' ? 'blue' : 'yellow'}
+              colorScheme={'blue'}
               index={activeTab}
               onChange={setActiveTab}
             >
@@ -1249,31 +1227,31 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
               >
                 <HStack justify="space-between" align="center" spacing={4}>
                   <TabList overflowX="auto" border="none" flex="1">
-                    <Tab color={theme.textMuted} _selected={{ color: colorMode === 'light' ? 'white' : theme.secondary, bg: theme.primary }} fontSize="sm" px={3}>
+                    <Tab color={theme.textMuted} _selected={{ color: 'white', bg: theme.primary }} fontSize="sm" px={3}>
                       <HStack spacing={1}>
                         <Icon as={ChevronUpIcon} boxSize={4} />
                         <Text>交易数据</Text>
                       </HStack>
                     </Tab>
-                    <Tab color={theme.textMuted} _selected={{ color: colorMode === 'light' ? 'white' : theme.secondary, bg: theme.primary }} fontSize="sm" px={3}>
+                    <Tab color={theme.textMuted} _selected={{ color: 'white', bg: theme.primary }} fontSize="sm" px={3}>
                       <HStack spacing={1}>
                         <Icon as={UnlockIcon} boxSize={4} />
                         <Text>融资融券</Text>
                       </HStack>
                     </Tab>
-                    <Tab color={theme.textMuted} _selected={{ color: colorMode === 'light' ? 'white' : theme.secondary, bg: theme.primary }} fontSize="sm" px={3}>
+                    <Tab color={theme.textMuted} _selected={{ color: 'white', bg: theme.primary }} fontSize="sm" px={3}>
                       <HStack spacing={1}>
                         <Icon as={ArrowUpIcon} boxSize={4} />
                         <Text>大宗交易</Text>
                       </HStack>
                     </Tab>
-                    <Tab color={theme.textMuted} _selected={{ color: colorMode === 'light' ? 'white' : theme.secondary, bg: theme.primary }} fontSize="sm" px={3}>
+                    <Tab color={theme.textMuted} _selected={{ color: 'white', bg: theme.primary }} fontSize="sm" px={3}>
                       <HStack spacing={1}>
                         <Icon as={StarIcon} boxSize={4} />
                         <Text>龙虎榜</Text>
                       </HStack>
                     </Tab>
-                    <Tab color={theme.textMuted} _selected={{ color: colorMode === 'light' ? 'white' : theme.secondary, bg: theme.primary }} fontSize="sm" px={3}>
+                    <Tab color={theme.textMuted} _selected={{ color: 'white', bg: theme.primary }} fontSize="sm" px={3}>
                       <HStack spacing={1}>
                         <Icon as={LockIcon} boxSize={4} />
                         <Text>股权质押</Text>
@@ -1301,7 +1279,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
                     <Button
                       leftIcon={<RepeatIcon />}
                       variant="outline"
-                      colorScheme={colorMode === 'light' ? 'blue' : 'yellow'}
+                      colorScheme={'blue'}
                       onClick={loadMarketData}
                       isLoading={loading}
                       size="sm"
@@ -1323,7 +1301,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
                             <ReactECharts 
                               option={getKLineOption()} 
                               style={{ height: '100%', width: '100%' }}
-                              theme={colorMode === 'light' ? 'light' : 'dark'}
+                              theme={'light'}
                               onEvents={{
                                 'click': (params) => {
                                   if (params.seriesName === '涨幅分析' && params.data) {
@@ -1343,7 +1321,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
                                           </Box>
                                           
                                           {analysis.main_business && (
-                                            <Box p={4} bg={colorMode === 'light' ? 'gray.50' : 'gray.900'} borderRadius="md">
+                                            <Box p={4} bg={'gray.50'} borderRadius="md">
                                               <Heading size="sm" mb={2} color={theme.primary}>主营业务</Heading>
                                               <Text color={theme.textPrimary}>{analysis.main_business}</Text>
                                             </Box>
@@ -1351,18 +1329,18 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
                                           
                                           
                                           {analysis.rise_reason_detail && (
-                                            <Box p={4} bg={colorMode === 'light' ? 'purple.50' : 'purple.900'} borderRadius="md">
+                                            <Box p={4} bg={'purple.50'} borderRadius="md">
                                               <Heading size="sm" mb={2} color={theme.primary}>详细分析</Heading>
-                                              <MarkdownRenderer theme={theme} colorMode={colorMode}>
+                                              <MarkdownRenderer theme={theme}>
                                                 {analysis.rise_reason_detail}
                                               </MarkdownRenderer>
                                             </Box>
                                           )}
 
                                           {analysis.announcements && analysis.announcements !== '[]' && (
-                                            <Box p={4} bg={colorMode === 'light' ? 'orange.50' : 'orange.900'} borderRadius="md">
+                                            <Box p={4} bg={'orange.50'} borderRadius="md">
                                               <Heading size="sm" mb={2} color={theme.primary}>相关公告</Heading>
-                                              <MarkdownRenderer theme={theme} colorMode={colorMode}>
+                                              <MarkdownRenderer theme={theme}>
                                                 {analysis.announcements}
                                               </MarkdownRenderer>
                                             </Box>
@@ -1370,7 +1348,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
 
                                           {/* 研报引用展示 */}
                                           {analysis.verification_reports && analysis.verification_reports.length > 0 && (
-                                            <Box p={4} bg={colorMode === 'light' ? 'blue.50' : 'blue.900'} borderRadius="md">
+                                            <Box p={4} bg={'blue.50'} borderRadius="md">
                                               <Heading size="sm" mb={3} color={theme.primary}>
                                                 <HStack spacing={2}>
                                                   <Icon as={ExternalLinkIcon} />
@@ -1382,7 +1360,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
                                                   <Box
                                                     key={reportIdx}
                                                     p={3}
-                                                    bg={colorMode === 'light' ? 'white' : 'gray.800'}
+                                                    bg={'white'}
                                                     borderRadius="md"
                                                     border="1px solid"
                                                     borderColor={theme.border}
@@ -1428,7 +1406,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
                                                     {report.verification_item && (
                                                       <Box
                                                         p={2}
-                                                        bg={colorMode === 'light' ? 'yellow.50' : 'yellow.900'}
+                                                        bg={'yellow.50'}
                                                         borderRadius="sm"
                                                         mb={2}
                                                       >
@@ -1479,7 +1457,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
                               当日分钟频数据
                             </Heading>
                             {minuteData && minuteData.trade_date && (
-                              <Badge colorScheme={colorMode === 'light' ? 'blue' : 'yellow'} fontSize="xs">
+                              <Badge colorScheme={'blue'} fontSize="xs">
                                 {minuteData.trade_date}
                               </Badge>
                             )}
@@ -1488,7 +1466,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
                             leftIcon={<RepeatIcon />}
                             size="sm"
                             variant="outline"
-                            colorScheme={colorMode === 'light' ? 'blue' : 'yellow'}
+                            colorScheme={'blue'}
                             onClick={loadMinuteData}
                             isLoading={minuteLoading}
                             loadingText="获取中"
@@ -1520,7 +1498,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
                               <ReactECharts
                                 option={getMinuteKLineOption()}
                                 style={{ height: '100%', width: '100%' }}
-                                theme={colorMode === 'light' ? 'light' : 'dark'}
+                                theme={'light'}
                               />
                             </Box>
 
@@ -1592,7 +1570,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
                             {/* 成交量分析 */}
                             <Box
                               p={4}
-                              bg={colorMode === 'light' ? theme.bgDark : 'rgba(255, 215, 0, 0.05)'}
+                              bg={theme.bgDark}
                               borderRadius="lg"
                               border="1px solid"
                               borderColor={theme.border}
@@ -1687,7 +1665,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
                             </Thead>
                             <Tbody>
                               {tradeData.slice(-10).reverse().map((item, idx) => (
-                                <Tr key={idx} _hover={{ bg: colorMode === 'light' ? theme.bgDark : 'rgba(255, 215, 0, 0.1)' }}>
+                                <Tr key={idx} _hover={{ bg: theme.bgDark }}>
                                   <Td color={theme.textPrimary}>{item.date}</Td>
                                   <Td isNumeric color={theme.textPrimary}>{item.open}</Td>
                                   <Td isNumeric color={theme.textPrimary}>{item.high}</Td>
@@ -1718,7 +1696,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
                             <ReactECharts 
                               option={getFundingOption()} 
                               style={{ height: '100%', width: '100%' }}
-                              theme={colorMode === 'light' ? 'light' : 'dark'}
+                              theme={'light'}
                             />
                           </Box>
                         )}
@@ -1735,7 +1713,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
                         <CardBody>
                           <VStack spacing={3} align="stretch">
                             {fundingData.slice(-5).reverse().map((item, idx) => (
-                              <Box key={idx} p={3} bg={colorMode === 'light' ? 'rgba(255, 68, 68, 0.05)' : 'rgba(255, 68, 68, 0.1)'} borderRadius="md">
+                              <Box key={idx} p={3} bg={'rgba(255, 68, 68, 0.05)'} borderRadius="md">
                                 <HStack justify="space-between">
                                   <Text color={theme.textMuted}>{item.date}</Text>
                                   <VStack align="end" spacing={0}>
@@ -1762,7 +1740,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
                         <CardBody>
                           <VStack spacing={3} align="stretch">
                             {fundingData.slice(-5).reverse().map((item, idx) => (
-                              <Box key={idx} p={3} bg={colorMode === 'light' ? 'rgba(0, 200, 81, 0.05)' : 'rgba(0, 200, 81, 0.1)'} borderRadius="md">
+                              <Box key={idx} p={3} bg={'rgba(0, 200, 81, 0.05)'} borderRadius="md">
                                 <HStack justify="space-between">
                                   <Text color={theme.textMuted}>{item.date}</Text>
                                   <VStack align="end" spacing={0}>
@@ -1798,7 +1776,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
                             <Box 
                               key={idx} 
                               p={4} 
-                              bg={colorMode === 'light' ? theme.bgDark : 'rgba(255, 215, 0, 0.05)'} 
+                              bg={theme.bgDark} 
                               borderRadius="lg" 
                               border="1px solid" 
                               borderColor={theme.border}
@@ -1808,7 +1786,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
                                   {dayStats.date}
                                 </Text>
                                 <HStack spacing={4}>
-                                  <Badge colorScheme={colorMode === 'light' ? 'blue' : 'yellow'} fontSize="md">
+                                  <Badge colorScheme={'blue'} fontSize="md">
                                     交易笔数: {dayStats.count}
                                   </Badge>
                                   <Badge colorScheme="green" fontSize="md">
@@ -1838,7 +1816,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
                                     </Thead>
                                     <Tbody>
                                       {dayStats.deals.map((deal, i) => (
-                                        <Tr key={i} _hover={{ bg: colorMode === 'light' ? 'rgba(43, 108, 176, 0.05)' : 'rgba(255, 215, 0, 0.1)' }}>
+                                        <Tr key={i} _hover={{ bg: 'rgba(43, 108, 176, 0.05)' }}>
                                           <Td color={theme.textPrimary} fontSize="xs" maxW="200px" isTruncated>
                                             <Tooltip label={deal.buyer_dept || '-'} placement="top">
                                               <Text>{deal.buyer_dept || '-'}</Text>
@@ -1891,7 +1869,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
                             <Box 
                               key={idx} 
                               p={4} 
-                              bg={colorMode === 'light' ? theme.bgDark : 'rgba(255, 215, 0, 0.05)'} 
+                              bg={theme.bgDark} 
                               borderRadius="lg" 
                               border="1px solid" 
                               borderColor={theme.border}
@@ -1925,7 +1903,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
                                           key={i}
                                           justify="space-between"
                                           p={2}
-                                          bg={colorMode === 'light' ? 'rgba(255, 68, 68, 0.05)' : 'rgba(255, 68, 68, 0.1)'}
+                                          bg={'rgba(255, 68, 68, 0.05)'}
                                           borderRadius="md"
                                         >
                                           <Text fontSize="sm" color={theme.textPrimary} isTruncated maxW="70%">
@@ -1953,7 +1931,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
                                           key={i}
                                           justify="space-between"
                                           p={2}
-                                          bg={colorMode === 'light' ? 'rgba(0, 200, 81, 0.05)' : 'rgba(0, 200, 81, 0.1)'}
+                                          bg={'rgba(0, 200, 81, 0.05)'}
                                           borderRadius="md"
                                         >
                                           <Text fontSize="sm" color={theme.textPrimary} isTruncated maxW="70%">
@@ -1975,7 +1953,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
                               <HStack mt={3} spacing={2}>
                                 <Text fontSize="sm" color={theme.textMuted}>类型:</Text>
                                 {dayData.info_types && dayData.info_types.map((type, i) => (
-                                  <Badge key={i} colorScheme={colorMode === 'light' ? 'blue' : 'yellow'} fontSize="xs">
+                                  <Badge key={i} colorScheme={'blue'} fontSize="xs">
                                     {type}
                                   </Badge>
                                 ))}
@@ -2002,7 +1980,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
                             <ReactECharts 
                               option={getPledgeOption()} 
                               style={{ height: '100%', width: '100%' }}
-                              theme={colorMode === 'light' ? 'light' : 'dark'}
+                              theme={'light'}
                             />
                           </Box>
                         )}
@@ -2032,7 +2010,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
                             <Tbody>
                               {Array.isArray(pledgeData) && pledgeData.length > 0 ? (
                                 pledgeData.map((item, idx) => (
-                                  <Tr key={idx} _hover={{ bg: colorMode === 'light' ? theme.bgDark : 'rgba(255, 215, 0, 0.1)' }}>
+                                  <Tr key={idx} _hover={{ bg: theme.bgDark }}>
                                     <Td color={theme.textPrimary}>{item.end_date}</Td>
                                     <Td isNumeric color={theme.textPrimary}>{formatUtils.formatNumber(item.unrestricted_pledge, 0)}</Td>
                                     <Td isNumeric color={theme.textPrimary}>{formatUtils.formatNumber(item.restricted_pledge, 0)}</Td>

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

@@ -0,0 +1,300 @@
+/**
+ * StockQuoteCard - 股票行情卡片组件
+ *
+ * 展示股票的实时行情、关键指标和主力动态
+ */
+
+import React from 'react';
+import {
+  Box,
+  Card,
+  CardBody,
+  Flex,
+  HStack,
+  VStack,
+  Text,
+  Badge,
+  Progress,
+  Skeleton,
+  IconButton,
+  Tooltip,
+} from '@chakra-ui/react';
+import { Share2 } from 'lucide-react';
+
+import FavoriteButton from '@components/FavoriteButton';
+import type { StockQuoteCardProps } from './types';
+
+/**
+ * 格式化价格显示
+ */
+const formatPrice = (price: number): string => {
+  return price.toLocaleString('zh-CN', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  });
+};
+
+/**
+ * 格式化涨跌幅显示
+ */
+const formatChangePercent = (percent: number): string => {
+  const sign = percent >= 0 ? '+' : '';
+  return `${sign}${percent.toFixed(2)}%`;
+};
+
+/**
+ * 格式化主力净流入显示
+ */
+const formatNetInflow = (value: number): string => {
+  const sign = value >= 0 ? '+' : '';
+  return `${sign}${value.toFixed(2)}亿`;
+};
+
+const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
+  data,
+  isLoading = false,
+  isInWatchlist = false,
+  isWatchlistLoading = false,
+  onWatchlistToggle,
+  onShare,
+}) => {
+  // 处理分享点击
+  const handleShare = () => {
+    onShare?.();
+  };
+
+  // 黑金主题颜色配置
+  const cardBg = '#1A202C';
+  const borderColor = '#C9A961';
+  const labelColor = '#C9A961';
+  const valueColor = '#F4D03F';
+  const sectionTitleColor = '#F4D03F';
+
+  // 涨跌颜色（红涨绿跌）
+  const upColor = '#F44336';    // 涨 - 红色
+  const downColor = '#4CAF50';  // 跌 - 绿色
+
+  // 加载中或无数据时显示骨架屏
+  if (isLoading || !data) {
+    return (
+      <Card bg={cardBg} shadow="sm" borderWidth="1px" borderColor={borderColor}>
+        <CardBody>
+          <VStack spacing={4} align="stretch">
+            <Skeleton height="30px" width="200px" />
+            <Skeleton height="60px" />
+            <Skeleton height="80px" />
+          </VStack>
+        </CardBody>
+      </Card>
+    );
+  }
+
+  const priceColor = data.changePercent >= 0 ? upColor : downColor;
+  const inflowColor = data.mainNetInflow >= 0 ? upColor : downColor;
+
+  return (
+    <Card bg={cardBg} shadow="sm" borderWidth="1px" borderColor={borderColor}>
+      <CardBody>
+        {/* 顶部：股票名称 + 关注/分享按钮 + 更新时间 */}
+        <Flex justify="space-between" align="center" mb={4}>
+          {/* 左侧：股票名称 + 行业标签 + 指数标签 */}
+          <HStack spacing={3} align="center">
+            {/* 股票名称 - 突出显示 */}
+            <Text fontSize="26px" fontWeight="800" color={valueColor}>
+              {data.name}
+            </Text>
+            <Text fontSize="18px" fontWeight="normal" color={labelColor}>
+              ({data.code})
+            </Text>
+
+            {/* 行业标签 */}
+            {(data.industryL1 || data.industry) && (
+              <Badge
+                bg="transparent"
+                color={labelColor}
+                fontSize="14px"
+                fontWeight="medium"
+                border="1px solid"
+                borderColor={borderColor}
+                px={2}
+                py={0.5}
+                borderRadius="md"
+              >
+                {data.industryL1 && data.industry
+                  ? `${data.industryL1} · ${data.industry}`
+                  : data.industry || data.industryL1}
+              </Badge>
+            )}
+
+            {/* 指数标签 */}
+            {data.indexTags?.length > 0 && (
+              <Text fontSize="14px" color={labelColor}>
+                {data.indexTags.join('、')}
+              </Text>
+            )}
+          </HStack>
+
+          {/* 右侧：关注 + 分享 + 时间 */}
+          <HStack spacing={3}>
+            <FavoriteButton
+              isFavorite={isInWatchlist}
+              isLoading={isWatchlistLoading}
+              onClick={onWatchlistToggle || (() => {})}
+              colorScheme="gold"
+              size="sm"
+            />
+            <Tooltip label="分享" placement="top">
+              <IconButton
+                aria-label="分享"
+                icon={<Share2 size={18} />}
+                variant="ghost"
+                color={labelColor}
+                size="sm"
+                onClick={handleShare}
+                _hover={{ bg: 'whiteAlpha.100' }}
+              />
+            </Tooltip>
+            <Text fontSize="14px" color={labelColor}>
+              {data.updateTime?.split(' ')[1] || '--:--'}
+            </Text>
+          </HStack>
+        </Flex>
+
+        {/* 三栏布局 */}
+        <Flex gap={8}>
+          {/* 左栏：价格信息 */}
+          <Box flex="1">
+            <HStack align="baseline" spacing={3} mb={3}>
+              <Text fontSize="48px" fontWeight="bold" color={priceColor}>
+                {formatPrice(data.currentPrice)}
+              </Text>
+              <Badge
+                bg={data.changePercent >= 0 ? upColor : downColor}
+                color="#FFFFFF"
+                fontSize="20px"
+                fontWeight="bold"
+                px={3}
+                py={1}
+                borderRadius="md"
+              >
+                {formatChangePercent(data.changePercent)}
+              </Badge>
+            </HStack>
+            {/* 次要行情：今开 | 昨收 | 最高 | 最低 */}
+            <HStack spacing={4} fontSize="14px" flexWrap="wrap">
+              <Text color={labelColor}>
+                今开：
+                <Text as="span" color={valueColor} fontWeight="bold">
+                  {formatPrice(data.todayOpen)}
+                </Text>
+              </Text>
+              <Text color={borderColor}>|</Text>
+              <Text color={labelColor}>
+                昨收：
+                <Text as="span" color={valueColor} fontWeight="bold">
+                  {formatPrice(data.yesterdayClose)}
+                </Text>
+              </Text>
+              <Text color={borderColor}>|</Text>
+              <Text color={labelColor}>
+                最高：
+                <Text as="span" color={upColor} fontWeight="bold">
+                  {formatPrice(data.todayHigh)}
+                </Text>
+              </Text>
+              <Text color={borderColor}>|</Text>
+              <Text color={labelColor}>
+                最低：
+                <Text as="span" color={downColor} fontWeight="bold">
+                  {formatPrice(data.todayLow)}
+                </Text>
+              </Text>
+            </HStack>
+          </Box>
+
+          {/* 中栏：关键指标 */}
+          <Box flex="1" borderLeftWidth="1px" borderColor={borderColor} pl={8}>
+            <Text
+              fontSize="14px"
+              fontWeight="bold"
+              color={sectionTitleColor}
+              mb={3}
+            >
+              关键指标
+            </Text>
+            <VStack align="stretch" spacing={2} fontSize="14px">
+              <HStack justify="space-between">
+                <Text color={labelColor}>市盈率(PE)：</Text>
+                <Text color={valueColor} fontWeight="bold" fontSize="16px">
+                  {data.pe.toFixed(2)}
+                </Text>
+              </HStack>
+              <HStack justify="space-between">
+                <Text color={labelColor}>市净率(PB)：</Text>
+                <Text color={valueColor} fontWeight="bold" fontSize="16px">
+                  {data.pb.toFixed(2)}
+                </Text>
+              </HStack>
+              <HStack justify="space-between">
+                <Text color={labelColor}>流通市值：</Text>
+                <Text color={valueColor} fontWeight="bold" fontSize="16px">
+                  {data.marketCap}
+                </Text>
+              </HStack>
+              <HStack justify="space-between">
+                <Text color={labelColor}>52周波动：</Text>
+                <Text color={valueColor} fontWeight="bold" fontSize="16px">
+                  {formatPrice(data.week52Low)}-{formatPrice(data.week52High)}
+                </Text>
+              </HStack>
+            </VStack>
+          </Box>
+
+          {/* 右栏：主力动态 */}
+          <Box flex="1" borderLeftWidth="1px" borderColor={borderColor} pl={8}>
+            <Text
+              fontSize="14px"
+              fontWeight="bold"
+              color={sectionTitleColor}
+              mb={3}
+            >
+              主力动态
+            </Text>
+            <VStack align="stretch" spacing={2} fontSize="14px">
+              <HStack justify="space-between">
+                <Text color={labelColor}>主力净流入：</Text>
+                <Text color={inflowColor} fontWeight="bold" fontSize="16px">
+                  {formatNetInflow(data.mainNetInflow)}
+                </Text>
+              </HStack>
+              <HStack justify="space-between">
+                <Text color={labelColor}>机构持仓：</Text>
+                <Text color={valueColor} fontWeight="bold" fontSize="16px">
+                  {data.institutionHolding.toFixed(2)}%
+                </Text>
+              </HStack>
+              {/* 买卖比例条 */}
+              <Box mt={1}>
+                <Progress
+                  value={data.buyRatio}
+                  size="sm"
+                  sx={{
+                    '& > div': { bg: upColor },
+                  }}
+                  bg={downColor}
+                  borderRadius="full"
+                />
+                <HStack justify="space-between" mt={1} fontSize="14px">
+                  <Text color={upColor}>买入{data.buyRatio}%</Text>
+                  <Text color={downColor}>卖出{data.sellRatio}%</Text>
+                </HStack>
+              </Box>
+            </VStack>
+          </Box>
+        </Flex>
+      </CardBody>
+    </Card>
+  );
+};
+
+export default StockQuoteCard;

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

@@ -0,0 +1,38 @@
+import type { StockQuoteCardData } from './types';
+
+/**
+ * 贵州茅台 Mock 数据
+ */
+export const mockStockQuoteData: StockQuoteCardData = {
+  // 基础信息
+  name: '贵州茅台',
+  code: '600519.SH',
+  indexTags: ['沪深300'],
+
+  // 价格信息
+  currentPrice: 2178.5,
+  changePercent: 3.65,
+  todayOpen: 2156.0,
+  yesterdayClose: 2101.0,
+  todayHigh: 2185.0,
+  todayLow: 2150.0,
+
+  // 关键指标
+  pe: 38.62,
+  pb: 14.82,
+  marketCap: '2.73万亿',
+  week52Low: 1980,
+  week52High: 2350,
+
+  // 主力动态
+  mainNetInflow: 1.28,
+  institutionHolding: 72.35,
+  buyRatio: 85,
+  sellRatio: 15,
+
+  // 更新时间
+  updateTime: '2025-12-03 14:30:25',
+
+  // 自选状态
+  isFavorite: false,
+};

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

@@ -0,0 +1,56 @@
+/**
+ * StockQuoteCard 组件类型定义
+ */
+
+/**
+ * 股票行情卡片数据
+ */
+export interface StockQuoteCardData {
+  // 基础信息
+  name: string; // 股票名称
+  code: string; // 股票代码
+  indexTags: string[]; // 指数标签（如 沪深300、上证50）
+  industry?: string; // 所属行业（二级），如 "银行"
+  industryL1?: string; // 一级行业，如 "金融"
+
+  // 价格信息
+  currentPrice: number; // 当前价格
+  changePercent: number; // 涨跌幅（百分比，如 3.65 表示 +3.65%）
+  todayOpen: number; // 今开
+  yesterdayClose: number; // 昨收
+  todayHigh: number; // 今日最高
+  todayLow: number; // 今日最低
+
+  // 关键指标
+  pe: number; // 市盈率
+  pb: number; // 市净率
+  marketCap: string; // 流通市值（已格式化，如 "2.73万亿"）
+  week52Low: number; // 52周最低
+  week52High: number; // 52周最高
+
+  // 主力动态
+  mainNetInflow: number; // 主力净流入（亿）
+  institutionHolding: number; // 机构持仓比例（百分比）
+  buyRatio: number; // 买入比例（百分比）
+  sellRatio: number; // 卖出比例（百分比）
+
+  // 更新时间
+  updateTime: string; // 格式：YYYY-MM-DD HH:mm:ss
+
+  // 自选状态
+  isFavorite?: boolean; // 是否已加入自选
+}
+
+/**
+ * StockQuoteCard 组件 Props
+ */
+export interface StockQuoteCardProps {
+  data?: StockQuoteCardData;
+  isLoading?: boolean;
+  // 自选股相关（与 WatchlistButton 接口保持一致）
+  isInWatchlist?: boolean; // 是否在自选股中
+  isWatchlistLoading?: boolean; // 自选股操作加载中
+  onWatchlistToggle?: () => void; // 自选股切换回调
+  // 分享
+  onShare?: () => void; // 分享回调
+}

src/views/Company/constants/index.js

@@ -0,0 +1,55 @@
+// src/views/Company/constants/index.js
+// 公司详情页面常量配置
+
+import { FaChartLine, FaMoneyBillWave, FaChartBar, FaInfoCircle, FaBrain, FaNewspaper } from 'react-icons/fa';
+
+/**
+ * Tab 配置
+ * @type {Array<{key: string, name: string, icon: React.ComponentType}>}
+ */
+export const COMPANY_TABS = [
+  { key: 'overview', name: '公司概览', icon: FaInfoCircle },
+  { key: 'analysis', name: '深度分析', icon: FaBrain },
+  { key: 'market', name: '股票行情', icon: FaChartLine },
+  { key: 'financial', name: '财务全景', icon: FaMoneyBillWave },
+  { key: 'forecast', name: '盈利预测', icon: FaChartBar },
+  { key: 'tracking', name: '动态跟踪', icon: FaNewspaper },
+];
+
+/**
+ * Tab 选中状态样式
+ */
+export const TAB_SELECTED_STYLE = {
+  transform: 'scale(1.02)',
+  transition: 'all 0.2s',
+};
+
+/**
+ * Toast 消息配置
+ */
+export const TOAST_MESSAGES = {
+  WATCHLIST_ADD: { title: '已加入自选', status: 'success', duration: 1500 },
+  WATCHLIST_REMOVE: { title: '已从自选移除', status: 'info', duration: 1500 },
+  WATCHLIST_ERROR: { title: '操作失败，请稍后重试', status: 'error', duration: 2000 },
+  INVALID_CODE: { title: '无效的股票代码', status: 'error', duration: 2000 },
+  LOGIN_REQUIRED: { title: '请先登录后再加入自选', status: 'warning', duration: 2000 },
+};
+
+/**
+ * 默认股票代码
+ */
+export const DEFAULT_STOCK_CODE = '000001';
+
+/**
+ * URL 参数名
+ */
+export const URL_PARAM_NAME = 'scode';
+
+/**
+ * 根据索引获取 Tab 名称
+ * @param {number} index - Tab 索引
+ * @returns {string} Tab 名称
+ */
+export const getTabNameByIndex = (index) => {
+  return COMPANY_TABS[index]?.name || 'Unknown';
+};

src/views/Company/hooks/useCompanyStock.js

@@ -0,0 +1,91 @@
+// 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

@@ -0,0 +1,166 @@
+// 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/hooks/useStockQuote.js

@@ -0,0 +1,102 @@
+// src/views/Company/hooks/useStockQuote.js
+// 股票行情数据获取 Hook
+
+import { useState, useEffect } from 'react';
+import { stockService } from '@services/eventService';
+import { logger } from '@utils/logger';
+
+/**
+ * 将 API 响应数据转换为 StockQuoteCard 所需格式
+ */
+const transformQuoteData = (apiData, stockCode) => {
+  if (!apiData) return null;
+
+  return {
+    // 基础信息
+    name: apiData.name || apiData.stock_name || '未知',
+    code: apiData.code || apiData.stock_code || stockCode,
+    indexTags: apiData.index_tags || apiData.indexTags || [],
+    industry: apiData.industry || apiData.sw_industry_l2 || '',
+    industryL1: apiData.industry_l1 || apiData.sw_industry_l1 || '',
+
+    // 价格信息
+    currentPrice: apiData.current_price || apiData.currentPrice || apiData.close || 0,
+    changePercent: apiData.change_percent || apiData.changePercent || apiData.pct_chg || 0,
+    todayOpen: apiData.today_open || apiData.todayOpen || apiData.open || 0,
+    yesterdayClose: apiData.yesterday_close || apiData.yesterdayClose || apiData.pre_close || 0,
+    todayHigh: apiData.today_high || apiData.todayHigh || apiData.high || 0,
+    todayLow: apiData.today_low || apiData.todayLow || apiData.low || 0,
+
+    // 关键指标
+    pe: apiData.pe || apiData.pe_ttm || 0,
+    pb: apiData.pb || apiData.pb_mrq || 0,
+    marketCap: apiData.market_cap || apiData.marketCap || apiData.circ_mv || '0',
+    week52Low: apiData.week52_low || apiData.week52Low || 0,
+    week52High: apiData.week52_high || apiData.week52High || 0,
+
+    // 主力动态
+    mainNetInflow: apiData.main_net_inflow || apiData.mainNetInflow || 0,
+    institutionHolding: apiData.institution_holding || apiData.institutionHolding || 0,
+    buyRatio: apiData.buy_ratio || apiData.buyRatio || 50,
+    sellRatio: apiData.sell_ratio || apiData.sellRatio || 50,
+
+    // 更新时间
+    updateTime: apiData.update_time || apiData.updateTime || new Date().toLocaleString(),
+  };
+};
+
+/**
+ * 股票行情数据获取 Hook
+ *
+ * @param {string} stockCode - 股票代码
+ * @returns {Object} { data, isLoading, error, refetch }
+ */
+export const useStockQuote = (stockCode) => {
+  const [data, setData] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    if (!stockCode) {
+      setData(null);
+      return;
+    }
+
+    const fetchQuote = async () => {
+      setIsLoading(true);
+      setError(null);
+
+      try {
+        logger.debug('useStockQuote', '获取股票行情', { stockCode });
+        const quotes = await stockService.getQuotes([stockCode]);
+
+        // API 返回格式: { [stockCode]: quoteData }
+        const quoteData = quotes?.[stockCode] || quotes;
+        const transformedData = transformQuoteData(quoteData, stockCode);
+
+        logger.debug('useStockQuote', '行情数据转换完成', { stockCode, hasData: !!transformedData });
+        setData(transformedData);
+      } catch (err) {
+        logger.error('useStockQuote', '获取行情失败', err);
+        setError(err);
+        setData(null);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchQuote();
+  }, [stockCode]);
+
+  // 手动刷新
+  const refetch = () => {
+    if (stockCode) {
+      setData(null);
+      // 触发 useEffect 重新执行
+    }
+  };
+
+  return { data, isLoading, error, refetch };
+};
+
+export default useStockQuote;

src/views/Company/index.js

@@ -1,64 +1,52 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { useSearchParams } from 'react-router-dom';
-import { useSelector, useDispatch } from 'react-redux';
+// src/views/Company/index.js
+// 公司详情页面入口 - 纯组合层
+
+import React, { useEffect, useRef } from 'react';
+import { Container, VStack } from '@chakra-ui/react';
+import { useDispatch } from 'react-redux';
 import { loadAllStocks } from '@store/slices/stockSlice';
-import { AutoComplete } from 'antd';
-import { stockService } from '@services/stockService';
-import {
-  Container,
-  Heading,
-  Card,
-  CardBody,
-  Tabs,
-  TabList,
-  TabPanels,
-  Tab,
-  TabPanel,
-  HStack,
-  VStack,
-  Button,
-  Text,
-  Badge,
-  Divider,
-  Icon,
-  useColorModeValue,
-  useColorMode,
-  IconButton,
-  useToast,
-} from '@chakra-ui/react';
-import { SearchIcon, MoonIcon, SunIcon, StarIcon } from '@chakra-ui/icons';
-import { FaChartLine, FaMoneyBillWave, FaChartBar, FaInfoCircle } from 'react-icons/fa';
-import { useAuth } from '../../contexts/AuthContext';
-import { logger } from '../../utils/logger';
-import { getApiBase } from '../../utils/apiConfig';
-import FinancialPanorama from './FinancialPanorama';
-import ForecastReport from './ForecastReport';
-import MarketDataView from './MarketDataView';
-import CompanyOverview from './CompanyOverview';
-// 导入 PostHog 追踪 Hook
+
+// 自定义 Hooks
+import { useCompanyStock } from './hooks/useCompanyStock';
+import { useCompanyWatchlist } from './hooks/useCompanyWatchlist';
 import { useCompanyEvents } from './hooks/useCompanyEvents';
+import { useStockQuote } from './hooks/useStockQuote';
 
+// 页面组件
+import CompanyHeader from './components/CompanyHeader';
+import StockQuoteCard from './components/StockQuoteCard';
+import CompanyTabs from './components/CompanyTabs';
+
+/**
+ * 公司详情页面
+ *
+ * 功能：
+ * - 股票搜索与代码管理
+ * - 自选股添加/移除
+ * - 多维度数据展示（概览、行情、财务、预测）
+ * - PostHog 事件追踪
+ */
 const CompanyIndex = () => {
-  const [searchParams, setSearchParams] = useSearchParams();
-  const [stockCode, setStockCode] = useState(searchParams.get('scode') || '000001');
-  const [inputCode, setInputCode] = useState(stockCode);
-  const [stockOptions, setStockOptions] = useState([]);
-  const { colorMode, toggleColorMode } = useColorMode();
-  const toast = useToast();
-  const { isAuthenticated } = useAuth();
-
-  // 从 Redux 获取股票列表数据
   const dispatch = useDispatch();
-  const allStocks = useSelector((state) => state.stock.allStocks);
 
-  // 确保股票数据已加载
+  // 1. 先获取股票代码（不带追踪回调）
+  const {
+    stockCode,
+    inputCode,
+    setInputCode,
+    handleSearch,
+    handleKeyDown,
+  } = useCompanyStock();
+
+  // 加载全部股票列表（用于模糊搜索）
   useEffect(() => {
-    if (!allStocks || allStocks.length === 0) {
-      dispatch(loadAllStocks());
-    }
-  }, [dispatch, allStocks]);
+    dispatch(loadAllStocks());
+  }, [dispatch]);
 
-  // 🎯 PostHog 事件追踪
+  // 2. 获取股票行情数据
+  const { data: quoteData, isLoading: isQuoteLoading } = useStockQuote(stockCode);
+
+  // 3. 再初始化事件追踪（传入 stockCode）
   const {
     trackStockSearched,
     trackTabChanged,
@@ -66,321 +54,54 @@ const CompanyIndex = () => {
     trackWatchlistRemoved,
   } = useCompanyEvents({ stockCode });
 
-  // Tab 索引状态（用于追踪 Tab 切换）
-  const [currentTabIndex, setCurrentTabIndex] = useState(0);
+  // 3. 自选股管理
+  const {
+    isInWatchlist,
+    isLoading: isWatchlistLoading,
+    toggle: handleWatchlistToggle,
+  } = useCompanyWatchlist({
+    stockCode,
+    tracking: {
+      onAdd: trackWatchlistAdded,
+      onRemove: trackWatchlistRemoved,
+    },
+  });
 
-  const bgColor = useColorModeValue('white', 'gray.800');
-  const tabBg = useColorModeValue('gray.50', 'gray.700');
-  const activeBg = useColorModeValue('blue.500', 'blue.400');
-
-  const [isInWatchlist, setIsInWatchlist] = useState(false);
-  const [isWatchlistLoading, setIsWatchlistLoading] = useState(false);
-  
-  const loadWatchlistStatus = useCallback(async () => {
-    try {
-      const base = getApiBase();
-      const resp = await fetch(base + '/api/account/watchlist', {
-        credentials: 'include',
-        cache: 'no-store',
-        headers: { 'Cache-Control': 'no-cache' }
-      });
-      if (!resp.ok) {
-        setIsInWatchlist(false);
-        return;
-      }
-      const data = await resp.json();
-      const list = Array.isArray(data?.data) ? data.data : [];
-      const codes = new Set(list.map((item) => item.stock_code));
-      setIsInWatchlist(codes.has(stockCode));
-    } catch (e) {
-      setIsInWatchlist(false);
-    }
-  }, [stockCode]);
-  
-  // 当URL参数变化时更新股票代码
+  // 4. 监听 stockCode 变化，触发搜索追踪
+  const prevStockCodeRef = useRef(stockCode);
   useEffect(() => {
-    const scode = searchParams.get('scode');
-    if (scode && scode !== stockCode) {
-      setStockCode(scode);
-      setInputCode(scode);
+    if (stockCode !== prevStockCodeRef.current) {
+      trackStockSearched(stockCode, prevStockCodeRef.current);
+      prevStockCodeRef.current = stockCode;
     }
-  }, [searchParams, stockCode]);
-  
-  useEffect(() => {
-    loadWatchlistStatus();
-  }, [loadWatchlistStatus]);
-  
-  const handleSearch = () => {
-    if (inputCode && inputCode !== stockCode) {
-      // 🎯 追踪股票搜索
-      trackStockSearched(inputCode, stockCode);
-
-      setStockCode(inputCode);
-      setSearchParams({ scode: inputCode });
-    }
-  };
-  
-  const handleKeyPress = (e) => {
-    if (e.key === 'Enter') {
-      handleSearch();
-    }
-  };
-
-  // 模糊搜索股票（由 onSearch 触发）
-  const handleStockSearch = (value) => {
-    if (!value || !allStocks || allStocks.length === 0) {
-      setStockOptions([]);
-      return;
-    }
-    const results = stockService.fuzzySearch(value, allStocks, 10);
-    const options = results.map((stock) => ({
-      value: stock.code,
-      label: `${stock.code} ${stock.name}`,
-    }));
-    setStockOptions(options);
-  };
-
-  // 选中股票
-  const handleStockSelect = (value) => {
-    setInputCode(value);
-    setStockOptions([]);
-    if (value !== stockCode) {
-      trackStockSearched(value, stockCode);
-      setStockCode(value);
-      setSearchParams({ scode: value });
-    }
-  };
-
-  const handleWatchlistToggle = async () => {
-    if (!stockCode) {
-      logger.warn('CompanyIndex', 'handleWatchlistToggle', '无效的股票代码', { stockCode });
-      toast({ title: '无效的股票代码', status: 'error', duration: 2000 });
-      return;
-    }
-    if (!isAuthenticated) {
-      logger.warn('CompanyIndex', 'handleWatchlistToggle', '用户未登录', { stockCode });
-      toast({ title: '请先登录后再加入自选', status: 'warning', duration: 2000 });
-      return;
-    }
-    try {
-      setIsWatchlistLoading(true);
-      const base = getApiBase();
-      if (isInWatchlist) {
-        logger.debug('CompanyIndex', '准备从自选移除', { stockCode });
-        const url = base + `/api/account/watchlist/${stockCode}`;
-        logger.api.request('DELETE', url, { stockCode });
-
-        const resp = await fetch(url, {
-          method: 'DELETE',
-          credentials: 'include'
-        });
-
-        logger.api.response('DELETE', url, resp.status);
-        if (!resp.ok) throw new Error('删除失败');
-
-        // 🎯 追踪移除自选
-        trackWatchlistRemoved(stockCode);
-
-        setIsInWatchlist(false);
-        toast({ title: '已从自选移除', status: 'info', duration: 1500 });
-      } else {
-        logger.debug('CompanyIndex', '准备添加到自选', { stockCode });
-        const url = base + '/api/account/watchlist';
-        const body = { stock_code: stockCode };
-        logger.api.request('POST', url, body);
-
-        const resp = await fetch(url, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          credentials: 'include',
-          body: JSON.stringify(body)
-        });
-
-        logger.api.response('POST', url, resp.status);
-        if (!resp.ok) throw new Error('添加失败');
-
-        // 🎯 追踪加入自选
-        trackWatchlistAdded(stockCode);
-
-        setIsInWatchlist(true);
-        toast({ title: '已加入自选', status: 'success', duration: 1500 });
-      }
-    } catch (error) {
-      logger.error('CompanyIndex', 'handleWatchlistToggle', error, { stockCode, isInWatchlist });
-      toast({ title: '操作失败，请稍后重试', status: 'error', duration: 2000 });
-    } finally {
-      setIsWatchlistLoading(false);
-    }
-  };
+  }, [stockCode, trackStockSearched]);
 
   return (
-    <Container maxW="container.xl" py={5}>
-      {/* 页面标题和股票搜索 */}
-      <VStack align="stretch" spacing={5}>
-        <Card bg={bgColor} shadow="md">
-          <CardBody>
-            <HStack justify="space-between" align="center">
-              <VStack align="start" spacing={1}>
-                <Heading size="lg">个股详情</Heading>
-                <Text color="gray.600" fontSize="sm">
-                  查看股票实时行情、财务数据和盈利预测
-                </Text>
-              </VStack>
-              
-              <HStack spacing={3}>
-                <AutoComplete
-                  value={inputCode}
-                  options={stockOptions}
-                  onSearch={handleStockSearch}
-                  onSelect={handleStockSelect}
-                  onChange={(value) => setInputCode(value)}
-                  placeholder="输入股票代码或名称"
-                  style={{ width: 260 }}
-                  size="large"
-                  onKeyDown={(e) => {
-                    if (e.key === 'Enter') {
-                      handleSearch();
-                    }
-                  }}
-                />
-                <Button 
-                  colorScheme="blue" 
-                  size="lg"
-                  onClick={handleSearch}
-                  leftIcon={<SearchIcon />}
-                >
-                  查询
-                </Button>
-                <Button
-                  colorScheme={isInWatchlist ? 'yellow' : 'teal'}
-                  variant={isInWatchlist ? 'solid' : 'outline'}
-                  size="lg"
-                  onClick={handleWatchlistToggle}
-                  leftIcon={<StarIcon />}
-                  isLoading={isWatchlistLoading}
-                >
-                  {isInWatchlist ? '已在自选' : '加入自选'}
-                </Button>
-                <IconButton
-                  icon={colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
-                  onClick={toggleColorMode}
-                  variant="outline"
-                  colorScheme={colorMode === 'light' ? 'blue' : 'yellow'}
-                  size="lg"
-                  aria-label="Toggle color mode"
-                />
-              </HStack>
-            </HStack>
-            
-            {/* 当前股票信息 */}
-            <HStack mt={4} spacing={4}>
-              <Badge colorScheme="blue" fontSize="md" px={3} py={1}>
-                股票代码: {stockCode}
-              </Badge>
-              <Text fontSize="sm" color="gray.600">
-                更新时间: {new Date().toLocaleString()}
-              </Text>
-            </HStack>
-          </CardBody>
-        </Card>
-        
-        {/* 数据展示区域 */}
-        <Card bg={bgColor} shadow="lg">
-          <CardBody p={0}>
-            <Tabs
-              variant="soft-rounded"
-              colorScheme="blue"
-              size="lg"
-              index={currentTabIndex}
-              onChange={(index) => {
-                const tabNames = ['公司概览', '股票行情', '财务全景', '盈利预测'];
-                // 🎯 追踪 Tab 切换
-                trackTabChanged(index, tabNames[index], currentTabIndex);
-                setCurrentTabIndex(index);
-              }}
-            >
-              <TabList p={4} bg={tabBg}>
-                <Tab 
-                  _selected={{ 
-                    bg: activeBg, 
-                    color: 'white',
-                    transform: 'scale(1.02)',
-                    transition: 'all 0.2s'
-                  }}
-                  mr={2}
-                >
-                  <HStack spacing={2}>
-                    <Icon as={FaInfoCircle} />
-                    <Text>公司概览</Text>
-                  </HStack>
-                </Tab>
-                <Tab 
-                  _selected={{ 
-                    bg: activeBg, 
-                    color: 'white',
-                    transform: 'scale(1.02)',
-                    transition: 'all 0.2s'
-                  }}
-                  mr={2}
-                >
-                  <HStack spacing={2}>
-                    <Icon as={FaChartLine} />
-                    <Text>股票行情</Text>
-                  </HStack>
-                </Tab>
-                <Tab 
-                  _selected={{ 
-                    bg: activeBg, 
-                    color: 'white',
-                    transform: 'scale(1.02)',
-                    transition: 'all 0.2s'
-                  }}
-                  mr={2}
-                >
-                  <HStack spacing={2}>
-                    <Icon as={FaMoneyBillWave} />
-                    <Text>财务全景</Text>
-                  </HStack>
-                </Tab>
-                <Tab 
-                  _selected={{ 
-                    bg: activeBg, 
-                    color: 'white',
-                    transform: 'scale(1.02)',
-                    transition: 'all 0.2s'
-                  }}
-                >
-                  <HStack spacing={2}>
-                    <Icon as={FaChartBar} />
-                    <Text>盈利预测</Text>
-                  </HStack>
-                </Tab>
-              </TabList>
-              
-              <Divider />
-              
-              <TabPanels>
-                <TabPanel p={6}>
-                  <CompanyOverview stockCode={stockCode} />
-                </TabPanel>
-                <TabPanel p={6}>
-                  <MarketDataView stockCode={stockCode} />
-                </TabPanel>
-                <TabPanel p={6}>
-                  <FinancialPanorama stockCode={stockCode} />
-                </TabPanel>
-                <TabPanel p={6}>
-                  <ForecastReport stockCode={stockCode} />
-                </TabPanel>
-              </TabPanels>
-            </Tabs>
-          </CardBody>
-        </Card>
+    <Container maxW="container.xl" py={0} bg='#1A202C'>
+      <VStack align="stretch" spacing={0}>
+        {/* 页面头部：标题、搜索 */}
+        <CompanyHeader
+          inputCode={inputCode}
+          onInputChange={setInputCode}
+          onSearch={handleSearch}
+          onKeyDown={handleKeyDown}
+          bgColor="#1A202C"
+        />
+
+        {/* 股票行情卡片：价格、关键指标、主力动态、自选股按钮 */}
+        <StockQuoteCard
+          data={quoteData}
+          isLoading={isQuoteLoading}
+          isInWatchlist={isInWatchlist}
+          isWatchlistLoading={isWatchlistLoading}
+          onWatchlistToggle={handleWatchlistToggle}
+        />
+
+        {/* Tab 切换区域：概览、行情、财务、预测 */}
+        <CompanyTabs stockCode={stockCode} onTabChange={trackTabChanged}  bgColor="#1A202C"/>
       </VStack>
     </Container>
   );
 };
 
 export default CompanyIndex;
-
-