93 lines
2.6 KiB
JavaScript
93 lines
2.6 KiB
JavaScript
// src/views/Company/index.js
|
||
// 公司详情页面入口 - 纯组合层
|
||
|
||
import React, { useEffect, useRef } from 'react';
|
||
import { Container, VStack } from '@chakra-ui/react';
|
||
|
||
// 自定义 Hooks
|
||
import { useCompanyStock } from './hooks/useCompanyStock';
|
||
import { useCompanyWatchlist } from './hooks/useCompanyWatchlist';
|
||
import { useCompanyEvents } from './hooks/useCompanyEvents';
|
||
|
||
// 页面组件
|
||
import CompanyHeader from './components/CompanyHeader';
|
||
import StockQuoteCard from './components/StockQuoteCard';
|
||
import CompanyTabs from './components/CompanyTabs';
|
||
|
||
/**
|
||
* 公司详情页面
|
||
*
|
||
* 功能：
|
||
* - 股票搜索与代码管理
|
||
* - 自选股添加/移除
|
||
* - 多维度数据展示（概览、行情、财务、预测）
|
||
* - PostHog 事件追踪
|
||
*/
|
||
const CompanyIndex = () => {
|
||
// 1. 先获取股票代码（不带追踪回调）
|
||
const {
|
||
stockCode,
|
||
inputCode,
|
||
setInputCode,
|
||
handleSearch,
|
||
handleKeyPress,
|
||
} = useCompanyStock();
|
||
|
||
// 2. 再初始化事件追踪（传入 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 (
|
||
<Container maxW="container.xl" py={0} bg='#1A202C'>
|
||
<VStack align="stretch" spacing={0}>
|
||
{/* 页面头部：标题、搜索 */}
|
||
<CompanyHeader
|
||
inputCode={inputCode}
|
||
onInputChange={setInputCode}
|
||
onSearch={handleSearch}
|
||
onKeyPress={handleKeyPress}
|
||
bgColor="#1A202C"
|
||
/>
|
||
|
||
{/* 股票行情卡片：价格、关键指标、主力动态、自选股按钮 */}
|
||
<StockQuoteCard
|
||
isInWatchlist={isInWatchlist}
|
||
isWatchlistLoading={isWatchlistLoading}
|
||
onWatchlistToggle={handleWatchlistToggle}
|
||
/>
|
||
|
||
{/* Tab 切换区域：概览、行情、财务、预测 */}
|
||
<CompanyTabs stockCode={stockCode} onTabChange={trackTabChanged} bgColor="#1A202C"/>
|
||
</VStack>
|
||
</Container>
|
||
);
|
||
};
|
||
|
||
export default CompanyIndex;
|