// src/views/Company/index.js // 公司详情页面入口 - 纯组合层 import React, { useEffect, useRef, useState, useCallback } from 'react'; import { Container, VStack, useToast } from '@chakra-ui/react'; import { useDispatch } from 'react-redux'; import { loadAllStocks } from '@store/slices/stockSlice'; import { financialService } from '@services/financialService'; import { logger } from '@utils/logger'; // 自定义 Hooks import { useCompanyStock } from './hooks/useCompanyStock'; import { useCompanyWatchlist } from './hooks/useCompanyWatchlist'; import { useCompanyEvents } from './hooks/useCompanyEvents'; import { useStockQuote } from './hooks/useStockQuote'; import { useBasicInfo } from './components/CompanyOverview/hooks/useBasicInfo'; // 页面组件 import CompanyHeader from './components/CompanyHeader'; import StockQuoteCard from './components/StockQuoteCard'; import CompanyTabs from './components/CompanyTabs'; /** * 公司详情页面 * * 功能: * - 股票搜索与代码管理 * - 自选股添加/移除 * - 多维度数据展示(概览、行情、财务、预测) * - PostHog 事件追踪 */ const CompanyIndex = () => { const dispatch = useDispatch(); const toast = useToast(); // 1. 先获取股票代码(不带追踪回调) const { stockCode, inputCode, setInputCode, handleSearch, handleKeyDown, } = useCompanyStock(); // 加载全部股票列表(用于模糊搜索) useEffect(() => { dispatch(loadAllStocks()); }, [dispatch]); // 2. 获取股票行情数据 const { data: quoteData, isLoading: isQuoteLoading } = useStockQuote(stockCode); // 2.1 获取公司基本信息 const { basicInfo } = useBasicInfo(stockCode); // 5. 股票对比状态管理 const [currentStockInfo, setCurrentStockInfo] = useState(null); const [compareStockInfo, setCompareStockInfo] = useState(null); const [isCompareLoading, setIsCompareLoading] = useState(false); // 加载当前股票财务信息(用于对比) useEffect(() => { const loadCurrentStockInfo = async () => { if (!stockCode) return; try { const res = await financialService.getStockInfo(stockCode); setCurrentStockInfo(res.data); } catch (error) { logger.error('CompanyIndex', 'loadCurrentStockInfo', error, { stockCode }); } }; loadCurrentStockInfo(); // 清除对比数据 setCompareStockInfo(null); }, [stockCode]); // 处理股票对比 const handleCompare = useCallback(async (compareCode) => { if (!compareCode) return; logger.debug('CompanyIndex', '开始加载对比数据', { stockCode, compareCode }); setIsCompareLoading(true); try { const res = await financialService.getStockInfo(compareCode); setCompareStockInfo(res.data); logger.info('CompanyIndex', '对比数据加载成功', { stockCode, compareCode }); } catch (error) { logger.error('CompanyIndex', 'handleCompare', error, { stockCode, compareCode }); toast({ title: '加载对比数据失败', description: '请检查股票代码是否正确', status: 'error', duration: 3000, }); } finally { setIsCompareLoading(false); } }, [stockCode, toast]); // 关闭对比弹窗 const handleCloseCompare = useCallback(() => { // 可选:清除对比数据 // setCompareStockInfo(null); }, []); // 3. 再初始化事件追踪(传入 stockCode) const { trackStockSearched, trackTabChanged, trackWatchlistAdded, trackWatchlistRemoved, } = useCompanyEvents({ stockCode }); // 3. 自选股管理 const { isInWatchlist, isLoading: isWatchlistLoading, toggle: handleWatchlistToggle, } = useCompanyWatchlist({ stockCode, tracking: { onAdd: trackWatchlistAdded, onRemove: trackWatchlistRemoved, }, }); // 4. 监听 stockCode 变化,触发搜索追踪 const prevStockCodeRef = useRef(stockCode); useEffect(() => { if (stockCode !== prevStockCodeRef.current) { trackStockSearched(stockCode, prevStockCodeRef.current); prevStockCodeRef.current = stockCode; } }, [stockCode, trackStockSearched]); return ( {/* 页面头部:标题、搜索 */} {/* 股票行情卡片:价格、关键指标、主力动态、公司信息、股票对比 */} {/* Tab 切换区域:概览、行情、财务、预测 */} ); }; export default CompanyIndex;