- 将 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>
84 lines
2.8 KiB
TypeScript
84 lines
2.8 KiB
TypeScript
// 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,
|
|
};
|
|
};
|