refactor: CompanyOverview 组件 TypeScript 拆分
- 新增 index.tsx: 主组件（组合层，50 行） - 新增 CompanyHeaderCard.tsx: 头部卡片组件（168 行） - 新增 hooks/useCompanyOverviewData.ts: 数据加载 Hook - 删除 index.js: 原 330 行代码精简 85% - 修复 Company/index.js: 恢复 CompanyTabs 渲染 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
@@ -0,0 +1,167 @@
|
||||
// src/views/Company/components/CompanyOverview/CompanyHeaderCard.tsx
|
||||
// 公司头部信息卡片组件
|
||||
|
||||
import React from "react";
|
||||
import {
|
||||
VStack,
|
||||
HStack,
|
||||
Text,
|
||||
Badge,
|
||||
Card,
|
||||
CardBody,
|
||||
Heading,
|
||||
SimpleGrid,
|
||||
Divider,
|
||||
Icon,
|
||||
Grid,
|
||||
GridItem,
|
||||
Stat,
|
||||
StatLabel,
|
||||
StatNumber,
|
||||
Circle,
|
||||
Link,
|
||||
} from "@chakra-ui/react";
|
||||
import {
|
||||
FaBuilding,
|
||||
FaMapMarkerAlt,
|
||||
FaUserShield,
|
||||
FaBriefcase,
|
||||
FaCalendarAlt,
|
||||
FaGlobe,
|
||||
FaEnvelope,
|
||||
FaPhone,
|
||||
FaCrown,
|
||||
} from "react-icons/fa";
|
||||
import { ExternalLinkIcon } from "@chakra-ui/icons";
|
||||
|
||||
import type { CompanyHeaderCardProps } from "./types";
|
||||
import { formatRegisteredCapital, formatDate } from "./utils";
|
||||
|
||||
/**
|
||||
* 公司头部信息卡片组件
|
||||
*/
|
||||
const CompanyHeaderCard: React.FC<CompanyHeaderCardProps> = ({ basicInfo }) => {
|
||||
return (
|
||||
<Card
|
||||
bg="white"
|
||||
shadow="lg"
|
||||
borderTop="4px solid"
|
||||
borderTopColor="blue.500"
|
||||
>
|
||||
<CardBody>
|
||||
<Grid templateColumns="repeat(12, 1fr)" gap={6}>
|
||||
{/* 左侧：公司基本信息 */}
|
||||
<GridItem colSpan={{ base: 12, lg: 8 }}>
|
||||
<VStack align="start" spacing={4}>
|
||||
{/* 公司名称和代码 */}
|
||||
<HStack spacing={4}>
|
||||
<Circle size="60px" bg="blue.500">
|
||||
<Icon as={FaBuilding} color="white" boxSize={8} />
|
||||
</Circle>
|
||||
<VStack align="start" spacing={1}>
|
||||
<HStack>
|
||||
<Heading size="lg" color="blue.600">
|
||||
{basicInfo.ORGNAME || basicInfo.SECNAME}
|
||||
</Heading>
|
||||
<Badge colorScheme="blue" fontSize="md" px={2} py={1}>
|
||||
{basicInfo.SECCODE}
|
||||
</Badge>
|
||||
</HStack>
|
||||
<HStack spacing={2}>
|
||||
<Badge colorScheme="purple" fontSize="xs">
|
||||
{basicInfo.sw_industry_l1}
|
||||
</Badge>
|
||||
<Badge colorScheme="orange" fontSize="xs">
|
||||
{basicInfo.sw_industry_l2}
|
||||
</Badge>
|
||||
{basicInfo.sw_industry_l3 && (
|
||||
<Badge colorScheme="green" fontSize="xs">
|
||||
{basicInfo.sw_industry_l3}
|
||||
</Badge>
|
||||
)}
|
||||
</HStack>
|
||||
</VStack>
|
||||
</HStack>
|
||||
|
||||
<Divider />
|
||||
|
||||
{/* 管理层信息 */}
|
||||
<SimpleGrid columns={{ base: 1, md: 2 }} spacing={3} w="full">
|
||||
<HStack>
|
||||
<Icon as={FaUserShield} color="gray.500" boxSize={4} />
|
||||
<Text fontSize="sm">
|
||||
<Text as="span" color="gray.500">法定代表人：</Text>
|
||||
<Text as="span" fontWeight="bold">{basicInfo.legal_representative}</Text>
|
||||
</Text>
|
||||
</HStack>
|
||||
<HStack>
|
||||
<Icon as={FaCrown} color="gray.500" boxSize={4} />
|
||||
<Text fontSize="sm">
|
||||
<Text as="span" color="gray.500">董事长：</Text>
|
||||
<Text as="span" fontWeight="bold">{basicInfo.chairman}</Text>
|
||||
</Text>
|
||||
</HStack>
|
||||
<HStack>
|
||||
<Icon as={FaBriefcase} color="gray.500" boxSize={4} />
|
||||
<Text fontSize="sm">
|
||||
<Text as="span" color="gray.500">总经理：</Text>
|
||||
<Text as="span" fontWeight="bold">{basicInfo.general_manager}</Text>
|
||||
</Text>
|
||||
</HStack>
|
||||
<HStack>
|
||||
<Icon as={FaCalendarAlt} color="gray.500" boxSize={4} />
|
||||
<Text fontSize="sm">
|
||||
<Text as="span" color="gray.500">成立日期：</Text>
|
||||
<Text as="span" fontWeight="bold">{formatDate(basicInfo.establish_date)}</Text>
|
||||
</Text>
|
||||
</HStack>
|
||||
</SimpleGrid>
|
||||
|
||||
{/* 公司简介 */}
|
||||
<Text fontSize="sm" color="gray.600" noOfLines={2}>
|
||||
{basicInfo.company_intro}
|
||||
</Text>
|
||||
</VStack>
|
||||
</GridItem>
|
||||
|
||||
{/* 右侧：注册资本和联系方式 */}
|
||||
<GridItem colSpan={{ base: 12, lg: 4 }}>
|
||||
<VStack spacing={3} align="stretch">
|
||||
<Stat>
|
||||
<StatLabel>注册资本</StatLabel>
|
||||
<StatNumber fontSize="2xl" color="blue.500">
|
||||
{formatRegisteredCapital(basicInfo.reg_capital)}
|
||||
</StatNumber>
|
||||
</Stat>
|
||||
|
||||
<Divider />
|
||||
|
||||
<VStack align="stretch" spacing={1}>
|
||||
<HStack fontSize="sm">
|
||||
<Icon as={FaMapMarkerAlt} color="gray.500" boxSize={3} />
|
||||
<Text noOfLines={1}>{basicInfo.province} {basicInfo.city}</Text>
|
||||
</HStack>
|
||||
<HStack fontSize="sm">
|
||||
<Icon as={FaGlobe} color="gray.500" boxSize={3} />
|
||||
<Link href={basicInfo.website} isExternal color="blue.500" noOfLines={1}>
|
||||
{basicInfo.website} <ExternalLinkIcon mx="2px" />
|
||||
</Link>
|
||||
</HStack>
|
||||
<HStack fontSize="sm">
|
||||
<Icon as={FaEnvelope} color="gray.500" boxSize={3} />
|
||||
<Text noOfLines={1}>{basicInfo.email}</Text>
|
||||
</HStack>
|
||||
<HStack fontSize="sm">
|
||||
<Icon as={FaPhone} color="gray.500" boxSize={3} />
|
||||
<Text>{basicInfo.tel}</Text>
|
||||
</HStack>
|
||||
</VStack>
|
||||
</VStack>
|
||||
</GridItem>
|
||||
</Grid>
|
||||
</CardBody>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default CompanyHeaderCard;
|
||||
@@ -0,0 +1,140 @@
|
||||
// src/views/Company/components/CompanyOverview/hooks/useCompanyOverviewData.ts
|
||||
// 公司概览数据加载 Hook
|
||||
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import { logger } from "@utils/logger";
|
||||
import { getApiBase } from "@utils/apiConfig";
|
||||
import type {
|
||||
BasicInfo,
|
||||
ActualControl,
|
||||
Concentration,
|
||||
Management,
|
||||
Shareholder,
|
||||
Branch,
|
||||
Announcement,
|
||||
DisclosureSchedule,
|
||||
CompanyOverviewData,
|
||||
} from "../types";
|
||||
|
||||
const API_BASE_URL = getApiBase();
|
||||
|
||||
interface ApiResponse<T> {
|
||||
success: boolean;
|
||||
data: T;
|
||||
}
|
||||
|
||||
/**
|
||||
* 公司概览数据加载 Hook
|
||||
* @param propStockCode - 股票代码
|
||||
* @returns 公司概览数据
|
||||
*/
|
||||
export const useCompanyOverviewData = (propStockCode?: string): CompanyOverviewData => {
|
||||
const [stockCode, setStockCode] = useState(propStockCode || "000001");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [dataLoaded, setDataLoaded] = useState(false);
|
||||
|
||||
// 基本信息数据
|
||||
const [basicInfo, setBasicInfo] = useState<BasicInfo | null>(null);
|
||||
const [actualControl, setActualControl] = useState<ActualControl[]>([]);
|
||||
const [concentration, setConcentration] = useState<Concentration[]>([]);
|
||||
const [management, setManagement] = useState<Management[]>([]);
|
||||
const [topCirculationShareholders, setTopCirculationShareholders] = useState<Shareholder[]>([]);
|
||||
const [topShareholders, setTopShareholders] = useState<Shareholder[]>([]);
|
||||
const [branches, setBranches] = useState<Branch[]>([]);
|
||||
const [announcements, setAnnouncements] = useState<Announcement[]>([]);
|
||||
const [disclosureSchedule, setDisclosureSchedule] = useState<DisclosureSchedule[]>([]);
|
||||
|
||||
// 监听 props 中的 stockCode 变化
|
||||
useEffect(() => {
|
||||
if (propStockCode && propStockCode !== stockCode) {
|
||||
setStockCode(propStockCode);
|
||||
setDataLoaded(false);
|
||||
}
|
||||
}, [propStockCode, stockCode]);
|
||||
|
||||
// 加载基本信息数据（9个接口）
|
||||
const loadBasicInfoData = useCallback(async () => {
|
||||
if (dataLoaded) return;
|
||||
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
const [
|
||||
basicRes,
|
||||
actualRes,
|
||||
concentrationRes,
|
||||
managementRes,
|
||||
circulationRes,
|
||||
shareholdersRes,
|
||||
branchesRes,
|
||||
announcementsRes,
|
||||
disclosureRes,
|
||||
] = await Promise.all([
|
||||
fetch(`${API_BASE_URL}/api/stock/${stockCode}/basic-info`).then((r) =>
|
||||
r.json()
|
||||
) as Promise<ApiResponse<BasicInfo>>,
|
||||
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}/management?active_only=true`).then((r) =>
|
||||
r.json()
|
||||
) as Promise<ApiResponse<Management[]>>,
|
||||
fetch(`${API_BASE_URL}/api/stock/${stockCode}/top-circulation-shareholders?limit=10`).then((r) =>
|
||||
r.json()
|
||||
) as Promise<ApiResponse<Shareholder[]>>,
|
||||
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}/branches`).then((r) =>
|
||||
r.json()
|
||||
) as Promise<ApiResponse<Branch[]>>,
|
||||
fetch(`${API_BASE_URL}/api/stock/${stockCode}/announcements?limit=20`).then((r) =>
|
||||
r.json()
|
||||
) as Promise<ApiResponse<Announcement[]>>,
|
||||
fetch(`${API_BASE_URL}/api/stock/${stockCode}/disclosure-schedule`).then((r) =>
|
||||
r.json()
|
||||
) as Promise<ApiResponse<DisclosureSchedule[]>>,
|
||||
]);
|
||||
|
||||
if (basicRes.success) setBasicInfo(basicRes.data);
|
||||
if (actualRes.success) setActualControl(actualRes.data);
|
||||
if (concentrationRes.success) setConcentration(concentrationRes.data);
|
||||
if (managementRes.success) setManagement(managementRes.data);
|
||||
if (circulationRes.success) setTopCirculationShareholders(circulationRes.data);
|
||||
if (shareholdersRes.success) setTopShareholders(shareholdersRes.data);
|
||||
if (branchesRes.success) setBranches(branchesRes.data);
|
||||
if (announcementsRes.success) setAnnouncements(announcementsRes.data);
|
||||
if (disclosureRes.success) setDisclosureSchedule(disclosureRes.data);
|
||||
|
||||
setDataLoaded(true);
|
||||
} catch (err) {
|
||||
logger.error("useCompanyOverviewData", "loadBasicInfoData", err, { stockCode });
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [stockCode, dataLoaded]);
|
||||
|
||||
// 首次加载
|
||||
useEffect(() => {
|
||||
if (stockCode) {
|
||||
loadBasicInfoData();
|
||||
}
|
||||
}, [stockCode, loadBasicInfoData]);
|
||||
|
||||
return {
|
||||
basicInfo,
|
||||
actualControl,
|
||||
concentration,
|
||||
management,
|
||||
topCirculationShareholders,
|
||||
topShareholders,
|
||||
branches,
|
||||
announcements,
|
||||
disclosureSchedule,
|
||||
loading,
|
||||
dataLoaded,
|
||||
};
|
||||
};
|
||||
@@ -1,329 +0,0 @@
|
||||
// src/views/Company/components/CompanyOverview/index.js
|
||||
// 公司概览 - 头部卡片 + 基本信息
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import {
|
||||
Box,
|
||||
VStack,
|
||||
HStack,
|
||||
Text,
|
||||
Badge,
|
||||
Card,
|
||||
CardBody,
|
||||
Heading,
|
||||
SimpleGrid,
|
||||
Divider,
|
||||
Spinner,
|
||||
Center,
|
||||
Icon,
|
||||
Grid,
|
||||
GridItem,
|
||||
Stat,
|
||||
StatLabel,
|
||||
StatNumber,
|
||||
Circle,
|
||||
Link,
|
||||
} from "@chakra-ui/react";
|
||||
|
||||
import {
|
||||
FaBuilding,
|
||||
FaMapMarkerAlt,
|
||||
FaUserShield,
|
||||
FaBriefcase,
|
||||
FaCalendarAlt,
|
||||
FaGlobe,
|
||||
FaEnvelope,
|
||||
FaPhone,
|
||||
FaCrown,
|
||||
} from "react-icons/fa";
|
||||
|
||||
import { ExternalLinkIcon } from "@chakra-ui/icons";
|
||||
|
||||
import { logger } from "@utils/logger";
|
||||
import { getApiBase } from "@utils/apiConfig";
|
||||
|
||||
// 子组件
|
||||
import BasicInfoTab from "./BasicInfoTab";
|
||||
|
||||
// API配置
|
||||
const API_BASE_URL = getApiBase();
|
||||
|
||||
// 格式化工具
|
||||
const formatUtils = {
|
||||
formatRegisteredCapital: (value) => {
|
||||
if (!value && value !== 0) return "-";
|
||||
const absValue = Math.abs(value);
|
||||
if (absValue >= 100000) {
|
||||
return (value / 10000).toFixed(2) + "亿元";
|
||||
}
|
||||
return value.toFixed(2) + "万元";
|
||||
},
|
||||
formatDate: (dateString) => {
|
||||
if (!dateString) return "-";
|
||||
return new Date(dateString).toLocaleDateString("zh-CN");
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 公司概览组件
|
||||
*
|
||||
* 功能：
|
||||
* - 显示公司头部信息卡片
|
||||
* - 显示基本信息（股权结构、管理层、公告等）
|
||||
*
|
||||
* @param {Object} props
|
||||
* @param {string} props.stockCode - 股票代码
|
||||
*/
|
||||
const CompanyOverview = ({ stockCode: propStockCode }) => {
|
||||
const [stockCode, setStockCode] = useState(propStockCode || "000001");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [dataLoaded, setDataLoaded] = useState(false);
|
||||
|
||||
// 监听 props 中的 stockCode 变化
|
||||
useEffect(() => {
|
||||
if (propStockCode && propStockCode !== stockCode) {
|
||||
setStockCode(propStockCode);
|
||||
setDataLoaded(false);
|
||||
}
|
||||
}, [propStockCode, stockCode]);
|
||||
|
||||
// 基本信息数据
|
||||
const [basicInfo, setBasicInfo] = useState(null);
|
||||
const [actualControl, setActualControl] = useState([]);
|
||||
const [concentration, setConcentration] = useState([]);
|
||||
const [management, setManagement] = useState([]);
|
||||
const [topCirculationShareholders, setTopCirculationShareholders] = useState([]);
|
||||
const [topShareholders, setTopShareholders] = useState([]);
|
||||
const [branches, setBranches] = useState([]);
|
||||
const [announcements, setAnnouncements] = useState([]);
|
||||
const [disclosureSchedule, setDisclosureSchedule] = useState([]);
|
||||
|
||||
const [_error, setError] = useState(null);
|
||||
|
||||
// 加载基本信息数据（9个接口）
|
||||
const loadBasicInfoData = async () => {
|
||||
if (dataLoaded) return;
|
||||
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const requests = [
|
||||
fetch(`${API_BASE_URL}/api/stock/${stockCode}/basic-info`).then((r) =>
|
||||
r.json()
|
||||
),
|
||||
fetch(
|
||||
`${API_BASE_URL}/api/stock/${stockCode}/actual-control`
|
||||
).then((r) => r.json()),
|
||||
fetch(
|
||||
`${API_BASE_URL}/api/stock/${stockCode}/concentration`
|
||||
).then((r) => r.json()),
|
||||
fetch(
|
||||
`${API_BASE_URL}/api/stock/${stockCode}/management?active_only=true`
|
||||
).then((r) => r.json()),
|
||||
fetch(
|
||||
`${API_BASE_URL}/api/stock/${stockCode}/top-circulation-shareholders?limit=10`
|
||||
).then((r) => r.json()),
|
||||
fetch(
|
||||
`${API_BASE_URL}/api/stock/${stockCode}/top-shareholders?limit=10`
|
||||
).then((r) => r.json()),
|
||||
fetch(`${API_BASE_URL}/api/stock/${stockCode}/branches`).then((r) =>
|
||||
r.json()
|
||||
),
|
||||
fetch(
|
||||
`${API_BASE_URL}/api/stock/${stockCode}/announcements?limit=20`
|
||||
).then((r) => r.json()),
|
||||
fetch(
|
||||
`${API_BASE_URL}/api/stock/${stockCode}/disclosure-schedule`
|
||||
).then((r) => r.json()),
|
||||
];
|
||||
|
||||
const [
|
||||
basicRes,
|
||||
actualRes,
|
||||
concentrationRes,
|
||||
managementRes,
|
||||
circulationRes,
|
||||
shareholdersRes,
|
||||
branchesRes,
|
||||
announcementsRes,
|
||||
disclosureRes,
|
||||
] = await Promise.all(requests);
|
||||
|
||||
if (basicRes.success) setBasicInfo(basicRes.data);
|
||||
if (actualRes.success) setActualControl(actualRes.data);
|
||||
if (concentrationRes.success) setConcentration(concentrationRes.data);
|
||||
if (managementRes.success) setManagement(managementRes.data);
|
||||
if (circulationRes.success)
|
||||
setTopCirculationShareholders(circulationRes.data);
|
||||
if (shareholdersRes.success) setTopShareholders(shareholdersRes.data);
|
||||
if (branchesRes.success) setBranches(branchesRes.data);
|
||||
if (announcementsRes.success) setAnnouncements(announcementsRes.data);
|
||||
if (disclosureRes.success) setDisclosureSchedule(disclosureRes.data);
|
||||
|
||||
setDataLoaded(true);
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
logger.error("CompanyOverview", "loadBasicInfoData", err, { stockCode });
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 首次加载
|
||||
useEffect(() => {
|
||||
if (stockCode) {
|
||||
loadBasicInfoData();
|
||||
}
|
||||
}, [stockCode]);
|
||||
|
||||
if (loading && !basicInfo) {
|
||||
return (
|
||||
<Center h="300px">
|
||||
<VStack spacing={4}>
|
||||
<Spinner size="xl" color="blue.500" thickness="4px" />
|
||||
<Text>正在加载公司概览数据...</Text>
|
||||
</VStack>
|
||||
</Center>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<VStack spacing={6} align="stretch">
|
||||
{/* 公司头部信息卡片 */}
|
||||
{basicInfo && (
|
||||
<Card
|
||||
bg="white"
|
||||
shadow="lg"
|
||||
borderTop="4px solid"
|
||||
borderTopColor="blue.500"
|
||||
>
|
||||
<CardBody>
|
||||
<Grid templateColumns="repeat(12, 1fr)" gap={6}>
|
||||
<GridItem colSpan={{ base: 12, lg: 8 }}>
|
||||
<VStack align="start" spacing={4}>
|
||||
<HStack spacing={4}>
|
||||
<Circle size="60px" bg="blue.500">
|
||||
<Icon as={FaBuilding} color="white" boxSize={8} />
|
||||
</Circle>
|
||||
<VStack align="start" spacing={1}>
|
||||
<HStack>
|
||||
<Heading size="lg" color="blue.600">
|
||||
{basicInfo.ORGNAME || basicInfo.SECNAME}
|
||||
</Heading>
|
||||
<Badge colorScheme="blue" fontSize="md" px={2} py={1}>
|
||||
{basicInfo.SECCODE}
|
||||
</Badge>
|
||||
</HStack>
|
||||
<HStack spacing={2}>
|
||||
<Badge colorScheme="purple" fontSize="xs">
|
||||
{basicInfo.sw_industry_l1}
|
||||
</Badge>
|
||||
<Badge colorScheme="orange" fontSize="xs">
|
||||
{basicInfo.sw_industry_l2}
|
||||
</Badge>
|
||||
{basicInfo.sw_industry_l3 && (
|
||||
<Badge colorScheme="green" fontSize="xs">
|
||||
{basicInfo.sw_industry_l3}
|
||||
</Badge>
|
||||
)}
|
||||
</HStack>
|
||||
</VStack>
|
||||
</HStack>
|
||||
|
||||
<Divider />
|
||||
|
||||
<SimpleGrid columns={{ base: 1, md: 2 }} spacing={3} w="full">
|
||||
<HStack>
|
||||
<Icon as={FaUserShield} color="gray.500" boxSize={4} />
|
||||
<Text fontSize="sm">
|
||||
<Text as="span" color="gray.500">法定代表人：</Text>
|
||||
<Text as="span" fontWeight="bold">{basicInfo.legal_representative}</Text>
|
||||
</Text>
|
||||
</HStack>
|
||||
<HStack>
|
||||
<Icon as={FaCrown} color="gray.500" boxSize={4} />
|
||||
<Text fontSize="sm">
|
||||
<Text as="span" color="gray.500">董事长：</Text>
|
||||
<Text as="span" fontWeight="bold">{basicInfo.chairman}</Text>
|
||||
</Text>
|
||||
</HStack>
|
||||
<HStack>
|
||||
<Icon as={FaBriefcase} color="gray.500" boxSize={4} />
|
||||
<Text fontSize="sm">
|
||||
<Text as="span" color="gray.500">总经理：</Text>
|
||||
<Text as="span" fontWeight="bold">{basicInfo.general_manager}</Text>
|
||||
</Text>
|
||||
</HStack>
|
||||
<HStack>
|
||||
<Icon as={FaCalendarAlt} color="gray.500" boxSize={4} />
|
||||
<Text fontSize="sm">
|
||||
<Text as="span" color="gray.500">成立日期：</Text>
|
||||
<Text as="span" fontWeight="bold">{formatUtils.formatDate(basicInfo.establish_date)}</Text>
|
||||
</Text>
|
||||
</HStack>
|
||||
</SimpleGrid>
|
||||
|
||||
<Text fontSize="sm" color="gray.600" noOfLines={2}>
|
||||
{basicInfo.company_intro}
|
||||
</Text>
|
||||
</VStack>
|
||||
</GridItem>
|
||||
|
||||
<GridItem colSpan={{ base: 12, lg: 4 }}>
|
||||
<VStack spacing={3} align="stretch">
|
||||
<Stat>
|
||||
<StatLabel>注册资本</StatLabel>
|
||||
<StatNumber fontSize="2xl" color="blue.500">
|
||||
{formatUtils.formatRegisteredCapital(basicInfo.reg_capital)}
|
||||
</StatNumber>
|
||||
</Stat>
|
||||
|
||||
<Divider />
|
||||
|
||||
<VStack align="stretch" spacing={1}>
|
||||
<HStack fontSize="sm">
|
||||
<Icon as={FaMapMarkerAlt} color="gray.500" boxSize={3} />
|
||||
<Text noOfLines={1}>{basicInfo.province} {basicInfo.city}</Text>
|
||||
</HStack>
|
||||
<HStack fontSize="sm">
|
||||
<Icon as={FaGlobe} color="gray.500" boxSize={3} />
|
||||
<Link href={basicInfo.website} isExternal color="blue.500" noOfLines={1}>
|
||||
{basicInfo.website} <ExternalLinkIcon mx="2px" />
|
||||
</Link>
|
||||
</HStack>
|
||||
<HStack fontSize="sm">
|
||||
<Icon as={FaEnvelope} color="gray.500" boxSize={3} />
|
||||
<Text noOfLines={1}>{basicInfo.email}</Text>
|
||||
</HStack>
|
||||
<HStack fontSize="sm">
|
||||
<Icon as={FaPhone} color="gray.500" boxSize={3} />
|
||||
<Text>{basicInfo.tel}</Text>
|
||||
</HStack>
|
||||
</VStack>
|
||||
</VStack>
|
||||
</GridItem>
|
||||
</Grid>
|
||||
</CardBody>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* 基本信息内容 */}
|
||||
<BasicInfoTab
|
||||
basicInfo={basicInfo}
|
||||
actualControl={actualControl}
|
||||
concentration={concentration}
|
||||
topShareholders={topShareholders}
|
||||
topCirculationShareholders={topCirculationShareholders}
|
||||
management={management}
|
||||
announcements={announcements}
|
||||
branches={branches}
|
||||
disclosureSchedule={disclosureSchedule}
|
||||
cardBg="white"
|
||||
loading={loading}
|
||||
/>
|
||||
</VStack>
|
||||
);
|
||||
};
|
||||
|
||||
export default CompanyOverview;
|
||||
70
src/views/Company/components/CompanyOverview/index.tsx
Normal file
70
src/views/Company/components/CompanyOverview/index.tsx
Normal file
@@ -0,0 +1,70 @@
|
||||
// src/views/Company/components/CompanyOverview/index.tsx
|
||||
// 公司概览 - 主组件（组合层）
|
||||
|
||||
import React from "react";
|
||||
import { VStack, Spinner, Center, Text } from "@chakra-ui/react";
|
||||
|
||||
import { useCompanyOverviewData } from "./hooks/useCompanyOverviewData";
|
||||
import CompanyHeaderCard from "./CompanyHeaderCard";
|
||||
import type { CompanyOverviewProps } from "./types";
|
||||
|
||||
// 子组件（暂保持 JS）
|
||||
import BasicInfoTab from "./BasicInfoTab";
|
||||
|
||||
/**
|
||||
* 公司概览组件
|
||||
*
|
||||
* 功能：
|
||||
* - 显示公司头部信息卡片
|
||||
* - 显示基本信息（股权结构、管理层、公告等）
|
||||
*/
|
||||
const CompanyOverview: React.FC<CompanyOverviewProps> = ({ stockCode }) => {
|
||||
const {
|
||||
basicInfo,
|
||||
actualControl,
|
||||
concentration,
|
||||
management,
|
||||
topCirculationShareholders,
|
||||
topShareholders,
|
||||
branches,
|
||||
announcements,
|
||||
disclosureSchedule,
|
||||
loading,
|
||||
} = useCompanyOverviewData(stockCode);
|
||||
|
||||
// 加载状态
|
||||
if (loading && !basicInfo) {
|
||||
return (
|
||||
<Center h="300px">
|
||||
<VStack spacing={4}>
|
||||
<Spinner size="xl" color="blue.500" thickness="4px" />
|
||||
<Text>正在加载公司概览数据...</Text>
|
||||
</VStack>
|
||||
</Center>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<VStack spacing={6} align="stretch">
|
||||
{/* 公司头部信息卡片 */}
|
||||
{basicInfo && <CompanyHeaderCard basicInfo={basicInfo} />}
|
||||
|
||||
{/* 基本信息内容 */}
|
||||
<BasicInfoTab
|
||||
basicInfo={basicInfo}
|
||||
actualControl={actualControl}
|
||||
concentration={concentration}
|
||||
topShareholders={topShareholders}
|
||||
topCirculationShareholders={topCirculationShareholders}
|
||||
management={management}
|
||||
announcements={announcements}
|
||||
branches={branches}
|
||||
disclosureSchedule={disclosureSchedule}
|
||||
cardBg="white"
|
||||
loading={loading}
|
||||
/>
|
||||
</VStack>
|
||||
);
|
||||
};
|
||||
|
||||
export default CompanyOverview;
|
||||
@@ -98,7 +98,7 @@ const CompanyIndex = () => {
|
||||
/>
|
||||
|
||||
{/* Tab 切换区域：概览、行情、财务、预测 */}
|
||||
{/* <CompanyTabs stockCode={stockCode} onTabChange={trackTabChanged} bgColor="#1A202C"/> */}
|
||||
<CompanyTabs stockCode={stockCode} onTabChange={trackTabChanged} bgColor="#1A202C"/>
|
||||
</VStack>
|
||||
</Container>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user