feat: update time tooltip.

public/js/calendar.js

@@ -13,6 +13,7 @@ export default class CalendarView {
     this.monthNames = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
     this.onUnauthorized = onUnauthorized;
     this.saveDelay = 500;
+    this.pendingTooltipDate = null; // Track date that needs tooltip after render
   }
 
   init() {
@@ -51,7 +52,20 @@ export default class CalendarView {
     try {
       showToast('正在加载...', 'info');
       const result = await fetchCalendar(state.currentServer, state.token);
-      state.markedDates = result.markedDates || {};
+      // 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 || {};
       this.renderCalendar();
       showToast('数据加载成功', 'success');
     } catch (error) {
@@ -68,6 +82,7 @@ export default class CalendarView {
 
   clearData() {
     state.markedDates = {};
+    state.markedDatesWithTimestamps = {};
     this.renderCalendar();
   }
 
@@ -149,7 +164,34 @@ export default class CalendarView {
       dayEl.appendChild(markEl);
     }
 
-    dayEl.addEventListener('click', () => {
+    // Add timestamp tooltip functionality
+    const timestamp = this.getDateTimestamp(date);
+    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;
+        // Convert to user's local timezone
+        const localTime = new Date(isoTime).toLocaleString('zh-CN', {
+          year: 'numeric',
+          month: '2-digit',
+          day: '2-digit',
+          hour: '2-digit',
+          minute: '2-digit',
+          second: '2-digit',
+          hour12: false
+        });
+        this.showTooltip(e, `修改时间: ${localTime}`);
+      });
+      
+      dayEl.addEventListener('mouseleave', () => {
+        this.hideTooltip();
+      });
+    }
+
+    dayEl.addEventListener('click', (e) => {
       if (!isOtherMonth) {
         this.toggleDateStatus(date);
       }
@@ -158,6 +200,106 @@ export default class CalendarView {
     return dayEl;
   }
 
+  // Tooltip methods
+  showTooltip(event, content) {
+    // Remove any existing tooltips completely
+    const existingTooltips = document.querySelectorAll('.tooltip');
+    existingTooltips.forEach(tip => {
+      if (tip.parentNode) {
+        tip.parentNode.removeChild(tip);
+      }
+    });
+    
+    // Create new tooltip element with unique ID
+    const tooltip = document.createElement('div');
+    const uniqueId = 'tooltip-' + Date.now();
+    tooltip.id = uniqueId;
+    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 => {
+      tooltip.classList.remove('show');
+      // Remove tooltip element after transition
+      setTimeout(() => {
+        if (tooltip.parentNode) {
+          tooltip.parentNode.removeChild(tooltip);
+        }
+      }, 200);
+    });
+  }
+
+  refreshTooltip(event, element) {
+    // Check if element has timestamp data
+    const isoTime = element.dataset.modificationTime;
+    if (isoTime) {
+      // Convert to user's local timezone
+      const localTime = new Date(isoTime).toLocaleString('zh-CN', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+        hour12: false
+      });
+      this.showTooltip(event, `修改时间: ${localTime}`);
+    } else {
+      // No timestamp, hide tooltip
+      this.hideTooltip();
+    }
+  }
+
+  showTooltipForDate(dateKey) {
+    // Find the day element for this date
+    const dayElements = this.calendarEl.querySelectorAll('.day:not(.other-month)');
+    for (const dayEl of dayElements) {
+      if (dayEl.dataset.modificationTime) {
+        // Extract date from the element's position
+        const dayNumber = dayEl.querySelector('.day-number')?.textContent;
+        if (dayNumber) {
+          const year = state.currentDate.getFullYear();
+          const month = state.currentDate.getMonth();
+          const testDate = new Date(year, month, parseInt(dayNumber));
+          if (this.formatDate(testDate) === dateKey) {
+            // Found the element, show tooltip
+            const isoTime = dayEl.dataset.modificationTime;
+            const localTime = new Date(isoTime).toLocaleString('zh-CN', {
+              year: 'numeric',
+              month: '2-digit',
+              day: '2-digit',
+              hour: '2-digit',
+              minute: '2-digit',
+              second: '2-digit',
+              hour12: false
+            });
+            // Create a synthetic event for positioning
+            const rect = dayEl.getBoundingClientRect();
+            const syntheticEvent = {
+              currentTarget: dayEl
+            };
+            this.showTooltip(syntheticEvent, `修改时间: ${localTime}`);
+            break;
+          }
+        }
+      }
+    }
+  }
+
   toggleDateStatus(date) {
     if (!state.currentServer || !state.token) {
       showToast('请先选择服务器并登录', 'error');
@@ -183,8 +325,13 @@ export default class CalendarView {
 
     if (nextStatus === 'none') {
       delete state.markedDates[dateKey];
+      // Clear pending tooltip for removed marks
+      this.pendingTooltipDate = null;
+      this.hideTooltip();
     } else {
       state.markedDates[dateKey] = nextStatus;
+      // Store the date for tooltip after save completes
+      this.pendingTooltipDate = dateKey;
     }
 
     this.renderCalendar();
@@ -208,6 +355,13 @@ export default class CalendarView {
     try {
       await saveCalendar(state.currentServer, state.token, state.markedDates);
       showToast('数据已保存', 'success');
+      // Reload data to get updated timestamps
+      await this.loadData();
+      // Show tooltip for the pending date after data is loaded
+      if (this.pendingTooltipDate) {
+        this.showTooltipForDate(this.pendingTooltipDate);
+        this.pendingTooltipDate = null;
+      }
     } catch (error) {
       if (error instanceof ApiError && (error.status === 401 || error.status === 403)) {
         showToast('认证已过期，请重新登录', 'error');
@@ -233,6 +387,15 @@ export default class CalendarView {
     return state.markedDates[dateKey] || 'none';
   }
 
+  getDateTimestamp(date) {
+    const dateKey = this.formatDate(date);
+    const dateData = state.markedDatesWithTimestamps[dateKey];
+    if (dateData && typeof dateData === 'object' && dateData.updatedAt) {
+      return dateData.updatedAt;
+    }
+    return null;
+  }
+
   isToday(date) {
     const today = new Date();
     return date.getFullYear() === today.getFullYear() &&