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:
@@ -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',
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user