2d03c88f43
- NewsEventsTab: 添加黑金主题配色系统 - ForecastPanel: 业绩预告面板黑金样式 - NewsPanel: 切换 blackGold 主题 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
651 lines
26 KiB
JavaScript
651 lines
26 KiB
JavaScript
// 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,
|
||
} 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";
|
||
|
||
// 黑金主题配色
|
||
const THEME_PRESETS = {
|
||
blackGold: {
|
||
bg: "#0A0E17",
|
||
cardBg: "#1A1F2E",
|
||
cardHoverBg: "#212633",
|
||
cardBorder: "rgba(212, 175, 55, 0.2)",
|
||
cardHoverBorder: "#D4AF37",
|
||
textPrimary: "#E8E9ED",
|
||
textSecondary: "#A0A4B8",
|
||
textMuted: "#6B7280",
|
||
gold: "#D4AF37",
|
||
goldLight: "#FFD54F",
|
||
inputBg: "#151922",
|
||
inputBorder: "#2D3748",
|
||
buttonBg: "#D4AF37",
|
||
buttonText: "#0A0E17",
|
||
buttonHoverBg: "#FFD54F",
|
||
badgeS: { bg: "rgba(255, 195, 0, 0.2)", color: "#FFD54F" },
|
||
badgeA: { bg: "rgba(249, 115, 22, 0.2)", color: "#FB923C" },
|
||
badgeB: { bg: "rgba(59, 130, 246, 0.2)", color: "#60A5FA" },
|
||
badgeC: { bg: "rgba(107, 114, 128, 0.2)", color: "#9CA3AF" },
|
||
tagBg: "rgba(212, 175, 55, 0.15)",
|
||
tagColor: "#D4AF37",
|
||
spinnerColor: "#D4AF37",
|
||
},
|
||
default: {
|
||
bg: "white",
|
||
cardBg: "white",
|
||
cardHoverBg: "gray.50",
|
||
cardBorder: "gray.200",
|
||
cardHoverBorder: "blue.300",
|
||
textPrimary: "gray.800",
|
||
textSecondary: "gray.600",
|
||
textMuted: "gray.500",
|
||
gold: "blue.500",
|
||
goldLight: "blue.400",
|
||
inputBg: "white",
|
||
inputBorder: "gray.200",
|
||
buttonBg: "blue.500",
|
||
buttonText: "white",
|
||
buttonHoverBg: "blue.600",
|
||
badgeS: { bg: "red.100", color: "red.600" },
|
||
badgeA: { bg: "orange.100", color: "orange.600" },
|
||
badgeB: { bg: "yellow.100", color: "yellow.600" },
|
||
badgeC: { bg: "green.100", color: "green.600" },
|
||
tagBg: "cyan.50",
|
||
tagColor: "cyan.600",
|
||
spinnerColor: "blue.500",
|
||
},
|
||
};
|
||
|
||
/**
|
||
* 新闻动态 Tab 组件
|
||
*
|
||
* Props:
|
||
* - newsEvents: 新闻事件列表数组
|
||
* - newsLoading: 加载状态
|
||
* - newsPagination: 分页信息 { page, per_page, total, pages, has_next, has_prev }
|
||
* - searchQuery: 搜索关键词
|
||
* - onSearchChange: 搜索输入回调 (value) => void
|
||
* - onSearch: 搜索提交回调 () => void
|
||
* - onPageChange: 分页回调 (page) => void
|
||
* - cardBg: 卡片背景色
|
||
* - themePreset: 主题预设 'blackGold' | 'default'
|
||
*/
|
||
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,
|
||
themePreset = "default",
|
||
}) => {
|
||
// 获取主题配色
|
||
const theme = THEME_PRESETS[themePreset] || THEME_PRESETS.default;
|
||
const isBlackGold = themePreset === "blackGold";
|
||
// 事件类型图标映射
|
||
const getEventTypeIcon = (eventType) => {
|
||
const iconMap = {
|
||
企业公告: FaBullhorn,
|
||
政策: FaGavel,
|
||
技术突破: FaFlask,
|
||
企业融资: FaDollarSign,
|
||
政策监管: FaShieldAlt,
|
||
政策动态: FaFileAlt,
|
||
行业事件: FaIndustry,
|
||
};
|
||
return iconMap[eventType] || FaNewspaper;
|
||
};
|
||
|
||
// 重要性颜色映射 - 根据主题返回不同配色
|
||
const getImportanceBadgeStyle = (importance) => {
|
||
if (isBlackGold) {
|
||
const styles = {
|
||
S: theme.badgeS,
|
||
A: theme.badgeA,
|
||
B: theme.badgeB,
|
||
C: theme.badgeC,
|
||
};
|
||
return styles[importance] || { bg: "rgba(107, 114, 128, 0.2)", color: "#9CA3AF" };
|
||
}
|
||
// 默认主题使用 colorScheme
|
||
const colorMap = {
|
||
S: "red",
|
||
A: "orange",
|
||
B: "yellow",
|
||
C: "green",
|
||
};
|
||
return { colorScheme: 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={theme.textMuted}>
|
||
...
|
||
</Text>
|
||
);
|
||
}
|
||
|
||
for (let i = startPage; i <= endPage; i++) {
|
||
const isActive = i === currentPage;
|
||
pageButtons.push(
|
||
<Button
|
||
key={i}
|
||
size="sm"
|
||
bg={isActive ? theme.buttonBg : (isBlackGold ? theme.inputBg : undefined)}
|
||
color={isActive ? theme.buttonText : theme.textSecondary}
|
||
borderColor={isActive ? theme.gold : theme.cardBorder}
|
||
borderWidth="1px"
|
||
_hover={{
|
||
bg: isActive ? theme.buttonHoverBg : theme.cardHoverBg,
|
||
borderColor: theme.gold
|
||
}}
|
||
onClick={() => handlePageChange(i)}
|
||
isDisabled={newsLoading}
|
||
>
|
||
{i}
|
||
</Button>
|
||
);
|
||
}
|
||
|
||
// 如果结束页小于总页数，显示省略号
|
||
if (endPage < totalPages) {
|
||
pageButtons.push(
|
||
<Text key="end-ellipsis" fontSize="sm" color={theme.textMuted}>
|
||
...
|
||
</Text>
|
||
);
|
||
}
|
||
|
||
return pageButtons;
|
||
};
|
||
|
||
return (
|
||
<VStack spacing={4} align="stretch">
|
||
<Card bg={cardBg || theme.cardBg} shadow="md" borderColor={theme.cardBorder} borderWidth={isBlackGold ? "1px" : "0"}>
|
||
<CardBody>
|
||
<VStack spacing={4} align="stretch">
|
||
{/* 搜索框和统计信息 */}
|
||
<HStack justify="space-between" flexWrap="wrap">
|
||
<HStack flex={1} minW="300px">
|
||
<InputGroup>
|
||
<InputLeftElement pointerEvents="none">
|
||
<SearchIcon color={theme.textMuted} />
|
||
</InputLeftElement>
|
||
<Input
|
||
placeholder="搜索相关新闻..."
|
||
value={searchQuery}
|
||
onChange={handleInputChange}
|
||
onKeyPress={handleKeyPress}
|
||
bg={theme.inputBg}
|
||
borderColor={theme.inputBorder}
|
||
color={theme.textPrimary}
|
||
_placeholder={{ color: theme.textMuted }}
|
||
_hover={{ borderColor: theme.gold }}
|
||
_focus={{ borderColor: theme.gold, boxShadow: `0 0 0 1px ${theme.gold}` }}
|
||
/>
|
||
</InputGroup>
|
||
<Button
|
||
bg={theme.buttonBg}
|
||
color={theme.buttonText}
|
||
_hover={{ bg: theme.buttonHoverBg }}
|
||
onClick={handleSearchSubmit}
|
||
isLoading={newsLoading}
|
||
minW="80px"
|
||
>
|
||
搜索
|
||
</Button>
|
||
</HStack>
|
||
|
||
{newsPagination.total > 0 && (
|
||
<HStack spacing={2}>
|
||
<Icon as={FaNewspaper} color={theme.gold} />
|
||
<Text fontSize="sm" color={theme.textSecondary}>
|
||
共找到{" "}
|
||
<Text as="span" fontWeight="bold" color={theme.gold}>
|
||
{newsPagination.total}
|
||
</Text>{" "}
|
||
条新闻
|
||
</Text>
|
||
</HStack>
|
||
)}
|
||
</HStack>
|
||
|
||
<div id="news-list-top" />
|
||
|
||
{/* 新闻列表 */}
|
||
{newsLoading ? (
|
||
<Center h="400px">
|
||
<VStack spacing={3}>
|
||
<Spinner size="xl" color={theme.spinnerColor} thickness="4px" />
|
||
<Text color={theme.textSecondary}>正在加载新闻...</Text>
|
||
</VStack>
|
||
</Center>
|
||
) : newsEvents.length > 0 ? (
|
||
<>
|
||
<VStack spacing={3} align="stretch">
|
||
{newsEvents.map((event, idx) => {
|
||
const importanceBadgeStyle = getImportanceBadgeStyle(
|
||
event.importance
|
||
);
|
||
const eventTypeIcon = getEventTypeIcon(event.event_type);
|
||
|
||
return (
|
||
<Card
|
||
key={event.id || idx}
|
||
variant="outline"
|
||
bg={theme.cardBg}
|
||
borderColor={theme.cardBorder}
|
||
_hover={{
|
||
bg: theme.cardHoverBg,
|
||
shadow: "md",
|
||
borderColor: theme.cardHoverBorder,
|
||
}}
|
||
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={theme.gold}
|
||
boxSize={5}
|
||
/>
|
||
<Text
|
||
fontWeight="bold"
|
||
fontSize="lg"
|
||
lineHeight="1.3"
|
||
color={theme.textPrimary}
|
||
>
|
||
{event.title}
|
||
</Text>
|
||
</HStack>
|
||
|
||
{/* 标签栏 */}
|
||
<HStack spacing={2} flexWrap="wrap">
|
||
{event.importance && (
|
||
<Badge
|
||
{...(isBlackGold ? {} : { colorScheme: importanceBadgeStyle.colorScheme, variant: "solid" })}
|
||
bg={isBlackGold ? importanceBadgeStyle.bg : undefined}
|
||
color={isBlackGold ? importanceBadgeStyle.color : undefined}
|
||
px={2}
|
||
>
|
||
{event.importance}级
|
||
</Badge>
|
||
)}
|
||
{event.event_type && (
|
||
<Badge
|
||
{...(isBlackGold ? {} : { colorScheme: "blue", variant: "outline" })}
|
||
bg={isBlackGold ? "rgba(59, 130, 246, 0.2)" : undefined}
|
||
color={isBlackGold ? "#60A5FA" : undefined}
|
||
borderColor={isBlackGold ? "rgba(59, 130, 246, 0.3)" : undefined}
|
||
>
|
||
{event.event_type}
|
||
</Badge>
|
||
)}
|
||
{event.invest_score && (
|
||
<Badge
|
||
{...(isBlackGold ? {} : { colorScheme: "purple", variant: "subtle" })}
|
||
bg={isBlackGold ? "rgba(139, 92, 246, 0.2)" : undefined}
|
||
color={isBlackGold ? "#A78BFA" : undefined}
|
||
>
|
||
投资分: {event.invest_score}
|
||
</Badge>
|
||
)}
|
||
{event.keywords && event.keywords.length > 0 && (
|
||
<>
|
||
{event.keywords
|
||
.slice(0, 4)
|
||
.map((keyword, kidx) => (
|
||
<Tag
|
||
key={kidx}
|
||
size="sm"
|
||
{...(isBlackGold ? {} : { colorScheme: "cyan", variant: "subtle" })}
|
||
bg={isBlackGold ? theme.tagBg : undefined}
|
||
color={isBlackGold ? theme.tagColor : undefined}
|
||
>
|
||
{typeof keyword === "string"
|
||
? keyword
|
||
: keyword?.concept ||
|
||
keyword?.name ||
|
||
"未知"}
|
||
</Tag>
|
||
))}
|
||
</>
|
||
)}
|
||
</HStack>
|
||
</VStack>
|
||
|
||
{/* 右侧信息栏 */}
|
||
<VStack align="end" spacing={1} minW="100px">
|
||
<Text fontSize="xs" color={theme.textMuted}>
|
||
{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={theme.textMuted}
|
||
/>
|
||
<Text fontSize="xs" color={theme.textMuted}>
|
||
{event.view_count}
|
||
</Text>
|
||
</HStack>
|
||
)}
|
||
{event.hot_score !== undefined && (
|
||
<HStack spacing={1}>
|
||
<Icon
|
||
as={FaFire}
|
||
boxSize={3}
|
||
color={theme.goldLight}
|
||
/>
|
||
<Text fontSize="xs" color={theme.textMuted}>
|
||
{event.hot_score.toFixed(1)}
|
||
</Text>
|
||
</HStack>
|
||
)}
|
||
</HStack>
|
||
{event.creator && (
|
||
<Text fontSize="xs" color={theme.textMuted}>
|
||
@{event.creator.username}
|
||
</Text>
|
||
)}
|
||
</VStack>
|
||
</HStack>
|
||
|
||
{/* 描述 */}
|
||
{event.description && (
|
||
<Text
|
||
fontSize="sm"
|
||
color={theme.textSecondary}
|
||
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={theme.cardBorder}
|
||
>
|
||
<HStack spacing={6} flexWrap="wrap">
|
||
<HStack spacing={1}>
|
||
<Icon
|
||
as={FaChartLine}
|
||
boxSize={3}
|
||
color={theme.textMuted}
|
||
/>
|
||
<Text
|
||
fontSize="xs"
|
||
color={theme.textMuted}
|
||
fontWeight="medium"
|
||
>
|
||
相关涨跌:
|
||
</Text>
|
||
</HStack>
|
||
{event.related_avg_chg !== null &&
|
||
event.related_avg_chg !== undefined && (
|
||
<HStack spacing={1}>
|
||
<Text fontSize="xs" color={theme.textMuted}>
|
||
平均
|
||
</Text>
|
||
<Text
|
||
fontSize="sm"
|
||
fontWeight="bold"
|
||
color={
|
||
event.related_avg_chg > 0
|
||
? "#EF4444"
|
||
: "#10B981"
|
||
}
|
||
>
|
||
{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={theme.textMuted}>
|
||
最大
|
||
</Text>
|
||
<Text
|
||
fontSize="sm"
|
||
fontWeight="bold"
|
||
color={
|
||
event.related_max_chg > 0
|
||
? "#EF4444"
|
||
: "#10B981"
|
||
}
|
||
>
|
||
{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={theme.textMuted}>
|
||
周
|
||
</Text>
|
||
<Text
|
||
fontSize="sm"
|
||
fontWeight="bold"
|
||
color={
|
||
event.related_week_chg > 0
|
||
? "#EF4444"
|
||
: "#10B981"
|
||
}
|
||
>
|
||
{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={theme.textSecondary}>
|
||
第 {newsPagination.page} / {newsPagination.pages} 页
|
||
</Text>
|
||
|
||
{/* 分页按钮 */}
|
||
<HStack spacing={2}>
|
||
<Button
|
||
size="sm"
|
||
bg={isBlackGold ? theme.inputBg : undefined}
|
||
color={theme.textSecondary}
|
||
borderColor={theme.cardBorder}
|
||
borderWidth="1px"
|
||
_hover={{ bg: theme.cardHoverBg, borderColor: theme.gold }}
|
||
onClick={() => handlePageChange(1)}
|
||
isDisabled={!newsPagination.has_prev || newsLoading}
|
||
leftIcon={<Icon as={FaChevronLeft} />}
|
||
>
|
||
首页
|
||
</Button>
|
||
<Button
|
||
size="sm"
|
||
bg={isBlackGold ? theme.inputBg : undefined}
|
||
color={theme.textSecondary}
|
||
borderColor={theme.cardBorder}
|
||
borderWidth="1px"
|
||
_hover={{ bg: theme.cardHoverBg, borderColor: theme.gold }}
|
||
onClick={() =>
|
||
handlePageChange(newsPagination.page - 1)
|
||
}
|
||
isDisabled={!newsPagination.has_prev || newsLoading}
|
||
>
|
||
上一页
|
||
</Button>
|
||
|
||
{/* 页码按钮 */}
|
||
{renderPaginationButtons()}
|
||
|
||
<Button
|
||
size="sm"
|
||
bg={isBlackGold ? theme.inputBg : undefined}
|
||
color={theme.textSecondary}
|
||
borderColor={theme.cardBorder}
|
||
borderWidth="1px"
|
||
_hover={{ bg: theme.cardHoverBg, borderColor: theme.gold }}
|
||
onClick={() =>
|
||
handlePageChange(newsPagination.page + 1)
|
||
}
|
||
isDisabled={!newsPagination.has_next || newsLoading}
|
||
>
|
||
下一页
|
||
</Button>
|
||
<Button
|
||
size="sm"
|
||
bg={isBlackGold ? theme.inputBg : undefined}
|
||
color={theme.textSecondary}
|
||
borderColor={theme.cardBorder}
|
||
borderWidth="1px"
|
||
_hover={{ bg: theme.cardHoverBg, borderColor: theme.gold }}
|
||
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={isBlackGold ? theme.gold : "gray.300"} opacity={0.5} />
|
||
<Text color={theme.textSecondary} fontSize="lg" fontWeight="medium">
|
||
暂无相关新闻
|
||
</Text>
|
||
<Text fontSize="sm" color={theme.textMuted}>
|
||
{searchQuery ? "尝试修改搜索关键词" : "该公司暂无新闻动态"}
|
||
</Text>
|
||
</VStack>
|
||
</Center>
|
||
)}
|
||
</VStack>
|
||
</CardBody>
|
||
</Card>
|
||
</VStack>
|
||
);
|
||
};
|
||
|
||
export default NewsEventsTab;
|