6ce913d79b
- 将公司基本信息整合到 StockQuoteCard 内部 - 采用 1:2 Flex 布局确保上下竖线对齐 - 删除废弃的 CompanyHeaderCard 组件 - 清理 types.ts 中的 CompanyHeaderCardProps 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
113 lines
3.2 KiB
JavaScript
113 lines
3.2 KiB
JavaScript
// src/views/Company/index.js
|
||
// 公司详情页面入口 - 纯组合层
|
||
|
||
import React, { useEffect, useRef } from 'react';
|
||
import { Container, VStack } from '@chakra-ui/react';
|
||
import { useDispatch } from 'react-redux';
|
||
import { loadAllStocks } from '@store/slices/stockSlice';
|
||
|
||
// 自定义 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();
|
||
|
||
// 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);
|
||
|
||
// 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 (
|
||
<Container maxW="container.xl" py={0} bg='#1A202C'>
|
||
<VStack align="stretch" spacing={0}>
|
||
{/* 页面头部：标题、搜索 */}
|
||
<CompanyHeader
|
||
inputCode={inputCode}
|
||
onInputChange={setInputCode}
|
||
onSearch={handleSearch}
|
||
onKeyDown={handleKeyDown}
|
||
bgColor="#1A202C"
|
||
/>
|
||
|
||
{/* 股票行情卡片：价格、关键指标、主力动态、公司信息 */}
|
||
<StockQuoteCard
|
||
data={quoteData}
|
||
isLoading={isQuoteLoading}
|
||
isInWatchlist={isInWatchlist}
|
||
isWatchlistLoading={isWatchlistLoading}
|
||
onWatchlistToggle={handleWatchlistToggle}
|
||
basicInfo={basicInfo}
|
||
/>
|
||
|
||
{/* Tab 切换区域：概览、行情、财务、预测 */}
|
||
<CompanyTabs stockCode={stockCode} onTabChange={trackTabChanged} bgColor="#1A202C"/>
|
||
</VStack>
|
||
</Container>
|
||
);
|
||
};
|
||
|
||
export default CompanyIndex;
|