feat(calendar): 日历单元格改为两行布局

- 第一行：日期 + 上证涨跌
  - 第二行：热度（涨停数）+ 事件数
  - 周一至周日表头背景色修复为深色主题
  - 事件条高度固定为12px，防止不同行对齐问题

src/components/Calendar/FullCalendarPro.tsx

@@ -4,14 +4,19 @@
  * 使用 dayCellDidMount 钩子实现完整的单元格自定义内容
  */
 
-import React, { useMemo, useRef, useCallback, useEffect } from 'react';
-import FullCalendar from '@fullcalendar/react';
-import dayGridPlugin from '@fullcalendar/daygrid';
-import interactionPlugin from '@fullcalendar/interaction';
-import type { EventInput, EventClickArg, DatesSetArg, DayCellMountArg } from '@fullcalendar/core';
-import { Box, Text, VStack, Tooltip } from '@chakra-ui/react';
-import { keyframes } from '@emotion/react';
-import dayjs from 'dayjs';
+import React, { useMemo, useRef, useCallback, useEffect } from "react";
+import FullCalendar from "@fullcalendar/react";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import interactionPlugin from "@fullcalendar/interaction";
+import type {
+  EventInput,
+  EventClickArg,
+  DatesSetArg,
+  DayCellMountArg,
+} from "@fullcalendar/core";
+import { Box, Text, VStack, Tooltip } from "@chakra-ui/react";
+import { keyframes } from "@emotion/react";
+import dayjs from "dayjs";
 
 // 动画定义
 const shimmer = keyframes`
@@ -28,11 +33,11 @@ const glow = keyframes`
  * 事件数据接口
  */
 export interface CalendarEventData {
-  date: string;          // YYYYMMDD 格式
-  count: number;         // 涨停数
-  topSector: string;     // 最热概念
-  eventCount?: number;   // 未来事件数
-  indexChange?: number;  // 上证指数涨跌幅
+  date: string; // YYYYMMDD 格式
+  count: number; // 涨停数
+  topSector: string; // 最热概念
+  eventCount?: number; // 未来事件数
+  indexChange?: number; // 上证指数涨跌幅
 }
 
 /**
@@ -44,7 +49,12 @@ export interface FullCalendarProProps {
   /** 日期点击回调 */
   onDateClick?: (date: Date, data?: CalendarEventData) => void;
   /** 事件点击回调（点击跨天条） */
-  onEventClick?: (event: { title: string; start: Date; end: Date; dates: string[] }) => void;
+  onEventClick?: (event: {
+    title: string;
+    start: Date;
+    end: Date;
+    dates: string[];
+  }) => void;
   /** 月份变化回调 */
   onMonthChange?: (year: number, month: number) => void;
   /** 当前月份 */
@@ -56,18 +66,61 @@ export interface FullCalendarProProps {
 /**
  * 概念颜色映射 - 为不同概念生成不同的渐变色
  */
-const CONCEPT_COLORS: Record<string, { bg: string; border: string; text: string }> = {};
+const CONCEPT_COLORS: Record<
+  string,
+  { bg: string; border: string; text: string }
+> = {};
 const COLOR_PALETTE = [
-  { bg: 'linear-gradient(135deg, #FFD700 0%, #FFA500 100%)', border: '#FFD700', text: '#1a1a2e' },   // 金色 - 深色文字
-  { bg: 'linear-gradient(135deg, #00CED1 0%, #20B2AA 100%)', border: '#00CED1', text: '#1a1a2e' },   // 青色 - 深色文字
-  { bg: 'linear-gradient(135deg, #FF6B6B 0%, #EE5A5A 100%)', border: '#FF6B6B', text: '#fff' },      // 红色 - 白色文字
-  { bg: 'linear-gradient(135deg, #A855F7 0%, #9333EA 100%)', border: '#A855F7', text: '#fff' },      // 紫色 - 白色文字
-  { bg: 'linear-gradient(135deg, #3B82F6 0%, #2563EB 100%)', border: '#3B82F6', text: '#fff' },      // 蓝色 - 白色文字
-  { bg: 'linear-gradient(135deg, #10B981 0%, #059669 100%)', border: '#10B981', text: '#1a1a2e' },   // 绿色 - 深色文字
-  { bg: 'linear-gradient(135deg, #F59E0B 0%, #D97706 100%)', border: '#F59E0B', text: '#1a1a2e' },   // 橙色 - 深色文字
-  { bg: 'linear-gradient(135deg, #EC4899 0%, #DB2777 100%)', border: '#EC4899', text: '#fff' },      // 粉色 - 白色文字
-  { bg: 'linear-gradient(135deg, #6366F1 0%, #4F46E5 100%)', border: '#6366F1', text: '#fff' },      // 靛蓝 - 白色文字
-  { bg: 'linear-gradient(135deg, #14B8A6 0%, #0D9488 100%)', border: '#14B8A6', text: '#1a1a2e' },   // 青绿 - 深色文字
+  {
+    bg: "linear-gradient(135deg, #FFD700 0%, #FFA500 100%)",
+    border: "#FFD700",
+    text: "#1a1a2e",
+  }, // 金色 - 深色文字
+  {
+    bg: "linear-gradient(135deg, #00CED1 0%, #20B2AA 100%)",
+    border: "#00CED1",
+    text: "#1a1a2e",
+  }, // 青色 - 深色文字
+  {
+    bg: "linear-gradient(135deg, #FF6B6B 0%, #EE5A5A 100%)",
+    border: "#FF6B6B",
+    text: "#fff",
+  }, // 红色 - 白色文字
+  {
+    bg: "linear-gradient(135deg, #A855F7 0%, #9333EA 100%)",
+    border: "#A855F7",
+    text: "#fff",
+  }, // 紫色 - 白色文字
+  {
+    bg: "linear-gradient(135deg, #3B82F6 0%, #2563EB 100%)",
+    border: "#3B82F6",
+    text: "#fff",
+  }, // 蓝色 - 白色文字
+  {
+    bg: "linear-gradient(135deg, #10B981 0%, #059669 100%)",
+    border: "#10B981",
+    text: "#1a1a2e",
+  }, // 绿色 - 深色文字
+  {
+    bg: "linear-gradient(135deg, #F59E0B 0%, #D97706 100%)",
+    border: "#F59E0B",
+    text: "#1a1a2e",
+  }, // 橙色 - 深色文字
+  {
+    bg: "linear-gradient(135deg, #EC4899 0%, #DB2777 100%)",
+    border: "#EC4899",
+    text: "#fff",
+  }, // 粉色 - 白色文字
+  {
+    bg: "linear-gradient(135deg, #6366F1 0%, #4F46E5 100%)",
+    border: "#6366F1",
+    text: "#fff",
+  }, // 靛蓝 - 白色文字
+  {
+    bg: "linear-gradient(135deg, #14B8A6 0%, #0D9488 100%)",
+    border: "#14B8A6",
+    text: "#1a1a2e",
+  }, // 青绿 - 深色文字
 ];
 
 let colorIndex = 0;
@@ -87,11 +140,17 @@ const mergeConsecutiveConcepts = (data: CalendarEventData[]): EventInput[] => {
 
   // 按日期排序
   const sorted = [...data]
-    .filter(d => d.topSector)
+    .filter((d) => d.topSector)
     .sort((a, b) => a.date.localeCompare(b.date));
 
   const events: EventInput[] = [];
-  let currentEvent: { concept: string; startDate: string; endDate: string; dates: string[]; totalCount: number } | null = null;
+  let currentEvent: {
+    concept: string;
+    startDate: string;
+    endDate: string;
+    dates: string[];
+    totalCount: number;
+  } | null = null;
 
   sorted.forEach((item, index) => {
     const dateStr = item.date;
@@ -99,7 +158,8 @@ const mergeConsecutiveConcepts = (data: CalendarEventData[]): EventInput[] => {
 
     // 检查是否与前一天连续且概念相同
     const prevItem = sorted[index - 1];
-    const isConsecutive = prevItem &&
+    const isConsecutive =
+      prevItem &&
       concept === prevItem.topSector &&
       isNextDay(prevItem.date, dateStr);
 
@@ -136,11 +196,11 @@ const mergeConsecutiveConcepts = (data: CalendarEventData[]): EventInput[] => {
  * 检查两个日期是否连续（跳过周末）
  */
 const isNextDay = (date1: string, date2: string): boolean => {
-  const d1 = dayjs(date1, 'YYYYMMDD');
-  const d2 = dayjs(date2, 'YYYYMMDD');
+  const d1 = dayjs(date1, "YYYYMMDD");
+  const d2 = dayjs(date2, "YYYYMMDD");
 
   // 简单判断：相差1-3天内（考虑周末）
-  const diff = d2.diff(d1, 'day');
+  const diff = d2.diff(d1, "day");
   if (diff === 1) return true;
   if (diff === 2 && d1.day() === 5) return true; // 周五到周日
   if (diff === 3 && d1.day() === 5) return true; // 周五到周一
@@ -150,18 +210,24 @@ const isNextDay = (date1: string, date2: string): boolean => {
 /**
  * 创建 FullCalendar 事件对象
  */
-const createEventInput = (event: { concept: string; startDate: string; endDate: string; dates: string[]; totalCount: number }): EventInput => {
+const createEventInput = (event: {
+  concept: string;
+  startDate: string;
+  endDate: string;
+  dates: string[];
+  totalCount: number;
+}): EventInput => {
   const color = getConceptColor(event.concept);
-  const startDate = dayjs(event.startDate, 'YYYYMMDD');
-  const endDate = dayjs(event.endDate, 'YYYYMMDD').add(1, 'day'); // FullCalendar 的 end 是 exclusive
+  const startDate = dayjs(event.startDate, "YYYYMMDD");
+  const endDate = dayjs(event.endDate, "YYYYMMDD").add(1, "day"); // FullCalendar 的 end 是 exclusive
 
   return {
     id: `${event.concept}-${event.startDate}`,
     title: event.concept,
-    start: startDate.format('YYYY-MM-DD'),
-    end: endDate.format('YYYY-MM-DD'),
-    backgroundColor: 'transparent',
-    borderColor: 'transparent',
+    start: startDate.format("YYYY-MM-DD"),
+    end: endDate.format("YYYY-MM-DD"),
+    backgroundColor: "transparent",
+    borderColor: "transparent",
     textColor: color.text,
     extendedProps: {
       concept: event.concept,
@@ -187,65 +253,57 @@ const createCellContentHTML = (
   const isWeekend = date.getDay() === 0 || date.getDay() === 6;
   const hasZtData = dateData && dateData.count > 0;
   const hasEventCount = dateData?.eventCount && dateData.eventCount > 0;
-  const hasIndexChange = dateData?.indexChange !== undefined && dateData?.indexChange !== null;
+  const hasIndexChange =
+    dateData?.indexChange !== undefined && dateData?.indexChange !== null;
 
   // 日期颜色
-  const dateColor = isToday ? '#FFD700' : isWeekend ? '#FB923C' : '#FFFFFF';
-  const dateFontWeight = isToday ? 'bold' : '600';
+  const dateColor = isToday ? "#FFD700" : isWeekend ? "#FB923C" : "#FFFFFF";
+  const dateFontWeight = isToday ? "bold" : "600";
 
   // 上证涨跌幅
-  let indexChangeHTML = '';
+  let indexChangeHTML = "";
   if (hasIndexChange) {
     const indexChange = dateData.indexChange!;
-    const indexColor = indexChange >= 0 ? '#EF4444' : '#22C55E';
-    const sign = indexChange >= 0 ? '+' : '';
-    indexChangeHTML = `<span style="font-size: 13px; font-weight: 700; color: ${indexColor};">${sign}${indexChange.toFixed(2)}%</span>`;
+    const indexColor = indexChange >= 0 ? "#EF4444" : "#22C55E";
+    const sign = indexChange >= 0 ? "+" : "";
+    indexChangeHTML = `<span style="font-size: 12px; font-weight: 700; color: ${indexColor};">${sign}${indexChange.toFixed(1)}%</span>`;
   }
 
-  // 涨停数据
-  let ztDataHTML = '';
+  // 涨停数据（热度）
+  let ztDataHTML = "";
   if (hasZtData) {
-    const ztColor = dateData.count >= 60 ? '#EF4444' : '#F59E0B';
+    const ztColor = dateData.count >= 60 ? "#EF4444" : "#F59E0B";
     ztDataHTML = `
-      <div style="display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 4px;">
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="${ztColor}" stroke-width="2">
+      <span style="display: inline-flex; align-items: center; gap: 2px;">
+        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="${ztColor}" stroke-width="2">
           <path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/>
         </svg>
-        <span style="font-size: 15px; font-weight: bold; color: ${ztColor};">${dateData.count}</span>
-      </div>
+        <span style="font-size: 12px; font-weight: bold; color: ${ztColor};">${dateData.count}</span>
+      </span>
     `;
   }
 
   // 未来事件计数
-  let eventCountHTML = '';
+  let eventCountHTML = "";
   if (hasEventCount) {
     eventCountHTML = `
-      <div style="display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 4px;">
-        <div style="
-          width: 18px;
-          height: 18px;
-          border-radius: 50%;
-          background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          box-shadow: 0 0 6px rgba(34, 197, 94, 0.4);
-        ">
-          <span style="font-size: 11px; font-weight: bold; color: white;">${dateData.eventCount}</span>
-        </div>
-        <span style="font-size: 13px; color: #22C55E; font-weight: 600;">事件</span>
-      </div>
+      <span style="display: inline-flex; align-items: center; gap: 1px;">
+        <span style="font-size: 12px; font-weight: bold; color: #22C55E;">${dateData.eventCount}</span>
+        <span style="font-size: 10px; color: #22C55E;">事件</span>
+      </span>
     `;
   }
 
   return `
-    <div class="fc-custom-cell-content" style="width: 100%; padding: 4px;">
-      <div style="display: flex; justify-content: space-between; align-items: flex-start;">
-        <span style="font-size: 18px; font-weight: ${dateFontWeight}; color: ${dateColor};">${dayNum}</span>
+    <div class="fc-custom-cell-content" style="width: 100%; padding: 2px 4px;">
+      <div style="display: flex; align-items: center; justify-content: space-between; gap: 3px;">
+        <span style="font-size: 13px; font-weight: ${dateFontWeight}; color: ${dateColor};">${dayNum}</span>
         ${indexChangeHTML}
       </div>
-      ${ztDataHTML}
-      ${eventCountHTML}
+      <div style="display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 2px; height: 12px;">
+        ${ztDataHTML}
+        ${eventCountHTML}
+      </div>
     </div>
   `;
 };
@@ -259,7 +317,7 @@ export const FullCalendarPro: React.FC<FullCalendarProProps> = ({
   onEventClick,
   onMonthChange,
   currentMonth,
-  height = '600px',
+  height = "auto",
 }) => {
   const calendarRef = useRef<FullCalendar>(null);
   const dataMapRef = useRef<Map<string, CalendarEventData>>(new Map());
@@ -270,7 +328,7 @@ export const FullCalendarPro: React.FC<FullCalendarProProps> = ({
   // 创建日期数据映射
   const dataMap = useMemo(() => {
     const map = new Map<string, CalendarEventData>();
-    data.forEach(d => map.set(d.date, d));
+    data.forEach((d) => map.set(d.date, d));
     return map;
   }, [data]);
 
@@ -285,19 +343,19 @@ export const FullCalendarPro: React.FC<FullCalendarProProps> = ({
 
     // 获取所有日期单元格并更新内容
     const calendarEl = calendarRef.current.getApi().el;
-    const dayCells = calendarEl?.querySelectorAll('.fc-daygrid-day');
+    const dayCells = calendarEl?.querySelectorAll(".fc-daygrid-day");
 
     dayCells?.forEach((cell: Element) => {
-      const dateAttr = cell.getAttribute('data-date');
+      const dateAttr = cell.getAttribute("data-date");
       if (!dateAttr) return;
 
       const date = new Date(dateAttr);
-      const dateStr = dayjs(date).format('YYYYMMDD');
+      const dateStr = dayjs(date).format("YYYYMMDD");
       const dateData = dataMapRef.current.get(dateStr);
-      const isToday = dayjs(date).isSame(dayjs(), 'day');
+      const isToday = dayjs(date).isSame(dayjs(), "day");
 
       // 找到 day-top 容器并更新内容
-      const dayTop = cell.querySelector('.fc-daygrid-day-top');
+      const dayTop = cell.querySelector(".fc-daygrid-day-top");
       if (dayTop) {
         dayTop.innerHTML = createCellContentHTML(date, dateData, isToday);
       }
@@ -305,121 +363,135 @@ export const FullCalendarPro: React.FC<FullCalendarProProps> = ({
   }, [dataMap]);
 
   // 处理日期点击
-  const handleDateClick = useCallback((arg: { date: Date; dateStr: string }) => {
-    const dateStr = dayjs(arg.date).format('YYYYMMDD');
-    const dateData = dataMapRef.current.get(dateStr);
-    onDateClick?.(arg.date, dateData);
-  }, [onDateClick]);
+  const handleDateClick = useCallback(
+    (arg: { date: Date; dateStr: string }) => {
+      const dateStr = dayjs(arg.date).format("YYYYMMDD");
+      const dateData = dataMapRef.current.get(dateStr);
+      onDateClick?.(arg.date, dateData);
+    },
+    [onDateClick]
+  );
 
   // 处理事件点击
-  const handleEventClick = useCallback((arg: EventClickArg) => {
-    const { extendedProps } = arg.event;
-    if (arg.event.start && arg.event.end) {
-      onEventClick?.({
-        title: arg.event.title,
-        start: arg.event.start,
-        end: arg.event.end,
-        dates: extendedProps.dates as string[],
-      });
-    }
-  }, [onEventClick]);
+  const handleEventClick = useCallback(
+    (arg: EventClickArg) => {
+      const { extendedProps } = arg.event;
+      if (arg.event.start && arg.event.end) {
+        onEventClick?.({
+          title: arg.event.title,
+          start: arg.event.start,
+          end: arg.event.end,
+          dates: extendedProps.dates as string[],
+        });
+      }
+    },
+    [onEventClick]
+  );
 
   // 处理月份变化
-  const handleDatesSet = useCallback((arg: DatesSetArg) => {
-    const visibleDate = arg.view.currentStart;
-    onMonthChange?.(visibleDate.getFullYear(), visibleDate.getMonth() + 1);
-  }, [onMonthChange]);
+  const handleDatesSet = useCallback(
+    (arg: DatesSetArg) => {
+      const visibleDate = arg.view.currentStart;
+      onMonthChange?.(visibleDate.getFullYear(), visibleDate.getMonth() + 1);
+    },
+    [onMonthChange]
+  );
 
   // 单元格挂载时插入自定义内容
   const handleDayCellDidMount = useCallback((arg: DayCellMountArg) => {
     const { date, el, isToday } = arg;
-    const dateStr = dayjs(date).format('YYYYMMDD');
+    const dateStr = dayjs(date).format("YYYYMMDD");
     const dateData = dataMapRef.current.get(dateStr);
 
     // 找到 day-top 容器并插入自定义内容
-    const dayTop = el.querySelector('.fc-daygrid-day-top');
+    const dayTop = el.querySelector(".fc-daygrid-day-top");
     if (dayTop) {
       // 清空默认内容
-      dayTop.innerHTML = '';
+      dayTop.innerHTML = "";
       // 插入自定义内容
       dayTop.innerHTML = createCellContentHTML(date, dateData, isToday);
     }
   }, []);
 
   // 自定义事件内容（跨天条）
-  const eventContent = useCallback((arg: { event: { title: string; extendedProps: Record<string, unknown> } }) => {
-    const { extendedProps } = arg.event;
-    const daysCount = extendedProps.daysCount as number;
-    const totalCount = extendedProps.totalCount as number;
-    const textColor = (extendedProps.textColor as string) || '#fff';
-    const gradient = extendedProps.gradient as string;
-    const borderColor = extendedProps.borderColor as string;
+  const eventContent = useCallback(
+    (arg: {
+      event: { title: string; extendedProps: Record<string, unknown> };
+    }) => {
+      const { extendedProps } = arg.event;
+      const daysCount = extendedProps.daysCount as number;
+      const totalCount = extendedProps.totalCount as number;
+      const textColor = (extendedProps.textColor as string) || "#fff";
+      const gradient = extendedProps.gradient as string;
+      const borderColor = extendedProps.borderColor as string;
 
-    return (
-      <Tooltip
-        label={
-          <VStack spacing={1} align="start" p={1}>
-            <Text fontWeight="bold">{arg.event.title}</Text>
-            <Text fontSize="xs">连续 {daysCount} 天</Text>
-            <Text fontSize="xs">累计涨停 {totalCount} 家</Text>
-          </VStack>
-        }
-        placement="top"
-        hasArrow
-        bg="rgba(15, 15, 22, 0.95)"
-        border="1px solid rgba(212, 175, 55, 0.3)"
-        borderRadius="md"
-      >
-        <Box
-          w="100%"
-          h="26px"
-          bg={gradient}
-          borderRadius="lg"
-          border={`1px solid ${borderColor}`}
-          display="flex"
-          alignItems="center"
-          justifyContent="center"
-          cursor="pointer"
-          transition="all 0.2s"
-          _hover={{
-            transform: 'scale(1.02)',
-            boxShadow: `0 0 12px ${borderColor}`,
-          }}
-          overflow="hidden"
-          position="relative"
+      return (
+        <Tooltip
+          label={
+            <VStack spacing={1} align="start" p={1}>
+              <Text fontWeight="bold" color="white">{arg.event.title}</Text>
+              <Text fontSize="xs" color="white">连续 {daysCount} 天</Text>
+              <Text fontSize="xs" color="white">累计涨停 {totalCount} 家</Text>
+            </VStack>
+          }
+          placement="top"
+          hasArrow
+          bg="rgba(15, 15, 22, 0.95)"
+          border="1px solid rgba(212, 175, 55, 0.3)"
+          borderRadius="md"
         >
-          {/* 闪光效果 */}
           <Box
-            position="absolute"
-            top="0"
-            left="0"
-            right="0"
-            bottom="0"
-            bgGradient="linear(to-r, transparent, rgba(255,255,255,0.3), transparent)"
-            backgroundSize="200% 100%"
-            animation={`${shimmer} 3s linear infinite`}
-            opacity={0.5}
-          />
-          <Text
-            fontSize="sm"
-            fontWeight="bold"
-            color={textColor}
-            noOfLines={1}
-            px={3}
+            w="100%"
+            h="18px"
+            bg={gradient}
+            borderRadius="md"
+            border={`1px solid ${borderColor}`}
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+            cursor="pointer"
+            transition="all 0.2s"
+            _hover={{
+              transform: "scale(1.02)",
+              boxShadow: `0 0 12px ${borderColor}`,
+            }}
+            overflow="hidden"
             position="relative"
-            zIndex={1}
           >
-            {arg.event.title}
-            {daysCount > 1 && (
-              <Text as="span" fontSize="xs" ml={1} opacity={0.8}>
-                ({daysCount}天)
-              </Text>
-            )}
-          </Text>
-        </Box>
-      </Tooltip>
-    );
-  }, []);
+            {/* 闪光效果 */}
+            <Box
+              position="absolute"
+              top="0"
+              left="0"
+              right="0"
+              bottom="0"
+              bgGradient="linear(to-r, transparent, rgba(255,255,255,0.3), transparent)"
+              backgroundSize="200% 100%"
+              animation={`${shimmer} 3s linear infinite`}
+              opacity={0.5}
+            />
+            <Text
+              fontSize="xs"
+              fontWeight="bold"
+              color={textColor}
+              noOfLines={1}
+              px={2}
+              position="relative"
+              zIndex={1}
+            >
+              {arg.event.title}
+              {daysCount > 1 && (
+                <Text as="span" fontSize="2xs" ml={1} opacity={0.8}>
+                  ({daysCount}天)
+                </Text>
+              )}
+            </Text>
+          </Box>
+        </Tooltip>
+      );
+    },
+    []
+  );
 
   return (
     <Box
@@ -427,108 +499,130 @@ export const FullCalendarPro: React.FC<FullCalendarProProps> = ({
       position="relative"
       sx={{
         // FullCalendar 深色主题样式
-        '.fc': {
-          fontFamily: 'inherit',
+        ".fc": {
+          fontFamily: "inherit",
         },
-        '.fc-theme-standard': {
-          bg: 'transparent',
+        ".fc-theme-standard": {
+          bg: "transparent",
         },
-        '.fc-theme-standard td, .fc-theme-standard th': {
-          borderColor: 'rgba(212, 175, 55, 0.15)',
+        ".fc-theme-standard td, .fc-theme-standard th": {
+          borderColor: "rgba(212, 175, 55, 0.15)",
         },
-        '.fc-theme-standard .fc-scrollgrid': {
-          borderColor: 'rgba(212, 175, 55, 0.2)',
+        ".fc-theme-standard .fc-scrollgrid": {
+          borderColor: "rgba(212, 175, 55, 0.2)",
         },
         // 工具栏
-        '.fc-toolbar-title': {
-          fontSize: '1.5rem !important',
-          fontWeight: 'bold !important',
-          background: 'linear-gradient(135deg, #FFD700 0%, #F5E6A3 100%)',
-          backgroundClip: 'text',
-          WebkitBackgroundClip: 'text',
-          color: 'transparent',
+        ".fc-toolbar": {
+          marginBottom: "0.5em !important",
         },
-        '.fc-button': {
-          bg: 'rgba(212, 175, 55, 0.2) !important',
-          border: '1px solid rgba(212, 175, 55, 0.4) !important',
-          color: '#FFD700 !important',
-          borderRadius: '8px !important',
-          transition: 'all 0.2s !important',
-          '&:hover': {
-            bg: 'rgba(212, 175, 55, 0.3) !important',
-            transform: 'scale(1.05)',
+        ".fc-toolbar-title": {
+          fontSize: "0.95rem !important",
+          fontWeight: "bold !important",
+          background: "linear-gradient(135deg, #FFD700 0%, #F5E6A3 100%)",
+          backgroundClip: "text",
+          WebkitBackgroundClip: "text",
+          color: "transparent",
+        },
+        ".fc-button": {
+          bg: "rgba(212, 175, 55, 0.2) !important",
+          border: "1px solid rgba(212, 175, 55, 0.4) !important",
+          color: "#FFD700 !important",
+          borderRadius: "6px !important",
+          padding: "4px 8px !important",
+          fontSize: "12px !important",
+          transition: "all 0.2s !important",
+          "&:hover": {
+            bg: "rgba(212, 175, 55, 0.3) !important",
+            transform: "scale(1.05)",
           },
-          '&:disabled': {
+          "&:disabled": {
             opacity: 0.5,
           },
         },
-        '.fc-button-active': {
-          bg: 'rgba(212, 175, 55, 0.4) !important',
+        ".fc-button-active": {
+          bg: "rgba(212, 175, 55, 0.4) !important",
         },
         // 星期头
-        '.fc-col-header-cell': {
-          bg: 'rgba(212, 175, 55, 0.1)',
-          py: '12px !important',
+        ".fc-col-header": {
+          bg: "rgba(15, 15, 22, 0.95) !important",
         },
-        '.fc-col-header-cell-cushion': {
-          color: '#FFD700 !important',
-          fontWeight: '600 !important',
-          fontSize: '14px',
+        ".fc-col-header-cell": {
+          bg: "transparent !important",
+          py: "6px !important",
+          borderColor: "rgba(255, 215, 0, 0.1) !important",
+        },
+        ".fc-col-header-cell-cushion": {
+          color: "white !important",
+          fontWeight: "600 !important",
+          fontSize: "12px",
+        },
+        ".fc-scrollgrid-section-header": {
+          bg: "rgba(15, 15, 22, 0.95) !important",
+        },
+        ".fc-scrollgrid-section-header > td": {
+          bg: "rgba(15, 15, 22, 0.95) !important",
+          borderColor: "rgba(255, 215, 0, 0.1) !important",
         },
         // 日期格子
-        '.fc-daygrid-day': {
-          bg: 'rgba(15, 15, 22, 0.4)',
-          transition: 'all 0.2s',
-          cursor: 'pointer',
-          '&:hover': {
-            bg: 'rgba(212, 175, 55, 0.1)',
+        ".fc-daygrid-day": {
+          bg: "rgba(15, 15, 22, 0.4)",
+          transition: "all 0.2s",
+          cursor: "pointer",
+          "&:hover": {
+            bg: "rgba(212, 175, 55, 0.1)",
           },
         },
-        '.fc-daygrid-day.fc-day-today': {
-          bg: 'rgba(212, 175, 55, 0.15) !important',
+        ".fc-daygrid-day.fc-day-today": {
+          bg: "rgba(212, 175, 55, 0.15) !important",
           animation: `${glow} 2s ease-in-out infinite`,
         },
-        '.fc-daygrid-day-frame': {
-          minHeight: '110px',
+        ".fc-daygrid-day-frame": {
+          minHeight: "50px",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "space-between",
         },
-        '.fc-daygrid-day-top': {
-          width: '100%',
-          padding: '0 !important',
-          flexDirection: 'column',
+        ".fc-daygrid-day-top": {
+          width: "100%",
+          padding: "0 !important",
+          flexDirection: "column",
         },
         // 隐藏 FullCalendar 默认的日期数字链接
-        '.fc-daygrid-day-top a.fc-daygrid-day-number': {
-          display: 'none !important',
+        ".fc-daygrid-day-top a.fc-daygrid-day-number": {
+          display: "none !important",
         },
         // 非当月日期
-        '.fc-day-other': {
+        ".fc-day-other": {
           opacity: 0.4,
         },
         // 自定义单元格内容样式
-        '.fc-custom-cell-content': {
-          width: '100%',
+        ".fc-custom-cell-content": {
+          width: "100%",
         },
         // 日期内容区域
-        '.fc-daygrid-day-events': {
-          marginTop: '0 !important',
+        ".fc-daygrid-day-events": {
+          marginTop: "auto !important",
+          marginBottom: "0 !important",
+          paddingBottom: "0 !important",
         },
         // 事件
-        '.fc-daygrid-event': {
-          borderRadius: '8px',
-          border: 'none !important',
-          margin: '3px 4px !important',
+        ".fc-daygrid-event": {
+          borderRadius: "6px",
+          border: "none !important",
+          margin: "0 3px !important",
+          marginBottom: "0 !important",
         },
-        '.fc-event-main': {
-          padding: '0 !important',
+        ".fc-event-main": {
+          padding: "0 !important",
         },
-        '.fc-daygrid-event-harness': {
-          marginTop: '3px',
+        ".fc-daygrid-event-harness": {
+          marginTop: "2px",
         },
         // 更多事件链接
-        '.fc-daygrid-more-link': {
-          color: '#FFD700 !important',
-          fontWeight: '600',
-          fontSize: '11px',
+        ".fc-daygrid-more-link": {
+          color: "#FFD700 !important",
+          fontWeight: "600",
+          fontSize: "11px",
         },
       }}
     >
@@ -539,12 +633,12 @@ export const FullCalendarPro: React.FC<FullCalendarProProps> = ({
         initialDate={currentMonth}
         locale="zh-cn"
         headerToolbar={{
-          left: 'prev,next today',
-          center: 'title',
-          right: '',
+          left: "prev,next today",
+          center: "title",
+          right: "",
         }}
         buttonText={{
-          today: '今天',
+          today: "今天",
         }}
         events={events}
         dateClick={handleDateClick}
@@ -555,7 +649,8 @@ export const FullCalendarPro: React.FC<FullCalendarProProps> = ({
         dayMaxEvents={3}
         moreLinkText={(n) => `+${n} 更多`}
         fixedWeekCount={false}
-        height="100%"
+        height="auto"
+        contentHeight="auto"
       />
     </Box>
   );