Polish admin tools and planner sidebar

app.py

@@ -7,7 +7,7 @@ from zoneinfo import ZoneInfo
 
 from flask import Flask, jsonify, redirect, render_template, request, session, url_for
 
-from storage import ReminderStore, beijing_now, build_default_time_slots
+from storage import DEFAULT_PERIOD_TIMES, ReminderStore, beijing_now, build_default_time_slots
 
 BASE_DIR = Path(__file__).resolve().parent
 STORE_PATH = BASE_DIR / "data" / "store.json"
@@ -219,6 +219,17 @@ def build_major_blocks_from_time_slots(time_slots: list[dict[str, str]]) -> list
     return major_blocks
 
 
+def build_clean_default_time_slots() -> list[dict[str, str]]:
+    return [
+        {
+            "label": f"第{index:02d}节课",
+            "start": start,
+            "end": end,
+        }
+        for index, (start, end) in sorted(DEFAULT_PERIOD_TIMES.items())
+    ]
+
+
 def compute_task_progress(task: dict) -> float:
     if task.get("completed"):
         return 100.0
@@ -604,7 +615,7 @@ def render_admin_page(active_page: str):
         categories=store.list_categories(),
         courses=store.list_courses(),
         schedule_settings=schedule_settings,
-        default_time_slots=build_default_time_slots(),
+        default_time_slots=build_clean_default_time_slots(),
     )
 
 

static/admin-v020.js

@@ -9,24 +9,25 @@
     scheduleEditor: {
       segments: [],
       interaction: null,
-      rangeStart: 0,
-      rangeEnd: 0,
-      pixelsPerMinute: 1.1,
+      dragKind: null,
+      pixelsPerMinute: 1.65,
     },
   };
 
   const toastStack = document.getElementById("toastStack");
-  const courseGrid = document.getElementById("courseGrid");
-  const courseModal = document.getElementById("courseModal");
-  const courseForm = document.getElementById("courseForm");
-  const openCourseModalButton = document.getElementById("openCourseModalButton");
-  const createCategoryForm = document.getElementById("createCategoryForm");
-  const adminGrid = document.getElementById("adminGrid");
   const scheduleSettingsForm = document.getElementById("scheduleSettingsForm");
   const scheduleEditorAxis = document.getElementById("scheduleEditorAxis");
   const scheduleEditorTrack = document.getElementById("scheduleEditorTrack");
+  const scheduleEditorDropzone = document.getElementById("scheduleEditorDropzone");
   const scheduleSegmentCount = document.getElementById("scheduleSegmentCount");
   const resetTimelineButton = document.getElementById("resetTimelineButton");
+  const schedulePalette = document.getElementById("schedulePalette");
+  const createCategoryForm = document.getElementById("createCategoryForm");
+  const adminGrid = document.getElementById("adminGrid");
+  const courseGrid = document.getElementById("courseGrid");
+  const courseForm = document.getElementById("courseForm");
+  const resetCourseEditorButton = document.getElementById("resetCourseEditorButton");
+  const courseEditorHeading = document.getElementById("courseEditorHeading");
 
   if (!toastStack) {
     return;
@@ -54,16 +55,8 @@
     return payload;
   }
 
-  function openModal(modal) {
-    if (modal) {
-      modal.classList.add("is-open");
-    }
-  }
-
-  function closeModal(modal) {
-    if (modal) {
-      modal.classList.remove("is-open");
-    }
+  function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
   }
 
   function toMinutes(value) {
@@ -81,10 +74,6 @@
     return Math.round(value / step) * step;
   }
 
-  function clamp(value, min, max) {
-    return Math.min(Math.max(value, min), max);
-  }
-
   function formatWeekPattern(pattern) {
     if (pattern === "odd") {
       return "单周";
@@ -99,136 +88,112 @@
     return ["一", "二", "三", "四", "五", "六", "日"][Number(value) - 1] || "";
   }
 
-  function courseCard(course) {
-    return `
-      <article class="admin-card admin-row-card course-card" data-course-id="${course.id}">
-        <div class="admin-card-head">
-          <div>
-            <p class="column-label">Course</p>
-            <h2>${course.title}</h2>
-          </div>
-          <span class="task-count">周${weekdayLabel(course.day_of_week)}</span>
-        </div>
-        <p class="admin-card-copy">${course.start_time} - ${course.end_time} · 第 ${course.start_week}-${course.end_week} 周 · ${formatWeekPattern(course.week_pattern)}</p>
-        <p class="admin-card-copy">${course.location || "未填写地点"}</p>
-        <div class="admin-card-actions">
-          <button class="secondary-button" type="button" data-edit-course="${course.id}">编辑课程</button>
-          <button class="danger-button" type="button" data-delete-course="${course.id}">删除课程</button>
-        </div>
-      </article>
-    `;
-  }
-
-  function categoryCard(category) {
-    const taskCount = Array.isArray(category.tasks) ? category.tasks.length : Number(category.task_count || 0);
-    return `
-      <article class="admin-card admin-row-card" data-category-id="${category.id}">
-        <div class="admin-card-head">
-          <div>
-            <p class="column-label">Category</p>
-            <h2>${category.name}</h2>
-          </div>
-          <span class="task-count">${taskCount} 项任务</span>
-        </div>
-        <p class="admin-card-copy">删除分类会同时移除其下全部任务，请谨慎操作。</p>
-        <div class="admin-card-actions">
-          <button class="danger-button" type="button" data-delete-category="${category.id}">删除此清单</button>
-        </div>
-      </article>
-    `;
-  }
-
-  function renderCourses() {
-    if (!courseGrid) {
-      return;
-    }
-    if (!state.courses.length) {
-      courseGrid.innerHTML = `
-        <article class="admin-card empty-admin-card">
-          <h2>还没有固定课程</h2>
-          <p class="admin-card-copy">点击上方“新增课程”即可录入课程，保存后周课表会自动按周显示。</p>
-        </article>
-      `;
-      return;
-    }
-    courseGrid.innerHTML = state.courses.map(courseCard).join("");
-  }
-
-  function renderCategories() {
-    if (!adminGrid) {
-      return;
-    }
-    adminGrid.innerHTML = state.categories.map(categoryCard).join("");
-  }
-
-  function resetCourseForm(course) {
-    document.getElementById("courseIdInput").value = course ? course.id : "";
-    document.getElementById("courseTitleInput").value = course ? course.title : "";
-    document.getElementById("courseLocationInput").value = course ? (course.location || "") : "";
-    document.getElementById("courseWeekdayInput").value = course ? String(course.day_of_week) : "1";
-    document.getElementById("courseStartTimeInput").value = course ? course.start_time : "08:15";
-    document.getElementById("courseEndTimeInput").value = course ? course.end_time : "09:00";
-    document.getElementById("courseStartWeekInput").value = course ? String(course.start_week) : "1";
-    document.getElementById("courseEndWeekInput").value = course ? String(course.end_week) : "16";
-    document.getElementById("courseWeekPatternInput").value = course ? course.week_pattern : "all";
-    document.getElementById("courseModalTitle").textContent = course ? "编辑课程" : "新增课程";
-  }
-
-  function cloneSegments(segments) {
-    return segments.map((segment) => ({ ...segment }));
+  function getConfiguredTimeSlots() {
+    const slots = Array.isArray(state.scheduleSettings.time_slots) && state.scheduleSettings.time_slots.length
+      ? state.scheduleSettings.time_slots
+      : state.defaultTimeSlots;
+    return slots.map((slot, index) => ({
+      label: slot.label || `第${String(index + 1).padStart(2, "0")}节课`,
+      start: slot.start,
+      end: slot.end,
+    }));
   }
 
   function buildScheduleSegmentsFromSlots(timeSlots) {
     const slots = (timeSlots || [])
       .map((slot, index) => ({
-        label: slot.label || `第${String(index + 1).padStart(2, "0")}节课`,
-        startMinutes: toMinutes(slot.start),
-        endMinutes: toMinutes(slot.end),
-      }))
-      .sort((left, right) => left.startMinutes - right.startMinutes);
+        kind: "class",
+        label: `第${String(index + 1).padStart(2, "0")}节课`,
+        durationMinutes: Math.max(25, toMinutes(slot.end) - toMinutes(slot.start)),
+      }));
 
     const segments = [];
     slots.forEach((slot, index) => {
       if (index > 0) {
-        const previous = slots[index - 1];
-        if (slot.startMinutes > previous.endMinutes) {
-          segments.push({
-            id: `break-${index}`,
-            kind: "break",
-            label: `课间 ${index}`,
-            startMinutes: previous.endMinutes,
-            endMinutes: slot.startMinutes,
-          });
-        }
+        const previous = timeSlots[index - 1];
+        const gap = Math.max(5, toMinutes(timeSlots[index].start) - toMinutes(previous.end));
+        segments.push({
+          id: `break-${index}`,
+          kind: "break",
+          label: `课间 ${index}`,
+          durationMinutes: gap,
+        });
       }
       segments.push({
         id: `class-${index + 1}`,
         kind: "class",
         label: slot.label,
-        startMinutes: slot.startMinutes,
-        endMinutes: slot.endMinutes,
+        durationMinutes: slot.durationMinutes,
       });
     });
     return segments;
   }
 
+  function renumberSegments(segments) {
+    let classIndex = 1;
+    let breakIndex = 1;
+    segments.forEach((segment) => {
+      if (segment.kind === "class") {
+        segment.label = `第${String(classIndex).padStart(2, "0")}节课`;
+        classIndex += 1;
+      } else {
+        segment.label = `课间 ${breakIndex}`;
+        breakIndex += 1;
+      }
+    });
+  }
+
+  function reflowSegments() {
+    const baseStart = toMinutes(document.getElementById("dayStartInput").value);
+    let cursor = baseStart;
+    renumberSegments(state.scheduleEditor.segments);
+    state.scheduleEditor.segments.forEach((segment) => {
+      segment.startMinutes = cursor;
+      segment.endMinutes = cursor + segment.durationMinutes;
+      cursor = segment.endMinutes;
+    });
+  }
+
   function getEditorPixelsPerMinute() {
-    return state.scheduleEditor.pixelsPerMinute || 1.1;
+    return state.scheduleEditor.pixelsPerMinute || 1.65;
   }
 
   function segmentMinDuration(segment) {
     return segment.kind === "break" ? 5 : 25;
   }
 
-  function buildScheduleAxisMarks(startMinutes, endMinutes, segments) {
-    const marks = new Set([startMinutes, endMinutes]);
+  function validateSegmentOrder(segments) {
+    if (!segments.length) {
+      return "请至少保留一节课";
+    }
+    if (segments[0].kind !== "class") {
+      return "时间表必须从课程开始";
+    }
+    if (segments[segments.length - 1].kind !== "class") {
+      return "时间表必须以课程结束";
+    }
+    for (let index = 1; index < segments.length; index += 1) {
+      if (segments[index].kind === segments[index - 1].kind) {
+        return "课程后面必须是休息，休息后面必须是课程";
+      }
+    }
+    return null;
+  }
+
+  function buildScheduleAxisMarks() {
+    const segments = state.scheduleEditor.segments;
+    if (!segments.length) {
+      return [];
+    }
+    const marks = new Set();
+    marks.add(segments[0].startMinutes);
+    marks.add(segments[segments.length - 1].endMinutes);
     segments.forEach((segment) => {
       marks.add(segment.startMinutes);
       marks.add(segment.endMinutes);
     });
-
-    let hour = Math.floor(startMinutes / 60) * 60;
-    while (hour <= endMinutes) {
+    let hour = Math.floor(segments[0].startMinutes / 60) * 60;
+    while (hour <= segments[segments.length - 1].endMinutes) {
       marks.add(hour);
       hour += 60;
     }
@@ -236,73 +201,119 @@
   }
 
   function renderScheduleEditor() {
-    if (!scheduleEditorAxis || !scheduleEditorTrack) {
+    if (!scheduleEditorAxis || !scheduleEditorTrack || !scheduleEditorDropzone) {
       return;
     }
 
+    reflowSegments();
     const segments = state.scheduleEditor.segments;
+
     if (!segments.length) {
       scheduleEditorAxis.innerHTML = "";
       scheduleEditorTrack.innerHTML = "";
+      scheduleEditorTrack.appendChild(scheduleEditorDropzone);
       if (scheduleSegmentCount) {
         scheduleSegmentCount.textContent = "0 段";
       }
       return;
     }
 
-    const firstStart = segments[0].startMinutes;
-    const lastEnd = segments[segments.length - 1].endMinutes;
-    state.scheduleEditor.rangeStart = firstStart;
-    state.scheduleEditor.rangeEnd = lastEnd;
-    const totalMinutes = Math.max(lastEnd - firstStart, 1);
-    const height = Math.max(Math.round(totalMinutes * getEditorPixelsPerMinute()), 760);
+    const startMinutes = segments[0].startMinutes;
+    const endMinutes = segments[segments.length - 1].endMinutes;
+    const totalMinutes = Math.max(endMinutes - startMinutes, 1);
+    const height = Math.max(Math.round(totalMinutes * getEditorPixelsPerMinute()), 980);
 
     scheduleEditorAxis.innerHTML = "";
     scheduleEditorTrack.innerHTML = "";
     scheduleEditorAxis.style.height = `${height}px`;
     scheduleEditorTrack.style.height = `${height}px`;
 
-    const marks = buildScheduleAxisMarks(firstStart, lastEnd, segments);
-    marks.forEach((minute, index) => {
+    buildScheduleAxisMarks().forEach((minute, index, marks) => {
+      const top = Math.round((minute - startMinutes) * getEditorPixelsPerMinute());
+
       const tick = document.createElement("div");
       tick.className = "schedule-editor-tick";
       if (index === 0) {
         tick.classList.add("is-leading");
-      }
-      if (index === marks.length - 1) {
+      } else if (index === marks.length - 1) {
         tick.classList.add("is-terminal");
       }
-      tick.style.top = `${Math.round((minute - firstStart) * getEditorPixelsPerMinute())}px`;
+      tick.style.top = `${top}px`;
       tick.textContent = minutesToTime(minute);
       scheduleEditorAxis.appendChild(tick);
 
       const line = document.createElement("div");
       line.className = "schedule-editor-line";
-      line.style.top = `${Math.round((minute - firstStart) * getEditorPixelsPerMinute())}px`;
+      line.style.top = `${top}px`;
       scheduleEditorTrack.appendChild(line);
     });
 
     segments.forEach((segment, index) => {
       const block = document.createElement("article");
       block.className = `schedule-editor-segment ${segment.kind}`;
-      block.style.top = `${Math.round((segment.startMinutes - firstStart) * getEditorPixelsPerMinute())}px`;
-      block.style.height = `${Math.max(Math.round((segment.endMinutes - segment.startMinutes) * getEditorPixelsPerMinute()), 28)}px`;
+      block.style.top = `${Math.round((segment.startMinutes - startMinutes) * getEditorPixelsPerMinute())}px`;
+      block.style.height = `${Math.max(Math.round(segment.durationMinutes * getEditorPixelsPerMinute()), 36)}px`;
       block.innerHTML = `
         <div class="schedule-editor-segment-copy">
           <strong>${segment.label}</strong>
           <span>${minutesToTime(segment.startMinutes)} - ${minutesToTime(segment.endMinutes)}</span>
         </div>
         <div class="schedule-editor-segment-kind">${segment.kind === "class" ? "上课" : "课间"}</div>
-        <button class="schedule-editor-resize" type="button" data-segment-index="${index}" aria-label="调整时长"></button>
+        ${segment.kind === "class" ? `<button class="schedule-editor-delete" type="button" data-delete-segment="${index}">删除</button>` : ""}
+        <button class="schedule-editor-resize" type="button" data-resize-segment="${index}" aria-label="调整时长"></button>
       `;
       scheduleEditorTrack.appendChild(block);
     });
 
+    scheduleEditorTrack.appendChild(scheduleEditorDropzone);
     if (scheduleSegmentCount) {
       scheduleSegmentCount.textContent = `${segments.length} 段`;
     }
   }
 
+  function appendSegment(kind) {
+    const segments = state.scheduleEditor.segments;
+    if (!segments.length && kind !== "class") {
+      showToast("时间表必须从课程开始", "error");
+      return;
+    }
+    if (segments.length && segments[segments.length - 1].kind === kind) {
+      showToast("课程后面必须是休息，休息后面必须是课程", "error");
+      return;
+    }
+
+    segments.push({
+      id: `${kind}-${Date.now()}-${Math.random().toString(16).slice(2, 6)}`,
+      kind,
+      label: kind === "class" ? "新课程" : "新课间",
+      durationMinutes: kind === "class" ? 45 : 10,
+    });
+    renderScheduleEditor();
+  }
+
+  function deleteClassSegment(index) {
+    const segments = [...state.scheduleEditor.segments];
+    const target = segments[index];
+    if (!target || target.kind !== "class") {
+      return;
+    }
+
+    if (index === 0) {
+      segments.splice(index, segments[index + 1]?.kind === "break" ? 2 : 1);
+    } else if (index === segments.length - 1) {
+      segments.splice(index - 1, segments[index - 1]?.kind === "break" ? 2 : 1);
+    } else {
+      segments.splice(index, 1);
+      if (segments[index - 1] && segments[index] && segments[index - 1].kind === "break" && segments[index].kind === "break") {
+        segments[index - 1].durationMinutes += segments[index].durationMinutes;
+        segments.splice(index, 1);
+      }
+    }
+
+    state.scheduleEditor.segments = segments.filter(Boolean);
+    renderScheduleEditor();
+  }
+
   function beginScheduleResize(event, index) {
     const segment = state.scheduleEditor.segments[index];
     if (!segment) {
@@ -313,7 +324,7 @@
       index,
       pointerId: event.pointerId,
       startY: event.clientY,
-      snapshot: cloneSegments(state.scheduleEditor.segments),
+      snapshot: state.scheduleEditor.segments.map((item) => ({ ...item })),
     };
   }
 
@@ -322,50 +333,37 @@
     if (!interaction) {
       return;
     }
-    const deltaMinutes = snapMinutes((clientY - interaction.startY) / getEditorPixelsPerMinute());
-    const segments = cloneSegments(interaction.snapshot);
+    const segments = interaction.snapshot.map((item) => ({ ...item }));
     const target = segments[interaction.index];
-    const currentDuration = target.endMinutes - target.startMinutes;
-    const nextDuration = Math.max(segmentMinDuration(target), currentDuration + deltaMinutes);
-    const appliedDelta = nextDuration - currentDuration;
-
-    target.endMinutes = target.startMinutes + nextDuration;
-    for (let cursor = interaction.index + 1; cursor < segments.length; cursor += 1) {
-      segments[cursor].startMinutes += appliedDelta;
-      segments[cursor].endMinutes += appliedDelta;
-    }
-
+    const deltaMinutes = snapMinutes((clientY - interaction.startY) / getEditorPixelsPerMinute());
+    target.durationMinutes = Math.max(segmentMinDuration(target), target.durationMinutes + deltaMinutes);
     state.scheduleEditor.segments = segments;
     renderScheduleEditor();
   }
 
   function endScheduleResize() {
-    if (!state.scheduleEditor.interaction) {
-      return;
-    }
     state.scheduleEditor.interaction = null;
   }
 
   function collectSchedulePayload() {
-    const classSegments = state.scheduleEditor.segments.filter((segment) => segment.kind === "class");
-    const firstStart = classSegments.length ? classSegments[0].startMinutes : toMinutes(document.getElementById("dayStartInput").value);
-    const lastEnd = classSegments.length ? classSegments[classSegments.length - 1].endMinutes : toMinutes(document.getElementById("dayEndInput").value);
-
-    const currentDayStart = toMinutes(document.getElementById("dayStartInput").value);
-    const currentDayEnd = toMinutes(document.getElementById("dayEndInput").value);
-    const nextDayStart = Math.min(currentDayStart, firstStart);
-    const nextDayEnd = Math.max(currentDayEnd, lastEnd);
+    const error = validateSegmentOrder(state.scheduleEditor.segments);
+    if (error) {
+      throw new Error(error);
+    }
 
-    document.getElementById("dayStartInput").value = minutesToTime(nextDayStart);
-    document.getElementById("dayEndInput").value = minutesToTime(nextDayEnd);
+    reflowSegments();
+    const classSegments = state.scheduleEditor.segments.filter((segment) => segment.kind === "class");
+    const dayStart = document.getElementById("dayStartInput").value;
+    const dayEnd = minutesToTime(classSegments[classSegments.length - 1].endMinutes);
+    document.getElementById("dayEndInput").value = dayEnd;
 
     return {
       semester_start: document.getElementById("semesterStartInput").value,
-      day_start: minutesToTime(nextDayStart),
-      day_end: minutesToTime(nextDayEnd),
+      day_start: dayStart,
+      day_end: dayEnd,
       default_task_duration_minutes: Number(document.getElementById("defaultDurationInput").value),
-      time_slots: classSegments.map((segment) => ({
-        label: segment.label,
+      time_slots: classSegments.map((segment, index) => ({
+        label: `第${String(index + 1).padStart(2, "0")}节课`,
         start: minutesToTime(segment.startMinutes),
         end: minutesToTime(segment.endMinutes),
       })),
@@ -373,86 +371,250 @@
   }
 
   function resetScheduleEditor(useDefault) {
-    const source = useDefault ? state.defaultTimeSlots : (state.scheduleSettings.time_slots || []);
+    const source = useDefault ? state.defaultTimeSlots : getConfiguredTimeSlots();
     state.scheduleEditor.segments = buildScheduleSegmentsFromSlots(source);
     renderScheduleEditor();
   }
 
-  function initCoursesPage() {
-    if (!courseForm || !courseGrid) {
+  function buildPeriodOptions() {
+    const slots = getConfiguredTimeSlots();
+    return slots.map((slot, index) => ({
+      value: String(index + 1),
+      label: `第${String(index + 1).padStart(2, "0")}节 · ${slot.start}-${slot.end}`,
+    }));
+  }
+
+  function findPeriodByBoundary(boundary, edge) {
+    const slots = getConfiguredTimeSlots();
+    const index = slots.findIndex((slot) => slot[edge] === boundary);
+    return index >= 0 ? String(index + 1) : "1";
+  }
+
+  function populateCoursePeriodOptions() {
+    const startSelect = document.getElementById("courseStartPeriodInput");
+    const endSelect = document.getElementById("courseEndPeriodInput");
+    if (!startSelect || !endSelect) {
       return;
     }
+    const options = buildPeriodOptions();
+    const markup = options.map((option) => `<option value="${option.value}">${option.label}</option>`).join("");
+    startSelect.innerHTML = markup;
+    endSelect.innerHTML = markup;
+  }
 
-    if (openCourseModalButton) {
-      openCourseModalButton.addEventListener("click", () => {
-        resetCourseForm(null);
-        openModal(courseModal);
+  function courseCard(course) {
+    return `
+      <article class="admin-card admin-row-card course-card" data-course-id="${course.id}">
+        <div class="admin-card-head course-row-head">
+          <div>
+            <p class="column-label">Course</p>
+            <h2>${course.title}</h2>
+          </div>
+          <div class="course-row-actions">
+            <span class="task-count">周${weekdayLabel(course.day_of_week)}</span>
+            <button class="secondary-button" type="button" data-edit-course="${course.id}">编辑课程</button>
+            <button class="danger-button" type="button" data-delete-course="${course.id}">删除课程</button>
+          </div>
+        </div>
+        <p class="admin-card-copy">${course.start_time} - ${course.end_time} · 第 ${course.start_week}-${course.end_week} 周 · ${formatWeekPattern(course.week_pattern)}</p>
+        <p class="admin-card-copy">${course.location || "未填写地点"}</p>
+      </article>
+    `;
+  }
+
+  function renderCourses() {
+    if (!courseGrid) {
+      return;
+    }
+    if (!state.courses.length) {
+      courseGrid.innerHTML = `
+        <article class="admin-card empty-admin-card">
+          <h2>还没有固定课程</h2>
+          <p class="admin-card-copy">在左侧填写课程信息并保存后，周课表会自动按周显示。</p>
+        </article>
+      `;
+      return;
+    }
+    courseGrid.innerHTML = state.courses.map(courseCard).join("");
+  }
+
+  function resetCourseForm(course = null) {
+    const slots = getConfiguredTimeSlots();
+    document.getElementById("courseIdInput").value = course ? course.id : "";
+    document.getElementById("courseTitleInput").value = course ? course.title : "";
+    document.getElementById("courseLocationInput").value = course ? (course.location || "") : "";
+    document.getElementById("courseWeekdayInput").value = course ? String(course.day_of_week) : "1";
+    document.getElementById("courseStartPeriodInput").value = course ? findPeriodByBoundary(course.start_time, "start") : "1";
+    document.getElementById("courseEndPeriodInput").value = course ? findPeriodByBoundary(course.end_time, "end") : String(Math.min(2, slots.length || 1));
+    document.getElementById("courseStartWeekInput").value = course ? String(course.start_week) : "1";
+    document.getElementById("courseEndWeekInput").value = course ? String(course.end_week) : "16";
+    document.getElementById("courseWeekPatternInput").value = course ? course.week_pattern : "all";
+    if (courseEditorHeading) {
+      courseEditorHeading.textContent = course ? "编辑课程" : "新增课程";
+    }
+  }
+
+  function collectCoursePayload() {
+    const slots = getConfiguredTimeSlots();
+    const startPeriod = Number(document.getElementById("courseStartPeriodInput").value);
+    const endPeriod = Number(document.getElementById("courseEndPeriodInput").value);
+    if (endPeriod < startPeriod) {
+      throw new Error("结束节次不能早于开始节次");
+    }
+    const startSlot = slots[startPeriod - 1];
+    const endSlot = slots[endPeriod - 1];
+    if (!startSlot || !endSlot) {
+      throw new Error("请选择有效的节次");
+    }
+
+    return {
+      title: document.getElementById("courseTitleInput").value.trim(),
+      location: document.getElementById("courseLocationInput").value.trim(),
+      day_of_week: Number(document.getElementById("courseWeekdayInput").value),
+      start_time: startSlot.start,
+      end_time: endSlot.end,
+      start_week: Number(document.getElementById("courseStartWeekInput").value),
+      end_week: Number(document.getElementById("courseEndWeekInput").value),
+      week_pattern: document.getElementById("courseWeekPatternInput").value,
+    };
+  }
+
+  function categoryCard(category) {
+    const taskCount = Array.isArray(category.tasks) ? category.tasks.length : Number(category.task_count || 0);
+    return `
+      <article class="admin-card admin-row-card list-row-card" data-category-id="${category.id}">
+        <div class="admin-row-main">
+          <div>
+            <p class="column-label">Category</p>
+            <h2>${category.name}</h2>
+            <p class="admin-card-copy">删除分类会同时移除其下全部任务，请谨慎操作。</p>
+          </div>
+          <div class="admin-row-side">
+            <span class="task-count">${taskCount} 项任务</span>
+            <button class="danger-button" type="button" data-delete-category="${category.id}">删除此清单</button>
+          </div>
+        </div>
+      </article>
+    `;
+  }
+
+  function renderCategories() {
+    if (!adminGrid) {
+      return;
+    }
+    adminGrid.innerHTML = state.categories.map(categoryCard).join("");
+  }
+
+  function initSchedulePage() {
+    if (!scheduleSettingsForm || !scheduleEditorAxis || !scheduleEditorTrack || !scheduleEditorDropzone) {
+      return;
+    }
+
+    resetScheduleEditor(false);
+
+    if (schedulePalette) {
+      schedulePalette.addEventListener("dragstart", (event) => {
+        const card = event.target.closest("[data-palette-kind]");
+        if (!card) {
+          return;
+        }
+        state.scheduleEditor.dragKind = card.dataset.paletteKind;
+        event.dataTransfer.effectAllowed = "copy";
+        event.dataTransfer.setData("text/plain", state.scheduleEditor.dragKind);
+      });
+
+      schedulePalette.addEventListener("dragend", () => {
+        state.scheduleEditor.dragKind = null;
       });
     }
 
-    courseForm.addEventListener("submit", async (event) => {
+    scheduleEditorTrack.addEventListener("dragover", (event) => {
+      if (!state.scheduleEditor.dragKind) {
+        return;
+      }
       event.preventDefault();
-      const courseId = document.getElementById("courseIdInput").value;
-      const payload = {
-        title: document.getElementById("courseTitleInput").value.trim(),
-        location: document.getElementById("courseLocationInput").value.trim(),
-        day_of_week: Number(document.getElementById("courseWeekdayInput").value),
-        start_time: document.getElementById("courseStartTimeInput").value,
-        end_time: document.getElementById("courseEndTimeInput").value,
-        start_week: Number(document.getElementById("courseStartWeekInput").value),
-        end_week: Number(document.getElementById("courseEndWeekInput").value),
-        week_pattern: document.getElementById("courseWeekPatternInput").value,
-      };
+      scheduleEditorDropzone.classList.add("is-active");
+    });
 
-      try {
-        const payloadData = await requestJSON(courseId ? `/api/courses/${courseId}` : "/api/courses", {
-          method: courseId ? "PATCH" : "POST",
-          body: JSON.stringify(payload),
-        });
-        if (courseId) {
-          state.courses = state.courses.map((course) => (course.id === courseId ? payloadData.course : course));
-          showToast("课程已更新");
-        } else {
-          state.courses = [payloadData.course, ...state.courses];
-          showToast("课程已创建");
-        }
-        renderCourses();
-        closeModal(courseModal);
-      } catch (error) {
-        showToast(error.message, "error");
+    scheduleEditorTrack.addEventListener("dragleave", (event) => {
+      if (!scheduleEditorTrack.contains(event.relatedTarget)) {
+        scheduleEditorDropzone.classList.remove("is-active");
       }
     });
 
-    courseGrid.addEventListener("click", async (event) => {
-      const editButton = event.target.closest("[data-edit-course]");
-      if (editButton) {
-        const course = state.courses.find((item) => item.id === editButton.dataset.editCourse);
-        if (course) {
-          resetCourseForm(course);
-          openModal(courseModal);
-        }
+    scheduleEditorTrack.addEventListener("drop", (event) => {
+      if (!state.scheduleEditor.dragKind) {
         return;
       }
+      event.preventDefault();
+      scheduleEditorDropzone.classList.remove("is-active");
+      appendSegment(state.scheduleEditor.dragKind);
+      state.scheduleEditor.dragKind = null;
+    });
 
-      const deleteButton = event.target.closest("[data-delete-course]");
-      if (!deleteButton) {
+    scheduleEditorTrack.addEventListener("click", (event) => {
+      const deleteButton = event.target.closest("[data-delete-segment]");
+      if (deleteButton) {
+        deleteClassSegment(Number(deleteButton.dataset.deleteSegment));
+        return;
+      }
+
+      const resizeHandle = event.target.closest("[data-resize-segment]");
+      if (resizeHandle) {
+        return;
+      }
+    });
+
+    scheduleEditorTrack.addEventListener("pointerdown", (event) => {
+      const resizeHandle = event.target.closest("[data-resize-segment]");
+      if (!resizeHandle) {
+        return;
+      }
+      beginScheduleResize(event, Number(resizeHandle.dataset.resizeSegment));
+    });
+
+    document.addEventListener("pointermove", (event) => {
+      if (!state.scheduleEditor.interaction || event.pointerId !== state.scheduleEditor.interaction.pointerId) {
+        return;
+      }
+      event.preventDefault();
+      updateScheduleResize(event.clientY);
+    });
+
+    document.addEventListener("pointerup", (event) => {
+      if (!state.scheduleEditor.interaction || event.pointerId !== state.scheduleEditor.interaction.pointerId) {
         return;
       }
+      endScheduleResize();
+    });
 
+    document.addEventListener("pointercancel", endScheduleResize);
+
+    if (resetTimelineButton) {
+      resetTimelineButton.addEventListener("click", () => {
+        resetScheduleEditor(true);
+        showToast("已恢复默认节次，记得保存");
+      });
+    }
+
+    document.getElementById("dayStartInput").addEventListener("change", renderScheduleEditor);
+
+    scheduleSettingsForm.addEventListener("submit", async (event) => {
+      event.preventDefault();
       try {
-        await requestJSON(`/api/courses/${deleteButton.dataset.deleteCourse}`, {
-          method: "DELETE",
-          body: JSON.stringify({}),
+        const payload = collectSchedulePayload();
+        const result = await requestJSON("/api/settings/schedule", {
+          method: "PATCH",
+          body: JSON.stringify(payload),
         });
-        state.courses = state.courses.filter((course) => course.id !== deleteButton.dataset.deleteCourse);
-        renderCourses();
-        showToast("课程已删除");
+        state.scheduleSettings = result.settings;
+        resetScheduleEditor(false);
+        populateCoursePeriodOptions();
+        showToast("时间表设置已保存");
       } catch (error) {
         showToast(error.message, "error");
       }
     });
-
-    renderCourses();
   }
 
   function initListsPage() {
@@ -460,6 +622,8 @@
       return;
     }
 
+    renderCategories();
+
     createCategoryForm.addEventListener("submit", async (event) => {
       event.preventDefault();
       const nameInput = document.getElementById("newCategoryName");
@@ -472,7 +636,7 @@
         state.categories = [...state.categories, payload.category];
         renderCategories();
         nameInput.value = "";
-        showToast("新分类已创建");
+        showToast("新清单已创建");
       } catch (error) {
         showToast(error.message, "error");
       }
@@ -490,83 +654,80 @@
         });
         state.categories = state.categories.filter((category) => category.id !== button.dataset.deleteCategory);
         renderCategories();
-        showToast("分类已删除");
+        showToast("清单已删除");
       } catch (error) {
         showToast(error.message, "error");
       }
     });
-
-    renderCategories();
   }
 
-  function initSchedulePage() {
-    if (!scheduleSettingsForm || !scheduleEditorAxis || !scheduleEditorTrack) {
+  function initCoursesPage() {
+    if (!courseGrid || !courseForm) {
       return;
     }
 
-    resetScheduleEditor(false);
+    populateCoursePeriodOptions();
+    resetCourseForm(null);
+    renderCourses();
 
-    scheduleEditorTrack.addEventListener("pointerdown", (event) => {
-      const handle = event.target.closest("[data-segment-index]");
-      if (!handle) {
-        return;
+    if (resetCourseEditorButton) {
+      resetCourseEditorButton.addEventListener("click", () => resetCourseForm(null));
+    }
+
+    courseForm.addEventListener("submit", async (event) => {
+      event.preventDefault();
+      const courseId = document.getElementById("courseIdInput").value;
+      try {
+        const payload = collectCoursePayload();
+        const result = await requestJSON(courseId ? `/api/courses/${courseId}` : "/api/courses", {
+          method: courseId ? "PATCH" : "POST",
+          body: JSON.stringify(payload),
+        });
+        if (courseId) {
+          state.courses = state.courses.map((course) => (course.id === courseId ? result.course : course));
+          showToast("课程已更新");
+        } else {
+          state.courses = [result.course, ...state.courses];
+          showToast("课程已创建");
+        }
+        renderCourses();
+        resetCourseForm(null);
+      } catch (error) {
+        showToast(error.message, "error");
       }
-      beginScheduleResize(event, Number(handle.dataset.segmentIndex));
     });
 
-    document.addEventListener("pointermove", (event) => {
-      if (!state.scheduleEditor.interaction || event.pointerId !== state.scheduleEditor.interaction.pointerId) {
+    courseGrid.addEventListener("click", async (event) => {
+      const editButton = event.target.closest("[data-edit-course]");
+      if (editButton) {
+        const course = state.courses.find((item) => item.id === editButton.dataset.editCourse);
+        if (course) {
+          resetCourseForm(course);
+        }
         return;
       }
-      event.preventDefault();
-      updateScheduleResize(event.clientY);
-    });
 
-    document.addEventListener("pointerup", (event) => {
-      if (!state.scheduleEditor.interaction || event.pointerId !== state.scheduleEditor.interaction.pointerId) {
+      const deleteButton = event.target.closest("[data-delete-course]");
+      if (!deleteButton) {
         return;
       }
-      endScheduleResize();
-    });
-
-    document.addEventListener("pointercancel", endScheduleResize);
-
-    if (resetTimelineButton) {
-      resetTimelineButton.addEventListener("click", () => {
-        resetScheduleEditor(true);
-        showToast("已恢复默认节次，记得保存");
-      });
-    }
 
-    scheduleSettingsForm.addEventListener("submit", async (event) => {
-      event.preventDefault();
       try {
-        const payload = collectSchedulePayload();
-        const result = await requestJSON("/api/settings/schedule", {
-          method: "PATCH",
-          body: JSON.stringify(payload),
+        await requestJSON(`/api/courses/${deleteButton.dataset.deleteCourse}`, {
+          method: "DELETE",
+          body: JSON.stringify({}),
         });
-        state.scheduleSettings = result.settings;
-        state.scheduleEditor.segments = buildScheduleSegmentsFromSlots(result.settings.time_slots || []);
-        renderScheduleEditor();
-        showToast("时间表设置已保存");
+        state.courses = state.courses.filter((course) => course.id !== deleteButton.dataset.deleteCourse);
+        renderCourses();
+        resetCourseForm(null);
+        showToast("课程已删除");
       } catch (error) {
         showToast(error.message, "error");
       }
     });
   }
 
-  document.addEventListener("click", (event) => {
-    const closeTarget = event.target.closest("[data-close-modal]");
-    if (closeTarget) {
-      closeModal(document.getElementById(closeTarget.dataset.closeModal));
-    }
-    if (event.target.classList.contains("modal-backdrop")) {
-      closeModal(event.target);
-    }
-  });
-
-  initCoursesPage();
-  initListsPage();
   initSchedulePage();
+  initListsPage();
+  initCoursesPage();
 })();

static/v020.css

@@ -826,7 +826,7 @@ body.planner-interacting .page-planner {
 .planner-sidebar {
   padding: 14px;
   display: grid;
-  gap: 12px;
+  gap: 10px;
   align-content: start;
   min-height: 0;
   grid-template-rows: auto minmax(0, 1fr);
@@ -843,7 +843,7 @@ body.planner-interacting .page-planner {
 .planner-task-pool {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 12px;
   min-height: 0;
   height: 100%;
   max-height: 100%;
@@ -853,26 +853,34 @@ body.planner-interacting .page-planner {
 }
 
 .planner-task-card {
-  padding: 12px;
-  border-radius: 18px;
+  padding: 14px;
+  border-radius: 20px;
   border: 1px solid rgba(255, 255, 255, 0.08);
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.03) 100%);
   display: grid;
-  gap: 10px;
+  gap: 12px;
 }
 
 .planner-task-card h4 {
   margin: 0;
-  font-size: 0.95rem;
+  font-size: 0.98rem;
+  line-height: 1.18;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
 }
 
 .planner-task-top {
-  justify-content: space-between;
-  gap: 12px;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: start;
+  gap: 10px;
 }
 
 .planner-task-tags {
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 8px;
 }
 
@@ -882,6 +890,18 @@ body.planner-interacting .page-planner {
   background: rgba(255, 255, 255, 0.05);
   color: var(--muted-strong);
   font-size: 0.76rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.planner-task-tags span:last-child {
+  grid-column: 1 / -1;
+}
+
+.planner-task-category {
+  white-space: nowrap;
+  align-self: start;
 }
 
 .planner-empty,
@@ -994,6 +1014,71 @@ body.planner-interacting .page-planner {
   border-radius: 22px;
 }
 
+.admin-lists-grid {
+  grid-template-columns: minmax(320px, 360px) minmax(0, 1fr);
+  align-items: start;
+}
+
+.list-create-card {
+  position: sticky;
+  top: 28px;
+}
+
+.list-management-stack {
+  gap: 14px;
+}
+
+.list-row-card {
+  border-radius: 24px;
+}
+
+.admin-row-main {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 18px;
+  align-items: start;
+}
+
+.admin-row-side {
+  display: grid;
+  gap: 10px;
+  justify-items: end;
+}
+
+.course-management-grid {
+  grid-template-columns: minmax(330px, 380px) minmax(0, 1fr);
+  align-items: start;
+}
+
+.course-editor-card {
+  position: sticky;
+  top: 28px;
+}
+
+.course-row-head {
+  align-items: start;
+}
+
+.course-row-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.course-list {
+  gap: 12px;
+}
+
+.course-card {
+  padding: 16px 18px;
+}
+
+.course-card .admin-card-copy {
+  margin: 4px 0 0;
+}
+
 .admin-schedule-grid {
   grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
   align-items: start;
@@ -1008,6 +1093,32 @@ body.planner-interacting .page-planner {
   padding: 22px;
 }
 
+.schedule-palette {
+  display: flex;
+  gap: 12px;
+  margin-top: 18px;
+  flex-wrap: wrap;
+}
+
+.schedule-palette-card {
+  min-width: 200px;
+  padding: 16px 18px;
+  border-radius: 20px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.03) 100%);
+  display: grid;
+  gap: 6px;
+  cursor: grab;
+}
+
+.schedule-palette-card.class {
+  box-shadow: inset 4px 0 0 rgba(123, 231, 234, 0.78);
+}
+
+.schedule-palette-card.break {
+  box-shadow: inset 4px 0 0 rgba(255, 200, 87, 0.72);
+}
+
 .schedule-editor-shell {
   display: grid;
   grid-template-columns: 92px minmax(0, 1fr);
@@ -1032,6 +1143,7 @@ body.planner-interacting .page-planner {
     rgba(3, 11, 20, 0.42);
   border: 1px solid rgba(255, 255, 255, 0.06);
   overflow: hidden;
+  min-height: 980px;
 }
 
 .schedule-editor-tick,
@@ -1106,6 +1218,18 @@ body.planner-interacting .page-planner {
   right: 14px;
 }
 
+.schedule-editor-delete {
+  position: absolute;
+  right: 14px;
+  bottom: 18px;
+  min-height: 28px;
+  padding: 0 10px;
+  border: 0;
+  border-radius: 999px;
+  background: rgba(255, 107, 92, 0.16);
+  color: #ff9388;
+}
+
 .schedule-editor-resize {
   position: absolute;
   left: 14px;
@@ -1118,6 +1242,29 @@ body.planner-interacting .page-planner {
   cursor: ns-resize;
 }
 
+.schedule-editor-dropzone {
+  position: absolute;
+  left: 14px;
+  right: 14px;
+  bottom: 14px;
+  min-height: 64px;
+  border-radius: 18px;
+  border: 1px dashed rgba(123, 231, 234, 0.35);
+  display: grid;
+  place-items: center;
+  color: var(--muted);
+  background: rgba(123, 231, 234, 0.05);
+  text-align: center;
+  padding: 12px;
+  pointer-events: none;
+}
+
+.schedule-editor-dropzone.is-active {
+  border-color: rgba(123, 231, 234, 0.75);
+  background: rgba(123, 231, 234, 0.12);
+  color: var(--muted-strong);
+}
+
 @media (max-width: 1180px) {
   body {
     overflow: auto;
@@ -1148,10 +1295,20 @@ body.planner-interacting .page-planner {
     grid-template-columns: 1fr;
   }
 
+  .admin-lists-grid,
+  .course-management-grid {
+    grid-template-columns: 1fr;
+  }
+
   .schedule-form-card {
     position: static;
   }
 
+  .list-create-card,
+  .course-editor-card {
+    position: static;
+  }
+
   .admin-page-nav {
     flex-wrap: wrap;
   }
@@ -1182,6 +1339,16 @@ body.planner-interacting .page-planner {
   .schedule-editor-shell {
     grid-template-columns: 72px minmax(0, 1fr);
   }
+
+  .admin-row-main {
+    grid-template-columns: 1fr;
+  }
+
+  .admin-row-side,
+  .course-row-actions {
+    justify-items: start;
+    justify-content: flex-start;
+  }
 }
 
 @media (max-width: 560px) {

templates/admin.html

@@ -10,27 +10,24 @@
         <p class="section-kicker">后台管理</p>
         {% if admin_page == "schedule" %}
           <h1>时间表设置</h1>
-          <p class="admin-copy">用时间轴方式调整上课与课间时段，首页和周课表会自动同步新的节次。</p>
+          <p class="admin-copy">通过拖拽上课块和课间块，重新安排整套节次时间。保存后首页与周课表会自动同步。</p>
         {% elif admin_page == "lists" %}
           <h1>清单管理</h1>
-          <p class="admin-copy">集中维护首页的 todolist 分类，分类名称会立即同步到首页与第二页。</p>
+          <p class="admin-copy">统一维护首页的 todolist 分类，删除或新建都会即时反映到主页。</p>
         {% else %}
           <h1>课程管理</h1>
-          <p class="admin-copy">课程按竖直列表统一维护，保存后会自动出现在周课表中。</p>
+          <p class="admin-copy">左侧新增或编辑课程，右侧用竖直列表快速检查全周课程配置。</p>
         {% endif %}
       </div>
 
       <div class="action-group">
         <a class="ghost-link" href="{{ url_for('index') }}">返回主页</a>
-        {% if admin_page == "courses" %}
-          <button class="pill-button accent" id="openCourseModalButton" type="button">新增课程</button>
-        {% endif %}
       </div>
 
       <nav class="admin-page-nav" aria-label="后台分页">
-        {% for tab in admin_tabs %}
-          <a class="admin-page-tab {% if tab.active %}is-active{% endif %}" href="{{ tab.href }}">{{ tab.label }}</a>
-        {% endfor %}
+        <a class="admin-page-tab {% if admin_page == 'schedule' %}is-active{% endif %}" href="{{ url_for('admin_schedule') }}">时间表设置</a>
+        <a class="admin-page-tab {% if admin_page == 'lists' %}is-active{% endif %}" href="{{ url_for('admin_lists') }}">清单管理</a>
+        <a class="admin-page-tab {% if admin_page == 'courses' %}is-active{% endif %}" href="{{ url_for('admin_courses') }}">课程管理</a>
       </nav>
     </section>
 
@@ -73,25 +70,40 @@
             <div class="admin-card-head">
               <div>
                 <p class="column-label">Timeline Editor</p>
-                <h2>拖动上课与课间块调整节次</h2>
+                <h2>拖拽块到时间轴上重新排布节次</h2>
               </div>
               <span class="task-count" id="scheduleSegmentCount">0 段</span>
             </div>
-            <p class="admin-card-copy">拖动每个上课块或课间块底部的手柄调整时长，后续时段会自动顺延。</p>
+
+            <div class="schedule-palette" id="schedulePalette">
+              <div class="schedule-palette-card class" draggable="true" data-palette-kind="class">
+                <strong>上课块</strong>
+                <span>拖入时间轴追加一节课</span>
+              </div>
+              <div class="schedule-palette-card break" draggable="true" data-palette-kind="break">
+                <strong>课间块</strong>
+                <span>拖入时间轴追加一段休息</span>
+              </div>
+            </div>
+
+            <p class="admin-card-copy">规则：时间段不能重叠，上课后必须是课间，课间后必须是上课。可调整时长、删除节课，并拖入新块扩展节次。</p>
 
             <div class="schedule-editor-shell">
               <div class="schedule-editor-axis" id="scheduleEditorAxis"></div>
-              <div class="schedule-editor-track" id="scheduleEditorTrack"></div>
+              <div class="schedule-editor-track" id="scheduleEditorTrack">
+                <div class="schedule-editor-dropzone" id="scheduleEditorDropzone">将上课块或课间块拖到这里追加到时间表末尾</div>
+              </div>
             </div>
           </article>
         </div>
       </section>
     {% elif admin_page == "lists" %}
       <section class="admin-section">
-        <div class="admin-grid admin-grid-tight">
-          <article class="admin-card create-card">
+        <div class="admin-grid admin-grid-tight admin-lists-grid">
+          <article class="admin-card create-card list-create-card">
             <div class="create-icon">+</div>
             <h2>新建一个清单</h2>
+            <p class="admin-card-copy">清单会直接同步到首页和第二页拖拽池。</p>
             <form id="createCategoryForm" class="modal-form compact">
               <label>
                 <span>分类名称</span>
@@ -100,120 +112,124 @@
               <button class="primary-button" type="submit">立即创建</button>
             </form>
           </article>
-        </div>
 
-        <section class="admin-stack" id="adminGrid">
-          {% for category in categories %}
-            <article class="admin-card admin-row-card" data-category-id="{{ category.id }}">
-              <div class="admin-card-head">
-                <div>
-                  <p class="column-label">Category</p>
-                  <h2>{{ category.name }}</h2>
-                </div>
-                <span class="task-count">{{ category.tasks|length }} 项任务</span>
-              </div>
-              <p class="admin-card-copy">删除分类会同时移除其下全部任务，请谨慎操作。</p>
-              <div class="admin-card-actions">
-                <button class="danger-button" type="button" data-delete-category="{{ category.id }}">删除此清单</button>
-              </div>
-            </article>
-          {% endfor %}
-        </section>
-      </section>
-    {% else %}
-      <section class="admin-section">
-        <section class="admin-stack course-list" id="courseGrid">
-          {% if courses %}
-            {% for course in courses %}
-              <article class="admin-card admin-row-card course-card" data-course-id="{{ course.id }}">
-                <div class="admin-card-head">
+          <section class="admin-stack list-management-stack" id="adminGrid">
+            {% for category in categories %}
+              <article class="admin-card admin-row-card list-row-card" data-category-id="{{ category.id }}">
+                <div class="admin-row-main">
                   <div>
-                    <p class="column-label">Course</p>
-                    <h2>{{ course.title }}</h2>
+                    <p class="column-label">Category</p>
+                    <h2>{{ category.name }}</h2>
+                    <p class="admin-card-copy">删除分类会同时移除其下全部任务，请谨慎操作。</p>
+                  </div>
+                  <div class="admin-row-side">
+                    <span class="task-count">{{ category.tasks|length }} 项任务</span>
+                    <button class="danger-button" type="button" data-delete-category="{{ category.id }}">删除此清单</button>
                   </div>
-                  <span class="task-count">周{{ ["一","二","三","四","五","六","日"][course.day_of_week - 1] }}</span>
-                </div>
-                <p class="admin-card-copy">{{ course.start_time }} - {{ course.end_time }} · 第 {{ course.start_week }}-{{ course.end_week }} 周 · {% if course.week_pattern == "odd" %}单周{% elif course.week_pattern == "even" %}双周{% else %}每周{% endif %}</p>
-                <p class="admin-card-copy">{{ course.location if course.location else "未填写地点" }}</p>
-                <div class="admin-card-actions">
-                  <button class="secondary-button" type="button" data-edit-course="{{ course.id }}">编辑课程</button>
-                  <button class="danger-button" type="button" data-delete-course="{{ course.id }}">删除课程</button>
                 </div>
               </article>
             {% endfor %}
-          {% else %}
-            <article class="admin-card empty-admin-card">
-              <h2>还没有固定课程</h2>
-              <p class="admin-card-copy">点击上方“新增课程”即可录入课程，保存后周课表会自动按周显示。</p>
-            </article>
-          {% endif %}
-        </section>
+          </section>
+        </div>
       </section>
-    {% endif %}
+    {% else %}
+      <section class="admin-section">
+        <div class="admin-grid admin-grid-tight course-management-grid">
+          <article class="admin-card course-editor-card">
+            <div class="admin-card-head">
+              <div>
+                <p class="column-label">Course Editor</p>
+                <h2 id="courseEditorHeading">新增课程</h2>
+              </div>
+            </div>
+            <p class="admin-card-copy">课程时间按“第几节到第几节”输入，系统会根据当前时间表自动换算为具体时间。</p>
+
+            <form class="modal-form compact" id="courseForm">
+              <input id="courseIdInput" name="course_id" type="hidden">
+              <label>
+                <span>课程名称</span>
+                <input id="courseTitleInput" name="title" type="text" maxlength="40" placeholder="例如：高等数学">
+              </label>
+              <label>
+                <span>上课地点</span>
+                <input id="courseLocationInput" name="location" type="text" maxlength="40" placeholder="例如：教学楼 A302">
+              </label>
+              <label>
+                <span>星期几</span>
+                <select id="courseWeekdayInput" name="day_of_week">
+                  <option value="1">星期一</option>
+                  <option value="2">星期二</option>
+                  <option value="3">星期三</option>
+                  <option value="4">星期四</option>
+                  <option value="5">星期五</option>
+                  <option value="6">星期六</option>
+                  <option value="7">星期日</option>
+                </select>
+              </label>
+              <div class="split-fields">
+                <label>
+                  <span>开始节次</span>
+                  <select id="courseStartPeriodInput" name="start_period"></select>
+                </label>
+                <label>
+                  <span>结束节次</span>
+                  <select id="courseEndPeriodInput" name="end_period"></select>
+                </label>
+              </div>
+              <div class="split-fields">
+                <label>
+                  <span>开始周数</span>
+                  <input id="courseStartWeekInput" name="start_week" type="number" min="1" max="30" value="1">
+                </label>
+                <label>
+                  <span>结束周数</span>
+                  <input id="courseEndWeekInput" name="end_week" type="number" min="1" max="30" value="16">
+                </label>
+              </div>
+              <label>
+                <span>单双周</span>
+                <select id="courseWeekPatternInput" name="week_pattern">
+                  <option value="all">每周</option>
+                  <option value="odd">单周</option>
+                  <option value="even">双周</option>
+                </select>
+              </label>
+              <div class="form-actions">
+                <button class="secondary-button" id="resetCourseEditorButton" type="button">清空表单</button>
+                <button class="primary-button" type="submit">保存课程</button>
+              </div>
+            </form>
+          </article>
 
-    <div class="modal-backdrop" id="courseModal">
-      <div class="modal-card">
-        <div class="modal-head">
-          <p class="modal-kicker">固定课程</p>
-          <h3 id="courseModalTitle">新增课程</h3>
+          <section class="admin-stack course-list" id="courseGrid">
+            {% if courses %}
+              {% for course in courses %}
+                <article class="admin-card admin-row-card course-card" data-course-id="{{ course.id }}">
+                  <div class="admin-card-head course-row-head">
+                    <div>
+                      <p class="column-label">Course</p>
+                      <h2>{{ course.title }}</h2>
+                    </div>
+                    <div class="course-row-actions">
+                      <span class="task-count">周{{ ["一","二","三","四","五","六","日"][course.day_of_week - 1] }}</span>
+                      <button class="secondary-button" type="button" data-edit-course="{{ course.id }}">编辑课程</button>
+                      <button class="danger-button" type="button" data-delete-course="{{ course.id }}">删除课程</button>
+                    </div>
+                  </div>
+                  <p class="admin-card-copy">{{ course.start_time }} - {{ course.end_time }} · 第 {{ course.start_week }}-{{ course.end_week }} 周 · {% if course.week_pattern == "odd" %}单周{% elif course.week_pattern == "even" %}双周{% else %}每周{% endif %}</p>
+                  <p class="admin-card-copy">{{ course.location if course.location else "未填写地点" }}</p>
+                </article>
+              {% endfor %}
+            {% else %}
+              <article class="admin-card empty-admin-card">
+                <h2>还没有固定课程</h2>
+                <p class="admin-card-copy">在左侧填写课程信息并保存后，周课表会自动按周显示。</p>
+              </article>
+            {% endif %}
+          </section>
         </div>
-        <form class="modal-form" id="courseForm">
-          <input id="courseIdInput" name="course_id" type="hidden">
-          <label>
-            <span>课程名称</span>
-            <input id="courseTitleInput" name="title" type="text" maxlength="40" placeholder="例如：高等数学">
-          </label>
-          <label>
-            <span>上课地点</span>
-            <input id="courseLocationInput" name="location" type="text" maxlength="40" placeholder="例如：教学楼 A302">
-          </label>
-          <label>
-            <span>星期几</span>
-            <select id="courseWeekdayInput" name="day_of_week">
-              <option value="1">星期一</option>
-              <option value="2">星期二</option>
-              <option value="3">星期三</option>
-              <option value="4">星期四</option>
-              <option value="5">星期五</option>
-              <option value="6">星期六</option>
-              <option value="7">星期日</option>
-            </select>
-          </label>
-          <div class="split-fields">
-            <label>
-              <span>开始时间</span>
-              <input id="courseStartTimeInput" name="start_time" type="time">
-            </label>
-            <label>
-              <span>结束时间</span>
-              <input id="courseEndTimeInput" name="end_time" type="time">
-            </label>
-          </div>
-          <div class="split-fields">
-            <label>
-              <span>开始周数</span>
-              <input id="courseStartWeekInput" name="start_week" type="number" min="1" max="30" value="1">
-            </label>
-            <label>
-              <span>结束周数</span>
-              <input id="courseEndWeekInput" name="end_week" type="number" min="1" max="30" value="16">
-            </label>
-          </div>
-          <label>
-            <span>单双周</span>
-            <select id="courseWeekPatternInput" name="week_pattern">
-              <option value="all">每周</option>
-              <option value="odd">单周</option>
-              <option value="even">双周</option>
-            </select>
-          </label>
-          <div class="form-actions">
-            <button class="secondary-button" type="button" data-close-modal="courseModal">取消</button>
-            <button class="primary-button" type="submit">保存课程</button>
-          </div>
-        </form>
-      </div>
-    </div>
+      </section>
+    {% endif %}
 
     <div class="toast-stack" id="toastStack"></div>
   </main>