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

- 从侧边栏移出，改为左侧菜单入口 → 独立页面 - 卡片式布局，对齐每周评分等面板风格 - 拖拽排序、完成勾选、编辑模式切换功能不变
2026-06-03 13:48:20 +08:00
3 changed files with 100 additions and 108 deletions
--- a/static/app.js
+++ b/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 延迟）
--- a/static/style.css
+++ b/static/style.css
@@ -1084,76 +1084,55 @@ body {
   Wishes Panel
   ═══════════════════════════════════════════ */

-.wishes-panel {
-  padding: 0 16px 10px;
-}
-.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; }
+#panel-wishes.editing .edit-only { display: inline-flex; }
+#panel-wishes.editing .wish-del { display: inline-flex; }

 .wish-form {
  background: var(--bg);
  border-radius: var(--radius-sm);
-  padding: 8px;
-  margin-bottom: 8px;
+  padding: 10px 12px;
+  margin-bottom: 12px;
+  max-width: 480px;
 }
 .wish-form input[type="text"],
 .wish-form input[type="date"],
 .wish-form select {
  width: 100%;
-  padding: 6px 8px;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  font-size: 12px;
+  padding: 8px 10px;
+  border: 1.5px solid var(--border);
+  border-radius: var(--radius-sm);
+  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;
-  font-size: 12px;
+  border-radius: var(--radius-sm);
+  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;
-  border: 1px solid var(--border);
+  padding: 8px;
+  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--text-dim);
-  border-radius: 6px;
-  font-size: 12px;
+  border-radius: var(--radius-sm);
+  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
 }

+.wishes-grid {
+  max-width: 640px;
+}
+
 .wishes-list {
  display: flex;
  flex-direction: column;
-  gap: 2px;
-  max-height: 240px;
-  overflow-y: auto;
+  gap: 4px;
 }

 .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;
-  padding: 5px 6px;
-  border-radius: 6px;
-  transition: background 0.15s;
-  cursor: default;
+  gap: 10px;
+  padding: 10px 12px;
+  border-radius: var(--radius-sm);
+  background: var(--card);
+  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;
-  height: 14px;
+  width: 16px;
+  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;
-  border-radius: 8px;
+  padding: 2px 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;
-  color: var(--text-muted);
+  font-size: 12px;
+  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
--- a/templates/index.html
+++ b/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>