Refactor admin pages and home cards

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
+from storage import ReminderStore, beijing_now, build_default_time_slots
 
 BASE_DIR = Path(__file__).resolve().parent
 STORE_PATH = BASE_DIR / "data" / "store.json"
@@ -70,6 +70,13 @@ WEEKDAYS = [
     "星期日",
 ]
 WEEKDAY_SHORT = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
+MAJOR_BLOCK_GROUPS = [
+    ("第一大节", 0, 2),
+    ("第二大节", 2, 4),
+    ("第三大节", 4, 7),
+    ("第四大节", 7, 9),
+    ("第五大节", 9, 12),
+]
 
 
 def get_password() -> str:
@@ -150,6 +157,68 @@ def normalize_time_string(raw_value: str) -> str:
     return minutes_to_hhmm(parse_time_to_minutes(raw_value))
 
 
+def normalize_time_slots(raw_slots: list[dict]) -> list[dict[str, str]]:
+    if not isinstance(raw_slots, list) or not raw_slots:
+        raise ValueError(MSG_INVALID_TIME_RANGE)
+
+    normalized: list[dict[str, str]] = []
+    previous_end = None
+
+    for index, slot in enumerate(raw_slots, start=1):
+        label = str(slot.get("label", "")).strip() or f"第{index:02d}节课"
+        start = normalize_time_string(str(slot.get("start", "")).strip())
+        end = normalize_time_string(str(slot.get("end", "")).strip())
+        start_minutes = parse_time_to_minutes(start)
+        end_minutes = parse_time_to_minutes(end)
+
+        if start_minutes >= end_minutes:
+            raise ValueError(MSG_INVALID_TIME_RANGE)
+        if previous_end is not None and start_minutes < previous_end:
+            raise ValueError(MSG_INVALID_TIME_RANGE)
+
+        normalized.append(
+            {
+                "label": label,
+                "start": start,
+                "end": end,
+            }
+        )
+        previous_end = end_minutes
+
+    return normalized
+
+
+def get_configured_time_slots(settings: dict | None = None) -> list[dict[str, str]]:
+    source = settings or store.get_schedule_settings()
+    raw_slots = source.get("time_slots") or [
+        {
+            "label": slot["label"],
+            "start": slot["start"],
+            "end": slot["end"],
+        }
+        for slot in CLASS_PERIODS
+    ]
+    return normalize_time_slots(raw_slots)
+
+
+def build_major_blocks_from_time_slots(time_slots: list[dict[str, str]]) -> list[dict[str, str]]:
+    major_blocks: list[dict[str, str]] = []
+    for label, start_index, end_index in MAJOR_BLOCK_GROUPS:
+        if len(time_slots) <= start_index:
+            continue
+        block_slots = time_slots[start_index:min(end_index, len(time_slots))]
+        if not block_slots:
+            continue
+        major_blocks.append(
+            {
+                "label": label,
+                "start": block_slots[0]["start"],
+                "end": block_slots[-1]["end"],
+            }
+        )
+    return major_blocks
+
+
 def compute_task_progress(task: dict) -> float:
     if task.get("completed"):
         return 100.0
@@ -231,11 +300,14 @@ def parse_schedule_settings(payload: dict) -> dict:
     if default_duration < 30 or default_duration > 240:
         raise ValueError(MSG_INVALID_DURATION)
 
+    time_slots = normalize_time_slots(payload.get("time_slots") or get_configured_time_slots())
+
     return {
         "semester_start": semester_start,
         "day_start": day_start,
         "day_end": day_end,
         "default_task_duration_minutes": default_duration,
+        "time_slots": time_slots,
     }
 
 
@@ -330,6 +402,8 @@ def find_schedule_conflict(task_id: str, schedule: dict | None) -> str | None:
 
 def build_planner_payload(selected_date: date) -> dict:
     settings = store.get_schedule_settings()
+    time_slots = get_configured_time_slots(settings)
+    major_blocks = build_major_blocks_from_time_slots(time_slots)
     semester_start = date.fromisoformat(settings["semester_start"])
     delta_days = (selected_date - semester_start).days
     academic_week = (delta_days // 7) + 1 if delta_days >= 0 else 0
@@ -388,8 +462,8 @@ def build_planner_payload(selected_date: date) -> dict:
         "academic_week": academic_week,
         "academic_label": f"第 {academic_week} 周" if academic_week > 0 else "开学前",
         "settings": settings,
-        "time_slots": CLASS_PERIODS,
-        "major_blocks": MAJOR_BLOCKS,
+        "time_slots": time_slots,
+        "major_blocks": major_blocks,
         "tasks": task_list,
         "scheduled_items": scheduled_items,
     }
@@ -397,6 +471,8 @@ def build_planner_payload(selected_date: date) -> dict:
 
 def build_week_planner_payload(selected_date: date) -> dict:
     settings = store.get_schedule_settings()
+    time_slots = get_configured_time_slots(settings)
+    major_blocks = build_major_blocks_from_time_slots(time_slots)
     semester_start = date.fromisoformat(settings["semester_start"])
     week_start = get_week_start(selected_date)
     week_end = week_start + timedelta(days=6)
@@ -485,8 +561,8 @@ def build_week_planner_payload(selected_date: date) -> dict:
         "academic_week": academic_week,
         "academic_label": f"第 {academic_week} 周" if academic_week > 0 else "开学前",
         "settings": settings,
-        "time_slots": CLASS_PERIODS,
-        "major_blocks": MAJOR_BLOCKS,
+        "time_slots": time_slots,
+        "major_blocks": major_blocks,
         "tasks": task_list,
         "scheduled_items": scheduled_items,
     }
@@ -499,6 +575,39 @@ def inject_globals():
     }
 
 
+def build_admin_tabs(active_page: str) -> list[dict[str, str | bool]]:
+    tabs = [
+        ("schedule", "时间表设置", "admin_schedule"),
+        ("lists", "清单管理", "admin_lists"),
+        ("courses", "课程管理", "admin_courses"),
+    ]
+    return [
+        {
+            "key": key,
+            "label": label,
+            "href": url_for(endpoint),
+            "active": key == active_page,
+        }
+        for key, label, endpoint in tabs
+    ]
+
+
+def render_admin_page(active_page: str):
+    if not is_authed():
+        return redirect(url_for("index", login="required", next=request.path))
+
+    schedule_settings = store.get_schedule_settings()
+    return render_template(
+        "admin.html",
+        admin_page=active_page,
+        admin_tabs=build_admin_tabs(active_page),
+        categories=store.list_categories(),
+        courses=store.list_courses(),
+        schedule_settings=schedule_settings,
+        default_time_slots=build_default_time_slots(),
+    )
+
+
 @app.get("/")
 def index():
     login_required = request.args.get("login") == "required"
@@ -516,14 +625,22 @@ def index():
 
 @app.get("/admin")
 def admin():
-    if not is_authed():
-        return redirect(url_for("index", login="required", next=url_for("admin")))
-    return render_template(
-        "admin.html",
-        categories=store.list_categories(),
-        courses=store.list_courses(),
-        schedule_settings=store.get_schedule_settings(),
-    )
+    return redirect(url_for("admin_schedule"))
+
+
+@app.get("/admin/schedule")
+def admin_schedule():
+    return render_admin_page("schedule")
+
+
+@app.get("/admin/lists")
+def admin_lists():
+    return render_admin_page("lists")
+
+
+@app.get("/admin/courses")
+def admin_courses():
+    return render_admin_page("courses")
 
 
 @app.get("/api/planner")

static/admin-v020.js

@@ -1,26 +1,38 @@
 (function () {
   const bootstrap = window.__ADMIN_BOOTSTRAP__ || {};
   const state = {
+    adminPage: bootstrap.adminPage || "schedule",
     courses: bootstrap.courses || [],
+    categories: bootstrap.categories || [],
+    scheduleSettings: bootstrap.scheduleSettings || {},
+    defaultTimeSlots: bootstrap.defaultTimeSlots || [],
+    scheduleEditor: {
+      segments: [],
+      interaction: null,
+      rangeStart: 0,
+      rangeEnd: 0,
+      pixelsPerMinute: 1.1,
+    },
   };
 
   const toastStack = document.getElementById("toastStack");
   const courseGrid = document.getElementById("courseGrid");
   const courseModal = document.getElementById("courseModal");
   const courseForm = document.getElementById("courseForm");
-  const scheduleSettingsForm = document.getElementById("scheduleSettingsForm");
   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 scheduleSegmentCount = document.getElementById("scheduleSegmentCount");
+  const resetTimelineButton = document.getElementById("resetTimelineButton");
 
-  if (!courseGrid || !courseForm || !scheduleSettingsForm || !createCategoryForm || !adminGrid) {
+  if (!toastStack) {
     return;
   }
 
   function showToast(message, kind = "success") {
-    if (!toastStack) {
-      return;
-    }
     const toast = document.createElement("div");
     toast.className = `toast ${kind}`;
     toast.textContent = message;
@@ -54,6 +66,25 @@
     }
   }
 
+  function toMinutes(value) {
+    const [hour, minute] = String(value).split(":").map(Number);
+    return (hour * 60) + minute;
+  }
+
+  function minutesToTime(totalMinutes) {
+    const hour = Math.floor(totalMinutes / 60);
+    const minute = totalMinutes % 60;
+    return `${String(hour).padStart(2, "0")}:${String(minute).padStart(2, "0")}`;
+  }
+
+  function snapMinutes(value, step = 5) {
+    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 "单周";
@@ -70,7 +101,7 @@
 
   function courseCard(course) {
     return `
-      <article class="admin-card course-card" data-course-id="${course.id}">
+      <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>
@@ -89,27 +120,33 @@
   }
 
   function categoryCard(category) {
+    const taskCount = Array.isArray(category.tasks) ? category.tasks.length : Number(category.task_count || 0);
     return `
-      <article class="admin-card" data-category-id="${category.id}">
+      <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">0 项任务</span>
+          <span class="task-count">${taskCount} 项任务</span>
         </div>
         <p class="admin-card-copy">删除分类会同时移除其下全部任务，请谨慎操作。</p>
-        <button class="danger-button" type="button" data-delete-category="${category.id}">删除此清单</button>
+        <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>
+          <p class="admin-card-copy">点击上方“新增课程”即可录入课程，保存后周课表会自动按周显示。</p>
         </article>
       `;
       return;
@@ -117,6 +154,13 @@
     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 : "";
@@ -130,127 +174,387 @@
     document.getElementById("courseModalTitle").textContent = course ? "编辑课程" : "新增课程";
   }
 
-  openCourseModalButton.addEventListener("click", () => {
-    resetCourseForm(null);
-    openModal(courseModal);
-  });
+  function cloneSegments(segments) {
+    return segments.map((segment) => ({ ...segment }));
+  }
 
-  courseForm.addEventListener("submit", async (event) => {
-    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,
-    };
+  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);
 
-    try {
-      const payloadData = await requestJSON(courseId ? `/api/courses/${courseId}` : "/api/courses", {
-        method: courseId ? "PATCH" : "POST",
-        body: JSON.stringify(payload),
+    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,
+          });
+        }
+      }
+      segments.push({
+        id: `class-${index + 1}`,
+        kind: "class",
+        label: slot.label,
+        startMinutes: slot.startMinutes,
+        endMinutes: slot.endMinutes,
       });
-      if (courseId) {
-        state.courses = state.courses.map((course) => (course.id === courseId ? payloadData.course : course));
-        showToast("课程已更新");
-      } else {
-        state.courses.unshift(payloadData.course);
-        showToast("课程已创建");
+    });
+    return segments;
+  }
+
+  function getEditorPixelsPerMinute() {
+    return state.scheduleEditor.pixelsPerMinute || 1.1;
+  }
+
+  function segmentMinDuration(segment) {
+    return segment.kind === "break" ? 5 : 25;
+  }
+
+  function buildScheduleAxisMarks(startMinutes, endMinutes, segments) {
+    const marks = new Set([startMinutes, endMinutes]);
+    segments.forEach((segment) => {
+      marks.add(segment.startMinutes);
+      marks.add(segment.endMinutes);
+    });
+
+    let hour = Math.floor(startMinutes / 60) * 60;
+    while (hour <= endMinutes) {
+      marks.add(hour);
+      hour += 60;
+    }
+    return Array.from(marks).sort((left, right) => left - right);
+  }
+
+  function renderScheduleEditor() {
+    if (!scheduleEditorAxis || !scheduleEditorTrack) {
+      return;
+    }
+
+    const segments = state.scheduleEditor.segments;
+    if (!segments.length) {
+      scheduleEditorAxis.innerHTML = "";
+      scheduleEditorTrack.innerHTML = "";
+      if (scheduleSegmentCount) {
+        scheduleSegmentCount.textContent = "0 段";
       }
-      renderCourses();
-      closeModal(courseModal);
-    } catch (error) {
-      showToast(error.message, "error");
+      return;
     }
-  });
 
-  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);
+    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);
+
+    scheduleEditorAxis.innerHTML = "";
+    scheduleEditorTrack.innerHTML = "";
+    scheduleEditorAxis.style.height = `${height}px`;
+    scheduleEditorTrack.style.height = `${height}px`;
+
+    const marks = buildScheduleAxisMarks(firstStart, lastEnd, segments);
+    marks.forEach((minute, index) => {
+      const tick = document.createElement("div");
+      tick.className = "schedule-editor-tick";
+      if (index === 0) {
+        tick.classList.add("is-leading");
       }
+      if (index === marks.length - 1) {
+        tick.classList.add("is-terminal");
+      }
+      tick.style.top = `${Math.round((minute - firstStart) * getEditorPixelsPerMinute())}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`;
+      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.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>
+      `;
+      scheduleEditorTrack.appendChild(block);
+    });
+
+    if (scheduleSegmentCount) {
+      scheduleSegmentCount.textContent = `${segments.length} 段`;
+    }
+  }
+
+  function beginScheduleResize(event, index) {
+    const segment = state.scheduleEditor.segments[index];
+    if (!segment) {
       return;
     }
+    event.preventDefault();
+    state.scheduleEditor.interaction = {
+      index,
+      pointerId: event.pointerId,
+      startY: event.clientY,
+      snapshot: cloneSegments(state.scheduleEditor.segments),
+    };
+  }
 
-    const deleteButton = event.target.closest("[data-delete-course]");
-    if (!deleteButton) {
+  function updateScheduleResize(clientY) {
+    const interaction = state.scheduleEditor.interaction;
+    if (!interaction) {
       return;
     }
-    try {
-      await requestJSON(`/api/courses/${deleteButton.dataset.deleteCourse}`, {
-        method: "DELETE",
-        body: JSON.stringify({}),
-      });
-      state.courses = state.courses.filter((course) => course.id !== deleteButton.dataset.deleteCourse);
-      renderCourses();
-      showToast("课程已删除");
-    } catch (error) {
-      showToast(error.message, "error");
+    const deltaMinutes = snapMinutes((clientY - interaction.startY) / getEditorPixelsPerMinute());
+    const segments = cloneSegments(interaction.snapshot);
+    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;
     }
-  });
 
-  createCategoryForm.addEventListener("submit", async (event) => {
-    event.preventDefault();
-    const nameInput = document.getElementById("newCategoryName");
-    const name = nameInput.value.trim();
-    try {
-      const payload = await requestJSON("/api/categories", {
-        method: "POST",
-        body: JSON.stringify({ name }),
-      });
-      adminGrid.insertAdjacentHTML("beforeend", categoryCard(payload.category));
-      nameInput.value = "";
-      showToast("新分类已创建");
-    } catch (error) {
-      showToast(error.message, "error");
+    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);
+
+    document.getElementById("dayStartInput").value = minutesToTime(nextDayStart);
+    document.getElementById("dayEndInput").value = minutesToTime(nextDayEnd);
+
+    return {
+      semester_start: document.getElementById("semesterStartInput").value,
+      day_start: minutesToTime(nextDayStart),
+      day_end: minutesToTime(nextDayEnd),
+      default_task_duration_minutes: Number(document.getElementById("defaultDurationInput").value),
+      time_slots: classSegments.map((segment) => ({
+        label: segment.label,
+        start: minutesToTime(segment.startMinutes),
+        end: minutesToTime(segment.endMinutes),
+      })),
+    };
+  }
 
-  adminGrid.addEventListener("click", async (event) => {
-    const button = event.target.closest("[data-delete-category]");
-    if (!button) {
+  function resetScheduleEditor(useDefault) {
+    const source = useDefault ? state.defaultTimeSlots : (state.scheduleSettings.time_slots || []);
+    state.scheduleEditor.segments = buildScheduleSegmentsFromSlots(source);
+    renderScheduleEditor();
+  }
+
+  function initCoursesPage() {
+    if (!courseForm || !courseGrid) {
       return;
     }
-    try {
-      await requestJSON(`/api/categories/${button.dataset.deleteCategory}`, {
-        method: "DELETE",
-        body: JSON.stringify({}),
+
+    if (openCourseModalButton) {
+      openCourseModalButton.addEventListener("click", () => {
+        resetCourseForm(null);
+        openModal(courseModal);
       });
-      const card = button.closest(".admin-card");
-      if (card) {
-        card.remove();
+    }
+
+    courseForm.addEventListener("submit", async (event) => {
+      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,
+      };
+
+      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");
+      }
+    });
+
+    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);
+        }
+        return;
+      }
+
+      const deleteButton = event.target.closest("[data-delete-course]");
+      if (!deleteButton) {
+        return;
       }
-      showToast("分类已删除");
-    } catch (error) {
-      showToast(error.message, "error");
+
+      try {
+        await requestJSON(`/api/courses/${deleteButton.dataset.deleteCourse}`, {
+          method: "DELETE",
+          body: JSON.stringify({}),
+        });
+        state.courses = state.courses.filter((course) => course.id !== deleteButton.dataset.deleteCourse);
+        renderCourses();
+        showToast("课程已删除");
+      } catch (error) {
+        showToast(error.message, "error");
+      }
+    });
+
+    renderCourses();
+  }
+
+  function initListsPage() {
+    if (!createCategoryForm || !adminGrid) {
+      return;
     }
-  });
 
-  scheduleSettingsForm.addEventListener("submit", async (event) => {
-    event.preventDefault();
-    const payload = {
-      semester_start: document.getElementById("semesterStartInput").value,
-      day_start: document.getElementById("dayStartInput").value,
-      day_end: document.getElementById("dayEndInput").value,
-      default_task_duration_minutes: Number(document.getElementById("defaultDurationInput").value),
-    };
-    try {
-      await requestJSON("/api/settings/schedule", {
-        method: "PATCH",
-        body: JSON.stringify(payload),
+    createCategoryForm.addEventListener("submit", async (event) => {
+      event.preventDefault();
+      const nameInput = document.getElementById("newCategoryName");
+      const name = nameInput.value.trim();
+      try {
+        const payload = await requestJSON("/api/categories", {
+          method: "POST",
+          body: JSON.stringify({ name }),
+        });
+        state.categories = [...state.categories, payload.category];
+        renderCategories();
+        nameInput.value = "";
+        showToast("新分类已创建");
+      } catch (error) {
+        showToast(error.message, "error");
+      }
+    });
+
+    adminGrid.addEventListener("click", async (event) => {
+      const button = event.target.closest("[data-delete-category]");
+      if (!button) {
+        return;
+      }
+      try {
+        await requestJSON(`/api/categories/${button.dataset.deleteCategory}`, {
+          method: "DELETE",
+          body: JSON.stringify({}),
+        });
+        state.categories = state.categories.filter((category) => category.id !== button.dataset.deleteCategory);
+        renderCategories();
+        showToast("分类已删除");
+      } catch (error) {
+        showToast(error.message, "error");
+      }
+    });
+
+    renderCategories();
+  }
+
+  function initSchedulePage() {
+    if (!scheduleSettingsForm || !scheduleEditorAxis || !scheduleEditorTrack) {
+      return;
+    }
+
+    resetScheduleEditor(false);
+
+    scheduleEditorTrack.addEventListener("pointerdown", (event) => {
+      const handle = event.target.closest("[data-segment-index]");
+      if (!handle) {
+        return;
+      }
+      beginScheduleResize(event, Number(handle.dataset.segmentIndex));
+    });
+
+    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("已恢复默认节次，记得保存");
       });
-      showToast("时间表设置已保存");
-    } catch (error) {
-      showToast(error.message, "error");
     }
-  });
+
+    scheduleSettingsForm.addEventListener("submit", async (event) => {
+      event.preventDefault();
+      try {
+        const payload = collectSchedulePayload();
+        const result = await requestJSON("/api/settings/schedule", {
+          method: "PATCH",
+          body: JSON.stringify(payload),
+        });
+        state.scheduleSettings = result.settings;
+        state.scheduleEditor.segments = buildScheduleSegmentsFromSlots(result.settings.time_slots || []);
+        renderScheduleEditor();
+        showToast("时间表设置已保存");
+      } catch (error) {
+        showToast(error.message, "error");
+      }
+    });
+  }
 
   document.addEventListener("click", (event) => {
     const closeTarget = event.target.closest("[data-close-modal]");
@@ -262,5 +566,7 @@
     }
   });
 
-  renderCourses();
+  initCoursesPage();
+  initListsPage();
+  initSchedulePage();
 })();

static/v020.css

@@ -122,13 +122,20 @@ body.planner-interacting .page-planner {
 .page-home .hero-card {
   min-height: 0;
   padding: 22px 24px;
-  display: grid;
-  place-items: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .clock-wrap {
+  width: 100%;
   gap: 6px;
   padding: 6px 0 4px;
+  display: grid;
+  justify-items: center;
+  align-content: center;
+  text-align: center;
+  margin: 0 auto;
 }
 
 .clock-display {
@@ -154,6 +161,14 @@ body.planner-interacting .page-planner {
   overflow: hidden;
 }
 
+.page-home .board-section {
+  grid-template-rows: minmax(0, 1fr);
+}
+
+.page-home .board-section > .section-header {
+  display: none;
+}
+
 .board-section .section-header {
   margin-bottom: 0;
 }
@@ -179,24 +194,45 @@ body.planner-interacting .page-planner {
   min-height: 0;
   height: 100%;
   max-height: 100%;
-  overflow: hidden;
+  position: relative;
+  overflow: visible;
   display: grid;
   grid-template-rows: auto minmax(0, 1fr);
 }
 
-.column-header {
-  gap: 12px;
+.page-home .column-header {
+  position: relative;
+  display: block;
+  min-height: 58px;
+  padding-right: 112px;
+  z-index: 12;
 }
 
 .column-title {
   font-size: 1.2rem;
 }
 
+.page-home .column-actions {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 24;
+}
+
+.page-home .menu-wrap {
+  position: relative;
+  z-index: 28;
+}
+
+.page-home .menu-panel {
+  z-index: 60;
+}
+
 .task-list {
   display: flex;
   flex-direction: column;
   gap: 10px;
-  margin-top: 12px;
+  margin-top: 0;
   min-height: 0;
   height: 100%;
   max-height: 100%;
@@ -918,6 +954,170 @@ body.planner-interacting .page-planner {
   flex: 1;
 }
 
+.admin-layout-v2 {
+  width: min(1480px, calc(100% - 28px));
+}
+
+.admin-page-nav {
+  display: inline-flex;
+  gap: 8px;
+  padding: 6px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.admin-page-tab {
+  min-height: 42px;
+  padding: 0 16px;
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--muted-strong);
+}
+
+.admin-page-tab.is-active {
+  background: linear-gradient(135deg, rgba(123, 231, 234, 0.2) 0%, rgba(97, 210, 159, 0.18) 100%);
+  color: var(--text);
+}
+
+.admin-stack {
+  display: grid;
+  gap: 16px;
+}
+
+.admin-row-card {
+  padding: 20px 22px;
+}
+
+.course-list .course-card {
+  border-radius: 22px;
+}
+
+.admin-schedule-grid {
+  grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
+  align-items: start;
+}
+
+.schedule-form-card {
+  position: sticky;
+  top: 28px;
+}
+
+.schedule-editor-card {
+  padding: 22px;
+}
+
+.schedule-editor-shell {
+  display: grid;
+  grid-template-columns: 92px minmax(0, 1fr);
+  gap: 14px;
+  margin-top: 18px;
+}
+
+.schedule-editor-axis,
+.schedule-editor-track {
+  position: relative;
+  min-height: 760px;
+}
+
+.schedule-editor-axis {
+  border-right: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.schedule-editor-track {
+  border-radius: 24px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.01) 100%),
+    rgba(3, 11, 20, 0.42);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  overflow: hidden;
+}
+
+.schedule-editor-tick,
+.schedule-editor-line {
+  position: absolute;
+}
+
+.schedule-editor-tick {
+  left: 0;
+  right: 0;
+  transform: translateY(-50%);
+  padding-right: 12px;
+  text-align: right;
+  color: rgba(238, 244, 251, 0.78);
+  font-size: 0.8rem;
+  font-variant-numeric: tabular-nums;
+}
+
+.schedule-editor-tick.is-leading {
+  transform: translateY(0);
+}
+
+.schedule-editor-tick.is-terminal {
+  transform: translateY(-100%);
+}
+
+.schedule-editor-line {
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: rgba(255, 255, 255, 0.07);
+}
+
+.schedule-editor-segment {
+  position: absolute;
+  left: 14px;
+  right: 14px;
+  border-radius: 18px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+}
+
+.schedule-editor-segment.class {
+  background: linear-gradient(180deg, rgba(123, 231, 234, 0.16) 0%, rgba(255, 255, 255, 0.05) 100%);
+}
+
+.schedule-editor-segment.break {
+  background: linear-gradient(180deg, rgba(255, 200, 87, 0.14) 0%, rgba(255, 255, 255, 0.04) 100%);
+}
+
+.schedule-editor-segment-copy {
+  padding: 12px 14px 18px;
+  display: grid;
+  gap: 6px;
+}
+
+.schedule-editor-segment-copy strong {
+  font-size: 0.94rem;
+  line-height: 1.15;
+}
+
+.schedule-editor-segment-copy span,
+.schedule-editor-segment-kind {
+  color: var(--muted);
+  font-size: 0.8rem;
+}
+
+.schedule-editor-segment-kind {
+  position: absolute;
+  top: 12px;
+  right: 14px;
+}
+
+.schedule-editor-resize {
+  position: absolute;
+  left: 14px;
+  right: 14px;
+  bottom: 6px;
+  height: 8px;
+  border: 0;
+  border-radius: 999px;
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0.85), rgba(123, 231, 234, 0.9));
+  cursor: ns-resize;
+}
+
 @media (max-width: 1180px) {
   body {
     overflow: auto;
@@ -944,6 +1144,18 @@ body.planner-interacting .page-planner {
     justify-content: center;
   }
 
+  .admin-schedule-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .schedule-form-card {
+    position: static;
+  }
+
+  .admin-page-nav {
+    flex-wrap: wrap;
+  }
+
   .page-viewport,
   .page-track,
   .page-slide,
@@ -966,6 +1178,10 @@ body.planner-interacting .page-planner {
   .timeline-scroll {
     height: auto;
   }
+
+  .schedule-editor-shell {
+    grid-template-columns: 72px minmax(0, 1fr);
+  }
 }
 
 @media (max-width: 560px) {

storage.py

@@ -37,6 +37,22 @@ DEFAULT_PERIOD_TIMES = {
     11: ("20:15", "21:00"),
     12: ("21:10", "21:55"),
 }
+
+
+def build_default_time_slots() -> list[dict[str, str]]:
+    slots: list[dict[str, str]] = []
+    for index, (start, end) in DEFAULT_PERIOD_TIMES.items():
+        slots.append(
+            {
+                "label": f"第{index:02d}节课",
+                "start": start,
+                "end": end,
+            }
+        )
+    return slots
+
+
+DEFAULT_SCHEDULE_SETTINGS["time_slots"] = build_default_time_slots()
 DEFAULT_IMPORTED_COURSES = [
     {
         "title": "形势与政策-2_20",
@@ -322,7 +338,25 @@ class ReminderStore:
 
         for key, value in DEFAULT_SCHEDULE_SETTINGS.items():
             if key not in settings:
-                settings[key] = value
+                settings[key] = deepcopy(value)
+                changed = True
+
+        time_slots = settings.get("time_slots")
+        if not isinstance(time_slots, list) or not time_slots:
+            settings["time_slots"] = build_default_time_slots()
+            changed = True
+        else:
+            normalized_time_slots = []
+            for index, slot in enumerate(time_slots, start=1):
+                normalized_time_slots.append(
+                    {
+                        "label": str(slot.get("label", "")).strip() or f"第{index:02d}节课",
+                        "start": str(slot.get("start", DEFAULT_PERIOD_TIMES.get(index, ("08:15", "09:00"))[0])),
+                        "end": str(slot.get("end", DEFAULT_PERIOD_TIMES.get(index, ("08:15", "09:00"))[1])),
+                    }
+                )
+            if normalized_time_slots != time_slots:
+                settings["time_slots"] = normalized_time_slots
                 changed = True
 
         if course_seed_version != DEFAULT_COURSE_SEED_VERSION:

templates/admin.html

@@ -4,204 +4,228 @@
   <link rel="stylesheet" href="{{ url_for('static', filename='v020.css') }}">
 {% endblock %}
 {% block body %}
-  <main class="admin-layout">
+  <main class="admin-layout admin-layout-v2" data-admin-page="{{ admin_page }}">
     <section class="admin-hero card-surface">
       <div>
-        <p class="section-kicker">管理后台</p>
-        <h1>维护清单分类、课程和时间表设置</h1>
-        <p class="admin-copy">课程属于固定时间块，只能在这里创建、编辑和删除，首页第二页会自动按周次生成。</p>
+        <p class="section-kicker">后台管理</p>
+        {% if admin_page == "schedule" %}
+          <h1>时间表设置</h1>
+          <p class="admin-copy">用时间轴方式调整上课与课间时段，首页和周课表会自动同步新的节次。</p>
+        {% elif admin_page == "lists" %}
+          <h1>清单管理</h1>
+          <p class="admin-copy">集中维护首页的 todolist 分类，分类名称会立即同步到首页与第二页。</p>
+        {% else %}
+          <h1>课程管理</h1>
+          <p class="admin-copy">课程按竖直列表统一维护，保存后会自动出现在周课表中。</p>
+        {% endif %}
       </div>
+
       <div class="action-group">
         <a class="ghost-link" href="{{ url_for('index') }}">返回主页</a>
-        <button class="pill-button accent" id="openCourseModalButton" type="button">新增课程</button>
+        {% if admin_page == "courses" %}
+          <button class="pill-button accent" id="openCourseModalButton" type="button">新增课程</button>
+        {% endif %}
       </div>
-    </section>
 
-    <section class="admin-section">
-      <div class="section-header">
-        <div>
-          <p class="section-kicker">时间表设置</p>
-          <h2>定义学期起始日和日程显示范围</h2>
-        </div>
-        <p class="section-note">课程周次会基于学期开始日期自动换算，首页时间表显示范围默认是 08:15 到 23:00。</p>
-      </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 %}
+      </nav>
+    </section>
 
-      <div class="admin-grid admin-grid-tight">
-        <article class="admin-card">
-          <div class="admin-card-head">
-            <div>
-              <p class="column-label">Planner Settings</p>
-              <h2>时间表基础参数</h2>
+    {% if admin_page == "schedule" %}
+      <section class="admin-section">
+        <div class="admin-grid admin-grid-tight admin-schedule-grid">
+          <article class="admin-card schedule-form-card">
+            <div class="admin-card-head">
+              <div>
+                <p class="column-label">Basic Settings</p>
+                <h2>基础参数</h2>
+              </div>
             </div>
-          </div>
-          <form id="scheduleSettingsForm" class="modal-form compact">
-            <label>
-              <span>学期开始日期</span>
-              <input id="semesterStartInput" name="semester_start" type="date" value="{{ schedule_settings.semester_start }}">
-            </label>
-            <label>
-              <span>显示开始时间</span>
-              <input id="dayStartInput" name="day_start" type="time" value="{{ schedule_settings.day_start }}">
-            </label>
-            <label>
-              <span>显示结束时间</span>
-              <input id="dayEndInput" name="day_end" type="time" value="{{ schedule_settings.day_end }}">
-            </label>
-            <label>
-              <span>默认任务时长（分钟）</span>
-              <input id="defaultDurationInput" name="default_task_duration_minutes" type="number" min="30" max="240" step="15" value="{{ schedule_settings.default_task_duration_minutes }}">
-            </label>
-            <button class="primary-button" type="submit">保存时间表设置</button>
-          </form>
-        </article>
 
-        <article class="admin-card create-card">
-          <div class="create-icon">+</div>
-          <h2>新建一个清单</h2>
-          <form id="createCategoryForm" class="modal-form compact">
-            <label>
-              <span>分类名称</span>
-              <input id="newCategoryName" name="name" type="text" maxlength="20" placeholder="例如：健康管理">
-            </label>
-            <button class="primary-button" type="submit">立即创建</button>
-          </form>
-        </article>
-      </div>
-    </section>
+            <form id="scheduleSettingsForm" class="modal-form compact">
+              <label>
+                <span>学期开始日期</span>
+                <input id="semesterStartInput" name="semester_start" type="date" value="{{ schedule_settings.semester_start }}">
+              </label>
+              <label>
+                <span>课表显示开始</span>
+                <input id="dayStartInput" name="day_start" type="time" value="{{ schedule_settings.day_start }}">
+              </label>
+              <label>
+                <span>课表显示结束</span>
+                <input id="dayEndInput" name="day_end" type="time" value="{{ schedule_settings.day_end }}">
+              </label>
+              <label>
+                <span>默认任务时长（分钟）</span>
+                <input id="defaultDurationInput" name="default_task_duration_minutes" type="number" min="30" max="240" step="15" value="{{ schedule_settings.default_task_duration_minutes }}">
+              </label>
+              <div class="form-actions">
+                <button class="secondary-button" id="resetTimelineButton" type="button">恢复默认节次</button>
+                <button class="primary-button" type="submit">保存时间表设置</button>
+              </div>
+            </form>
+          </article>
 
-    <section class="admin-section">
-      <div class="section-header">
-        <div>
-          <p class="section-kicker">固定课程</p>
-          <h2>这些课程会自动出现在第二页时间表中</h2>
+          <article class="admin-card schedule-editor-card">
+            <div class="admin-card-head">
+              <div>
+                <p class="column-label">Timeline Editor</p>
+                <h2>拖动上课与课间块调整节次</h2>
+              </div>
+              <span class="task-count" id="scheduleSegmentCount">0 段</span>
+            </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>
+          </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="create-icon">+</div>
+            <h2>新建一个清单</h2>
+            <form id="createCategoryForm" class="modal-form compact">
+              <label>
+                <span>分类名称</span>
+                <input id="newCategoryName" name="name" type="text" maxlength="20" placeholder="例如：项目推进">
+              </label>
+              <button class="primary-button" type="submit">立即创建</button>
+            </form>
+          </article>
         </div>
-        <p class="section-note">如果你之前发给我的课程表没有保存在本地，可以先在这里手动录入，后续我也可以继续帮你批量导入。</p>
-      </div>
 
-      <section class="admin-grid" id="courseGrid">
-        {% if courses %}
-          {% for course in courses %}
-            <article class="admin-card course-card" data-course-id="{{ course.id }}">
+        <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">Course</p>
-                  <h2>{{ course.title }}</h2>
+                  <p class="column-label">Category</p>
+                  <h2>{{ category.name }}</h2>
                 </div>
-                <span class="task-count">{{ ["一","二","三","四","五","六","日"][course.day_of_week - 1] }}</span>
+                <span class="task-count">{{ category.tasks|length }} 项任务</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>
+              <p class="admin-card-copy">删除分类会同时移除其下全部任务，请谨慎操作。</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>
+                <button class="danger-button" type="button" data-delete-category="{{ category.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>
-    </section>
-
-    <section class="admin-section">
-      <div class="section-header">
-        <div>
-          <p class="section-kicker">清单分类</p>
-          <h2>删除分类会同时移除其下全部任务</h2>
-        </div>
-      </div>
-
-      <section class="admin-grid" id="adminGrid">
-        {% for category in categories %}
-          <article class="admin-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>
-            <button class="danger-button" type="button" data-delete-category="{{ category.id }}">删除此清单</button>
-          </article>
-        {% endfor %}
+    {% 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">
+                  <div>
+                    <p class="column-label">Course</p>
+                    <h2>{{ course.title }}</h2>
+                  </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>
-    </section>
-  </main>
+    {% endif %}
 
-  <div class="modal-backdrop" id="courseModal">
-    <div class="modal-card">
-      <div class="modal-head">
-        <p class="modal-kicker">固定课程</p>
-        <h3 id="courseModalTitle">新增课程</h3>
-      </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">
+    <div class="modal-backdrop" id="courseModal">
+      <div class="modal-card">
+        <div class="modal-head">
+          <p class="modal-kicker">固定课程</p>
+          <h3 id="courseModalTitle">新增课程</h3>
+        </div>
+        <form class="modal-form" id="courseForm">
+          <input id="courseIdInput" name="course_id" type="hidden">
           <label>
-            <span>开始时间</span>
-            <input id="courseStartTimeInput" name="start_time" type="time">
+            <span>课程名称</span>
+            <input id="courseTitleInput" name="title" type="text" maxlength="40" placeholder="例如：高等数学">
           </label>
           <label>
-            <span>结束时间</span>
-            <input id="courseEndTimeInput" name="end_time" type="time">
+            <span>上课地点</span>
+            <input id="courseLocationInput" name="location" type="text" maxlength="40" placeholder="例如：教学楼 A302">
           </label>
-        </div>
-        <div class="split-fields">
           <label>
-            <span>开始周数</span>
-            <input id="courseStartWeekInput" name="start_week" type="number" min="1" max="30" value="1">
+            <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>
-            <input id="courseEndWeekInput" name="end_week" type="number" min="1" max="30" value="16">
+            <span>单双周</span>
+            <select id="courseWeekPatternInput" name="week_pattern">
+              <option value="all">每周</option>
+              <option value="odd">单周</option>
+              <option value="even">双周</option>
+            </select>
           </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 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>
-  </div>
 
-  <div class="toast-stack" id="toastStack"></div>
+    <div class="toast-stack" id="toastStack"></div>
+  </main>
 {% endblock %}
 {% block scripts %}
   <script>
     window.__ADMIN_BOOTSTRAP__ = {
+      adminPage: {{ admin_page|tojson }},
       courses: {{ courses|tojson }},
+      categories: {{ categories|tojson }},
+      scheduleSettings: {{ schedule_settings|tojson }},
+      defaultTimeSlots: {{ default_time_slots|tojson }},
     };
   </script>
   <script src="{{ url_for('static', filename='admin-v020.js') }}"></script>