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 08:01:41 +08:00
parent ee734e719e
commit 46c7649bf0
2 changed files with 179 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app.py
View File

@@ -11036,7 +11036,6 @@ def get_events_by_mainline():
# 获取请求参数 # 获取请求参数
recent_days = request.args.get('recent_days', 7, type=int) recent_days = request.args.get('recent_days', 7, type=int)
importance = request.args.get('importance', 'all') importance = request.args.get('importance', 'all')
limit_per_mainline = request.args.get('limit', 20, type=int)
# 计算日期范围 # 计算日期范围
since_date = datetime.now() - timedelta(days=recent_days) since_date = datetime.now() - timedelta(days=recent_days)
@@ -11106,8 +11105,8 @@ def get_events_by_mainline():
# 按时间倒序 # 按时间倒序
query = query.order_by(Event.created_at.desc()) query = query.order_by(Event.created_at.desc())
# 获取事件（限制总数防止性能问题） # 获取事件（提高限制以支持主线模式显示更多数据）
events = query.limit(500).all() events = query.limit(2000).all()
app.logger.info(f'[mainline] 查询到 {len(events)} 个事件') app.logger.info(f'[mainline] 查询到 {len(events)} 个事件')
@@ -11220,12 +11219,12 @@ def get_events_by_mainline():
# ==================== 5. 整理返回数据 ==================== # ==================== 5. 整理返回数据 ====================
mainlines = [] mainlines = []
for lv2_id, group in mainline_groups.items(): for lv2_id, group in mainline_groups.items():
# 按时间倒序，限制每组数量 # 按时间倒序排列（不限制数量）
group['events'] = sorted( group['events'] = sorted(
group['events'], group['events'],
key=lambda x: x['created_at'] or '', key=lambda x: x['created_at'] or '',
reverse=True reverse=True
)[:limit_per_mainline] )
group['event_count'] = len(group['events']) group['event_count'] = len(group['events'])
mainlines.append(group) mainlines.append(group)

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

@@ -1,5 +1,5 @@
// src/views/Community/components/DynamicNews/layouts/MainlineTimelineView.js // src/views/Community/components/DynamicNews/layouts/MainlineTimelineView.js
// 主线时间轴布局组件 - 按 lv2 概念分组展示事件（卡片式布局） // 主线时间轴布局组件 - 按 lv2 概念分组展示事件（横向卡片布局）
import React, { import React, {
useState, useState,
@@ -22,11 +22,11 @@ import {
IconButton, IconButton,
useColorModeValue, useColorModeValue,
Tooltip, Tooltip,
Grid, SimpleGrid,
} from "@chakra-ui/react"; } from "@chakra-ui/react";
import { import {
ChevronDownIcon, ChevronDownIcon,
ChevronRightIcon, ChevronUpIcon,
RepeatIcon, RepeatIcon,
} from "@chakra-ui/icons"; } from "@chakra-ui/icons";
import { FiTrendingUp, FiZap } from "react-icons/fi"; import { FiTrendingUp, FiZap } from "react-icons/fi";
@@ -38,8 +38,9 @@ import { getApiBase } from "@utils/apiConfig";
* *
* 功能： * 功能：
* 1. 调用 /api/events/mainline 获取预分组数据 * 1. 调用 /api/events/mainline 获取预分组数据
* 2. 按 lv2 概念分组展示，卡片式布局 + 内部时间轴 * 2. 按 lv2 概念分组展示，横向卡片布局
* 3. 按事件数量从多到少排序 * 3. 按事件数量从多到少排序
* 4. 深色背景风格，与列表模式统一
*/ */
const MainlineTimelineViewComponent = forwardRef( const MainlineTimelineViewComponent = forwardRef(
( (
@@ -51,7 +52,6 @@ const MainlineTimelineViewComponent = forwardRef(
eventFollowStatus = {}, eventFollowStatus = {},
onToggleFollow, onToggleFollow,
borderColor, borderColor,
columnsPerRow = 3,
}, },
ref ref
) => { ) => {
@@ -61,18 +61,20 @@ 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.100", "gray.900");
const cardBg = useColorModeValue("white", "gray.800"); const cardBg = useColorModeValue("white", "gray.800");
const cardBorderColor = useColorModeValue("gray.200", "gray.600"); const cardBorderColor = useColorModeValue("gray.200", "gray.700");
const headerBg = useColorModeValue("gray.50", "gray.750"); const headerBg = useColorModeValue("gray.50", "gray.750");
const headerHoverBg = useColorModeValue("gray.100", "gray.700"); const headerHoverBg = useColorModeValue("gray.100", "gray.700");
const textColor = useColorModeValue("gray.800", "gray.100"); const textColor = useColorModeValue("gray.800", "gray.100");
const secondaryTextColor = useColorModeValue("gray.600", "gray.400"); const secondaryTextColor = useColorModeValue("gray.600", "gray.400");
const timelineLineColor = useColorModeValue("blue.300", "blue.500"); const timelineLineColor = useColorModeValue("blue.300", "blue.500");
const timelineDotBg = useColorModeValue("blue.500", "blue.400"); const timelineDotBg = useColorModeValue("blue.500", "blue.400");
const scrollbarTrackBg = useColorModeValue("#f1f1f1", "#2D3748"); const scrollbarTrackBg = useColorModeValue("#e2e8f0", "#1a202c");
const scrollbarThumbBg = useColorModeValue("#888", "#4A5568"); const scrollbarThumbBg = useColorModeValue("#a0aec0", "#4a5568");
const scrollbarThumbHoverBg = useColorModeValue("#555", "#718096"); const scrollbarThumbHoverBg = useColorModeValue("#718096", "#718096");
const statBarBg = useColorModeValue("gray.200", "gray.800");
// 根据主线类型获取配色 // 根据主线类型获取配色
const getColorScheme = useCallback((lv2Name) => { const getColorScheme = useCallback((lv2Name) => {
@@ -189,10 +191,10 @@ const MainlineTimelineViewComponent = forwardRef(
mainlines: sortedMainlines, mainlines: sortedMainlines,
}); });
// 初始化展开状态（默认展开前5个） // 初始化展开状态（默认全部折叠，方便一目了然对比）
const initialExpanded = {}; const initialExpanded = {};
sortedMainlines.slice(0, 5).forEach((mainline) => { sortedMainlines.forEach((mainline) => {
initialExpanded[mainline.lv2_id] = true; initialExpanded[mainline.lv2_id] = false;
}); });
setExpandedGroups(initialExpanded); setExpandedGroups(initialExpanded);
} else { } else {
@@ -245,7 +247,7 @@ const MainlineTimelineViewComponent = forwardRef(
// 渲染加载状态 // 渲染加载状态
if (loading) { if (loading) {
return ( return (
<Box display={display} p={8}> <Box display={display} p={8} bg={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" />
@@ -259,7 +261,7 @@ const MainlineTimelineViewComponent = forwardRef(
// 渲染错误状态 // 渲染错误状态
if (error) { if (error) {
return ( return (
<Box display={display} p={8}> <Box display={display} p={8} bg={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,7 +280,7 @@ const MainlineTimelineViewComponent = forwardRef(
// 渲染空状态 // 渲染空状态
if (!mainlineData?.mainlines?.length) { if (!mainlineData?.mainlines?.length) {
return ( return (
<Box display={display} p={8}> <Box display={display} p={8} bg={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" />
@@ -305,17 +307,15 @@ const MainlineTimelineViewComponent = forwardRef(
overflowY="auto" overflowY="auto"
h="100%" h="100%"
w="100%" w="100%"
px={2} bg={containerBg}
py={2}
css={{ css={{
"&::-webkit-scrollbar": { width: "6px" }, "&::-webkit-scrollbar": { width: "8px" },
"&::-webkit-scrollbar-track": { "&::-webkit-scrollbar-track": {
background: scrollbarTrackBg, background: scrollbarTrackBg,
borderRadius: "10px",
}, },
"&::-webkit-scrollbar-thumb": { "&::-webkit-scrollbar-thumb": {
background: scrollbarThumbBg, background: scrollbarThumbBg,
borderRadius: "10px", borderRadius: "4px",
}, },
"&::-webkit-scrollbar-thumb:hover": { "&::-webkit-scrollbar-thumb:hover": {
background: scrollbarThumbHoverBg, background: scrollbarThumbHoverBg,
@@ -323,32 +323,33 @@ const MainlineTimelineViewComponent = forwardRef(
scrollBehavior: "smooth", scrollBehavior: "smooth",
}} }}
> >
{/* 顶部统计信息 */} {/* 顶部统计栏 */}
<Flex <Flex
justify="space-between" justify="space-between"
align="center" align="center"
px={3} px={4}
py={2} py={2}
mb={3} bg={statBarBg}
bg={headerBg} borderBottomWidth="1px"
borderRadius="lg" borderBottomColor={cardBorderColor}
borderWidth="1px" position="sticky"
borderColor={cardBorderColor} top={0}
zIndex={10}
> >
<HStack spacing={4}> <HStack spacing={4}>
<HStack spacing={2}> <HStack spacing={2}>
<Icon as={FiTrendingUp} color="blue.500" /> <Icon as={FiTrendingUp} color="blue.400" />
<Text fontWeight="semibold" color={textColor} fontSize="sm"> <Text fontWeight="bold" color={textColor} fontSize="sm">
{mainline_count} 条主线 {mainline_count} 条主线
</Text> </Text>
</HStack> </HStack>
<Text fontSize="sm" color={secondaryTextColor}> <Text fontSize="sm" color={secondaryTextColor}>
{total_events} 个事件 共 {total_events} 个事件
</Text> </Text>
{ungrouped_count > 0 && ( {ungrouped_count > 0 && (
<Text fontSize="xs" color="orange.500"> <Badge colorScheme="orange" fontSize="xs">
({ungrouped_count} 个未归类) {ungrouped_count} 个未归类
</Text> </Badge>
)} )}
</HStack> </HStack>
@@ -356,17 +357,19 @@ const MainlineTimelineViewComponent = forwardRef(
<Tooltip label="全部展开"> <Tooltip label="全部展开">
<IconButton <IconButton
icon={<ChevronDownIcon />} icon={<ChevronDownIcon />}
size="xs" size="sm"
variant="ghost" variant="ghost"
colorScheme="gray"
onClick={() => toggleAll(true)} onClick={() => toggleAll(true)}
aria-label="全部展开" aria-label="全部展开"
/> />
</Tooltip> </Tooltip>
<Tooltip label="全部折叠"> <Tooltip label="全部折叠">
<IconButton <IconButton
icon={<ChevronRightIcon />} icon={<ChevronUpIcon />}
size="xs" size="sm"
variant="ghost" variant="ghost"
colorScheme="gray"
onClick={() => toggleAll(false)} onClick={() => toggleAll(false)}
aria-label="全部折叠" aria-label="全部折叠"
/> />
@@ -374,8 +377,9 @@ const MainlineTimelineViewComponent = forwardRef(
<Tooltip label="刷新"> <Tooltip label="刷新">
<IconButton <IconButton
icon={<RepeatIcon />} icon={<RepeatIcon />}
size="xs" size="sm"
variant="ghost" variant="ghost"
colorScheme="gray"
onClick={fetchMainlineData} onClick={fetchMainlineData}
aria-label="刷新" aria-label="刷新"
/> />
@@ -383,57 +387,49 @@ const MainlineTimelineViewComponent = forwardRef(
</HStack> </HStack>
</Flex> </Flex>
{/* 主线卡片列表 */} {/* 主线卡片网格 - 横向布局 */}
<VStack spacing={3} align="stretch"> <Box p={3}>
{mainlines.map((mainline) => { <SimpleGrid columns={{ base: 1, md: 2, lg: 3, xl: 4 }} spacing={3}>
const colorScheme = getColorScheme(mainline.lv2_name); {mainlines.map((mainline) => {
const isExpanded = expandedGroups[mainline.lv2_id]; const colorScheme = getColorScheme(mainline.lv2_name);
const isExpanded = expandedGroups[mainline.lv2_id];
return ( return (
<Box <Box
key={mainline.lv2_id || "ungrouped"} key={mainline.lv2_id || "ungrouped"}
bg={cardBg} bg={cardBg}
borderRadius="lg" borderRadius="lg"
borderWidth="1px" borderWidth="1px"
borderColor={cardBorderColor} borderColor={cardBorderColor}
overflow="hidden" borderLeftWidth="4px"
boxShadow="sm" borderLeftColor={`${colorScheme}.500`}
_hover={{ boxShadow: "md" }} overflow="hidden"
transition="all 0.2s"
>
{/* 卡片头部 - 概念名称 */}
<Flex
align="center"
justify="space-between"
px={4}
py={3}
bg={headerBg}
cursor="pointer"
_hover={{ bg: headerHoverBg }}
onClick={() => toggleGroup(mainline.lv2_id)}
transition="all 0.2s" transition="all 0.2s"
borderBottomWidth={isExpanded ? "1px" : "0"} _hover={{
borderBottomColor={cardBorderColor} borderColor: `${colorScheme}.400`,
transform: "translateY(-1px)",
boxShadow: "lg"
}}
> >
<HStack spacing={3}> {/* 卡片头部 */}
<Icon <Flex
as={isExpanded ? ChevronDownIcon : ChevronRightIcon} align="center"
boxSize={5} justify="space-between"
color={textColor} px={3}
transition="transform 0.2s" py={2}
/> cursor="pointer"
<Box onClick={() => toggleGroup(mainline.lv2_id)}
w="4px" _hover={{ bg: headerHoverBg }}
h="24px" transition="all 0.15s"
bg={`${colorScheme}.500`} >
borderRadius="full" <VStack align="start" spacing={0} flex={1} minW={0}>
/> <HStack spacing={2} w="100%">
<VStack align="start" spacing={0}>
<HStack spacing={2}>
<Text <Text
fontWeight="bold" fontWeight="bold"
fontSize="md" fontSize="sm"
color={textColor} color={textColor}
noOfLines={1}
flex={1}
> >
{mainline.lv2_name || "其他"} {mainline.lv2_name || "其他"}
</Text> </Text>
@@ -442,85 +438,112 @@ const MainlineTimelineViewComponent = forwardRef(
fontSize="xs" fontSize="xs"
borderRadius="full" borderRadius="full"
px={2} px={2}
flexShrink={0}
> >
{mainline.event_count} 条 {mainline.event_count}
</Badge> </Badge>
</HStack> </HStack>
{mainline.lv1_name && ( {mainline.lv1_name && (
<Text fontSize="xs" color={secondaryTextColor}> <Text fontSize="xs" color={secondaryTextColor} noOfLines={1}>
{mainline.lv1_name} {mainline.lv1_name}
</Text> </Text>
)} )}
</VStack> </VStack>
</HStack> <Icon
</Flex> as={isExpanded ? ChevronUpIcon : ChevronDownIcon}
boxSize={4}
{/* 卡片内容 - 时间轴事件列表 */} color={secondaryTextColor}
<Collapse in={isExpanded} animateOpacity> ml={2}
<Box px={4} py={3} position="relative"> flexShrink={0}
{/* 时间轴线 */}
<Box
position="absolute"
left="24px"
top="12px"
bottom="12px"
w="2px"
bg={timelineLineColor}
opacity={0.4}
borderRadius="full"
/> />
</Flex>
{/* 事件列表 */} {/* 展开的事件列表 */}
<VStack spacing={3} align="stretch" pl={8}> <Collapse in={isExpanded} animateOpacity>
{mainline.events.map((event, eventIndex) => ( <Box
<Box key={event.id} position="relative"> px={3}
{/* 时间轴圆点 */} py={2}
<Box borderTopWidth="1px"
position="absolute" borderTopColor={cardBorderColor}
left="-26px" maxH="400px"
top="50%" overflowY="auto"
transform="translateY(-50%)" position="relative"
w="10px" css={{
h="10px" "&::-webkit-scrollbar": { width: "4px" },
borderRadius="full" "&::-webkit-scrollbar-track": {
bg={timelineDotBg} background: scrollbarTrackBg,
border="2px solid" },
borderColor={cardBg} "&::-webkit-scrollbar-thumb": {
zIndex={1} background: scrollbarThumbBg,
/> borderRadius: "2px",
{/* 事件卡片 */} },
<DynamicNewsEventCard }}
event={event} >
index={eventIndex} {/* 时间轴线 */}
isFollowing={ <Box
eventFollowStatus[event.id]?.isFollowing || false position="absolute"
} left="11px"
followerCount={ top="8px"
eventFollowStatus[event.id]?.followerCount || bottom="8px"
event.follower_count || w="2px"
0 bg={timelineLineColor}
} opacity={0.3}
isSelected={selectedEvent?.id === event.id} borderRadius="full"
onEventClick={(clickedEvent) => { />
onEventSelect?.(clickedEvent);
}} {/* 事件列表 */}
onTitleClick={(e) => { <VStack spacing={2} align="stretch" pl={5}>
e.preventDefault(); {mainline.events.map((event, eventIndex) => (
e.stopPropagation(); <Box key={event.id} position="relative">
onEventSelect?.(event); {/* 时间轴圆点 */}
}} <Box
onToggleFollow={() => onToggleFollow?.(event.id)} position="absolute"
borderColor={borderColor} left="-19px"
/> top="50%"
</Box> transform="translateY(-50%)"
))} w="8px"
</VStack> h="8px"
</Box> borderRadius="full"
</Collapse> bg={timelineDotBg}
</Box> border="2px solid"
); borderColor={cardBg}
})} zIndex={1}
</VStack> />
{/* 事件卡片 */}
<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>
))}
</VStack>
</Box>
</Collapse>
</Box>
);
})}
</SimpleGrid>
</Box>
</Box> </Box>
); );
} }