style(CalendarPanel): 适配黑金主题色

- FullCalendar 按钮改为金色(#D4AF37)
- 今日日期高亮边框改为金色
- 标题添加金色渐变效果
- 事件颜色:计划用金色,复盘用青色,系统事件用蓝色

🤖 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 10:53:04 +08:00
parent cf54a450f3
commit 83dcfa45e3

View File

@@ -69,6 +69,7 @@ export const CalendarPanel: React.FC = () => {
const [selectedDateEvents, setSelectedDateEvents] = useState<InvestmentEvent[]>([]); const [selectedDateEvents, setSelectedDateEvents] = useState<InvestmentEvent[]>([]);
// 转换数据为 FullCalendar 格式(使用 useMemo 缓存) // 转换数据为 FullCalendar 格式(使用 useMemo 缓存)
// 黑金主题色:计划用金色,复盘用青金色,系统事件用蓝色
const calendarEvents: CalendarEvent[] = useMemo(() => const calendarEvents: CalendarEvent[] = useMemo(() =>
allEvents.map(event => ({ allEvents.map(event => ({
...event, ...event,
@@ -76,8 +77,8 @@ export const CalendarPanel: React.FC = () => {
title: event.title, title: event.title,
start: event.event_date, start: event.event_date,
date: event.event_date, date: event.event_date,
backgroundColor: event.source === 'future' ? '#3182CE' : event.type === 'plan' ? '#8B5CF6' : '#38A169', backgroundColor: event.source === 'future' ? '#3B82F6' : event.type === 'plan' ? '#D4AF37' : '#10B981',
borderColor: event.source === 'future' ? '#3182CE' : event.type === 'plan' ? '#8B5CF6' : '#38A169', borderColor: event.source === 'future' ? '#3B82F6' : event.type === 'plan' ? '#D4AF37' : '#10B981',
extendedProps: { extendedProps: {
...event, ...event,
isSystem: event.source === 'future', isSystem: event.source === 'future',
@@ -112,24 +113,34 @@ export const CalendarPanel: React.FC = () => {
<Box <Box
height={{ base: '380px', md: '560px' }} height={{ base: '380px', md: '560px' }}
sx={{ sx={{
// FullCalendar 按钮样式覆盖(与日历视图按钮颜色一致 // FullCalendar 按钮样式覆盖(黑金主题
'.fc .fc-button': { '.fc .fc-button': {
backgroundColor: '#805AD5 !important', backgroundColor: '#D4AF37 !important',
borderColor: '#805AD5 !important', borderColor: '#D4AF37 !important',
color: '#fff !important', color: '#0A0A14 !important',
fontWeight: '600 !important',
'&:hover': { '&:hover': {
backgroundColor: '#6B46C1 !important', backgroundColor: '#B8960C !important',
borderColor: '#6B46C1 !important', borderColor: '#B8960C !important',
}, },
'&:disabled': { '&:disabled': {
backgroundColor: '#6B46C1 !important', backgroundColor: '#B8960C !important',
borderColor: '#6B46C1 !important', borderColor: '#B8960C !important',
opacity: '1 !important', opacity: '1 !important',
}, },
}, },
// 今天日期高亮边框 // 今天日期高亮边框
'.fc-daygrid-day.fc-day-today': { '.fc-daygrid-day.fc-day-today': {
border: '2px solid #805AD5 !important', border: '2px solid #D4AF37 !important',
backgroundColor: 'rgba(212, 175, 55, 0.1) !important',
},
// 标题金色渐变
'.fc .fc-toolbar-title': {
background: 'linear-gradient(135deg, #D4AF37 0%, #F5E6A3 100%)',
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
backgroundClip: 'text',
fontWeight: '700',
}, },
}} }}
> >