v2.0.5 — 侧边栏菜单美化：大图标+蓝色激活态

database.py

@@ -224,3 +224,90 @@ def reorder_wishes(order_list):
         conn.execute('UPDATE wishes SET sort_order = ? WHERE id = ?', (idx, wid))
     conn.commit()
     conn.close()
+
+
+def get_weeks_list():
+    """返回所有已有打卡记录的周号列表"""
+    conn = get_conn()
+    rows = conn.execute('SELECT DISTINCT date FROM checkins ORDER BY date').fetchall()
+    conn.close()
+    return [r['date'] for r in rows]
+
+
+def get_daily_backup(week_str):
+    """获取某周的原始日记录（从备份表）"""
+    from datetime import datetime as _dt, timedelta
+    if '-W' not in week_str:
+        return []
+    year_part, week_part = week_str.split('-W')
+    try:
+        year = int(year_part)
+        week = int(week_part)
+    except (ValueError, IndexError):
+        return []
+    jan1 = _dt(year, 1, 1)
+    delta = timedelta(days=(week - 1) * 7 - jan1.weekday())
+    monday = jan1 + delta
+    dates = [monday.strftime('%Y-%m-%d')]
+    for i in range(1, 7):
+        dates.append((monday + timedelta(days=i)).strftime('%Y-%m-%d'))
+    conn = get_conn()
+    placeholders = ','.join('?' for _ in dates)
+    exists = conn.execute("SELECT name FROM sqlite_master WHERE type='table' AND name='checkins_daily_backup'").fetchone()
+    if not exists:
+        conn.close()
+        return []
+    rows = conn.execute(
+        f"SELECT date, data FROM checkins_daily_backup WHERE date IN ({placeholders}) ORDER BY date",
+        dates
+    ).fetchall()
+    conn.close()
+    results = []
+    for row in rows:
+        results.append({'date': row['date'], 'data': json.loads(row['data'])})
+    return results
+
+
+def _aggregate_daily_to_weekly(conn):
+    """将 checkins_daily_backup 的日数据聚合为周数据，写入 checkins"""
+    from datetime import datetime as _dt
+    rows = conn.execute('SELECT date, data FROM checkins_daily_backup ORDER BY date').fetchall()
+    weekly = {}
+    for row in rows:
+        try:
+            d = _dt.strptime(row['date'], '%Y-%m-%d')
+        except ValueError:
+            continue
+        iso_year, iso_week, _ = d.isocalendar()
+        week_key = f"{iso_year}-W{iso_week:02d}"
+        if week_key not in weekly:
+            weekly[week_key] = {'morning': [], 'evening': [], 'study': []}
+        data = json.loads(row['data'])
+        for mi in data.get('morning', []):
+            text = mi if isinstance(mi, str) else mi.get('text', '')
+            if text:
+                existing_texts = {x if isinstance(x, str) else x.get('text', '') for x in weekly[week_key]['morning']}
+                if text not in existing_texts:
+                    weekly[week_key]['morning'].append(mi)
+        for ei in data.get('evening', []):
+            mst = ei.get('mistake', '') if isinstance(ei, dict) else ''
+            if mst:
+                existing = {x.get('mistake', '') if isinstance(x, dict) else x for x in weekly[week_key]['evening']}
+                if mst not in existing:
+                    weekly[week_key]['evening'].append(ei if isinstance(ei, dict) else {'mistake': ei, 'improvement': ''})
+        existing_names = {}
+        for si in weekly[week_key]['study']:
+            nm = si.get('name', '') if isinstance(si, dict) else str(si)
+            if nm:
+                existing_names[nm] = si
+        for si in data.get('study', []):
+            nm = si.get('name', '') if isinstance(si, dict) else str(si)
+            if nm and nm not in existing_names:
+                weekly[week_key]['study'].append(si)
+                existing_names[nm] = si
+    now = _dt.now().isoformat()
+    for week_key in sorted(weekly.keys()):
+        conn.execute(
+            'INSERT INTO checkins (date, data, created_at, updated_at) VALUES (?, ?, ?, ?)',
+            (week_key, json.dumps(weekly[week_key], ensure_ascii=False), now, now)
+        )

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) {
@@ -441,6 +451,16 @@
     btn.classList.toggle('active', editing);
   };
 
+  /* 切换每周打卡 Tab */
+  window.switchDailyTab = function(btn) {
+    var tab = btn.dataset.tab;
+    document.querySelectorAll('.daily-tab').forEach(function(t){ t.classList.remove('active'); });
+    btn.classList.add('active');
+    document.querySelectorAll('.daily-card').forEach(function(c){ c.classList.remove('active'); });
+    var card = document.querySelector('.daily-card[data-card="' + tab + '"]');
+    if (card) card.classList.add('active');
+  };
+
   /* ================================================================
      Load & Auto Save Checkin
      ================================================================ */

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 样式（由月历代码生成，但现已不使用） */
@@ -333,15 +360,16 @@ body {
 .nav-item {
   display: flex;
   align-items: center;
-  gap: 10px;
-  padding: 10px 14px;
-  border-radius: var(--radius-sm);
-  font-size: 13px;
+  gap: 14px;
+  padding: 12px 16px;
+  border-radius: var(--radius);
+  font-size: 14px;
   font-weight: 500;
   color: var(--text-dim);
   cursor: pointer;
   text-decoration: none;
   transition: all 0.15s;
+  margin-bottom: 2px;
 }
 
 .nav-item:hover {
@@ -349,17 +377,21 @@ body {
   color: var(--text);
 }
 
+.nav-item .icon-sm {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  color: var(--text-muted);
+  transition: color 0.15s;
+}
+.nav-item:hover .icon-sm { color: var(--primary); }
+
 .nav-item.active {
   background: var(--primary-light);
   color: var(--primary);
   font-weight: 600;
 }
-
-.nav-item .icon-sm {
-  flex-shrink: 0;
-  width: 16px;
-  height: 16px;
-}
+.nav-item.active .icon-sm { color: var(--primary); }
 
 /* ── Sidebar Footer ── */
 
@@ -456,29 +488,38 @@ body {
    ═══════════════════════════════════════════ */
 
 .daily-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 16px;
-  margin-bottom: 20px;
+  display: block;
 }
+.card.daily-card { display: none; }
+.card.daily-card.active { display: flex; }
 
-/* 立志 — 左上 */
-.card-morning {
-  grid-column: 1;
-  grid-row: 1;
+/* 每周打卡 Tab */
+.daily-tabs {
+  display: flex;
+  gap: 4px;
+  margin-bottom: 16px;
+  border-bottom: 1.5px solid var(--border);
 }
-
-/* 改过 — 左下 */
-.card-evening {
-  grid-column: 1;
-  grid-row: 2;
-}
-
-/* 勤学 — 右列跨2行 */
-.card-study {
-  grid-column: 2;
-  grid-row: 1 / 3;
+.daily-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 8px 16px;
+  border: none;
+  background: none;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-dim);
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1.5px;
+  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; }
 
 /* ── Cards ── */
 
@@ -1405,7 +1446,6 @@ body {
   :root { --sidebar-w: 240px; }
   .main-content { padding: 20px 24px; }
   .daily-grid { grid-template-columns: 1fr; }
-  .card-morning, .card-evening, .card-study { grid-column: 1; grid-row: auto; }
   .weekly-overview { flex-direction: column; gap: 16px; text-align: center; }
   .week-days-grid { grid-template-columns: repeat(4, 1fr); }
   .history-grid { grid-template-columns: 1fr; }

templates/index.html

@@ -133,8 +133,19 @@
           </button>
         </div>
       </div>
+      <div class="daily-tabs">
+        <button class="daily-tab active" data-tab="morning" onclick="switchDailyTab(this)">
+          <svg class="icon-sm"><use href="#icon-sun"/></svg> 早间立志
+        </button>
+        <button class="daily-tab" data-tab="evening" onclick="switchDailyTab(this)">
+          <svg class="icon-sm"><use href="#icon-magnifying-glass"/></svg> 责善改过
+        </button>
+        <button class="daily-tab" data-tab="study" onclick="switchDailyTab(this)">
+          <svg class="icon-sm"><use href="#icon-book-open"/></svg> 勤学打卡
+        </button>
+      </div>
       <div class="daily-grid">
-        <div class="card card-morning">
+        <div class="card card-morning daily-card active" data-card="morning">
           <div class="card-head">
             <div class="card-head-left">
               <svg class="icon-h2"><use href="#icon-sun"/></svg>
@@ -150,7 +161,7 @@
             <svg class="icon-sm"><use href="#icon-plus"/></svg> 增加一条
           </button>
         </div>
-        <div class="card card-evening">
+        <div class="card card-evening daily-card" data-card="evening">
           <div class="card-head">
             <div class="card-head-left">
               <svg class="icon-h2"><use href="#icon-magnifying-glass"/></svg>
@@ -166,7 +177,7 @@
             <svg class="icon-sm"><use href="#icon-plus"/></svg> 增加一条
           </button>
         </div>
-        <div class="card card-study">
+        <div class="card card-study daily-card" data-card="study">
           <div class="card-head">
             <svg class="icon-h2"><use href="#icon-book-open"/></svg>
             <h3>勤学打卡</h3>