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

refactor(DynamicTracking): 将 NewsEventsTab 移至正确目录并重构

Browse Source 
- 从 CompanyOverview/ 移动到 DynamicTracking/（修复跨目录引用）
- 拆分为目录结构：constants.ts, types.ts, utils.ts
- 提取 5 个子组件：NewsSearchBar, NewsEventCard, NewsPagination,
  NewsEmptyState, NewsLoadingState
- 转换为 TypeScript，添加完整类型定义（ThemeConfig, NewsEvent 等）
- 所有子组件使用 React.memo 优化渲染
- 更新 NewsPanel.js 引用路径

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-12-19 15:03:36 +08:00
parent 23788bbebf
commit 2c1acb41b4
12 changed files with 966 additions and 664 deletions
Download Patch File Download Diff File Expand all files Collapse all files

663
src/views/Company/components/CompanyOverview/NewsEventsTab.js
View File

@@ -1,663 +0,0 @@
// src/views/Company/components/CompanyOverview/NewsEventsTab.js
// 新闻动态 Tab - 相关新闻事件列表 + 分页
import React from "react";
import { useNavigate } from "react-router-dom";
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";
import { getEventDetailUrl } from "@/utils/idEncoder";
// 黑金主题配色（文字使用更亮的金色提高对比度）
const THEME_PRESETS = {
blackGold: {
bg: "#0A0E17",
cardBg: "#1A1F2E",
cardHoverBg: "#212633",
cardBorder: "rgba(212, 175, 55, 0.2)",
cardHoverBorder: "#F4D03F", // 亮金色
textPrimary: "#E8E9ED",
textSecondary: "#A0A4B8",
textMuted: "#6B7280",
gold: "#F4D03F", // 亮金色（用于文字）
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: "#F4D03F", // 亮金色
spinnerColor: "#F4D03F", // 亮金色
},
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 navigate = useNavigate();
// 获取主题配色
const theme = THEME_PRESETS[themePreset] || THEME_PRESETS.default;
const isBlackGold = themePreset === "blackGold";
// 点击事件卡片，跳转到详情页
const handleEventClick = (eventId) => {
if (eventId) {
navigate(getEventDetailUrl(eventId));
}
};
// 事件类型图标映射
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}
cursor="pointer"
onClick={() => handleEventClick(event.id)}
_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;

34
src/views/Company/components/DynamicTracking/NewsEventsTab/components/NewsEmptyState.tsx Normal file
View File

@@ -0,0 +1,34 @@
// src/views/Company/components/DynamicTracking/NewsEventsTab/components/NewsEmptyState.tsx
// 空状态组件
import React, { memo } from 'react';
import { Center, VStack, Icon, Text } from '@chakra-ui/react';
import { FaNewspaper } from 'react-icons/fa';
import type { NewsEmptyStateProps } from '../types';
const NewsEmptyState: React.FC<NewsEmptyStateProps> = ({
searchQuery,
theme,
isBlackGold,
}) => {
return (
<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>
);
};
export default memo(NewsEmptyState);

193
src/views/Company/components/DynamicTracking/NewsEventsTab/components/NewsEventCard.tsx Normal file
View File

@@ -0,0 +1,193 @@
// src/views/Company/components/DynamicTracking/NewsEventsTab/components/NewsEventCard.tsx
// 新闻事件卡片组件
import React, { memo } from 'react';
import {
Box,
VStack,
HStack,
Text,
Badge,
Icon,
Card,
CardBody,
Tag,
} from '@chakra-ui/react';
import { FaEye, FaFire, FaChartLine } from 'react-icons/fa';
import type { NewsEventCardProps } from '../types';
import {
getEventTypeIcon,
getImportanceBadgeStyle,
formatDate,
formatChange,
getChangeColor,
getKeywordText,
} from '../utils';
const NewsEventCard: React.FC<NewsEventCardProps> = ({
event,
theme,
isBlackGold,
onClick,
}) => {
const importanceBadgeStyle = getImportanceBadgeStyle(event.importance, theme, isBlackGold);
const EventTypeIcon = getEventTypeIcon(event.event_type);
const hasRelatedChanges =
event.related_avg_chg !== null ||
event.related_max_chg !== null ||
event.related_week_chg !== null;
return (
<Card
variant="outline"
bg={theme.cardBg}
borderColor={theme.cardBorder}
cursor="pointer"
onClick={() => onClick(event.id)}
_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?.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}
>
{getKeywordText(keyword)}
</Tag>
))}
</HStack>
</VStack>
{/* 右侧信息栏 */}
<VStack align="end" spacing={1} minW="100px">
<Text fontSize="xs" color={theme.textMuted}>
{formatDate(event.created_at)}
</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>
)}
{/* 收益率数据 */}
{hasRelatedChanges && (
<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={getChangeColor(event.related_avg_chg)}>
{formatChange(event.related_avg_chg)}
</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={getChangeColor(event.related_max_chg)}>
{formatChange(event.related_max_chg)}
</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={getChangeColor(event.related_week_chg)}>
{formatChange(event.related_week_chg)}
</Text>
</HStack>
)}
</HStack>
</Box>
)}
</VStack>
</CardBody>
</Card>
);
};
export default memo(NewsEventCard);

19
src/views/Company/components/DynamicTracking/NewsEventsTab/components/NewsLoadingState.tsx Normal file
View File

@@ -0,0 +1,19 @@
// src/views/Company/components/DynamicTracking/NewsEventsTab/components/NewsLoadingState.tsx
// 加载状态组件
import React, { memo } from 'react';
import { Center, VStack, Spinner, Text } from '@chakra-ui/react';
import type { NewsLoadingStateProps } from '../types';
const NewsLoadingState: React.FC<NewsLoadingStateProps> = ({ theme }) => {
return (
<Center h="400px">
<VStack spacing={3}>
<Spinner size="xl" color={theme.spinnerColor} thickness="4px" />
<Text color={theme.textSecondary}>正在加载新闻...</Text>
</VStack>
</Center>
);
};
export default memo(NewsLoadingState);

141
src/views/Company/components/DynamicTracking/NewsEventsTab/components/NewsPagination.tsx Normal file
View File

@@ -0,0 +1,141 @@
// src/views/Company/components/DynamicTracking/NewsEventsTab/components/NewsPagination.tsx
// 分页组件
import React, { memo, useMemo } from 'react';
import { Box, HStack, Text, Button, Icon } from '@chakra-ui/react';
import { FaChevronLeft, FaChevronRight } from 'react-icons/fa';
import type { NewsPaginationProps } from '../types';
const NewsPagination: React.FC<NewsPaginationProps> = ({
pagination,
onPageChange,
isLoading,
theme,
isBlackGold,
}) => {
const { page: currentPage, pages: totalPages, has_next, has_prev } = pagination;
// 渲染分页按钮
const pageButtons = useMemo(() => {
const buttons: React.ReactNode[] = [];
// 显示当前页及前后各2页
const startPage = Math.max(1, currentPage - 2);
const endPage = Math.min(totalPages, currentPage + 2);
// 如果开始页大于1，显示省略号
if (startPage > 1) {
buttons.push(
<Text key="start-ellipsis" fontSize="sm" color={theme.textMuted}>
...
</Text>
);
}
for (let i = startPage; i <= endPage; i++) {
const isActive = i === currentPage;
buttons.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={() => onPageChange(i)}
isDisabled={isLoading}
>
{i}
</Button>
);
}
// 如果结束页小于总页数，显示省略号
if (endPage < totalPages) {
buttons.push(
<Text key="end-ellipsis" fontSize="sm" color={theme.textMuted}>
...
</Text>
);
}
return buttons;
}, [currentPage, totalPages, theme, isBlackGold, isLoading, onPageChange]);
if (totalPages <= 1) return null;
return (
<Box pt={4}>
<HStack justify="space-between" align="center" flexWrap="wrap">
{/* 分页信息 */}
<Text fontSize="sm" color={theme.textSecondary}>
第 {currentPage} / {totalPages} 页
</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={() => onPageChange(1)}
isDisabled={!has_prev || isLoading}
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={() => onPageChange(currentPage - 1)}
isDisabled={!has_prev || isLoading}
>
上一页
</Button>
{/* 页码按钮 */}
{pageButtons}
<Button
size="sm"
bg={isBlackGold ? theme.inputBg : undefined}
color={theme.textSecondary}
borderColor={theme.cardBorder}
borderWidth="1px"
_hover={{ bg: theme.cardHoverBg, borderColor: theme.gold }}
onClick={() => onPageChange(currentPage + 1)}
isDisabled={!has_next || isLoading}
>
下一页
</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={() => onPageChange(totalPages)}
isDisabled={!has_next || isLoading}
rightIcon={<Icon as={FaChevronRight} />}
>
末页
</Button>
</HStack>
</HStack>
</Box>
);
};
export default memo(NewsPagination);

77
src/views/Company/components/DynamicTracking/NewsEventsTab/components/NewsSearchBar.tsx Normal file
View File

@@ -0,0 +1,77 @@
// src/views/Company/components/DynamicTracking/NewsEventsTab/components/NewsSearchBar.tsx
// 新闻搜索栏组件
import React, { memo } from 'react';
import { HStack, Input, InputGroup, InputLeftElement, Button, Text, Icon } from '@chakra-ui/react';
import { SearchIcon } from '@chakra-ui/icons';
import { FaNewspaper } from 'react-icons/fa';
import type { NewsSearchBarProps } from '../types';
const NewsSearchBar: React.FC<NewsSearchBarProps> = ({
searchQuery,
onSearchChange,
onSearch,
isLoading,
total,
theme,
isBlackGold,
}) => {
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
onSearchChange(e.target.value);
};
const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === 'Enter') {
onSearch();
}
};
return (
<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={onSearch}
isLoading={isLoading}
minW="80px"
>
搜索
</Button>
</HStack>
{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}>
{total}
</Text>{' '}
条新闻
</Text>
</HStack>
)}
</HStack>
);
};
export default memo(NewsSearchBar);

8
src/views/Company/components/DynamicTracking/NewsEventsTab/components/index.ts Normal file
View File

@@ -0,0 +1,8 @@
// src/views/Company/components/DynamicTracking/NewsEventsTab/components/index.ts
// 组件导出
export { default as NewsSearchBar } from './NewsSearchBar';
export { default as NewsEventCard } from './NewsEventCard';
export { default as NewsPagination } from './NewsPagination';
export { default as NewsEmptyState } from './NewsEmptyState';
export { default as NewsLoadingState } from './NewsLoadingState';

68
src/views/Company/components/DynamicTracking/NewsEventsTab/constants.ts Normal file
View File

@@ -0,0 +1,68 @@
// src/views/Company/components/DynamicTracking/NewsEventsTab/constants.ts
// 新闻动态 - 主题配置常量
import type { ThemeConfig } from './types';
/**
* 黑金主题配色（文字使用更亮的金色提高对比度）
*/
export const BLACK_GOLD_THEME: ThemeConfig = {
bg: '#0A0E17',
cardBg: '#1A1F2E',
cardHoverBg: '#212633',
cardBorder: 'rgba(212, 175, 55, 0.2)',
cardHoverBorder: '#F4D03F',
textPrimary: '#E8E9ED',
textSecondary: '#A0A4B8',
textMuted: '#6B7280',
gold: '#F4D03F',
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: '#F4D03F',
spinnerColor: '#F4D03F',
};
/**
* 默认主题配色
*/
export const DEFAULT_THEME: ThemeConfig = {
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',
};
/**
* 主题预设映射
*/
export const THEME_PRESETS: Record<string, ThemeConfig> = {
blackGold: BLACK_GOLD_THEME,
default: DEFAULT_THEME,
};

157
src/views/Company/components/DynamicTracking/NewsEventsTab/index.tsx Normal file
View File

@@ -0,0 +1,157 @@
// src/views/Company/components/DynamicTracking/NewsEventsTab/index.tsx
// 新闻动态 Tab 组件 - 黑金主题
import React, { memo, useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import { VStack, Card, CardBody } from '@chakra-ui/react';
import { getEventDetailUrl } from '@/utils/idEncoder';
import { THEME_PRESETS } from './constants';
import {
NewsSearchBar,
NewsEventCard,
NewsPagination,
NewsEmptyState,
NewsLoadingState,
} from './components';
import type { NewsEventsTabProps, NewsPagination as NewsPaginationType } from './types';
/**
* 默认分页配置
*/
const DEFAULT_PAGINATION: NewsPaginationType = {
page: 1,
per_page: 10,
total: 0,
pages: 0,
has_next: false,
has_prev: false,
};
/**
* 新闻动态 Tab 组件
*
* Props:
* - newsEvents: 新闻事件列表数组
* - newsLoading: 加载状态
* - newsPagination: 分页信息
* - searchQuery: 搜索关键词
* - onSearchChange: 搜索输入回调
* - onSearch: 搜索提交回调
* - onPageChange: 分页回调
* - cardBg: 卡片背景色
* - themePreset: 主题预设 'blackGold' | 'default'
*/
const NewsEventsTab: React.FC<NewsEventsTabProps> = ({
newsEvents = [],
newsLoading = false,
newsPagination = DEFAULT_PAGINATION,
searchQuery = '',
onSearchChange,
onSearch,
onPageChange,
cardBg,
themePreset = 'default',
}) => {
const navigate = useNavigate();
// 获取主题配色
const theme = THEME_PRESETS[themePreset] || THEME_PRESETS.default;
const isBlackGold = themePreset === 'blackGold';
// 点击事件卡片，跳转到详情页
const handleEventClick = useCallback(
(eventId: string | number | undefined) => {
if (eventId) {
navigate(getEventDetailUrl(eventId));
}
},
[navigate]
);
// 处理搜索输入
const handleSearchChange = useCallback(
(value: string) => {
onSearchChange?.(value);
},
[onSearchChange]
);
// 处理搜索提交
const handleSearch = useCallback(() => {
onSearch?.();
}, [onSearch]);
// 处理分页
const handlePageChange = useCallback(
(page: number) => {
onPageChange?.(page);
// 滚动到列表顶部
document.getElementById('news-list-top')?.scrollIntoView({ behavior: 'smooth' });
},
[onPageChange]
);
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">
{/* 搜索框和统计信息 */}
<NewsSearchBar
searchQuery={searchQuery}
onSearchChange={handleSearchChange}
onSearch={handleSearch}
isLoading={newsLoading}
total={newsPagination.total}
theme={theme}
isBlackGold={isBlackGold}
/>
<div id="news-list-top" />
{/* 新闻列表 */}
{newsLoading ? (
<NewsLoadingState theme={theme} />
) : newsEvents.length > 0 ? (
<>
<VStack spacing={3} align="stretch">
{newsEvents.map((event, idx) => (
<NewsEventCard
key={event.id || idx}
event={event}
theme={theme}
isBlackGold={isBlackGold}
onClick={handleEventClick}
/>
))}
</VStack>
{/* 分页控件 */}
<NewsPagination
pagination={newsPagination}
onPageChange={handlePageChange}
isLoading={newsLoading}
theme={theme}
isBlackGold={isBlackGold}
/>
</>
) : (
<NewsEmptyState
searchQuery={searchQuery}
theme={theme}
isBlackGold={isBlackGold}
/>
)}
</VStack>
</CardBody>
</Card>
</VStack>
);
};
export default memo(NewsEventsTab);

167
src/views/Company/components/DynamicTracking/NewsEventsTab/types.ts Normal file
View File

@@ -0,0 +1,167 @@
// src/views/Company/components/DynamicTracking/NewsEventsTab/types.ts
// 新闻动态 - 类型定义
import type { IconType } from 'react-icons';
/**
* 徽章样式配置
*/
export interface BadgeStyle {
bg: string;
color: string;
colorScheme?: string;
}
/**
* 主题配置
*/
export interface ThemeConfig {
bg: string;
cardBg: string;
cardHoverBg: string;
cardBorder: string;
cardHoverBorder: string;
textPrimary: string;
textSecondary: string;
textMuted: string;
gold: string;
goldLight: string;
inputBg: string;
inputBorder: string;
buttonBg: string;
buttonText: string;
buttonHoverBg: string;
badgeS: BadgeStyle;
badgeA: BadgeStyle;
badgeB: BadgeStyle;
badgeC: BadgeStyle;
tagBg: string;
tagColor: string;
spinnerColor: string;
}
/**
* 新闻事件创建者
*/
export interface NewsEventCreator {
username: string;
}
/**
* 新闻事件关键词
*/
export interface NewsEventKeyword {
concept?: string;
name?: string;
}
/**
* 新闻事件数据
*/
export interface NewsEvent {
id?: string | number;
title: string;
description?: string;
event_type?: string;
importance?: 'S' | 'A' | 'B' | 'C';
invest_score?: number;
keywords?: (string | NewsEventKeyword)[];
created_at?: string;
view_count?: number;
hot_score?: number;
creator?: NewsEventCreator;
related_avg_chg?: number | null;
related_max_chg?: number | null;
related_week_chg?: number | null;
}
/**
* 分页信息
*/
export interface NewsPagination {
page: number;
per_page: number;
total: number;
pages: number;
has_next: boolean;
has_prev: boolean;
}
/**
* 主题预设类型
*/
export type ThemePreset = 'blackGold' | 'default';
/**
* NewsEventsTab 组件 Props
*/
export interface NewsEventsTabProps {
/** 新闻事件列表 */
newsEvents?: NewsEvent[];
/** 加载状态 */
newsLoading?: boolean;
/** 分页信息 */
newsPagination?: NewsPagination;
/** 搜索关键词 */
searchQuery?: string;
/** 搜索输入回调 */
onSearchChange?: (value: string) => void;
/** 搜索提交回调 */
onSearch?: () => void;
/** 分页回调 */
onPageChange?: (page: number) => void;
/** 卡片背景色 */
cardBg?: string;
/** 主题预设 */
themePreset?: ThemePreset;
}
/**
* 搜索栏组件 Props
*/
export interface NewsSearchBarProps {
searchQuery: string;
onSearchChange: (value: string) => void;
onSearch: () => void;
isLoading: boolean;
total: number;
theme: ThemeConfig;
isBlackGold: boolean;
}
/**
* 事件卡片组件 Props
*/
export interface NewsEventCardProps {
event: NewsEvent;
theme: ThemeConfig;
isBlackGold: boolean;
onClick: (eventId: string | number | undefined) => void;
}
/**
* 分页组件 Props
*/
export interface NewsPaginationProps {
pagination: NewsPagination;
onPageChange: (page: number) => void;
isLoading: boolean;
theme: ThemeConfig;
isBlackGold: boolean;
}
/**
* 空状态组件 Props
*/
export interface NewsEmptyStateProps {
searchQuery: string;
theme: ThemeConfig;
isBlackGold: boolean;
}
/**
* 加载状态组件 Props
*/
export interface NewsLoadingStateProps {
theme: ThemeConfig;
}

101
src/views/Company/components/DynamicTracking/NewsEventsTab/utils.ts Normal file
View File

@@ -0,0 +1,101 @@
// src/views/Company/components/DynamicTracking/NewsEventsTab/utils.ts
// 新闻动态 - 工具函数
import type { IconType } from 'react-icons';
import {
FaNewspaper,
FaBullhorn,
FaGavel,
FaFlask,
FaDollarSign,
FaShieldAlt,
FaFileAlt,
FaIndustry,
} from 'react-icons/fa';
import type { ThemeConfig, BadgeStyle } from './types';
/**
* 事件类型图标映射
*/
const EVENT_TYPE_ICONS: Record<string, IconType> = {
企业公告: FaBullhorn,
政策: FaGavel,
技术突破: FaFlask,
企业融资: FaDollarSign,
政策监管: FaShieldAlt,
政策动态: FaFileAlt,
行业事件: FaIndustry,
};
/**
* 获取事件类型对应的图标
*/
export const getEventTypeIcon = (eventType?: string): IconType => {
if (!eventType) return FaNewspaper;
return EVENT_TYPE_ICONS[eventType] || FaNewspaper;
};
/**
* 获取重要性徽章样式
*/
export const getImportanceBadgeStyle = (
importance: string | undefined,
theme: ThemeConfig,
isBlackGold: boolean
): BadgeStyle => {
if (isBlackGold) {
const styles: Record<string, BadgeStyle> = {
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: Record<string, string> = {
S: 'red',
A: 'orange',
B: 'yellow',
C: 'green',
};
return { colorScheme: colorMap[importance || ''] || 'gray', bg: '', color: '' };
};
/**
* 格式化日期
*/
export const formatDate = (dateStr?: string): string => {
if (!dateStr) return '';
return new Date(dateStr).toLocaleDateString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
});
};
/**
* 格式化涨跌幅
*/
export const formatChange = (value: number | null | undefined): string => {
if (value === null || value === undefined) return '-';
const prefix = value > 0 ? '+' : '';
return `${prefix}${value.toFixed(2)}%`;
};
/**
* 获取涨跌幅颜色
*/
export const getChangeColor = (value: number | null | undefined): string => {
if (value === null || value === undefined) return '#9CA3AF';
return value > 0 ? '#EF4444' : '#10B981';
};
/**
* 提取关键词显示文本
*/
export const getKeywordText = (keyword: string | { concept?: string; name?: string }): string => {
if (typeof keyword === 'string') return keyword;
return keyword?.concept || keyword?.name || '未知';
};

2
src/views/Company/components/DynamicTracking/components/NewsPanel.js
View File

@@ -4,7 +4,7 @@
import React, { useState, useEffect, useCallback } from 'react';
import { logger } from '@utils/logger';
import axios from '@utils/axiosConfig';
import NewsEventsTab from '../../CompanyOverview/NewsEventsTab';
import NewsEventsTab from '../NewsEventsTab';
const NewsPanel = ({ stockCode }) => {
const [newsEvents, setNewsEvents] = useState([]);