更新Company页面的UI为FUI风格
This commit is contained in:
@@ -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}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user