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

refactor: BasicInfoTab 拆分为 TypeScript 模块化组件

Browse Source 
- 删除旧的 BasicInfoTab.js (~1000行)
- 新建 BasicInfoTab/ 目录，拆分为 10 个 TypeScript 文件:
  - index.tsx: 主组件（可配置 Tab）
  - config.ts: Tab 配置 + 黑金主题
  - utils.ts: 格式化工具函数
  - components/: 5 个面板组件 + LoadingState
- 主组件支持 enabledTabs、defaultTabIndex、onTabChange
- 应用黑金主题，支持懒加载 (isLazy)
- 更新 types.ts 添加 ActualControl、Concentration 等类型字段

🤖 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 16:28:54 +08:00
parent 1cd8a2d7e9
commit 9aaf4400c1
13 changed files with 1268 additions and 995 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,994 +0,0 @@
// src/views/Company/components/CompanyOverview/BasicInfoTab.js
// 基本信息 Tab - 股权结构、管理团队、公司公告、分支机构、工商信息
// 懒加载优化：使用 isLazy + 独立 Hooks，点击 Tab 时才加载对应数据
import React from "react";
import {
Box,
VStack,
HStack,
Text,
Heading,
Badge,
Icon,
Card,
CardBody,
CardHeader,
SimpleGrid,
Avatar,
Table,
Thead,
Tbody,
Tr,
Th,
Td,
TableContainer,
Tag,
Tooltip,
Divider,
Center,
Code,
Tabs,
TabList,
TabPanels,
Tab,
TabPanel,
Stat,
StatLabel,
StatNumber,
StatHelpText,
IconButton,
Button,
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalCloseButton,
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,
FaUserTie,
FaBullhorn,
FaSitemap,
FaInfoCircle,
FaCrown,
FaChartPie,
FaUsers,
FaChartLine,
FaArrowUp,
FaArrowDown,
FaChartBar,
FaBuilding,
FaGlobe,
FaShieldAlt,
FaBriefcase,
FaCircle,
FaEye,
FaVenusMars,
FaGraduationCap,
FaPassport,
FaCalendarAlt,
} from "react-icons/fa";
// 格式化工具函数
const formatUtils = {
formatPercentage: (value) => {
if (value === null || value === undefined) return "-";
return `${(value * 100).toFixed(2)}%`;
},
formatNumber: (value) => {
if (value === null || value === undefined) return "-";
if (value >= 100000000) {
return `${(value / 100000000).toFixed(2)}亿`;
} else if (value >= 10000) {
return `${(value / 10000).toFixed(2)}万`;
}
return value.toLocaleString();
},
formatShares: (value) => {
if (value === null || value === undefined) return "-";
if (value >= 100000000) {
return `${(value / 100000000).toFixed(2)}亿股`;
} else if (value >= 10000) {
return `${(value / 10000).toFixed(2)}万股`;
}
return `${value.toLocaleString()}股`;
},
formatDate: (dateStr) => {
if (!dateStr) return "-";
return dateStr.split("T")[0];
},
};
// 股东类型标签组件
const ShareholderTypeBadge = ({ type }) => {
const typeConfig = {
基金: { color: "blue", icon: FaChartBar },
个人: { color: "green", icon: FaUserTie },
法人: { color: "purple", icon: FaBuilding },
QFII: { color: "orange", icon: FaGlobe },
社保: { color: "red", icon: FaShieldAlt },
保险: { color: "teal", icon: FaShieldAlt },
信托: { color: "cyan", icon: FaBriefcase },
券商: { color: "pink", icon: FaChartLine },
};
const config = Object.entries(typeConfig).find(([key]) =>
type?.includes(key)
)?.[1] || { color: "gray", icon: FaCircle };
return (
<Badge colorScheme={config.color} size="sm">
<Icon as={config.icon} mr={1} boxSize={3} />
{type}
</Badge>
);
};
// ============================================
// 懒加载 TabPanel 子组件
// 每个子组件独立调用 Hook，配合 isLazy 实现真正的懒加载
// ============================================
/**
* 股权结构 Tab Panel - 懒加载子组件
*/
const ShareholderTabPanel = ({ stockCode }) => {
const {
actualControl,
concentration,
topShareholders,
topCirculationShareholders,
loading,
} = useShareholderData(stockCode);
// 计算股权集中度变化
const getConcentrationTrend = () => {
const grouped = {};
concentration.forEach((item) => {
if (!grouped[item.end_date]) {
grouped[item.end_date] = {};
}
grouped[item.end_date][item.stat_item] = item;
});
return Object.entries(grouped)
.sort((a, b) => b[0].localeCompare(a[0]))
.slice(0, 5);
};
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">
{actualControl.length > 0 && (
<Box>
<HStack mb={4}>
<Icon as={FaCrown} color="gold" boxSize={5} />
<Heading size="sm">实际控制人</Heading>
</HStack>
<Card variant="outline">
<CardBody>
<HStack justify="space-between">
<VStack align="start">
<Text fontWeight="bold" fontSize="lg">
{actualControl[0].actual_controller_name}
</Text>
<HStack>
<Badge colorScheme="purple">
{actualControl[0].control_type}
</Badge>
<Text fontSize="sm" color="gray.500">
截至 {formatUtils.formatDate(actualControl[0].end_date)}
</Text>
</HStack>
</VStack>
<Stat textAlign="right">
<StatLabel>控制比例</StatLabel>
<StatNumber color="purple.500">
{formatUtils.formatPercentage(actualControl[0].holding_ratio)}
</StatNumber>
<StatHelpText>
{formatUtils.formatShares(actualControl[0].holding_shares)}
</StatHelpText>
</Stat>
</HStack>
</CardBody>
</Card>
</Box>
)}
{concentration.length > 0 && (
<Box>
<HStack mb={4}>
<Icon as={FaChartPie} color="blue.500" boxSize={5} />
<Heading size="sm">股权集中度</Heading>
</HStack>
<SimpleGrid columns={{ base: 1, md: 2 }} spacing={4}>
{getConcentrationTrend()
.slice(0, 1)
.map(([date, items]) => (
<Card key={date} variant="outline">
<CardHeader pb={2}>
<Text fontSize="sm" color="gray.500">
{formatUtils.formatDate(date)}
</Text>
</CardHeader>
<CardBody pt={2}>
<VStack spacing={3} align="stretch">
{Object.entries(items).map(([key, item]) => (
<HStack key={key} justify="space-between">
<Text fontSize="sm">{item.stat_item}</Text>
<HStack>
<Text fontWeight="bold" color="blue.500">
{formatUtils.formatPercentage(item.holding_ratio)}
</Text>
{item.ratio_change && (
<Badge
colorScheme={
item.ratio_change > 0 ? "red" : "green"
}
>
<Icon
as={
item.ratio_change > 0 ? FaArrowUp : FaArrowDown
}
mr={1}
boxSize={3}
/>
{Math.abs(item.ratio_change).toFixed(2)}%
</Badge>
)}
</HStack>
</HStack>
))}
</VStack>
</CardBody>
</Card>
))}
</SimpleGrid>
</Box>
)}
{topShareholders.length > 0 && (
<Box>
<HStack mb={4}>
<Icon as={FaUsers} color="green.500" boxSize={5} />
<Heading size="sm">十大股东</Heading>
<Badge>
{formatUtils.formatDate(topShareholders[0].end_date)}
</Badge>
</HStack>
<TableContainer>
<Table size="sm" variant="striped">
<Thead>
<Tr>
<Th>排名</Th>
<Th>股东名称</Th>
<Th>股东类型</Th>
<Th isNumeric>持股数量</Th>
<Th isNumeric>持股比例</Th>
<Th>股份性质</Th>
</Tr>
</Thead>
<Tbody>
{topShareholders.slice(0, 10).map((shareholder, idx) => (
<Tr key={idx}>
<Td>
<Badge colorScheme={idx < 3 ? "red" : "gray"}>
{shareholder.shareholder_rank}
</Badge>
</Td>
<Td>
<Tooltip label={shareholder.shareholder_name}>
<Text noOfLines={1} maxW="200px">
{shareholder.shareholder_name}
</Text>
</Tooltip>
</Td>
<Td>
<ShareholderTypeBadge type={shareholder.shareholder_type} />
</Td>
<Td isNumeric fontWeight="medium">
{formatUtils.formatShares(shareholder.holding_shares)}
</Td>
<Td isNumeric>
<Text color="blue.500" fontWeight="bold">
{formatUtils.formatPercentage(
shareholder.total_share_ratio
)}
</Text>
</Td>
<Td>
<Badge size="sm" variant="outline">
{shareholder.share_nature || "流通股"}
</Badge>
</Td>
</Tr>
))}
</Tbody>
</Table>
</TableContainer>
</Box>
)}
{topCirculationShareholders.length > 0 && (
<Box>
<HStack mb={4}>
<Icon as={FaChartLine} color="purple.500" boxSize={5} />
<Heading size="sm">十大流通股东</Heading>
<Badge>
{formatUtils.formatDate(topCirculationShareholders[0].end_date)}
</Badge>
</HStack>
<TableContainer>
<Table size="sm" variant="striped">
<Thead>
<Tr>
<Th>排名</Th>
<Th>股东名称</Th>
<Th>股东类型</Th>
<Th isNumeric>持股数量</Th>
<Th isNumeric>流通股比例</Th>
</Tr>
</Thead>
<Tbody>
{topCirculationShareholders.slice(0, 10).map((shareholder, idx) => (
<Tr key={idx}>
<Td>
<Badge colorScheme={idx < 3 ? "orange" : "gray"}>
{shareholder.shareholder_rank}
</Badge>
</Td>
<Td>
<Tooltip label={shareholder.shareholder_name}>
<Text noOfLines={1} maxW="250px">
{shareholder.shareholder_name}
</Text>
</Tooltip>
</Td>
<Td>
<ShareholderTypeBadge type={shareholder.shareholder_type} />
</Td>
<Td isNumeric fontWeight="medium">
{formatUtils.formatShares(shareholder.holding_shares)}
</Td>
<Td isNumeric>
<Text color="purple.500" fontWeight="bold">
{formatUtils.formatPercentage(
shareholder.circulation_share_ratio
)}
</Text>
</Td>
</Tr>
))}
</Tbody>
</Table>
</TableContainer>
</Box>
)}
</VStack>
);
};
/**
* 管理团队 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]) =>
people.length > 0 && (
<Box key={category}>
<HStack mb={4}>
<Icon
as={
category === "高管"
? FaUserTie
: category === "董事"
? FaCrown
: category === "监事"
? FaEye
: FaUsers
}
color={
category === "高管"
? "blue.500"
: category === "董事"
? "purple.500"
: category === "监事"
? "green.500"
: "gray.500"
}
boxSize={5}
/>
<Heading size="sm">{category}</Heading>
<Badge>{people.length}人</Badge>
</HStack>
<SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} spacing={4}>
{people.map((person, idx) => (
<Card key={idx} variant="outline" size="sm">
<CardBody>
<HStack spacing={3} align="start">
<Avatar
name={person.name}
size="md"
bg={
category === "高管"
? "blue.500"
: category === "董事"
? "purple.500"
: category === "监事"
? "green.500"
: "gray.500"
}
/>
<VStack align="start" spacing={1} flex={1}>
<HStack>
<Text fontWeight="bold">{person.name}</Text>
{person.gender && (
<Icon
as={FaVenusMars}
color={
person.gender === "男"
? "blue.400"
: "pink.400"
}
boxSize={3}
/>
)}
</HStack>
<Text fontSize="sm" color="blue.600">
{person.position_name}
</Text>
<HStack spacing={2} flexWrap="wrap">
{person.education && (
<Tag size="sm" variant="subtle">
<Icon as={FaGraduationCap} mr={1} boxSize={3} />
{person.education}
</Tag>
)}
{person.birth_year && (
<Tag size="sm" variant="subtle">
{new Date().getFullYear() -
parseInt(person.birth_year)}
岁
</Tag>
)}
{person.nationality &&
person.nationality !== "中国" && (
<Tag size="sm" colorScheme="orange">
<Icon as={FaPassport} mr={1} boxSize={3} />
{person.nationality}
</Tag>
)}
</HStack>
<Text fontSize="xs" color="gray.500">
任职日期：{formatUtils.formatDate(person.start_date)}
</Text>
</VStack>
</HStack>
</CardBody>
</Card>
))}
</SimpleGrid>
</Box>
)
)}
</VStack>
);
};
/**
* 公司公告 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>
<HStack mb={3}>
<Icon as={FaCalendarAlt} color="orange.500" />
<Text fontWeight="bold">财报披露日程</Text>
</HStack>
<SimpleGrid columns={{ base: 2, md: 4 }} spacing={3}>
{disclosureSchedule.slice(0, 4).map((schedule, idx) => (
<Card
key={idx}
variant="outline"
size="sm"
bg={schedule.is_disclosed ? "green.50" : "orange.50"}
>
<CardBody p={3}>
<VStack spacing={1}>
<Badge
colorScheme={schedule.is_disclosed ? "green" : "orange"}
>
{schedule.report_name}
</Badge>
<Text fontSize="sm" fontWeight="bold">
{schedule.is_disclosed ? "已披露" : "预计"}
</Text>
<Text fontSize="xs">
{formatUtils.formatDate(
schedule.is_disclosed
? schedule.actual_date
: schedule.latest_scheduled_date
)}
</Text>
</VStack>
</CardBody>
</Card>
))}
</SimpleGrid>
</Box>
)}
<Divider />
<Box>
<HStack mb={3}>
<Icon as={FaBullhorn} color="blue.500" />
<Text fontWeight="bold">最新公告</Text>
</HStack>
<VStack spacing={2} align="stretch">
{announcements.map((announcement, idx) => (
<Card
key={idx}
variant="outline"
size="sm"
cursor="pointer"
onClick={() => handleAnnouncementClick(announcement)}
_hover={{ bg: "gray.50" }}
>
<CardBody p={3}>
<HStack justify="space-between">
<VStack align="start" spacing={1} flex={1}>
<HStack>
<Badge size="sm" colorScheme="blue">
{announcement.info_type || "公告"}
</Badge>
<Text fontSize="xs" color="gray.500">
{formatUtils.formatDate(announcement.announce_date)}
</Text>
</HStack>
<Text fontSize="sm" fontWeight="medium" noOfLines={1}>
{announcement.title}
</Text>
</VStack>
<HStack>
{announcement.format && (
<Tag size="sm" variant="subtle">
{announcement.format}
</Tag>
)}
<IconButton
size="sm"
icon={<ExternalLinkIcon />}
variant="ghost"
onClick={(e) => {
e.stopPropagation();
window.open(announcement.url, "_blank");
}}
/>
</HStack>
</HStack>
</CardBody>
</Card>
))}
</VStack>
</Box>
</VStack>
{/* 公告详情模态框 */}
<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>
<Badge
colorScheme={
branch.business_status === "存续" ? "green" : "red"
}
>
{branch.business_status}
</Badge>
</HStack>
<SimpleGrid columns={2} spacing={2} w="full">
<VStack align="start" spacing={1}>
<Text fontSize="xs" color="gray.500">
注册资本
</Text>
<Text fontSize="sm" fontWeight="medium">
{branch.register_capital || "-"}
</Text>
</VStack>
<VStack align="start" spacing={1}>
<Text fontSize="xs" color="gray.500">
法人代表
</Text>
<Text fontSize="sm" fontWeight="medium">
{branch.legal_person || "-"}
</Text>
</VStack>
<VStack align="start" spacing={1}>
<Text fontSize="xs" color="gray.500">
成立日期
</Text>
<Text fontSize="sm" fontWeight="medium">
{formatUtils.formatDate(branch.register_date)}
</Text>
</VStack>
<VStack align="start" spacing={1}>
<Text fontSize="xs" color="gray.500">
关联企业
</Text>
<Text fontSize="sm" fontWeight="medium">
{branch.related_company_count || 0} 家
</Text>
</VStack>
</SimpleGrid>
</VStack>
</CardBody>
</Card>
))}
</SimpleGrid>
);
};
/**
* 工商信息 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>
<Heading size="sm" mb={3}>
工商信息
</Heading>
<VStack align="start" spacing={2}>
<HStack w="full">
<Text fontSize="sm" color="gray.600" minW="80px">
统一信用代码
</Text>
<Code fontSize="xs">{basicInfo.credit_code}</Code>
</HStack>
<HStack w="full">
<Text fontSize="sm" color="gray.600" minW="80px">
公司规模
</Text>
<Text fontSize="sm">{basicInfo.company_size}</Text>
</HStack>
<HStack w="full">
<Text fontSize="sm" color="gray.600" minW="80px">
注册地址
</Text>
<Text fontSize="sm" noOfLines={2}>
{basicInfo.reg_address}
</Text>
</HStack>
<HStack w="full">
<Text fontSize="sm" color="gray.600" minW="80px">
办公地址
</Text>
<Text fontSize="sm" noOfLines={2}>
{basicInfo.office_address}
</Text>
</HStack>
</VStack>
</Box>
<Box>
<Heading size="sm" mb={3}>
服务机构
</Heading>
<VStack align="start" spacing={2}>
<Box>
<Text fontSize="sm" color="gray.600">
会计师事务所
</Text>
<Text fontSize="sm" fontWeight="medium">
{basicInfo.accounting_firm}
</Text>
</Box>
<Box>
<Text fontSize="sm" color="gray.600">
律师事务所
</Text>
<Text fontSize="sm" fontWeight="medium">
{basicInfo.law_firm}
</Text>
</Box>
</VStack>
</Box>
</SimpleGrid>
<Divider />
<Box>
<Heading size="sm" mb={3}>
主营业务
</Heading>
<Text fontSize="sm" lineHeight="tall">
{basicInfo.main_business}
</Text>
</Box>
<Box>
<Heading size="sm" mb={3}>
经营范围
</Heading>
<Text fontSize="sm" lineHeight="tall" color="gray.700">
{basicInfo.business_scope}
</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>
);
};
export default BasicInfoTab;

210
src/views/Company/components/CompanyOverview/BasicInfoTab/components/AnnouncementsPanel.tsx Normal file
View File

@@ -0,0 +1,210 @@
// src/views/Company/components/CompanyOverview/BasicInfoTab/components/AnnouncementsPanel.tsx
// 公司公告 Tab Panel
import React, { useState } from "react";
import {
Box,
VStack,
HStack,
Text,
Badge,
Icon,
Card,
CardBody,
SimpleGrid,
Divider,
IconButton,
Button,
Tag,
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalCloseButton,
ModalBody,
ModalFooter,
useDisclosure,
} from "@chakra-ui/react";
import { FaCalendarAlt, FaBullhorn } from "react-icons/fa";
import { ExternalLinkIcon } from "@chakra-ui/icons";
import { useAnnouncementsData } from "../../hooks/useAnnouncementsData";
import { useDisclosureData } from "../../hooks/useDisclosureData";
import { THEME } from "../config";
import { formatDate } from "../utils";
import LoadingState from "./LoadingState";
interface AnnouncementsPanelProps {
stockCode: string;
}
const AnnouncementsPanel: React.FC<AnnouncementsPanelProps> = ({ stockCode }) => {
const { announcements, loading: announcementsLoading } = useAnnouncementsData(stockCode);
const { disclosureSchedule, loading: disclosureLoading } = useDisclosureData(stockCode);
const { isOpen, onOpen, onClose } = useDisclosure();
const [selectedAnnouncement, setSelectedAnnouncement] = useState<any>(null);
const handleAnnouncementClick = (announcement: any) => {
setSelectedAnnouncement(announcement);
onOpen();
};
const loading = announcementsLoading || disclosureLoading;
if (loading) {
return <LoadingState message="加载公告数据..." />;
}
return (
<>
<VStack spacing={4} align="stretch">
{/* 财报披露日程 */}
{disclosureSchedule.length > 0 && (
<Box>
<HStack mb={3}>
<Icon as={FaCalendarAlt} color={THEME.gold} />
<Text fontWeight="bold" color={THEME.textPrimary}>财报披露日程</Text>
</HStack>
<SimpleGrid columns={{ base: 2, md: 4 }} spacing={3}>
{disclosureSchedule.slice(0, 4).map((schedule: any, idx: number) => (
<Card
key={idx}
bg={schedule.is_disclosed ? "green.900" : "orange.900"}
border="1px solid"
borderColor={schedule.is_disclosed ? "green.600" : "orange.600"}
size="sm"
>
<CardBody p={3}>
<VStack spacing={1}>
<Badge colorScheme={schedule.is_disclosed ? "green" : "orange"}>
{schedule.report_name}
</Badge>
<Text fontSize="sm" fontWeight="bold" color={THEME.textPrimary}>
{schedule.is_disclosed ? "已披露" : "预计"}
</Text>
<Text fontSize="xs" color={THEME.textSecondary}>
{formatDate(
schedule.is_disclosed
? schedule.actual_date
: schedule.latest_scheduled_date
)}
</Text>
</VStack>
</CardBody>
</Card>
))}
</SimpleGrid>
</Box>
)}
<Divider borderColor={THEME.border} />
{/* 最新公告 */}
<Box>
<HStack mb={3}>
<Icon as={FaBullhorn} color={THEME.gold} />
<Text fontWeight="bold" color={THEME.textPrimary}>最新公告</Text>
</HStack>
<VStack spacing={2} align="stretch">
{announcements.map((announcement: any, idx: number) => (
<Card
key={idx}
bg={THEME.tableBg}
border="1px solid"
borderColor={THEME.border}
size="sm"
cursor="pointer"
onClick={() => handleAnnouncementClick(announcement)}
_hover={{ bg: THEME.tableHoverBg }}
>
<CardBody p={3}>
<HStack justify="space-between">
<VStack align="start" spacing={1} flex={1}>
<HStack>
<Badge size="sm" bg={THEME.gold} color="gray.900">
{announcement.info_type || "公告"}
</Badge>
<Text fontSize="xs" color={THEME.textSecondary}>
{formatDate(announcement.announce_date)}
</Text>
</HStack>
<Text fontSize="sm" fontWeight="medium" noOfLines={1} color={THEME.textPrimary}>
{announcement.title}
</Text>
</VStack>
<HStack>
{announcement.format && (
<Tag size="sm" bg={THEME.tableHoverBg} color={THEME.textSecondary}>
{announcement.format}
</Tag>
)}
<IconButton
size="sm"
icon={<ExternalLinkIcon />}
variant="ghost"
color={THEME.goldLight}
aria-label="查看原文"
onClick={(e) => {
e.stopPropagation();
window.open(announcement.url, "_blank");
}}
/>
</HStack>
</HStack>
</CardBody>
</Card>
))}
</VStack>
</Box>
</VStack>
{/* 公告详情模态框 */}
<Modal isOpen={isOpen} onClose={onClose} size="xl">
<ModalOverlay />
<ModalContent bg={THEME.cardBg}>
<ModalHeader color={THEME.textPrimary}>
<VStack align="start" spacing={1}>
<Text>{selectedAnnouncement?.title}</Text>
<HStack>
<Badge bg={THEME.gold} color="gray.900">
{selectedAnnouncement?.info_type || "公告"}
</Badge>
<Text fontSize="sm" color={THEME.textSecondary}>
{formatDate(selectedAnnouncement?.announce_date)}
</Text>
</HStack>
</VStack>
</ModalHeader>
<ModalCloseButton color={THEME.textPrimary} />
<ModalBody>
<VStack align="start" spacing={3}>
<Text fontSize="sm" color={THEME.textSecondary}>
文件格式：{selectedAnnouncement?.format || "-"}
</Text>
<Text fontSize="sm" color={THEME.textSecondary}>
文件大小：{selectedAnnouncement?.file_size || "-"} KB
</Text>
</VStack>
</ModalBody>
<ModalFooter>
<Button
bg={THEME.gold}
color="gray.900"
mr={3}
_hover={{ bg: THEME.goldLight }}
onClick={() => window.open(selectedAnnouncement?.url, "_blank")}
>
查看原文
</Button>
<Button variant="ghost" color={THEME.textSecondary} onClick={onClose}>
关闭
</Button>
</ModalFooter>
</ModalContent>
</Modal>
</>
);
};
export default AnnouncementsPanel;

95
src/views/Company/components/CompanyOverview/BasicInfoTab/components/BranchesPanel.tsx Normal file
View File

@@ -0,0 +1,95 @@
// src/views/Company/components/CompanyOverview/BasicInfoTab/components/BranchesPanel.tsx
// 分支机构 Tab Panel
import React from "react";
import {
Box,
VStack,
HStack,
Text,
Badge,
Icon,
Card,
CardBody,
SimpleGrid,
Center,
} from "@chakra-ui/react";
import { FaSitemap } from "react-icons/fa";
import { useBranchesData } from "../../hooks/useBranchesData";
import { THEME } from "../config";
import { formatDate } from "../utils";
import LoadingState from "./LoadingState";
interface BranchesPanelProps {
stockCode: string;
}
const BranchesPanel: React.FC<BranchesPanelProps> = ({ stockCode }) => {
const { branches, loading } = useBranchesData(stockCode);
if (loading) {
return <LoadingState message="加载分支机构数据..." />;
}
if (branches.length === 0) {
return (
<Center h="200px">
<VStack>
<Icon as={FaSitemap} boxSize={12} color={THEME.textSecondary} />
<Text color={THEME.textSecondary}>暂无分支机构信息</Text>
</VStack>
</Center>
);
}
return (
<SimpleGrid columns={{ base: 1, md: 2 }} spacing={4}>
{branches.map((branch: any, idx: number) => (
<Card key={idx} bg={THEME.tableBg} border="1px solid" borderColor={THEME.border}>
<CardBody>
<VStack align="start" spacing={3}>
<HStack justify="space-between" w="full">
<Text fontWeight="bold" color={THEME.textPrimary}>{branch.branch_name}</Text>
<Badge
colorScheme={branch.business_status === "存续" ? "green" : "red"}
>
{branch.business_status}
</Badge>
</HStack>
<SimpleGrid columns={2} spacing={2} w="full">
<VStack align="start" spacing={1}>
<Text fontSize="xs" color={THEME.textSecondary}>注册资本</Text>
<Text fontSize="sm" fontWeight="medium" color={THEME.textPrimary}>
{branch.register_capital || "-"}
</Text>
</VStack>
<VStack align="start" spacing={1}>
<Text fontSize="xs" color={THEME.textSecondary}>法人代表</Text>
<Text fontSize="sm" fontWeight="medium" color={THEME.textPrimary}>
{branch.legal_person || "-"}
</Text>
</VStack>
<VStack align="start" spacing={1}>
<Text fontSize="xs" color={THEME.textSecondary}>成立日期</Text>
<Text fontSize="sm" fontWeight="medium" color={THEME.textPrimary}>
{formatDate(branch.register_date)}
</Text>
</VStack>
<VStack align="start" spacing={1}>
<Text fontSize="xs" color={THEME.textSecondary}>关联企业</Text>
<Text fontSize="sm" fontWeight="medium" color={THEME.textPrimary}>
{branch.related_company_count || 0} 家
</Text>
</VStack>
</SimpleGrid>
</VStack>
</CardBody>
</Card>
))}
</SimpleGrid>
);
};
export default BranchesPanel;

109
src/views/Company/components/CompanyOverview/BasicInfoTab/components/BusinessInfoPanel.tsx Normal file
View File

@@ -0,0 +1,109 @@
// src/views/Company/components/CompanyOverview/BasicInfoTab/components/BusinessInfoPanel.tsx
// 工商信息 Tab Panel
import React from "react";
import {
Box,
VStack,
HStack,
Text,
Heading,
SimpleGrid,
Divider,
Center,
Code,
} from "@chakra-ui/react";
import { THEME } from "../config";
interface BusinessInfoPanelProps {
basicInfo: any;
}
const BusinessInfoPanel: React.FC<BusinessInfoPanelProps> = ({ basicInfo }) => {
if (!basicInfo) {
return (
<Center h="200px">
<Text color={THEME.textSecondary}>暂无工商信息</Text>
</Center>
);
}
return (
<VStack spacing={4} align="stretch">
<SimpleGrid columns={{ base: 1, md: 2 }} spacing={6}>
<Box>
<Heading size="sm" mb={3} color={THEME.textPrimary}>工商信息</Heading>
<VStack align="start" spacing={2}>
<HStack w="full">
<Text fontSize="sm" color={THEME.textSecondary} minW="80px">
统一信用代码
</Text>
<Code fontSize="xs" bg={THEME.tableHoverBg} color={THEME.goldLight}>
{basicInfo.credit_code}
</Code>
</HStack>
<HStack w="full">
<Text fontSize="sm" color={THEME.textSecondary} minW="80px">
公司规模
</Text>
<Text fontSize="sm" color={THEME.textPrimary}>{basicInfo.company_size}</Text>
</HStack>
<HStack w="full" align="start">
<Text fontSize="sm" color={THEME.textSecondary} minW="80px">
注册地址
</Text>
<Text fontSize="sm" noOfLines={2} color={THEME.textPrimary}>
{basicInfo.reg_address}
</Text>
</HStack>
<HStack w="full" align="start">
<Text fontSize="sm" color={THEME.textSecondary} minW="80px">
办公地址
</Text>
<Text fontSize="sm" noOfLines={2} color={THEME.textPrimary}>
{basicInfo.office_address}
</Text>
</HStack>
</VStack>
</Box>
<Box>
<Heading size="sm" mb={3} color={THEME.textPrimary}>服务机构</Heading>
<VStack align="start" spacing={2}>
<Box>
<Text fontSize="sm" color={THEME.textSecondary}>会计师事务所</Text>
<Text fontSize="sm" fontWeight="medium" color={THEME.textPrimary}>
{basicInfo.accounting_firm}
</Text>
</Box>
<Box>
<Text fontSize="sm" color={THEME.textSecondary}>律师事务所</Text>
<Text fontSize="sm" fontWeight="medium" color={THEME.textPrimary}>
{basicInfo.law_firm}
</Text>
</Box>
</VStack>
</Box>
</SimpleGrid>
<Divider borderColor={THEME.border} />
<Box>
<Heading size="sm" mb={3} color={THEME.textPrimary}>主营业务</Heading>
<Text fontSize="sm" lineHeight="tall" color={THEME.textSecondary}>
{basicInfo.main_business}
</Text>
</Box>
<Box>
<Heading size="sm" mb={3} color={THEME.textPrimary}>经营范围</Heading>
<Text fontSize="sm" lineHeight="tall" color={THEME.textSecondary}>
{basicInfo.business_scope}
</Text>
</Box>
</VStack>
);
};
export default BusinessInfoPanel;

32
src/views/Company/components/CompanyOverview/BasicInfoTab/components/LoadingState.tsx Normal file
View File

@@ -0,0 +1,32 @@
// src/views/Company/components/CompanyOverview/BasicInfoTab/components/LoadingState.tsx
// 复用的加载状态组件
import React from "react";
import { Center, VStack, Spinner, Text } from "@chakra-ui/react";
import { THEME } from "../config";
interface LoadingStateProps {
message?: string;
height?: string;
}
/**
* 加载状态组件（黑金主题）
*/
const LoadingState: React.FC<LoadingStateProps> = ({
message = "加载中...",
height = "200px",
}) => {
return (
<Center h={height}>
<VStack>
<Spinner size="lg" color={THEME.gold} thickness="3px" />
<Text fontSize="sm" color={THEME.textSecondary}>
{message}
</Text>
</VStack>
</Center>
);
};
export default LoadingState;

179
src/views/Company/components/CompanyOverview/BasicInfoTab/components/ManagementPanel.tsx Normal file
View File

@@ -0,0 +1,179 @@
// src/views/Company/components/CompanyOverview/BasicInfoTab/components/ManagementPanel.tsx
// 管理团队 Tab Panel
import React from "react";
import {
Box,
VStack,
HStack,
Text,
Heading,
Badge,
Icon,
Card,
CardBody,
SimpleGrid,
Avatar,
Tag,
} from "@chakra-ui/react";
import {
FaUserTie,
FaCrown,
FaEye,
FaUsers,
FaVenusMars,
FaGraduationCap,
FaPassport,
} from "react-icons/fa";
import { useManagementData } from "../../hooks/useManagementData";
import { THEME } from "../config";
import { formatDate } from "../utils";
import LoadingState from "./LoadingState";
interface ManagementPanelProps {
stockCode: string;
}
const ManagementPanel: React.FC<ManagementPanelProps> = ({ stockCode }) => {
const { management, loading } = useManagementData(stockCode);
// 管理层职位分类
const getManagementByCategory = () => {
const categories: Record<string, any[]> = {
高管: [],
董事: [],
监事: [],
其他: [],
};
management.forEach((person: any) => {
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 getCategoryIcon = (category: string) => {
switch (category) {
case "高管":
return FaUserTie;
case "董事":
return FaCrown;
case "监事":
return FaEye;
default:
return FaUsers;
}
};
const getCategoryColor = (category: string) => {
switch (category) {
case "高管":
return THEME.gold;
case "董事":
return THEME.goldLight;
case "监事":
return "green.400";
default:
return THEME.textSecondary;
}
};
if (loading) {
return <LoadingState message="加载管理团队数据..." />;
}
return (
<VStack spacing={6} align="stretch">
{Object.entries(getManagementByCategory()).map(
([category, people]) =>
people.length > 0 && (
<Box key={category}>
<HStack mb={4}>
<Icon
as={getCategoryIcon(category)}
color={getCategoryColor(category)}
boxSize={5}
/>
<Heading size="sm" color={THEME.textPrimary}>{category}</Heading>
<Badge bg={THEME.gold} color="gray.900">{people.length}人</Badge>
</HStack>
<SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} spacing={4}>
{people.map((person: any, idx: number) => (
<Card key={idx} bg={THEME.tableBg} border="1px solid" borderColor={THEME.border} size="sm">
<CardBody>
<HStack spacing={3} align="start">
<Avatar
name={person.name}
size="md"
bg={getCategoryColor(category)}
/>
<VStack align="start" spacing={1} flex={1}>
<HStack>
<Text fontWeight="bold" color={THEME.textPrimary}>{person.name}</Text>
{person.gender && (
<Icon
as={FaVenusMars}
color={person.gender === "男" ? "blue.400" : "pink.400"}
boxSize={3}
/>
)}
</HStack>
<Text fontSize="sm" color={THEME.goldLight}>
{person.position_name}
</Text>
<HStack spacing={2} flexWrap="wrap">
{person.education && (
<Tag size="sm" bg={THEME.tableHoverBg} color={THEME.textSecondary}>
<Icon as={FaGraduationCap} mr={1} boxSize={3} />
{person.education}
</Tag>
)}
{person.birth_year && (
<Tag size="sm" bg={THEME.tableHoverBg} color={THEME.textSecondary}>
{new Date().getFullYear() - parseInt(person.birth_year)}岁
</Tag>
)}
{person.nationality && person.nationality !== "中国" && (
<Tag size="sm" bg="orange.600" color="white">
<Icon as={FaPassport} mr={1} boxSize={3} />
{person.nationality}
</Tag>
)}
</HStack>
<Text fontSize="xs" color={THEME.textSecondary}>
任职日期：{formatDate(person.start_date)}
</Text>
</VStack>
</HStack>
</CardBody>
</Card>
))}
</SimpleGrid>
</Box>
)
)}
</VStack>
);
};
export default ManagementPanel;

313
src/views/Company/components/CompanyOverview/BasicInfoTab/components/ShareholderPanel.tsx Normal file
View File

@@ -0,0 +1,313 @@
// src/views/Company/components/CompanyOverview/BasicInfoTab/components/ShareholderPanel.tsx
// 股权结构 Tab Panel
import React from "react";
import {
Box,
VStack,
HStack,
Text,
Heading,
Badge,
Icon,
Card,
CardBody,
CardHeader,
SimpleGrid,
Table,
Thead,
Tbody,
Tr,
Th,
Td,
TableContainer,
Tooltip,
Stat,
StatLabel,
StatNumber,
StatHelpText,
} from "@chakra-ui/react";
import {
FaCrown,
FaChartPie,
FaUsers,
FaChartLine,
FaArrowUp,
FaArrowDown,
FaChartBar,
FaBuilding,
FaGlobe,
FaShieldAlt,
FaBriefcase,
FaCircle,
FaUserTie,
} from "react-icons/fa";
import { useShareholderData } from "../../hooks/useShareholderData";
import { THEME } from "../config";
import { formatPercentage, formatShares, formatDate } from "../utils";
import LoadingState from "./LoadingState";
interface ShareholderPanelProps {
stockCode: string;
}
// 股东类型标签组件
const ShareholderTypeBadge: React.FC<{ type: string }> = ({ type }) => {
const typeConfig: Record<string, { color: string; icon: React.ElementType }> = {
基金: { color: "blue", icon: FaChartBar },
个人: { color: "green", icon: FaUserTie },
法人: { color: "purple", icon: FaBuilding },
QFII: { color: "orange", icon: FaGlobe },
社保: { color: "red", icon: FaShieldAlt },
保险: { color: "teal", icon: FaShieldAlt },
信托: { color: "cyan", icon: FaBriefcase },
券商: { color: "pink", icon: FaChartLine },
};
const config = Object.entries(typeConfig).find(([key]) =>
type?.includes(key)
)?.[1] || { color: "gray", icon: FaCircle };
return (
<Badge colorScheme={config.color} size="sm">
<Icon as={config.icon} mr={1} boxSize={3} />
{type}
</Badge>
);
};
const ShareholderPanel: React.FC<ShareholderPanelProps> = ({ stockCode }) => {
const {
actualControl,
concentration,
topShareholders,
topCirculationShareholders,
loading,
} = useShareholderData(stockCode);
// 计算股权集中度变化
const getConcentrationTrend = () => {
const grouped: Record<string, Record<string, any>> = {};
concentration.forEach((item: any) => {
if (!grouped[item.end_date]) {
grouped[item.end_date] = {};
}
grouped[item.end_date][item.stat_item] = item;
});
return Object.entries(grouped)
.sort((a, b) => b[0].localeCompare(a[0]))
.slice(0, 5);
};
if (loading) {
return <LoadingState message="加载股权结构数据..." />;
}
return (
<VStack spacing={6} align="stretch">
{/* 实际控制人 */}
{actualControl.length > 0 && (
<Box>
<HStack mb={4}>
<Icon as={FaCrown} color={THEME.gold} boxSize={5} />
<Heading size="sm" color={THEME.textPrimary}>实际控制人</Heading>
</HStack>
<Card bg={THEME.tableBg} border="1px solid" borderColor={THEME.border}>
<CardBody>
<HStack justify="space-between">
<VStack align="start">
<Text fontWeight="bold" fontSize="lg" color={THEME.textPrimary}>
{actualControl[0].actual_controller_name}
</Text>
<HStack>
<Badge bg={THEME.gold} color="gray.900">
{actualControl[0].control_type}
</Badge>
<Text fontSize="sm" color={THEME.textSecondary}>
截至 {formatDate(actualControl[0].end_date)}
</Text>
</HStack>
</VStack>
<Stat textAlign="right">
<StatLabel color={THEME.textSecondary}>控制比例</StatLabel>
<StatNumber color={THEME.goldLight}>
{formatPercentage(actualControl[0].holding_ratio)}
</StatNumber>
<StatHelpText color={THEME.textSecondary}>
{formatShares(actualControl[0].holding_shares)}
</StatHelpText>
</Stat>
</HStack>
</CardBody>
</Card>
</Box>
)}
{/* 股权集中度 */}
{concentration.length > 0 && (
<Box>
<HStack mb={4}>
<Icon as={FaChartPie} color={THEME.gold} boxSize={5} />
<Heading size="sm" color={THEME.textPrimary}>股权集中度</Heading>
</HStack>
<SimpleGrid columns={{ base: 1, md: 2 }} spacing={4}>
{getConcentrationTrend()
.slice(0, 1)
.map(([date, items]) => (
<Card key={date} bg={THEME.tableBg} border="1px solid" borderColor={THEME.border}>
<CardHeader pb={2}>
<Text fontSize="sm" color={THEME.textSecondary}>
{formatDate(date)}
</Text>
</CardHeader>
<CardBody pt={2}>
<VStack spacing={3} align="stretch">
{Object.entries(items).map(([key, item]: [string, any]) => (
<HStack key={key} justify="space-between">
<Text fontSize="sm" color={THEME.textPrimary}>{item.stat_item}</Text>
<HStack>
<Text fontWeight="bold" color={THEME.goldLight}>
{formatPercentage(item.holding_ratio)}
</Text>
{item.ratio_change && (
<Badge colorScheme={item.ratio_change > 0 ? "red" : "green"}>
<Icon
as={item.ratio_change > 0 ? FaArrowUp : FaArrowDown}
mr={1}
boxSize={3}
/>
{Math.abs(item.ratio_change).toFixed(2)}%
</Badge>
)}
</HStack>
</HStack>
))}
</VStack>
</CardBody>
</Card>
))}
</SimpleGrid>
</Box>
)}
{/* 十大股东 */}
{topShareholders.length > 0 && (
<Box>
<HStack mb={4}>
<Icon as={FaUsers} color={THEME.gold} boxSize={5} />
<Heading size="sm" color={THEME.textPrimary}>十大股东</Heading>
<Badge bg={THEME.gold} color="gray.900">
{formatDate(topShareholders[0].end_date)}
</Badge>
</HStack>
<TableContainer>
<Table size="sm" variant="unstyled">
<Thead>
<Tr borderBottom="1px solid" borderColor={THEME.border}>
<Th color={THEME.textSecondary}>排名</Th>
<Th color={THEME.textSecondary}>股东名称</Th>
<Th color={THEME.textSecondary}>股东类型</Th>
<Th isNumeric color={THEME.textSecondary}>持股数量</Th>
<Th isNumeric color={THEME.textSecondary}>持股比例</Th>
<Th color={THEME.textSecondary}>股份性质</Th>
</Tr>
</Thead>
<Tbody>
{topShareholders.slice(0, 10).map((shareholder: any, idx: number) => (
<Tr key={idx} borderBottom="1px solid" borderColor={THEME.border} _hover={{ bg: THEME.tableHoverBg }}>
<Td>
<Badge bg={idx < 3 ? THEME.gold : "gray.600"} color={idx < 3 ? "gray.900" : THEME.textPrimary}>
{shareholder.shareholder_rank}
</Badge>
</Td>
<Td>
<Tooltip label={shareholder.shareholder_name}>
<Text noOfLines={1} maxW="200px" color={THEME.textPrimary}>
{shareholder.shareholder_name}
</Text>
</Tooltip>
</Td>
<Td>
<ShareholderTypeBadge type={shareholder.shareholder_type} />
</Td>
<Td isNumeric fontWeight="medium" color={THEME.textPrimary}>
{formatShares(shareholder.holding_shares)}
</Td>
<Td isNumeric>
<Text color={THEME.goldLight} fontWeight="bold">
{formatPercentage(shareholder.total_share_ratio)}
</Text>
</Td>
<Td>
<Badge size="sm" bg="transparent" border="1px solid" borderColor={THEME.border} color={THEME.textSecondary}>
{shareholder.share_nature || "流通股"}
</Badge>
</Td>
</Tr>
))}
</Tbody>
</Table>
</TableContainer>
</Box>
)}
{/* 十大流通股东 */}
{topCirculationShareholders.length > 0 && (
<Box>
<HStack mb={4}>
<Icon as={FaChartLine} color={THEME.gold} boxSize={5} />
<Heading size="sm" color={THEME.textPrimary}>十大流通股东</Heading>
<Badge bg={THEME.gold} color="gray.900">
{formatDate(topCirculationShareholders[0].end_date)}
</Badge>
</HStack>
<TableContainer>
<Table size="sm" variant="unstyled">
<Thead>
<Tr borderBottom="1px solid" borderColor={THEME.border}>
<Th color={THEME.textSecondary}>排名</Th>
<Th color={THEME.textSecondary}>股东名称</Th>
<Th color={THEME.textSecondary}>股东类型</Th>
<Th isNumeric color={THEME.textSecondary}>持股数量</Th>
<Th isNumeric color={THEME.textSecondary}>流通股比例</Th>
</Tr>
</Thead>
<Tbody>
{topCirculationShareholders.slice(0, 10).map((shareholder: any, idx: number) => (
<Tr key={idx} borderBottom="1px solid" borderColor={THEME.border} _hover={{ bg: THEME.tableHoverBg }}>
<Td>
<Badge bg={idx < 3 ? THEME.gold : "gray.600"} color={idx < 3 ? "gray.900" : THEME.textPrimary}>
{shareholder.shareholder_rank}
</Badge>
</Td>
<Td>
<Tooltip label={shareholder.shareholder_name}>
<Text noOfLines={1} maxW="250px" color={THEME.textPrimary}>
{shareholder.shareholder_name}
</Text>
</Tooltip>
</Td>
<Td>
<ShareholderTypeBadge type={shareholder.shareholder_type} />
</Td>
<Td isNumeric fontWeight="medium" color={THEME.textPrimary}>
{formatShares(shareholder.holding_shares)}
</Td>
<Td isNumeric>
<Text color={THEME.goldLight} fontWeight="bold">
{formatPercentage(shareholder.circulation_share_ratio)}
</Text>
</Td>
</Tr>
))}
</Tbody>
</Table>
</TableContainer>
</Box>
)}
</VStack>
);
};
export default ShareholderPanel;

9
src/views/Company/components/CompanyOverview/BasicInfoTab/components/index.ts Normal file
View File

@@ -0,0 +1,9 @@
// src/views/Company/components/CompanyOverview/BasicInfoTab/components/index.ts
// 组件导出
export { default as LoadingState } from "./LoadingState";
export { default as ShareholderPanel } from "./ShareholderPanel";
export { default as ManagementPanel } from "./ManagementPanel";
export { default as AnnouncementsPanel } from "./AnnouncementsPanel";
export { default as BranchesPanel } from "./BranchesPanel";
export { default as BusinessInfoPanel } from "./BusinessInfoPanel";

103
src/views/Company/components/CompanyOverview/BasicInfoTab/config.ts Normal file
View File

@@ -0,0 +1,103 @@
// src/views/Company/components/CompanyOverview/BasicInfoTab/config.ts
// Tab 配置 + 黑金主题配置
import { IconType } from "react-icons";
import {
FaShareAlt,
FaUserTie,
FaBullhorn,
FaSitemap,
FaInfoCircle,
} from "react-icons/fa";
// 主题类型定义
export interface Theme {
bg: string;
cardBg: string;
tableBg: string;
tableHoverBg: string;
gold: string;
goldLight: string;
textPrimary: string;
textSecondary: string;
border: string;
tabSelected: {
bg: string;
color: string;
};
tabUnselected: {
color: string;
};
}
// 黑金主题配置
export const THEME: Theme = {
bg: "gray.900",
cardBg: "gray.800",
tableBg: "gray.700",
tableHoverBg: "gray.600",
gold: "#D4AF37",
goldLight: "#F0D78C",
textPrimary: "white",
textSecondary: "gray.400",
border: "rgba(212, 175, 55, 0.3)",
tabSelected: {
bg: "#D4AF37",
color: "gray.900",
},
tabUnselected: {
color: "#D4AF37",
},
};
// Tab 配置类型
export interface TabConfig {
key: string;
name: string;
icon: IconType;
enabled: boolean;
}
// Tab 配置
export const TAB_CONFIG: TabConfig[] = [
{
key: "shareholder",
name: "股权结构",
icon: FaShareAlt,
enabled: true,
},
{
key: "management",
name: "管理团队",
icon: FaUserTie,
enabled: true,
},
{
key: "announcements",
name: "公司公告",
icon: FaBullhorn,
enabled: true,
},
{
key: "branches",
name: "分支机构",
icon: FaSitemap,
enabled: true,
},
{
key: "business",
name: "工商信息",
icon: FaInfoCircle,
enabled: true,
},
];
// 获取启用的 Tab 列表
export const getEnabledTabs = (enabledKeys?: string[]): TabConfig[] => {
if (!enabledKeys || enabledKeys.length === 0) {
return TAB_CONFIG.filter((tab) => tab.enabled);
}
return TAB_CONFIG.filter(
(tab) => tab.enabled && enabledKeys.includes(tab.key)
);
};

145
src/views/Company/components/CompanyOverview/BasicInfoTab/index.tsx Normal file
View File

@@ -0,0 +1,145 @@
// src/views/Company/components/CompanyOverview/BasicInfoTab/index.tsx
// 基本信息 Tab 组件 - 可配置版本（黑金主题）
import React from "react";
import {
Card,
CardBody,
Tabs,
TabList,
TabPanels,
Tab,
TabPanel,
Icon,
HStack,
Text,
} from "@chakra-ui/react";
import { THEME, TAB_CONFIG, getEnabledTabs, type TabConfig } from "./config";
import {
ShareholderPanel,
ManagementPanel,
AnnouncementsPanel,
BranchesPanel,
BusinessInfoPanel,
} from "./components";
// Props 类型定义
export interface BasicInfoTabProps {
stockCode: string;
basicInfo?: any;
// 可配置项
enabledTabs?: string[]; // 指定显示哪些 Tab（通过 key）
defaultTabIndex?: number; // 默认选中 Tab
onTabChange?: (index: number, tabKey: string) => void;
}
// Tab 组件映射
const TAB_COMPONENTS: Record<string, React.FC<any>> = {
shareholder: ShareholderPanel,
management: ManagementPanel,
announcements: AnnouncementsPanel,
branches: BranchesPanel,
business: BusinessInfoPanel,
};
/**
* 基本信息 Tab 组件
*
* 特性：
* - 可配置显示哪些 Tab（enabledTabs）
* - 黑金主题
* - 懒加载（isLazy）
* - 支持 Tab 变更回调
*/
const BasicInfoTab: React.FC<BasicInfoTabProps> = ({
stockCode,
basicInfo,
enabledTabs,
defaultTabIndex = 0,
onTabChange,
}) => {
// 获取启用的 Tab 配置
const tabs = getEnabledTabs(enabledTabs);
// 处理 Tab 变更
const handleTabChange = (index: number) => {
if (onTabChange && tabs[index]) {
onTabChange(index, tabs[index].key);
}
};
// 渲染单个 Tab 内容
const renderTabContent = (tab: TabConfig) => {
const Component = TAB_COMPONENTS[tab.key];
if (!Component) return null;
// business Tab 需要 basicInfo，其他需要 stockCode
if (tab.key === "business") {
return <Component basicInfo={basicInfo} />;
}
return <Component stockCode={stockCode} />;
};
return (
<Card bg={THEME.cardBg} shadow="md" border="1px solid" borderColor={THEME.border}>
<CardBody p={0}>
<Tabs
isLazy
variant="unstyled"
defaultIndex={defaultTabIndex}
onChange={handleTabChange}
>
<TabList
bg={THEME.bg}
borderBottom="1px solid"
borderColor={THEME.border}
px={4}
py={2}
flexWrap="wrap"
gap={2}
>
{tabs.map((tab) => (
<Tab
key={tab.key}
color={THEME.tabUnselected.color}
borderRadius="full"
px={4}
py={2}
fontSize="sm"
_selected={{
bg: THEME.tabSelected.bg,
color: THEME.tabSelected.color,
fontWeight: "bold",
}}
_hover={{
bg: THEME.tableHoverBg,
}}
>
<HStack spacing={2}>
<Icon as={tab.icon} boxSize={4} />
<Text>{tab.name}</Text>
</HStack>
</Tab>
))}
</TabList>
<TabPanels p={4}>
{tabs.map((tab) => (
<TabPanel key={tab.key} p={0}>
{renderTabContent(tab)}
</TabPanel>
))}
</TabPanels>
</Tabs>
</CardBody>
</Card>
);
};
export default BasicInfoTab;
// 导出配置和工具，供外部使用
export { THEME, TAB_CONFIG, getEnabledTabs } from "./config";
export * from "./utils";

52
src/views/Company/components/CompanyOverview/BasicInfoTab/utils.ts Normal file
View File

@@ -0,0 +1,52 @@
// src/views/Company/components/CompanyOverview/BasicInfoTab/utils.ts
// 格式化工具函数
/**
* 格式化百分比
*/
export const formatPercentage = (value: number | null | undefined): string => {
if (value === null || value === undefined) return "-";
return `${(value * 100).toFixed(2)}%`;
};
/**
* 格式化数字（自动转换亿/万）
*/
export const formatNumber = (value: number | null | undefined): string => {
if (value === null || value === undefined) return "-";
if (value >= 100000000) {
return `${(value / 100000000).toFixed(2)}亿`;
} else if (value >= 10000) {
return `${(value / 10000).toFixed(2)}万`;
}
return value.toLocaleString();
};
/**
* 格式化股数（自动转换亿股/万股）
*/
export const formatShares = (value: number | null | undefined): string => {
if (value === null || value === undefined) return "-";
if (value >= 100000000) {
return `${(value / 100000000).toFixed(2)}亿股`;
} else if (value >= 10000) {
return `${(value / 10000).toFixed(2)}万股`;
}
return `${value.toLocaleString()}股`;
};
/**
* 格式化日期（去掉时间部分）
*/
export const formatDate = (dateStr: string | null | undefined): string => {
if (!dateStr) return "-";
return dateStr.split("T")[0];
};
// 导出工具对象（兼容旧代码）
export const formatUtils = {
formatPercentage,
formatNumber,
formatShares,
formatDate,
};

1
src/views/Company/components/CompanyOverview/index.tsx
View File

@@ -56,7 +56,6 @@ const CompanyOverview: React.FC<CompanyOverviewProps> = ({ stockCode }) => {
<BasicInfoTab
stockCode={stockCode}
basicInfo={basicInfo}
cardBg="white"
/>
</VStack>
);

21
src/views/Company/components/CompanyOverview/types.ts
View File

@@ -28,9 +28,13 @@ export interface BasicInfo {
* 实际控制人
*/
export interface ActualControl {
actual_controller_name?: string;
controller_name?: string;
control_type?: string;
controller_type?: string;
holding_ratio?: number;
holding_shares?: number;
end_date?: string;
}
/**
@@ -40,6 +44,10 @@ export interface Concentration {
top1_ratio?: number;
top5_ratio?: number;
top10_ratio?: number;
stat_item?: string;
holding_ratio?: number;
ratio_change?: number;
end_date?: string;
}
/**
@@ -48,8 +56,14 @@ export interface Concentration {
export interface Management {
name?: string;
position?: string;
position_name?: string;
position_category?: string;
start_date?: string;
end_date?: string;
gender?: string;
education?: string;
birth_year?: string;
nationality?: string;
}
/**
@@ -57,8 +71,15 @@ export interface Management {
*/
export interface Shareholder {
shareholder_name?: string;
shareholder_type?: string;
shareholder_rank?: number;
holding_ratio?: number;
holding_amount?: number;
holding_shares?: number;
total_share_ratio?: number;
circulation_share_ratio?: number;
share_nature?: string;
end_date?: string;
}
/**