perf: CompanyOverview 内层 Tab 懒加载优化

- 将 useCompanyOverviewData(9个API)拆分为独立 Hooks:
  - useBasicInfo: 基本信息(首屏唯一加载)
  - useShareholderData: 股东信息(4个API)
  - useManagementData: 管理层信息
  - useAnnouncementsData: 公告数据
  - useBranchesData: 分支机构
  - useDisclosureData: 披露日程
- BasicInfoTab 使用子组件实现真正的懒加载:
  - ShareholderTabPanel、ManagementTabPanel 等
  - 配合 Chakra UI isLazy,切换 Tab 时才加载数据
- 首屏 API 请求从 9 个减少到 1 个

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-12-10 13:05:27 +08:00
parent 38076534b1
commit 5f6e4387e5
8 changed files with 1171 additions and 740 deletions

View File

@@ -1,10 +1,11 @@
// src/views/Company/components/CompanyOverview/index.tsx
// 公司概览 - 主组件(组合层)
// 懒加载优化只加载头部卡片数据BasicInfoTab 内部懒加载各 Tab 数据
import React from "react";
import { VStack, Spinner, Center, Text } from "@chakra-ui/react";
import { useCompanyOverviewData } from "./hooks/useCompanyOverviewData";
import { useBasicInfo } from "./hooks/useBasicInfo";
import CompanyHeaderCard from "./CompanyHeaderCard";
import type { CompanyOverviewProps } from "./types";
@@ -15,22 +16,15 @@ import BasicInfoTab from "./BasicInfoTab";
* 公司概览组件
*
* 功能:
* - 显示公司头部信息卡片
* - 显示基本信息(股权结构、管理层、公告等
* - 显示公司头部信息卡片useBasicInfo
* - 显示基本信息 Tab内部懒加载各子 Tab 数据
*
* 懒加载策略:
* - 主组件只加载 basicInfo1 个 API
* - BasicInfoTab 内部根据 Tab 切换懒加载其他数据
*/
const CompanyOverview: React.FC<CompanyOverviewProps> = ({ stockCode }) => {
const {
basicInfo,
actualControl,
concentration,
management,
topCirculationShareholders,
topShareholders,
branches,
announcements,
disclosureSchedule,
loading,
} = useCompanyOverviewData(stockCode);
const { basicInfo, loading, error } = useBasicInfo(stockCode);
// 加载状态
if (loading && !basicInfo) {
@@ -44,24 +38,25 @@ const CompanyOverview: React.FC<CompanyOverviewProps> = ({ stockCode }) => {
);
}
// 错误状态
if (error && !basicInfo) {
return (
<Center h="300px">
<Text color="red.500">{error}</Text>
</Center>
);
}
return (
<VStack spacing={6} align="stretch">
{/* 公司头部信息卡片 */}
{basicInfo && <CompanyHeaderCard basicInfo={basicInfo} />}
{/* 基本信息内容 */}
{/* 基本信息内容 - 传入 stockCode内部懒加载各 Tab 数据 */}
<BasicInfoTab
stockCode={stockCode}
basicInfo={basicInfo}
actualControl={actualControl}
concentration={concentration}
topShareholders={topShareholders}
topCirculationShareholders={topCirculationShareholders}
management={management}
announcements={announcements}
branches={branches}
disclosureSchedule={disclosureSchedule}
cardBg="white"
loading={loading}
/>
</VStack>
);