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

feat: 重要性徽章样式优化（圆形设计）

Browse Source
This commit is contained in:
zdl
2025-11-05 15:19:02 +08:00
parent f9e4265dd6
commit aa1a93c65b
2 changed files with 27 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/constants/importanceLevels.js
View File

@@ -19,7 +19,8 @@ export const IMPORTANCE_LEVELS = {
bgColor: 'red.50', bgColor: 'red.50',
borderColor: 'red.200', borderColor: 'red.200',
colorScheme: 'red', colorScheme: 'red',
badgeBg: 'red.800', // 角标边框和文字颜色 - 极深红色 badgeBg: '#dc2626', // 圆形徽章背景色 - 红色
badgeColor: 'white', // 圆形徽章文字颜色 - 白色
icon: WarningIcon, icon: WarningIcon,
label: '极高', label: '极高',
dotBg: 'red.800', dotBg: 'red.800',
@@ -32,7 +33,8 @@ export const IMPORTANCE_LEVELS = {
bgColor: 'red.50', bgColor: 'red.50',
borderColor: 'red.200', borderColor: 'red.200',
colorScheme: 'red', colorScheme: 'red',
badgeBg: 'red.600', // 角标边框和文字颜色 - 深红色 badgeBg: '#ea580c', // 圆形徽章背景色 - 橙色
badgeColor: 'white', // 圆形徽章文字颜色 - 白色
icon: WarningTwoIcon, icon: WarningTwoIcon,
label: '高', label: '高',
dotBg: 'red.600', dotBg: 'red.600',
@@ -45,7 +47,8 @@ export const IMPORTANCE_LEVELS = {
bgColor: 'red.50', bgColor: 'red.50',
borderColor: 'red.100', borderColor: 'red.100',
colorScheme: 'red', colorScheme: 'red',
badgeBg: 'red.500', // 角标边框和文字颜色 - 中红色 badgeBg: '#2563eb', // 圆形徽章背景色 - 蓝色
badgeColor: 'white', // 圆形徽章文字颜色 - 白色
icon: InfoIcon, icon: InfoIcon,
label: '中', label: '中',
dotBg: 'red.500', dotBg: 'red.500',
@@ -58,7 +61,8 @@ export const IMPORTANCE_LEVELS = {
bgColor: 'red.50', bgColor: 'red.50',
borderColor: 'red.100', borderColor: 'red.100',
colorScheme: 'red', colorScheme: 'red',
badgeBg: 'red.400', // 角标边框和文字颜色 - 浅红色 badgeBg: '#6b7280', // 圆形徽章背景色 - 灰色
badgeColor: 'white', // 圆形徽章文字颜色 - 白色
icon: CheckCircleIcon, icon: CheckCircleIcon,
label: '低', label: '低',
dotBg: 'red.400', dotBg: 'red.400',

41
src/views/Community/components/EventCard/HorizontalDynamicNewsEventCard.js
View File

@@ -89,8 +89,8 @@ const HorizontalDynamicNewsEventCard = ({
cursor="pointer" cursor="pointer"
onClick={() => onEventClick?.(event)} onClick={() => onEventClick?.(event)}
> >
<CardBody p={3}> <CardBody p={3} pb={2}>
{/* 左上角：重要性矩形角标（镂空边框样式） */} {/* 左上角：重要性横向徽章 */}
<Popover trigger="hover" placement="right" isLazy> <Popover trigger="hover" placement="right" isLazy>
<PopoverTrigger> <PopoverTrigger>
<Box <Box
@@ -98,21 +98,18 @@ const HorizontalDynamicNewsEventCard = ({
top={0} top={0}
left={0} left={0}
zIndex={1} zIndex={1}
bg="transparent" bg={importance.badgeBg}
color={importance.badgeBg} color={importance.badgeColor || 'white'}
borderWidth="2px" fontSize="7px"
borderColor={importance.badgeBg}
fontSize="11px"
fontWeight="bold" fontWeight="bold"
px={1.5} w="30px"
py={0.5} h="15px"
minW="auto" borderRadius="xl"
display="flex" display="flex"
alignItems="center" alignItems="center"
justifyContent="center" justifyContent="center"
lineHeight="1"
borderBottomRightRadius="md"
cursor="help" cursor="help"
boxShadow="sm"
> >
{importance.label} {importance.label}
</Box> </Box>
@@ -126,22 +123,21 @@ const HorizontalDynamicNewsEventCard = ({
重要性等级说明 重要性等级说明
</Text> </Text>
{getAllImportanceLevels().map(item => ( {getAllImportanceLevels().map(item => (
<HStack key={item.level} spacing={2} align="flex-start"> <HStack key={item.level} spacing={2} align="center">
<Box <Box
w="20px" w="30px"
h="20px" h="15px"
borderWidth="2px" bg={item.badgeBg}
borderColor={item.badgeBg} color={item.badgeColor || 'white'}
color={item.badgeBg}
fontSize="9px" fontSize="9px"
fontWeight="bold" fontWeight="bold"
display="flex" display="flex"
alignItems="center" alignItems="center"
justifyContent="center" justifyContent="center"
borderRadius="sm" borderRadius="lg"
flexShrink={0} flexShrink={0}
> >
{item.level} {item.label}
</Box> </Box>
<Text fontSize="xs" flex={1}> <Text fontSize="xs" flex={1}>
<Text as="span" fontWeight="bold"> <Text as="span" fontWeight="bold">
@@ -168,8 +164,8 @@ const HorizontalDynamicNewsEventCard = ({
/> />
</Box> </Box>
<VStack align="stretch" spacing={2}> <VStack align="stretch" spacing={1.5}>
{/* 标题 - 最多两行，添加上边距避免与角标重叠 */} {/* 标题 - 最多两行，添加左右边距避免与横向徽章和关注按钮重叠 */}
<Box <Box
cursor="pointer" cursor="pointer"
onClick={(e) => onTitleClick?.(e, event)} onClick={(e) => onTitleClick?.(e, event)}
@@ -193,6 +189,7 @@ const HorizontalDynamicNewsEventCard = ({
avgChange={event.related_avg_chg} avgChange={event.related_avg_chg}
maxChange={event.related_max_chg} maxChange={event.related_max_chg}
weekChange={event.related_week_chg} weekChange={event.related_week_chg}
size="comfortable"
/> />
</VStack> </VStack>
</CardBody> </CardBody>