v1.2.0 — 心愿清单四象限
- 数据库 v3: priority → quadrant (重要紧急/重要不紧急/紧急不重要/不紧急不重要) - 2×2 网格布局，每象限独立列表 - 跨象限拖拽：拖到不同象限自动更新分类 - 旧数据自动迁移：高→重要紧急, 中→重要不紧急, 低→不紧急不重要
This commit is contained in:
mac
118
static/app.js
118
static/app.js
@@ -636,15 +636,16 @@
|
||||
};
|
||||
|
||||
/* ================================================================
|
||||
Wishes — 心愿清单
|
||||
Wishes — 心愿清单（四象限）
|
||||
================================================================ */
|
||||
var wishes = [];
|
||||
var dragSourceId = null;
|
||||
var dragSourceQuadrant = null;
|
||||
var wishesLoaded = false;
|
||||
var QUADRANTS = ['重要紧急', '重要不紧急', '紧急不重要', '不紧急不重要'];
|
||||
|
||||
function loadWishes() {
|
||||
if (wishesLoaded) { renderWishes(); return; }
|
||||
// 优先使用页面嵌入数据
|
||||
if (window.__INITIAL_WISHES__) {
|
||||
wishes = window.__INITIAL_WISHES__;
|
||||
wishesLoaded = true;
|
||||
@@ -657,49 +658,54 @@
|
||||
}
|
||||
|
||||
function renderWishes() {
|
||||
var list = document.getElementById('wishes-list');
|
||||
var empty = document.getElementById('wishes-empty');
|
||||
if (!list) return;
|
||||
if (wishes.length === 0) {
|
||||
list.innerHTML = '';
|
||||
if (empty) empty.style.display = 'block';
|
||||
var emptyEl = document.getElementById('wishes-empty');
|
||||
if (!wishes.length) {
|
||||
QUADRANTS.forEach(function(q){ document.getElementById('quad-list-' + q).innerHTML = ''; });
|
||||
if (emptyEl) emptyEl.style.display = 'block';
|
||||
return;
|
||||
}
|
||||
if (empty) empty.style.display = 'none';
|
||||
var html = '';
|
||||
for (var i = 0; i < wishes.length; i++) {
|
||||
var w = wishes[i];
|
||||
var doneCls = w.done ? ' done' : '';
|
||||
var priCls = 'pri-' + (w.priority || '中');
|
||||
var deadline = w.deadline ? w.deadline : '';
|
||||
html += '<div class="wish-item' + doneCls + '" draggable="true" data-id="' + w.id + '">' +
|
||||
'<span class="wish-drag-handle"><svg class="icon-xs"><use href="#icon-list-bullet"/></svg></span>' +
|
||||
'<input type="checkbox" class="wish-check" ' + (w.done ? 'checked' : '') + ' onchange="toggleWish(' + w.id + ', this.checked)">' +
|
||||
'<span class="wish-name" title="' + esc(w.name) + '">' + esc(w.name) + '</span>' +
|
||||
'<span class="wish-pri ' + priCls + '">' + esc(w.priority) + '</span>' +
|
||||
(deadline ? '<span class="wish-deadline">' + esc(deadline) + '</span>' : '') +
|
||||
'<button class="btn-del wish-del" onclick="deleteWishItem(' + w.id + ')"><svg class="icon-xs"><use href="#icon-x"/></svg></button>' +
|
||||
'</div>';
|
||||
}
|
||||
list.innerHTML = html;
|
||||
if (emptyEl) emptyEl.style.display = 'none';
|
||||
|
||||
// 按象限分组渲染
|
||||
QUADRANTS.forEach(function(quadrant) {
|
||||
var list = document.getElementById('quad-list-' + quadrant);
|
||||
if (!list) return;
|
||||
var items = wishes.filter(function(w){ return (w.quadrant || w.priority || '重要不紧急') === quadrant; });
|
||||
var html = '';
|
||||
for (var i = 0; i < items.length; i++) {
|
||||
var w = items[i];
|
||||
var doneCls = w.done ? ' done' : '';
|
||||
var deadline = w.deadline ? w.deadline : '';
|
||||
html += '<div class="wish-item' + doneCls + '" draggable="true" data-id="' + w.id + '" data-quadrant="' + quadrant + '">' +
|
||||
'<span class="wish-drag-handle"><svg class="icon-xs"><use href="#icon-list-bullet"/></svg></span>' +
|
||||
'<input type="checkbox" class="wish-check" ' + (w.done ? 'checked' : '') + ' onchange="toggleWish(' + w.id + ', this.checked)">' +
|
||||
'<span class="wish-name" title="' + esc(w.name) + '">' + esc(w.name) + '</span>' +
|
||||
(deadline ? '<span class="wish-deadline">' + esc(deadline) + '</span>' : '') +
|
||||
'<button class="btn-del wish-del" onclick="deleteWishItem(' + w.id + ')"><svg class="icon-xs"><use href="#icon-x"/></svg></button>' +
|
||||
'</div>';
|
||||
}
|
||||
list.innerHTML = html;
|
||||
});
|
||||
|
||||
bindDragEvents();
|
||||
}
|
||||
|
||||
/* ── Drag & Drop ── */
|
||||
/* ── Drag & Drop (跨象限) ── */
|
||||
|
||||
function bindDragEvents() {
|
||||
var items = document.querySelectorAll('#wishes-list .wish-item');
|
||||
var items = document.querySelectorAll('#panel-wishes .wish-item');
|
||||
items.forEach(function(item) {
|
||||
item.addEventListener('dragstart', function(e) {
|
||||
dragSourceId = parseInt(this.dataset.id);
|
||||
dragSourceQuadrant = this.dataset.quadrant;
|
||||
this.classList.add('dragging');
|
||||
e.dataTransfer.effectAllowed = 'move';
|
||||
});
|
||||
item.addEventListener('dragend', function(e) {
|
||||
item.addEventListener('dragend', function() {
|
||||
this.classList.remove('dragging');
|
||||
dragSourceId = null;
|
||||
// 移除所有 over 状态
|
||||
document.querySelectorAll('#wishes-list .wish-item').forEach(function(el){ el.classList.remove('drag-over'); });
|
||||
dragSourceQuadrant = null;
|
||||
document.querySelectorAll('.quad-cell, .wish-item').forEach(function(el){ el.classList.remove('drag-over'); });
|
||||
});
|
||||
item.addEventListener('dragover', function(e) {
|
||||
e.preventDefault();
|
||||
@@ -711,23 +717,60 @@
|
||||
});
|
||||
item.addEventListener('drop', function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
this.classList.remove('drag-over');
|
||||
var targetId = parseInt(this.dataset.id);
|
||||
var targetQuadrant = this.dataset.quadrant;
|
||||
if (dragSourceId === targetId) return;
|
||||
// 更新本地顺序
|
||||
|
||||
var fromIdx = -1, toIdx = -1;
|
||||
for (var j = 0; j < wishes.length; j++) {
|
||||
if (wishes[j].id === dragSourceId) fromIdx = j;
|
||||
if (wishes[j].id === targetId) toIdx = j;
|
||||
}
|
||||
if (fromIdx >= 0 && toIdx >= 0) {
|
||||
var item = wishes.splice(fromIdx, 1)[0];
|
||||
wishes.splice(toIdx, 0, item);
|
||||
var moved = wishes.splice(fromIdx, 1)[0];
|
||||
wishes.splice(toIdx, 0, moved);
|
||||
// 更新象限
|
||||
if (dragSourceQuadrant !== targetQuadrant) {
|
||||
moved.quadrant = targetQuadrant;
|
||||
fetch('/api/wishes/' + moved.id, {
|
||||
method: 'PUT',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({quadrant: targetQuadrant})
|
||||
});
|
||||
}
|
||||
renderWishes();
|
||||
saveWishOrder();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 象限空区域接受 drop
|
||||
document.querySelectorAll('.quad-cell').forEach(function(cell) {
|
||||
cell.addEventListener('dragover', function(e) {
|
||||
if (this.querySelector('.wish-item')) return; // 有内容时让 item 处理
|
||||
e.preventDefault();
|
||||
this.classList.add('drag-over');
|
||||
});
|
||||
cell.addEventListener('dragleave', function() { this.classList.remove('drag-over'); });
|
||||
cell.addEventListener('drop', function(e) {
|
||||
this.classList.remove('drag-over');
|
||||
if (this.querySelector('.wish-item')) return; // 已由 item 处理
|
||||
e.preventDefault();
|
||||
var q = this.dataset.quadrant;
|
||||
var moved = wishes.find(function(w){ return w.id === dragSourceId; });
|
||||
if (moved) {
|
||||
moved.quadrant = q;
|
||||
fetch('/api/wishes/' + moved.id, {
|
||||
method: 'PUT',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({quadrant: q})
|
||||
});
|
||||
renderWishes();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function saveWishOrder() {
|
||||
@@ -751,23 +794,24 @@
|
||||
if (form) form.style.display = 'none';
|
||||
document.getElementById('wish-name').value = '';
|
||||
document.getElementById('wish-deadline').value = '';
|
||||
document.getElementById('wish-priority').value = '中';
|
||||
var sel = document.getElementById('wish-quadrant');
|
||||
if (sel) sel.value = '重要不紧急';
|
||||
};
|
||||
|
||||
window.addWish = function() {
|
||||
var name = document.getElementById('wish-name').value.trim();
|
||||
if (!name) { showToast('请输入心愿名称', 'error'); return; }
|
||||
var priority = document.getElementById('wish-priority').value;
|
||||
var quadrant = document.getElementById('wish-quadrant').value;
|
||||
var deadline = document.getElementById('wish-deadline').value;
|
||||
fetch('/api/wishes', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({name: name, priority: priority, deadline: deadline})
|
||||
body: JSON.stringify({name: name, quadrant: quadrant, deadline: deadline})
|
||||
}).then(function(r){ return r.json(); })
|
||||
.then(function(res){
|
||||
if (!res.ok) { showToast(res.error, 'error'); return; }
|
||||
hideWishForm();
|
||||
wishes.push({id: res.id, name: name, priority: priority, deadline: deadline, done: 0});
|
||||
wishes.push({id: res.id, name: name, quadrant: quadrant, deadline: deadline, done: 0});
|
||||
renderWishes();
|
||||
});
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user