diff --git a/static/app.js b/static/app.js
index dbab48c..54aa29f 100644
--- a/static/app.js
+++ b/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 += '
' +
- 'W' + w.split('-W')[1] + '
';
+ if (we.monthLabel) cls += ' month-start';
+ var wkNum = w.split('-W')[1].replace(/^0/, '');
+ html += '' +
+ 'W' + wkNum + '' +
+ '' +
+ '
';
}
el.innerHTML = html;
el.querySelectorAll('.cal-week-cell').forEach(function(cell) {
diff --git a/static/style.css b/static/style.css
index 0166e3b..69401f5 100644
--- a/static/style.css
+++ b/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 样式(由月历代码生成,但现已不使用) */