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

更新Company页面的UI为FUI风格

Browse Source
This commit is contained in:
zzlgreat
2025-12-22 10:21:49 +08:00
parent 2d48e08e43
commit 23dd573663
1 changed files with 295 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

511
src/views/Community/components/DynamicNews/layouts/MainlineTimelineView.js
View File

@@ -7,6 +7,7 @@ import React, {
forwardRef, forwardRef,
useImperativeHandle, useImperativeHandle,
useCallback, useCallback,
useMemo,
} from "react"; } from "react";
import { import {
Box, Box,
@@ -16,12 +17,11 @@ import {
Badge, Badge,
Flex, Flex,
Icon, Icon,
Collapse,
Spinner, Spinner,
Center, Center,
IconButton, IconButton,
useColorModeValue,
Tooltip, Tooltip,
Button,
} from "@chakra-ui/react"; } from "@chakra-ui/react";
import { import {
ChevronDownIcon, ChevronDownIcon,
@@ -32,14 +32,267 @@ import { FiTrendingUp, FiZap } from "react-icons/fi";
import DynamicNewsEventCard from "../../EventCard/DynamicNewsEventCard"; import DynamicNewsEventCard from "../../EventCard/DynamicNewsEventCard";
import { getApiBase } from "@utils/apiConfig"; 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";
/** /**
* 主线时间轴布局组件 * 主线时间轴布局组件
*
* 功能：
* 1. 调用 /api/events/mainline 获取预分组数据
* 2. 按 lv2 概念分组展示，横向滚动布局
* 3. 按事件数量从多到少排序
* 4. 深色背景风格，与列表模式统一
*/ */
const MainlineTimelineViewComponent = forwardRef( const MainlineTimelineViewComponent = forwardRef(
( (
@@ -60,20 +313,6 @@ const MainlineTimelineViewComponent = forwardRef(
const [mainlineData, setMainlineData] = useState(null); const [mainlineData, setMainlineData] = useState(null);
const [expandedGroups, setExpandedGroups] = useState({}); const [expandedGroups, setExpandedGroups] = useState({});
// 深色主题颜色
const containerBg = useColorModeValue("gray.50", "#1a1d24");
const cardBg = useColorModeValue("white", "#252a34");
const cardBorderColor = useColorModeValue("gray.200", "#3a3f4b");
const headerHoverBg = useColorModeValue("gray.100", "#2d323e");
const textColor = useColorModeValue("gray.800", "#e2e8f0");
const secondaryTextColor = useColorModeValue("gray.600", "#a0aec0");
const timelineLineColor = useColorModeValue("blue.300", "#4299e1");
const timelineDotBg = useColorModeValue("blue.500", "#63b3ed");
const scrollbarTrackBg = useColorModeValue("#e2e8f0", "#1a1d24");
const scrollbarThumbBg = useColorModeValue("#a0aec0", "#4a5568");
const scrollbarThumbHoverBg = useColorModeValue("#718096", "#718096");
const statBarBg = useColorModeValue("gray.100", "#252a34");
// 根据主线类型获取配色 // 根据主线类型获取配色
const getColorScheme = useCallback((lv2Name) => { const getColorScheme = useCallback((lv2Name) => {
if (!lv2Name) return "gray"; if (!lv2Name) return "gray";
@@ -245,11 +484,11 @@ const MainlineTimelineViewComponent = forwardRef(
// 渲染加载状态 // 渲染加载状态
if (loading) { if (loading) {
return ( return (
<Box display={display} p={8} bg={containerBg} minH="400px"> <Box display={display} p={8} bg={COLORS.containerBg} minH="400px">
<Center h="400px"> <Center h="400px">
<VStack spacing={4}> <VStack spacing={4}>
<Spinner size="xl" color="blue.500" thickness="4px" /> <Spinner size="xl" color="blue.500" thickness="4px" />
<Text color={secondaryTextColor}>正在加载主线数据...</Text> <Text color={COLORS.secondaryTextColor}>正在加载主线数据...</Text>
</VStack> </VStack>
</Center> </Center>
</Box> </Box>
@@ -259,7 +498,7 @@ const MainlineTimelineViewComponent = forwardRef(
// 渲染错误状态 // 渲染错误状态
if (error) { if (error) {
return ( return (
<Box display={display} p={8} bg={containerBg} minH="400px"> <Box display={display} p={8} bg={COLORS.containerBg} minH="400px">
<Center h="400px"> <Center h="400px">
<VStack spacing={4}> <VStack spacing={4}>
<Text color="red.500">加载失败: {error}</Text> <Text color="red.500">加载失败: {error}</Text>
@@ -278,12 +517,12 @@ const MainlineTimelineViewComponent = forwardRef(
// 渲染空状态 // 渲染空状态
if (!mainlineData?.mainlines?.length) { if (!mainlineData?.mainlines?.length) {
return ( return (
<Box display={display} p={8} bg={containerBg} minH="400px"> <Box display={display} p={8} bg={COLORS.containerBg} minH="400px">
<Center h="400px"> <Center h="400px">
<VStack spacing={4}> <VStack spacing={4}>
<Icon as={FiZap} boxSize={12} color="gray.400" /> <Icon as={FiZap} boxSize={12} color="gray.400" />
<Text color={secondaryTextColor}>暂无主线数据</Text> <Text color={COLORS.secondaryTextColor}>暂无主线数据</Text>
<Text fontSize="sm" color={secondaryTextColor}> <Text fontSize="sm" color={COLORS.secondaryTextColor}>
尝试调整筛选条件 尝试调整筛选条件
</Text> </Text>
</VStack> </VStack>
@@ -304,7 +543,7 @@ const MainlineTimelineViewComponent = forwardRef(
display={display} display={display}
h="100%" h="100%"
w="100%" w="100%"
bg={containerBg} bg={COLORS.containerBg}
overflow="hidden" overflow="hidden"
> >
{/* 顶部统计栏 */} {/* 顶部统计栏 */}
@@ -313,18 +552,18 @@ const MainlineTimelineViewComponent = forwardRef(
align="center" align="center"
px={4} px={4}
py={2} py={2}
bg={statBarBg} bg={COLORS.statBarBg}
borderBottomWidth="1px" borderBottomWidth="1px"
borderBottomColor={cardBorderColor} borderBottomColor={COLORS.cardBorderColor}
> >
<HStack spacing={4}> <HStack spacing={4}>
<HStack spacing={2}> <HStack spacing={2}>
<Icon as={FiTrendingUp} color="blue.400" /> <Icon as={FiTrendingUp} color="blue.400" />
<Text fontWeight="bold" color={textColor} fontSize="sm"> <Text fontWeight="bold" color={COLORS.textColor} fontSize="sm">
{mainline_count} 条主线 {mainline_count} 条主线
</Text> </Text>
</HStack> </HStack>
<Text fontSize="sm" color={secondaryTextColor}> <Text fontSize="sm" color={COLORS.secondaryTextColor}>
共 {total_events} 个事件 共 {total_events} 个事件
</Text> </Text>
{ungrouped_count > 0 && ( {ungrouped_count > 0 && (
@@ -340,9 +579,10 @@ const MainlineTimelineViewComponent = forwardRef(
icon={<ChevronDownIcon />} icon={<ChevronDownIcon />}
size="sm" size="sm"
variant="ghost" variant="ghost"
colorScheme="gray" color={COLORS.secondaryTextColor}
onClick={() => toggleAll(true)} onClick={() => toggleAll(true)}
aria-label="全部展开" aria-label="全部展开"
_hover={{ bg: COLORS.headerHoverBg }}
/> />
</Tooltip> </Tooltip>
<Tooltip label="全部折叠"> <Tooltip label="全部折叠">
@@ -350,9 +590,10 @@ const MainlineTimelineViewComponent = forwardRef(
icon={<ChevronUpIcon />} icon={<ChevronUpIcon />}
size="sm" size="sm"
variant="ghost" variant="ghost"
colorScheme="gray" color={COLORS.secondaryTextColor}
onClick={() => toggleAll(false)} onClick={() => toggleAll(false)}
aria-label="全部折叠" aria-label="全部折叠"
_hover={{ bg: COLORS.headerHoverBg }}
/> />
</Tooltip> </Tooltip>
<Tooltip label="刷新"> <Tooltip label="刷新">
@@ -360,9 +601,10 @@ const MainlineTimelineViewComponent = forwardRef(
icon={<RepeatIcon />} icon={<RepeatIcon />}
size="sm" size="sm"
variant="ghost" variant="ghost"
colorScheme="gray" color={COLORS.secondaryTextColor}
onClick={fetchMainlineData} onClick={fetchMainlineData}
aria-label="刷新" aria-label="刷新"
_hover={{ bg: COLORS.headerHoverBg }}
/> />
</Tooltip> </Tooltip>
</HStack> </HStack>
@@ -376,14 +618,14 @@ const MainlineTimelineViewComponent = forwardRef(
css={{ css={{
"&::-webkit-scrollbar": { height: "8px" }, "&::-webkit-scrollbar": { height: "8px" },
"&::-webkit-scrollbar-track": { "&::-webkit-scrollbar-track": {
background: scrollbarTrackBg, background: COLORS.scrollbarTrackBg,
}, },
"&::-webkit-scrollbar-thumb": { "&::-webkit-scrollbar-thumb": {
background: scrollbarThumbBg, background: COLORS.scrollbarThumbBg,
borderRadius: "4px", borderRadius: "4px",
}, },
"&::-webkit-scrollbar-thumb:hover": { "&::-webkit-scrollbar-thumb:hover": {
background: scrollbarThumbHoverBg, background: COLORS.scrollbarThumbHoverBg,
}, },
}} }}
> >
@@ -394,191 +636,20 @@ const MainlineTimelineViewComponent = forwardRef(
h="100%" h="100%"
minW="max-content" minW="max-content"
> >
{mainlines.map((mainline) => { {mainlines.map((mainline) => (
const colorScheme = getColorScheme(mainline.lv2_name); <MainlineCard
const isExpanded = expandedGroups[mainline.lv2_id];
return (
<Box
key={mainline.lv2_id || "ungrouped"} key={mainline.lv2_id || "ungrouped"}
bg={cardBg} mainline={mainline}
borderRadius="lg" colorScheme={getColorScheme(mainline.lv2_name)}
borderWidth="1px" isExpanded={expandedGroups[mainline.lv2_id]}
borderColor={cardBorderColor} onToggle={() => toggleGroup(mainline.lv2_id)}
borderTopWidth="3px" selectedEvent={selectedEvent}
borderTopColor={`${colorScheme}.500`} onEventSelect={onEventSelect}
minW={isExpanded ? "320px" : "200px"} eventFollowStatus={eventFollowStatus}
maxW={isExpanded ? "380px" : "240px"} onToggleFollow={onToggleFollow}
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={() => toggleGroup(mainline.lv2_id)}
_hover={{ bg: headerHoverBg }}
transition="all 0.15s"
borderBottomWidth="1px"
borderBottomColor={cardBorderColor}
flexShrink={0}
>
<VStack align="start" spacing={0} flex={1} minW={0}>
<HStack spacing={2} w="100%">
<Text
fontWeight="bold"
fontSize="sm"
color={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={secondaryTextColor} noOfLines={1}>
{mainline.lv1_name}
</Text>
)}
</VStack>
<Icon
as={isExpanded ? ChevronUpIcon : ChevronDownIcon}
boxSize={4}
color={secondaryTextColor}
ml={2}
flexShrink={0}
/>
</Flex>
{/* 事件列表 - 可滚动到底 */}
<Collapse in={isExpanded} animateOpacity style={{ flex: 1, overflow: 'hidden' }}>
<Box
px={3}
py={2}
h="100%"
overflowY="auto"
position="relative"
css={{
"&::-webkit-scrollbar": { width: "4px" },
"&::-webkit-scrollbar-track": {
background: scrollbarTrackBg,
},
"&::-webkit-scrollbar-thumb": {
background: scrollbarThumbBg,
borderRadius: "2px",
},
}}
>
{/* 时间轴线 */}
<Box
position="absolute"
left="11px"
top="8px"
bottom="8px"
w="2px"
bg={timelineLineColor}
opacity={0.3}
borderRadius="full"
/>
{/* 事件列表 */}
<VStack spacing={2} align="stretch" pl={5}>
{mainline.events.map((event, eventIndex) => (
<Box key={event.id} position="relative">
{/* 时间轴圆点 */}
<Box
position="absolute"
left="-19px"
top="12px"
w="8px"
h="8px"
borderRadius="full"
bg={timelineDotBg}
border="2px solid"
borderColor={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} borderColor={borderColor}
compact
/> />
</Box>
))} ))}
</VStack>
</Box>
</Collapse>
{/* 折叠时显示简要信息 */}
{!isExpanded && (
<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={secondaryTextColor}
noOfLines={1}
cursor="pointer"
_hover={{ color: textColor }}
onClick={(e) => {
e.stopPropagation();
onEventSelect?.(event);
}}
>
• {event.title}
</Text>
))}
{mainline.events.length > 3 && (
<Text fontSize="xs" color={secondaryTextColor}>
... 还有 {mainline.events.length - 3} 条
</Text>
)}
</VStack>
</Box>
)}
</Box>
);
})}
</HStack> </HStack>
</Box> </Box>
</Box> </Box>