Polish weekly course cards

static/planner.js

@@ -347,6 +347,51 @@
     return `第${String(index + 1).padStart(2, "0")}节`;
   }
 
+  function getCoursePeriodRange(startTime, endTime) {
+    const slots = state.planner.time_slots || [];
+    let startPeriod = null;
+    let endPeriod = null;
+
+    slots.forEach((slot, index) => {
+      const slotIndex = index + 1;
+      if (slot.start === startTime) {
+        startPeriod = slotIndex;
+      }
+      if (slot.end === endTime) {
+        endPeriod = slotIndex;
+      }
+    });
+
+    if (startPeriod === null || endPeriod === null) {
+      const startMinutes = toMinutes(startTime);
+      const endMinutes = toMinutes(endTime);
+      slots.forEach((slot, index) => {
+        const slotStart = toMinutes(slot.start);
+        const slotEnd = toMinutes(slot.end);
+        if (startPeriod === null && startMinutes <= slotStart && startMinutes < slotEnd) {
+          startPeriod = index + 1;
+        }
+        if (slotStart < endMinutes && endMinutes <= slotEnd) {
+          endPeriod = index + 1;
+        }
+      });
+    }
+
+    if (startPeriod !== null && endPeriod !== null) {
+      return startPeriod === endPeriod ? `第${startPeriod}节` : `${startPeriod}-${endPeriod}节`;
+    }
+    return `${startTime} - ${endTime}`;
+  }
+
+  function getCourseWeekText(item) {
+    const patternLabel = item.week_pattern === "odd"
+      ? " 单周"
+      : item.week_pattern === "even"
+        ? " 双周"
+        : "";
+    return `${item.start_week}-${item.end_week}周${patternLabel}`;
+  }
+
   function decorateScheduleItems(items) {
     const grouped = new Map();
 
@@ -638,14 +683,24 @@
         if (item.color) {
           block.style.setProperty("--event-accent", item.color);
         }
+        const courseWeekText = getCourseWeekText(item);
+        const coursePeriodText = getCoursePeriodRange(item.start_time, item.end_time);
+        const courseLines = [
+          courseWeekText,
+          coursePeriodText,
+          item.location || "",
+          `${item.start_time} - ${item.end_time}`,
+        ].filter(Boolean);
+        block.title = [item.title, ...courseLines].join("\n");
         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 class="planner-course-stack">
+            <strong class="planner-course-title">${escapeHtml(item.title)}</strong>
+            <div class="planner-course-details">
+              <span class="planner-course-line">${escapeHtml(courseWeekText)}</span>
+              <span class="planner-course-line">${escapeHtml(coursePeriodText)}</span>
+              <span class="planner-course-line">${escapeHtml(item.location || "")}</span>
+              <span class="planner-course-line planner-event-time">${escapeHtml(item.start_time)} - ${escapeHtml(item.end_time)}</span>
+            </div>
           </div>
         `;
       } else {
@@ -920,6 +975,28 @@
         if (item.color) {
           block.style.setProperty("--event-accent", item.color);
         }
+        const courseWeekText = getCourseWeekText(item);
+        const coursePeriodText = getCoursePeriodRange(item.start_time, item.end_time);
+        const courseLines = [
+          courseWeekText,
+          coursePeriodText,
+          `${item.start_time} - ${item.end_time}`,
+          item.location || "",
+        ].filter(Boolean);
+        block.title = [item.title, ...courseLines].join("\n");
+        block.innerHTML = `
+          <div class="planner-course-stack">
+            <strong class="planner-course-title">${escapeHtml(item.title)}</strong>
+            <div class="planner-course-details">
+              <span class="planner-course-line">${escapeHtml(courseWeekText)}</span>
+              <span class="planner-course-line">${escapeHtml(coursePeriodText)}</span>
+              <span class="planner-course-line planner-event-time">${escapeHtml(item.start_time)} - ${escapeHtml(item.end_time)}</span>
+              <span class="planner-course-line">${escapeHtml(item.location || "")}</span>
+            </div>
+          </div>
+        `;
+        canvasLayer.appendChild(block);
+        return;
         block.innerHTML = `
           <div class="planner-event-top">
             <strong>${escapeHtml(item.title)}</strong>

static/v020.css

@@ -582,6 +582,40 @@ body.planner-interacting .page-planner {
   font-size: 0.74rem;
 }
 
+.planner-course-stack {
+  display: grid;
+  gap: 2px;
+  min-height: 100%;
+}
+
+.planner-course-title {
+  display: block;
+  margin: 0;
+  font-size: 0.72rem;
+  line-height: 1.08;
+  letter-spacing: 0.01em;
+  word-break: break-word;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.planner-course-details {
+  display: grid;
+  gap: 1px;
+  color: rgba(238, 244, 251, 0.82);
+  font-size: 0.56rem;
+  line-height: 1.08;
+}
+
+.planner-course-line {
+  display: block;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  font-variant-numeric: tabular-nums;
+}
+
 .planner-lock-badge,
 .planner-event-clear,
 .planner-task-clear {
@@ -634,6 +668,10 @@ body.planner-interacting .page-planner {
   z-index: 8;
 }
 
+.course-event {
+  padding: 7px 8px 7px 10px;
+}
+
 .planner-event.is-compact {
   border-radius: 16px;
   padding: 7px 10px 8px;
@@ -657,13 +695,17 @@ body.planner-interacting .page-planner {
   display: none;
 }
 
-.course-event.is-compact .planner-event-meta {
-  margin-top: 4px;
-  font-size: 0.76rem;
+.course-event.is-compact .planner-course-stack {
+  gap: 2px;
 }
 
-.course-event.is-compact .planner-event-meta span:last-child {
-  display: none;
+.course-event.is-compact .planner-course-title {
+  font-size: 0.68rem;
+}
+
+.course-event.is-compact .planner-course-details {
+  gap: 1px;
+  font-size: 0.54rem;
 }
 
 .planner-event.is-tight {
@@ -677,6 +719,15 @@ body.planner-interacting .page-planner {
   display: none;
 }
 
+.course-event.is-tight .planner-course-details {
+  display: none;
+}
+
+.course-event.is-tight .planner-course-title {
+  font-size: 0.62rem;
+  line-height: 1.06;
+}
+
 .planner-event.is-tight .planner-event-top {
   display: block;
 }