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

static/app.js

@@ -146,28 +146,18 @@
     renderCalendar();
   };
 
-  /** 选择月份 */
-  window.selectCalMonth = function(mIdx) {
-    calMonth = mIdx;
+  /** 切换月份 */
+  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 monthsList = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
-    var today = new Date();
-    var todayMonth = today.getFullYear() === calYear ? today.getMonth() : -1;
-    var mHtml = '';
-    for (var i = 0; i < 12; i++) {
-      var mc = 'cal-month-btn';
-      if (i === calMonth) mc += ' active';
-      if (i === todayMonth) mc += ' today';
-      mHtml += '<button class="' + mc + '" onclick="selectCalMonth(' + i + ')">' + monthsList[i] + '</button>';
-    }
-    document.getElementById('cal-months').innerHTML = mHtml;
+    document.getElementById('cal-month-label').textContent = (calMonth + 1) + '月';
 
     // 计算该月包含的周
     var firstDay = new Date(calYear, calMonth, 1);
@@ -196,7 +186,7 @@
       if (w === todayWk) cls += ' today';
       if (w === selectedWeek) cls += ' selected';
       wHtml += '<div class="' + cls + '" data-week="' + w + '" title="' + w + '">' +
-        'W' + w.split('-W')[1].replace(/^0/, '') + '</div>';
+        '第' + w.split('-W')[1].replace(/^0/, '') + '周</div>';
     }
     var we = document.getElementById('cal-weeks');
     we.innerHTML = wHtml;

static/style.css

@@ -174,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
    ═══════════════════════════════════════════ */
@@ -208,41 +247,25 @@ body {
   color: var(--text-dim);
 }
 .cal-nav:hover { background: var(--bg); color: var(--text); }
-/* 月份按钮 */
-.cal-months {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 3px;
-  padding: 0 14px 8px;
+/* 月份翻页行 */
+.cal-month-header {
+  padding: 4px 14px 8px;
 }
-.cal-month-btn {
-  padding: 4px 0;
-  border: 1px solid transparent;
-  border-radius: 6px;
-  background: var(--card);
-  font-size: 11px;
-  font-weight: 500;
-  color: var(--text-dim);
-  cursor: pointer;
-  text-align: center;
-  transition: all 0.15s;
-  font-family: inherit;
+.cal-month-header .cal-month-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text);
 }
-.cal-month-btn:hover { border-color: var(--border); color: var(--text); }
-.cal-month-btn.active { background: var(--primary); color: #FFF; }
-.cal-month-btn.today { border-color: var(--primary); }
-.cal-month-btn.today:not(.active) { color: var(--primary); }
 
 /* 周选择 */
 .cal-weeks {
-  display: flex;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
   gap: 8px;
   padding: 8px 14px 10px;
-  justify-content: center;
 }
 .cal-week-cell {
-  width: 44px;
-  height: 44px;
+  height: 42px;
   display: flex;
   align-items: center;
   justify-content: center;

templates/index.html

@@ -114,7 +114,15 @@
                 <svg class="icon-sm"><use href="#icon-chevron-right"/></svg>
               </button>
             </div>
-            <div class="cal-months" id="cal-months"></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>