optimize: api resp size.

public/js/calendar.js

@@ -26,6 +26,8 @@ export default class CalendarView {
       this.prevBtn.addEventListener('click', () => {
         state.currentDate.setMonth(state.currentDate.getMonth() - 1);
         this.renderCalendar();
+        // Load data for the new month
+        this.loadData();
       });
     }
 
@@ -33,6 +35,8 @@ export default class CalendarView {
       this.nextBtn.addEventListener('click', () => {
         state.currentDate.setMonth(state.currentDate.getMonth() + 1);
         this.renderCalendar();
+        // Load data for the new month
+        this.loadData();
       });
     }
 
@@ -40,6 +44,8 @@ export default class CalendarView {
       this.todayBtn.addEventListener('click', () => {
         state.currentDate = new Date();
         this.renderCalendar();
+        // Load data for the current month
+        this.loadData();
       });
     }
   }
@@ -51,21 +57,12 @@ export default class CalendarView {
 
     try {
       showToast('正在加载...', 'info');
-      const result = await fetchCalendar(state.currentServer, state.token);
-      // Convert the new data structure to the old one for backward compatibility
-      const markedDates = {};
-      for (const [date, data] of Object.entries(result.markedDates || {})) {
-        if (typeof data === 'string') {
-          // Old format - just status
-          markedDates[date] = data;
-        } else if (data && typeof data === 'object') {
-          // New format - object with status and updatedAt
-          markedDates[date] = data.status;
-        }
-      }
-      state.markedDates = markedDates;
-      // Store the full data including timestamps
-      state.markedDatesWithTimestamps = result.markedDates || {};
+      // Pass current year and month to only fetch data for the displayed month
+      const year = state.currentDate.getFullYear();
+      const month = state.currentDate.getMonth() + 1; // getMonth() returns 0-11, need 1-12
+      const result = await fetchCalendar(state.currentServer, state.token, year, month);
+      // Merge with existing data
+      Object.assign(state.markedDates, result.markedDates || {});
       this.renderCalendar();
       showToast('数据加载成功', 'success');
     } catch (error) {
@@ -82,7 +79,7 @@ export default class CalendarView {
 
   clearData() {
     state.markedDates = {};
-    state.markedDatesWithTimestamps = {};
+    state.deletedDates = [];
     this.renderCalendar();
   }
 
@@ -169,7 +166,7 @@ export default class CalendarView {
     if (timestamp) {
       // Store the ISO timestamp
       dayEl.dataset.modificationTime = timestamp;
-      
+
       // Add hover events for custom tooltip
       dayEl.addEventListener('mouseenter', (e) => {
         const isoTime = e.currentTarget.dataset.modificationTime;
@@ -185,7 +182,7 @@ export default class CalendarView {
         });
         this.showTooltip(e, `修改时间: ${localTime}`);
       });
-      
+
       dayEl.addEventListener('mouseleave', () => {
         this.hideTooltip();
       });
@@ -209,7 +206,7 @@ export default class CalendarView {
         tip.parentNode.removeChild(tip);
       }
     });
-    
+
     // Create new tooltip element with unique ID
     const tooltip = document.createElement('div');
     const uniqueId = 'tooltip-' + Date.now();
@@ -217,19 +214,19 @@ export default class CalendarView {
     tooltip.className = 'tooltip';
     tooltip.textContent = content;
     document.body.appendChild(tooltip);
-    
+
     // Position tooltip relative to the target element
     const rect = event.currentTarget.getBoundingClientRect();
     tooltip.style.left = (rect.left + rect.width / 2) + 'px';
     tooltip.style.top = (rect.top - 10) + 'px';
     tooltip.style.transform = 'translate(-50%, -100%)';
-    
+
     // Show tooltip with a slight delay to ensure position is set
     requestAnimationFrame(() => {
       tooltip.classList.add('show');
     });
   }
-  
+
   hideTooltip() {
     const tooltips = document.querySelectorAll('.tooltip');
     tooltips.forEach(tooltip => {
@@ -307,7 +304,8 @@ export default class CalendarView {
     }
 
     const dateKey = this.formatDate(date);
-    const currentStatus = state.markedDates[dateKey] || 'none';
+    const dateData = state.markedDates[dateKey];
+    const currentStatus = (dateData && dateData.status) || 'none';
     let nextStatus;
 
     switch (currentStatus) {
@@ -325,11 +323,21 @@ export default class CalendarView {
 
     if (nextStatus === 'none') {
       delete state.markedDates[dateKey];
+      // Track this deletion
+      if (!state.deletedDates.includes(dateKey)) {
+        state.deletedDates.push(dateKey);
+      }
       // Clear pending tooltip for removed marks
       this.pendingTooltipDate = null;
       this.hideTooltip();
     } else {
-      state.markedDates[dateKey] = nextStatus;
+      // Store status, timestamp will be updated by server on save
+      state.markedDates[dateKey] = { status: nextStatus };
+      // Remove from deleted dates if it was there
+      const deleteIndex = state.deletedDates.indexOf(dateKey);
+      if (deleteIndex !== -1) {
+        state.deletedDates.splice(deleteIndex, 1);
+      }
       // Store the date for tooltip after save completes
       this.pendingTooltipDate = dateKey;
     }
@@ -353,7 +361,17 @@ export default class CalendarView {
   async persistMarkedDates() {
     state.saveTimeoutId = null;
     try {
-      await saveCalendar(state.currentServer, state.token, state.markedDates);
+      // Convert state format { date: { status, updatedAt } } to API format { date: status }
+      const markedDatesForAPI = {};
+      for (const [date, data] of Object.entries(state.markedDates)) {
+        if (data && typeof data === 'object' && data.status) {
+          markedDatesForAPI[date] = data.status;
+        }
+      }
+
+      await saveCalendar(state.currentServer, state.token, markedDatesForAPI, state.deletedDates);
+      // Clear the deleted dates array after successful save
+      state.deletedDates = [];
       showToast('数据已保存', 'success');
       // Reload data to get updated timestamps
       await this.loadData();
@@ -384,12 +402,16 @@ export default class CalendarView {
 
   getDateStatus(date) {
     const dateKey = this.formatDate(date);
-    return state.markedDates[dateKey] || 'none';
+    const dateData = state.markedDates[dateKey];
+    if (dateData && typeof dateData === 'object') {
+      return dateData.status || 'none';
+    }
+    return 'none';
   }
 
   getDateTimestamp(date) {
     const dateKey = this.formatDate(date);
-    const dateData = state.markedDatesWithTimestamps[dateKey];
+    const dateData = state.markedDates[dateKey];
     if (dateData && typeof dateData === 'object' && dateData.updatedAt) {
       return dateData.updatedAt;
     }