更新Company页面的UI为FUI风格
This commit is contained in:
@@ -0,0 +1,537 @@
|
||||
// src/views/Community/components/DynamicNews/layouts/MainlineTimelineView.js
|
||||
// 主线时间轴布局组件 - 按 lv2 概念分组展示事件
|
||||
|
||||
import React, {
|
||||
useState,
|
||||
useEffect,
|
||||
forwardRef,
|
||||
useImperativeHandle,
|
||||
useCallback,
|
||||
} from "react";
|
||||
import {
|
||||
Box,
|
||||
VStack,
|
||||
HStack,
|
||||
Text,
|
||||
Badge,
|
||||
Flex,
|
||||
Icon,
|
||||
Collapse,
|
||||
Spinner,
|
||||
Center,
|
||||
IconButton,
|
||||
useColorModeValue,
|
||||
Tooltip,
|
||||
Grid,
|
||||
} from "@chakra-ui/react";
|
||||
import {
|
||||
ChevronDownIcon,
|
||||
ChevronRightIcon,
|
||||
RepeatIcon,
|
||||
TimeIcon,
|
||||
} from "@chakra-ui/icons";
|
||||
import { FiTrendingUp, FiClock, FiZap } from "react-icons/fi";
|
||||
import DynamicNewsEventCard from "../../EventCard/DynamicNewsEventCard";
|
||||
import { getApiBase } from "@utils/apiConfig";
|
||||
|
||||
/**
|
||||
* 主线时间轴布局组件
|
||||
*
|
||||
* 功能：
|
||||
* 1. 调用 /api/events/mainline 获取预分组数据
|
||||
* 2. 按 lv2 概念分组展示，时间轴样式
|
||||
* 3. 不使用无限滚动，一次性加载全部数据
|
||||
*/
|
||||
const MainlineTimelineViewComponent = forwardRef(
|
||||
(
|
||||
{
|
||||
display = "block",
|
||||
filters = {},
|
||||
selectedEvent,
|
||||
onEventSelect,
|
||||
eventFollowStatus = {},
|
||||
onToggleFollow,
|
||||
borderColor,
|
||||
columnsPerRow = 3,
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
// 状态
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
const [mainlineData, setMainlineData] = useState(null);
|
||||
const [expandedGroups, setExpandedGroups] = useState({});
|
||||
|
||||
// 主题颜色
|
||||
const bgColor = useColorModeValue("white", "gray.800");
|
||||
const headerBg = useColorModeValue("gray.50", "gray.700");
|
||||
const headerHoverBg = useColorModeValue("gray.100", "gray.600");
|
||||
const textColor = useColorModeValue("gray.700", "gray.200");
|
||||
const secondaryTextColor = useColorModeValue("gray.500", "gray.400");
|
||||
const timelineBorderColor = useColorModeValue("gray.200", "gray.600");
|
||||
const timelineLineColor = useColorModeValue("blue.200", "blue.600");
|
||||
const scrollbarTrackBg = useColorModeValue("#f1f1f1", "#2D3748");
|
||||
const scrollbarThumbBg = useColorModeValue("#888", "#4A5568");
|
||||
const scrollbarThumbHoverBg = useColorModeValue("#555", "#718096");
|
||||
|
||||
// 根据主线类型获取配色
|
||||
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) {
|
||||
setMainlineData(result.data);
|
||||
|
||||
// 初始化展开状态（默认展开前5个）
|
||||
const initialExpanded = {};
|
||||
result.data.mainlines?.slice(0, 5).forEach((mainline) => {
|
||||
initialExpanded[mainline.lv2_id] = true;
|
||||
});
|
||||
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}>
|
||||
<Center h="400px">
|
||||
<VStack spacing={4}>
|
||||
<Spinner size="xl" color="blue.500" thickness="4px" />
|
||||
<Text color={secondaryTextColor}>正在加载主线数据...</Text>
|
||||
</VStack>
|
||||
</Center>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
// 渲染错误状态
|
||||
if (error) {
|
||||
return (
|
||||
<Box display={display} p={8}>
|
||||
<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}>
|
||||
<Center h="400px">
|
||||
<VStack spacing={4}>
|
||||
<Icon as={FiZap} boxSize={12} color="gray.400" />
|
||||
<Text color={secondaryTextColor}>暂无主线数据</Text>
|
||||
<Text fontSize="sm" color={secondaryTextColor}>
|
||||
尝试调整筛选条件
|
||||
</Text>
|
||||
</VStack>
|
||||
</Center>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
const {
|
||||
mainlines,
|
||||
total_events,
|
||||
mainline_count,
|
||||
ungrouped_count,
|
||||
} = mainlineData;
|
||||
|
||||
return (
|
||||
<Box
|
||||
display={display}
|
||||
overflowY="auto"
|
||||
minH="600px"
|
||||
maxH="800px"
|
||||
w="100%"
|
||||
bg={bgColor}
|
||||
borderRadius="md"
|
||||
css={{
|
||||
"&::-webkit-scrollbar": { width: "6px" },
|
||||
"&::-webkit-scrollbar-track": {
|
||||
background: scrollbarTrackBg,
|
||||
borderRadius: "10px",
|
||||
},
|
||||
"&::-webkit-scrollbar-thumb": {
|
||||
background: scrollbarThumbBg,
|
||||
borderRadius: "10px",
|
||||
},
|
||||
"&::-webkit-scrollbar-thumb:hover": {
|
||||
background: scrollbarThumbHoverBg,
|
||||
},
|
||||
scrollBehavior: "smooth",
|
||||
}}
|
||||
>
|
||||
{/* 顶部统计信息 */}
|
||||
<Flex
|
||||
justify="space-between"
|
||||
align="center"
|
||||
px={4}
|
||||
py={3}
|
||||
borderBottomWidth="1px"
|
||||
borderColor={timelineBorderColor}
|
||||
position="sticky"
|
||||
top={0}
|
||||
bg={bgColor}
|
||||
zIndex={10}
|
||||
>
|
||||
<HStack spacing={4}>
|
||||
<HStack spacing={2}>
|
||||
<Icon as={FiTrendingUp} color="blue.500" />
|
||||
<Text fontWeight="semibold" color={textColor}>
|
||||
{mainline_count} 条主线
|
||||
</Text>
|
||||
</HStack>
|
||||
<HStack spacing={2}>
|
||||
<Icon as={FiClock} color="green.500" />
|
||||
<Text fontSize="sm" color={secondaryTextColor}>
|
||||
{total_events} 个事件
|
||||
</Text>
|
||||
</HStack>
|
||||
{ungrouped_count > 0 && (
|
||||
<Text fontSize="sm" color="orange.500">
|
||||
({ungrouped_count} 个未归类)
|
||||
</Text>
|
||||
)}
|
||||
</HStack>
|
||||
|
||||
<HStack spacing={2}>
|
||||
<Tooltip label="全部展开">
|
||||
<IconButton
|
||||
icon={<ChevronDownIcon />}
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => toggleAll(true)}
|
||||
aria-label="全部展开"
|
||||
/>
|
||||
</Tooltip>
|
||||
<Tooltip label="全部折叠">
|
||||
<IconButton
|
||||
icon={<ChevronRightIcon />}
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => toggleAll(false)}
|
||||
aria-label="全部折叠"
|
||||
/>
|
||||
</Tooltip>
|
||||
<Tooltip label="刷新">
|
||||
<IconButton
|
||||
icon={<RepeatIcon />}
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={fetchMainlineData}
|
||||
aria-label="刷新"
|
||||
/>
|
||||
</Tooltip>
|
||||
</HStack>
|
||||
</Flex>
|
||||
|
||||
{/* 主线列表 - 时间轴样式 */}
|
||||
<Box position="relative" px={4} py={4}>
|
||||
{/* 时间轴垂直线 */}
|
||||
<Box
|
||||
position="absolute"
|
||||
left="28px"
|
||||
top="0"
|
||||
bottom="0"
|
||||
w="2px"
|
||||
bg={timelineLineColor}
|
||||
opacity={0.5}
|
||||
/>
|
||||
|
||||
<VStack spacing={4} align="stretch">
|
||||
{mainlines.map((mainline, index) => {
|
||||
const colorScheme = getColorScheme(mainline.lv2_name);
|
||||
const isExpanded = expandedGroups[mainline.lv2_id];
|
||||
|
||||
return (
|
||||
<Box key={mainline.lv2_id} position="relative" pl={10}>
|
||||
{/* 时间轴圆点 */}
|
||||
<Box
|
||||
position="absolute"
|
||||
left="22px"
|
||||
top="16px"
|
||||
w="14px"
|
||||
h="14px"
|
||||
borderRadius="full"
|
||||
bg={`${colorScheme}.500`}
|
||||
border="3px solid"
|
||||
borderColor={bgColor}
|
||||
boxShadow="0 0 0 2px"
|
||||
sx={{ boxShadowColor: `${colorScheme}.200` }}
|
||||
zIndex={2}
|
||||
/>
|
||||
|
||||
{/* 分组头部 */}
|
||||
<Flex
|
||||
align="center"
|
||||
justify="space-between"
|
||||
px={4}
|
||||
py={3}
|
||||
bg={headerBg}
|
||||
borderRadius="lg"
|
||||
borderWidth="1px"
|
||||
borderColor={timelineBorderColor}
|
||||
cursor="pointer"
|
||||
_hover={{ bg: headerHoverBg }}
|
||||
onClick={() => toggleGroup(mainline.lv2_id)}
|
||||
transition="all 0.2s"
|
||||
boxShadow="sm"
|
||||
>
|
||||
<HStack spacing={3}>
|
||||
<Icon
|
||||
as={isExpanded ? ChevronDownIcon : ChevronRightIcon}
|
||||
boxSize={5}
|
||||
color={textColor}
|
||||
transition="transform 0.2s"
|
||||
/>
|
||||
<VStack align="start" spacing={0}>
|
||||
<HStack spacing={2}>
|
||||
<Text
|
||||
fontWeight="bold"
|
||||
fontSize="md"
|
||||
color={textColor}
|
||||
>
|
||||
{mainline.lv2_name}
|
||||
</Text>
|
||||
<Badge
|
||||
colorScheme={colorScheme}
|
||||
fontSize="xs"
|
||||
borderRadius="full"
|
||||
px={2}
|
||||
>
|
||||
{mainline.event_count} 条
|
||||
</Badge>
|
||||
</HStack>
|
||||
<Text fontSize="xs" color={secondaryTextColor}>
|
||||
{mainline.lv1_name}
|
||||
</Text>
|
||||
</VStack>
|
||||
</HStack>
|
||||
|
||||
<HStack spacing={2}>
|
||||
<Icon
|
||||
as={TimeIcon}
|
||||
color={secondaryTextColor}
|
||||
boxSize={3}
|
||||
/>
|
||||
<Text fontSize="xs" color={secondaryTextColor}>
|
||||
#{index + 1}
|
||||
</Text>
|
||||
</HStack>
|
||||
</Flex>
|
||||
|
||||
{/* 分组内容 */}
|
||||
<Collapse in={isExpanded} animateOpacity>
|
||||
<Box
|
||||
mt={3}
|
||||
pl={2}
|
||||
borderLeftWidth="2px"
|
||||
borderLeftColor={`${colorScheme}.200`}
|
||||
borderLeftStyle="dashed"
|
||||
>
|
||||
<Grid
|
||||
templateColumns={`repeat(${columnsPerRow}, 1fr)`}
|
||||
gap={3}
|
||||
w="100%"
|
||||
>
|
||||
{mainline.events.map((event, eventIndex) => (
|
||||
<Box key={event.id} w="100%" minW={0}>
|
||||
<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}
|
||||
/>
|
||||
</Box>
|
||||
))}
|
||||
</Grid>
|
||||
</Box>
|
||||
</Collapse>
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
</VStack>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
MainlineTimelineViewComponent.displayName = "MainlineTimelineView";
|
||||
|
||||
const MainlineTimelineView = React.memo(MainlineTimelineViewComponent);
|
||||
|
||||
export default MainlineTimelineView;
|
||||
Reference in New Issue
Block a user