style(EventDetailModal): 优化弹窗 Tab 和关闭按钮样式

- Tab 颜色方案调整:全部=紫罗兰色,计划=金色,复盘=绿色,系统=蓝色
- 未选中态统一使用银白色主题
- 选中态增强高亮效果(boxShadow、更明显的边框)
- 标题颜色调整为 rgba(255,255,255,0.85)
- 关闭按钮增强可见性:添加背景色、固定尺寸、圆角
- 弹窗背景色与 /home/center 页面保持一致

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-12-23 18:29:04 +08:00
parent a332d5571a
commit 60aa5c80a5
2 changed files with 36 additions and 11 deletions

View File

@@ -53,12 +53,26 @@
// 关闭按钮 // 关闭按钮
.ant-modal-close { .ant-modal-close {
color: @color-text-secondary; color: rgba(255, 255, 255, 0.9) !important;
top: 16px;
right: 16px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
background: rgba(255, 255, 255, 0.1);
transition: all 0.3s ease; transition: all 0.3s ease;
.ant-modal-close-x {
font-size: 16px;
line-height: 1;
}
&:hover { &:hover {
color: @color-gold-400; color: @color-gold-400 !important;
background: rgba(212, 175, 55, 0.1); background: rgba(212, 175, 55, 0.2);
} }
} }

View File

@@ -48,7 +48,7 @@ const FILTER_OPTIONS: FilterOption[] = [
key: 'all', key: 'all',
label: '全部', label: '全部',
icon: LayoutGrid, icon: LayoutGrid,
color: 'rgba(255, 255, 255, 0.8)', color: '#9B59B6', // 紫罗兰色,汇总概念用独特色
}, },
{ {
key: 'plan', key: 'plan',
@@ -177,7 +177,9 @@ export const EventDetailModal: React.FC<EventDetailModalProps> = ({
onCancel={onClose} onCancel={onClose}
title={ title={
<HStack spacing={2}> <HStack spacing={2}>
<Text>{selectedDate?.format('YYYY年MM月DD日') || ''} </Text> <Text color="rgba(255, 255, 255, 0.85)" fontWeight="500">
{selectedDate?.format('YYYY年MM月DD日') || ''}
</Text>
<Badge <Badge
bg="rgba(212, 175, 55, 0.15)" bg="rgba(212, 175, 55, 0.15)"
color="#D4AF37" color="#D4AF37"
@@ -197,6 +199,13 @@ export const EventDetailModal: React.FC<EventDetailModalProps> = ({
className="event-detail-modal" className="event-detail-modal"
rootClassName="event-detail-modal-root" rootClassName="event-detail-modal-root"
styles={{ styles={{
content: {
background: 'rgba(15, 15, 26, 0.95)',
border: '1px solid rgba(212, 175, 55, 0.2)',
},
header: {
background: 'transparent',
},
body: { paddingTop: 8, paddingBottom: 24 }, body: { paddingTop: 8, paddingBottom: 24 },
}} }}
> >
@@ -228,21 +237,23 @@ export const EventDetailModal: React.FC<EventDetailModalProps> = ({
key={option.key} key={option.key}
size="sm" size="sm"
variant={isActive ? 'solid' : 'ghost'} variant={isActive ? 'solid' : 'ghost'}
bg={isActive ? hexToRgba(option.color, 0.15) : 'transparent'} bg={isActive ? hexToRgba(option.color, 0.2) : 'rgba(168, 180, 192, 0.05)'}
color={isActive ? option.color : 'rgba(255, 255, 255, 0.6)'} color={isActive ? option.color : 'rgba(168, 180, 192, 0.6)'}
border="1px solid" border="1px solid"
borderColor={isActive ? hexToRgba(option.color, 0.4) : 'rgba(255, 255, 255, 0.1)'} borderColor={isActive ? hexToRgba(option.color, 0.5) : 'rgba(168, 180, 192, 0.15)'}
boxShadow={isActive ? `0 0 12px ${hexToRgba(option.color, 0.3)}` : 'none'}
_hover={{ _hover={{
bg: hexToRgba(option.color, 0.1), bg: hexToRgba(option.color, 0.12),
borderColor: hexToRgba(option.color, 0.3), borderColor: hexToRgba(option.color, 0.3),
color: hexToRgba(option.color, 0.9),
}} }}
onClick={() => setActiveFilter(option.key)} onClick={() => setActiveFilter(option.key)}
leftIcon={option.icon ? <Icon as={option.icon} boxSize={3.5} /> : undefined} leftIcon={option.icon ? <Icon as={option.icon} boxSize={3.5} /> : undefined}
rightIcon={ rightIcon={
count > 0 ? ( count > 0 ? (
<Badge <Badge
bg={isActive ? hexToRgba(option.color, 0.25) : 'rgba(255, 255, 255, 0.1)'} bg={isActive ? hexToRgba(option.color, 0.3) : 'rgba(168, 180, 192, 0.1)'}
color={isActive ? option.color : 'rgba(255, 255, 255, 0.5)'} color={isActive ? option.color : 'rgba(168, 180, 192, 0.6)'}
fontSize="10px" fontSize="10px"
px={1.5} px={1.5}
borderRadius="full" borderRadius="full"