init

2025-08-15 16:16:41 +08:00
commit 182abccc60
171 changed files with 26833 additions and 0 deletions
--- a/src/pages/CalendarPage/components/MonthView.jsx
+++ b/src/pages/CalendarPage/components/MonthView.jsx
@@ -0,0 +1,127 @@
+import React from "react";
+import { getMonthDays } from "@/data/mockData";
+
+const MonthView = ({
+  currentDate,
+  events,
+  onDateClick,
+  onEventClick,
+  selectedDate,
+}) => {
+  const year = currentDate.getFullYear();
+  const month = currentDate.getMonth();
+  const days = getMonthDays(year, month);
+  const weekDays = ["日", "一", "二", "三", "四", "五", "六"];
+
+  // 获取指定日期的事件
+  const getEventsForDate = (date, month, year) => {
+    if (!events || events.length === 0) return [];
+
+    const dateString = `${year}-${(month + 1)
+      .toString()
+      .padStart(2, "0")}-${date.toString().padStart(2, "0")}`;
+
+    return events.filter((event) => {
+      const eventDate = event.startTime.split(" ")[0];
+      return eventDate === dateString;
+    });
+  };
+
+  const handleDateClick = (day) => {
+    if (onDateClick) {
+      const clickedDate = new Date(day.year, day.month, day.date);
+      onDateClick(clickedDate);
+    }
+  };
+
+  const isSelected = (day) => {
+    if (!selectedDate) return false;
+    return (
+      selectedDate.getFullYear() === day.year &&
+      selectedDate.getMonth() === day.month &&
+      selectedDate.getDate() === day.date
+    );
+  };
+
+  const renderEventItem = (event, index, dayEvents) => {
+    const maxVisible = 3; // 每个日期最多显示3个事件
+
+    if (
+      index >= maxVisible - 1 &&
+      index === maxVisible - 1 &&
+      dayEvents.length > maxVisible
+    ) {
+      // 显示"更多"指示器
+      const remainingCount = dayEvents.length - maxVisible + 1;
+      return (
+        <div key={`more-${index}`} className="event-more">
+          +{remainingCount}更多
+        </div>
+      );
+    }
+
+    if (index >= maxVisible) return null;
+
+    return (
+      <div
+        key={event.id}
+        className={`event-item ${event.type}`}
+        title={`${event.title} (${event.startTime.split(" ")[1]} - ${
+          event.endTime.split(" ")[1]
+        })`}
+        onClick={(e) => {
+          e.stopPropagation();
+          if (onEventClick) {
+            onEventClick(event);
+          } else {
+          }
+        }}
+      >
+        {event.title}
+      </div>
+    );
+  };
+
+  return (
+    <div className="month-view">
+      {/* 星期标题 */}
+      <div className="month-header">
+        {weekDays.map((day) => (
+          <div key={day} className="weekday-header">
+            {day}
+          </div>
+        ))}
+      </div>
+
+      {/* 日期网格 */}
+      <div className="month-grid">
+        {days.map((day, index) => {
+          const dayEvents = getEventsForDate(day.date, day.month, day.year);
+          const isToday = day.isToday;
+          const isCurrentMonth = day.isCurrentMonth;
+          const isSelectedDate = isSelected(day);
+
+          return (
+            <div
+              key={index}
+              className={`day-cell ${!isCurrentMonth ? "other-month" : ""} ${
+                isToday ? "today" : ""
+              } ${isSelectedDate ? "selected" : ""}`}
+              onClick={() => handleDateClick(day)}
+            >
+              <div className="day-number">{day.date}</div>
+
+              <div className="event-list">
+                {dayEvents.map((event, eventIndex) =>
+                  renderEventItem(event, eventIndex, dayEvents)
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default MonthView;