diff --git a/src/views/Company/components/DeepAnalysis/hooks/useDeepAnalysisData.ts b/src/views/Company/components/DeepAnalysis/hooks/useDeepAnalysisData.ts index dda2a894..f6082e9e 100644 --- a/src/views/Company/components/DeepAnalysis/hooks/useDeepAnalysisData.ts +++ b/src/views/Company/components/DeepAnalysis/hooks/useDeepAnalysisData.ts @@ -7,23 +7,23 @@ * - 竞态条件处理 */ -import { useState, useCallback, useRef, useEffect } from 'react'; -import axios from '@utils/axiosConfig'; -import { logger } from '@utils/logger'; +import { useState, useCallback, useRef, useEffect } from "react"; +import axios from "@utils/axiosConfig"; +import { logger } from "@utils/logger"; import type { ApiKey, ApiLoadingState, DataState, UseDeepAnalysisDataReturn, -} from '../types'; -import { TAB_API_MAP } from '../types'; +} from "../types"; +import { TAB_API_MAP } from "../types"; /** API 端点映射 */ const API_ENDPOINTS: Record = { - comprehensive: '/api/company/comprehensive-analysis', - valueChain: '/api/company/value-chain-analysis', - keyFactors: '/api/company/key-factors-timeline', - industryRank: '/api/financial/industry-rank', + comprehensive: "/api/company/comprehensive-analysis", + valueChain: "/api/company/value-chain-analysis", + keyFactors: "/api/company/key-factors-timeline", + industryRank: "/api/financial/industry-rank", }; /** 初始数据状态 */ @@ -48,7 +48,9 @@ const initialLoadingState: ApiLoadingState = { * @param stockCode 股票代码 * @returns 数据、loading 状态、加载函数 */ -export const useDeepAnalysisData = (stockCode: string): UseDeepAnalysisDataReturn => { +export const useDeepAnalysisData = ( + stockCode: string +): UseDeepAnalysisDataReturn => { // 数据状态 const [data, setData] = useState(initialDataState); @@ -91,7 +93,9 @@ export const useDeepAnalysisData = (stockCode: string): UseDeepAnalysisDataRetur loadedApisRef.current[apiKey] = true; } } catch (err) { - logger.error('DeepAnalysis', `loadApiData:${apiKey}`, err, { stockCode }); + logger.error("DeepAnalysis", `loadApiData:${apiKey}`, err, { + stockCode, + }); } finally { // 清除 loading(再次检查 stockCode) if (currentStockCodeRef.current === stockCode) { @@ -103,13 +107,13 @@ export const useDeepAnalysisData = (stockCode: string): UseDeepAnalysisDataRetur ); /** - * 根据 Tab 加载对应数据 + * 根据 Tab 加载对应数据(支持一个 Tab 对应多个 API) */ const loadTabData = useCallback( (tabKey: string) => { - const apiKey = TAB_API_MAP[tabKey]; - if (apiKey) { - loadApiData(apiKey); + const apiKeys = TAB_API_MAP[tabKey]; + if (apiKeys && apiKeys.length > 0) { + apiKeys.forEach((apiKey) => loadApiData(apiKey)); } }, [loadApiData] @@ -134,8 +138,11 @@ export const useDeepAnalysisData = (stockCode: string): UseDeepAnalysisDataRetur if (stockCode) { currentStockCodeRef.current = stockCode; resetData(); - // 只加载默认 Tab(comprehensive) - loadApiData('comprehensive'); + // 加载默认 Tab (strategy) 所需的所有数据 + const defaultTabApis = TAB_API_MAP["strategy"]; + if (defaultTabApis) { + defaultTabApis.forEach((apiKey) => loadApiData(apiKey)); + } } }, [stockCode, loadApiData, resetData]); diff --git a/src/views/Company/components/DeepAnalysis/index.tsx b/src/views/Company/components/DeepAnalysis/index.tsx index 9dadeecb..cf3e52b6 100644 --- a/src/views/Company/components/DeepAnalysis/index.tsx +++ b/src/views/Company/components/DeepAnalysis/index.tsx @@ -7,12 +7,12 @@ * - 业务板块展开状态管理 */ -import React, { useState, useCallback, useEffect, memo } from 'react'; -import DeepAnalysisTab from '../CompanyOverview/DeepAnalysisTab'; -import type { DeepAnalysisTabKey } from '../CompanyOverview/DeepAnalysisTab/types'; -import { useDeepAnalysisData } from './hooks'; -import { TAB_API_MAP } from './types'; -import type { DeepAnalysisProps } from './types'; +import React, { useState, useCallback, useEffect, memo } from "react"; +import DeepAnalysisTab from "../CompanyOverview/DeepAnalysisTab"; +import type { DeepAnalysisTabKey } from "../CompanyOverview/DeepAnalysisTab/types"; +import { useDeepAnalysisData } from "./hooks"; +import { TAB_API_MAP } from "./types"; +import type { DeepAnalysisProps } from "./types"; /** * 深度分析组件 @@ -21,10 +21,12 @@ import type { DeepAnalysisProps } from './types'; */ const DeepAnalysis: React.FC = memo(({ stockCode }) => { // 当前 Tab - const [activeTab, setActiveTab] = useState('strategy'); + const [activeTab, setActiveTab] = useState("strategy"); // 业务板块展开状态 - const [expandedSegments, setExpandedSegments] = useState>({}); + const [expandedSegments, setExpandedSegments] = useState< + Record + >({}); // 数据获取 Hook const { data, loading, loadTabData } = useDeepAnalysisData(stockCode); @@ -32,7 +34,7 @@ const DeepAnalysis: React.FC = memo(({ stockCode }) => { // stockCode 变更时重置 UI 状态 useEffect(() => { if (stockCode) { - setActiveTab('strategy'); + setActiveTab("strategy"); setExpandedSegments({}); } }, [stockCode]); @@ -54,10 +56,11 @@ const DeepAnalysis: React.FC = memo(({ stockCode }) => { [loadTabData] ); - // 获取当前 Tab 的 loading 状态 + // 获取当前 Tab 的 loading 状态(任一相关 API loading 则显示 loading) const currentLoading = (() => { - const apiKey = TAB_API_MAP[activeTab]; - return apiKey ? loading[apiKey] : false; + const apiKeys = TAB_API_MAP[activeTab]; + if (!apiKeys || apiKeys.length === 0) return false; + return apiKeys.some((apiKey) => loading[apiKey]); })(); return ( @@ -76,6 +79,6 @@ const DeepAnalysis: React.FC = memo(({ stockCode }) => { ); }); -DeepAnalysis.displayName = 'DeepAnalysis'; +DeepAnalysis.displayName = "DeepAnalysis"; export default DeepAnalysis; diff --git a/src/views/Company/components/DeepAnalysis/types.ts b/src/views/Company/components/DeepAnalysis/types.ts index 419a04d2..fd28e2fd 100644 --- a/src/views/Company/components/DeepAnalysis/types.ts +++ b/src/views/Company/components/DeepAnalysis/types.ts @@ -9,17 +9,21 @@ export type { KeyFactorsData, IndustryRankData, DeepAnalysisTabKey, -} from '../CompanyOverview/DeepAnalysisTab/types'; +} from "../CompanyOverview/DeepAnalysisTab/types"; /** API 接口类型 */ -export type ApiKey = 'comprehensive' | 'valueChain' | 'keyFactors' | 'industryRank'; +export type ApiKey = + | "comprehensive" + | "valueChain" + | "keyFactors" + | "industryRank"; -/** Tab 与 API 映射 */ -export const TAB_API_MAP: Record = { - strategy: 'comprehensive', - business: 'comprehensive', - valueChain: 'valueChain', - development: 'keyFactors', +/** Tab 与 API 映射(支持一个 Tab 对应多个 API) */ +export const TAB_API_MAP: Record = { + strategy: ["comprehensive", "industryRank"], // 战略分析需要综合分析 + 行业排名 + business: ["comprehensive"], + valueChain: ["valueChain"], + development: ["keyFactors"], } as const; /** API 加载状态 */ @@ -69,4 +73,4 @@ import type { ValueChainData, KeyFactorsData, IndustryRankData, -} from '../CompanyOverview/DeepAnalysisTab/types'; +} from "../CompanyOverview/DeepAnalysisTab/types";