feat: 添加AI课程集成和修复初始化错误

- 将终生学习系统课添加到公共课直播间
- 修复allCalendarEvents初始化顺序问题
- 更正AI课程导师为李奇
- 添加AI课程与日历页面同步功能

src/pages/CalendarPage/components/EventDetailModal.jsx

@@ -1,5 +1,6 @@
 import { useEffect } from "react";
 import Portal from "@/components/Portal";
+import { IconCalendarClock, IconCheck, IconClockCircle } from "@arco-design/web-react/icon";
 
 const EventDetailModal = ({ isOpen, event, onClose }) => {
   // ESC键关闭模态框
@@ -25,11 +26,29 @@ const EventDetailModal = ({ isOpen, event, onClose }) => {
   }
 
   // 事件类型映射
-  const eventTypeNames = {
-    class: "课程",
-    meeting: "会议",
-    lab: "实验",
-    exam: "考试",
+  const eventTypeMap = {
+    'compound-skill': '复合技能课',
+    'vertical-skill': '垂直技能课',
+    'public-course': '公开课',
+    'one-on-one': '1v1规划',
+    'interview': '线下面试模拟',
+    'class': '课程',
+    'meeting': '会议',
+    'lab': '实验',
+    'exam': '考试',
+  };
+
+  // 事件类型颜色映射
+  const eventTypeColorMap = {
+    'compound-skill': { bg: '#667eea', light: '#e0e7ff' },
+    'vertical-skill': { bg: '#22c55e', light: '#dcfce7' },
+    'public-course': { bg: '#f59e0b', light: '#fef3c7' },
+    'one-on-one': { bg: '#ec4899', light: '#fce7f3' },
+    'interview': { bg: '#3b82f6', light: '#dbeafe' },
+    'class': { bg: '#667eea', light: '#e0e7ff' },
+    'meeting': { bg: '#f093fb', light: '#fae8ff' },
+    'lab': { bg: '#fa709a', light: '#fce7f3' },
+    'exam': { bg: '#ff6b6b', light: '#fee2e2' },
   };
 
   // 处理遮罩层点击
@@ -45,89 +64,129 @@ const EventDetailModal = ({ isOpen, event, onClose }) => {
   };
 
   // 格式化时间显示
-  const formatTimeRange = (startTime, endTime) => {
-    const startDate = new Date(startTime.replace(" ", "T"));
-    const endDate = new Date(endTime.replace(" ", "T"));
-
-    const formatTime = (date) => {
-      return date.toLocaleTimeString("zh-CN", {
-        hour: "2-digit",
-        minute: "2-digit",
-        hour12: false,
-      });
-    };
-
-    const formatDate = (date) => {
-      return date.toLocaleDateString("zh-CN", {
-        year: "numeric",
-        month: "long",
-        day: "numeric",
-        weekday: "long",
-      });
-    };
-
-    return {
-      date: formatDate(startDate),
-      timeRange: `${formatTime(startDate)} - ${formatTime(endDate)}`,
-    };
+  const formatTime = (timeStr) => {
+    if (!timeStr) return '';
+    
+    // 处理多种格式: "2024-09-18 09:00:00" 或 "2024-09-18 09:00" 或 "09:00:00" 或 "09:00"
+    const parts = timeStr.toString().split(' ');
+    let time = '';
+    
+    if (parts.length > 1) {
+      // 格式如 "2024-09-18 09:00:00" 或 "2024-09-18 09:00"
+      time = parts[1];
+    } else {
+      // 格式如 "09:00:00" 或 "09:00"
+      time = parts[0];
+    }
+    
+    // 确保时间存在且格式正确
+    if (!time || time === 'undefined') {
+      return '00:00';
+    }
+    
+    // 只显示小时和分钟 (前5个字符)
+    return time.substring(0, 5);
   };
 
-  const { date, timeRange } = formatTimeRange(event.startTime, event.endTime);
+  // 格式化日期
+  const formatDate = (date) => {
+    if (!date) return '';
+    const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
+    return date.toLocaleDateString('zh-CN', options);
+  };
+
+  // 判断是否为多事件模式（点击日期时显示当天所有事件）
+  const isMultiEventMode = event.events && Array.isArray(event.events);
+  const events = isMultiEventMode ? event.events : [event];
+  const displayDate = isMultiEventMode ? formatDate(event.date) : '';
+
+  // 获取事件状态 - 所有事项都显示为已完成
+  const getEventStatus = (eventItem) => {
+    return { text: '已完成', icon: <IconCheck />, color: '#52c41a' };
+  };
 
   return (
     <Portal className="event-detail-portal">
       <div className="event-detail-overlay" onClick={handleOverlayClick}>
-        <div className="event-detail-modal">
+        <div className="event-detail-modal-new">
           {/* 模态框头部 */}
-          <div className="event-detail-header">
-            <h3 className="event-detail-title">事件详情</h3>
+          <div className="event-detail-header-new">
+            <h3 className="event-detail-title-new">
+              {isMultiEventMode ? '日程详情' : '事件详情'}
+            </h3>
             <button
-              className="event-detail-close"
+              className="event-detail-close-new"
               onClick={handleCloseClick}
               type="button"
+              aria-label="关闭"
             >
-              ×
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
+              </svg>
             </button>
           </div>
 
+          {/* 日期显示（多事件模式） */}
+          {isMultiEventMode && (
+            <div className="event-detail-date-header">
+              <IconCalendarClock style={{ fontSize: 20, color: '#3b82f6' }} />
+              <span>{displayDate}</span>
+            </div>
+          )}
+
           {/* 模态框内容 */}
-          <div className="event-detail-content">
-            {/* 事件标题 */}
-            <div className="event-detail-field">
-              <div className="event-detail-label">事件标题</div>
-              <div className="event-detail-value">{event.title}</div>
-            </div>
-
-            {/* 事件类型 */}
-            <div className="event-detail-field">
-              <div className="event-detail-label">事件类型</div>
-              <div className="event-detail-value">
-                <span className={`event-type-badge event-type-${event.type}`}>
-                  {eventTypeNames[event.type] || event.type}
-                </span>
+          <div className="event-detail-content-new">
+            {events.length === 0 ? (
+              <div className="event-empty-state">
+                <IconCalendarClock style={{ fontSize: 48, color: '#c3c5c9', marginBottom: 16 }} />
+                <p style={{ fontSize: 16, color: '#86909c', margin: 0 }}>当日无事项</p>
               </div>
+            ) : (
+            <div className="event-list-container">
+              {events.map((eventItem, index) => {
+                const status = getEventStatus(eventItem);
+                const typeColor = eventTypeColorMap[eventItem.type] || { bg: '#667eea', light: '#e0e7ff' };
+                
+                return (
+                  <div key={eventItem.id || index} className="event-card-new">
+                    <div className="event-card-header">
+                      <div className="event-type-indicator" style={{ backgroundColor: typeColor.bg }}></div>
+                      <div className="event-card-title">
+                        <h4>{eventItem.title}</h4>
+                        <span className="event-type-tag" style={{ 
+                          backgroundColor: typeColor.light,
+                          color: typeColor.bg
+                        }}>
+                          {eventTypeMap[eventItem.type] || eventItem.type}
+                        </span>
+                      </div>
+                    </div>
+                    
+                    <div className="event-card-body">
+                      <div className="event-info-row">
+                        <IconClockCircle style={{ fontSize: 16, color: '#8c8c8c' }} />
+                        <span className="event-time">
+                          {formatTime(eventItem.startTime)} - {formatTime(eventItem.endTime)}
+                        </span>
+                      </div>
+                      
+                      <div className="event-info-row">
+                        <div className="event-status" style={{ color: status.color }}>
+                          {status.icon}
+                          <span>{status.text}</span>
+                        </div>
+                      </div>
+                      
+                      {eventItem.description && (
+                        <div className="event-description">
+                          {eventItem.description}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
             </div>
-
-            {/* 日期 */}
-            <div className="event-detail-field">
-              <div className="event-detail-label">日期</div>
-              <div className="event-detail-value">{date}</div>
-            </div>
-
-            {/* 时间 */}
-            <div className="event-detail-field">
-              <div className="event-detail-label">时间</div>
-              <div className="event-detail-value">
-                <div className="event-time-range">{timeRange}</div>
-              </div>
-            </div>
-
-            {/* 详细描述 */}
-            {event.description && (
-              <div className="event-detail-field">
-                <div className="event-detail-label">详细描述</div>
-                <div className="event-detail-value">{event.description}</div>
-              </div>
             )}
           </div>
         </div>
@@ -136,4 +195,4 @@ const EventDetailModal = ({ isOpen, event, onClose }) => {
   );
 };
 
-export default EventDetailModal;
+export default EventDetailModal;