auto-save 2026-05-09 19:21 (~6)

src/app.js

@@ -1303,12 +1303,13 @@ function renderHeatmap() {
   el.innerHTML = "";
   const b = bucketUsage();
 
-  // 根据容器宽度动态决定多少列,每格至少 18px
-  const width = el.parentElement.clientWidth - 80; // 减去 padding 和 label 列
-  const cellMin = 22;
-  const weeksCount = Math.max(12, Math.min(26, Math.floor(width / (cellMin + 8))));
+  // 根据容器宽度动态决定多少列,保持格子紧凑不拉伸成大方块
+  const width = el.parentElement.clientWidth - 64; // 减去内边距和星期 label 列
+  const cellMin = 18;
+  const weeksCount = Math.max(14, Math.min(30, Math.floor(width / (cellMin + 6))));
 
   el.style.setProperty("--hm-cols", weeksCount);
+  document.getElementById("heatmapMonths")?.style.setProperty("--hm-cols", weeksCount);
 
   // 绝对阈值: 每天消息数落在哪个区间
   // 0 = 无活动 | 1-5 = 轻 | 6-15 = 一般 | 16-40 = 活跃 | 41+ = 高强度
@@ -1328,6 +1329,31 @@ function renderHeatmap() {
   const startMonday = new Date(today);
   startMonday.setDate(startMonday.getDate() - todayDow - (weeksCount - 1) * 7);
 
+  const monthEl = document.getElementById("heatmapMonths");
+  if (monthEl) {
+    const monthNames = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
+    const monthCells = ['<div class="hm-month-spacer"></div>'];
+    for (let w = 0; w < weeksCount; w++) {
+      const weekStart = new Date(startMonday);
+      weekStart.setDate(weekStart.getDate() + w * 7);
+      let label = "";
+      for (let d = 0; d < 7; d++) {
+        const cursor = new Date(weekStart);
+        cursor.setDate(cursor.getDate() + d);
+        if (w === 0 || cursor.getDate() === 1) {
+          label = monthNames[cursor.getMonth()];
+          break;
+        }
+      }
+      monthCells.push(`<div class="hm-month-label">${label}</div>`);
+    }
+    monthEl.innerHTML = monthCells.join("");
+  }
+
+  let activeDays = 0;
+  let peakMsgs = 0;
+  let peakKey = "";
+
   // 按 row(weekday) × col(week) 的顺序铺,每行先放一个 label
   const labels = ["一", "", "三", "", "五", "", "日"];
   for (let dow = 0; dow < 7; dow++) {
@@ -1344,15 +1370,23 @@ function renderHeatmap() {
       const msgs = data?.messages || 0;
       const lvl = levelOf(msgs);
       const future = cursor > today;
+      if (!future && msgs > 0) activeDays += 1;
+      if (!future && msgs > peakMsgs) {
+        peakMsgs = msgs;
+        peakKey = k;
+      }
       const cell = document.createElement("div");
       cell.className = "hm-cell lvl-" + lvl + (future ? " future" : "") + (k === selectedDay ? " sel" : "");
       cell.title = k + (msgs ? ` · ${msgs} 条消息` : " · 无活动");
+      cell.setAttribute("aria-label", cell.title);
       if (!future) {
         cell.onclick = () => { selectedDay = k; renderHeatmap(); renderDayDetail(k); };
       }
       el.appendChild(cell);
     }
   }
+  setText("hmActiveDays", activeDays + " 个活跃日");
+  setText("hmPeakDay", peakMsgs ? ("峰值 " + peakMsgs + " · " + peakKey.slice(5)) : "峰值 0");
 }
 
 // 窗口尺寸变化时重新渲染热力图