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;
|
||||
1799
src/views/Company/components/CompanyOverview/DeepAnalysisTab.js
Normal file
1799
src/views/Company/components/CompanyOverview/DeepAnalysisTab.js
Normal file
File diff suppressed because it is too large
Load Diff
541
src/views/Company/components/CompanyOverview/NewsEventsTab.js
Normal file
541
src/views/Company/components/CompanyOverview/NewsEventsTab.js
Normal file
@@ -0,0 +1,541 @@
|
||||
// src/views/Company/components/CompanyOverview/NewsEventsTab.js
|
||||
// 新闻动态 Tab - 相关新闻事件列表 + 分页
|
||||
|
||||
import React from "react";
|
||||
import {
|
||||
Box,
|
||||
VStack,
|
||||
HStack,
|
||||
Text,
|
||||
Badge,
|
||||
Icon,
|
||||
Card,
|
||||
CardBody,
|
||||
Button,
|
||||
Input,
|
||||
InputGroup,
|
||||
InputLeftElement,
|
||||
Tag,
|
||||
Center,
|
||||
Spinner,
|
||||
useColorModeValue,
|
||||
} from "@chakra-ui/react";
|
||||
import { SearchIcon } from "@chakra-ui/icons";
|
||||
import {
|
||||
FaNewspaper,
|
||||
FaBullhorn,
|
||||
FaGavel,
|
||||
FaFlask,
|
||||
FaDollarSign,
|
||||
FaShieldAlt,
|
||||
FaFileAlt,
|
||||
FaIndustry,
|
||||
FaEye,
|
||||
FaFire,
|
||||
FaChartLine,
|
||||
FaChevronLeft,
|
||||
FaChevronRight,
|
||||
} from "react-icons/fa";
|
||||
|
||||
/**
|
||||
* 新闻动态 Tab 组件
|
||||
*
|
||||
* Props:
|
||||
* - newsEvents: 新闻事件列表数组
|
||||
* - newsLoading: 加载状态
|
||||
* - newsPagination: 分页信息 { page, per_page, total, pages, has_next, has_prev }
|
||||
* - searchQuery: 搜索关键词
|
||||
* - onSearchChange: 搜索输入回调 (value) => void
|
||||
* - onSearch: 搜索提交回调 () => void
|
||||
* - onPageChange: 分页回调 (page) => void
|
||||
* - cardBg: 卡片背景色
|
||||
*/
|
||||
const NewsEventsTab = ({
|
||||
newsEvents = [],
|
||||
newsLoading = false,
|
||||
newsPagination = {
|
||||
page: 1,
|
||||
per_page: 10,
|
||||
total: 0,
|
||||
pages: 0,
|
||||
has_next: false,
|
||||
has_prev: false,
|
||||
},
|
||||
searchQuery = "",
|
||||
onSearchChange,
|
||||
onSearch,
|
||||
onPageChange,
|
||||
cardBg,
|
||||
}) => {
|
||||
// 颜色模式值需要在组件顶层调用
|
||||
const hoverBg = useColorModeValue("gray.50", "gray.700");
|
||||
|
||||
// 事件类型图标映射
|
||||
const getEventTypeIcon = (eventType) => {
|
||||
const iconMap = {
|
||||
企业公告: FaBullhorn,
|
||||
政策: FaGavel,
|
||||
技术突破: FaFlask,
|
||||
企业融资: FaDollarSign,
|
||||
政策监管: FaShieldAlt,
|
||||
政策动态: FaFileAlt,
|
||||
行业事件: FaIndustry,
|
||||
};
|
||||
return iconMap[eventType] || FaNewspaper;
|
||||
};
|
||||
|
||||
// 重要性颜色映射
|
||||
const getImportanceColor = (importance) => {
|
||||
const colorMap = {
|
||||
S: "red",
|
||||
A: "orange",
|
||||
B: "yellow",
|
||||
C: "green",
|
||||
};
|
||||
return colorMap[importance] || "gray";
|
||||
};
|
||||
|
||||
// 处理搜索输入
|
||||
const handleInputChange = (e) => {
|
||||
onSearchChange?.(e.target.value);
|
||||
};
|
||||
|
||||
// 处理搜索提交
|
||||
const handleSearchSubmit = () => {
|
||||
onSearch?.();
|
||||
};
|
||||
|
||||
// 处理键盘事件
|
||||
const handleKeyPress = (e) => {
|
||||
if (e.key === "Enter") {
|
||||
handleSearchSubmit();
|
||||
}
|
||||
};
|
||||
|
||||
// 处理分页
|
||||
const handlePageChange = (page) => {
|
||||
onPageChange?.(page);
|
||||
// 滚动到列表顶部
|
||||
document
|
||||
.getElementById("news-list-top")
|
||||
?.scrollIntoView({ behavior: "smooth" });
|
||||
};
|
||||
|
||||
// 渲染分页按钮
|
||||
const renderPaginationButtons = () => {
|
||||
const { page: currentPage, pages: totalPages } = newsPagination;
|
||||
const pageButtons = [];
|
||||
|
||||
// 显示当前页及前后各2页
|
||||
let startPage = Math.max(1, currentPage - 2);
|
||||
let endPage = Math.min(totalPages, currentPage + 2);
|
||||
|
||||
// 如果开始页大于1，显示省略号
|
||||
if (startPage > 1) {
|
||||
pageButtons.push(
|
||||
<Text key="start-ellipsis" fontSize="sm" color="gray.400">
|
||||
...
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
|
||||
for (let i = startPage; i <= endPage; i++) {
|
||||
pageButtons.push(
|
||||
<Button
|
||||
key={i}
|
||||
size="sm"
|
||||
variant={i === currentPage ? "solid" : "outline"}
|
||||
colorScheme={i === currentPage ? "blue" : "gray"}
|
||||
onClick={() => handlePageChange(i)}
|
||||
isDisabled={newsLoading}
|
||||
>
|
||||
{i}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
// 如果结束页小于总页数，显示省略号
|
||||
if (endPage < totalPages) {
|
||||
pageButtons.push(
|
||||
<Text key="end-ellipsis" fontSize="sm" color="gray.400">
|
||||
...
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
|
||||
return pageButtons;
|
||||
};
|
||||
|
||||
return (
|
||||
<VStack spacing={4} align="stretch">
|
||||
<Card bg={cardBg} shadow="md">
|
||||
<CardBody>
|
||||
<VStack spacing={4} align="stretch">
|
||||
{/* 搜索框和统计信息 */}
|
||||
<HStack justify="space-between" flexWrap="wrap">
|
||||
<HStack flex={1} minW="300px">
|
||||
<InputGroup>
|
||||
<InputLeftElement pointerEvents="none">
|
||||
<SearchIcon color="gray.400" />
|
||||
</InputLeftElement>
|
||||
<Input
|
||||
placeholder="搜索相关新闻..."
|
||||
value={searchQuery}
|
||||
onChange={handleInputChange}
|
||||
onKeyPress={handleKeyPress}
|
||||
/>
|
||||
</InputGroup>
|
||||
<Button
|
||||
colorScheme="blue"
|
||||
onClick={handleSearchSubmit}
|
||||
isLoading={newsLoading}
|
||||
minW="80px"
|
||||
>
|
||||
搜索
|
||||
</Button>
|
||||
</HStack>
|
||||
|
||||
{newsPagination.total > 0 && (
|
||||
<HStack spacing={2}>
|
||||
<Icon as={FaNewspaper} color="blue.500" />
|
||||
<Text fontSize="sm" color="gray.600">
|
||||
共找到{" "}
|
||||
<Text as="span" fontWeight="bold" color="blue.600">
|
||||
{newsPagination.total}
|
||||
</Text>{" "}
|
||||
条新闻
|
||||
</Text>
|
||||
</HStack>
|
||||
)}
|
||||
</HStack>
|
||||
|
||||
<div id="news-list-top" />
|
||||
|
||||
{/* 新闻列表 */}
|
||||
{newsLoading ? (
|
||||
<Center h="400px">
|
||||
<VStack spacing={3}>
|
||||
<Spinner size="xl" color="blue.500" thickness="4px" />
|
||||
<Text color="gray.600">正在加载新闻...</Text>
|
||||
</VStack>
|
||||
</Center>
|
||||
) : newsEvents.length > 0 ? (
|
||||
<>
|
||||
<VStack spacing={3} align="stretch">
|
||||
{newsEvents.map((event, idx) => {
|
||||
const importanceColor = getImportanceColor(
|
||||
event.importance
|
||||
);
|
||||
const eventTypeIcon = getEventTypeIcon(event.event_type);
|
||||
|
||||
return (
|
||||
<Card
|
||||
key={event.id || idx}
|
||||
variant="outline"
|
||||
_hover={{
|
||||
bg: hoverBg,
|
||||
shadow: "md",
|
||||
borderColor: "blue.300",
|
||||
}}
|
||||
transition="all 0.2s"
|
||||
>
|
||||
<CardBody p={4}>
|
||||
<VStack align="stretch" spacing={3}>
|
||||
{/* 标题栏 */}
|
||||
<HStack justify="space-between" align="start">
|
||||
<VStack align="start" spacing={2} flex={1}>
|
||||
<HStack>
|
||||
<Icon
|
||||
as={eventTypeIcon}
|
||||
color="blue.500"
|
||||
boxSize={5}
|
||||
/>
|
||||
<Text
|
||||
fontWeight="bold"
|
||||
fontSize="lg"
|
||||
lineHeight="1.3"
|
||||
>
|
||||
{event.title}
|
||||
</Text>
|
||||
</HStack>
|
||||
|
||||
{/* 标签栏 */}
|
||||
<HStack spacing={2} flexWrap="wrap">
|
||||
{event.importance && (
|
||||
<Badge
|
||||
colorScheme={importanceColor}
|
||||
variant="solid"
|
||||
px={2}
|
||||
>
|
||||
{event.importance}级
|
||||
</Badge>
|
||||
)}
|
||||
{event.event_type && (
|
||||
<Badge colorScheme="blue" variant="outline">
|
||||
{event.event_type}
|
||||
</Badge>
|
||||
)}
|
||||
{event.invest_score && (
|
||||
<Badge
|
||||
colorScheme="purple"
|
||||
variant="subtle"
|
||||
>
|
||||
投资分: {event.invest_score}
|
||||
</Badge>
|
||||
)}
|
||||
{event.keywords && event.keywords.length > 0 && (
|
||||
<>
|
||||
{event.keywords
|
||||
.slice(0, 4)
|
||||
.map((keyword, kidx) => (
|
||||
<Tag
|
||||
key={kidx}
|
||||
size="sm"
|
||||
colorScheme="cyan"
|
||||
variant="subtle"
|
||||
>
|
||||
{typeof keyword === "string"
|
||||
? keyword
|
||||
: keyword?.concept ||
|
||||
keyword?.name ||
|
||||
"未知"}
|
||||
</Tag>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</HStack>
|
||||
</VStack>
|
||||
|
||||
{/* 右侧信息栏 */}
|
||||
<VStack align="end" spacing={1} minW="100px">
|
||||
<Text fontSize="xs" color="gray.500">
|
||||
{event.created_at
|
||||
? new Date(
|
||||
event.created_at
|
||||
).toLocaleDateString("zh-CN", {
|
||||
year: "numeric",
|
||||
month: "2-digit",
|
||||
day: "2-digit",
|
||||
})
|
||||
: ""}
|
||||
</Text>
|
||||
<HStack spacing={3}>
|
||||
{event.view_count !== undefined && (
|
||||
<HStack spacing={1}>
|
||||
<Icon
|
||||
as={FaEye}
|
||||
boxSize={3}
|
||||
color="gray.400"
|
||||
/>
|
||||
<Text fontSize="xs" color="gray.500">
|
||||
{event.view_count}
|
||||
</Text>
|
||||
</HStack>
|
||||
)}
|
||||
{event.hot_score !== undefined && (
|
||||
<HStack spacing={1}>
|
||||
<Icon
|
||||
as={FaFire}
|
||||
boxSize={3}
|
||||
color="orange.400"
|
||||
/>
|
||||
<Text fontSize="xs" color="gray.500">
|
||||
{event.hot_score.toFixed(1)}
|
||||
</Text>
|
||||
</HStack>
|
||||
)}
|
||||
</HStack>
|
||||
{event.creator && (
|
||||
<Text fontSize="xs" color="gray.400">
|
||||
@{event.creator.username}
|
||||
</Text>
|
||||
)}
|
||||
</VStack>
|
||||
</HStack>
|
||||
|
||||
{/* 描述 */}
|
||||
{event.description && (
|
||||
<Text
|
||||
fontSize="sm"
|
||||
color="gray.700"
|
||||
lineHeight="1.6"
|
||||
>
|
||||
{event.description}
|
||||
</Text>
|
||||
)}
|
||||
|
||||
{/* 收益率数据 */}
|
||||
{(event.related_avg_chg !== null ||
|
||||
event.related_max_chg !== null ||
|
||||
event.related_week_chg !== null) && (
|
||||
<Box
|
||||
pt={2}
|
||||
borderTop="1px"
|
||||
borderColor="gray.200"
|
||||
>
|
||||
<HStack spacing={6} flexWrap="wrap">
|
||||
<HStack spacing={1}>
|
||||
<Icon
|
||||
as={FaChartLine}
|
||||
boxSize={3}
|
||||
color="gray.500"
|
||||
/>
|
||||
<Text
|
||||
fontSize="xs"
|
||||
color="gray.500"
|
||||
fontWeight="medium"
|
||||
>
|
||||
相关涨跌:
|
||||
</Text>
|
||||
</HStack>
|
||||
{event.related_avg_chg !== null &&
|
||||
event.related_avg_chg !== undefined && (
|
||||
<HStack spacing={1}>
|
||||
<Text fontSize="xs" color="gray.500">
|
||||
平均
|
||||
</Text>
|
||||
<Text
|
||||
fontSize="sm"
|
||||
fontWeight="bold"
|
||||
color={
|
||||
event.related_avg_chg > 0
|
||||
? "red.500"
|
||||
: "green.500"
|
||||
}
|
||||
>
|
||||
{event.related_avg_chg > 0 ? "+" : ""}
|
||||
{event.related_avg_chg.toFixed(2)}%
|
||||
</Text>
|
||||
</HStack>
|
||||
)}
|
||||
{event.related_max_chg !== null &&
|
||||
event.related_max_chg !== undefined && (
|
||||
<HStack spacing={1}>
|
||||
<Text fontSize="xs" color="gray.500">
|
||||
最大
|
||||
</Text>
|
||||
<Text
|
||||
fontSize="sm"
|
||||
fontWeight="bold"
|
||||
color={
|
||||
event.related_max_chg > 0
|
||||
? "red.500"
|
||||
: "green.500"
|
||||
}
|
||||
>
|
||||
{event.related_max_chg > 0 ? "+" : ""}
|
||||
{event.related_max_chg.toFixed(2)}%
|
||||
</Text>
|
||||
</HStack>
|
||||
)}
|
||||
{event.related_week_chg !== null &&
|
||||
event.related_week_chg !== undefined && (
|
||||
<HStack spacing={1}>
|
||||
<Text fontSize="xs" color="gray.500">
|
||||
周
|
||||
</Text>
|
||||
<Text
|
||||
fontSize="sm"
|
||||
fontWeight="bold"
|
||||
color={
|
||||
event.related_week_chg > 0
|
||||
? "red.500"
|
||||
: "green.500"
|
||||
}
|
||||
>
|
||||
{event.related_week_chg > 0
|
||||
? "+"
|
||||
: ""}
|
||||
{event.related_week_chg.toFixed(2)}%
|
||||
</Text>
|
||||
</HStack>
|
||||
)}
|
||||
</HStack>
|
||||
</Box>
|
||||
)}
|
||||
</VStack>
|
||||
</CardBody>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</VStack>
|
||||
|
||||
{/* 分页控件 */}
|
||||
{newsPagination.pages > 1 && (
|
||||
<Box pt={4}>
|
||||
<HStack
|
||||
justify="space-between"
|
||||
align="center"
|
||||
flexWrap="wrap"
|
||||
>
|
||||
{/* 分页信息 */}
|
||||
<Text fontSize="sm" color="gray.600">
|
||||
第 {newsPagination.page} / {newsPagination.pages} 页
|
||||
</Text>
|
||||
|
||||
{/* 分页按钮 */}
|
||||
<HStack spacing={2}>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => handlePageChange(1)}
|
||||
isDisabled={!newsPagination.has_prev || newsLoading}
|
||||
leftIcon={<Icon as={FaChevronLeft} />}
|
||||
>
|
||||
首页
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
handlePageChange(newsPagination.page - 1)
|
||||
}
|
||||
isDisabled={!newsPagination.has_prev || newsLoading}
|
||||
>
|
||||
上一页
|
||||
</Button>
|
||||
|
||||
{/* 页码按钮 */}
|
||||
{renderPaginationButtons()}
|
||||
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
handlePageChange(newsPagination.page + 1)
|
||||
}
|
||||
isDisabled={!newsPagination.has_next || newsLoading}
|
||||
>
|
||||
下一页
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => handlePageChange(newsPagination.pages)}
|
||||
isDisabled={!newsPagination.has_next || newsLoading}
|
||||
rightIcon={<Icon as={FaChevronRight} />}
|
||||
>
|
||||
末页
|
||||
</Button>
|
||||
</HStack>
|
||||
</HStack>
|
||||
</Box>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<Center h="400px">
|
||||
<VStack spacing={3}>
|
||||
<Icon as={FaNewspaper} boxSize={16} color="gray.300" />
|
||||
<Text color="gray.500" fontSize="lg" fontWeight="medium">
|
||||
暂无相关新闻
|
||||
</Text>
|
||||
<Text fontSize="sm" color="gray.400">
|
||||
{searchQuery ? "尝试修改搜索关键词" : "该公司暂无新闻动态"}
|
||||
</Text>
|
||||
</VStack>
|
||||
</Center>
|
||||
)}
|
||||
</VStack>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</VStack>
|
||||
);
|
||||
};
|
||||
|
||||
export default NewsEventsTab;
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user