更新Company页面的UI为FUI风格

This commit is contained in:
2025-12-24 13:13:20 +08:00
parent 272a6002bb
commit 1ed8c3e1ac
2 changed files with 55 additions and 65 deletions

View File

@@ -62,7 +62,7 @@ const EventScrollList = React.memo(
return (
<Box
ref={scrollContainerRef}
overflow="hidden"
overflow={mode === "mainline" ? "visible" : "hidden"}
h="100%"
pt={0}
pb={mode === "mainline" ? 0 : 4}

View File

@@ -295,7 +295,8 @@ const MainlineCard = React.memo(
borderTopColor={`${colorScheme}.500`}
minW={isExpanded ? "320px" : "280px"}
maxW={isExpanded ? "380px" : "320px"}
h="100%"
minH="500px"
maxH="600px"
display="flex"
flexDirection="column"
transition="all 0.3s ease"
@@ -785,10 +786,30 @@ const MainlineTimelineViewComponent = forwardRef(
return (
<Box
display={display}
h="100%"
minH="600px"
h="auto"
w="100%"
bg={COLORS.containerBg}
overflow="hidden"
overflowY="visible"
overflowX="auto"
css={{
"&::-webkit-scrollbar": {
height: "12px",
background: COLORS.scrollbarTrackBg,
},
"&::-webkit-scrollbar-track": {
background: COLORS.scrollbarTrackBg,
borderRadius: "6px",
},
"&::-webkit-scrollbar-thumb": {
background: `linear-gradient(90deg, ${COLORS.scrollbarThumbBg}, #8a9bb0)`,
borderRadius: "6px",
border: `2px solid ${COLORS.scrollbarTrackBg}`,
},
"&::-webkit-scrollbar-thumb:hover": {
background: `linear-gradient(90deg, ${COLORS.scrollbarThumbHoverBg}, #b8c5d4)`,
},
}}
>
{/* 顶部统计栏 */}
<Flex
@@ -935,68 +956,37 @@ const MainlineTimelineViewComponent = forwardRef(
</HStack>
</Flex>
{/* 主线卡片横向滚动容器 - 使用 column-reverse 让滚动条在顶部 */}
<Box
h="calc(100% - 44px)"
display="flex"
flexDirection="column-reverse"
{/* 主线卡片横向排列容器 */}
<HStack
spacing={3}
p={3}
align="stretch"
minW="max-content"
>
<Box
flex="1"
overflowX="auto"
overflowY="hidden"
css={{
"&::-webkit-scrollbar": {
height: "12px",
background: COLORS.scrollbarTrackBg,
},
"&::-webkit-scrollbar-track": {
background: COLORS.scrollbarTrackBg,
borderRadius: "6px",
},
"&::-webkit-scrollbar-thumb": {
background: `linear-gradient(90deg, ${COLORS.scrollbarThumbBg}, #8a9bb0)`,
borderRadius: "6px",
border: `2px solid ${COLORS.scrollbarTrackBg}`,
},
"&::-webkit-scrollbar-thumb:hover": {
background: `linear-gradient(90deg, ${COLORS.scrollbarThumbHoverBg}, #b8c5d4)`,
},
}}
>
<HStack
spacing={3}
p={3}
align="stretch"
h="100%"
minW="max-content"
>
{mainlines.map((mainline) => {
const groupId =
mainline.group_id ||
mainline.lv2_id ||
mainline.lv1_id ||
"ungrouped";
const groupName =
mainline.group_name ||
mainline.lv2_name ||
mainline.lv1_name ||
"其他";
return (
<MainlineCard
key={groupId}
mainline={mainline}
colorScheme={getColorScheme(groupName)}
isExpanded={expandedGroups[groupId]}
onToggle={() => toggleGroup(groupId)}
selectedEvent={selectedEvent}
onEventSelect={onEventSelect}
/>
);
})}
</HStack>
</Box>
</Box>
{mainlines.map((mainline) => {
const groupId =
mainline.group_id ||
mainline.lv2_id ||
mainline.lv1_id ||
"ungrouped";
const groupName =
mainline.group_name ||
mainline.lv2_name ||
mainline.lv1_name ||
"其他";
return (
<MainlineCard
key={groupId}
mainline={mainline}
colorScheme={getColorScheme(groupName)}
isExpanded={expandedGroups[groupId]}
onToggle={() => toggleGroup(groupId)}
selectedEvent={selectedEvent}
onEventSelect={onEventSelect}
/>
);
})}
</HStack>
</Box>
);
}