feat: complete remaining PRD tasks — RBAC nodes and staff split, schedule month view, auto-generate attendance from schedules, plus fix TypeORM name

apps/admin/src/pages/Schedules/index.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect, useState, useMemo, useCallback } from 'react';
 import {
   Card, Button, Select, Modal, Form, Input, DatePicker, TimePicker,
-  Popconfirm, message, Space, Spin, Empty, Tag, Tooltip,
+  Popconfirm, message, Space, Spin, Empty, Tag, Tooltip, Segmented,
+  Badge,
 } from 'antd';
 import {
   CalendarOutlined,
@@ -61,8 +62,12 @@ const WEEKDAY_NUMBERS = [1, 2, 3, 4, 5, 6, 7];
 // ---- Component ----
 
 const SchedulesPage: React.FC = () => {
-  // Week navigation
-  const [weekStart, setWeekStart] = useState<Dayjs>(() => dayjs().weekday(1).startOf('day'));
+  // View mode and navigation
+  const [viewMode, setViewMode] = useState<'week' | 'month'>('week');
+  const [viewDate, setViewDate] = useState<Dayjs>(() => dayjs().weekday(1).startOf('day'));
+
+  // Modal date selection (month view)
+  const [selectedDate, setSelectedDate] = useState<Dayjs | null>(null);
 
   // Data
   const [classrooms, setClassrooms] = useState<ClassroomItem[]>([]);
@@ -85,12 +90,48 @@ const SchedulesPage: React.FC = () => {
   const [submitting, setSubmitting] = useState(false);
   const [form] = Form.useForm<ScheduleFormValues>();
 
-  // Derived week info
+  // Derived week/month info
+  const weekStart = useMemo(() => viewDate.weekday(1).startOf('day'), [viewDate]);
+  const monthStart = useMemo(() => viewDate.startOf('month'), [viewDate]);
   const weekEnd = useMemo(() => weekStart.add(6, 'day'), [weekStart]);
   const weekNum = useMemo(() => weekStart.week(), [weekStart]);
   const weekYear = useMemo(() => weekStart.year(), [weekStart]);
-  const startDateStr = useMemo(() => weekStart.format('YYYY-MM-DD'), [weekStart]);
-  const endDateStr = useMemo(() => weekEnd.format('YYYY-MM-DD'), [weekEnd]);
+  const calendarDays = useMemo(() => {
+    const monthEnd = monthStart.endOf('month');
+    const startOffset = (monthStart.day() + 6) % 7;
+    const endOffset = (7 - monthEnd.day()) % 7;
+    const start = monthStart.subtract(startOffset, 'day');
+    const end = monthEnd.add(endOffset, 'day');
+    const totalDays = end.diff(start, 'day') + 1;
+    const days: Dayjs[] = [];
+    for (let i = 0; i < totalDays; i++) {
+      days.push(start.add(i, 'day'));
+    }
+    return days;
+  }, [monthStart]);
+
+  const weeks = useMemo(() => {
+    const result: Dayjs[][] = [];
+    for (let i = 0; i < calendarDays.length; i += 7) {
+      result.push(calendarDays.slice(i, i + 7));
+    }
+    return result;
+  }, [calendarDays]);
+
+  const startDateStr = useMemo(() => {
+    if (viewMode === 'month') {
+      return calendarDays[0].format('YYYY-MM-DD');
+    }
+    return weekStart.format('YYYY-MM-DD');
+  }, [viewMode, weekStart, calendarDays]);
+
+  const endDateStr = useMemo(() => {
+    if (viewMode === 'month') {
+      return calendarDays[calendarDays.length - 1].format('YYYY-MM-DD');
+    }
+    return weekEnd.format('YYYY-MM-DD');
+  }, [viewMode, weekEnd, calendarDays]);
+
 
   // ---- Data fetching ----
 
@@ -159,10 +200,30 @@ const SchedulesPage: React.FC = () => {
     return filtered;
   }, [matrix, filterClassId]);
 
+  const monthScheduleMap = useMemo(() => {
+    const map: Record<string, ClassScheduleItem[]> = {};
+    for (const day of calendarDays) {
+      const wd = day.day() === 0 ? 7 : day.day();
+      const dateStr = day.format('YYYY-MM-DD');
+      const result: ClassScheduleItem[] = [];
+      for (const classroom of filteredClassrooms) {
+        const daySchedules = displayMatrix[classroom.id]?.[wd] || [];
+        for (const s of daySchedules) {
+          if (dateStr >= s.startDate && dateStr <= s.endDate) {
+            result.push(s);
+          }
+        }
+      }
+      map[dateStr] = result;
+    }
+    return map;
+  }, [calendarDays, displayMatrix, filteredClassrooms]);
+
   // ---- Cell click handlers ----
   const handleCellClick = (classroomId: number, weekDay: number) => {
     const schedules = displayMatrix[classroomId]?.[weekDay] || [];
     setSelectedCell({ classroomId, weekDay });
+    setSelectedDate(null);
 
     if (schedules.length > 0) {
       setSelectedSchedules(schedules);
@@ -175,6 +236,31 @@ const SchedulesPage: React.FC = () => {
     }
   };
 
+  const getSchedulesForDate = (date: Dayjs): ClassScheduleItem[] => {
+    const wd = date.day() === 0 ? 7 : date.day();
+    const dateStr = date.format('YYYY-MM-DD');
+    const result: ClassScheduleItem[] = [];
+    for (const classroom of filteredClassrooms) {
+      const daySchedules = displayMatrix[classroom.id]?.[wd] || [];
+      for (const s of daySchedules) {
+        if (dateStr >= s.startDate && dateStr <= s.endDate) {
+          result.push(s);
+        }
+      }
+    }
+    return result;
+  };
+
+  const handleDateClick = (date: Dayjs) => {
+    const dateKey = date.format('YYYY-MM-DD');
+    const schedules = monthScheduleMap[dateKey] || getSchedulesForDate(date);
+    setSelectedDate(date);
+    setSelectedCell(null);
+    setSelectedSchedules(schedules);
+    setModalMode('detail');
+    setModalOpen(true);
+  };
+
   // ---- Create schedule ----
 
   const handleSubmit = async () => {
@@ -214,13 +300,11 @@ const SchedulesPage: React.FC = () => {
     try {
       await api.delete(`/class-schedules/${id}`);
       message.success('排课已删除');
-      // Refresh the cell's schedules
-      if (selectedCell) {
-        const remaining = selectedSchedules.filter((s) => s.id !== id);
-        setSelectedSchedules(remaining);
-        if (remaining.length === 0) {
-          setModalOpen(false);
-        }
+      // Refresh the displayed schedules
+      const remaining = selectedSchedules.filter((s) => s.id !== id);
+      setSelectedSchedules(remaining);
+      if (remaining.length === 0) {
+        setModalOpen(false);
       }
       fetchData();
     } catch (e: unknown) {
@@ -273,24 +357,57 @@ const SchedulesPage: React.FC = () => {
           <h3 style={{ margin: 0 }}>排课管理</h3>
         </Space>
         <Space>
-          <Button
-            icon={<LeftOutlined />}
-            onClick={() => setWeekStart(weekStart.subtract(7, 'day'))}
-          >
-            上一周
-          </Button>
-          <span style={{ fontWeight: 500, fontSize: 15 }}>
-            {weekYear} W{weekNum}
-            <span style={{ color: '#8c8c8c', fontWeight: 400, fontSize: 13, marginLeft: 6 }}>
-              ({startDateStr} ~ {endDateStr})
-            </span>
-          </span>
-          <Button
-            icon={<RightOutlined />}
-            onClick={() => setWeekStart(weekStart.add(7, 'day'))}
-          >
-            下一周
-          </Button>
+          <Segmented
+            value={viewMode}
+            onChange={(v) => {
+              setViewMode(v as 'week' | 'month');
+              setSelectedDate(null);
+            }}
+            options={[
+              { label: '周视图', value: 'week' },
+              { label: '月视图', value: 'month' },
+            ]}
+          />
+          {viewMode === 'week' ? (
+            <>
+              <Button
+                icon={<LeftOutlined />}
+                onClick={() => setViewDate(viewDate.subtract(7, 'day'))}
+              >
+                上一周
+              </Button>
+              <span style={{ fontWeight: 500, fontSize: 15 }}>
+                {weekYear} W{weekNum}
+                <span style={{ color: '#8c8c8c', fontWeight: 400, fontSize: 13, marginLeft: 6 }}>
+                  ({startDateStr} ~ {endDateStr})
+                </span>
+              </span>
+              <Button
+                icon={<RightOutlined />}
+                onClick={() => setViewDate(viewDate.add(7, 'day'))}
+              >
+                下一周
+              </Button>
+            </>
+          ) : (
+            <>
+              <Button
+                icon={<LeftOutlined />}
+                onClick={() => setViewDate(viewDate.subtract(1, 'month'))}
+              >
+                上一月
+              </Button>
+              <span style={{ fontWeight: 500, fontSize: 15 }}>
+                {monthStart.format('YYYY年 M月')}
+              </span>
+              <Button
+                icon={<RightOutlined />}
+                onClick={() => setViewDate(viewDate.add(1, 'month'))}
+              >
+                下一月
+              </Button>
+            </>
+          )}
         </Space>
       </div>
 
@@ -322,7 +439,7 @@ const SchedulesPage: React.FC = () => {
       <Spin spinning={loading}>
         {classrooms.length === 0 ? (
           <Empty description="暂无教室数据" />
-        ) : (
+        ) : (viewMode === 'week' ? (
           <div style={{ overflowX: 'auto' }}>
             <table
               style={{
@@ -455,7 +572,88 @@ const SchedulesPage: React.FC = () => {
               </tbody>
             </table>
           </div>
-        )}
+        ) : (
+          <div style={{ overflowX: 'auto' }}>
+            <table
+              style={{
+                width: '100%',
+                borderCollapse: 'collapse',
+                fontSize: 13,
+                tableLayout: 'fixed',
+              }}
+            >
+              <thead>
+                <tr style={{ background: '#fafafa' }}>
+                  {['周一', '周二', '周三', '周四', '周五', '周六', '周日'].map((d) => (
+                    <th
+                      key={d}
+                      style={{
+                        padding: '10px 8px',
+                        border: '1px solid #f0f0f0',
+                        textAlign: 'center',
+                        fontWeight: 500,
+                      }}
+                    >
+                      {d}
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {weeks.map((week, wi) => (
+                  <tr key={wi}>
+                    {week.map((day, di) => {
+                      const isCurrentMonth = day.month() === monthStart.month();
+                      const dateKey = day.format('YYYY-MM-DD');
+                      const daySchedules = monthScheduleMap[dateKey] || [];
+                      const count = daySchedules.length;
+                      return (
+                        <td
+                          key={di}
+                          onClick={() => handleDateClick(day)}
+                          style={{
+                            padding: '6px 8px',
+                            border: '1px solid #f0f0f0',
+                            verticalAlign: 'top',
+                            cursor: 'pointer',
+                            height: 90,
+                            background: isCurrentMonth ? '#fff' : '#fafafa',
+                            transition: 'background 0.15s',
+                          }}
+                          onMouseEnter={(e) => {
+                            (e.currentTarget as HTMLElement).style.background = isCurrentMonth ? '#f0f5ff' : '#f0f0f0';
+                          }}
+                          onMouseLeave={(e) => {
+                            (e.currentTarget as HTMLElement).style.background = isCurrentMonth ? '' : '#fafafa';
+                          }}
+                        >
+                          <div
+                            style={{
+                              fontWeight: isCurrentMonth ? 600 : 400,
+                              color: isCurrentMonth ? '#262626' : '#bfbfbf',
+                              fontSize: 14,
+                              marginBottom: 4,
+                            }}
+                          >
+                            {day.date()}
+                          </div>
+                          {count > 0 && (
+                            <Badge
+                              count={count}
+                              size="small"
+                              overflowCount={99}
+                              style={{ backgroundColor: '#1677ff' }}
+                            />
+                          )}
+                        </td>
+                      );
+                    })}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        ))}
       </Spin>
 
       {/* Modal */}
@@ -463,7 +661,9 @@ const SchedulesPage: React.FC = () => {
         title={
           modalMode === 'create'
             ? `新增排课 — ${selectedClassroom?.name || ''} · ${selectedCell ? WEEKDAYS[selectedCell.weekDay - 1] : ''}`
-            : `排课详情 — ${selectedClassroom?.name || ''} · ${selectedCell ? WEEKDAYS[selectedCell.weekDay - 1] : ''}`
+            : selectedDate
+              ? `排课详情 — ${selectedDate.format('YYYY-MM-DD')} ${WEEKDAYS[selectedDate.day() === 0 ? 6 : selectedDate.day() - 1]}`
+              : `排课详情 — ${selectedClassroom?.name || ''} · ${selectedCell ? WEEKDAYS[selectedCell.weekDay - 1] : ''}`
         }
         open={modalOpen}
         onCancel={() => setModalOpen(false)}