更新Company页面的UI为FUI风格
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
// src/views/Community/components/DynamicNews/layouts/MainlineTimelineView.js
|
||||
// 主线时间轴布局组件 - 按 lv2 概念分组展示事件（横向卡片布局）
|
||||
// 主线时间轴布局组件 - 按 lv2 概念分组展示事件（横向滚动布局）
|
||||
|
||||
import React, {
|
||||
useState,
|
||||
@@ -22,7 +22,6 @@ import {
|
||||
IconButton,
|
||||
useColorModeValue,
|
||||
Tooltip,
|
||||
SimpleGrid,
|
||||
} from "@chakra-ui/react";
|
||||
import {
|
||||
ChevronDownIcon,
|
||||
@@ -38,7 +37,7 @@ import { getApiBase } from "@utils/apiConfig";
|
||||
*
|
||||
* 功能：
|
||||
* 1. 调用 /api/events/mainline 获取预分组数据
|
||||
* 2. 按 lv2 概念分组展示，横向卡片布局
|
||||
* 2. 按 lv2 概念分组展示，横向滚动布局
|
||||
* 3. 按事件数量从多到少排序
|
||||
* 4. 深色背景风格，与列表模式统一
|
||||
*/
|
||||
@@ -61,20 +60,19 @@ const MainlineTimelineViewComponent = forwardRef(
|
||||
const [mainlineData, setMainlineData] = useState(null);
|
||||
const [expandedGroups, setExpandedGroups] = useState({});
|
||||
|
||||
// 深色主题颜色 - 与列表模式统一
|
||||
const containerBg = useColorModeValue("gray.100", "gray.900");
|
||||
const cardBg = useColorModeValue("white", "gray.800");
|
||||
const cardBorderColor = useColorModeValue("gray.200", "gray.700");
|
||||
const headerBg = useColorModeValue("gray.50", "gray.750");
|
||||
const headerHoverBg = useColorModeValue("gray.100", "gray.700");
|
||||
const textColor = useColorModeValue("gray.800", "gray.100");
|
||||
const secondaryTextColor = useColorModeValue("gray.600", "gray.400");
|
||||
const timelineLineColor = useColorModeValue("blue.300", "blue.500");
|
||||
const timelineDotBg = useColorModeValue("blue.500", "blue.400");
|
||||
const scrollbarTrackBg = useColorModeValue("#e2e8f0", "#1a202c");
|
||||
// 深色主题颜色
|
||||
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.200", "gray.800");
|
||||
const statBarBg = useColorModeValue("gray.100", "#252a34");
|
||||
|
||||
// 根据主线类型获取配色
|
||||
const getColorScheme = useCallback((lv2Name) => {
|
||||
@@ -191,7 +189,7 @@ const MainlineTimelineViewComponent = forwardRef(
|
||||
mainlines: sortedMainlines,
|
||||
});
|
||||
|
||||
// 初始化展开状态（默认全部折叠，方便一目了然对比）
|
||||
// 初始化展开状态（默认全部折叠）
|
||||
const initialExpanded = {};
|
||||
sortedMainlines.forEach((mainline) => {
|
||||
initialExpanded[mainline.lv2_id] = false;
|
||||
@@ -304,24 +302,10 @@ const MainlineTimelineViewComponent = forwardRef(
|
||||
return (
|
||||
<Box
|
||||
display={display}
|
||||
overflowY="auto"
|
||||
h="100%"
|
||||
w="100%"
|
||||
bg={containerBg}
|
||||
css={{
|
||||
"&::-webkit-scrollbar": { width: "8px" },
|
||||
"&::-webkit-scrollbar-track": {
|
||||
background: scrollbarTrackBg,
|
||||
},
|
||||
"&::-webkit-scrollbar-thumb": {
|
||||
background: scrollbarThumbBg,
|
||||
borderRadius: "4px",
|
||||
},
|
||||
"&::-webkit-scrollbar-thumb:hover": {
|
||||
background: scrollbarThumbHoverBg,
|
||||
},
|
||||
scrollBehavior: "smooth",
|
||||
}}
|
||||
overflow="hidden"
|
||||
>
|
||||
{/* 顶部统计栏 */}
|
||||
<Flex
|
||||
@@ -332,9 +316,6 @@ const MainlineTimelineViewComponent = forwardRef(
|
||||
bg={statBarBg}
|
||||
borderBottomWidth="1px"
|
||||
borderBottomColor={cardBorderColor}
|
||||
position="sticky"
|
||||
top={0}
|
||||
zIndex={10}
|
||||
>
|
||||
<HStack spacing={4}>
|
||||
<HStack spacing={2}>
|
||||
@@ -387,9 +368,32 @@ const MainlineTimelineViewComponent = forwardRef(
|
||||
</HStack>
|
||||
</Flex>
|
||||
|
||||
{/* 主线卡片网格 - 横向布局 */}
|
||||
<Box p={3}>
|
||||
<SimpleGrid columns={{ base: 1, md: 2, lg: 3, xl: 4 }} spacing={3}>
|
||||
{/* 主线卡片横向滚动容器 */}
|
||||
<Box
|
||||
overflowX="auto"
|
||||
overflowY="hidden"
|
||||
h="calc(100% - 44px)"
|
||||
css={{
|
||||
"&::-webkit-scrollbar": { height: "8px" },
|
||||
"&::-webkit-scrollbar-track": {
|
||||
background: scrollbarTrackBg,
|
||||
},
|
||||
"&::-webkit-scrollbar-thumb": {
|
||||
background: scrollbarThumbBg,
|
||||
borderRadius: "4px",
|
||||
},
|
||||
"&::-webkit-scrollbar-thumb:hover": {
|
||||
background: scrollbarThumbHoverBg,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<HStack
|
||||
spacing={3}
|
||||
p={3}
|
||||
align="stretch"
|
||||
h="100%"
|
||||
minW="max-content"
|
||||
>
|
||||
{mainlines.map((mainline) => {
|
||||
const colorScheme = getColorScheme(mainline.lv2_name);
|
||||
const isExpanded = expandedGroups[mainline.lv2_id];
|
||||
@@ -401,13 +405,17 @@ const MainlineTimelineViewComponent = forwardRef(
|
||||
borderRadius="lg"
|
||||
borderWidth="1px"
|
||||
borderColor={cardBorderColor}
|
||||
borderLeftWidth="4px"
|
||||
borderLeftColor={`${colorScheme}.500`}
|
||||
overflow="hidden"
|
||||
transition="all 0.2s"
|
||||
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`,
|
||||
transform: "translateY(-1px)",
|
||||
boxShadow: "lg"
|
||||
}}
|
||||
>
|
||||
@@ -421,6 +429,9 @@ const MainlineTimelineViewComponent = forwardRef(
|
||||
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%">
|
||||
@@ -458,14 +469,12 @@ const MainlineTimelineViewComponent = forwardRef(
|
||||
/>
|
||||
</Flex>
|
||||
|
||||
{/* 展开的事件列表 */}
|
||||
<Collapse in={isExpanded} animateOpacity>
|
||||
{/* 事件列表 - 可滚动到底 */}
|
||||
<Collapse in={isExpanded} animateOpacity style={{ flex: 1, overflow: 'hidden' }}>
|
||||
<Box
|
||||
px={3}
|
||||
py={2}
|
||||
borderTopWidth="1px"
|
||||
borderTopColor={cardBorderColor}
|
||||
maxH="400px"
|
||||
h="100%"
|
||||
overflowY="auto"
|
||||
position="relative"
|
||||
css={{
|
||||
@@ -499,8 +508,7 @@ const MainlineTimelineViewComponent = forwardRef(
|
||||
<Box
|
||||
position="absolute"
|
||||
left="-19px"
|
||||
top="50%"
|
||||
transform="translateY(-50%)"
|
||||
top="12px"
|
||||
w="8px"
|
||||
h="8px"
|
||||
borderRadius="full"
|
||||
@@ -539,10 +547,39 @@ const MainlineTimelineViewComponent = forwardRef(
|
||||
</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>
|
||||
);
|
||||
})}
|
||||
</SimpleGrid>
|
||||
</HStack>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user