v1.1.1 — 心愿清单移至独立面板

- 从侧边栏移出，改为左侧菜单入口 → 独立页面
- 卡片式布局，对齐每周评分等面板风格
- 拖拽排序、完成勾选、编辑模式切换功能不变

static/app.js

@@ -105,6 +105,7 @@
 
     if (name === 'weekly') loadWeekly();
     if (name === 'history') loadHistory();
+    if (name === 'wishes') loadWishes();
   };
 
   /* ================================================================
@@ -639,17 +640,20 @@
      ================================================================ */
   var wishes = [];
   var dragSourceId = null;
+  var wishesLoaded = false;
 
   function loadWishes() {
+    if (wishesLoaded) { renderWishes(); return; }
     // 优先使用页面嵌入数据
     if (window.__INITIAL_WISHES__) {
       wishes = window.__INITIAL_WISHES__;
+      wishesLoaded = true;
       renderWishes();
       return;
     }
     fetch('/api/wishes')
       .then(function(r){ return r.json(); })
-      .then(function(res){ if (res.ok) { wishes = res.data; renderWishes(); } });
+      .then(function(res){ if (res.ok) { wishes = res.data; wishesLoaded = true; renderWishes(); } });
   }
 
   function renderWishes() {
@@ -786,7 +790,7 @@
   };
 
   window.toggleWishesEdit = function(btn) {
-    var panel = document.getElementById('wishes-panel');
+    var panel = document.getElementById('panel-wishes');
     if (!panel) return;
     var editing = panel.classList.toggle('editing');
     btn.classList.toggle('active', editing);
@@ -807,7 +811,6 @@
     selectedDate = todayStr;
     initStudyPresets();
     bindAutoSave();
-    loadWishes();
     lastSavedDate = todayStr;
 
     // 从页面嵌入数据获取初始统计（0 延迟）

static/style.css

@@ -1084,76 +1084,55 @@ body {
    Wishes Panel
    ═══════════════════════════════════════════ */
 
-.wishes-panel {
+#panel-wishes.editing .edit-only { display: inline-flex; }
-  padding: 0 16px 10px;
+#panel-wishes.editing .wish-del { display: inline-flex; }
-}
-.wishes-panel.editing .edit-only { display: flex; }
-.wishes-panel.editing .wish-del { display: inline-flex; }
-
-.wishes-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text);
-  margin-bottom: 8px;
-}
-
-.wishes-add-btn {
-  display: none;
-  align-items: center;
-  justify-content: center;
-  width: 22px;
-  height: 22px;
-  border: none;
-  background: var(--primary-light);
-  color: var(--primary);
-  border-radius: 6px;
-  cursor: pointer;
-  margin-left: auto;
-  transition: background 0.2s;
-}
-.wishes-add-btn:hover { background: #DDE3FD; }
-.wishes-panel.editing .wishes-add-btn { display: flex; }
 
 .wish-form {
   background: var(--bg);
   border-radius: var(--radius-sm);
-  padding: 8px;
+  padding: 10px 12px;
-  margin-bottom: 8px;
+  margin-bottom: 12px;
+  max-width: 480px;
 }
 .wish-form input[type="text"],
 .wish-form input[type="date"],
 .wish-form select {
   width: 100%;
-  padding: 6px 8px;
+  padding: 8px 10px;
-  border: 1px solid var(--border);
+  border: 1.5px solid var(--border);
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
-  font-size: 12px;
+  font-size: 13px;
   font-family: inherit;
   color: var(--text);
-  margin-bottom: 6px;
+  margin-bottom: 8px;
   box-sizing: border-box;
+  background: var(--card);
+}
+.wish-form input[type="text"]:focus,
+.wish-form input[type="date"]:focus,
+.wish-form select:focus {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(74,108,247,0.08);
 }
 .wish-form-row {
   display: flex;
-  gap: 6px;
+  gap: 8px;
 }
 .wish-form-row select,
 .wish-form-row input { flex: 1; }
 .wish-form-actions {
   display: flex;
-  gap: 6px;
+  gap: 8px;
 }
 .btn-wish-save {
   flex: 1;
-  padding: 6px;
+  padding: 8px;
   border: none;
   background: var(--primary);
   color: #FFF;
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
-  font-size: 12px;
+  font-size: 13px;
   font-weight: 500;
   cursor: pointer;
   font-family: inherit;
@@ -1161,43 +1140,50 @@ body {
 .btn-wish-save:hover { background: var(--primary-dark); }
 .btn-wish-cancel {
   flex: 1;
-  padding: 6px;
+  padding: 8px;
-  border: 1px solid var(--border);
+  border: 1.5px solid var(--border);
   background: var(--card);
   color: var(--text-dim);
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
-  font-size: 12px;
+  font-size: 13px;
   cursor: pointer;
   font-family: inherit;
 }
 
+.wishes-grid {
+  max-width: 640px;
+}
+
 .wishes-list {
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: 4px;
-  max-height: 240px;
-  overflow-y: auto;
 }
 
 .wishes-empty {
-  font-size: 11px;
+  font-size: 13px;
   color: var(--text-muted);
   text-align: center;
-  padding: 12px 0;
+  padding: 32px 0;
 }
 
 .wish-item {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 10px;
-  padding: 5px 6px;
+  padding: 10px 12px;
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
-  transition: background 0.15s;
+  background: var(--card);
-  cursor: default;
+  border: 0.5px solid var(--border);
+  box-shadow: var(--shadow);
+  transition: background 0.15s, box-shadow 0.15s;
 }
-.wish-item:hover { background: var(--bg); }
+.wish-item:hover { box-shadow: var(--shadow-hover); }
 .wish-item.dragging { opacity: 0.4; }
-.wish-item.drag-over { background: var(--primary-light); box-shadow: inset 0 0 0 1.5px var(--primary); }
+.wish-item.drag-over {
+  background: var(--primary-light);
+  box-shadow: inset 0 0 0 2px var(--primary);
+}
 
 .wish-drag-handle {
   color: var(--text-muted);
@@ -1209,8 +1195,8 @@ body {
 .wish-drag-handle:active { cursor: grabbing; }
 
 .wish-check {
-  width: 14px;
+  width: 16px;
-  height: 14px;
+  height: 16px;
   accent-color: var(--success);
   flex-shrink: 0;
   cursor: pointer;
@@ -1218,12 +1204,10 @@ body {
 
 .wish-name {
   flex: 1;
-  font-size: 12px;
+  font-size: 14px;
   color: var(--text);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   min-width: 0;
+  word-break: break-all;
 }
 .wish-item.done .wish-name {
   text-decoration: line-through;
@@ -1231,10 +1215,10 @@ body {
 }
 
 .wish-pri {
-  font-size: 10px;
+  font-size: 11px;
   font-weight: 600;
-  padding: 1px 6px;
+  padding: 2px 8px;
-  border-radius: 8px;
+  border-radius: 10px;
   white-space: nowrap;
   flex-shrink: 0;
 }
@@ -1243,8 +1227,8 @@ body {
 .wish-pri.pri-低 { background: var(--bg); color: var(--text-muted); }
 
 .wish-deadline {
-  font-size: 10px;
+  font-size: 12px;
-  color: var(--text-muted);
+  color: var(--text-dim);
   white-space: nowrap;
   flex-shrink: 0;
 }
@@ -1252,7 +1236,7 @@ body {
 .wish-del {
   display: none;
 }
-.wish-del .icon-xs { width: 12px; height: 12px; }
+.wish-del .icon-xs { width: 14px; height: 14px; }
 
 /* ═══════════════════════════════════════════
    SVG icons helpers

templates/index.html

@@ -68,39 +68,6 @@
       </div>
     </div>
 
-    <!-- 心愿清单 -->
-    <div class="wishes-panel" id="wishes-panel">
-      <div class="wishes-header">
-        <svg class="icon-sm" style="color:var(--primary)"><use href="#icon-star"/></svg>
-        <span>心愿清单</span>
-        <button class="wishes-add-btn edit-only" id="wishes-add-btn" onclick="showWishForm()">
-          <svg class="icon-sm"><use href="#icon-plus"/></svg>
-        </button>
-        <button class="btn-edit-toggle" onclick="toggleWishesEdit(this)" title="编辑">
-          <svg class="icon-sm"><use href="#icon-pencil"/></svg>
-        </button>
-      </div>
-      <!-- 新增表单 -->
-      <div class="wish-form" id="wish-form" style="display:none">
-        <input type="text" id="wish-name" placeholder="心愿名称…" maxlength="50">
-        <div class="wish-form-row">
-          <select id="wish-priority">
-            <option value="高">高优先</option>
-            <option value="中" selected>中优先</option>
-            <option value="低">低优先</option>
-          </select>
-          <input type="date" id="wish-deadline">
-        </div>
-        <div class="wish-form-actions">
-          <button class="btn-wish-save" onclick="addWish()">添加</button>
-          <button class="btn-wish-cancel" onclick="hideWishForm()">取消</button>
-        </div>
-      </div>
-      <!-- 列表 -->
-      <div class="wishes-list" id="wishes-list"></div>
-      <div class="wishes-empty" id="wishes-empty">暂无心愿，点击 + 添加</div>
-    </div>
-
     <!-- 功能入口 -->
     <nav class="sidebar-nav">
       <a class="nav-item active" data-panel="daily" onclick="switchPanel('daily')">
@@ -111,6 +78,10 @@
         <svg class="icon-sm"><use href="#icon-chart-bar"/></svg>
         每周评分
       </a>
+      <a class="nav-item" data-panel="wishes" onclick="switchPanel('wishes')">
+        <svg class="icon-sm"><use href="#icon-star"/></svg>
+        心愿清单
+      </a>
       <a class="nav-item" data-panel="history" onclick="switchPanel('history')">
         <svg class="icon-sm"><use href="#icon-list-bullet"/></svg>
         历史记录
@@ -222,6 +193,40 @@
       <div id="history-grid" class="history-grid"></div>
     </section>
 
+    <!-- ── 心愿清单面板 ── -->
+    <section class="panel" id="panel-wishes">
+      <div class="panel-header">
+        <h2>心愿清单</h2>
+        <button class="btn-edit-toggle" id="wishes-edit-toggle" onclick="toggleWishesEdit(this)" title="编辑">
+          <svg class="icon-sm"><use href="#icon-pencil"/></svg>
+        </button>
+      </div>
+      <!-- 新增表单 -->
+      <div class="wish-form" id="wish-form" style="display:none">
+        <input type="text" id="wish-name" placeholder="心愿名称…" maxlength="50">
+        <div class="wish-form-row">
+          <select id="wish-priority">
+            <option value="高">高优先</option>
+            <option value="中" selected>中优先</option>
+            <option value="低">低优先</option>
+          </select>
+          <input type="date" id="wish-deadline">
+        </div>
+        <div class="wish-form-actions">
+          <button class="btn-wish-save" onclick="addWish()">添加</button>
+          <button class="btn-wish-cancel" onclick="hideWishForm()">取消</button>
+        </div>
+      </div>
+      <button class="btn-add edit-only" id="wishes-add-btn" onclick="showWishForm()" style="margin-bottom:12px">
+        <svg class="icon-sm"><use href="#icon-plus"/></svg> 新增心愿
+      </button>
+      <!-- 列表 -->
+      <div class="wishes-grid" id="wishes-grid">
+        <div class="wishes-list" id="wishes-list"></div>
+        <div class="wishes-empty" id="wishes-empty">暂无心愿，点击上方按钮添加</div>
+      </div>
+    </section>
+
   </main>
 </div>