v2.1.27 — 备注改为弹窗编辑

static/app.js

@@ -241,10 +241,13 @@
 
   function buildData() {
     var morningItems = [];
-    var mEls = document.querySelectorAll('#morning-list .item-row input');
-    for (var i=0; i<mEls.length; i++) {
-      var v = mEls[i].value.trim();
-      if (v) morningItems.push(v);
+    var mRows = document.querySelectorAll('#morning-list .item-row');
+    for (var i=0; i<mRows.length; i++) {
+      var input = mRows[i].querySelector('input[type="text"]');
+      var noteEl = mRows[i].querySelector('.item-note-val');
+      var v = input ? input.value.trim() : '';
+      var n = noteEl ? noteEl.value.trim() : '';
+      if (v) morningItems.push(n ? {text: v, note: n} : v);
     }
     // 收集日历日程
     var calEls = document.querySelectorAll('#morning-calendar-list .cal-task-item span:last-child');
@@ -345,15 +348,57 @@
     var idx = container.children.length;
     var text = typeof val === 'string' ? val : (val && val.text ? val.text : '');
     text = text || '';
+    var note = (val && val.note) ? val.note : '';
+    var hasNote = !!note;
     var div = document.createElement('div');
     div.className = 'item-row';
-    div.innerHTML = '<span class="idx">' + (idx+1) + '.</span>' +
+    div.draggable = true;
+    div.innerHTML = '<span class="drag-handle" title="拖动排序">⋮⋮</span>' +
+      '<span class="idx">' + (idx+1) + '.</span>' +
       '<input type="text" value="' + esc(text) + '" placeholder="本周最重要的一件事…">' +
+      '<button class="btn-note-toggle' + (hasNote ? ' has-note' : '') + '" onclick="openNoteModal(this)" title="备注">💬</button>' +
       '<button class="btn-del" onclick="this.parentElement.remove();renumberMorning()"><svg class="icon-sm"><use href="#icon-x"/></svg></button>';
+    // 隐藏存储备注
+    var noteHidden = document.createElement('input');
+    noteHidden.type = 'hidden';
+    noteHidden.className = 'item-note-val';
+    noteHidden.value = note;
+    div.appendChild(noteHidden);
+    div.addEventListener('dragstart', dragStart);
+    div.addEventListener('dragover', dragOver);
+    div.addEventListener('drop', function(e){ dragDrop.call(this, e, 'morning-list'); });
+    div.addEventListener('dragend', dragEnd);
     container.appendChild(div);
     renumberMorning();
   }
 
+  window.openNoteModal = function(btn) {
+    var row = btn.closest('.item-row');
+    var noteEl = row.querySelector('.item-note-val');
+    var input = row.querySelector('input[type="text"]');
+    var title = input ? input.value.trim() || '未命名任务' : '备注';
+    document.getElementById('note-modal-title').textContent = title;
+    document.getElementById('note-modal-textarea').value = noteEl ? noteEl.value : '';
+    document.getElementById('note-modal').style.display = 'flex';
+    document.getElementById('note-modal').dataset.rowIndex = Array.prototype.indexOf.call(row.parentElement.children, row);
+  };
+
+  window.saveNoteModal = function() {
+    var modal = document.getElementById('note-modal');
+    var row = document.querySelectorAll('#morning-list .item-row')[parseInt(modal.dataset.rowIndex)];
+    var noteEl = row.querySelector('.item-note-val');
+    var btn = row.querySelector('.btn-note-toggle');
+    var val = document.getElementById('note-modal-textarea').value.trim();
+    if (noteEl) noteEl.value = val;
+    if (val) { btn.classList.add('has-note'); } else { btn.classList.remove('has-note'); }
+    modal.style.display = 'none';
+    triggerAutoSave();
+  };
+
+  window.closeNoteModal = function() {
+    document.getElementById('note-modal').style.display = 'none';
+  };
+
   function renumberMorning() {
     var rows = document.querySelectorAll('#morning-list .item-row');
     for (var i=0; i<rows.length; i++) {
@@ -368,10 +413,16 @@
     improve = improve || '';
     var div = document.createElement('div');
     div.className = 'evening-row';
+    div.draggable = true;
     div.innerHTML =
+      '<span class="drag-handle evening-drag" title="拖动排序">⋮⋮</span>' +
       '<button class="btn-del" onclick="this.parentElement.remove()"><svg class="icon-sm"><use href="#icon-x"/></svg></button>' +
       '<input type="text" value="' + esc(mistake) + '" placeholder="犯的错误…">' +
       '<input type="text" value="' + esc(improve) + '" placeholder="改进方案…">';
+    div.addEventListener('dragstart', dragStart);
+    div.addEventListener('dragover', dragOver);
+    div.addEventListener('drop', function(e){ dragDrop.call(this, e, 'evening-list'); });
+    div.addEventListener('dragend', dragEnd);
     container.appendChild(div);
   }
 
@@ -404,6 +455,41 @@
     btn.classList.toggle('active', editing);
   };
 
+  /* ── 拖拽排序 ── */
+  var dragSrc = null;
+
+  function dragStart(e) {
+    dragSrc = this;
+    this.classList.add('dragging');
+    e.dataTransfer.effectAllowed = 'move';
+  }
+
+  function dragOver(e) {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'move';
+    if (this !== dragSrc) this.classList.add('drag-over');
+  }
+
+  function dragDrop(e, listId) {
+    e.preventDefault();
+    this.classList.remove('drag-over');
+    if (dragSrc === this) return;
+    var container = document.getElementById(listId);
+    var items = container.querySelectorAll('.' + (dragSrc.classList.contains('evening-row') ? 'evening-row' : 'item-row'));
+    var from = Array.prototype.indexOf.call(items, dragSrc);
+    var to = Array.prototype.indexOf.call(items, this);
+    if (from < to) { container.insertBefore(dragSrc, this.nextSibling); }
+    else { container.insertBefore(dragSrc, this); }
+    if (listId === 'morning-list') renumberMorning();
+    triggerAutoSave();
+  }
+
+  function dragEnd() {
+    this.classList.remove('dragging');
+    document.querySelectorAll('.drag-over').forEach(function(el){ el.classList.remove('drag-over'); });
+    dragSrc = null;
+  }
+
   window.addStudyItem = function() {
     var name = prompt('请输入新习惯名称：');
     if (!name || !name.trim()) return;

static/style.css

@@ -1810,3 +1810,19 @@ body {
 .cal-task-item { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; font-size: 13px; color: var(--text-dim); line-height: 1.5; border-bottom: 1px solid var(--bg); }
 .cal-task-item:last-child { border-bottom: none; }
 .cal-task-dot { flex-shrink: 0; font-size: 14px; margin-top: 1px; }
+
+/* 拖拽排序 */
+.drag-handle { display: none; cursor: grab; color: var(--text-muted); font-size: 14px; user-select: none; padding: 0 4px; line-height: 1; letter-spacing: -2px; }
+.card.editing .drag-handle { display: block; }
+.item-row.dragging, .evening-row.dragging { opacity: 0.5; }
+.item-row.drag-over, .evening-row.drag-over { border-color: var(--primary) !important; background: var(--primary-light); }
+.evening-drag { position: absolute; left: 6px; top: 8px; }
+
+/* 任务备注 */
+.btn-note-toggle { display: none; background: none; border: none; cursor: pointer; font-size: 14px; padding: 2px 4px; border-radius: 4px; transition: all 0.15s; flex-shrink: 0; }
+.card.editing .btn-note-toggle { display: inline-flex; }
+.btn-note-toggle:hover { background: var(--bg); }
+.btn-note-toggle.has-note { color: var(--primary); }
+.item-note { display: none; width: 100%; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; font-family: inherit; color: var(--text); background: var(--bg); resize: vertical; min-height: 28px; box-sizing: border-box; margin-top: 6px; }
+.item-note:focus { outline: none; border-color: var(--primary); }
+.item-row { flex-wrap: wrap; }

templates/index.html

@@ -34,6 +34,23 @@
   </div>
 </div>
 
+<!-- 备注编辑弹窗 -->
+<div class="sync-modal-overlay" id="note-modal" style="display:none">
+  <div class="sync-modal" style="max-width:420px">
+    <div class="sync-modal-header">
+      <h3 id="note-modal-title">备注</h3>
+      <button class="sync-modal-close" onclick="closeNoteModal()">&times;</button>
+    </div>
+    <div style="padding:16px">
+      <textarea id="note-modal-textarea" style="width:100%; min-height:120px; padding:10px; border:1px solid var(--border); border-radius:8px; font-size:14px; font-family:inherit; resize:vertical; box-sizing:border-box" placeholder="写点备注…"></textarea>
+    </div>
+    <div class="sync-modal-footer">
+      <button class="btn-wish-cancel" onclick="closeNoteModal()">取消</button>
+      <button class="btn-wish-save" onclick="saveNoteModal()">保存</button>
+    </div>
+  </div>
+</div>
+
 <div class="app-layout">
 
   <!-- ═══ 左侧边栏 ═══ -->