v2.1.4 — 侧边栏深色主题：深蓝渐变背景+蓝色图标+浅灰文字

static/app.js

@@ -6,7 +6,8 @@
      State
      ================================================================ */
   var calendarStatus = {};    // { "2026-W30": "pass", ... }
-  var calYear;               // 日历显示的年
+  var calYear;
+  var calMonth = new Date().getMonth(); // 月份索引 0-11
   var activePanel = 'daily';
   var weekOffset = 0;
   var lastSavedData = null;
@@ -145,45 +146,51 @@
     renderCalendar();
   };
 
-  /** 渲染周历（4周一行 + 月份分组） */
+  /** 切换月份 */
+  window.changeCalMonth = function(dir) {
+    calMonth += dir;
+    if (calMonth > 11) { calMonth = 0; calYear++; }
+    if (calMonth < 0) { calMonth = 11; calYear--; }
+    renderCalendar();
+  };
+
+  /** 渲染年-月-周选择器 */
   function renderCalendar() {
     document.getElementById('cal-year-label').textContent = calYear + '年';
-    var yearStart = new Date(calYear, 0, 1);
+    document.getElementById('cal-month-label').textContent = (calMonth + 1) + '月';
-    var yearEnd = new Date(calYear, 11, 31);
+
+    // 计算该月包含的周
+    var firstDay = new Date(calYear, calMonth, 1);
+    var lastDay = new Date(calYear, calMonth + 1, 0);
+    var monday = new Date(firstDay);
+    monday.setDate(monday.getDate() - monday.getDay() + (monday.getDay() === 0 ? -6 : 1));
     var weeks = [];
-    var d = new Date(yearStart);
+    while (monday <= lastDay) {
-    d.setDate(d.getDate() - d.getDay() + (d.getDay() === 0 ? -6 : 1));
+      weeks.push(fmtWeek(monday));
-    var lastMonth = -1;
+      monday.setDate(monday.getDate() + 7);
-    var monthsList = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
-    while (d <= yearEnd) {
-      var wk = fmtWeek(d);
-      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);
     }
+    // 确保至少有4周显示
+    while (weeks.length < 4) {
+      var w = fmtWeek(monday);
+      if (weeks.indexOf(w) < 0) weeks.push(w);
+      monday.setDate(monday.getDate() + 7);
+    }
+
     var todayWk = fmtWeek(new Date());
-    var el = document.getElementById('cal-week-list');
+    var wHtml = '';
-    var html = '';
+    for (var i2 = 0; i2 < weeks.length; i2++) {
-    for (var i = 0; i < weeks.length; i++) {
+      var w = weeks[i2];
-      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';
-      if (we.monthLabel) cls += ' month-start';
+      wHtml += '<div class="' + cls + '" data-week="' + w + '" title="' + w + '">' +
-      var wkNum = w.split('-W')[1].replace(/^0/, '');
+        '第' + w.split('-W')[1].replace(/^0/, '') + '周</div>';
-      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;
+    var we = document.getElementById('cal-weeks');
-    el.querySelectorAll('.cal-week-cell').forEach(function(cell) {
+    we.innerHTML = wHtml;
+    we.querySelectorAll('.cal-week-cell').forEach(function(cell) {
       cell.addEventListener('click', function() {
         var wk = this.dataset.week;
         if (wk) navigateToWeek(wk);
@@ -200,10 +207,11 @@
   }
 
   window.goToCurrentWeek = function() {
-    var now = fmtWeek(new Date());
+    var now = new Date();
-    calYear = new Date().getFullYear();
+    calYear = now.getFullYear();
+    calMonth = now.getMonth();
     renderCalendar();
-    navigateToWeek(now);
+    navigateToWeek(fmtWeek(now));
   };
 
   /* ================================================================

static/style.css

@@ -146,6 +146,10 @@ body {
   gap: 8px;
   padding: 0 20px 20px;
 }
+.daily-sidebar .sidebar-stats {
+  padding: 0;
+  margin-bottom: 16px;
+}
 
 .stat-item {
   background: var(--bg);
@@ -170,6 +174,45 @@ body {
   font-weight: 400;
 }
 
+/* ═══════════════════════════════════════════
+   Sidebar Dark Theme（左侧导航栏专属）
+   ═══════════════════════════════════════════ */
+.sidebar {
+  background: linear-gradient(180deg, #1E293B 0%, #0F172A 100%);
+  border-right: 1px solid #334155;
+}
+.sidebar .user-name {
+  color: #94A3B8;
+}
+.sidebar .user-avatar {
+  background: #4F46E5;
+  color: #FFF;
+}
+.sidebar .btn-logout-icon {
+  color: #64748B;
+}
+.sidebar .btn-logout-icon:hover {
+  background: rgba(248,113,113,0.15);
+  color: #FCA5A5;
+}
+.sidebar .nav-item {
+  color: #94A3B8;
+}
+.sidebar .nav-item:hover {
+  background: rgba(99,102,241,0.08);
+  color: #E2E8F0;
+}
+.sidebar .nav-item .icon-md {
+  color: #6366F1;
+}
+.sidebar .nav-item:hover .icon-md { color: #818CF8; }
+.sidebar .nav-item.active {
+  background: rgba(99,102,241,0.15);
+  color: #FFF;
+  border: 1px solid rgba(99,102,241,0.3);
+}
+.sidebar .nav-item.active .icon-md { color: #818CF8; }
+
 /* ═══════════════════════════════════════════
    Calendar Widget
    ═══════════════════════════════════════════ */
@@ -204,12 +247,46 @@ body {
   color: var(--text-dim);
 }
 .cal-nav:hover { background: var(--bg); color: var(--text); }
-.cal-week-list {
+/* 月份翻页行 */
-  display: grid;
+.cal-month-header {
-  grid-template-columns: repeat(4, 1fr);
+  padding: 4px 14px 8px;
-  gap: 6px 4px;
-  padding: 0 14px;
 }
+.cal-month-header .cal-month-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text);
+}
+
+/* 周选择 */
+.cal-weeks {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 8px;
+  padding: 8px 14px 10px;
+}
+.cal-week-cell {
+  height: 42px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  font-weight: 600;
+  border-radius: 8px;
+  color: var(--text-dim);
+  cursor: pointer;
+  transition: all 0.15s;
+  border: 1.5px solid var(--border);
+  background: var(--card);
+}
+.cal-week-cell:hover { border-color: var(--primary); color: var(--primary); }
+.cal-week-cell.pass { background: var(--success-light); border-color: var(--success); color: var(--success); }
+.cal-week-cell.fail { background: var(--danger-light); border-color: var(--danger); color: var(--danger); }
+.cal-week-cell.today { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-light); }
+.cal-week-cell.selected { background: var(--primary); color: #FFF; border-color: var(--primary); }
+
+/* 旧样式清理 */
+.cal-week-list { display: none; }
+.cal-week-cell .wk-num, .cal-week-cell .wk-dot { display: none; }
 
 .cal-header {
   display: flex;
@@ -538,54 +615,61 @@ body {
 }
 
 /* ═══════════════════════════════════════════
-   Daily Grid — 左右两栏
+   Daily Panel — 左右两栏布局
    ═══════════════════════════════════════════ */
 
 .daily-layout {
   display: flex;
-  gap: 20px;
+  gap: 24px;
-  align-items: flex-start;
+  align-items: stretch;
 }
 
+/* 左侧栏 */
 .daily-sidebar {
-  width: 220px;
+  width: 200px;
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
+  gap: 0;
+}
+
+.daily-sidebar .sidebar-stats {
+  padding: 0;
+  margin-bottom: 16px;
+}
+
+.daily-sidebar .stat-item {
+  background: var(--card);
+  border: 1px solid var(--border);
+}
+
+.daily-sidebar .calendar-widget.inline {
+  margin: 0;
+  padding: 14px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--card);
+}
+
+/* 右侧主区 */
+.daily-main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
   gap: 16px;
 }
 
-.daily-sidebar .sidebar-stats {
-  padding: 0;
-}
-
-.daily-sidebar .calendar-widget.inline {
-  margin: 0;
-}
-
-.daily-main {
-  flex: 1;
-  min-width: 0;
-}
-
-.daily-grid {
-  display: block;
-}
-.card.daily-card { display: none; }
-.card.daily-card.active { display: flex; }
-
-/* 每周打卡 Tab */
 .daily-tabs {
   display: flex;
-  gap: 4px;
+  gap: 0;
-  margin-bottom: 16px;
   border-bottom: 1.5px solid var(--border);
 }
 .daily-tab {
   display: inline-flex;
   align-items: center;
-  gap: 5px;
+  gap: 6px;
-  padding: 8px 16px;
+  padding: 8px 18px;
   border: none;
   background: none;
   font-size: 13px;
@@ -597,10 +681,12 @@ body {
   transition: all 0.15s;
   font-family: inherit;
 }
-.daily-tab .icon-sm { opacity: 0.6; }
 .daily-tab:hover { color: var(--text); }
 .daily-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
-.daily-tab.active .icon-sm { opacity: 1; }
+
+.daily-grid { display: block; }
+.card.daily-card { display: none; }
+.card.daily-card.active { display: flex; }
 
 /* ── Cards ── */
 

templates/index.html

@@ -106,17 +106,24 @@
           </div>
           <div class="calendar-widget inline">
             <div class="cal-header">
+              <button class="cal-nav" onclick="changeCalYear(-1)">
+                <svg class="icon-sm"><use href="#icon-chevron-left"/></svg>
+              </button>
               <span class="cal-month-label" id="cal-year-label">2026年</span>
-              <div class="cal-nav-group">
+              <button class="cal-nav" onclick="changeCalYear(1)">
-                <button class="cal-nav" onclick="changeCalYear(-1)">
+                <svg class="icon-sm"><use href="#icon-chevron-right"/></svg>
-                  <svg class="icon-sm"><use href="#icon-chevron-left"/></svg>
+              </button>
-                </button>
-                <button class="cal-nav" onclick="changeCalYear(1)">
-                  <svg class="icon-sm"><use href="#icon-chevron-right"/></svg>
-                </button>
-              </div>
             </div>
-            <div class="cal-week-list" id="cal-week-list"></div>
+            <div class="cal-header cal-month-header">
+              <button class="cal-nav" onclick="changeCalMonth(-1)">
+                <svg class="icon-sm"><use href="#icon-chevron-left"/></svg>
+              </button>
+              <span class="cal-month-label" id="cal-month-label">7月</span>
+              <button class="cal-nav" onclick="changeCalMonth(1)">
+                <svg class="icon-sm"><use href="#icon-chevron-right"/></svg>
+              </button>
+            </div>
+            <div class="cal-weeks" id="cal-weeks"></div>
           </div>
         </div>
         <!-- 右侧：Tab + 内容 -->