v2.1.5 — 退出改为点击头像弹出下拉菜单

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,35 +146,51 @@
     renderCalendar();
   };
 
-  /** 渲染周历 */
+  /** 切换月份 */
+  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) {
-    // 推进到第一个周一
+      weeks.push(fmtWeek(monday));
-    d.setDate(d.getDate() - d.getDay() + (d.getDay() === 0 ? -6 : 1));
+      monday.setDate(monday.getDate() + 7);
-    while (d <= yearEnd) {
-      var wk = fmtWeek(d);
-      weeks.push(wk);
-      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 w = weeks[i];
       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 + '">' +
+      wHtml += '<div class="' + cls + '" data-week="' + w + '" title="' + w + '">' +
-        'W' + w.split('-W')[1] + '</div>';
+        '第' + w.split('-W')[1].replace(/^0/, '') + '周</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);
@@ -190,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));
   };
 
   /* ================================================================
@@ -441,6 +459,27 @@
     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');
+  };
+
+  /* 头像菜单 */
+  window.toggleUserMenu = function(e) {
+    e.stopPropagation();
+    var dd = document.getElementById('user-dropdown');
+    if (dd) dd.style.display = dd.style.display === 'none' ? 'block' : 'none';
+  };
+  document.addEventListener('click', function() {
+    var dd = document.getElementById('user-dropdown');
+    if (dd) dd.style.display = 'none';
+  });
+
   /* ================================================================
      Load & Auto Save Checkin
      ================================================================ */

static/style.css

@@ -18,7 +18,7 @@
   --radius-sm: 8px;
   --shadow: 0 1px 2px rgba(0,0,0,0.04), 0 2px 8px rgba(74,108,247,0.05);
   --shadow-hover: 0 2px 6px rgba(0,0,0,0.04), 0 6px 18px rgba(74,108,247,0.08);
-  --sidebar-w: 280px;
+  --sidebar-w: 100px;
 }
 
 * { margin:0; padding:0; box-sizing:border-box; }
@@ -66,14 +66,64 @@ body {
 
 .sidebar-user {
   display: flex;
+  flex-direction: column;
   align-items: center;
-  gap: 12px;
+  gap: 8px;
-  padding: 20px 20px 16px;
+  padding: 24px 12px 16px;
+  position: relative;
+  cursor: pointer;
+}
+
+.sidebar-user .user-avatar {
+  transition: transform 0.15s;
+}
+.sidebar-user:hover .user-avatar { transform: scale(1.05); }
+
+.user-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  box-shadow: var(--shadow-hover);
+  z-index: 100;
+  min-width: 120px;
+  padding: 4px;
+}
+.user-dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  font-size: 13px;
+  color: var(--text-dim);
+  text-decoration: none;
+  border-radius: 6px;
+  transition: all 0.15s;
+}
+.user-dropdown-item:hover {
+  background: var(--danger-light);
+  color: var(--danger);
+}
+
+.sidebar-user .user-name {
+  font-size: 12px;
+  text-align: center;
+}
+
+.sidebar-user .btn-logout-icon {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 22px;
+  height: 22px;
 }
 
 .user-avatar {
-  width: 38px;
+  width: 44px;
-  height: 38px;
+  height: 44px;
   border-radius: 50%;
   background: var(--primary);
   color: #FFF;
@@ -131,6 +181,10 @@ body {
   gap: 8px;
   padding: 0 20px 20px;
 }
+.daily-sidebar .sidebar-stats {
+  padding: 0;
+  margin-bottom: 16px;
+}
 
 .stat-item {
   background: var(--bg);
@@ -155,6 +209,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
    ═══════════════════════════════════════════ */
@@ -162,6 +255,73 @@ body {
 .calendar-widget {
   padding: 0 16px 12px;
 }
+.calendar-widget.inline {
+  margin: 0 0 16px;
+  padding: 12px 0;
+  border: 1.5px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--card);
+}
+.calendar-widget.inline .cal-header {
+  padding: 0 14px 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.cal-nav-group { display: flex; gap: 4px; }
+.cal-nav {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--card);
+  cursor: pointer;
+  color: var(--text-dim);
+}
+.cal-nav:hover { background: var(--bg); color: var(--text); }
+/* 月份翻页行 */
+.cal-month-header {
+  padding: 4px 14px 8px;
+}
+.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;
@@ -209,14 +369,15 @@ body {
 
 .cal-week-list {
   display: grid;
-  grid-template-columns: repeat(8, 1fr);
+  grid-template-columns: repeat(4, 1fr);
-  gap: 3px;
+  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 +386,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 +398,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;
+  background: var(--primary);
-  border-color: var(--primary-dark);
+  color: #FFF;
-  background: #DDE3FD;
+  border-color: var(--primary);
-  color: var(--primary-dark);
+}
+.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 样式（由月历代码生成，但现已不使用） */
@@ -332,34 +519,45 @@ body {
 
 .nav-item {
   display: flex;
+  flex-direction: column;
   align-items: center;
-  gap: 10px;
+  gap: 4px;
-  padding: 10px 14px;
+  padding: 10px 4px;
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius);
-  font-size: 13px;
+  font-size: 11px;
   font-weight: 500;
   color: var(--text-dim);
   cursor: pointer;
   text-decoration: none;
   transition: all 0.15s;
+  margin-bottom: 4px;
+  text-align: center;
 }
 
+.nav-label { line-height: 1.2; }
+
 .nav-item:hover {
   background: var(--bg);
   color: var(--text);
 }
 
+.nav-item .icon-md {
+  flex-shrink: 0;
+  width: 22px;
+  height: 22px;
+  color: var(--text-muted);
+  transition: color 0.15s;
+}
+.nav-item:hover .icon-md { color: var(--primary); }
+
 .nav-item.active {
   background: var(--primary-light);
   color: var(--primary);
   font-weight: 600;
 }
+.nav-item.active .icon-md { color: var(--primary); }
 
-.nav-item .icon-sm {
+.icon-md { width: 20px; height: 20px; flex-shrink: 0; }
-  flex-shrink: 0;
-  width: 16px;
-  height: 16px;
-}
 
 /* ── Sidebar Footer ── */
 
@@ -452,33 +650,78 @@ body {
 }
 
 /* ═══════════════════════════════════════════
-   Daily Grid — 三栏
+   Daily Panel — 左右两栏布局
    ═══════════════════════════════════════════ */
 
-.daily-grid {
+.daily-layout {
-  display: grid;
+  display: flex;
-  grid-template-columns: 1fr 1fr;
+  gap: 24px;
+  align-items: stretch;
+}
+
+/* 左侧栏 */
+.daily-sidebar {
+  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;
-  margin-bottom: 20px;
 }
 
-/* 立志 — 左上 */
+.daily-tabs {
-.card-morning {
+  display: flex;
-  grid-column: 1;
+  gap: 0;
-  grid-row: 1;
+  border-bottom: 1.5px solid var(--border);
 }
+.daily-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 18px;
+  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:hover { color: var(--text); }
+.daily-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
 
-/* 改过 — 左下 */
+.daily-grid { display: block; }
-.card-evening {
+.card.daily-card { display: none; }
-  grid-column: 1;
+.card.daily-card.active { display: flex; }
-  grid-row: 2;
-}
-
-/* 勤学 — 右列跨2行 */
-.card-study {
-  grid-column: 2;
-  grid-row: 1 / 3;
-}
 
 /* ── Cards ── */
 
@@ -1401,11 +1644,9 @@ body {
    ═══════════════════════════════════════════ */
 
 @media (max-width: 900px) {
-  .sidebar { width: 240px; min-width: 240px; }
   :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

@@ -40,83 +40,39 @@
   <aside class="sidebar">
 
     <!-- 用户信息 -->
-    <div class="sidebar-user">
+    <div class="sidebar-user" id="sidebar-user-menu" onclick="toggleUserMenu(event)">
       <div class="user-avatar">{{ username[0] }}</div>
-      <div class="user-info">
+      <span class="user-name">{{ username }}</span>
-        <span class="user-name">{{ username }}</span>
+      <div class="user-dropdown" id="user-dropdown" style="display:none">
-        <span class="user-tag">道阁 · 紫微</span>
+        <a class="user-dropdown-item" href="/logout" onclick="return confirm('确定退出登录？')">
-      </div>
+          <svg class="icon-sm"><use href="#icon-logout"/></svg> 退出登录
-      <a href="/logout" class="btn-logout-icon" title="退出登录" onclick="return confirm('确定退出登录？')">
+        </a>
-        <svg class="icon-sm"><use href="#icon-logout"/></svg>
-      </a>
-    </div>
-
-    <!-- 统计信息 -->
-    <div class="sidebar-stats" id="sidebar-stats">
-      <div class="stat-item">
-        <span class="stat-num" id="stat-days">--</span>
-        <span class="stat-label">打卡周</span>
-      </div>
-      <div class="stat-item">
-        <span class="stat-num" id="stat-morning">--</span>
-        <span class="stat-label">立志</span>
-      </div>
-      <div class="stat-item">
-        <span class="stat-num" id="stat-study">--</span>
-        <span class="stat-label">勤学</span>
-      </div>
-    </div>
-
-    <!-- 日历（周视图） -->
-    <div class="calendar-widget">
-      <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>
-        <button class="cal-nav" onclick="changeCalYear(1)">
-          <svg class="icon-sm"><use href="#icon-chevron-right"/></svg>
-        </button>
-      </div>
-      <div class="cal-week-list" id="cal-week-list"></div>
-      <div class="cal-legend">
-        <span class="legend-dot pass"></span> 达标
-        <span class="legend-dot fail"></span> 未达标
-        <span class="legend-dot empty"></span> 未打卡
       </div>
     </div>
 
     <!-- 功能入口 -->
     <nav class="sidebar-nav">
       <a class="nav-item active" data-panel="daily" onclick="switchPanel('daily')">
-        <svg class="icon-sm"><use href="#icon-calendar"/></svg>
+        <svg class="icon-md"><use href="#icon-calendar"/></svg>
-        每周打卡
+        <span class="nav-label">打卡</span>
       </a>
       <a class="nav-item" data-panel="weekly" onclick="switchPanel('weekly')">
-        <svg class="icon-sm"><use href="#icon-chart-bar"/></svg>
+        <svg class="icon-md"><use href="#icon-chart-bar"/></svg>
-        每周评分
+        <span class="nav-label">评分</span>
       </a>
       <a class="nav-item" data-panel="wishes" onclick="switchPanel('wishes')">
-        <svg class="icon-sm"><use href="#icon-star"/></svg>
+        <svg class="icon-md"><use href="#icon-star"/></svg>
-        心愿清单
+        <span class="nav-label">心愿</span>
       </a>
       <a class="nav-item" data-panel="history" onclick="switchPanel('history')">
-        <svg class="icon-sm"><use href="#icon-list-bullet"/></svg>
+        <svg class="icon-md"><use href="#icon-list-bullet"/></svg>
-        历史记录
+        <span class="nav-label">记录</span>
       </a>
       <a class="nav-item" data-panel="blueprint" onclick="switchPanel('blueprint')">
-        <svg class="icon-sm"><use href="#icon-sun"/></svg>
+        <svg class="icon-md"><use href="#icon-sun"/></svg>
-        人生蓝图
+        <span class="nav-label">蓝图</span>
       </a>
     </nav>
-
-    <!-- 底部新建按钮 -->
-    <div class="sidebar-footer">
-      <button class="btn-new-day" onclick="goToCurrentWeek()">
-        <svg class="icon-sm"><use href="#icon-sun"/></svg>
-        回到本周
-      </button>
-    </div>
   </aside>
 
   <!-- ═══ 右侧主内容区 ═══ -->
@@ -133,8 +89,60 @@
           </button>
         </div>
       </div>
-      <div class="daily-grid">
+      <div class="daily-layout">
-        <div class="card card-morning">
+        <!-- 左侧：统计 + 日历 -->
+        <div class="daily-sidebar">
+          <div class="sidebar-stats" id="sidebar-stats">
+            <div class="stat-item">
+              <span class="stat-num" id="stat-days">--</span>
+              <span class="stat-label">打卡周</span>
+            </div>
+            <div class="stat-item">
+              <span class="stat-num" id="stat-morning">--</span>
+              <span class="stat-label">立志</span>
+            </div>
+            <div class="stat-item">
+              <span class="stat-num" id="stat-study">--</span>
+              <span class="stat-label">勤学</span>
+            </div>
+          </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>
+              <button class="cal-nav" onclick="changeCalYear(1)">
+                <svg class="icon-sm"><use href="#icon-chevron-right"/></svg>
+              </button>
+            </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 + 内容 -->
+        <div class="daily-main">
+          <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 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 +158,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 +174,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>
@@ -175,6 +183,8 @@
           <div id="study-list"></div>
         </div>
       </div>
+        </div><!-- /daily-main -->
+      </div><!-- /daily-layout -->
     </section>
 
     <!-- ── 每周评分面板 ── -->