vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: CompanyOverview 内层 Tab 懒加载优化

Browse Source 
- 将 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
Download Patch File Download Diff File Expand all files Collapse all files

588
src/views/Company/components/CompanyOverview/BasicInfoTab.js
View File

@@ -1,5 +1,6 @@
// src/views/Company/components/CompanyOverview/BasicInfoTab.js
// 基本信息 Tab - 股权结构、管理团队、公司公告、分支机构、工商信息
// 懒加载优化：使用 isLazy + 独立 Hooks，点击 Tab 时才加载对应数据
import React from "react";
import {
@@ -46,7 +47,15 @@ import {
ModalBody,
ModalFooter,
useDisclosure,
Spinner,
} from "@chakra-ui/react";
// 懒加载 Hooks
import { useShareholderData } from "./hooks/useShareholderData";
import { useManagementData } from "./hooks/useManagementData";
import { useAnnouncementsData } from "./hooks/useAnnouncementsData";
import { useBranchesData } from "./hooks/useBranchesData";
import { useDisclosureData } from "./hooks/useDisclosureData";
import { ExternalLinkIcon } from "@chakra-ui/icons";
import {
FaShareAlt,
@@ -128,70 +137,22 @@ const ShareholderTypeBadge = ({ type }) => {
);
};
// ============================================
// 懒加载 TabPanel 子组件
// 每个子组件独立调用 Hook，配合 isLazy 实现真正的懒加载
// ============================================
/**
* 基本信息 Tab 组件
*
* Props:
* - basicInfo: 公司基本信息
* - actualControl: 实际控制人数组
* - concentration: 股权集中度数组
* - topShareholders: 前十大股东数组
* - topCirculationShareholders: 前十大流通股东数组
* - management: 管理层数组
* - announcements: 公告列表数组
* - branches: 分支机构数组
* - disclosureSchedule: 披露日程数组
* - cardBg: 卡片背景色
* - onAnnouncementClick: 公告点击回调 (announcement) => void
* 股权结构 Tab Panel - 懒加载子组件
*/
const BasicInfoTab = ({
basicInfo,
actualControl = [],
concentration = [],
topShareholders = [],
topCirculationShareholders = [],
management = [],
announcements = [],
branches = [],
disclosureSchedule = [],
cardBg,
loading = false,
}) => {
const { isOpen, onOpen, onClose } = useDisclosure();
const [selectedAnnouncement, setSelectedAnnouncement] = React.useState(null);
// 管理层职位分类
const getManagementByCategory = () => {
const categories = {
高管: [],
董事: [],
监事: [],
其他: [],
};
management.forEach((person) => {
if (
person.position_category === "高管" ||
person.position_name?.includes("总")
) {
categories["高管"].push(person);
} else if (
person.position_category === "董事" ||
person.position_name?.includes("董事")
) {
categories["董事"].push(person);
} else if (
person.position_category === "监事" ||
person.position_name?.includes("监事")
) {
categories["监事"].push(person);
} else {
categories["其他"].push(person);
}
});
return categories;
};
const ShareholderTabPanel = ({ stockCode }) => {
const {
actualControl,
concentration,
topShareholders,
topCirculationShareholders,
loading,
} = useShareholderData(stockCode);
// 计算股权集中度变化
const getConcentrationTrend = () => {
@@ -207,43 +168,20 @@ const BasicInfoTab = ({
.slice(0, 5);
};
// 处理公告点击
const handleAnnouncementClick = (announcement) => {
setSelectedAnnouncement(announcement);
onOpen();
};
if (loading) {
return (
<Center h="200px">
<VStack>
<Spinner size="lg" color="blue.500" />
<Text fontSize="sm" color="gray.500">
加载股权结构数据...
</Text>
</VStack>
</Center>
);
}
return (
<>
<Card bg={cardBg} shadow="md">
<CardBody>
<Tabs variant="enclosed" colorScheme="blue">
<TabList flexWrap="wrap">
<Tab>
<Icon as={FaShareAlt} mr={2} />
股权结构
</Tab>
<Tab>
<Icon as={FaUserTie} mr={2} />
管理团队
</Tab>
<Tab>
<Icon as={FaBullhorn} mr={2} />
公司公告
</Tab>
<Tab>
<Icon as={FaSitemap} mr={2} />
分支机构
</Tab>
<Tab>
<Icon as={FaInfoCircle} mr={2} />
工商信息
</Tab>
</TabList>
<TabPanels>
{/* 股权结构标签页 */}
<TabPanel>
<VStack spacing={6} align="stretch">
{actualControl.length > 0 && (
<Box>
@@ -263,24 +201,17 @@ const BasicInfoTab = ({
{actualControl[0].control_type}
</Badge>
<Text fontSize="sm" color="gray.500">
截至{" "}
{formatUtils.formatDate(
actualControl[0].end_date
)}
截至 {formatUtils.formatDate(actualControl[0].end_date)}
</Text>
</HStack>
</VStack>
<Stat textAlign="right">
<StatLabel>控制比例</StatLabel>
<StatNumber color="purple.500">
{formatUtils.formatPercentage(
actualControl[0].holding_ratio
)}
{formatUtils.formatPercentage(actualControl[0].holding_ratio)}
</StatNumber>
<StatHelpText>
{formatUtils.formatShares(
actualControl[0].holding_shares
)}
{formatUtils.formatShares(actualControl[0].holding_shares)}
</StatHelpText>
</Stat>
</HStack>
@@ -309,39 +240,25 @@ const BasicInfoTab = ({
<VStack spacing={3} align="stretch">
{Object.entries(items).map(([key, item]) => (
<HStack key={key} justify="space-between">
<Text fontSize="sm">
{item.stat_item}
</Text>
<Text fontSize="sm">{item.stat_item}</Text>
<HStack>
<Text
fontWeight="bold"
color="blue.500"
>
{formatUtils.formatPercentage(
item.holding_ratio
)}
<Text fontWeight="bold" color="blue.500">
{formatUtils.formatPercentage(item.holding_ratio)}
</Text>
{item.ratio_change && (
<Badge
colorScheme={
item.ratio_change > 0
? "red"
: "green"
item.ratio_change > 0 ? "red" : "green"
}
>
<Icon
as={
item.ratio_change > 0
? FaArrowUp
: FaArrowDown
item.ratio_change > 0 ? FaArrowUp : FaArrowDown
}
mr={1}
boxSize={3}
/>
{Math.abs(
item.ratio_change
).toFixed(2)}
%
{Math.abs(item.ratio_change).toFixed(2)}%
</Badge>
)}
</HStack>
@@ -377,35 +294,25 @@ const BasicInfoTab = ({
</Tr>
</Thead>
<Tbody>
{topShareholders
.slice(0, 10)
.map((shareholder, idx) => (
{topShareholders.slice(0, 10).map((shareholder, idx) => (
<Tr key={idx}>
<Td>
<Badge
colorScheme={idx < 3 ? "red" : "gray"}
>
<Badge colorScheme={idx < 3 ? "red" : "gray"}>
{shareholder.shareholder_rank}
</Badge>
</Td>
<Td>
<Tooltip
label={shareholder.shareholder_name}
>
<Tooltip label={shareholder.shareholder_name}>
<Text noOfLines={1} maxW="200px">
{shareholder.shareholder_name}
</Text>
</Tooltip>
</Td>
<Td>
<ShareholderTypeBadge
type={shareholder.shareholder_type}
/>
<ShareholderTypeBadge type={shareholder.shareholder_type} />
</Td>
<Td isNumeric fontWeight="medium">
{formatUtils.formatShares(
shareholder.holding_shares
)}
{formatUtils.formatShares(shareholder.holding_shares)}
</Td>
<Td isNumeric>
<Text color="blue.500" fontWeight="bold">
@@ -433,9 +340,7 @@ const BasicInfoTab = ({
<Icon as={FaChartLine} color="purple.500" boxSize={5} />
<Heading size="sm">十大流通股东</Heading>
<Badge>
{formatUtils.formatDate(
topCirculationShareholders[0].end_date
)}
{formatUtils.formatDate(topCirculationShareholders[0].end_date)}
</Badge>
</HStack>
<TableContainer>
@@ -450,35 +355,25 @@ const BasicInfoTab = ({
</Tr>
</Thead>
<Tbody>
{topCirculationShareholders
.slice(0, 10)
.map((shareholder, idx) => (
{topCirculationShareholders.slice(0, 10).map((shareholder, idx) => (
<Tr key={idx}>
<Td>
<Badge
colorScheme={idx < 3 ? "orange" : "gray"}
>
<Badge colorScheme={idx < 3 ? "orange" : "gray"}>
{shareholder.shareholder_rank}
</Badge>
</Td>
<Td>
<Tooltip
label={shareholder.shareholder_name}
>
<Tooltip label={shareholder.shareholder_name}>
<Text noOfLines={1} maxW="250px">
{shareholder.shareholder_name}
</Text>
</Tooltip>
</Td>
<Td>
<ShareholderTypeBadge
type={shareholder.shareholder_type}
/>
<ShareholderTypeBadge type={shareholder.shareholder_type} />
</Td>
<Td isNumeric fontWeight="medium">
{formatUtils.formatShares(
shareholder.holding_shares
)}
{formatUtils.formatShares(shareholder.holding_shares)}
</Td>
<Td isNumeric>
<Text color="purple.500" fontWeight="bold">
@@ -495,10 +390,62 @@ const BasicInfoTab = ({
</Box>
)}
</VStack>
</TabPanel>
);
};
{/* 管理团队标签页 */}
<TabPanel>
/**
* 管理团队 Tab Panel - 懒加载子组件
*/
const ManagementTabPanel = ({ stockCode }) => {
const { management, loading } = useManagementData(stockCode);
// 管理层职位分类
const getManagementByCategory = () => {
const categories = {
高管: [],
董事: [],
监事: [],
其他: [],
};
management.forEach((person) => {
if (
person.position_category === "高管" ||
person.position_name?.includes("总")
) {
categories["高管"].push(person);
} else if (
person.position_category === "董事" ||
person.position_name?.includes("董事")
) {
categories["董事"].push(person);
} else if (
person.position_category === "监事" ||
person.position_name?.includes("监事")
) {
categories["监事"].push(person);
} else {
categories["其他"].push(person);
}
});
return categories;
};
if (loading) {
return (
<Center h="200px">
<VStack>
<Spinner size="lg" color="blue.500" />
<Text fontSize="sm" color="gray.500">
加载管理团队数据...
</Text>
</VStack>
</Center>
);
}
return (
<VStack spacing={6} align="stretch">
{Object.entries(getManagementByCategory()).map(
([category, people]) =>
@@ -530,10 +477,7 @@ const BasicInfoTab = ({
<Badge>{people.length}人</Badge>
</HStack>
<SimpleGrid
columns={{ base: 1, md: 2, lg: 3 }}
spacing={4}
>
<SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} spacing={4}>
{people.map((person, idx) => (
<Card key={idx} variant="outline" size="sm">
<CardBody>
@@ -553,9 +497,7 @@ const BasicInfoTab = ({
/>
<VStack align="start" spacing={1} flex={1}>
<HStack>
<Text fontWeight="bold">
{person.name}
</Text>
<Text fontWeight="bold">{person.name}</Text>
{person.gender && (
<Icon
as={FaVenusMars}
@@ -574,11 +516,7 @@ const BasicInfoTab = ({
<HStack spacing={2} flexWrap="wrap">
{person.education && (
<Tag size="sm" variant="subtle">
<Icon
as={FaGraduationCap}
mr={1}
boxSize={3}
/>
<Icon as={FaGraduationCap} mr={1} boxSize={3} />
{person.education}
</Tag>
)}
@@ -592,20 +530,13 @@ const BasicInfoTab = ({
{person.nationality &&
person.nationality !== "中国" && (
<Tag size="sm" colorScheme="orange">
<Icon
as={FaPassport}
mr={1}
boxSize={3}
/>
<Icon as={FaPassport} mr={1} boxSize={3} />
{person.nationality}
</Tag>
)}
</HStack>
<Text fontSize="xs" color="gray.500">
任职日期：
{formatUtils.formatDate(
person.start_date
)}
任职日期：{formatUtils.formatDate(person.start_date)}
</Text>
</VStack>
</HStack>
@@ -617,10 +548,43 @@ const BasicInfoTab = ({
)
)}
</VStack>
</TabPanel>
);
};
{/* 公司公告标签页 */}
<TabPanel>
/**
* 公司公告 Tab Panel - 懒加载子组件
*/
const AnnouncementsTabPanel = ({ stockCode }) => {
const { announcements, loading: announcementsLoading } =
useAnnouncementsData(stockCode);
const { disclosureSchedule, loading: disclosureLoading } =
useDisclosureData(stockCode);
const { isOpen, onOpen, onClose } = useDisclosure();
const [selectedAnnouncement, setSelectedAnnouncement] = React.useState(null);
const handleAnnouncementClick = (announcement) => {
setSelectedAnnouncement(announcement);
onOpen();
};
const loading = announcementsLoading || disclosureLoading;
if (loading) {
return (
<Center h="200px">
<VStack>
<Spinner size="lg" color="blue.500" />
<Text fontSize="sm" color="gray.500">
加载公告数据...
</Text>
</VStack>
</Center>
);
}
return (
<>
<VStack spacing={4} align="stretch">
{disclosureSchedule.length > 0 && (
<Box>
@@ -634,16 +598,12 @@ const BasicInfoTab = ({
key={idx}
variant="outline"
size="sm"
bg={
schedule.is_disclosed ? "green.50" : "orange.50"
}
bg={schedule.is_disclosed ? "green.50" : "orange.50"}
>
<CardBody p={3}>
<VStack spacing={1}>
<Badge
colorScheme={
schedule.is_disclosed ? "green" : "orange"
}
colorScheme={schedule.is_disclosed ? "green" : "orange"}
>
{schedule.report_name}
</Badge>
@@ -690,16 +650,10 @@ const BasicInfoTab = ({
{announcement.info_type || "公告"}
</Badge>
<Text fontSize="xs" color="gray.500">
{formatUtils.formatDate(
announcement.announce_date
)}
{formatUtils.formatDate(announcement.announce_date)}
</Text>
</HStack>
<Text
fontSize="sm"
fontWeight="medium"
noOfLines={1}
>
<Text fontSize="sm" fontWeight="medium" noOfLines={1}>
{announcement.title}
</Text>
</VStack>
@@ -726,25 +680,94 @@ const BasicInfoTab = ({
</VStack>
</Box>
</VStack>
</TabPanel>
{/* 分支机构标签页 */}
<TabPanel>
{branches.length > 0 ? (
{/* 公告详情模态框 */}
<Modal isOpen={isOpen} onClose={onClose} size="xl">
<ModalOverlay />
<ModalContent>
<ModalHeader>
<VStack align="start" spacing={1}>
<Text>{selectedAnnouncement?.title}</Text>
<HStack>
<Badge colorScheme="blue">
{selectedAnnouncement?.info_type || "公告"}
</Badge>
<Text fontSize="sm" color="gray.500">
{formatUtils.formatDate(selectedAnnouncement?.announce_date)}
</Text>
</HStack>
</VStack>
</ModalHeader>
<ModalCloseButton />
<ModalBody>
<VStack align="start" spacing={3}>
<Text fontSize="sm">
文件格式：{selectedAnnouncement?.format || "-"}
</Text>
<Text fontSize="sm">
文件大小：{selectedAnnouncement?.file_size || "-"} KB
</Text>
</VStack>
</ModalBody>
<ModalFooter>
<Button
colorScheme="blue"
mr={3}
onClick={() => window.open(selectedAnnouncement?.url, "_blank")}
>
查看原文
</Button>
<Button variant="ghost" onClick={onClose}>
关闭
</Button>
</ModalFooter>
</ModalContent>
</Modal>
</>
);
};
/**
* 分支机构 Tab Panel - 懒加载子组件
*/
const BranchesTabPanel = ({ stockCode }) => {
const { branches, loading } = useBranchesData(stockCode);
if (loading) {
return (
<Center h="200px">
<VStack>
<Spinner size="lg" color="blue.500" />
<Text fontSize="sm" color="gray.500">
加载分支机构数据...
</Text>
</VStack>
</Center>
);
}
if (branches.length === 0) {
return (
<Center h="200px">
<VStack>
<Icon as={FaSitemap} boxSize={12} color="gray.300" />
<Text color="gray.500">暂无分支机构信息</Text>
</VStack>
</Center>
);
}
return (
<SimpleGrid columns={{ base: 1, md: 2 }} spacing={4}>
{branches.map((branch, idx) => (
<Card key={idx} variant="outline">
<CardBody>
<VStack align="start" spacing={3}>
<HStack justify="space-between" w="full">
<Text fontWeight="bold">
{branch.branch_name}
</Text>
<Text fontWeight="bold">{branch.branch_name}</Text>
<Badge
colorScheme={
branch.business_status === "存续"
? "green"
: "red"
branch.business_status === "存续" ? "green" : "red"
}
>
{branch.business_status}
@@ -790,19 +813,22 @@ const BasicInfoTab = ({
</Card>
))}
</SimpleGrid>
) : (
<Center h="200px">
<VStack>
<Icon as={FaSitemap} boxSize={12} color="gray.300" />
<Text color="gray.500">暂无分支机构信息</Text>
</VStack>
</Center>
)}
</TabPanel>
);
};
{/* 工商信息标签页 */}
<TabPanel>
{basicInfo && (
/**
* 工商信息 Tab Panel - 使用父组件传入的 basicInfo
*/
const BusinessInfoTabPanel = ({ basicInfo }) => {
if (!basicInfo) {
return (
<Center h="200px">
<Text color="gray.500">暂无工商信息</Text>
</Center>
);
}
return (
<VStack spacing={4} align="stretch">
<SimpleGrid columns={{ base: 1, md: 2 }} spacing={6}>
<Box>
@@ -886,56 +912,82 @@ const BasicInfoTab = ({
</Text>
</Box>
</VStack>
)}
);
};
// ============================================
// 主组件
// ============================================
/**
* 基本信息 Tab 组件（懒加载版本）
*
* Props:
* - stockCode: 股票代码（用于懒加载数据）
* - basicInfo: 公司基本信息（从父组件传入，用于工商信息 Tab）
* - cardBg: 卡片背景色
*
* 懒加载策略：
* - 使用 Chakra UI Tabs 的 isLazy 属性
* - 每个 TabPanel 使用独立子组件，在首次激活时才渲染并加载数据
*/
const BasicInfoTab = ({ stockCode, basicInfo, cardBg }) => {
return (
<Card bg={cardBg} shadow="md">
<CardBody>
<Tabs isLazy variant="enclosed" colorScheme="blue">
<TabList flexWrap="wrap">
<Tab>
<Icon as={FaShareAlt} mr={2} />
股权结构
</Tab>
<Tab>
<Icon as={FaUserTie} mr={2} />
管理团队
</Tab>
<Tab>
<Icon as={FaBullhorn} mr={2} />
公司公告
</Tab>
<Tab>
<Icon as={FaSitemap} mr={2} />
分支机构
</Tab>
<Tab>
<Icon as={FaInfoCircle} mr={2} />
工商信息
</Tab>
</TabList>
<TabPanels>
{/* 股权结构 - 懒加载 */}
<TabPanel>
<ShareholderTabPanel stockCode={stockCode} />
</TabPanel>
{/* 管理团队 - 懒加载 */}
<TabPanel>
<ManagementTabPanel stockCode={stockCode} />
</TabPanel>
{/* 公司公告 - 懒加载 */}
<TabPanel>
<AnnouncementsTabPanel stockCode={stockCode} />
</TabPanel>
{/* 分支机构 - 懒加载 */}
<TabPanel>
<BranchesTabPanel stockCode={stockCode} />
</TabPanel>
{/* 工商信息 - 使用父组件传入的 basicInfo */}
<TabPanel>
<BusinessInfoTabPanel basicInfo={basicInfo} />
</TabPanel>
</TabPanels>
</Tabs>
</CardBody>
</Card>
{/* 公告详情模态框 */}
<Modal isOpen={isOpen} onClose={onClose} size="xl">
<ModalOverlay />
<ModalContent>
<ModalHeader>
<VStack align="start" spacing={1}>
<Text>{selectedAnnouncement?.title}</Text>
<HStack>
<Badge colorScheme="blue">
{selectedAnnouncement?.info_type || "公告"}
</Badge>
<Text fontSize="sm" color="gray.500">
{formatUtils.formatDate(selectedAnnouncement?.announce_date)}
</Text>
</HStack>
</VStack>
</ModalHeader>
<ModalCloseButton />
<ModalBody>
<VStack align="start" spacing={3}>
<Text fontSize="sm">
文件格式：{selectedAnnouncement?.format || "-"}
</Text>
<Text fontSize="sm">
文件大小：{selectedAnnouncement?.file_size || "-"} KB
</Text>
</VStack>
</ModalBody>
<ModalFooter>
<Button
colorScheme="blue"
mr={3}
onClick={() => window.open(selectedAnnouncement?.url, "_blank")}
>
查看原文
</Button>
<Button variant="ghost" onClick={onClose}>
关闭
</Button>
</ModalFooter>
</ModalContent>
</Modal>
</>
);
};

61
src/views/Company/components/CompanyOverview/hooks/useAnnouncementsData.ts Normal file
View File

@@ -0,0 +1,61 @@
// src/views/Company/components/CompanyOverview/hooks/useAnnouncementsData.ts
// 公告数据 Hook - 用于公司公告 Tab
import { useState, useEffect, useCallback } from "react";
import { logger } from "@utils/logger";
import { getApiBase } from "@utils/apiConfig";
import type { Announcement } from "../types";
const API_BASE_URL = getApiBase();
interface ApiResponse<T> {
success: boolean;
data: T;
}
interface UseAnnouncementsDataResult {
announcements: Announcement[];
loading: boolean;
error: string | null;
}
/**
* 公告数据 Hook
* @param stockCode - 股票代码
*/
export const useAnnouncementsData = (stockCode?: string): UseAnnouncementsDataResult => {
const [announcements, setAnnouncements] = useState<Announcement[]>([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const loadData = useCallback(async () => {
if (!stockCode) return;
setLoading(true);
setError(null);
try {
const response = await fetch(
`${API_BASE_URL}/api/stock/${stockCode}/announcements?limit=20`
);
const result = (await response.json()) as ApiResponse<Announcement[]>;
if (result.success) {
setAnnouncements(result.data);
} else {
setError("加载公告数据失败");
}
} catch (err) {
logger.error("useAnnouncementsData", "loadData", err, { stockCode });
setError("网络请求失败");
} finally {
setLoading(false);
}
}, [stockCode]);
useEffect(() => {
loadData();
}, [loadData]);
return { announcements, loading, error };
};

59
src/views/Company/components/CompanyOverview/hooks/useBasicInfo.ts Normal file
View File

@@ -0,0 +1,59 @@
// src/views/Company/components/CompanyOverview/hooks/useBasicInfo.ts
// 公司基本信息 Hook - 用于 CompanyHeaderCard
import { useState, useEffect, useCallback } from "react";
import { logger } from "@utils/logger";
import { getApiBase } from "@utils/apiConfig";
import type { BasicInfo } from "../types";
const API_BASE_URL = getApiBase();
interface ApiResponse<T> {
success: boolean;
data: T;
}
interface UseBasicInfoResult {
basicInfo: BasicInfo | null;
loading: boolean;
error: string | null;
}
/**
* 公司基本信息 Hook
* @param stockCode - 股票代码
*/
export const useBasicInfo = (stockCode?: string): UseBasicInfoResult => {
const [basicInfo, setBasicInfo] = useState<BasicInfo | null>(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const loadData = useCallback(async () => {
if (!stockCode) return;
setLoading(true);
setError(null);
try {
const response = await fetch(`${API_BASE_URL}/api/stock/${stockCode}/basic-info`);
const result = (await response.json()) as ApiResponse<BasicInfo>;
if (result.success) {
setBasicInfo(result.data);
} else {
setError("加载基本信息失败");
}
} catch (err) {
logger.error("useBasicInfo", "loadData", err, { stockCode });
setError("网络请求失败");
} finally {
setLoading(false);
}
}, [stockCode]);
useEffect(() => {
loadData();
}, [loadData]);
return { basicInfo, loading, error };
};

59
src/views/Company/components/CompanyOverview/hooks/useBranchesData.ts Normal file
View File

@@ -0,0 +1,59 @@
// src/views/Company/components/CompanyOverview/hooks/useBranchesData.ts
// 分支机构数据 Hook - 用于分支机构 Tab
import { useState, useEffect, useCallback } from "react";
import { logger } from "@utils/logger";
import { getApiBase } from "@utils/apiConfig";
import type { Branch } from "../types";
const API_BASE_URL = getApiBase();
interface ApiResponse<T> {
success: boolean;
data: T;
}
interface UseBranchesDataResult {
branches: Branch[];
loading: boolean;
error: string | null;
}
/**
* 分支机构数据 Hook
* @param stockCode - 股票代码
*/
export const useBranchesData = (stockCode?: string): UseBranchesDataResult => {
const [branches, setBranches] = useState<Branch[]>([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const loadData = useCallback(async () => {
if (!stockCode) return;
setLoading(true);
setError(null);
try {
const response = await fetch(`${API_BASE_URL}/api/stock/${stockCode}/branches`);
const result = (await response.json()) as ApiResponse<Branch[]>;
if (result.success) {
setBranches(result.data);
} else {
setError("加载分支机构数据失败");
}
} catch (err) {
logger.error("useBranchesData", "loadData", err, { stockCode });
setError("网络请求失败");
} finally {
setLoading(false);
}
}, [stockCode]);
useEffect(() => {
loadData();
}, [loadData]);
return { branches, loading, error };
};

61
src/views/Company/components/CompanyOverview/hooks/useDisclosureData.ts Normal file
View File

@@ -0,0 +1,61 @@
// src/views/Company/components/CompanyOverview/hooks/useDisclosureData.ts
// 披露日程数据 Hook - 用于工商信息 Tab
import { useState, useEffect, useCallback } from "react";
import { logger } from "@utils/logger";
import { getApiBase } from "@utils/apiConfig";
import type { DisclosureSchedule } from "../types";
const API_BASE_URL = getApiBase();
interface ApiResponse<T> {
success: boolean;
data: T;
}
interface UseDisclosureDataResult {
disclosureSchedule: DisclosureSchedule[];
loading: boolean;
error: string | null;
}
/**
* 披露日程数据 Hook
* @param stockCode - 股票代码
*/
export const useDisclosureData = (stockCode?: string): UseDisclosureDataResult => {
const [disclosureSchedule, setDisclosureSchedule] = useState<DisclosureSchedule[]>([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const loadData = useCallback(async () => {
if (!stockCode) return;
setLoading(true);
setError(null);
try {
const response = await fetch(
`${API_BASE_URL}/api/stock/${stockCode}/disclosure-schedule`
);
const result = (await response.json()) as ApiResponse<DisclosureSchedule[]>;
if (result.success) {
setDisclosureSchedule(result.data);
} else {
setError("加载披露日程数据失败");
}
} catch (err) {
logger.error("useDisclosureData", "loadData", err, { stockCode });
setError("网络请求失败");
} finally {
setLoading(false);
}
}, [stockCode]);
useEffect(() => {
loadData();
}, [loadData]);
return { disclosureSchedule, loading, error };
};

61
src/views/Company/components/CompanyOverview/hooks/useManagementData.ts Normal file
View File

@@ -0,0 +1,61 @@
// src/views/Company/components/CompanyOverview/hooks/useManagementData.ts
// 管理团队数据 Hook - 用于管理团队 Tab
import { useState, useEffect, useCallback } from "react";
import { logger } from "@utils/logger";
import { getApiBase } from "@utils/apiConfig";
import type { Management } from "../types";
const API_BASE_URL = getApiBase();
interface ApiResponse<T> {
success: boolean;
data: T;
}
interface UseManagementDataResult {
management: Management[];
loading: boolean;
error: string | null;
}
/**
* 管理团队数据 Hook
* @param stockCode - 股票代码
*/
export const useManagementData = (stockCode?: string): UseManagementDataResult => {
const [management, setManagement] = useState<Management[]>([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const loadData = useCallback(async () => {
if (!stockCode) return;
setLoading(true);
setError(null);
try {
const response = await fetch(
`${API_BASE_URL}/api/stock/${stockCode}/management?active_only=true`
);
const result = (await response.json()) as ApiResponse<Management[]>;
if (result.success) {
setManagement(result.data);
} else {
setError("加载管理团队数据失败");
}
} catch (err) {
logger.error("useManagementData", "loadData", err, { stockCode });
setError("网络请求失败");
} finally {
setLoading(false);
}
}, [stockCode]);
useEffect(() => {
loadData();
}, [loadData]);
return { management, loading, error };
};

83
src/views/Company/components/CompanyOverview/hooks/useShareholderData.ts Normal file
View File

@@ -0,0 +1,83 @@
// src/views/Company/components/CompanyOverview/hooks/useShareholderData.ts
// 股权结构数据 Hook - 用于股权结构 Tab
import { useState, useEffect, useCallback } from "react";
import { logger } from "@utils/logger";
import { getApiBase } from "@utils/apiConfig";
import type { ActualControl, Concentration, Shareholder } from "../types";
const API_BASE_URL = getApiBase();
interface ApiResponse<T> {
success: boolean;
data: T;
}
interface UseShareholderDataResult {
actualControl: ActualControl[];
concentration: Concentration[];
topShareholders: Shareholder[];
topCirculationShareholders: Shareholder[];
loading: boolean;
error: string | null;
}
/**
* 股权结构数据 Hook
* @param stockCode - 股票代码
*/
export const useShareholderData = (stockCode?: string): UseShareholderDataResult => {
const [actualControl, setActualControl] = useState<ActualControl[]>([]);
const [concentration, setConcentration] = useState<Concentration[]>([]);
const [topShareholders, setTopShareholders] = useState<Shareholder[]>([]);
const [topCirculationShareholders, setTopCirculationShareholders] = useState<Shareholder[]>([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const loadData = useCallback(async () => {
if (!stockCode) return;
setLoading(true);
setError(null);
try {
const [actualRes, concentrationRes, shareholdersRes, circulationRes] = await Promise.all([
fetch(`${API_BASE_URL}/api/stock/${stockCode}/actual-control`).then((r) =>
r.json()
) as Promise<ApiResponse<ActualControl[]>>,
fetch(`${API_BASE_URL}/api/stock/${stockCode}/concentration`).then((r) =>
r.json()
) as Promise<ApiResponse<Concentration[]>>,
fetch(`${API_BASE_URL}/api/stock/${stockCode}/top-shareholders?limit=10`).then((r) =>
r.json()
) as Promise<ApiResponse<Shareholder[]>>,
fetch(`${API_BASE_URL}/api/stock/${stockCode}/top-circulation-shareholders?limit=10`).then((r) =>
r.json()
) as Promise<ApiResponse<Shareholder[]>>,
]);
if (actualRes.success) setActualControl(actualRes.data);
if (concentrationRes.success) setConcentration(concentrationRes.data);
if (shareholdersRes.success) setTopShareholders(shareholdersRes.data);
if (circulationRes.success) setTopCirculationShareholders(circulationRes.data);
} catch (err) {
logger.error("useShareholderData", "loadData", err, { stockCode });
setError("加载股权结构数据失败");
} finally {
setLoading(false);
}
}, [stockCode]);
useEffect(() => {
loadData();
}, [loadData]);
return {
actualControl,
concentration,
topShareholders,
topCirculationShareholders,
loading,
error,
};
};

45
src/views/Company/components/CompanyOverview/index.tsx
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 数据）
*
* 懒加载策略：
* - 主组件只加载 basicInfo（1 个 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>
);