v2.0.3 — 周历改4周一行，月起始加月份标签

static/app.js

@@ -145,32 +145,42 @@
     renderCalendar();
   };
 
-  /** 渲染周历 */
+  /** 渲染周历（4周一行 + 月份分组） */
   function renderCalendar() {
     document.getElementById('cal-year-label').textContent = calYear + '年';
     var yearStart = new Date(calYear, 0, 1);
     var yearEnd = new Date(calYear, 11, 31);
     var weeks = [];
     var d = new Date(yearStart);
-    // 推进到第一个周一
     d.setDate(d.getDate() - d.getDay() + (d.getDay() === 0 ? -6 : 1));
+    var lastMonth = -1;
+    var monthsList = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
     while (d <= yearEnd) {
       var wk = fmtWeek(d);
-      weeks.push(wk);
+      var mon = new Date(d);
+      var mIdx = mon.getMonth();
+      var isMonthStart = (mIdx !== lastMonth && mon.getDate() <= 7);
+      weeks.push({ wk: wk, monthLabel: isMonthStart ? monthsList[mIdx] : '' });
+      lastMonth = mIdx;
       d.setDate(d.getDate() + 7);
     }
     var todayWk = fmtWeek(new Date());
     var el = document.getElementById('cal-week-list');
     var html = '';
     for (var i = 0; i < weeks.length; i++) {
-      var w = weeks[i];
+      var we = weeks[i];
+      var w = we.wk;
       var cls = 'cal-week-cell';
       var status = calendarStatus[w];
       if (status) cls += ' ' + status;
       if (w === todayWk) cls += ' today';
       if (w === selectedWeek) cls += ' selected';
-      html += '<div class="' + cls + '" data-week="' + w + '" title="' + w + '">' +
-        'W' + w.split('-W')[1] + '</div>';
+      if (we.monthLabel) cls += ' month-start';
+      var wkNum = w.split('-W')[1].replace(/^0/, '');
+      html += '<div class="' + cls + '" data-week="' + w + '" data-month="' + we.monthLabel + '" title="' + w + '">' +
+        '<span class="wk-num">W' + wkNum + '</span>' +
+        '<span class="wk-dot"></span>' +
+      '</div>';
     }
     el.innerHTML = html;
     el.querySelectorAll('.cal-week-cell').forEach(function(cell) {

static/style.css

@@ -209,14 +209,15 @@ body {
 
 .cal-week-list {
   display: grid;
-  grid-template-columns: repeat(8, 1fr);
-  gap: 3px;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 6px 4px;
   margin-bottom: 8px;
 }
 
 .cal-week-cell {
-  aspect-ratio: 1;
+  aspect-ratio: 1.4;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
   font-size: 10px;
@@ -225,7 +226,10 @@ body {
   color: var(--text-dim);
   cursor: pointer;
   transition: all 0.15s;
-  border: 1.5px solid transparent;
+  border: 1.5px solid var(--border);
+  background: var(--card);
+  padding: 2px 0;
+  position: relative;
 }
 
 .cal-week-cell:hover {
@@ -234,28 +238,51 @@ body {
   border-color: var(--primary);
 }
 
+.cal-week-cell .wk-num { font-weight: 600; line-height: 1; }
+.cal-week-cell .wk-dot {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: transparent;
+  margin-top: 3px;
+}
+
 .cal-week-cell.pass {
   background: var(--success-light);
-  color: var(--success);
   border-color: var(--success);
+  color: var(--success);
 }
+.cal-week-cell.pass .wk-dot { background: var(--success); }
 
 .cal-week-cell.fail {
   background: var(--danger-light);
-  color: var(--danger);
   border-color: var(--danger);
+  color: var(--danger);
 }
+.cal-week-cell.fail .wk-dot { background: var(--danger); }
 
 .cal-week-cell.today {
-  font-weight: 700;
   border-color: var(--primary);
+  font-weight: 700;
+  box-shadow: 0 0 0 2px var(--primary-light);
 }
 
 .cal-week-cell.selected {
-  font-weight: 600;
-  border-color: var(--primary-dark);
-  background: #DDE3FD;
-  color: var(--primary-dark);
+  background: var(--primary);
+  color: #FFF;
+  border-color: var(--primary);
+}
+.cal-week-cell.selected .wk-dot { background: #FFF; }
+
+/* 月份标识 */
+.cal-week-cell.month-start::before {
+  content: attr(data-month);
+  position: absolute;
+  top: -10px;
+  left: 0;
+  font-size: 9px;
+  color: var(--text-muted);
+  font-weight: 400;
 }
 
 /* 保留旧 cal-cell 样式（由月历代码生成，但现已不使用） */