v1.2.1 — 心愿点击内联编辑
- 点击心愿名称/日期区域展开内联编辑表单 - 可修改名称、象限、截止时间 - 保存/取消,不干扰勾选和拖拽
This commit is contained in:
@@ -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() {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user