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 b6ed68244e
commit f557ef96cf

View File

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