feat: 历史事件卡片根据重要性显示不同背景色

- 重要性 >= 4:红色背景(高重要性)
- 重要性 >= 2:橙色背景(中等重要性)
- 重要性 < 2:绿色背景(低重要性)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-12-15 15:33:09 +08:00
parent 378df947a9
commit b7315bbdb4

View File

@@ -122,13 +122,20 @@ const HistoricalEvents = ({
// navigate(`/event-detail/${event.id}`); // navigate(`/event-detail/${event.id}`);
// }; // };
// 获取重要性颜色 // 获取重要性颜色(用于 Badge
const getImportanceColor = (importance) => { const getImportanceColor = (importance) => {
if (importance >= 4) return 'red'; if (importance >= 4) return 'red';
if (importance >= 2) return 'orange'; if (importance >= 2) return 'orange';
return 'green'; return 'green';
}; };
// 获取重要性背景色(用于卡片背景)
const getImportanceBgColor = (importance) => {
if (importance >= 4) return 'rgba(239, 68, 68, 0.15)'; // 红色背景
if (importance >= 2) return 'rgba(245, 158, 11, 0.12)'; // 橙色背景
return 'rgba(34, 197, 94, 0.1)'; // 绿色背景
};
// 获取相关度颜色1-10 // 获取相关度颜色1-10
const getSimilarityColor = (similarity) => { const getSimilarityColor = (similarity) => {
if (similarity >= 8) return 'green'; if (similarity >= 8) return 'green';
@@ -240,27 +247,15 @@ const HistoricalEvents = ({
<VStack spacing={3} align="stretch"> <VStack spacing={3} align="stretch">
{events.map((event) => { {events.map((event) => {
const importanceColor = getImportanceColor(event.importance); const importanceColor = getImportanceColor(event.importance);
const importanceBgColor = getImportanceBgColor(event.importance);
return ( return (
<Box <Box
key={event.id} key={event.id}
bg={cardBg} bg={importanceBgColor}
borderWidth="1px" borderWidth="1px"
borderColor="gray.500" borderColor="gray.500"
borderRadius="lg" borderRadius="lg"
position="relative"
overflow="visible"
_before={{
content: '""',
position: 'absolute',
top: 0,
left: 0,
right: 0,
height: '3px',
bgGradient: 'linear(to-r, blue.400, purple.500, pink.500)',
borderTopLeftRadius: 'lg',
borderTopRightRadius: 'lg',
}}
transition="all 0.2s" transition="all 0.2s"
> >
<VStack align="stretch" spacing={3} p={4}> <VStack align="stretch" spacing={3} p={4}>