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 样式(由月历代码生成,但现已不使用) */