Fix planner date controls and resizing

static/planner.js

@@ -2,32 +2,20 @@
   const bootstrap = window.__DRM_BOOTSTRAP__ || {};
   const state = {
     authenticated: !!bootstrap.authenticated,
-    planner: bootstrap.planner || {
-      selected_date: "",
-      weekday: "",
-      academic_label: "",
-      settings: {
-        day_start: "08:15",
-        day_end: "23:00",
-        default_task_duration_minutes: 45,
-      },
-      time_slots: [],
-      major_blocks: [],
-      tasks: [],
-      scheduled_items: [],
-    },
-    selectedDate: (bootstrap.planner && bootstrap.planner.selected_date) || "",
+    planner: bootstrap.planner || {},
+    selectedDate: bootstrap.planner ? bootstrap.planner.selected_date : "",
     activePage: 0,
     dragTaskId: null,
     interaction: null,
   };
 
   const PIXELS_PER_MINUTE = 1.16;
-  const AXIS_WIDTH = 94;
-  const SLOT_WIDTH = 150;
+  const AXIS_WIDTH = 96;
+  const SLOT_WIDTH = 156;
   const CANVAS_GAP = 18;
   const SNAP_MINUTES = 5;
   const MIN_DURATION = 15;
+  const AXIS_LABEL_MIN_GAP = 28;
 
   const pageTrack = document.getElementById("pageTrack");
   const plannerDateInput = document.getElementById("plannerDateInput");
@@ -44,7 +32,7 @@
   const loginModal = document.getElementById("loginModal");
   const toastStack = document.getElementById("toastStack");
 
-  if (!pageTrack || !plannerDateInput || !plannerTimeline || !plannerTaskPool) {
+  if (!pageTrack || !plannerDateInput || !plannerPrevDay || !plannerNextDay || !plannerTaskPool || !plannerTimeline) {
     return;
   }
 
@@ -100,6 +88,16 @@
     return Math.min(Math.max(value, min), max);
   }
 
+  function mixColor(progress) {
+    if (progress <= 50) {
+      return "#73d883";
+    }
+    if (progress <= 80) {
+      return "#ffc857";
+    }
+    return "#ff6b5c";
+  }
+
   function toMinutes(value) {
     const [hour, minute] = String(value).split(":").map(Number);
     return (hour * 60) + minute;
@@ -115,6 +113,16 @@
     return Math.round(value / SNAP_MINUTES) * SNAP_MINUTES;
   }
 
+  function shiftDate(dateString, offsetDays) {
+    const [year, month, day] = String(dateString).split("-").map(Number);
+    const shifted = new Date(Date.UTC(year, month - 1, day + offsetDays));
+    return [
+      shifted.getUTCFullYear(),
+      String(shifted.getUTCMonth() + 1).padStart(2, "0"),
+      String(shifted.getUTCDate()).padStart(2, "0"),
+    ].join("-");
+  }
+
   function formatLocalDateTime(isoString) {
     const date = new Date(isoString);
     return new Intl.DateTimeFormat("zh-CN", {
@@ -128,14 +136,18 @@
   }
 
   function formatPlannerDate(dateString) {
-    const [year, month, day] = dateString.split("-").map(Number);
+    const [year, month, day] = String(dateString).split("-").map(Number);
     return `${year} 年 ${String(month).padStart(2, "0")} 月 ${String(day).padStart(2, "0")} 日`;
   }
 
   function getPlannerConfig() {
-    const settings = state.planner.settings || {};
-    const dayStart = toMinutes(settings.day_start || "08:15");
-    const dayEnd = toMinutes(settings.day_end || "23:00");
+    const settings = state.planner.settings || {
+      day_start: "08:15",
+      day_end: "23:00",
+      default_task_duration_minutes: 45,
+    };
+    const dayStart = toMinutes(settings.day_start);
+    const dayEnd = toMinutes(settings.day_end);
     return {
       settings,
       dayStart,
@@ -145,17 +157,37 @@
     };
   }
 
-  function getTaskDuration(task) {
-    if (task && task.schedule) {
-      return Math.max(MIN_DURATION, toMinutes(task.schedule.end_time) - toMinutes(task.schedule.start_time));
+  function getPlannerHeight() {
+    return getPlannerConfig().totalMinutes * PIXELS_PER_MINUTE;
+  }
+
+  function getCanvasRect() {
+    const canvas = plannerTimeline.querySelector(".timeline-canvas-layer");
+    return canvas ? canvas.getBoundingClientRect() : null;
+  }
+
+  function clientYToMinutes(clientY) {
+    const rect = getCanvasRect();
+    const { dayStart, dayEnd } = getPlannerConfig();
+    if (!rect) {
+      return dayStart;
     }
-    return Number((state.planner.settings && state.planner.settings.default_task_duration_minutes) || 45);
+    const offsetY = clamp(clientY - rect.top, 0, rect.height);
+    const minutes = dayStart + (offsetY / PIXELS_PER_MINUTE);
+    return clamp(snapMinutes(minutes), dayStart, dayEnd);
   }
 
   function getTaskById(taskId) {
     return (state.planner.tasks || []).find((task) => task.id === taskId) || null;
   }
 
+  function getTaskDuration(task) {
+    if (task && task.schedule) {
+      return Math.max(MIN_DURATION, toMinutes(task.schedule.end_time) - toMinutes(task.schedule.start_time));
+    }
+    return Number((state.planner.settings && state.planner.settings.default_task_duration_minutes) || 45);
+  }
+
   function setActivePage(index) {
     state.activePage = clamp(index, 0, 1);
     pageTrack.style.transform = `translateX(-${state.activePage * 100}%)`;
@@ -168,66 +200,57 @@
   }
 
   function decorateItems(items) {
-    const prepared = (items || []).map((item) => ({
-      ...item,
-      startMinutes: toMinutes(item.start_time),
-      endMinutes: toMinutes(item.end_time),
-    })).sort((left, right) => (
-      left.startMinutes - right.startMinutes
-      || left.endMinutes - right.endMinutes
-    ));
+    const prepared = (items || [])
+      .map((item) => ({
+        ...item,
+        startMinutes: toMinutes(item.start_time),
+        endMinutes: toMinutes(item.end_time),
+      }))
+      .sort((left, right) => (
+        left.startMinutes - right.startMinutes
+        || left.endMinutes - right.endMinutes
+      ));
 
     let active = [];
-    let group = [];
-    let maxColumns = 0;
+    let currentGroup = [];
+    let currentGroupWidth = 0;
 
     function finalizeGroup() {
-      group.forEach((item) => {
-        item.columnCount = maxColumns || 1;
+      currentGroup.forEach((item) => {
+        item.columnCount = currentGroupWidth || 1;
       });
-      group = [];
-      maxColumns = 0;
+      currentGroup = [];
+      currentGroupWidth = 0;
     }
 
     prepared.forEach((item) => {
       active = active.filter((activeItem) => activeItem.endMinutes > item.startMinutes);
-      if (!active.length && group.length) {
+      if (!active.length && currentGroup.length) {
         finalizeGroup();
       }
-      const used = new Set(active.map((activeItem) => activeItem.column));
+      const usedColumns = new Set(active.map((activeItem) => activeItem.column));
       let column = 0;
-      while (used.has(column)) {
+      while (usedColumns.has(column)) {
         column += 1;
       }
       item.column = column;
       active.push(item);
-      group.push(item);
-      maxColumns = Math.max(maxColumns, active.length);
+      currentGroup.push(item);
+      currentGroupWidth = Math.max(currentGroupWidth, active.length);
     });
-    if (group.length) {
+
+    if (currentGroup.length) {
       finalizeGroup();
     }
-    return prepared;
-  }
 
-  function getCanvasRect() {
-    const canvas = plannerTimeline.querySelector(".timeline-canvas-layer");
-    return canvas ? canvas.getBoundingClientRect() : null;
+    return prepared;
   }
 
-  function clientYToMinutes(clientY) {
-    const rect = getCanvasRect();
-    const { dayStart, dayEnd } = getPlannerConfig();
-    if (!rect) {
-      return dayStart;
+  function updateEventTimeLabel(block, startMinutes, endMinutes) {
+    const timeLabel = block.querySelector(".planner-event-time");
+    if (timeLabel) {
+      timeLabel.textContent = `${minutesToTime(startMinutes)} - ${minutesToTime(endMinutes)}`;
     }
-    const offset = clamp(clientY - rect.top, 0, rect.height);
-    const minutes = dayStart + (offset / PIXELS_PER_MINUTE);
-    return clamp(snapMinutes(minutes), dayStart, dayEnd);
-  }
-
-  function getPlannerHeight() {
-    return getPlannerConfig().totalMinutes * PIXELS_PER_MINUTE;
   }
 
   function updateNowLine() {
@@ -245,18 +268,22 @@
       minute: "2-digit",
       hour12: false,
     }).formatToParts(new Date());
+
     const map = {};
     parts.forEach((part) => {
       if (part.type !== "literal") {
         map[part.type] = part.value;
       }
     });
+
     const today = `${map.year}-${map.month}-${map.day}`;
     const currentMinutes = (Number(map.hour) * 60) + Number(map.minute);
+
     if (today !== state.selectedDate || currentMinutes < dayStart || currentMinutes > dayEnd) {
       line.style.display = "none";
       return;
     }
+
     line.style.display = "block";
     line.style.left = `${canvasLeft}px`;
     line.style.right = "14px";
@@ -266,15 +293,17 @@
   function renderTaskPool() {
     const tasks = (state.planner.tasks || []).filter((task) => !task.completed);
     plannerTaskCount.textContent = `${tasks.length} 项`;
+
     if (!tasks.length) {
       plannerTaskPool.innerHTML = `
         <div class="planner-empty">
           <p>目前没有可安排的任务</p>
-          <span>先回第一页添加待办，再把它拖入左侧时间表。</span>
+          <span>先回到第一页添加待办，再把它拖到左侧时间表上。</span>
         </div>
       `;
       return;
     }
+
     plannerTaskPool.innerHTML = tasks.map((task) => `
       <article class="planner-task-card ${task.schedule ? "is-scheduled" : ""}" draggable="${state.authenticated}" data-planner-task-id="${task.id}">
         <div class="planner-task-top">
@@ -293,47 +322,93 @@
 
   function renderTimeline() {
     const { dayStart, dayEnd, canvasLeft } = getPlannerConfig();
+    const timelineHeight = getPlannerHeight();
+
     plannerTimeline.innerHTML = "";
-    plannerTimeline.style.height = `${getPlannerHeight()}px`;
+    plannerTimeline.style.height = `${timelineHeight}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`);
 
     const axisLayer = document.createElement("div");
     axisLayer.className = "timeline-axis-layer";
+
     const slotLayer = document.createElement("div");
     slotLayer.className = "timeline-slot-layer";
+
     const canvasLayer = document.createElement("div");
     canvasLayer.className = "timeline-canvas-layer";
 
-    const markers = new Set([dayStart, dayEnd]);
+    const preview = document.createElement("div");
+    preview.className = "timeline-drop-preview";
+    preview.id = "timelineDropPreview";
+    preview.style.display = "none";
+
+    const nowLine = document.createElement("div");
+    nowLine.className = "timeline-now-line";
+    nowLine.id = "timelineNowLine";
+
+    const lineMarkers = new Set([dayStart, dayEnd]);
+    const preferredAxisCandidates = new Set([dayStart, dayEnd]);
+    const hourAxisCandidates = new Set();
+
     (state.planner.time_slots || []).forEach((slot) => {
-      markers.add(toMinutes(slot.start));
-      markers.add(toMinutes(slot.end));
+      const slotStart = toMinutes(slot.start);
+      const slotEnd = toMinutes(slot.end);
+      lineMarkers.add(slotStart);
+      lineMarkers.add(slotEnd);
+      preferredAxisCandidates.add(slotStart);
+
       const band = document.createElement("div");
       band.className = "timeline-slot-band";
-      band.style.top = `${(toMinutes(slot.start) - dayStart) * PIXELS_PER_MINUTE}px`;
-      band.style.height = `${Math.max((toMinutes(slot.end) - toMinutes(slot.start)) * PIXELS_PER_MINUTE, 52)}px`;
-      band.innerHTML = `<strong>${escapeHtml(slot.label)}</strong><span>${escapeHtml(slot.start)} - ${escapeHtml(slot.end)}</span>`;
+      band.style.top = `${(slotStart - dayStart) * PIXELS_PER_MINUTE}px`;
+      band.style.height = `${Math.max((slotEnd - slotStart) * PIXELS_PER_MINUTE, 52)}px`;
+      band.innerHTML = `
+        <strong>${escapeHtml(slot.label)}</strong>
+        <span>${escapeHtml(slot.start)} - ${escapeHtml(slot.end)}</span>
+      `;
       slotLayer.appendChild(band);
     });
 
     for (let minute = Math.ceil(dayStart / 60) * 60; minute <= dayEnd; minute += 60) {
-      markers.add(minute);
+      lineMarkers.add(minute);
+      hourAxisCandidates.add(minute);
     }
 
-    Array.from(markers).sort((left, right) => left - right).forEach((minute) => {
+    Array.from(lineMarkers).sort((left, right) => left - right).forEach((minute) => {
+      const line = document.createElement("div");
+      line.className = `timeline-line ${minute % 60 === 0 ? "is-hour" : "is-slot"}`;
+      line.style.top = `${(minute - dayStart) * PIXELS_PER_MINUTE}px`;
+      canvasLayer.appendChild(line);
+    });
+
+    const axisLabelMinutes = [];
+    const appendAxisLabel = (minute) => {
       const top = (minute - dayStart) * PIXELS_PER_MINUTE;
+      const previous = axisLabelMinutes[axisLabelMinutes.length - 1];
+      if (previous !== undefined) {
+        const previousTop = (previous - dayStart) * PIXELS_PER_MINUTE;
+        if (top - previousTop < AXIS_LABEL_MIN_GAP) {
+          return;
+        }
+      }
+      axisLabelMinutes.push(minute);
+    };
+
+    Array.from(preferredAxisCandidates)
+      .sort((left, right) => left - right)
+      .forEach(appendAxisLabel);
+
+    Array.from(hourAxisCandidates)
+      .sort((left, right) => left - right)
+      .forEach(appendAxisLabel);
+
+    axisLabelMinutes.forEach((minute) => {
       const tick = document.createElement("div");
       tick.className = "timeline-axis-tick";
-      tick.style.top = `${top}px`;
+      tick.style.top = `${(minute - dayStart) * PIXELS_PER_MINUTE}px`;
       tick.textContent = minutesToTime(minute);
       axisLayer.appendChild(tick);
-
-      const line = document.createElement("div");
-      line.className = `timeline-line ${minute % 60 === 0 ? "is-hour" : "is-slot"}`;
-      line.style.top = `${top}px`;
-      canvasLayer.appendChild(line);
     });
 
     const majorMap = new Map();
@@ -342,62 +417,76 @@
         majorMap.set(block.label, block);
       }
     });
+
     Array.from(majorMap.values()).forEach((block) => {
+      const startMinutes = toMinutes(block.start);
+      const endMinutes = toMinutes(block.end);
       const overlay = document.createElement("div");
       overlay.className = "timeline-major-block";
-      overlay.style.top = `${(toMinutes(block.start) - dayStart) * PIXELS_PER_MINUTE}px`;
-      overlay.style.height = `${Math.max((toMinutes(block.end) - toMinutes(block.start)) * PIXELS_PER_MINUTE, 88)}px`;
+      overlay.style.top = `${(startMinutes - dayStart) * PIXELS_PER_MINUTE}px`;
+      overlay.style.height = `${Math.max((endMinutes - startMinutes) * PIXELS_PER_MINUTE, 88)}px`;
       overlay.innerHTML = `<span>${escapeHtml(block.label)}</span>`;
       canvasLayer.appendChild(overlay);
     });
 
     decorateItems(state.planner.scheduled_items).forEach((item) => {
-      const block = document.createElement("article");
       const widthPercent = 100 / (item.columnCount || 1);
       const leftPercent = widthPercent * (item.column || 0);
+      const block = document.createElement("article");
       block.className = `planner-event ${item.kind === "course" ? "course-event" : "task-event"} ${item.completed ? "is-complete" : ""}`;
       block.style.top = `${(item.startMinutes - dayStart) * PIXELS_PER_MINUTE}px`;
       block.style.height = `${Math.max((item.endMinutes - item.startMinutes) * PIXELS_PER_MINUTE, 54)}px`;
       block.style.left = `${leftPercent}%`;
       block.style.width = `calc(${widthPercent}% - 8px)`;
-      if (item.color) {
-        block.style.setProperty("--event-accent", item.color);
-      }
+
       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>${escapeHtml(item.start_time)} - ${escapeHtml(item.end_time)}</span>
+            <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" : "");
+        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>${escapeHtml(item.start_time)} - ${escapeHtml(item.end_time)}</span>
+            <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><div class="planner-event-resize" data-resize-task="${item.task_id}"></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.target.closest("[data-clear-schedule]")) {
               return;
             }
-            const mode = event.target.closest("[data-resize-task]") ? "resize" : "move";
+
+            const mode = event.target.closest("[data-resize-task-start]")
+              ? "resize-start"
+              : event.target.closest("[data-resize-task-end]")
+                ? "resize-end"
+                : "move";
+
             const rect = getCanvasRect();
             if (!rect) {
               return;
             }
+
             state.interaction = {
               mode,
               block,
@@ -407,10 +496,12 @@
               duration: item.endMinutes - item.startMinutes,
               offsetY: event.clientY - (rect.top + ((item.startMinutes - dayStart) * PIXELS_PER_MINUTE)),
             };
+
             block.classList.add("is-dragging");
           });
         }
       }
+
       canvasLayer.appendChild(block);
     });
 
@@ -431,18 +522,29 @@
       preview.textContent = `${minutesToTime(startMinutes)} - ${minutesToTime(startMinutes + duration)}`;
     });
 
+    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);
       if (!task) {
+        state.dragTaskId = null;
         return;
       }
+
       try {
         const duration = getTaskDuration(task);
         const startMinutes = clamp(clientYToMinutes(event.clientY), dayStart, dayEnd - duration);
@@ -463,20 +565,12 @@
       }
     });
 
-    const preview = document.createElement("div");
-    preview.className = "timeline-drop-preview";
-    preview.id = "timelineDropPreview";
-    preview.style.display = "none";
-
-    const nowLine = document.createElement("div");
-    nowLine.className = "timeline-now-line";
-    nowLine.id = "timelineNowLine";
-
     plannerTimeline.appendChild(axisLayer);
     plannerTimeline.appendChild(slotLayer);
     plannerTimeline.appendChild(canvasLayer);
     plannerTimeline.appendChild(preview);
     plannerTimeline.appendChild(nowLine);
+
     updateNowLine();
   }
 
@@ -487,14 +581,16 @@
     plannerWeekday.textContent = state.planner.weekday || "";
     plannerAcademicWeek.textContent = state.planner.academic_label || "";
     plannerWindow.textContent = `${state.planner.settings.day_start} - ${state.planner.settings.day_end}`;
-    plannerHeadlineNote.textContent = "时间轴已按你给出的校内节次排好，课程固定显示，任务可拖拽和拉伸。";
+    plannerHeadlineNote.textContent = "时间轴已按你给出的校内节次排好，课程固定显示，任务可拖拽并从上边缘或下边缘拉伸。";
     renderTaskPool();
     renderTimeline();
   }
 
   async function loadPlanner(targetDate, silent) {
     try {
-      const payload = await requestJSON(`/api/planner?date=${encodeURIComponent(targetDate)}`, { method: "GET" });
+      const payload = await requestJSON(`/api/planner?date=${encodeURIComponent(targetDate)}`, {
+        method: "GET",
+      });
       state.planner = payload.planner;
       state.selectedDate = payload.planner.selected_date;
       renderPlanner();
@@ -510,6 +606,7 @@
     if (pageButton) {
       setActivePage(Number(pageButton.dataset.goPage));
     }
+
     const clearButton = event.target.closest("[data-clear-schedule]");
     if (clearButton && (plannerTimeline.contains(clearButton) || plannerTaskPool.contains(clearButton))) {
       if (!requireAuth()) {
@@ -518,7 +615,8 @@
       requestJSON(`/api/tasks/${clearButton.dataset.clearSchedule}/schedule`, {
         method: "PATCH",
         body: JSON.stringify({ clear: true }),
-      }).then(() => loadPlanner(state.selectedDate, true))
+      })
+        .then(() => loadPlanner(state.selectedDate, true))
         .then(() => showToast("任务已移出时间表"))
         .catch((error) => showToast(error.message, "error"));
     }
@@ -555,30 +653,48 @@
     if (!state.interaction) {
       return;
     }
+
     const { dayStart, dayEnd } = getPlannerConfig();
     if (state.interaction.mode === "move") {
-      const startMinutes = clamp(clientYToMinutes(event.clientY - state.interaction.offsetY + 8), dayStart, dayEnd - state.interaction.duration);
+      const startMinutes = clamp(
+        clientYToMinutes(event.clientY - state.interaction.offsetY + 8),
+        dayStart,
+        dayEnd - state.interaction.duration
+      );
       state.interaction.startMinutes = startMinutes;
       state.interaction.endMinutes = startMinutes + state.interaction.duration;
+    } else if (state.interaction.mode === "resize-start") {
+      const startMinutes = clamp(
+        clientYToMinutes(event.clientY),
+        dayStart,
+        state.interaction.endMinutes - MIN_DURATION
+      );
+      state.interaction.startMinutes = startMinutes;
+      state.interaction.duration = state.interaction.endMinutes - state.interaction.startMinutes;
     } else {
-      state.interaction.endMinutes = clamp(clientYToMinutes(event.clientY), state.interaction.startMinutes + MIN_DURATION, dayEnd);
+      const endMinutes = clamp(
+        clientYToMinutes(event.clientY),
+        state.interaction.startMinutes + MIN_DURATION,
+        dayEnd
+      );
+      state.interaction.endMinutes = endMinutes;
       state.interaction.duration = state.interaction.endMinutes - state.interaction.startMinutes;
     }
+
     state.interaction.block.style.top = `${(state.interaction.startMinutes - dayStart) * PIXELS_PER_MINUTE}px`;
     state.interaction.block.style.height = `${Math.max((state.interaction.endMinutes - state.interaction.startMinutes) * PIXELS_PER_MINUTE, 54)}px`;
-    const label = state.interaction.block.querySelector(".planner-event-top span");
-    if (label) {
-      label.textContent = `${minutesToTime(state.interaction.startMinutes)} - ${minutesToTime(state.interaction.endMinutes)}`;
-    }
+    updateEventTimeLabel(state.interaction.block, state.interaction.startMinutes, state.interaction.endMinutes);
   });
 
   document.addEventListener("pointerup", () => {
     if (!state.interaction) {
       return;
     }
+
     const current = state.interaction;
     current.block.classList.remove("is-dragging");
     state.interaction = null;
+
     requestJSON(`/api/tasks/${current.taskId}/schedule`, {
       method: "PATCH",
       body: JSON.stringify({
@@ -586,8 +702,9 @@
         start_time: minutesToTime(current.startMinutes),
         end_time: minutesToTime(current.endMinutes),
       }),
-    }).then(() => loadPlanner(state.selectedDate, true))
-      .then(() => showToast("时间块已更新"))
+    })
+      .then(() => loadPlanner(state.selectedDate, true))
+      .then(() => showToast("规划时间已更新"))
       .catch((error) => showToast(error.message, "error"));
   });
 
@@ -598,15 +715,11 @@
   });
 
   plannerPrevDay.addEventListener("click", () => {
-    const date = new Date(`${state.selectedDate}T00:00:00`);
-    date.setDate(date.getDate() - 1);
-    loadPlanner(date.toISOString().slice(0, 10));
+    loadPlanner(shiftDate(state.selectedDate, -1));
   });
 
   plannerNextDay.addEventListener("click", () => {
-    const date = new Date(`${state.selectedDate}T00:00:00`);
-    date.setDate(date.getDate() + 1);
-    loadPlanner(date.toISOString().slice(0, 10));
+    loadPlanner(shiftDate(state.selectedDate, 1));
   });
 
   window.setInterval(() => {
@@ -614,7 +727,10 @@
       loadPlanner(state.selectedDate, true);
     }
   }, 45000);
+
   window.setInterval(updateNowLine, 60000);
+  window.addEventListener("resize", updateNowLine);
+
   document.addEventListener("visibilitychange", () => {
     if (document.visibilityState === "visible" && state.activePage === 1) {
       loadPlanner(state.selectedDate, true);

static/v020.css

@@ -210,10 +210,15 @@
 .timeline-axis-tick {
   position: absolute;
   left: 0;
+  right: 10px;
+  display: flex;
+  justify-content: flex-end;
   transform: translateY(-50%);
-  padding-left: 10px;
+  padding-right: 12px;
   color: rgba(238, 244, 251, 0.7);
   font-size: 0.82rem;
+  line-height: 1;
+  white-space: nowrap;
 }
 
 .timeline-slot-band {
@@ -335,13 +340,20 @@
   position: absolute;
   left: 18px;
   right: 18px;
-  bottom: 8px;
   height: 8px;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.18);
   cursor: ns-resize;
 }
 
+.planner-event-resize-top {
+  top: 8px;
+}
+
+.planner-event-resize-bottom {
+  bottom: 8px;
+}
+
 .planner-event.is-dragging,
 .planner-task-card.is-dragging {
   opacity: 0.8;