feat: 添加股票行情卡片

将 2682 行的大型组件拆分为 4 个模块化文件：
- index.js (~550行): 状态管理 + 数据加载 + Tab 容器
- DeepAnalysisTab.js (~1800行): 深度分析 Tab（核心定位、竞争力、产业链）
- BasicInfoTab.js (~940行): 基本信息 Tab（股权结构、管理团队、公告）
- NewsEventsTab.js (~540行): 新闻动态 Tab（事件列表 + 分页）

重构内容：
- 提取 8 个内部子组件到对应 Tab 文件
- 修复 useColorModeValue 在 map 回调中调用的 hooks 规则违规
- 清理未使用的 imports
- 完善公告详情模态框（补全 ModalFooter）

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

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

src/components/InvestmentCalendar/index.js

@@ -546,7 +546,9 @@ const InvestmentCalendar = () => {
                     {concepts && concepts.length > 0 ? (
                         concepts.slice(0, 3).map((concept, index) => (
                             <Tag key={index} icon={<TagsOutlined />}>
-                                {Array.isArray(concept) ? concept[0] : concept}
+                                {typeof concept === 'string'
+                                    ? concept
+                                    : (concept?.concept || concept?.name || '未知')}
                             </Tag>
                         ))
                     ) : (
@@ -940,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/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

@@ -340,6 +340,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) => {
@@ -481,7 +501,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,59 @@
+// src/views/Company/components/CompanyHeader/SearchBar.js
+// 股票搜索栏组件
+
+import React from 'react';
+import {
+  HStack,
+  Input,
+  Button,
+  InputGroup,
+  InputLeftElement,
+} 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.onKeyPress - 键盘事件回调
+ */
+const SearchBar = ({
+  inputCode,
+  onInputChange,
+  onSearch,
+  onKeyPress,
+}) => {
+  return (
+    <HStack spacing={3}>
+      <InputGroup size="lg" maxW="300px">
+        <InputLeftElement pointerEvents="none">
+          <SearchIcon color="gray.400" />
+        </InputLeftElement>
+        <Input
+          placeholder="输入股票代码"
+          value={inputCode}
+          onChange={(e) => onInputChange(e.target.value)}
+          onKeyPress={onKeyPress}
+          borderRadius="md"
+          _focus={{
+            borderColor: 'blue.500',
+            boxShadow: '0 0 0 1px #3182ce',
+          }}
+        />
+      </InputGroup>
+      <Button
+        colorScheme="blue"
+        size="lg"
+        onClick={onSearch}
+        leftIcon={<SearchIcon />}
+      >
+        查询
+      </Button>
+    </HStack>
+  );
+};
+
+export default SearchBar;

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

@@ -0,0 +1,35 @@
+// src/views/Company/components/CompanyHeader/WatchlistButton.js
+// 自选股按钮组件
+
+import React from 'react';
+import { Button } from '@chakra-ui/react';
+import { StarIcon } from '@chakra-ui/icons';
+
+/**
+ * 自选股按钮组件
+ *
+ * @param {Object} props
+ * @param {boolean} props.isInWatchlist - 是否已在自选股中
+ * @param {boolean} props.isLoading - 是否正在加载
+ * @param {Function} props.onClick - 点击回调
+ */
+const WatchlistButton = ({
+  isInWatchlist,
+  isLoading,
+  onClick,
+}) => {
+  return (
+    <Button
+      colorScheme={isInWatchlist ? 'yellow' : 'teal'}
+      variant={isInWatchlist ? 'solid' : 'outline'}
+      size="lg"
+      onClick={onClick}
+      leftIcon={<StarIcon />}
+      isLoading={isLoading}
+    >
+      {isInWatchlist ? '已关注' : '关注'}
+    </Button>
+  );
+};
+
+export default WatchlistButton;

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

@@ -0,0 +1,94 @@
+// src/views/Company/components/CompanyHeader/index.js
+// 公司详情页面头部区域组件
+
+import React from 'react';
+import {
+  Card,
+  CardBody,
+  HStack,
+  VStack,
+  Heading,
+  Text,
+  Badge,
+} from '@chakra-ui/react';
+
+import SearchBar from './SearchBar';
+import WatchlistButton from './WatchlistButton';
+
+/**
+ * 公司详情页面头部区域组件
+ *
+ * 包含：
+ * - 页面标题和描述
+ * - 股票搜索栏
+ * - 自选股按钮
+ * - 当前股票代码显示
+ *
+ * @param {Object} props
+ * @param {string} props.stockCode - 当前股票代码
+ * @param {string} props.inputCode - 搜索输入框值
+ * @param {Function} props.onInputChange - 输入变化回调
+ * @param {Function} props.onSearch - 搜索回调
+ * @param {Function} props.onKeyPress - 键盘事件回调
+ * @param {boolean} props.isInWatchlist - 是否在自选股中
+ * @param {boolean} props.isWatchlistLoading - 自选股操作加载中
+ * @param {Function} props.onWatchlistToggle - 自选股切换回调
+ * @param {string} props.bgColor - 背景颜色
+ */
+const CompanyHeader = ({
+  stockCode,
+  inputCode,
+  onInputChange,
+  onSearch,
+  onKeyPress,
+  isInWatchlist,
+  isWatchlistLoading,
+  onWatchlistToggle,
+  bgColor,
+}) => {
+  return (
+    <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}>
+            {/* 搜索栏 */}
+            <SearchBar
+              inputCode={inputCode}
+              onInputChange={onInputChange}
+              onSearch={onSearch}
+              onKeyPress={onKeyPress}
+            />
+
+            {/* 自选股按钮 */}
+            <WatchlistButton
+              isInWatchlist={isInWatchlist}
+              isLoading={isWatchlistLoading}
+              onClick={onWatchlistToggle}
+            />
+          </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>
+  );
+};
+
+export default CompanyHeader;

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

@@ -0,0 +1,941 @@
+// src/views/Company/components/CompanyOverview/BasicInfoTab.js
+// 基本信息 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,
+} from "@chakra-ui/react";
+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>
+  );
+};
+
+/**
+ * 基本信息 Tab 组件
+ *
+ * Props:
+ * - basicInfo: 公司基本信息
+ * - actualControl: 实际控制人数组
+ * - concentration: 股权集中度数组
+ * - topShareholders: 前十大股东数组
+ * - topCirculationShareholders: 前十大流通股东数组
+ * - management: 管理层数组
+ * - announcements: 公告列表数组
+ * - branches: 分支机构数组
+ * - disclosureSchedule: 披露日程数组
+ * - cardBg: 卡片背景色
+ * - onAnnouncementClick: 公告点击回调 (announcement) => void
+ */
+const BasicInfoTab = ({
+  basicInfo,
+  actualControl = [],
+  concentration = [],
+  topShareholders = [],
+  topCirculationShareholders = [],
+  management = [],
+  announcements = [],
+  branches = [],
+  disclosureSchedule = [],
+  cardBg,
+}) => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [selectedAnnouncement, setSelectedAnnouncement] = React.useState(null);
+
+  // 管理层职位分类
+  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;
+  };
+
+  // 计算股权集中度变化
+  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);
+  };
+
+  // 处理公告点击
+  const handleAnnouncementClick = (announcement) => {
+    setSelectedAnnouncement(announcement);
+    onOpen();
+  };
+
+  return (
+    <>
+      <Card bg={cardBg} shadow="md">
+        <CardBody>
+          <Tabs 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>
+                <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>
+              </TabPanel>
+
+              {/* 管理团队标签页 */}
+              <TabPanel>
+                <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>
+              </TabPanel>
+
+              {/* 公司公告标签页 */}
+              <TabPanel>
+                <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>
+              </TabPanel>
+
+              {/* 分支机构标签页 */}
+              <TabPanel>
+                {branches.length > 0 ? (
+                  <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>
+                ) : (
+                  <Center h="200px">
+                    <VStack>
+                      <Icon as={FaSitemap} boxSize={12} color="gray.300" />
+                      <Text color="gray.500">暂无分支机构信息</Text>
+                    </VStack>
+                  </Center>
+                )}
+              </TabPanel>
+
+              {/* 工商信息标签页 */}
+              <TabPanel>
+                {basicInfo && (
+                  <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>
+                )}
+              </TabPanel>
+            </TabPanels>
+          </Tabs>
+        </CardBody>
+      </Card>
+
+      {/* 公告详情模态框 */}
+      <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>
+    </>
+  );
+};
+
+export default BasicInfoTab;

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

@@ -0,0 +1,541 @@
+// 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,
+  useColorModeValue,
+} 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 hoverBg = useColorModeValue("gray.50", "gray.700");
+
+  // 事件类型图标映射
+  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: hoverBg,
+                          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/index.js

@@ -0,0 +1,548 @@
+// src/views/Company/components/CompanyOverview/index.js
+// 公司概览主组件 - 状态管理 + Tab 容器
+
+import React, { useState, useEffect } from "react";
+import {
+  Box,
+  VStack,
+  HStack,
+  Text,
+  Badge,
+  Card,
+  CardBody,
+  Heading,
+  SimpleGrid,
+  Divider,
+  Spinner,
+  Center,
+  Tabs,
+  TabList,
+  TabPanels,
+  Tab,
+  TabPanel,
+  useColorModeValue,
+  Icon,
+  Grid,
+  GridItem,
+  Stat,
+  StatLabel,
+  StatNumber,
+  Container,
+  Circle,
+  Link,
+} from "@chakra-ui/react";
+
+import {
+  FaBuilding,
+  FaMapMarkerAlt,
+  FaUserShield,
+  FaBriefcase,
+  FaCalendarAlt,
+  FaGlobe,
+  FaEnvelope,
+  FaPhone,
+  FaCrown,
+  FaBrain,
+  FaInfoCircle,
+  FaNewspaper,
+} from "react-icons/fa";
+
+import { ExternalLinkIcon } from "@chakra-ui/icons";
+
+import { logger } from "@utils/logger";
+import { getApiBase } from "@utils/apiConfig";
+
+// 子组件
+import DeepAnalysisTab from "./DeepAnalysisTab";
+import BasicInfoTab from "./BasicInfoTab";
+import NewsEventsTab from "./NewsEventsTab";
+
+// API配置
+const API_BASE_URL = getApiBase();
+
+// 格式化工具
+const formatUtils = {
+  formatRegisteredCapital: (value) => {
+    if (!value && value !== 0) return "-";
+    const absValue = Math.abs(value);
+    if (absValue >= 100000) {
+      return (value / 10000).toFixed(2) + "亿元";
+    }
+    return value.toFixed(2) + "万元";
+  },
+  formatDate: (dateString) => {
+    if (!dateString) return "-";
+    return new Date(dateString).toLocaleDateString("zh-CN");
+  },
+};
+
+// 主组件
+const CompanyAnalysisComplete = ({ stockCode: propStockCode }) => {
+  const [stockCode, setStockCode] = useState(propStockCode || "000001");
+  const [loading, setLoading] = useState(false);
+
+  // 监听props中的stockCode变化
+  useEffect(() => {
+    if (propStockCode && propStockCode !== stockCode) {
+      setStockCode(propStockCode);
+    }
+  }, [propStockCode, stockCode]);
+
+  // 企业深度分析数据
+  const [comprehensiveData, setComprehensiveData] = useState(null);
+  const [valueChainData, setValueChainData] = useState(null);
+  const [keyFactorsData, setKeyFactorsData] = useState(null);
+
+  // 股票概览数据
+  const [basicInfo, setBasicInfo] = useState(null);
+  const [actualControl, setActualControl] = useState([]);
+  const [concentration, setConcentration] = useState([]);
+  const [management, setManagement] = useState([]);
+  const [topCirculationShareholders, setTopCirculationShareholders] = useState(
+    []
+  );
+  const [topShareholders, setTopShareholders] = useState([]);
+  const [branches, setBranches] = useState([]);
+  const [announcements, setAnnouncements] = useState([]);
+  const [disclosureSchedule, setDisclosureSchedule] = useState([]);
+
+  // 新闻动态数据
+  const [newsEvents, setNewsEvents] = useState([]);
+  const [newsLoading, setNewsLoading] = useState(false);
+  const [newsSearchQuery, setNewsSearchQuery] = useState("");
+  const [newsPagination, setNewsPagination] = useState({
+    page: 1,
+    per_page: 10,
+    total: 0,
+    pages: 0,
+    has_next: false,
+    has_prev: false,
+  });
+
+  const [_error, setError] = useState(null);
+
+  const bgColor = useColorModeValue("gray.50", "gray.900");
+  const cardBg = useColorModeValue("white", "gray.800");
+
+  // 业务板块详情展开状态
+  const [expandedSegments, setExpandedSegments] = useState({});
+
+  // 切换业务板块展开状态
+  const toggleSegmentExpansion = (segmentIndex) => {
+    setExpandedSegments((prev) => ({
+      ...prev,
+      [segmentIndex]: !prev[segmentIndex],
+    }));
+  };
+
+  // 加载数据
+  const loadData = async () => {
+    setLoading(true);
+    setError(null);
+
+    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()),
+        // 股票概览数据
+        fetch(`${API_BASE_URL}/api/stock/${stockCode}/basic-info`).then((r) =>
+          r.json()
+        ),
+        fetch(
+          `${API_BASE_URL}/api/stock/${stockCode}/actual-control`
+        ).then((r) => r.json()),
+        fetch(
+          `${API_BASE_URL}/api/stock/${stockCode}/concentration`
+        ).then((r) => r.json()),
+        fetch(
+          `${API_BASE_URL}/api/stock/${stockCode}/management?active_only=true`
+        ).then((r) => r.json()),
+        fetch(
+          `${API_BASE_URL}/api/stock/${stockCode}/top-circulation-shareholders?limit=10`
+        ).then((r) => r.json()),
+        fetch(
+          `${API_BASE_URL}/api/stock/${stockCode}/top-shareholders?limit=10`
+        ).then((r) => r.json()),
+        fetch(`${API_BASE_URL}/api/stock/${stockCode}/branches`).then((r) =>
+          r.json()
+        ),
+        fetch(
+          `${API_BASE_URL}/api/stock/${stockCode}/announcements?limit=20`
+        ).then((r) => r.json()),
+        fetch(
+          `${API_BASE_URL}/api/stock/${stockCode}/disclosure-schedule`
+        ).then((r) => r.json()),
+      ];
+
+      const [
+        comprehensiveRes,
+        valueChainRes,
+        keyFactorsRes,
+        basicRes,
+        actualRes,
+        concentrationRes,
+        managementRes,
+        circulationRes,
+        shareholdersRes,
+        branchesRes,
+        announcementsRes,
+        disclosureRes,
+      ] = await Promise.all(requests);
+
+      // 设置深度分析数据
+      if (comprehensiveRes.success) setComprehensiveData(comprehensiveRes.data);
+      if (valueChainRes.success) setValueChainData(valueChainRes.data);
+      if (keyFactorsRes.success) setKeyFactorsData(keyFactorsRes.data);
+
+      // 设置股票概览数据
+      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);
+    } catch (err) {
+      setError(err.message);
+      logger.error("CompanyOverview", "loadData", err, { stockCode });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (stockCode) {
+      loadData();
+    }
+  }, [stockCode]);
+
+  // 加载新闻事件
+  const loadNewsEvents = async (page = 1, searchQuery = "") => {
+    setNewsLoading(true);
+    try {
+      const params = new URLSearchParams({
+        page: page.toString(),
+        per_page: "10",
+        sort: "new",
+        include_creator: "true",
+        include_stats: "true",
+      });
+
+      const queryText = searchQuery || basicInfo?.SECNAME || "";
+      if (queryText) {
+        params.append("q", queryText);
+      }
+
+      const response = await fetch(
+        `${API_BASE_URL}/api/events?${params.toString()}`
+      );
+      const data = await response.json();
+
+      const events = data.data?.events || data.events || [];
+      const pagination = data.data?.pagination || {
+        page: 1,
+        per_page: 10,
+        total: 0,
+        pages: 0,
+        has_next: false,
+        has_prev: false,
+      };
+
+      setNewsEvents(events);
+      setNewsPagination(pagination);
+    } catch (err) {
+      logger.error("CompanyOverview", "loadNewsEvents", err, {
+        stockCode,
+        searchQuery,
+        page,
+      });
+      setNewsEvents([]);
+      setNewsPagination({
+        page: 1,
+        per_page: 10,
+        total: 0,
+        pages: 0,
+        has_next: false,
+        has_prev: false,
+      });
+    } finally {
+      setNewsLoading(false);
+    }
+  };
+
+  // 当基本信息加载完成后，加载新闻事件
+  useEffect(() => {
+    if (basicInfo) {
+      loadNewsEvents(1);
+    }
+  }, [basicInfo]);
+
+  // 处理新闻搜索
+  const handleNewsSearch = () => {
+    loadNewsEvents(1, newsSearchQuery);
+  };
+
+  // 处理新闻分页
+  const handleNewsPageChange = (newPage) => {
+    loadNewsEvents(newPage, newsSearchQuery);
+  };
+
+  if (loading) {
+    return (
+      <Box bg={bgColor} minH="100vh" p={4}>
+        <Container maxW="container.xl">
+          <Center h="400px">
+            <VStack spacing={4}>
+              <Spinner size="xl" color="blue.500" thickness="4px" />
+              <Text>正在加载企业全景数据...</Text>
+            </VStack>
+          </Center>
+        </Container>
+      </Box>
+    );
+  }
+
+  return (
+    <Box bg={bgColor} minH="100vh" py={6}>
+      <Container maxW="container.xl">
+        <VStack spacing={6} align="stretch">
+          {/* 公司头部信息 - 醒目展示 */}
+          {basicInfo && (
+            <Card
+              bg={cardBg}
+              shadow="2xl"
+              borderTop="6px 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="70px" bg="blue.500">
+                          <Icon as={FaBuilding} color="white" boxSize={10} />
+                        </Circle>
+                        <VStack align="start" spacing={1}>
+                          <HStack>
+                            <Heading size="xl" color="blue.600">
+                              {basicInfo.ORGNAME || basicInfo.SECNAME}
+                            </Heading>
+                            <Badge
+                              colorScheme="blue"
+                              fontSize="lg"
+                              px={3}
+                              py={1}
+                            >
+                              {basicInfo.SECCODE}
+                            </Badge>
+                          </HStack>
+                          <HStack spacing={3}>
+                            <Badge colorScheme="purple" fontSize="sm">
+                              {basicInfo.sw_industry_l1}
+                            </Badge>
+                            <Badge colorScheme="orange" fontSize="sm">
+                              {basicInfo.sw_industry_l2}
+                            </Badge>
+                            {basicInfo.sw_industry_l3 && (
+                              <Badge colorScheme="green" fontSize="sm">
+                                {basicInfo.sw_industry_l3}
+                              </Badge>
+                            )}
+                          </HStack>
+                        </VStack>
+                      </HStack>
+
+                      <Divider />
+
+                      <SimpleGrid columns={2} spacing={4} w="full">
+                        <HStack>
+                          <Icon as={FaUserShield} color="gray.500" />
+                          <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" />
+                          <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" />
+                          <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" />
+                          <Text fontSize="sm">
+                            <Text as="span" color="gray.500">
+                              成立日期：
+                            </Text>
+                            <Text as="span" fontWeight="bold">
+                              {formatUtils.formatDate(basicInfo.establish_date)}
+                            </Text>
+                          </Text>
+                        </HStack>
+                      </SimpleGrid>
+
+                      <Box>
+                        <Text fontSize="sm" color="gray.600" noOfLines={3}>
+                          {basicInfo.company_intro}
+                        </Text>
+                      </Box>
+                    </VStack>
+                  </GridItem>
+
+                  <GridItem colSpan={{ base: 12, lg: 4 }}>
+                    <VStack spacing={3} align="stretch">
+                      <Stat>
+                        <StatLabel>注册资本</StatLabel>
+                        <StatNumber fontSize="3xl" color="blue.500">
+                          {formatUtils.formatRegisteredCapital(
+                            basicInfo.reg_capital
+                          )}
+                        </StatNumber>
+                      </Stat>
+
+                      <Divider />
+
+                      <VStack align="stretch" spacing={2}>
+                        <HStack fontSize="sm">
+                          <Icon as={FaMapMarkerAlt} color="gray.500" />
+                          <Text noOfLines={1}>
+                            {basicInfo.province} {basicInfo.city}
+                          </Text>
+                        </HStack>
+                        <HStack fontSize="sm">
+                          <Icon as={FaGlobe} color="gray.500" />
+                          <Link
+                            href={basicInfo.website}
+                            isExternal
+                            color="blue.500"
+                          >
+                            {basicInfo.website} <ExternalLinkIcon mx="2px" />
+                          </Link>
+                        </HStack>
+                        <HStack fontSize="sm">
+                          <Icon as={FaEnvelope} color="gray.500" />
+                          <Text>{basicInfo.email}</Text>
+                        </HStack>
+                        <HStack fontSize="sm">
+                          <Icon as={FaPhone} color="gray.500" />
+                          <Text>{basicInfo.tel}</Text>
+                        </HStack>
+                      </VStack>
+                    </VStack>
+                  </GridItem>
+                </Grid>
+              </CardBody>
+            </Card>
+          )}
+
+          {/* 主要内容区 - 分为深度分析、基本信息和新闻动态 */}
+          <Tabs
+            variant="soft-rounded"
+            colorScheme="blue"
+            size="lg"
+            defaultIndex={0}
+          >
+            <TabList
+              bg={cardBg}
+              p={4}
+              borderRadius="lg"
+              shadow="md"
+              flexWrap="wrap"
+            >
+              <Tab fontWeight="bold">
+                <Icon as={FaBrain} mr={2} />
+                深度分析
+              </Tab>
+              <Tab fontWeight="bold">
+                <Icon as={FaInfoCircle} mr={2} />
+                基本信息
+              </Tab>
+              <Tab fontWeight="bold">
+                <Icon as={FaNewspaper} mr={2} />
+                新闻动态
+              </Tab>
+            </TabList>
+
+            <TabPanels>
+              {/* 深度分析标签页 */}
+              <TabPanel p={0} pt={6}>
+                <DeepAnalysisTab
+                  comprehensiveData={comprehensiveData}
+                  valueChainData={valueChainData}
+                  keyFactorsData={keyFactorsData}
+                  loading={loading}
+                  cardBg={cardBg}
+                  expandedSegments={expandedSegments}
+                  onToggleSegment={toggleSegmentExpansion}
+                />
+              </TabPanel>
+
+              {/* 基本信息标签页 */}
+              <TabPanel p={0} pt={6}>
+                <BasicInfoTab
+                  basicInfo={basicInfo}
+                  actualControl={actualControl}
+                  concentration={concentration}
+                  topShareholders={topShareholders}
+                  topCirculationShareholders={topCirculationShareholders}
+                  management={management}
+                  announcements={announcements}
+                  branches={branches}
+                  disclosureSchedule={disclosureSchedule}
+                  cardBg={cardBg}
+                />
+              </TabPanel>
+
+              {/* 新闻动态标签页 */}
+              <TabPanel p={0} pt={6}>
+                <NewsEventsTab
+                  newsEvents={newsEvents}
+                  newsLoading={newsLoading}
+                  newsPagination={newsPagination}
+                  searchQuery={newsSearchQuery}
+                  onSearchChange={setNewsSearchQuery}
+                  onSearch={handleNewsSearch}
+                  onPageChange={handleNewsPageChange}
+                  cardBg={cardBg}
+                />
+              </TabPanel>
+            </TabPanels>
+          </Tabs>
+        </VStack>
+      </Container>
+    </Box>
+  );
+};
+
+export default CompanyAnalysisComplete;

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

@@ -0,0 +1,45 @@
+// 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, TAB_SELECTED_STYLE } from '../../constants';
+
+/**
+ * Tab 导航组件
+ *
+ * @param {Object} props
+ * @param {string} props.tabBg - Tab 列表背景色
+ * @param {string} props.activeBg - 激活状态背景色
+ */
+const TabNavigation = ({ tabBg, activeBg }) => {
+  return (
+    <TabList p={4} bg={tabBg}>
+      {COMPANY_TABS.map((tab, index) => (
+        <Tab
+          key={tab.key}
+          _selected={{
+            bg: activeBg,
+            color: 'white',
+            ...TAB_SELECTED_STYLE,
+          }}
+          mr={index < COMPANY_TABS.length - 1 ? 2 : 0}
+        >
+          <HStack spacing={2}>
+            <Icon as={tab.icon} />
+            <Text>{tab.name}</Text>
+          </HStack>
+        </Tab>
+      ))}
+    </TabList>
+  );
+};
+
+export default TabNavigation;

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

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

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,
@@ -75,7 +75,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 +84,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([]);

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,
@@ -303,7 +303,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
   const [loading, setLoading] = useState(false);
   const [activeTab, setActiveTab] = useState(0);
   const [selectedPeriod, setSelectedPeriod] = useState(60);
-  
+
   // 数据状态
   const [summary, setSummary] = useState(null);
   const [tradeData, setTradeData] = useState([]);

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

@@ -0,0 +1,221 @@
+/**
+ * StockQuoteCard - 股票行情卡片组件
+ *
+ * 展示股票的实时行情、关键指标和主力动态
+ */
+
+import React from 'react';
+import {
+  Box,
+  Card,
+  CardBody,
+  Flex,
+  HStack,
+  VStack,
+  Text,
+  Badge,
+  Progress,
+  Skeleton,
+  useColorModeValue,
+} from '@chakra-ui/react';
+
+import type { StockQuoteCardProps } from './types';
+import { mockStockQuoteData } from './mockData';
+
+/**
+ * 格式化价格显示
+ */
+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 = mockStockQuoteData,
+  isLoading = false,
+}) => {
+  // 颜色配置
+  const cardBg = useColorModeValue('white', 'gray.800');
+  const borderColor = useColorModeValue('gray.200', 'gray.700');
+  const labelColor = useColorModeValue('gray.500', 'gray.400');
+  const valueColor = useColorModeValue('gray.800', 'gray.100');
+  const sectionTitleColor = useColorModeValue('gray.600', 'gray.300');
+
+  // 涨跌颜色
+  const priceColor = data.changePercent >= 0 ? 'green.500' : 'red.500';
+  const inflowColor = data.mainNetInflow >= 0 ? 'green.500' : 'red.500';
+
+  if (isLoading) {
+    return (
+      <Card bg={cardBg} shadow="sm" borderWidth="1px" borderColor={borderColor}>
+        <CardBody>
+          <Skeleton height="120px" />
+        </CardBody>
+      </Card>
+    );
+  }
+
+  return (
+    <Card bg={cardBg} shadow="sm" borderWidth="1px" borderColor={borderColor}>
+      <CardBody py={4} px={6}>
+        {/* 顶部：股票名称 + 更新时间 */}
+        <Flex justify="space-between" align="center" mb={4}>
+          <HStack spacing={3}>
+            <Text fontSize="xl" fontWeight="bold" color={valueColor}>
+              {data.name}
+            </Text>
+            <Text fontSize="md" color={labelColor}>
+              ({data.code})
+            </Text>
+            {data.indexTags.map((tag) => (
+              <Badge
+                key={tag}
+                variant="outline"
+                colorScheme="gray"
+                fontSize="xs"
+                px={2}
+              >
+                {tag}
+              </Badge>
+            ))}
+          </HStack>
+          <Text fontSize="sm" color={labelColor}>
+            更新时间：{data.updateTime}
+          </Text>
+        </Flex>
+
+        {/* 三栏布局 */}
+        <Flex gap={8}>
+          {/* 左栏：价格信息 */}
+          <Box flex="1">
+            <HStack align="baseline" spacing={3} mb={3}>
+              <Text fontSize="3xl" fontWeight="bold" color={priceColor}>
+                {formatPrice(data.currentPrice)}
+              </Text>
+              <Badge
+                colorScheme={data.changePercent >= 0 ? 'green' : 'red'}
+                fontSize="md"
+                px={2}
+                py={0.5}
+              >
+                {formatChangePercent(data.changePercent)}
+              </Badge>
+            </HStack>
+            <HStack spacing={6} color={labelColor} fontSize="sm">
+              <Text>
+                今开：
+                <Text as="span" color={valueColor} fontWeight="medium">
+                  {formatPrice(data.todayOpen)}
+                </Text>
+              </Text>
+              <Text>
+                昨收：
+                <Text as="span" color={valueColor} fontWeight="medium">
+                  {formatPrice(data.yesterdayClose)}
+                </Text>
+              </Text>
+            </HStack>
+          </Box>
+
+          {/* 中栏：关键指标 */}
+          <Box flex="1" borderLeftWidth="1px" borderColor={borderColor} pl={8}>
+            <Text
+              fontSize="sm"
+              fontWeight="medium"
+              color={sectionTitleColor}
+              mb={3}
+            >
+              关键指标
+            </Text>
+            <VStack align="stretch" spacing={2} fontSize="sm">
+              <HStack justify="space-between">
+                <Text color={labelColor}>市盈率(PE)：</Text>
+                <Text color={valueColor} fontWeight="medium">
+                  {data.pe.toFixed(2)}
+                </Text>
+              </HStack>
+              <HStack justify="space-between">
+                <Text color={labelColor}>市净率(PB)：</Text>
+                <Text color={valueColor} fontWeight="medium">
+                  {data.pb.toFixed(2)}
+                </Text>
+              </HStack>
+              <HStack justify="space-between">
+                <Text color={labelColor}>流通市值：</Text>
+                <Text color={valueColor} fontWeight="medium">
+                  {data.marketCap}
+                </Text>
+              </HStack>
+              <HStack justify="space-between">
+                <Text color={labelColor}>52周波动：</Text>
+                <Text color={valueColor} fontWeight="medium">
+                  {formatPrice(data.week52Low)}-{formatPrice(data.week52High)}
+                </Text>
+              </HStack>
+            </VStack>
+          </Box>
+
+          {/* 右栏：主力动态 */}
+          <Box flex="1" borderLeftWidth="1px" borderColor={borderColor} pl={8}>
+            <Text
+              fontSize="sm"
+              fontWeight="medium"
+              color={sectionTitleColor}
+              mb={3}
+            >
+              主力动态
+            </Text>
+            <VStack align="stretch" spacing={2} fontSize="sm">
+              <HStack justify="space-between">
+                <Text color={labelColor}>主力净流入：</Text>
+                <Text color={inflowColor} fontWeight="medium">
+                  {formatNetInflow(data.mainNetInflow)}
+                </Text>
+              </HStack>
+              <HStack justify="space-between">
+                <Text color={labelColor}>机构持仓：</Text>
+                <Text color={valueColor} fontWeight="medium">
+                  {data.institutionHolding.toFixed(2)}%
+                </Text>
+              </HStack>
+              {/* 买卖比例条 */}
+              <Box mt={1}>
+                <Progress
+                  value={data.buyRatio}
+                  size="sm"
+                  colorScheme="green"
+                  bg="red.400"
+                  borderRadius="full"
+                />
+                <HStack justify="space-between" mt={1} fontSize="xs">
+                  <Text color="green.500">买入{data.buyRatio}%</Text>
+                  <Text color="red.500">卖出{data.sellRatio}%</Text>
+                </HStack>
+              </Box>
+            </VStack>
+          </Box>
+        </Flex>
+      </CardBody>
+    </Card>
+  );
+};
+
+export default StockQuoteCard;

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

@@ -0,0 +1,33 @@
+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,
+
+  // 关键指标
+  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',
+};

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

@@ -0,0 +1,43 @@
+/**
+ * StockQuoteCard 组件类型定义
+ */
+
+/**
+ * 股票行情卡片数据
+ */
+export interface StockQuoteCardData {
+  // 基础信息
+  name: string; // 股票名称
+  code: string; // 股票代码
+  indexTags: string[]; // 指数标签（如 沪深300、上证50）
+
+  // 价格信息
+  currentPrice: number; // 当前价格
+  changePercent: number; // 涨跌幅（百分比，如 3.65 表示 +3.65%）
+  todayOpen: number; // 今开
+  yesterdayClose: 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
+}
+
+/**
+ * StockQuoteCard 组件 Props
+ */
+export interface StockQuoteCardProps {
+  data?: StockQuoteCardData;
+  isLoading?: boolean;
+}

src/views/Company/constants/index.js

@@ -0,0 +1,53 @@
+// src/views/Company/constants/index.js
+// 公司详情页面常量配置
+
+import { FaChartLine, FaMoneyBillWave, FaChartBar, FaInfoCircle } from 'react-icons/fa';
+
+/**
+ * Tab 配置
+ * @type {Array<{key: string, name: string, icon: React.ComponentType}>}
+ */
+export const COMPANY_TABS = [
+  { key: 'overview', name: '公司概览', icon: FaInfoCircle },
+  { key: 'market', name: '股票行情', icon: FaChartLine },
+  { key: 'financial', name: '财务全景', icon: FaMoneyBillWave },
+  { key: 'forecast', name: '盈利预测', icon: FaChartBar },
+];
+
+/**
+ * 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,90 @@
+// 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(stockCode);
+
+  /**
+   * 监听 URL 参数变化，同步到本地状态
+   * 支持浏览器前进/后退按钮
+   */
+  useEffect(() => {
+    const urlCode = searchParams.get(paramName);
+    if (urlCode && urlCode !== stockCode) {
+      setStockCode(urlCode);
+      setInputCode(urlCode);
+    }
+  }, [searchParams, paramName, stockCode]);
+
+  /**
+   * 执行搜索 - 更新 stockCode 和 URL
+   */
+  const handleSearch = useCallback(() => {
+    const trimmedCode = inputCode?.trim();
+
+    if (trimmedCode && trimmedCode !== stockCode) {
+      // 触发变化回调（用于追踪）
+      onStockChange?.(trimmedCode, stockCode);
+
+      // 更新状态
+      setStockCode(trimmedCode);
+
+      // 更新 URL 参数
+      setSearchParams({ [paramName]: trimmedCode });
+    }
+  }, [inputCode, stockCode, paramName, setSearchParams, onStockChange]);
+
+  /**
+   * 处理键盘事件 - 回车键触发搜索
+   */
+  const handleKeyPress = useCallback((e) => {
+    if (e.key === 'Enter') {
+      handleSearch();
+    }
+  }, [handleSearch]);
+
+  return {
+    // 状态
+    stockCode,      // 当前确认的股票代码
+    inputCode,      // 输入框中的值（未确认）
+
+    // 操作方法
+    setInputCode,   // 更新输入框
+    handleSearch,   // 执行搜索
+    handleKeyPress, // 处理回车键
+  };
+};
+
+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/index.js

@@ -1,51 +1,41 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { useSearchParams } from 'react-router-dom';
-import {
-  Container,
-  Heading,
-  Card,
-  CardBody,
-  Tabs,
-  TabList,
-  TabPanels,
-  Tab,
-  TabPanel,
-  HStack,
-  VStack,
-  Input,
-  Button,
-  InputGroup,
-  InputLeftElement,
-  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
+// src/views/Company/index.js
+// 公司详情页面入口 - 纯组合层
+
+import React, { useEffect, useRef } from 'react';
+import { Container, VStack, useColorModeValue } from '@chakra-ui/react';
+
+// 自定义 Hooks
+import { useCompanyStock } from './hooks/useCompanyStock';
+import { useCompanyWatchlist } from './hooks/useCompanyWatchlist';
 import { useCompanyEvents } from './hooks/useCompanyEvents';
 
-const CompanyIndex = () => {
-  const [searchParams, setSearchParams] = useSearchParams();
-  const [stockCode, setStockCode] = useState(searchParams.get('scode') || '000001');
-  const [inputCode, setInputCode] = useState(stockCode);
-  const { colorMode, toggleColorMode } = useColorMode();
-  const toast = useToast();
-  const { isAuthenticated } = useAuth();
+// 页面组件
+import CompanyHeader from './components/CompanyHeader';
+import StockQuoteCard from './components/StockQuoteCard';
+import CompanyTabs from './components/CompanyTabs';
 
-  // 🎯 PostHog 事件追踪
+/**
+ * 公司详情页面
+ *
+ * 功能：
+ * - 股票搜索与代码管理
+ * - 自选股添加/移除
+ * - 多维度数据展示（概览、行情、财务、预测）
+ * - PostHog 事件追踪
+ */
+const CompanyIndex = () => {
+  const bgColor = useColorModeValue('white', 'gray.800');
+
+  // 1. 先获取股票代码（不带追踪回调）
+  const {
+    stockCode,
+    inputCode,
+    setInputCode,
+    handleSearch,
+    handleKeyPress,
+  } = useCompanyStock();
+
+  // 2. 再初始化事件追踪（传入 stockCode）
   const {
     trackStockSearched,
     trackTabChanged,
@@ -53,297 +43,56 @@ 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();
-    }
-  };
-
-  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}>
-                <InputGroup size="lg" maxW="300px">
-                  <InputLeftElement pointerEvents="none">
-                    <SearchIcon color="gray.400" />
-                  </InputLeftElement>
-                  <Input
-                    placeholder="输入股票代码"
-                    value={inputCode}
-                    onChange={(e) => setInputCode(e.target.value)}
-                    onKeyPress={handleKeyPress}
-                    borderRadius="md"
-                    _focus={{
-                      borderColor: 'blue.500',
-                      boxShadow: '0 0 0 1px #3182ce'
-                    }}
-                  />
-                </InputGroup>
-                <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>
+        {/* 页面头部：标题、搜索、自选股按钮 */}
+        <CompanyHeader
+          stockCode={stockCode}
+          inputCode={inputCode}
+          onInputChange={setInputCode}
+          onSearch={handleSearch}
+          onKeyPress={handleKeyPress}
+          isInWatchlist={isInWatchlist}
+          isWatchlistLoading={isWatchlistLoading}
+          onWatchlistToggle={handleWatchlistToggle}
+          bgColor={bgColor}
+        />
+
+        {/* 股票行情卡片：价格、关键指标、主力动态 */}
+        <StockQuoteCard />
+
+        {/* Tab 切换区域：概览、行情、财务、预测 */}
+        <CompanyTabs
+          stockCode={stockCode}
+          onTabChange={trackTabChanged}
+          bgColor={bgColor}
+        />
       </VStack>
     </Container>
   );
 };
 
 export default CompanyIndex;
-
-