665 lines
19 KiB
JavaScript
665 lines
19 KiB
JavaScript
// src/views/Community/components/DynamicNews/layouts/MainlineTimelineView.js
|
|
// 主线时间轴布局组件 - 按 lv2 概念分组展示事件（横向滚动布局）
|
|
|
|
import React, {
|
|
useState,
|
|
useEffect,
|
|
forwardRef,
|
|
useImperativeHandle,
|
|
useCallback,
|
|
useMemo,
|
|
} from "react";
|
|
import {
|
|
Box,
|
|
VStack,
|
|
HStack,
|
|
Text,
|
|
Badge,
|
|
Flex,
|
|
Icon,
|
|
Spinner,
|
|
Center,
|
|
IconButton,
|
|
Tooltip,
|
|
Button,
|
|
} from "@chakra-ui/react";
|
|
import {
|
|
ChevronDownIcon,
|
|
ChevronUpIcon,
|
|
RepeatIcon,
|
|
} from "@chakra-ui/icons";
|
|
import { FiTrendingUp, FiZap } from "react-icons/fi";
|
|
import DynamicNewsEventCard from "../../EventCard/DynamicNewsEventCard";
|
|
import { getApiBase } from "@utils/apiConfig";
|
|
|
|
// 固定深色主题颜色
|
|
const COLORS = {
|
|
containerBg: "#1a1d24",
|
|
cardBg: "#252a34",
|
|
cardBorderColor: "#3a3f4b",
|
|
headerHoverBg: "#2d323e",
|
|
textColor: "#e2e8f0",
|
|
secondaryTextColor: "#a0aec0",
|
|
timelineLineColor: "#4299e1",
|
|
timelineDotBg: "#63b3ed",
|
|
scrollbarTrackBg: "#1a1d24",
|
|
scrollbarThumbBg: "#4a5568",
|
|
scrollbarThumbHoverBg: "#718096",
|
|
statBarBg: "#252a34",
|
|
};
|
|
|
|
// 每次加载的事件数量
|
|
const EVENTS_PER_LOAD = 10;
|
|
|
|
/**
|
|
* 单个主线卡片组件 - 支持懒加载
|
|
*/
|
|
const MainlineCard = React.memo(({
|
|
mainline,
|
|
colorScheme,
|
|
isExpanded,
|
|
onToggle,
|
|
selectedEvent,
|
|
onEventSelect,
|
|
eventFollowStatus,
|
|
onToggleFollow,
|
|
borderColor,
|
|
}) => {
|
|
// 懒加载状态
|
|
const [displayCount, setDisplayCount] = useState(EVENTS_PER_LOAD);
|
|
const [isLoadingMore, setIsLoadingMore] = useState(false);
|
|
|
|
// 重置显示数量当折叠时
|
|
useEffect(() => {
|
|
if (!isExpanded) {
|
|
setDisplayCount(EVENTS_PER_LOAD);
|
|
}
|
|
}, [isExpanded]);
|
|
|
|
// 当前显示的事件
|
|
const displayedEvents = useMemo(() => {
|
|
return mainline.events.slice(0, displayCount);
|
|
}, [mainline.events, displayCount]);
|
|
|
|
// 是否还有更多
|
|
const hasMore = displayCount < mainline.events.length;
|
|
|
|
// 加载更多
|
|
const loadMore = useCallback(() => {
|
|
setIsLoadingMore(true);
|
|
// 使用 setTimeout 模拟异步，避免 UI 卡顿
|
|
setTimeout(() => {
|
|
setDisplayCount(prev => Math.min(prev + EVENTS_PER_LOAD, mainline.events.length));
|
|
setIsLoadingMore(false);
|
|
}, 50);
|
|
}, [mainline.events.length]);
|
|
|
|
return (
|
|
<Box
|
|
bg={COLORS.cardBg}
|
|
borderRadius="lg"
|
|
borderWidth="1px"
|
|
borderColor={COLORS.cardBorderColor}
|
|
borderTopWidth="3px"
|
|
borderTopColor={`${colorScheme}.500`}
|
|
minW={isExpanded ? "320px" : "200px"}
|
|
maxW={isExpanded ? "380px" : "240px"}
|
|
h="100%"
|
|
display="flex"
|
|
flexDirection="column"
|
|
transition="all 0.3s ease"
|
|
flexShrink={0}
|
|
_hover={{
|
|
borderColor: `${colorScheme}.400`,
|
|
boxShadow: "lg"
|
|
}}
|
|
>
|
|
{/* 卡片头部 */}
|
|
<Flex
|
|
align="center"
|
|
justify="space-between"
|
|
px={3}
|
|
py={2}
|
|
cursor="pointer"
|
|
onClick={onToggle}
|
|
_hover={{ bg: COLORS.headerHoverBg }}
|
|
transition="all 0.15s"
|
|
borderBottomWidth="1px"
|
|
borderBottomColor={COLORS.cardBorderColor}
|
|
flexShrink={0}
|
|
>
|
|
<VStack align="start" spacing={0} flex={1} minW={0}>
|
|
<HStack spacing={2} w="100%">
|
|
<Text
|
|
fontWeight="bold"
|
|
fontSize="sm"
|
|
color={COLORS.textColor}
|
|
noOfLines={1}
|
|
flex={1}
|
|
>
|
|
{mainline.lv2_name || "其他"}
|
|
</Text>
|
|
<Badge
|
|
colorScheme={colorScheme}
|
|
fontSize="xs"
|
|
borderRadius="full"
|
|
px={2}
|
|
flexShrink={0}
|
|
>
|
|
{mainline.event_count}
|
|
</Badge>
|
|
</HStack>
|
|
{mainline.lv1_name && (
|
|
<Text fontSize="xs" color={COLORS.secondaryTextColor} noOfLines={1}>
|
|
{mainline.lv1_name}
|
|
</Text>
|
|
)}
|
|
</VStack>
|
|
<Icon
|
|
as={isExpanded ? ChevronUpIcon : ChevronDownIcon}
|
|
boxSize={4}
|
|
color={COLORS.secondaryTextColor}
|
|
ml={2}
|
|
flexShrink={0}
|
|
/>
|
|
</Flex>
|
|
|
|
{/* 事件列表区域 */}
|
|
{isExpanded ? (
|
|
<Box
|
|
px={3}
|
|
py={2}
|
|
flex={1}
|
|
overflowY="auto"
|
|
position="relative"
|
|
css={{
|
|
"&::-webkit-scrollbar": { width: "4px" },
|
|
"&::-webkit-scrollbar-track": {
|
|
background: COLORS.scrollbarTrackBg,
|
|
},
|
|
"&::-webkit-scrollbar-thumb": {
|
|
background: COLORS.scrollbarThumbBg,
|
|
borderRadius: "2px",
|
|
},
|
|
}}
|
|
>
|
|
{/* 时间轴线 */}
|
|
<Box
|
|
position="absolute"
|
|
left="11px"
|
|
top="8px"
|
|
bottom="8px"
|
|
w="2px"
|
|
bg={COLORS.timelineLineColor}
|
|
opacity={0.3}
|
|
borderRadius="full"
|
|
/>
|
|
|
|
{/* 事件列表 */}
|
|
<VStack spacing={2} align="stretch" pl={5}>
|
|
{displayedEvents.map((event, eventIndex) => (
|
|
<Box key={event.id} position="relative">
|
|
{/* 时间轴圆点 */}
|
|
<Box
|
|
position="absolute"
|
|
left="-19px"
|
|
top="12px"
|
|
w="8px"
|
|
h="8px"
|
|
borderRadius="full"
|
|
bg={COLORS.timelineDotBg}
|
|
border="2px solid"
|
|
borderColor={COLORS.cardBg}
|
|
zIndex={1}
|
|
/>
|
|
{/* 事件卡片 */}
|
|
<DynamicNewsEventCard
|
|
event={event}
|
|
index={eventIndex}
|
|
isFollowing={
|
|
eventFollowStatus[event.id]?.isFollowing || false
|
|
}
|
|
followerCount={
|
|
eventFollowStatus[event.id]?.followerCount ||
|
|
event.follower_count ||
|
|
0
|
|
}
|
|
isSelected={selectedEvent?.id === event.id}
|
|
onEventClick={(clickedEvent) => {
|
|
onEventSelect?.(clickedEvent);
|
|
}}
|
|
onTitleClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
onEventSelect?.(event);
|
|
}}
|
|
onToggleFollow={() => onToggleFollow?.(event.id)}
|
|
borderColor={borderColor}
|
|
compact
|
|
/>
|
|
</Box>
|
|
))}
|
|
|
|
{/* 加载更多按钮 */}
|
|
{hasMore && (
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
color={COLORS.secondaryTextColor}
|
|
onClick={loadMore}
|
|
isLoading={isLoadingMore}
|
|
loadingText="加载中..."
|
|
w="100%"
|
|
_hover={{ bg: COLORS.headerHoverBg }}
|
|
>
|
|
加载更多 ({mainline.events.length - displayCount} 条)
|
|
</Button>
|
|
)}
|
|
</VStack>
|
|
</Box>
|
|
) : (
|
|
/* 折叠时显示简要信息 */
|
|
<Box px={3} py={2} flex={1} overflow="hidden">
|
|
<VStack spacing={1} align="stretch">
|
|
{mainline.events.slice(0, 3).map((event) => (
|
|
<Text
|
|
key={event.id}
|
|
fontSize="xs"
|
|
color={COLORS.secondaryTextColor}
|
|
noOfLines={1}
|
|
cursor="pointer"
|
|
_hover={{ color: COLORS.textColor }}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onEventSelect?.(event);
|
|
}}
|
|
>
|
|
• {event.title}
|
|
</Text>
|
|
))}
|
|
{mainline.events.length > 3 && (
|
|
<Text fontSize="xs" color={COLORS.secondaryTextColor}>
|
|
... 还有 {mainline.events.length - 3} 条
|
|
</Text>
|
|
)}
|
|
</VStack>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
);
|
|
});
|
|
|
|
MainlineCard.displayName = "MainlineCard";
|
|
|
|
/**
|
|
* 主线时间轴布局组件
|
|
*/
|
|
const MainlineTimelineViewComponent = forwardRef(
|
|
(
|
|
{
|
|
display = "block",
|
|
filters = {},
|
|
selectedEvent,
|
|
onEventSelect,
|
|
eventFollowStatus = {},
|
|
onToggleFollow,
|
|
borderColor,
|
|
},
|
|
ref
|
|
) => {
|
|
// 状态
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState(null);
|
|
const [mainlineData, setMainlineData] = useState(null);
|
|
const [expandedGroups, setExpandedGroups] = useState({});
|
|
|
|
// 根据主线类型获取配色
|
|
const getColorScheme = useCallback((lv2Name) => {
|
|
if (!lv2Name) return "gray";
|
|
const name = lv2Name.toLowerCase();
|
|
|
|
if (
|
|
name.includes("ai") ||
|
|
name.includes("人工智能") ||
|
|
name.includes("算力") ||
|
|
name.includes("大模型")
|
|
)
|
|
return "purple";
|
|
if (
|
|
name.includes("半导体") ||
|
|
name.includes("芯片") ||
|
|
name.includes("光刻")
|
|
)
|
|
return "blue";
|
|
if (name.includes("机器人") || name.includes("人形")) return "pink";
|
|
if (
|
|
name.includes("消费电子") ||
|
|
name.includes("手机") ||
|
|
name.includes("xr")
|
|
)
|
|
return "cyan";
|
|
if (
|
|
name.includes("汽车") ||
|
|
name.includes("驾驶") ||
|
|
name.includes("新能源车")
|
|
)
|
|
return "teal";
|
|
if (
|
|
name.includes("新能源") ||
|
|
name.includes("电力") ||
|
|
name.includes("光伏") ||
|
|
name.includes("储能")
|
|
)
|
|
return "green";
|
|
if (
|
|
name.includes("低空") ||
|
|
name.includes("航天") ||
|
|
name.includes("卫星")
|
|
)
|
|
return "orange";
|
|
if (name.includes("军工") || name.includes("国防")) return "red";
|
|
if (
|
|
name.includes("医药") ||
|
|
name.includes("医疗") ||
|
|
name.includes("生物")
|
|
)
|
|
return "messenger";
|
|
if (
|
|
name.includes("消费") ||
|
|
name.includes("食品") ||
|
|
name.includes("白酒")
|
|
)
|
|
return "yellow";
|
|
if (
|
|
name.includes("煤炭") ||
|
|
name.includes("石油") ||
|
|
name.includes("钢铁")
|
|
)
|
|
return "blackAlpha";
|
|
if (
|
|
name.includes("金融") ||
|
|
name.includes("银行") ||
|
|
name.includes("券商")
|
|
)
|
|
return "linkedin";
|
|
return "gray";
|
|
}, []);
|
|
|
|
// 加载主线数据
|
|
const fetchMainlineData = useCallback(async () => {
|
|
if (display === "none") return;
|
|
|
|
setLoading(true);
|
|
setError(null);
|
|
|
|
try {
|
|
const apiBase = getApiBase();
|
|
const params = new URLSearchParams();
|
|
|
|
// 添加筛选参数
|
|
if (filters.recent_days)
|
|
params.append("recent_days", filters.recent_days);
|
|
if (filters.importance && filters.importance !== "all")
|
|
params.append("importance", filters.importance);
|
|
|
|
const url = `${apiBase}/api/events/mainline?${params.toString()}`;
|
|
console.log("[MainlineTimelineView] 🔄 请求主线数据:", url);
|
|
|
|
const response = await fetch(url);
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
|
}
|
|
|
|
const result = await response.json();
|
|
console.log("[MainlineTimelineView] 📦 响应数据:", {
|
|
success: result.success,
|
|
mainlineCount: result.data?.mainlines?.length,
|
|
totalEvents: result.data?.total_events,
|
|
});
|
|
|
|
if (result.success) {
|
|
// 按事件数量从多到少排序
|
|
const sortedMainlines = [...(result.data.mainlines || [])].sort(
|
|
(a, b) => b.event_count - a.event_count
|
|
);
|
|
|
|
setMainlineData({
|
|
...result.data,
|
|
mainlines: sortedMainlines,
|
|
});
|
|
|
|
// 初始化展开状态（默认全部折叠）
|
|
const initialExpanded = {};
|
|
sortedMainlines.forEach((mainline) => {
|
|
initialExpanded[mainline.lv2_id] = false;
|
|
});
|
|
setExpandedGroups(initialExpanded);
|
|
} else {
|
|
throw new Error(result.error || "获取数据失败");
|
|
}
|
|
} catch (err) {
|
|
console.error("[MainlineTimelineView] ❌ 请求失败:", err);
|
|
setError(err.message);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [display, filters.recent_days, filters.importance]);
|
|
|
|
// 初始加载 & 筛选变化时刷新
|
|
useEffect(() => {
|
|
fetchMainlineData();
|
|
}, [fetchMainlineData]);
|
|
|
|
// 暴露方法给父组件
|
|
useImperativeHandle(
|
|
ref,
|
|
() => ({
|
|
refresh: fetchMainlineData,
|
|
getScrollPosition: () => null,
|
|
}),
|
|
[fetchMainlineData]
|
|
);
|
|
|
|
// 切换分组展开/折叠
|
|
const toggleGroup = useCallback((lv2Id) => {
|
|
setExpandedGroups((prev) => ({
|
|
...prev,
|
|
[lv2Id]: !prev[lv2Id],
|
|
}));
|
|
}, []);
|
|
|
|
// 全部展开/折叠
|
|
const toggleAll = useCallback(
|
|
(expand) => {
|
|
if (!mainlineData?.mainlines) return;
|
|
const newState = {};
|
|
mainlineData.mainlines.forEach((mainline) => {
|
|
newState[mainline.lv2_id] = expand;
|
|
});
|
|
setExpandedGroups(newState);
|
|
},
|
|
[mainlineData]
|
|
);
|
|
|
|
// 渲染加载状态
|
|
if (loading) {
|
|
return (
|
|
<Box display={display} p={8} bg={COLORS.containerBg} minH="400px">
|
|
<Center h="400px">
|
|
<VStack spacing={4}>
|
|
<Spinner size="xl" color="blue.500" thickness="4px" />
|
|
<Text color={COLORS.secondaryTextColor}>正在加载主线数据...</Text>
|
|
</VStack>
|
|
</Center>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
// 渲染错误状态
|
|
if (error) {
|
|
return (
|
|
<Box display={display} p={8} bg={COLORS.containerBg} minH="400px">
|
|
<Center h="400px">
|
|
<VStack spacing={4}>
|
|
<Text color="red.500">加载失败: {error}</Text>
|
|
<IconButton
|
|
icon={<RepeatIcon />}
|
|
colorScheme="blue"
|
|
onClick={fetchMainlineData}
|
|
aria-label="重试"
|
|
/>
|
|
</VStack>
|
|
</Center>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
// 渲染空状态
|
|
if (!mainlineData?.mainlines?.length) {
|
|
return (
|
|
<Box display={display} p={8} bg={COLORS.containerBg} minH="400px">
|
|
<Center h="400px">
|
|
<VStack spacing={4}>
|
|
<Icon as={FiZap} boxSize={12} color="gray.400" />
|
|
<Text color={COLORS.secondaryTextColor}>暂无主线数据</Text>
|
|
<Text fontSize="sm" color={COLORS.secondaryTextColor}>
|
|
尝试调整筛选条件
|
|
</Text>
|
|
</VStack>
|
|
</Center>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
const {
|
|
mainlines,
|
|
total_events,
|
|
mainline_count,
|
|
ungrouped_count,
|
|
} = mainlineData;
|
|
|
|
return (
|
|
<Box
|
|
display={display}
|
|
h="100%"
|
|
w="100%"
|
|
bg={COLORS.containerBg}
|
|
overflow="hidden"
|
|
>
|
|
{/* 顶部统计栏 */}
|
|
<Flex
|
|
justify="space-between"
|
|
align="center"
|
|
px={4}
|
|
py={2}
|
|
bg={COLORS.statBarBg}
|
|
borderBottomWidth="1px"
|
|
borderBottomColor={COLORS.cardBorderColor}
|
|
>
|
|
<HStack spacing={4}>
|
|
<HStack spacing={2}>
|
|
<Icon as={FiTrendingUp} color="blue.400" />
|
|
<Text fontWeight="bold" color={COLORS.textColor} fontSize="sm">
|
|
{mainline_count} 条主线
|
|
</Text>
|
|
</HStack>
|
|
<Text fontSize="sm" color={COLORS.secondaryTextColor}>
|
|
共 {total_events} 个事件
|
|
</Text>
|
|
{ungrouped_count > 0 && (
|
|
<Badge colorScheme="orange" fontSize="xs">
|
|
{ungrouped_count} 个未归类
|
|
</Badge>
|
|
)}
|
|
</HStack>
|
|
|
|
<HStack spacing={1}>
|
|
<Tooltip label="全部展开">
|
|
<IconButton
|
|
icon={<ChevronDownIcon />}
|
|
size="sm"
|
|
variant="ghost"
|
|
color={COLORS.secondaryTextColor}
|
|
onClick={() => toggleAll(true)}
|
|
aria-label="全部展开"
|
|
_hover={{ bg: COLORS.headerHoverBg }}
|
|
/>
|
|
</Tooltip>
|
|
<Tooltip label="全部折叠">
|
|
<IconButton
|
|
icon={<ChevronUpIcon />}
|
|
size="sm"
|
|
variant="ghost"
|
|
color={COLORS.secondaryTextColor}
|
|
onClick={() => toggleAll(false)}
|
|
aria-label="全部折叠"
|
|
_hover={{ bg: COLORS.headerHoverBg }}
|
|
/>
|
|
</Tooltip>
|
|
<Tooltip label="刷新">
|
|
<IconButton
|
|
icon={<RepeatIcon />}
|
|
size="sm"
|
|
variant="ghost"
|
|
color={COLORS.secondaryTextColor}
|
|
onClick={fetchMainlineData}
|
|
aria-label="刷新"
|
|
_hover={{ bg: COLORS.headerHoverBg }}
|
|
/>
|
|
</Tooltip>
|
|
</HStack>
|
|
</Flex>
|
|
|
|
{/* 主线卡片横向滚动容器 */}
|
|
<Box
|
|
overflowX="auto"
|
|
overflowY="hidden"
|
|
h="calc(100% - 44px)"
|
|
css={{
|
|
"&::-webkit-scrollbar": { height: "8px" },
|
|
"&::-webkit-scrollbar-track": {
|
|
background: COLORS.scrollbarTrackBg,
|
|
},
|
|
"&::-webkit-scrollbar-thumb": {
|
|
background: COLORS.scrollbarThumbBg,
|
|
borderRadius: "4px",
|
|
},
|
|
"&::-webkit-scrollbar-thumb:hover": {
|
|
background: COLORS.scrollbarThumbHoverBg,
|
|
},
|
|
}}
|
|
>
|
|
<HStack
|
|
spacing={3}
|
|
p={3}
|
|
align="stretch"
|
|
h="100%"
|
|
minW="max-content"
|
|
>
|
|
{mainlines.map((mainline) => (
|
|
<MainlineCard
|
|
key={mainline.lv2_id || "ungrouped"}
|
|
mainline={mainline}
|
|
colorScheme={getColorScheme(mainline.lv2_name)}
|
|
isExpanded={expandedGroups[mainline.lv2_id]}
|
|
onToggle={() => toggleGroup(mainline.lv2_id)}
|
|
selectedEvent={selectedEvent}
|
|
onEventSelect={onEventSelect}
|
|
eventFollowStatus={eventFollowStatus}
|
|
onToggleFollow={onToggleFollow}
|
|
borderColor={borderColor}
|
|
/>
|
|
))}
|
|
</HStack>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|
|
);
|
|
|
|
MainlineTimelineViewComponent.displayName = "MainlineTimelineView";
|
|
|
|
const MainlineTimelineView = React.memo(MainlineTimelineViewComponent);
|
|
|
|
export default MainlineTimelineView;
|