refactor: Company 页面一级 Tab 重构为 6 个
- 新增深度分析 Tab(从 CompanyOverview 提取为独立组件) - 新增动态跟踪 Tab(占位组件,后续添加内容) - Tab 顺序:公司概览 | 深度分析 | 股票行情 | 财务全景 | 盈利预测 | 动态跟踪 - 简化 CompanyOverview:移除内部 Tabs,只保留头部卡片 + 基本信息 - DeepAnalysis 组件独立管理深度分析数据加载(3个接口) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
100
src/views/Company/components/DeepAnalysis/index.js
Normal file
100
src/views/Company/components/DeepAnalysis/index.js
Normal file
@@ -0,0 +1,100 @@
|
||||
// src/views/Company/components/DeepAnalysis/index.js
|
||||
// 深度分析 - 独立一级 Tab 组件
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { logger } from "@utils/logger";
|
||||
import { getApiBase } from "@utils/apiConfig";
|
||||
|
||||
// 复用原有的展示组件
|
||||
import DeepAnalysisTab from "../CompanyOverview/DeepAnalysisTab";
|
||||
|
||||
const API_BASE_URL = getApiBase();
|
||||
|
||||
/**
|
||||
* 深度分析组件
|
||||
*
|
||||
* 功能:
|
||||
* - 加载深度分析数据(3个接口)
|
||||
* - 管理展开状态
|
||||
* - 渲染 DeepAnalysisTab 展示组件
|
||||
*
|
||||
* @param {Object} props
|
||||
* @param {string} props.stockCode - 股票代码
|
||||
*/
|
||||
const DeepAnalysis = ({ stockCode }) => {
|
||||
// 数据状态
|
||||
const [comprehensiveData, setComprehensiveData] = useState(null);
|
||||
const [valueChainData, setValueChainData] = useState(null);
|
||||
const [keyFactorsData, setKeyFactorsData] = useState(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
// 业务板块展开状态
|
||||
const [expandedSegments, setExpandedSegments] = useState({});
|
||||
|
||||
// 切换业务板块展开状态
|
||||
const toggleSegmentExpansion = (segmentIndex) => {
|
||||
setExpandedSegments((prev) => ({
|
||||
...prev,
|
||||
[segmentIndex]: !prev[segmentIndex],
|
||||
}));
|
||||
};
|
||||
|
||||
// 加载深度分析数据(3个接口)
|
||||
const loadDeepAnalysisData = async () => {
|
||||
if (!stockCode) return;
|
||||
|
||||
setLoading(true);
|
||||
|
||||
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()),
|
||||
];
|
||||
|
||||
const [comprehensiveRes, valueChainRes, keyFactorsRes] =
|
||||
await Promise.all(requests);
|
||||
|
||||
if (comprehensiveRes.success) setComprehensiveData(comprehensiveRes.data);
|
||||
if (valueChainRes.success) setValueChainData(valueChainRes.data);
|
||||
if (keyFactorsRes.success) setKeyFactorsData(keyFactorsRes.data);
|
||||
} catch (err) {
|
||||
logger.error("DeepAnalysis", "loadDeepAnalysisData", err, { stockCode });
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// stockCode 变更时重新加载数据
|
||||
useEffect(() => {
|
||||
if (stockCode) {
|
||||
// 重置数据
|
||||
setComprehensiveData(null);
|
||||
setValueChainData(null);
|
||||
setKeyFactorsData(null);
|
||||
setExpandedSegments({});
|
||||
// 加载新数据
|
||||
loadDeepAnalysisData();
|
||||
}
|
||||
}, [stockCode]);
|
||||
|
||||
return (
|
||||
<DeepAnalysisTab
|
||||
comprehensiveData={comprehensiveData}
|
||||
valueChainData={valueChainData}
|
||||
keyFactorsData={keyFactorsData}
|
||||
loading={loading}
|
||||
cardBg="white"
|
||||
expandedSegments={expandedSegments}
|
||||
onToggleSegment={toggleSegmentExpansion}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default DeepAnalysis;
|
||||
Reference in New Issue
Block a user