v2.0.2 — 每周打卡三卡片改为Tab切换

static/app.js

@@ -441,6 +441,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

@@ -456,29 +456,38 @@ body {
    ═══════════════════════════════════════════ */
 
 .daily-grid {
-  display: grid;
+  display: block;
-  grid-template-columns: 1fr 1fr;
-  gap: 16px;
-  margin-bottom: 20px;
 }
+.daily-card { display: none; }
+.daily-card.active { display: block; }
 
-/* 立志 — 左上 */
+/* 每周打卡 Tab */
-.card-morning {
+.daily-tabs {
-  grid-column: 1;
+  display: flex;
-  grid-row: 1;
+  gap: 4px;
+  margin-bottom: 16px;
+  border-bottom: 1.5px solid var(--border);
 }
-
+.daily-tab {
-/* 改过 — 左下 */
+  display: inline-flex;
-.card-evening {
+  align-items: center;
-  grid-column: 1;
+  gap: 5px;
-  grid-row: 2;
+  padding: 8px 16px;
-}
+  border: none;
-
+  background: none;
-/* 勤学 — 右列跨2行 */
+  font-size: 13px;
-.card-study {
+  font-weight: 500;
-  grid-column: 2;
+  color: var(--text-dim);
-  grid-row: 1 / 3;
+  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 +1414,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>