v1.1.0 — 心愿清单
- 新增 wishes 表 (schema v2)，含名称/优先级/截止时间/完成状态 - API: GET/POST/PUT/DELETE /api/wishes + PUT /api/wishes/reorder - 侧边栏心愿清单面板：checklist + 新增表单 - 完成勾选 → 删除线；优先级标签（红/黄/灰） - HTML5 原生拖拽排序，松开即保存 - 编辑模式切换：默认隐藏新增/删除按钮
This commit is contained in:
mac
159
static/app.js
159
static/app.js
@@ -634,6 +634,164 @@
|
||||
});
|
||||
};
|
||||
|
||||
/* ================================================================
|
||||
Wishes — 心愿清单
|
||||
================================================================ */
|
||||
var wishes = [];
|
||||
var dragSourceId = null;
|
||||
|
||||
function loadWishes() {
|
||||
// 优先使用页面嵌入数据
|
||||
if (window.__INITIAL_WISHES__) {
|
||||
wishes = window.__INITIAL_WISHES__;
|
||||
renderWishes();
|
||||
return;
|
||||
}
|
||||
fetch('/api/wishes')
|
||||
.then(function(r){ return r.json(); })
|
||||
.then(function(res){ if (res.ok) { wishes = res.data; renderWishes(); } });
|
||||
}
|
||||
|
||||
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';
|
||||
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;
|
||||
bindDragEvents();
|
||||
}
|
||||
|
||||
/* ── Drag & Drop ── */
|
||||
|
||||
function bindDragEvents() {
|
||||
var items = document.querySelectorAll('#wishes-list .wish-item');
|
||||
items.forEach(function(item) {
|
||||
item.addEventListener('dragstart', function(e) {
|
||||
dragSourceId = parseInt(this.dataset.id);
|
||||
this.classList.add('dragging');
|
||||
e.dataTransfer.effectAllowed = 'move';
|
||||
});
|
||||
item.addEventListener('dragend', function(e) {
|
||||
this.classList.remove('dragging');
|
||||
dragSourceId = null;
|
||||
// 移除所有 over 状态
|
||||
document.querySelectorAll('#wishes-list .wish-item').forEach(function(el){ el.classList.remove('drag-over'); });
|
||||
});
|
||||
item.addEventListener('dragover', function(e) {
|
||||
e.preventDefault();
|
||||
e.dataTransfer.dropEffect = 'move';
|
||||
this.classList.add('drag-over');
|
||||
});
|
||||
item.addEventListener('dragleave', function() {
|
||||
this.classList.remove('drag-over');
|
||||
});
|
||||
item.addEventListener('drop', function(e) {
|
||||
e.preventDefault();
|
||||
this.classList.remove('drag-over');
|
||||
var targetId = parseInt(this.dataset.id);
|
||||
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);
|
||||
renderWishes();
|
||||
saveWishOrder();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function saveWishOrder() {
|
||||
var order = wishes.map(function(w){ return w.id; });
|
||||
fetch('/api/wishes/reorder', {
|
||||
method: 'PUT',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({order: order})
|
||||
});
|
||||
}
|
||||
|
||||
/* ── CRUD ── */
|
||||
|
||||
window.showWishForm = function() {
|
||||
var form = document.getElementById('wish-form');
|
||||
if (form) form.style.display = 'block';
|
||||
};
|
||||
|
||||
window.hideWishForm = function() {
|
||||
var form = document.getElementById('wish-form');
|
||||
if (form) form.style.display = 'none';
|
||||
document.getElementById('wish-name').value = '';
|
||||
document.getElementById('wish-deadline').value = '';
|
||||
document.getElementById('wish-priority').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 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})
|
||||
}).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});
|
||||
renderWishes();
|
||||
});
|
||||
};
|
||||
|
||||
window.toggleWish = function(id, done) {
|
||||
fetch('/api/wishes/' + id, {
|
||||
method: 'PUT',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({done: done ? 1 : 0})
|
||||
});
|
||||
var w = wishes.find(function(x){ return x.id === id; });
|
||||
if (w) w.done = done ? 1 : 0;
|
||||
renderWishes();
|
||||
};
|
||||
|
||||
window.deleteWishItem = function(id) {
|
||||
fetch('/api/wishes/' + id, {method: 'DELETE'});
|
||||
wishes = wishes.filter(function(w){ return w.id !== id; });
|
||||
renderWishes();
|
||||
};
|
||||
|
||||
window.toggleWishesEdit = function(btn) {
|
||||
var panel = document.getElementById('wishes-panel');
|
||||
if (!panel) return;
|
||||
var editing = panel.classList.toggle('editing');
|
||||
btn.classList.toggle('active', editing);
|
||||
};
|
||||
|
||||
/* ================================================================
|
||||
Init
|
||||
================================================================ */
|
||||
@@ -649,6 +807,7 @@
|
||||
selectedDate = todayStr;
|
||||
initStudyPresets();
|
||||
bindAutoSave();
|
||||
loadWishes();
|
||||
lastSavedDate = todayStr;
|
||||
|
||||
// 从页面嵌入数据获取初始统计（0 延迟）
|
||||
|
||||
174
static/style.css
174
static/style.css
@@ -1080,6 +1080,180 @@ body {
|
||||
.toast.error { background: var(--danger); color: #FFF; }
|
||||
.toast.info { background: var(--primary); color: #FFF; }
|
||||
|
||||
/* ═══════════════════════════════════════════
|
||||
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; }
|
||||
|
||||
.wish-form {
|
||||
background: var(--bg);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.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;
|
||||
font-family: inherit;
|
||||
color: var(--text);
|
||||
margin-bottom: 6px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.wish-form-row {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
.wish-form-row select,
|
||||
.wish-form-row input { flex: 1; }
|
||||
.wish-form-actions {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
.btn-wish-save {
|
||||
flex: 1;
|
||||
padding: 6px;
|
||||
border: none;
|
||||
background: var(--primary);
|
||||
color: #FFF;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
}
|
||||
.btn-wish-save:hover { background: var(--primary-dark); }
|
||||
.btn-wish-cancel {
|
||||
flex: 1;
|
||||
padding: 6px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--card);
|
||||
color: var(--text-dim);
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.wishes-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
max-height: 240px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.wishes-empty {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
text-align: center;
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.wish-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 5px 6px;
|
||||
border-radius: 6px;
|
||||
transition: background 0.15s;
|
||||
cursor: default;
|
||||
}
|
||||
.wish-item:hover { background: var(--bg); }
|
||||
.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-drag-handle {
|
||||
color: var(--text-muted);
|
||||
cursor: grab;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.wish-drag-handle:active { cursor: grabbing; }
|
||||
|
||||
.wish-check {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
accent-color: var(--success);
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wish-name {
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
color: var(--text);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
min-width: 0;
|
||||
}
|
||||
.wish-item.done .wish-name {
|
||||
text-decoration: line-through;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.wish-pri {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
padding: 1px 6px;
|
||||
border-radius: 8px;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.wish-pri.pri-高 { background: var(--danger-light); color: var(--danger); }
|
||||
.wish-pri.pri-中 { background: var(--warning-light); color: #D97706; }
|
||||
.wish-pri.pri-低 { background: var(--bg); color: var(--text-muted); }
|
||||
|
||||
.wish-deadline {
|
||||
font-size: 10px;
|
||||
color: var(--text-muted);
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.wish-del {
|
||||
display: none;
|
||||
}
|
||||
.wish-del .icon-xs { width: 12px; height: 12px; }
|
||||
|
||||
/* ═══════════════════════════════════════════
|
||||
SVG icons helpers
|
||||
═══════════════════════════════════════════ */
|
||||
|
||||
Reference in New Issue
Block a user