refactor: CompanyOverview 组件按 Tab 拆分为独立子组件
将 2682 行的大型组件拆分为 4 个模块化文件： - index.js (~550行): 状态管理 + 数据加载 + Tab 容器 - DeepAnalysisTab.js (~1800行): 深度分析 Tab（核心定位、竞争力、产业链） - BasicInfoTab.js (~940行): 基本信息 Tab（股权结构、管理团队、公告） - NewsEventsTab.js (~540行): 新闻动态 Tab（事件列表 + 分页） 重构内容： - 提取 8 个内部子组件到对应 Tab 文件 - 修复 useColorModeValue 在 map 回调中调用的 hooks 规则违规 - 清理未使用的 imports - 完善公告详情模态框（补全 ModalFooter） 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
941
src/views/Company/components/CompanyOverview/BasicInfoTab.js
Normal file
941
src/views/Company/components/CompanyOverview/BasicInfoTab.js
Normal file
@@ -0,0 +1,941 @@
|
||||
// src/views/Company/components/CompanyOverview/BasicInfoTab.js
|
||||
// 基本信息 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,
|
||||
} from "@chakra-ui/react";
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* 基本信息 Tab 组件
|
||||
*
|
||||
* Props:
|
||||
* - basicInfo: 公司基本信息
|
||||
* - actualControl: 实际控制人数组
|
||||
* - concentration: 股权集中度数组
|
||||
* - topShareholders: 前十大股东数组
|
||||
* - topCirculationShareholders: 前十大流通股东数组
|
||||
* - management: 管理层数组
|
||||
* - announcements: 公告列表数组
|
||||
* - branches: 分支机构数组
|
||||
* - disclosureSchedule: 披露日程数组
|
||||
* - cardBg: 卡片背景色
|
||||
* - onAnnouncementClick: 公告点击回调 (announcement) => void
|
||||
*/
|
||||
const BasicInfoTab = ({
|
||||
basicInfo,
|
||||
actualControl = [],
|
||||
concentration = [],
|
||||
topShareholders = [],
|
||||
topCirculationShareholders = [],
|
||||
management = [],
|
||||
announcements = [],
|
||||
branches = [],
|
||||
disclosureSchedule = [],
|
||||
cardBg,
|
||||
}) => {
|
||||
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 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);
|
||||
};
|
||||
|
||||
// 处理公告点击
|
||||
const handleAnnouncementClick = (announcement) => {
|
||||
setSelectedAnnouncement(announcement);
|
||||
onOpen();
|
||||
};
|
||||
|
||||
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>
|
||||
<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>
|
||||
</TabPanel>
|
||||
|
||||
{/* 管理团队标签页 */}
|
||||
<TabPanel>
|
||||
<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>
|
||||
</TabPanel>
|
||||
|
||||
{/* 公司公告标签页 */}
|
||||
<TabPanel>
|
||||
<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>
|
||||
</TabPanel>
|
||||
|
||||
{/* 分支机构标签页 */}
|
||||
<TabPanel>
|
||||
{branches.length > 0 ? (
|
||||
<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>
|
||||
) : (
|
||||
<Center h="200px">
|
||||
<VStack>
|
||||
<Icon as={FaSitemap} boxSize={12} color="gray.300" />
|
||||
<Text color="gray.500">暂无分支机构信息</Text>
|
||||
</VStack>
|
||||
</Center>
|
||||
)}
|
||||
</TabPanel>
|
||||
|
||||
{/* 工商信息标签页 */}
|
||||
<TabPanel>
|
||||
{basicInfo && (
|
||||
<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>
|
||||
)}
|
||||
</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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default BasicInfoTab;
|
||||
Reference in New Issue
Block a user