Release v0.2.0 weekly planner polish

app.py

@@ -1,6 +1,6 @@
 import hmac
 import os
-from datetime import date, datetime
+from datetime import date, datetime, timedelta
 from pathlib import Path
 from urllib.parse import urlparse
 from zoneinfo import ZoneInfo
@@ -68,6 +68,7 @@ WEEKDAYS = [
     "星期六",
     "星期日",
 ]
+WEEKDAY_SHORT = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
 
 
 def get_password() -> str:
@@ -260,6 +261,15 @@ def parse_task_schedule_payload(payload: dict, settings: dict) -> dict | None:
     }
 
 
+def get_week_start(target_date: date) -> date:
+    return target_date - timedelta(days=target_date.isoweekday() - 1)
+
+
+def get_academic_week(target_date: date, semester_start: date) -> int:
+    delta_days = (target_date - semester_start).days
+    return (delta_days // 7) + 1 if delta_days >= 0 else 0
+
+
 def course_occurs_on(course: dict, current_week: int, selected_date: date) -> bool:
     if current_week < 1:
         return False
@@ -341,6 +351,103 @@ def build_planner_payload(selected_date: date) -> dict:
     }
 
 
+def build_week_planner_payload(selected_date: date) -> dict:
+    settings = store.get_schedule_settings()
+    semester_start = date.fromisoformat(settings["semester_start"])
+    week_start = get_week_start(selected_date)
+    week_end = week_start + timedelta(days=6)
+    academic_week = get_academic_week(selected_date, semester_start)
+    task_list = [serialize_task(task) for task in store.list_tasks()]
+
+    week_days = []
+    week_day_set = set()
+    today = beijing_now().date()
+    for offset in range(7):
+        current_day = week_start + timedelta(days=offset)
+        iso_day = current_day.isoformat()
+        week_day_set.add(iso_day)
+        week_days.append(
+            {
+                "iso": iso_day,
+                "label": WEEKDAYS[current_day.weekday()],
+                "short_label": WEEKDAY_SHORT[current_day.weekday()],
+                "month_day": current_day.strftime("%m/%d"),
+                "day_of_month": current_day.day,
+                "is_today": current_day == today,
+            }
+        )
+
+    scheduled_items: list[dict] = []
+    for task in task_list:
+        schedule = task.get("schedule")
+        if schedule and schedule.get("date") in week_day_set:
+            scheduled_items.append(
+                {
+                    "id": f"planner_{task['id']}",
+                    "kind": "task",
+                    "task_id": task["id"],
+                    "title": task["title"],
+                    "category_name": task["category_name"],
+                    "completed": task.get("completed", False),
+                    "due_at": task["due_at"],
+                    "progress_percent": task["progress_percent"],
+                    "date": schedule["date"],
+                    "start_time": schedule["start_time"],
+                    "end_time": schedule["end_time"],
+                    "locked": False,
+                }
+            )
+
+    courses = store.list_courses()
+    for offset in range(7):
+        current_day = week_start + timedelta(days=offset)
+        current_week = get_academic_week(current_day, semester_start)
+        for course in courses:
+            if course_occurs_on(course, current_week, current_day):
+                scheduled_items.append(
+                    {
+                        "id": f"planner_{course['id']}_{current_day.isoformat()}",
+                        "kind": "course",
+                        "course_id": course["id"],
+                        "title": course["title"],
+                        "location": course.get("location", ""),
+                        "date": current_day.isoformat(),
+                        "start_time": course["start_time"],
+                        "end_time": course["end_time"],
+                        "locked": True,
+                        "week_pattern": course["week_pattern"],
+                        "color": course["color"],
+                        "start_week": course["start_week"],
+                        "end_week": course["end_week"],
+                    }
+                )
+
+    scheduled_items.sort(
+        key=lambda item: (
+            item.get("date", ""),
+            item["start_time"],
+            item["end_time"],
+            item["kind"],
+        )
+    )
+
+    return {
+        "selected_date": selected_date.isoformat(),
+        "weekday": WEEKDAYS[selected_date.weekday()],
+        "week_start": week_start.isoformat(),
+        "week_end": week_end.isoformat(),
+        "week_days": week_days,
+        "week_range_label": f"{week_start.strftime('%m/%d')} - {week_end.strftime('%m/%d')}",
+        "academic_week": academic_week,
+        "academic_label": f"第 {academic_week} 周" if academic_week > 0 else "开学前",
+        "settings": settings,
+        "time_slots": CLASS_PERIODS,
+        "major_blocks": MAJOR_BLOCKS,
+        "tasks": task_list,
+        "scheduled_items": scheduled_items,
+    }
+
+
 @app.context_processor
 def inject_globals():
     return {
@@ -352,7 +459,7 @@ def inject_globals():
 def index():
     login_required = request.args.get("login") == "required"
     next_path = safe_next_path(request.args.get("next"))
-    planner_payload = build_planner_payload(beijing_now().date())
+    planner_payload = build_week_planner_payload(beijing_now().date())
     return render_template(
         "index.html",
         categories=store.list_categories(),
@@ -381,7 +488,7 @@ def planner():
         selected_date = parse_iso_date(request.args.get("date"))
     except ValueError as exc:
         return jsonify({"ok": False, "error": str(exc)}), 400
-    return jsonify({"ok": True, "planner": build_planner_payload(selected_date)})
+    return jsonify({"ok": True, "planner": build_week_planner_payload(selected_date)})
 
 
 @app.post("/api/login")

static/app.js

@@ -551,12 +551,8 @@
     logoutButton.addEventListener("click", handleLogout);
   }
 
-  if (!state.authenticated) {
-    const promptedKey = "drm-login-prompted";
-    if (state.loginRequired || !window.sessionStorage.getItem(promptedKey)) {
-      openModal(loginModal);
-      window.sessionStorage.setItem(promptedKey, "1");
-    }
+  if (!state.authenticated && state.loginRequired) {
+    openModal(loginModal);
   }
 
   renderClock();

static/planner.js

@@ -8,16 +8,16 @@
     dragTaskId: null,
     interaction: null,
     suppressClickUntil: 0,
+    pixelsPerMinute: 0.58,
   };
 
-  const PIXELS_PER_MINUTE = 1.2;
-  const AXIS_WIDTH = 118;
-  const SLOT_WIDTH = 148;
-  const CANVAS_GAP = 16;
+  const DEFAULT_PIXELS_PER_MINUTE = 0.58;
+  const WEEK_HEADER_HEIGHT = 54;
+  const AXIS_WIDTH = 78;
+  const SLOT_WIDTH = 108;
+  const CANVAS_GAP = 12;
   const SNAP_MINUTES = 5;
   const MIN_DURATION = 15;
-  const MIN_BLOCK_HEIGHT = MIN_DURATION * PIXELS_PER_MINUTE;
-  const AXIS_LABEL_MIN_GAP = 28;
   const CLICK_SUPPRESS_MS = 260;
 
   const pageTrack = document.getElementById("pageTrack");
@@ -33,10 +33,11 @@
   const plannerTaskCount = document.getElementById("plannerTaskCount");
   const plannerTaskPool = document.getElementById("plannerTaskPool");
   const plannerTimeline = document.getElementById("plannerTimeline");
+  const timelineScroll = document.getElementById("timelineScroll");
   const loginModal = document.getElementById("loginModal");
   const toastStack = document.getElementById("toastStack");
 
-  if (!pageTrack || !plannerDateInput || !plannerPrevDay || !plannerNextDay || !plannerTaskPool || !plannerTimeline) {
+  if (!pageTrack || !plannerDateInput || !plannerPrevDay || !plannerNextDay || !plannerTaskPool || !plannerTimeline || !timelineScroll) {
     return;
   }
 
@@ -139,9 +140,13 @@
     }).format(date).replace(",", "");
   }
 
-  function formatPlannerDate(dateString) {
-    const [year, month, day] = String(dateString).split("-").map(Number);
-    return `${year} 年 ${String(month).padStart(2, "0")} 月 ${String(day).padStart(2, "0")} 日`;
+  function formatWeekRange(weekStart, weekEnd) {
+    if (!weekStart || !weekEnd) {
+      return "";
+    }
+    const [startYear, startMonth, startDay] = String(weekStart).split("-").map(Number);
+    const [endYear, endMonth, endDay] = String(weekEnd).split("-").map(Number);
+    return `${startYear}.${String(startMonth).padStart(2, "0")}.${String(startDay).padStart(2, "0")} - ${endYear}.${String(endMonth).padStart(2, "0")}.${String(endDay).padStart(2, "0")}`;
   }
 
   function getPlannerConfig() {
@@ -161,8 +166,34 @@
     };
   }
 
-  function getPlannerHeight() {
-    return timelinePixels(getPlannerConfig().totalMinutes);
+  function getWeekDays() {
+    return state.planner.week_days || [];
+  }
+
+  function getWeekDayIndex(dateIso) {
+    return getWeekDays().findIndex((day) => day.iso === dateIso);
+  }
+
+  function getWeekDayMeta(dateIso) {
+    return getWeekDays().find((day) => day.iso === dateIso) || null;
+  }
+
+  function computePlannerScale() {
+    const { totalMinutes } = getPlannerConfig();
+    const rect = timelineScroll.getBoundingClientRect();
+    const viewportAvailable = Math.max(Math.floor(window.innerHeight - rect.top - 18), 360);
+    const measuredHeight = Math.floor(timelineScroll.clientHeight || viewportAvailable);
+    const frameHeight = Math.max(Math.min(measuredHeight, viewportAvailable), 360);
+    const bodyHeight = Math.max(frameHeight - WEEK_HEADER_HEIGHT - 4, 300);
+    state.pixelsPerMinute = bodyHeight / totalMinutes;
+    return {
+      frameHeight,
+      bodyHeight,
+    };
+  }
+
+  function getPixelsPerMinute() {
+    return state.pixelsPerMinute || DEFAULT_PIXELS_PER_MINUTE;
   }
 
   function getCanvasRect() {
@@ -177,10 +208,26 @@
       return dayStart;
     }
     const offsetY = clamp(clientY - rect.top, 0, rect.height);
-    const minutes = dayStart + (offsetY / PIXELS_PER_MINUTE);
+    const minutes = dayStart + (offsetY / getPixelsPerMinute());
     return clamp(snapMinutes(minutes), dayStart, dayEnd);
   }
 
+  function clientPointToSchedule(clientX, clientY) {
+    const rect = getCanvasRect();
+    const days = getWeekDays();
+    if (!rect || !days.length) {
+      return null;
+    }
+    const relativeX = clamp(clientX - rect.left, 0, Math.max(rect.width - 1, 0));
+    const columnWidth = rect.width / days.length;
+    const dayIndex = clamp(Math.floor(relativeX / columnWidth), 0, days.length - 1);
+    return {
+      date: days[dayIndex].iso,
+      minutes: clientYToMinutes(clientY),
+      dayIndex,
+    };
+  }
+
   function getTaskById(taskId) {
     return (state.planner.tasks || []).find((task) => task.id === taskId) || null;
   }
@@ -193,15 +240,17 @@
   }
 
   function minutesToPixels(minutes) {
-    return minutes * PIXELS_PER_MINUTE;
+    return Math.round(minutes * getPixelsPerMinute());
   }
 
   function timelinePixels(minutes) {
-    return Math.round(minutesToPixels(minutes));
+    return minutesToPixels(minutes);
   }
 
   function getBlockHeight(startMinutes, endMinutes) {
-    return Math.max(timelinePixels(endMinutes - startMinutes), Math.round(MIN_BLOCK_HEIGHT));
+    const scaledHeight = timelinePixels(endMinutes - startMinutes);
+    const minimumHeight = Math.max(28, Math.round(getPixelsPerMinute() * MIN_DURATION));
+    return Math.max(scaledHeight, minimumHeight);
   }
 
   function setBlockBounds(block, startMinutes, endMinutes, dayStart) {
@@ -211,15 +260,31 @@
     return height;
   }
 
-  function updateEventLayout(block, startMinutes, endMinutes, dayStart) {
-    const height = setBlockBounds(block, startMinutes, endMinutes, dayStart);
-    block.classList.toggle("is-compact", height < 64);
-    block.classList.toggle("is-tight", height < 32);
+  function setBlockHorizontalBounds(block, dateIso, overlapIndex = 0, overlapCount = 1) {
+    const days = getWeekDays();
+    const dayIndex = getWeekDayIndex(dateIso);
+    if (dayIndex < 0 || !days.length) {
+      return;
+    }
+    const dayWidthPercent = 100 / days.length;
+    const segmentWidth = dayWidthPercent / overlapCount;
+    const leftPercent = (dayIndex * dayWidthPercent) + (overlapIndex * segmentWidth);
+    block.style.left = `calc(${leftPercent}% + 4px)`;
+    block.style.width = `calc(${segmentWidth}% - 8px)`;
+    block.dataset.eventDate = dateIso;
+  }
+
+  function updateEventLayout(block, item, dayStart, overlapIndex = 0, overlapCount = 1) {
+    const height = setBlockBounds(block, item.startMinutes, item.endMinutes, dayStart);
+    setBlockHorizontalBounds(block, item.date, overlapIndex, overlapCount);
+    block.classList.toggle("is-compact", height < 66);
+    block.classList.toggle("is-tight", height < 40);
+    block.classList.toggle("is-micro", height < 24);
     return height;
   }
 
   function getPointerDeltaMinutes(pointerStartY, clientY) {
-    return snapMinutes((clientY - pointerStartY) / PIXELS_PER_MINUTE);
+    return snapMinutes((clientY - pointerStartY) / getPixelsPerMinute());
   }
 
   function formatLessonLabel(index) {
@@ -230,6 +295,7 @@
     const axisMinutes = new Set([getPlannerConfig().dayStart, getPlannerConfig().dayEnd]);
     (state.planner.time_slots || []).forEach((slot) => {
       axisMinutes.add(toMinutes(slot.start));
+      axisMinutes.add(toMinutes(slot.end));
     });
     return Array.from(axisMinutes).sort((left, right) => left - right);
   }
@@ -248,7 +314,19 @@
     suppressRecentClicks();
   }
 
-  function setActivePage(index) {
+  function getPageIndexFromHash() {
+    const hash = String(window.location.hash || "").toLowerCase();
+    return hash === "#planner" || hash === "#page2" || hash === "#week" ? 1 : 0;
+  }
+
+  function syncPageHash(index) {
+    const nextHash = index === 1 ? "#planner" : "#home";
+    if (window.location.hash !== nextHash) {
+      window.history.replaceState(null, "", `${window.location.pathname}${window.location.search}${nextHash}`);
+    }
+  }
+
+  function setActivePage(index, options = {}) {
     state.activePage = clamp(index, 0, 1);
     pageTrack.style.transform = `translateX(-${state.activePage * 100}%)`;
     pageSlides.forEach((slide, slideIndex) => {
@@ -257,11 +335,81 @@
     document.querySelectorAll(".story-tab").forEach((tab) => {
       tab.classList.toggle("is-active", Number(tab.dataset.goPage) === state.activePage);
     });
+    if (!options.skipHash) {
+      syncPageHash(state.activePage);
+    }
     if (state.activePage === 1) {
       loadPlanner(state.selectedDate, true);
     }
   }
 
+  function formatTimelineSlotLabel(index) {
+    return `第${String(index + 1).padStart(2, "0")}节`;
+  }
+
+  function decorateScheduleItems(items) {
+    const grouped = new Map();
+
+    (items || []).forEach((item) => {
+      const prepared = {
+        ...item,
+        date: item.date || state.selectedDate,
+        startMinutes: toMinutes(item.start_time),
+        endMinutes: toMinutes(item.end_time),
+      };
+      if (!grouped.has(prepared.date)) {
+        grouped.set(prepared.date, []);
+      }
+      grouped.get(prepared.date).push(prepared);
+    });
+
+    const result = [];
+    getWeekDays().forEach((day) => {
+      const prepared = (grouped.get(day.iso) || [])
+        .sort((left, right) => (
+          left.startMinutes - right.startMinutes
+          || left.endMinutes - right.endMinutes
+          || left.kind.localeCompare(right.kind)
+        ));
+
+      let active = [];
+      let currentGroup = [];
+      let currentGroupWidth = 0;
+
+      function finalizeGroup() {
+        currentGroup.forEach((item) => {
+          item.columnCount = currentGroupWidth || 1;
+        });
+        currentGroup = [];
+        currentGroupWidth = 0;
+      }
+
+      prepared.forEach((item) => {
+        active = active.filter((activeItem) => activeItem.endMinutes > item.startMinutes);
+        if (!active.length && currentGroup.length) {
+          finalizeGroup();
+        }
+        const usedColumns = new Set(active.map((activeItem) => activeItem.column));
+        let column = 0;
+        while (usedColumns.has(column)) {
+          column += 1;
+        }
+        item.column = column;
+        active.push(item);
+        currentGroup.push(item);
+        currentGroupWidth = Math.max(currentGroupWidth, active.length);
+      });
+
+      if (currentGroup.length) {
+        finalizeGroup();
+      }
+
+      result.push(...prepared);
+    });
+
+    return result;
+  }
+
   function decorateItems(items) {
     const prepared = (items || [])
       .map((item) => ({
@@ -321,7 +469,7 @@
     if (!line) {
       return;
     }
-    const { dayStart, dayEnd, canvasLeft } = getPlannerConfig();
+    const { dayStart, dayEnd } = getPlannerConfig();
     const parts = new Intl.DateTimeFormat("en-CA", {
       timeZone: "Asia/Shanghai",
       year: "numeric",
@@ -341,27 +489,31 @@
 
     const today = `${map.year}-${map.month}-${map.day}`;
     const currentMinutes = (Number(map.hour) * 60) + Number(map.minute);
+    const dayIndex = getWeekDayIndex(today);
 
-    if (today !== state.selectedDate || currentMinutes < dayStart || currentMinutes > dayEnd) {
+    if (dayIndex < 0 || currentMinutes < dayStart || currentMinutes > dayEnd) {
       line.style.display = "none";
       return;
     }
 
+    const dayWidthPercent = 100 / getWeekDays().length;
     line.style.display = "block";
-    line.style.left = `${canvasLeft}px`;
-    line.style.right = "14px";
+    line.style.left = `calc(${dayIndex * dayWidthPercent}% + 4px)`;
+    line.style.width = `calc(${dayWidthPercent}% - 8px)`;
     line.style.top = `${timelinePixels(currentMinutes - dayStart)}px`;
   }
 
   function renderTaskPool() {
-    const tasks = (state.planner.tasks || []).filter((task) => !task.completed);
+    const tasks = (state.planner.tasks || [])
+      .filter((task) => !task.completed)
+      .sort((left, right) => Number(!!left.schedule) - Number(!!right.schedule));
     plannerTaskCount.textContent = `${tasks.length} 项`;
 
     if (!tasks.length) {
       plannerTaskPool.innerHTML = `
         <div class="planner-empty">
           <p>目前没有可安排的任务</p>
-          <span>先回到第一页添加待办，再把它拖到左侧时间表上。</span>
+          <span>先回到第一页添加待办，再把它拖到本周课表里。</span>
         </div>
       `;
       return;
@@ -376,9 +528,9 @@
         <div class="planner-task-tags">
           <span>截止 ${formatLocalDateTime(task.due_at)}</span>
           <span>进度 ${Math.round(task.progress_percent || 0)}%</span>
-          <span>${task.schedule ? `${task.schedule.date} · ${task.schedule.start_time}-${task.schedule.end_time}` : "未安排"}</span>
+          <span>${task.schedule ? `${task.schedule.date} · ${task.schedule.start_time}-${task.schedule.end_time}` : "尚未排入周表"}</span>
         </div>
-        ${task.schedule && state.authenticated ? `<button class="planner-task-clear" type="button" data-clear-schedule="${task.id}">移出时间表</button>` : ""}
+        ${task.schedule && state.authenticated ? `<button class="planner-task-clear" type="button" data-clear-schedule="${task.id}">移出排程</button>` : ""}
       </article>
     `).join("");
   }
@@ -626,6 +778,323 @@
     updateNowLine();
   }
 
+  function renderWeekTimeline() {
+    const { dayStart, dayEnd, canvasLeft } = getPlannerConfig();
+    const { frameHeight, bodyHeight } = computePlannerScale();
+    const days = getWeekDays();
+
+    plannerTimeline.innerHTML = "";
+    plannerTimeline.style.height = `${frameHeight}px`;
+    plannerTimeline.style.setProperty("--timeline-axis-width", `${AXIS_WIDTH}px`);
+    plannerTimeline.style.setProperty("--timeline-slot-width", `${SLOT_WIDTH}px`);
+    plannerTimeline.style.setProperty("--timeline-canvas-left", `${canvasLeft}px`);
+    plannerTimeline.style.setProperty("--timeline-week-header-height", `${WEEK_HEADER_HEIGHT}px`);
+
+    if (!days.length) {
+      return;
+    }
+
+    const headerLayer = document.createElement("div");
+    headerLayer.className = "timeline-week-header";
+    headerLayer.style.left = `${canvasLeft}px`;
+    headerLayer.style.right = "12px";
+    headerLayer.style.height = `${WEEK_HEADER_HEIGHT - 8}px`;
+
+    days.forEach((day) => {
+      const head = document.createElement("button");
+      head.type = "button";
+      head.className = `timeline-day-head ${day.is_today ? "is-today" : ""} ${day.iso === state.selectedDate ? "is-selected" : ""}`;
+      head.innerHTML = `
+        <strong>${escapeHtml(day.short_label)}</strong>
+        <span>${escapeHtml(day.month_day)}</span>
+      `;
+      head.addEventListener("click", () => {
+        if (day.iso !== state.selectedDate) {
+          loadPlanner(day.iso, true);
+        }
+      });
+      headerLayer.appendChild(head);
+    });
+
+    const axisLayer = document.createElement("div");
+    axisLayer.className = "timeline-axis-layer";
+    axisLayer.style.top = `${WEEK_HEADER_HEIGHT}px`;
+    axisLayer.style.height = `${bodyHeight}px`;
+
+    const slotLayer = document.createElement("div");
+    slotLayer.className = "timeline-slot-layer";
+    slotLayer.style.top = `${WEEK_HEADER_HEIGHT}px`;
+    slotLayer.style.height = `${bodyHeight}px`;
+
+    const canvasLayer = document.createElement("div");
+    canvasLayer.className = "timeline-canvas-layer";
+    canvasLayer.style.top = `${WEEK_HEADER_HEIGHT}px`;
+    canvasLayer.style.height = `${bodyHeight}px`;
+
+    const axisRail = document.createElement("div");
+    axisRail.className = "timeline-axis-rail";
+    axisLayer.appendChild(axisRail);
+
+    const lineMarkers = new Set([dayStart, dayEnd]);
+    const timeSlots = state.planner.time_slots || [];
+    const dayWidthPercent = 100 / days.length;
+
+    days.forEach((day, dayIndex) => {
+      const dayColumn = document.createElement("div");
+      dayColumn.className = `timeline-day-column ${day.is_today ? "is-today" : ""} ${day.iso === state.selectedDate ? "is-selected" : ""}`;
+      dayColumn.style.left = `${dayIndex * dayWidthPercent}%`;
+      dayColumn.style.width = `${dayWidthPercent}%`;
+      canvasLayer.appendChild(dayColumn);
+
+      if (dayIndex > 0) {
+        const divider = document.createElement("div");
+        divider.className = "timeline-day-divider";
+        divider.style.left = `${dayIndex * dayWidthPercent}%`;
+        canvasLayer.appendChild(divider);
+      }
+    });
+
+    timeSlots.forEach((slot, slotIndex) => {
+      const slotStart = toMinutes(slot.start);
+      const slotEnd = toMinutes(slot.end);
+      lineMarkers.add(slotStart);
+      lineMarkers.add(slotEnd);
+
+      const band = document.createElement("div");
+      band.className = "timeline-slot-band";
+      band.style.top = `${timelinePixels(slotStart - dayStart)}px`;
+      band.style.height = `${timelinePixels(slotEnd - slotStart)}px`;
+      band.innerHTML = `
+        <strong>${formatTimelineSlotLabel(slotIndex)}</strong>
+        <span>${escapeHtml(slot.start)} - ${escapeHtml(slot.end)}</span>
+      `;
+      slotLayer.appendChild(band);
+    });
+
+    Array.from(lineMarkers)
+      .sort((left, right) => left - right)
+      .forEach((minute) => {
+        const line = document.createElement("div");
+        line.className = "timeline-line is-slot";
+        line.style.top = `${timelinePixels(minute - dayStart)}px`;
+        canvasLayer.appendChild(line);
+      });
+
+    getTimelineAxisMinutes().forEach((minute, axisIndex, axisMinutes) => {
+      const tick = document.createElement("div");
+      tick.className = "timeline-axis-tick";
+      if (axisIndex === 0) {
+        tick.classList.add("is-leading");
+      } else if (axisIndex === axisMinutes.length - 1) {
+        tick.classList.add("is-terminal");
+      }
+      tick.style.top = `${timelinePixels(minute - dayStart)}px`;
+      tick.textContent = minutesToTime(minute);
+      axisLayer.appendChild(tick);
+    });
+
+    const majorMap = new Map();
+    (state.planner.major_blocks || []).forEach((block) => {
+      if (!majorMap.has(block.label)) {
+        majorMap.set(block.label, block);
+      }
+    });
+
+    Array.from(majorMap.values()).forEach((block, blockIndex) => {
+      const startMinutes = toMinutes(block.start);
+      const endMinutes = toMinutes(block.end);
+      const overlay = document.createElement("div");
+      overlay.className = "timeline-major-block";
+      overlay.style.top = `${timelinePixels(startMinutes - dayStart)}px`;
+      overlay.style.height = `${timelinePixels(endMinutes - startMinutes)}px`;
+      overlay.innerHTML = `<span>${escapeHtml(block.label || `第${blockIndex + 1}大节`)}</span>`;
+      canvasLayer.appendChild(overlay);
+    });
+
+    decorateScheduleItems(state.planner.scheduled_items).forEach((item) => {
+      const block = document.createElement("article");
+      block.className = `planner-event ${item.kind === "course" ? "course-event" : "task-event"} ${item.completed ? "is-complete" : ""}`;
+      updateEventLayout(block, item, dayStart, item.column || 0, item.columnCount || 1);
+
+      if (item.kind === "course") {
+        if (item.color) {
+          block.style.setProperty("--event-accent", item.color);
+        }
+        block.innerHTML = `
+          <div class="planner-event-top">
+            <strong>${escapeHtml(item.title)}</strong>
+            <span class="planner-lock-badge">固定课程</span>
+          </div>
+          <div class="planner-event-meta">
+            <span class="planner-event-time">${escapeHtml(item.start_time)} - ${escapeHtml(item.end_time)}</span>
+            <span>${escapeHtml(item.location || "")}</span>
+          </div>
+        `;
+      } else {
+        block.dataset.taskId = item.task_id;
+        block.style.setProperty("--event-accent", item.completed ? "#66d0ff" : mixColor(item.progress_percent || 0));
+        block.innerHTML = `
+          <div class="planner-event-top">
+            <strong>${escapeHtml(item.title)}</strong>
+            <span class="planner-event-time">${escapeHtml(item.start_time)} - ${escapeHtml(item.end_time)}</span>
+          </div>
+          <div class="planner-event-meta">
+            <span>${escapeHtml(item.category_name)}</span>
+            <span>进度 ${Math.round(item.progress_percent || 0)}%</span>
+          </div>
+          ${state.authenticated ? `<button class="planner-event-clear" type="button" data-clear-schedule="${item.task_id}">移出</button>` : ""}
+          ${state.authenticated ? `<div class="planner-event-resize planner-event-resize-top" data-resize-task-start="${item.task_id}"></div>` : ""}
+          ${state.authenticated ? `<div class="planner-event-resize planner-event-resize-bottom" data-resize-task-end="${item.task_id}"></div>` : ""}
+        `;
+
+        if (state.authenticated) {
+          block.addEventListener("pointerdown", (event) => {
+            if (event.button !== 0 || event.target.closest("[data-clear-schedule]")) {
+              return;
+            }
+
+            event.preventDefault();
+            event.stopPropagation();
+
+            const point = clientPointToSchedule(event.clientX, event.clientY);
+            const mode = event.target.closest("[data-resize-task-start]")
+              ? "resize-start"
+              : event.target.closest("[data-resize-task-end]")
+                ? "resize-end"
+                : "move";
+
+            beginPlannerInteraction();
+            state.interaction = {
+              mode,
+              block,
+              taskId: item.task_id,
+              pointerId: event.pointerId,
+              pointerStartX: event.clientX,
+              pointerStartY: event.clientY,
+              initialDate: item.date,
+              currentDate: item.date,
+              initialStartMinutes: item.startMinutes,
+              initialEndMinutes: item.endMinutes,
+              startMinutes: item.startMinutes,
+              endMinutes: item.endMinutes,
+              duration: item.endMinutes - item.startMinutes,
+              pointerOffsetMinutes: point ? point.minutes - item.startMinutes : 0,
+            };
+
+            if (typeof block.setPointerCapture === "function") {
+              try {
+                block.setPointerCapture(event.pointerId);
+              } catch (error) {
+                // Ignore browsers that reject capture for synthetic pointer sequences.
+              }
+            }
+
+            block.classList.add("is-dragging");
+          });
+        }
+      }
+
+      canvasLayer.appendChild(block);
+    });
+
+    const preview = document.createElement("div");
+    preview.className = "timeline-drop-preview";
+    preview.id = "timelineDropPreview";
+    preview.style.display = "none";
+    canvasLayer.appendChild(preview);
+
+    const nowLine = document.createElement("div");
+    nowLine.className = "timeline-now-line";
+    nowLine.id = "timelineNowLine";
+    canvasLayer.appendChild(nowLine);
+
+    canvasLayer.addEventListener("dragover", (event) => {
+      if (!state.dragTaskId) {
+        return;
+      }
+      event.preventDefault();
+      const task = getTaskById(state.dragTaskId);
+      const point = clientPointToSchedule(event.clientX, event.clientY);
+      if (!task || !point) {
+        preview.style.display = "none";
+        return;
+      }
+      const duration = getTaskDuration(task);
+      const startMinutes = clamp(point.minutes, dayStart, dayEnd - duration);
+      const dayMeta = getWeekDayMeta(point.date);
+      preview.style.display = "grid";
+      setBlockBounds(preview, startMinutes, startMinutes + duration, dayStart);
+      setBlockHorizontalBounds(preview, point.date, 0, 1);
+      preview.innerHTML = `
+        <strong>${escapeHtml(dayMeta ? dayMeta.short_label : "")}</strong>
+        <span>${minutesToTime(startMinutes)} - ${minutesToTime(startMinutes + duration)}</span>
+      `;
+    });
+
+    canvasLayer.addEventListener("dragleave", (event) => {
+      if (!canvasLayer.contains(event.relatedTarget)) {
+        preview.style.display = "none";
+      }
+    });
+
+    canvasLayer.addEventListener("drop", async (event) => {
+      if (!state.dragTaskId) {
+        return;
+      }
+      event.preventDefault();
+      preview.style.display = "none";
+      if (!requireAuth()) {
+        state.dragTaskId = null;
+        return;
+      }
+
+      const task = getTaskById(state.dragTaskId);
+      const point = clientPointToSchedule(event.clientX, event.clientY);
+      if (!task || !point) {
+        state.dragTaskId = null;
+        return;
+      }
+
+      try {
+        const duration = getTaskDuration(task);
+        const startMinutes = clamp(point.minutes, dayStart, dayEnd - duration);
+        await requestJSON(`/api/tasks/${task.id}/schedule`, {
+          method: "PATCH",
+          body: JSON.stringify({
+            date: point.date,
+            start_time: minutesToTime(startMinutes),
+            end_time: minutesToTime(startMinutes + duration),
+          }),
+        });
+        await loadPlanner(point.date, true);
+        showToast("任务已拖入本周课表");
+      } catch (error) {
+        showToast(error.message, "error");
+      } finally {
+        state.dragTaskId = null;
+      }
+    });
+
+    plannerTimeline.appendChild(headerLayer);
+    plannerTimeline.appendChild(axisLayer);
+    plannerTimeline.appendChild(slotLayer);
+    plannerTimeline.appendChild(canvasLayer);
+
+    updateNowLine();
+  }
+
+  function renderWeekPlanner() {
+    state.selectedDate = state.planner.selected_date || state.selectedDate;
+    plannerDateInput.value = state.selectedDate;
+    plannerDateLabel.textContent = formatWeekRange(state.planner.week_start, state.planner.week_end);
+    plannerWeekday.textContent = state.planner.week_range_label || "";
+    plannerAcademicWeek.textContent = state.planner.academic_label || "";
+    plannerWindow.textContent = `${state.planner.settings.day_start} - ${state.planner.settings.day_end}`;
+    plannerHeadlineNote.textContent = "课程会按学期周次自动固定显示，任务可拖入本周任意一天，并通过上下边缘拉伸；每项任务最短 15 分钟。";
+    renderTaskPool();
+    renderWeekTimeline();
+  }
+
   function renderPlanner() {
     state.selectedDate = state.planner.selected_date || state.selectedDate;
     plannerDateInput.value = state.selectedDate;
@@ -645,7 +1114,7 @@
       });
       state.planner = payload.planner;
       state.selectedDate = payload.planner.selected_date;
-      renderPlanner();
+      renderWeekPlanner();
     } catch (error) {
       if (!silent) {
         showToast(error.message, "error");
@@ -721,7 +1190,9 @@
     const deltaMinutes = getPointerDeltaMinutes(state.interaction.pointerStartY, event.clientY);
 
     if (state.interaction.mode === "move") {
+      const point = clientPointToSchedule(event.clientX, event.clientY);
       const duration = state.interaction.initialEndMinutes - state.interaction.initialStartMinutes;
+      state.interaction.currentDate = point ? point.date : state.interaction.initialDate;
       const startMinutes = clamp(
         state.interaction.initialStartMinutes + deltaMinutes,
         dayStart,
@@ -736,6 +1207,7 @@
         dayStart,
         state.interaction.initialEndMinutes - MIN_DURATION
       );
+      state.interaction.currentDate = state.interaction.initialDate;
       state.interaction.startMinutes = startMinutes;
       state.interaction.endMinutes = state.interaction.initialEndMinutes;
       state.interaction.duration = state.interaction.endMinutes - state.interaction.startMinutes;
@@ -745,17 +1217,17 @@
         state.interaction.initialStartMinutes + MIN_DURATION,
         dayEnd
       );
+      state.interaction.currentDate = state.interaction.initialDate;
       state.interaction.startMinutes = state.interaction.initialStartMinutes;
       state.interaction.endMinutes = endMinutes;
       state.interaction.duration = state.interaction.endMinutes - state.interaction.startMinutes;
     }
 
-    updateEventLayout(
-      state.interaction.block,
-      state.interaction.startMinutes,
-      state.interaction.endMinutes,
-      dayStart
-    );
+    updateEventLayout(state.interaction.block, {
+      date: state.interaction.currentDate,
+      startMinutes: state.interaction.startMinutes,
+      endMinutes: state.interaction.endMinutes,
+    }, dayStart);
     updateEventTimeLabel(state.interaction.block, state.interaction.startMinutes, state.interaction.endMinutes);
   });
 
@@ -789,6 +1261,20 @@
       .catch((error) => showToast(error.message, "error"));
   }
 
+  function persistWeekInteraction(current) {
+    requestJSON(`/api/tasks/${current.taskId}/schedule`, {
+      method: "PATCH",
+      body: JSON.stringify({
+        date: current.currentDate || current.initialDate || state.selectedDate,
+        start_time: minutesToTime(current.startMinutes),
+        end_time: minutesToTime(current.endMinutes),
+      }),
+    })
+      .then(() => loadPlanner(current.currentDate || state.selectedDate, true))
+      .then(() => showToast("规划时间已更新"))
+      .catch((error) => showToast(error.message, "error"));
+  }
+
   function finishInteraction(event) {
     if (!state.interaction) {
       return;
@@ -805,13 +1291,15 @@
     finishPlannerInteraction();
 
     if (
+      (current.currentDate || current.initialDate) === current.initialDate
+      &&
       current.startMinutes === current.initialStartMinutes
       && current.endMinutes === current.initialEndMinutes
     ) {
       return;
     }
 
-    persistInteraction(current);
+    persistWeekInteraction(current);
   }
 
   document.addEventListener("pointerup", finishInteraction);
@@ -825,11 +1313,11 @@
   });
 
   plannerPrevDay.addEventListener("click", () => {
-    loadPlanner(shiftDate(state.selectedDate, -1));
+    loadPlanner(shiftDate(state.selectedDate, -7));
   });
 
   plannerNextDay.addEventListener("click", () => {
-    loadPlanner(shiftDate(state.selectedDate, 1));
+    loadPlanner(shiftDate(state.selectedDate, 7));
   });
 
   window.setInterval(() => {
@@ -839,7 +1327,13 @@
   }, 45000);
 
   window.setInterval(updateNowLine, 60000);
-  window.addEventListener("resize", updateNowLine);
+  window.addEventListener("resize", () => {
+    if (state.activePage === 1) {
+      renderWeekPlanner();
+    } else {
+      updateNowLine();
+    }
+  });
 
   document.addEventListener("visibilitychange", () => {
     if (document.visibilityState === "visible" && state.activePage === 1) {
@@ -847,6 +1341,10 @@
     }
   });
 
-  renderPlanner();
-  setActivePage(0);
+  window.addEventListener("hashchange", () => {
+    setActivePage(getPageIndexFromHash(), { skipHash: true });
+  });
+
+  renderWeekPlanner();
+  setActivePage(getPageIndexFromHash(), { skipHash: true });
 })();

static/v020.css

@@ -1,19 +1,32 @@
+body {
+  overflow: hidden;
+}
+
+.layout.story-layout {
+  width: min(1560px, calc(100% - 18px));
+  min-height: 100vh;
+  padding: 14px 0;
+}
+
 .story-layout {
-  padding-top: 20px;
+  padding-top: 0;
+  overflow: hidden;
 }
 
 .story-shell {
   display: grid;
-  gap: 18px;
+  gap: 12px;
   min-width: 0;
+  min-height: calc(100vh - 28px);
+  grid-template-rows: auto minmax(0, 1fr);
 }
 
 .story-toolbar {
-  border-radius: 28px;
-  padding: 16px 20px;
+  border-radius: 24px;
+  padding: 12px 16px;
   display: grid;
   grid-template-columns: auto 1fr auto;
-  gap: 18px;
+  gap: 14px;
   align-items: center;
 }
 
@@ -44,12 +57,15 @@
   position: relative;
   width: 100%;
   overflow: hidden;
+  min-height: 0;
+  height: 100%;
 }
 
 .page-track {
   display: flex;
   width: 100%;
-  align-items: flex-start;
+  height: 100%;
+  align-items: stretch;
   transition: transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
   will-change: transform;
 }
@@ -61,6 +77,8 @@
   min-width: 100%;
   overflow: hidden;
   pointer-events: none;
+  min-height: 0;
+  height: 100%;
 }
 
 .page-slide.is-active {
@@ -73,32 +91,145 @@ body.planner-interacting * {
   -webkit-user-select: none !important;
 }
 
+body.planner-interacting .page-home {
+  pointer-events: none;
+}
+
+body.planner-interacting .page-planner {
+  pointer-events: auto;
+}
+
 .page-home {
   display: grid;
-  gap: 18px;
-  grid-template-rows: minmax(250px, 28vh) 1fr;
-  padding-right: 18px;
+  gap: 12px;
+  grid-template-rows: minmax(216px, 27vh) minmax(0, 1fr);
+  padding-right: 10px;
+  min-height: 0;
 }
 
 .page-planner {
-  padding-left: 18px;
+  padding-left: 10px;
+  min-height: 0;
 }
 
 .inline-link {
   border: 0;
 }
 
+.page-home .hero-card {
+  min-height: 0;
+  padding: 22px 24px;
+}
+
+.clock-wrap {
+  gap: 6px;
+  padding: 6px 0 4px;
+}
+
+.clock-display {
+  font-size: clamp(2.7rem, 7vw, 4.9rem);
+}
+
+.clock-meta {
+  gap: 8px 14px;
+  font-size: 0.94rem;
+}
+
 .hero-copy {
-  margin: 8px 0 0;
+  margin: 6px 0 0;
   color: var(--muted);
 }
 
+.board-section {
+  display: grid;
+  gap: 12px;
+  grid-template-rows: auto minmax(0, 1fr);
+  min-height: 0;
+  overflow: hidden;
+}
+
+.board-section .section-header {
+  margin-bottom: 0;
+}
+
+.board-section .section-header h2 {
+  font-size: clamp(1.1rem, 1.7vw, 1.5rem);
+}
+
+.board-grid {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  align-items: stretch;
+  align-content: start;
+  min-height: 0;
+  height: auto;
+}
+
+.todo-column {
+  padding: 16px;
+  min-height: 0;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+}
+
+.column-header {
+  gap: 12px;
+}
+
+.column-title {
+  font-size: 1.2rem;
+}
+
+.task-list {
+  gap: 10px;
+  margin-top: 12px;
+  min-height: 0;
+  overflow: auto;
+  padding-right: 4px;
+}
+
+.task-card {
+  padding: 14px;
+  border-radius: 18px;
+}
+
+.task-copy h4 {
+  margin: 0 0 8px;
+  font-size: 0.98rem;
+}
+
+.meta-line {
+  gap: 6px;
+}
+
+.meta-badge {
+  padding: 6px 9px;
+  font-size: 0.76rem;
+}
+
+.progress-shell {
+  height: 8px;
+}
+
 .planner-shell {
-  border-radius: 30px;
-  padding: 24px;
-  min-height: calc(100vh - 170px);
+  border-radius: 26px;
+  padding: 16px;
+  min-height: 0;
+  height: 100%;
   display: grid;
-  gap: 16px;
+  grid-template-rows: auto auto minmax(0, 1fr);
+  gap: 10px;
+}
+
+.planner-head h2 {
+  margin: 4px 0 0;
+  font-size: clamp(1.34rem, 1.85vw, 1.72rem);
+}
+
+.planner-head .section-note {
+  margin: 6px 0 0;
+  font-size: 0.92rem;
 }
 
 .planner-head,
@@ -116,17 +247,17 @@ body.planner-interacting * {
 .planner-head,
 .planner-sidebar-head {
   justify-content: space-between;
-  gap: 16px;
+  gap: 12px;
 }
 
 .planner-controls {
-  gap: 10px;
+  gap: 8px;
 }
 
 .planner-date-picker {
   display: grid;
-  gap: 8px;
-  min-width: 180px;
+  gap: 6px;
+  min-width: 172px;
 }
 
 .planner-date-picker span {
@@ -136,9 +267,9 @@ body.planner-interacting * {
 
 .planner-date-picker input,
 .modal-form select {
-  min-height: 46px;
-  padding: 0 14px;
-  border-radius: 16px;
+  min-height: 42px;
+  padding: 0 12px;
+  border-radius: 14px;
   border: 1px solid rgba(255, 255, 255, 0.1);
   background: rgba(255, 255, 255, 0.04);
   color: var(--text);
@@ -147,7 +278,7 @@ body.planner-interacting * {
 
 .planner-meta {
   flex-wrap: wrap;
-  gap: 10px;
+  gap: 8px;
 }
 
 .planner-meta span,
@@ -155,17 +286,19 @@ body.planner-interacting * {
 .planner-task-category {
   display: inline-flex;
   align-items: center;
-  padding: 8px 12px;
+  padding: 6px 10px;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.06);
   color: var(--muted-strong);
+  font-size: 0.76rem;
 }
 
 .planner-layout {
   display: grid;
-  grid-template-columns: minmax(0, 7fr) minmax(290px, 3fr);
-  gap: 18px;
+  grid-template-columns: minmax(0, 7.7fr) minmax(250px, 2.3fr);
+  gap: 12px;
   min-height: 0;
+  overflow: hidden;
 }
 
 .timeline-surface,
@@ -176,19 +309,24 @@ body.planner-interacting * {
 }
 
 .timeline-surface {
-  padding: 12px;
+  padding: 10px;
+  min-height: 0;
+  height: 100%;
 }
 
 .timeline-scroll {
-  overflow: auto;
-  max-height: calc(100vh - 280px);
-  border-radius: 22px;
+  overflow: hidden;
+  height: 100%;
+  max-height: none;
+  min-height: 0;
+  border-radius: 18px;
   background: rgba(3, 11, 20, 0.46);
 }
 
 .timeline-grid {
   position: relative;
-  min-height: 1000px;
+  min-height: 0;
+  height: 100%;
 }
 
 .timeline-axis-layer,
@@ -201,6 +339,14 @@ body.planner-interacting * {
   bottom: 0;
 }
 
+.timeline-axis-layer,
+.timeline-slot-layer,
+.timeline-canvas-layer,
+.timeline-drop-preview,
+.timeline-now-line {
+  bottom: auto;
+}
+
 .timeline-axis-layer {
   left: 0;
   width: var(--timeline-axis-width);
@@ -218,6 +364,74 @@ body.planner-interacting * {
   right: 12px;
 }
 
+.timeline-week-header {
+  position: absolute;
+  top: 0;
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  gap: 6px;
+  z-index: 7;
+}
+
+.timeline-day-head {
+  min-height: 46px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 16px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
+  color: var(--muted-strong);
+  display: grid;
+  place-items: center;
+  gap: 2px;
+  padding: 5px 4px;
+  text-align: center;
+  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
+}
+
+.timeline-day-head strong {
+  font-size: 0.82rem;
+  line-height: 1;
+}
+
+.timeline-day-head span {
+  font-size: 0.68rem;
+  color: var(--muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.timeline-day-head.is-selected {
+  border-color: rgba(123, 231, 234, 0.44);
+  background: linear-gradient(180deg, rgba(123, 231, 234, 0.18) 0%, rgba(255, 255, 255, 0.05) 100%);
+}
+
+.timeline-day-head.is-today {
+  box-shadow: inset 0 0 0 1px rgba(255, 200, 87, 0.22);
+}
+
+.timeline-day-column,
+.timeline-day-divider {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  pointer-events: none;
+}
+
+.timeline-day-column {
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.018) 0%, rgba(255, 255, 255, 0.008) 100%);
+}
+
+.timeline-day-column.is-selected {
+  background: linear-gradient(180deg, rgba(92, 225, 230, 0.06) 0%, rgba(92, 225, 230, 0.015) 100%);
+}
+
+.timeline-day-column.is-today {
+  box-shadow: inset 0 0 0 1px rgba(255, 200, 87, 0.12);
+}
+
+.timeline-day-divider {
+  width: 1px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
+}
+
 .timeline-axis-rail {
   position: absolute;
   top: 0;
@@ -234,11 +448,11 @@ body.planner-interacting * {
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  gap: 12px;
+  gap: 10px;
   transform: translateY(-50%);
-  padding-right: 26px;
+  padding-right: 20px;
   color: rgba(238, 244, 251, 0.76);
-  font-size: 0.8rem;
+  font-size: 0.75rem;
   font-variant-numeric: tabular-nums;
   letter-spacing: 0.02em;
   line-height: 1;
@@ -247,8 +461,8 @@ body.planner-interacting * {
 
 .timeline-axis-tick::after {
   content: "";
-  width: 8px;
-  height: 8px;
+  width: 7px;
+  height: 7px;
   border-radius: 999px;
   background: rgba(123, 231, 234, 0.78);
   box-shadow: 0 0 0 4px rgba(123, 231, 234, 0.12);
@@ -265,29 +479,29 @@ body.planner-interacting * {
 
 .timeline-slot-band {
   position: absolute;
-  left: 8px;
-  right: 10px;
+  left: 6px;
+  right: 8px;
   box-sizing: border-box;
   overflow: hidden;
-  padding: 8px 10px;
-  border-radius: 16px;
+  padding: 5px 8px;
+  border-radius: 14px;
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025));
   border: 1px solid rgba(255, 255, 255, 0.08);
   display: flex;
   flex-direction: column;
   justify-content: center;
-  gap: 4px;
+  gap: 3px;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
 }
 
 .timeline-slot-band strong {
-  font-size: 0.86rem;
+  font-size: 0.74rem;
   line-height: 1.1;
 }
 
 .timeline-slot-band span {
   color: var(--muted);
-  font-size: 0.74rem;
+  font-size: 0.64rem;
   line-height: 1.1;
   font-variant-numeric: tabular-nums;
 }
@@ -308,17 +522,17 @@ body.planner-interacting * {
   left: 0;
   right: 0;
   box-sizing: border-box;
-  border-radius: 22px;
+  border-radius: 16px;
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.015) 100%);
   pointer-events: none;
 }
 
 .timeline-major-block span {
   position: absolute;
-  top: 14px;
-  right: 18px;
+  top: 10px;
+  right: 12px;
   font-family: "Sora", "Noto Sans SC", sans-serif;
-  font-size: clamp(1.4rem, 1.9vw, 2.1rem);
+  font-size: clamp(1rem, 1.35vw, 1.45rem);
   color: rgba(238, 244, 251, 0.16);
 }
 
@@ -327,8 +541,8 @@ body.planner-interacting * {
   position: absolute;
   box-sizing: border-box;
   overflow: hidden;
-  border-radius: 20px;
-  padding: 14px;
+  border-radius: 16px;
+  padding: 10px 12px 12px;
   border: 1px solid rgba(255, 255, 255, 0.08);
   background: linear-gradient(180deg, rgba(13, 28, 44, 0.96) 0%, rgba(8, 20, 32, 0.92) 100%);
   box-shadow: 0 16px 30px rgba(0, 0, 0, 0.2);
@@ -336,6 +550,7 @@ body.planner-interacting * {
 
 .planner-event {
   touch-action: none;
+  z-index: 5;
 }
 
 .planner-event::before,
@@ -356,14 +571,15 @@ body.planner-interacting * {
 }
 
 .planner-event-top strong {
-  max-width: 72%;
-  line-height: 1.2;
+  max-width: 100%;
+  line-height: 1.18;
+  font-size: 0.86rem;
 }
 
 .planner-event-meta {
-  margin-top: 10px;
+  margin-top: 8px;
   color: var(--muted);
-  font-size: 0.82rem;
+  font-size: 0.74rem;
 }
 
 .planner-lock-badge,
@@ -387,14 +603,14 @@ body.planner-interacting * {
 .planner-task-clear {
   background: rgba(255, 107, 92, 0.14);
   color: #ff9388;
-  margin-top: 10px;
+  margin-top: 8px;
 }
 
 .planner-event-resize {
   position: absolute;
-  left: 10px;
-  right: 10px;
-  height: 6px;
+  left: 8px;
+  right: 8px;
+  height: 8px;
   border-radius: 999px;
   background: linear-gradient(90deg, rgba(123, 231, 234, 0.9), rgba(97, 210, 159, 0.72));
   cursor: ns-resize;
@@ -402,11 +618,11 @@ body.planner-interacting * {
 }
 
 .planner-event-resize-top {
-  top: 0;
+  top: -1px;
 }
 
 .planner-event-resize-bottom {
-  bottom: 0;
+  bottom: -1px;
 }
 
 .planner-event.is-dragging,
@@ -414,9 +630,13 @@ body.planner-interacting * {
   opacity: 0.8;
 }
 
+.planner-event.is-dragging {
+  z-index: 8;
+}
+
 .planner-event.is-compact {
   border-radius: 16px;
-  padding: 8px 12px 10px;
+  padding: 7px 10px 8px;
 }
 
 .planner-event.is-compact::before {
@@ -447,7 +667,7 @@ body.planner-interacting * {
 }
 
 .planner-event.is-tight {
-  padding: 6px 10px;
+  padding: 6px 8px;
 }
 
 .planner-event.is-tight .planner-event-meta,
@@ -473,35 +693,41 @@ body.planner-interacting * {
 }
 
 .planner-sidebar {
-  padding: 18px;
+  padding: 14px;
   display: grid;
-  gap: 16px;
+  gap: 12px;
   align-content: start;
+  min-height: 0;
+  grid-template-rows: auto auto minmax(0, 1fr);
 }
 
 .planner-sidebar-note {
   display: grid;
-  gap: 8px;
+  gap: 6px;
   color: var(--muted);
+  font-size: 0.84rem;
 }
 
 .planner-task-pool {
   display: grid;
-  gap: 12px;
+  gap: 10px;
+  min-height: 0;
+  overflow: auto;
+  padding-right: 4px;
 }
 
 .planner-task-card {
-  padding: 16px;
-  border-radius: 22px;
+  padding: 12px;
+  border-radius: 18px;
   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: 12px;
+  gap: 10px;
 }
 
 .planner-task-card h4 {
   margin: 0;
-  font-size: 1rem;
+  font-size: 0.95rem;
 }
 
 .planner-task-top {
@@ -515,11 +741,11 @@ body.planner-interacting * {
 }
 
 .planner-task-tags span {
-  padding: 8px 10px;
+  padding: 6px 9px;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.05);
   color: var(--muted-strong);
-  font-size: 0.82rem;
+  font-size: 0.76rem;
 }
 
 .planner-empty,
@@ -533,9 +759,22 @@ body.planner-interacting * {
 
 .timeline-drop-preview {
   display: none;
+  gap: 4px;
+  align-content: center;
   color: var(--muted-strong);
   border-style: dashed;
   background: rgba(123, 231, 234, 0.1);
+  z-index: 4;
+}
+
+.timeline-drop-preview strong {
+  font-size: 0.78rem;
+  line-height: 1.1;
+}
+
+.timeline-drop-preview span {
+  color: var(--muted);
+  font-size: 0.72rem;
 }
 
 .timeline-now-line {
@@ -543,6 +782,8 @@ body.planner-interacting * {
   height: 2px;
   background: linear-gradient(90deg, rgba(255, 107, 92, 0.95), rgba(255, 200, 87, 0.72));
   box-shadow: 0 0 18px rgba(255, 107, 92, 0.38);
+  z-index: 6;
+  pointer-events: none;
 }
 
 .timeline-now-line::before {
@@ -578,6 +819,18 @@ body.planner-interacting * {
 }
 
 @media (max-width: 1180px) {
+  body {
+    overflow: auto;
+  }
+
+  .layout.story-layout {
+    min-height: auto;
+  }
+
+  .story-shell {
+    min-height: auto;
+  }
+
   .story-toolbar,
   .planner-head,
   .planner-layout {
@@ -590,6 +843,13 @@ body.planner-interacting * {
     justify-self: stretch;
     justify-content: center;
   }
+
+  .page-viewport,
+  .page-track,
+  .page-slide,
+  .planner-shell {
+    height: auto;
+  }
 }
 
 @media (max-width: 840px) {
@@ -604,7 +864,7 @@ body.planner-interacting * {
   }
 
   .timeline-scroll {
-    max-height: 62vh;
+    height: auto;
   }
 }
 

templates/index.html

@@ -14,7 +14,7 @@
 
         <nav class="story-nav" aria-label="页面导航">
           <button class="story-tab is-active" type="button" data-go-page="0">第一页 · 提醒板</button>
-          <button class="story-tab" type="button" data-go-page="1">第二页 · 时间表</button>
+          <button class="story-tab" type="button" data-go-page="1">第二页 · 周课表</button>
         </nav>
 
         <div class="action-group">
@@ -34,9 +34,9 @@
               <div class="hero-topbar">
                 <div>
                   <p class="eyebrow">北京时间</p>
-                  <p class="hero-copy">第一页保持轻量看板视图，第二页进入完整时间排程。</p>
+                  <p class="hero-copy">第一页保持轻量提醒视图，第二页进入整周课程与任务排布。</p>
                 </div>
-                <button class="ghost-link inline-link" type="button" data-go-page="1">切换到时间表</button>
+                <button class="ghost-link inline-link" type="button" data-go-page="1">切换到周课表</button>
               </div>
               <div class="clock-wrap">
                 <h1 class="clock-display" id="clockDisplay">00:00:00</h1>
@@ -52,11 +52,11 @@
               <div class="section-header">
                 <div>
                   <p class="section-kicker">今日待办板</p>
-                  <h2>每个分类一列，专注当前最重要的事情</h2>
+                  <h2>每个分类一列，压缩留白后在一屏内保持更高信息密度</h2>
                 </div>
                 <p class="section-note">
                   {% if authenticated %}
-                    已登录，可添加、勾选、重命名，并在第二页拖入时间表。
+                    已登录，可添加、勾选、重命名，并把任务拖进第二页的周课表。
                   {% else %}
                     当前为只读模式，登录后可进行编辑与拖拽排程。
                   {% endif %}
@@ -124,23 +124,23 @@
             <section class="planner-shell card-surface">
               <div class="planner-head">
                 <div>
-                  <p class="section-kicker">第二页 · 今日时间表</p>
-                  <h2>左侧安排今天，右侧拖入待办</h2>
-                  <p class="section-note" id="plannerHeadlineNote">固定课程会按照学期周次自动出现，待办可以拖入并自由调整时长。</p>
+                  <p class="section-kicker">第二页 · 周课表</p>
+                  <h2>按周查看课程与任务，把整周安排收进一屏</h2>
+                  <p class="section-note" id="plannerHeadlineNote">固定课程会按学期周次自动出现，待办可拖入本周任意一天，并支持上下边缘拉伸；每项任务最短 15 分钟。</p>
                 </div>
                 <div class="planner-controls">
-                  <button class="icon-button" id="plannerPrevDay" type="button" aria-label="前一天">←</button>
+                  <button class="icon-button planner-shift-button" id="plannerPrevDay" type="button" aria-label="上一周">←</button>
                   <label class="planner-date-picker">
-                    <span>选择日期</span>
+                    <span>选择本周任意日期</span>
                     <input id="plannerDateInput" type="date">
                   </label>
-                  <button class="icon-button" id="plannerNextDay" type="button" aria-label="后一天">→</button>
+                  <button class="icon-button planner-shift-button" id="plannerNextDay" type="button" aria-label="下一周">→</button>
                 </div>
               </div>
 
               <div class="planner-meta">
-                <span id="plannerDateLabel">{{ planner_payload.selected_date }}</span>
-                <span id="plannerWeekday">{{ planner_payload.weekday }}</span>
+                <span id="plannerDateLabel">{{ planner_payload.week_start }} - {{ planner_payload.week_end }}</span>
+                <span id="plannerWeekday">{{ planner_payload.week_range_label }}</span>
                 <span id="plannerAcademicWeek">{{ planner_payload.academic_label }}</span>
                 <span id="plannerWindow">{{ planner_payload.settings.day_start }} - {{ planner_payload.settings.day_end }}</span>
               </div>
@@ -159,12 +159,12 @@
                   <div class="planner-sidebar-head">
                     <div>
                       <p class="column-label">Todolist Drag Zone</p>
-                      <h3>拖动任务到左侧时间表</h3>
+                      <h3>把待办拖进本周课表</h3>
                     </div>
                     <span class="planner-count" id="plannerTaskCount">0 项</span>
                   </div>
                   <div class="planner-sidebar-note">
-                    <span>课程为固定块，只能在后台修改。</span>
+                    <span>课程是固定块，只能在后台修改。</span>
                     <span>任务块可拖动、拉伸，也可移出排程。</span>
                   </div>
                   <div class="planner-task-pool" id="plannerTaskPool"></div>