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

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

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files

20
src/views/Center/components/EventDetailModal.less
View File

@@ -53,12 +53,26 @@
// 关闭按钮
.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;
.ant-modal-close-x {
font-size: 16px;
line-height: 1;
}
&:hover {
color: @color-gold-400;
background: rgba(212, 175, 55, 0.1);
color: @color-gold-400 !important;
background: rgba(212, 175, 55, 0.2);
}
}

27
src/views/Center/components/EventDetailModal.tsx
View File

@@ -48,7 +48,7 @@ const FILTER_OPTIONS: FilterOption[] = [
key: 'all',
label: '全部',
icon: LayoutGrid,
color: 'rgba(255, 255, 255, 0.8)',
color: '#9B59B6', // 紫罗兰色，汇总概念用独特色
},
{
key: 'plan',
@@ -177,7 +177,9 @@ export const EventDetailModal: React.FC<EventDetailModalProps> = ({
onCancel={onClose}
title={
<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
bg="rgba(212, 175, 55, 0.15)"
color="#D4AF37"
@@ -197,6 +199,13 @@ export const EventDetailModal: React.FC<EventDetailModalProps> = ({
className="event-detail-modal"
rootClassName="event-detail-modal-root"
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 },
}}
>
@@ -228,21 +237,23 @@ export const EventDetailModal: React.FC<EventDetailModalProps> = ({
key={option.key}
size="sm"
variant={isActive ? 'solid' : 'ghost'}
bg={isActive ? hexToRgba(option.color, 0.15) : 'transparent'}
color={isActive ? option.color : 'rgba(255, 255, 255, 0.6)'}
bg={isActive ? hexToRgba(option.color, 0.2) : 'rgba(168, 180, 192, 0.05)'}
color={isActive ? option.color : 'rgba(168, 180, 192, 0.6)'}
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={{
bg: hexToRgba(option.color, 0.1),
bg: hexToRgba(option.color, 0.12),
borderColor: hexToRgba(option.color, 0.3),
color: hexToRgba(option.color, 0.9),
}}
onClick={() => setActiveFilter(option.key)}
leftIcon={option.icon ? <Icon as={option.icon} boxSize={3.5} /> : undefined}
rightIcon={
count > 0 ? (
<Badge
bg={isActive ? hexToRgba(option.color, 0.25) : 'rgba(255, 255, 255, 0.1)'}
color={isActive ? option.color : 'rgba(255, 255, 255, 0.5)'}
bg={isActive ? hexToRgba(option.color, 0.3) : 'rgba(168, 180, 192, 0.1)'}
color={isActive ? option.color : 'rgba(168, 180, 192, 0.6)'}
fontSize="10px"
px={1.5}
borderRadius="full"