v1.2.1 — 心愿点击内联编辑

- 点击心愿名称/日期区域展开内联编辑表单
- 可修改名称、象限、截止时间
- 保存/取消,不干扰勾选和拖拽
This commit is contained in:
mac
2026-06-03 14:48:18 +08:00
parent bafac0bc12
commit 1ea81b3086
2 changed files with 97 additions and 0 deletions

View File

@@ -688,8 +688,64 @@
});
bindDragEvents();
bindEditClicks();
}
/* ── 点击编辑 ── */
function bindEditClicks() {
document.querySelectorAll('#panel-wishes .wish-item').forEach(function(item) {
// 只在点击名称或日期区域时触发编辑(排除 checkbox / 拖拽手柄 / 删除按钮)
item.addEventListener('click', function(e) {
if (e.target.closest('.wish-check') || e.target.closest('.wish-drag-handle') ||
e.target.closest('.wish-del') || e.target.closest('.wish-edit-form')) return;
var id = parseInt(this.dataset.id);
var w = wishes.find(function(x){ return x.id === id; });
if (w) startEditWish(this, w);
});
});
}
function startEditWish(el, w) {
if (el.querySelector('.wish-edit-form')) return; // 已在编辑中
el.classList.add('editing');
var deadline = w.deadline || '';
var quadOpts = QUADRANTS.map(function(q){
return '<option value="' + q + '"' + (q === (w.quadrant || w.priority || '重要不紧急') ? ' selected' : '') + '>' + q + '</option>';
}).join('');
el.innerHTML =
'<div class="wish-edit-form">' +
'<input type="text" class="wish-edit-name" value="' + esc(w.name) + '" maxlength="50">' +
'<div class="wish-edit-row">' +
'<select class="wish-edit-quadrant">' + quadOpts + '</select>' +
'<input type="date" class="wish-edit-deadline" value="' + esc(deadline) + '">' +
'</div>' +
'<div class="wish-edit-actions">' +
'<button class="btn-wish-save" onclick="event.stopPropagation();saveEditWish(' + w.id + ', this)">保存</button>' +
'<button class="btn-wish-cancel" onclick="event.stopPropagation();renderWishes()">取消</button>' +
'</div>' +
'</div>';
}
window.saveEditWish = function(id, btn) {
var form = btn.closest('.wish-edit-form');
var name = form.querySelector('.wish-edit-name').value.trim();
if (!name) { showToast('名称不能为空', 'error'); return; }
var quadrant = form.querySelector('.wish-edit-quadrant').value;
var deadline = form.querySelector('.wish-edit-deadline').value;
fetch('/api/wishes/' + id, {
method: 'PUT',
headers: {'Content-Type': 'application/json'},
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; }
var w = wishes.find(function(x){ return x.id === id; });
if (w) { w.name = name; w.quadrant = quadrant; w.deadline = deadline; }
renderWishes();
});
};
/* ── Drag & Drop (跨象限) ── */
function bindDragEvents() {

View File

@@ -1211,6 +1211,47 @@ body {
.wish-del { display: none; }
.wish-del .icon-xs { width: 13px; height: 13px; }
/* 内联编辑 */
.wish-item.editing {
background: var(--card);
padding: 8px 10px;
flex-wrap: wrap;
}
.wish-edit-form {
width: 100%;
display: flex;
flex-direction: column;
gap: 6px;
}
.wish-edit-form input[type="text"],
.wish-edit-form input[type="date"],
.wish-edit-form select {
width: 100%;
padding: 6px 8px;
border: 1.5px solid var(--border);
border-radius: var(--radius-sm);
font-size: 12px;
font-family: inherit;
color: var(--text);
background: var(--card);
box-sizing: border-box;
}
.wish-edit-form input:focus,
.wish-edit-form select:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 2px rgba(74,108,247,0.08);
}
.wish-edit-name { font-weight: 500; }
.wish-edit-row { display: flex; gap: 6px; }
.wish-edit-row select,
.wish-edit-row input { flex: 1; }
.wish-edit-actions { display: flex; gap: 6px; }
.wish-edit-actions .btn-wish-save,
.wish-edit-actions .btn-wish-cancel {
flex: 1; padding: 6px; font-size: 12px;
}
.wishes-empty {
font-size: 13px; color: var(--text-muted); text-align: center; padding: 32px 0;
}