922 lines
32 KiB
JavaScript
922 lines
32 KiB
JavaScript
/* ── Todo App ──────────────────────────────────────── */
|
||
class TodoApp {
|
||
constructor() {
|
||
this.todos = [];
|
||
this.view = 'active'; // 'active' | 'completed' | 'abandoned'
|
||
this.openMenuId = null; // 当前打开的菜单 ID
|
||
this.addingChildFor = null; // 正在添加子任务的父任务 ID
|
||
this.editingId = null; // 正在编辑的任务 ID
|
||
this.draftKey = 'todo-draft'; // localStorage 主输入草稿
|
||
this.subDraftPrefix = 'todo-sub-draft-'; // 子任务草稿前缀
|
||
this.editDraftPrefix = 'todo-edit-draft-'; // 编辑草稿前缀
|
||
|
||
// 滑动状态
|
||
this.swipeState = { wrapper: null, startX: 0, startY: 0, deltaX: 0, locked: false };
|
||
this.openWrapper = null; // 当前左滑展开的 wrapper
|
||
|
||
// 自动保存
|
||
this.autoSaveEnabled = false;
|
||
this.autoSaveSec = 10; // 默认 10 秒
|
||
this.autoSaveTimer = null;
|
||
|
||
this.cacheDom();
|
||
this.bindEvents();
|
||
this.restoreDraft();
|
||
this.init();
|
||
}
|
||
|
||
async init() {
|
||
await this.fetchSettings(); // 从服务端恢复自动保存状态
|
||
await this.fetchAndRender();
|
||
}
|
||
|
||
/* ── DOM 缓存 ──────────────────────────────────── */
|
||
cacheDom() {
|
||
this.$todoList = document.getElementById('todoList');
|
||
this.$emptyState = document.getElementById('emptyState');
|
||
this.$taskCount = document.getElementById('taskCount');
|
||
this.$createInput = document.getElementById('createInput');
|
||
this.$btnConfirmCreate = document.getElementById('btnConfirmCreate');
|
||
this.$autoSaveCheck = document.getElementById('autoSaveCheck');
|
||
this.$autoSaveSeconds = document.getElementById('autoSaveSeconds');
|
||
}
|
||
|
||
/* ── 事件绑定 ──────────────────────────────────── */
|
||
bindEvents() {
|
||
// 主任务创建
|
||
this.$btnConfirmCreate.addEventListener('click', () => this.createMainTodo());
|
||
this.$createInput.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Enter') this.createMainTodo();
|
||
if (e.key === 'Escape') { this.$createInput.value = ''; this.saveDraft(); }
|
||
});
|
||
this.$createInput.addEventListener('input', () => this.saveDraft());
|
||
|
||
// 事件委托
|
||
this.$todoList.addEventListener('click', (e) => {
|
||
// 滑动背景按钮
|
||
const swipeAct = e.target.closest('.swipe-act');
|
||
if (swipeAct) {
|
||
e.stopPropagation();
|
||
const wrapper = e.target.closest('.todo-row-wrapper');
|
||
if (wrapper) this.handleSwipeAction(swipeAct.dataset.swipeAction, wrapper.dataset.id);
|
||
return;
|
||
}
|
||
|
||
const row = e.target.closest('.todo-row');
|
||
if (!row) return;
|
||
const id = row.dataset.id;
|
||
|
||
if (e.target.closest('.checkbox')) {
|
||
this.toggleComplete(id, row);
|
||
} else if (e.target.closest('.btn-menu')) {
|
||
e.stopPropagation();
|
||
this.toggleMenu(id, row);
|
||
} else if (e.target.closest('.btn-add-sub')) {
|
||
e.stopPropagation();
|
||
this.showSubInput(id);
|
||
} else if (e.target.closest('.btn-edit')) {
|
||
e.stopPropagation();
|
||
this.startEdit(id, row);
|
||
}
|
||
});
|
||
|
||
this.$todoList.addEventListener('keydown', (e) => {
|
||
if (e.target.classList.contains('inline-create-input')) {
|
||
const wrap = e.target.closest('.inline-create');
|
||
const parentId = wrap.dataset.parentId;
|
||
if (e.key === 'Enter') this.createSubTodo(parentId, e.target);
|
||
if (e.key === 'Escape') this.hideSubInput();
|
||
}
|
||
if (e.target.classList.contains('inline-edit-input')) {
|
||
if (e.key === 'Escape') this.cancelEdit();
|
||
}
|
||
});
|
||
|
||
// 双击标题 → 进入编辑
|
||
this.$todoList.addEventListener('dblclick', (e) => {
|
||
const row = e.target.closest('.todo-row');
|
||
if (!row) return;
|
||
// 排除 checkbox、按钮等
|
||
if (e.target.closest('.checkbox, .btn-icon, button')) return;
|
||
const id = row.dataset.id;
|
||
const todo = this.todos.find(t => t.id === id);
|
||
if (todo && todo.status === 'active') this.startEdit(id, row);
|
||
});
|
||
|
||
// 右键 → 打开"更多"菜单
|
||
this.$todoList.addEventListener('contextmenu', (e) => {
|
||
const row = e.target.closest('.todo-row');
|
||
if (!row) return;
|
||
e.preventDefault();
|
||
const id = row.dataset.id;
|
||
this.toggleMenu(id, row);
|
||
});
|
||
|
||
// 全局点击：关闭菜单 + 关闭滑动（排除菜单按钮和菜单本身）
|
||
document.addEventListener('click', (e) => {
|
||
if (!e.target.closest('.btn-menu') && !e.target.closest('.popup-menu')) {
|
||
this.closeMenu();
|
||
}
|
||
if (!e.target.closest('.todo-row-wrapper')) this.closeSwipe();
|
||
});
|
||
|
||
// 页面关闭前：自动保存未提交的新建任务（编辑不自动保存）
|
||
window.addEventListener('beforeunload', () => this.autoSaveDrafts());
|
||
|
||
// 任何输入框键入时，若自动保存已开启则重置倒计时
|
||
document.addEventListener('input', (e) => {
|
||
if (e.target.matches('.create-input, .inline-create-input, .inline-edit-input')) {
|
||
this.scheduleAutoSave();
|
||
}
|
||
});
|
||
|
||
// 触摸事件委托（滑动）
|
||
this.$todoList.addEventListener('touchstart', (e) => this.onTouchStart(e), { passive: false });
|
||
this.$todoList.addEventListener('touchmove', (e) => this.onTouchMove(e), { passive: false });
|
||
this.$todoList.addEventListener('touchend', (e) => this.onTouchEnd(e), { passive: false });
|
||
|
||
// 底部筛选
|
||
document.querySelectorAll('.filter-tab').forEach(btn => {
|
||
btn.addEventListener('click', () => this.switchView(btn.dataset.view));
|
||
});
|
||
|
||
// 自动保存开关
|
||
this.$autoSaveCheck.addEventListener('change', () => {
|
||
this.autoSaveEnabled = this.$autoSaveCheck.checked;
|
||
this.saveSetting('autoSaveEnabled', this.autoSaveEnabled);
|
||
if (!this.autoSaveEnabled) {
|
||
clearTimeout(this.autoSaveTimer);
|
||
this.autoSaveTimer = null;
|
||
}
|
||
});
|
||
|
||
// 点击秒数切换间隔
|
||
this.$autoSaveSeconds.addEventListener('click', () => {
|
||
const options = [5, 10, 30, 60];
|
||
const current = this.autoSaveSec;
|
||
const idx = options.indexOf(current);
|
||
const next = options[(idx + 1) % options.length];
|
||
this.autoSaveSec = next;
|
||
this.$autoSaveSeconds.textContent = next + 's';
|
||
this.saveSetting('autoSaveSec', this.autoSaveSec);
|
||
});
|
||
}
|
||
|
||
/* ── 滑动触摸处理 ──────────────────────────────── */
|
||
onTouchStart(e) {
|
||
const wrapper = e.target.closest('.todo-row-wrapper');
|
||
if (!wrapper) { this.closeSwipe(); return; }
|
||
|
||
// 如果用户在编辑/输入状态，不处理滑动
|
||
if (e.target.closest('input, textarea')) return;
|
||
if (e.target.closest('.popup-menu')) return;
|
||
|
||
const touch = e.touches[0];
|
||
this.swipeState = {
|
||
wrapper,
|
||
startX: touch.clientX,
|
||
startY: touch.clientY,
|
||
deltaX: 0,
|
||
locked: false,
|
||
};
|
||
}
|
||
|
||
onTouchMove(e) {
|
||
const { wrapper, startX, startY, locked } = this.swipeState;
|
||
if (!wrapper) return;
|
||
|
||
const touch = e.touches[0];
|
||
const dx = touch.clientX - startX;
|
||
const dy = touch.clientY - startY;
|
||
|
||
if (!locked) {
|
||
if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 8) {
|
||
this.swipeState.locked = true;
|
||
} else {
|
||
return; // 垂直滚动，不处理
|
||
}
|
||
}
|
||
|
||
// 限制滑动范围：最多展开 200px
|
||
const clamped = Math.max(-200, Math.min(200, dx));
|
||
this.swipeState.deltaX = clamped;
|
||
|
||
const swipeEl = wrapper.querySelector('.todo-row-swipe');
|
||
if (swipeEl) {
|
||
swipeEl.style.transition = 'none';
|
||
swipeEl.style.transform = `translateX(${clamped}px)`;
|
||
}
|
||
|
||
e.preventDefault();
|
||
}
|
||
|
||
onTouchEnd(e) {
|
||
const { wrapper, deltaX } = this.swipeState;
|
||
this.swipeState = { wrapper: null, startX: 0, startY: 0, deltaX: 0, locked: false };
|
||
if (!wrapper) return;
|
||
|
||
const swipeEl = wrapper.querySelector('.todo-row-swipe');
|
||
const SWIPE_THRESHOLD = 60;
|
||
|
||
if (deltaX > SWIPE_THRESHOLD) {
|
||
// 右滑：触发完成/恢复
|
||
const id = wrapper.dataset.id;
|
||
const todo = this.todos.find(t => t.id === id);
|
||
if (!todo) { this.snapSwipe(swipeEl, 0); return; }
|
||
if (todo.status === 'active') {
|
||
this.handleMenuAction('complete', id);
|
||
} else {
|
||
this.handleMenuAction('restore', id);
|
||
}
|
||
if (swipeEl) this.snapSwipe(swipeEl, 0);
|
||
} else if (deltaX < -SWIPE_THRESHOLD) {
|
||
// 左滑：展开操作按钮
|
||
this.closeSwipe();
|
||
const rightBg = wrapper.querySelector('.swipe-bg-right');
|
||
const btnWidth = rightBg ? rightBg.offsetWidth : 140;
|
||
this.openWrapper = wrapper;
|
||
wrapper.classList.add('swiped-open');
|
||
if (swipeEl) this.snapSwipe(swipeEl, -btnWidth);
|
||
} else {
|
||
// 滑动不足，回弹
|
||
this.snapSwipe(swipeEl, 0);
|
||
}
|
||
}
|
||
|
||
snapSwipe(el, targetX) {
|
||
if (!el) return;
|
||
el.style.transition = 'transform 0.25s cubic-bezier(0.2, 0, 0, 1)';
|
||
el.style.transform = targetX === 0 ? '' : `translateX(${targetX}px)`;
|
||
}
|
||
|
||
closeSwipe() {
|
||
if (this.openWrapper) {
|
||
this.openWrapper.classList.remove('swiped-open');
|
||
const swipeEl = this.openWrapper.querySelector('.todo-row-swipe');
|
||
this.snapSwipe(swipeEl, 0);
|
||
this.openWrapper = null;
|
||
}
|
||
}
|
||
|
||
async handleSwipeAction(action, id) {
|
||
this.closeSwipe();
|
||
switch (action) {
|
||
case 'edit': {
|
||
const wrapper = document.querySelector(`.todo-row-wrapper[data-id="${id}"]`);
|
||
const row = wrapper?.querySelector('.todo-row');
|
||
if (row) this.startEdit(id, row);
|
||
return;
|
||
}
|
||
case 'abandon':
|
||
await this.handleMenuAction('abandon', id);
|
||
break;
|
||
case 'delete':
|
||
await this.handleMenuAction('delete', id);
|
||
break;
|
||
}
|
||
}
|
||
|
||
/* ── API 调用 ──────────────────────────────────── */
|
||
async api(path, options = {}) {
|
||
const res = await fetch(path, {
|
||
headers: { 'Content-Type': 'application/json' },
|
||
...options,
|
||
});
|
||
if (!res.ok) {
|
||
const err = await res.json().catch(() => ({}));
|
||
throw new Error(err.error || `请求失败 (${res.status})`);
|
||
}
|
||
return res.json();
|
||
}
|
||
|
||
async fetchAndRender() {
|
||
try {
|
||
this.todos = await this.api('/api/todos');
|
||
this.render();
|
||
} catch (e) {
|
||
console.error('加载数据失败:', e);
|
||
}
|
||
}
|
||
|
||
/* ── 主任务创建 ────────────────────────────────── */
|
||
async createMainTodo() {
|
||
const title = this.$createInput.value.trim();
|
||
if (!title) return;
|
||
|
||
try {
|
||
await this.api('/api/todos', {
|
||
method: 'POST',
|
||
body: JSON.stringify({ title }),
|
||
});
|
||
this.$createInput.value = '';
|
||
this.saveDraft();
|
||
this.$createInput.focus();
|
||
await this.fetchAndRender();
|
||
} catch (e) {
|
||
alert('创建失败: ' + e.message);
|
||
}
|
||
}
|
||
|
||
/* ── 草稿保存 / 恢复 ──────────────────────────── */
|
||
saveDraft() {
|
||
const val = this.$createInput.value;
|
||
if (val) {
|
||
localStorage.setItem(this.draftKey, val);
|
||
} else {
|
||
localStorage.removeItem(this.draftKey);
|
||
}
|
||
}
|
||
|
||
restoreDraft() {
|
||
const draft = localStorage.getItem(this.draftKey);
|
||
if (draft) {
|
||
this.$createInput.value = draft;
|
||
}
|
||
}
|
||
|
||
/* 页面关闭时：自动落库未提交的新建任务（编辑不自动保存） */
|
||
autoSaveDrafts() {
|
||
const beacon = (body) => {
|
||
const blob = new Blob([JSON.stringify(body)], { type: 'application/json' });
|
||
navigator.sendBeacon('/api/todos', blob);
|
||
};
|
||
|
||
// 主任务新建输入框
|
||
const mainTitle = this.$createInput.value.trim();
|
||
if (mainTitle) {
|
||
beacon({ title: mainTitle });
|
||
}
|
||
|
||
// 子/孙任务新建输入框
|
||
const subInput = document.querySelector('.inline-create-input');
|
||
if (subInput) {
|
||
const subTitle = subInput.value.trim();
|
||
if (subTitle) {
|
||
const parentId = subInput.closest('.inline-create')?.dataset.parentId;
|
||
beacon({ title: subTitle, parentId: parentId || null });
|
||
}
|
||
}
|
||
|
||
// 编辑中的已有任务不做自动保存（草稿已在 localStorage 中）
|
||
}
|
||
|
||
/* ── 服务端设置存取 ────────────────────────────── */
|
||
async fetchSettings() {
|
||
try {
|
||
const s = await this.api('/api/settings');
|
||
this.autoSaveEnabled = s.autoSaveEnabled || false;
|
||
this.autoSaveSec = s.autoSaveSec || 10;
|
||
} catch { /* 使用默认值 */ }
|
||
// 恢复 UI
|
||
this.$autoSaveCheck.checked = this.autoSaveEnabled;
|
||
this.$autoSaveSeconds.textContent = this.autoSaveSec + 's';
|
||
}
|
||
|
||
async saveSetting(key, value) {
|
||
try {
|
||
await this.api('/api/settings', {
|
||
method: 'PUT',
|
||
body: JSON.stringify({ [key]: value }),
|
||
});
|
||
} catch { /* 静默失败 */ }
|
||
}
|
||
|
||
/* 自动保存调度：任何输入框键入时重置倒计时，N 秒无操作后自动落库 */
|
||
scheduleAutoSave() {
|
||
if (!this.autoSaveEnabled) return;
|
||
clearTimeout(this.autoSaveTimer);
|
||
this.autoSaveTimer = setTimeout(() => this.performAutoSave(), this.autoSaveSec * 1000);
|
||
}
|
||
|
||
async performAutoSave() {
|
||
// 1. 主任务新建输入框
|
||
const mainTitle = this.$createInput.value.trim();
|
||
if (mainTitle) {
|
||
try {
|
||
await this.api('/api/todos', { method: 'POST', body: JSON.stringify({ title: mainTitle }) });
|
||
this.$createInput.value = '';
|
||
this.saveDraft();
|
||
await this.fetchAndRender();
|
||
this.$createInput.focus();
|
||
return;
|
||
} catch { /* 静默失败 */ }
|
||
}
|
||
|
||
// 2. 子/孙任务新建输入框
|
||
const subInput = document.querySelector('.inline-create-input');
|
||
if (subInput) {
|
||
const subTitle = subInput.value.trim();
|
||
if (subTitle) {
|
||
const parentId = subInput.closest('.inline-create')?.dataset.parentId;
|
||
try {
|
||
await this.api('/api/todos', { method: 'POST', body: JSON.stringify({ title: subTitle, parentId: parentId || null }) });
|
||
await this.fetchAndRender();
|
||
return;
|
||
} catch { /* 静默失败 */ }
|
||
}
|
||
}
|
||
|
||
// 3. 行内编辑输入框（静默保存，不退出编辑状态）
|
||
const editInput = document.querySelector('.inline-edit-input');
|
||
if (editInput && this.editingId) {
|
||
const newTitle = editInput.value.trim();
|
||
const row = editInput.closest('.todo-row');
|
||
const original = row?.dataset.originalTitle;
|
||
if (newTitle && newTitle !== original) {
|
||
try {
|
||
await this.api(`/api/todos/${this.editingId}`, {
|
||
method: 'PATCH',
|
||
body: JSON.stringify({ title: newTitle }),
|
||
});
|
||
// 更新内存中的数据，避免重渲染
|
||
const todo = this.todos.find(t => t.id === this.editingId);
|
||
if (todo) todo.title = newTitle;
|
||
// 更新基准标题，后续自动保存只比较最新已保存版本
|
||
row.dataset.originalTitle = newTitle;
|
||
localStorage.removeItem(this.editDraftPrefix + this.editingId);
|
||
// 不退出编辑，不重渲染 — 用户手动点 ✓ 才退出
|
||
} catch { /* 静默失败 */ }
|
||
}
|
||
}
|
||
}
|
||
|
||
/* ── 行内编辑 ──────────────────────────────────── */
|
||
startEdit(id, row) {
|
||
// 清理上一个编辑态（不重渲染，避免破坏当前 DOM 引用）
|
||
if (this.editingId && this.editingId !== id) {
|
||
const prevRow = document.querySelector(`.todo-row[data-id="${this.editingId}"]`);
|
||
if (prevRow) {
|
||
const prevTodo = this.todos.find(t => t.id === this.editingId);
|
||
if (prevTodo) {
|
||
const prevTitle = prevRow.querySelector('.todo-title');
|
||
if (prevTitle) prevTitle.textContent = prevTodo.title;
|
||
}
|
||
prevRow.querySelector('.btn-edit-confirm')?.remove();
|
||
}
|
||
localStorage.removeItem(this.editDraftPrefix + this.editingId);
|
||
this.editingId = null;
|
||
}
|
||
|
||
const todo = this.todos.find(t => t.id === id);
|
||
if (!todo) return;
|
||
|
||
this.editingId = id;
|
||
const titleEl = row.querySelector('.todo-title');
|
||
const originalTitle = todo.title;
|
||
const editDraftKey = this.editDraftPrefix + id;
|
||
// 恢复草稿：有编辑草稿则用它，否则用原标题
|
||
const draft = localStorage.getItem(editDraftKey);
|
||
const displayTitle = draft !== null ? draft : originalTitle;
|
||
|
||
titleEl.innerHTML = `
|
||
<div class="inline-edit-wrap">
|
||
<textarea class="inline-edit-input" rows="1"
|
||
maxlength="200">${this.escapeHtml(displayTitle)}</textarea>
|
||
<button class="btn-icon btn-confirm btn-edit-confirm" title="确认">
|
||
<svg width="16" height="16" viewBox="0 0 18 18" fill="none">
|
||
<path d="M3 9l4 4 8-8" stroke="currentColor" stroke-width="2"
|
||
stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
</button>
|
||
</div>`;
|
||
const textarea = titleEl.querySelector('.inline-edit-input');
|
||
const confirmBtn = titleEl.querySelector('.btn-edit-confirm');
|
||
textarea.focus();
|
||
textarea.setSelectionRange(textarea.value.length, textarea.value.length);
|
||
|
||
// 保存编辑草稿
|
||
textarea.addEventListener('input', () => {
|
||
const val = textarea.value;
|
||
if (val && val !== originalTitle) {
|
||
localStorage.setItem(editDraftKey, val);
|
||
} else {
|
||
localStorage.removeItem(editDraftKey);
|
||
}
|
||
});
|
||
|
||
const autoResize = () => {
|
||
textarea.style.height = 'auto';
|
||
textarea.style.height = textarea.scrollHeight + 'px';
|
||
};
|
||
textarea.addEventListener('input', autoResize);
|
||
autoResize();
|
||
|
||
confirmBtn.addEventListener('mousedown', (e) => {
|
||
e.preventDefault();
|
||
this.commitEdit(textarea);
|
||
});
|
||
|
||
row.dataset.originalTitle = originalTitle;
|
||
}
|
||
|
||
async commitEdit(inputEl) {
|
||
const id = this.editingId;
|
||
if (!id) return;
|
||
const title = inputEl.value.trim();
|
||
this.editingId = null;
|
||
localStorage.removeItem(this.editDraftPrefix + id);
|
||
|
||
if (!title || title === inputEl.closest('.todo-row')?.dataset.originalTitle) {
|
||
this.fetchAndRender();
|
||
return;
|
||
}
|
||
|
||
try {
|
||
await this.api(`/api/todos/${id}`, {
|
||
method: 'PATCH',
|
||
body: JSON.stringify({ title }),
|
||
});
|
||
await this.fetchAndRender();
|
||
} catch (e) {
|
||
alert('编辑失败: ' + e.message);
|
||
this.fetchAndRender();
|
||
}
|
||
}
|
||
|
||
cancelEdit() {
|
||
const id = this.editingId;
|
||
if (id) localStorage.removeItem(this.editDraftPrefix + id);
|
||
this.editingId = null;
|
||
this.fetchAndRender();
|
||
}
|
||
|
||
/* ── 子任务创建 ────────────────────────────────── */
|
||
showSubInput(parentId) {
|
||
this.hideSubInput();
|
||
this.addingChildFor = parentId;
|
||
|
||
const level = this.getLevel(parentId);
|
||
if (level >= 2) return;
|
||
|
||
const insertAfter = this.findLastDescendantRow(parentId);
|
||
const row = document.createElement('li');
|
||
row.className = `inline-create level-${level + 1}`;
|
||
row.dataset.parentId = parentId;
|
||
const draftKey = this.subDraftPrefix + parentId;
|
||
const draft = localStorage.getItem(draftKey) || '';
|
||
|
||
row.innerHTML = `
|
||
<input type="text" class="inline-create-input"
|
||
placeholder="${level === 0 ? '添加子任务…' : '添加孙任务…'}"
|
||
maxlength="200" value="${this.escapeHtml(draft)}">
|
||
<button class="btn-icon btn-confirm">
|
||
<svg width="16" height="16" viewBox="0 0 18 18" fill="none">
|
||
<path d="M3 9l4 4 8-8" stroke="currentColor" stroke-width="2"
|
||
stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
</button>
|
||
`;
|
||
|
||
if (insertAfter) {
|
||
insertAfter.after(row);
|
||
} else {
|
||
const parentEl = this.$todoList.querySelector(`.todo-row-wrapper[data-id="${parentId}"]`);
|
||
if (parentEl) parentEl.after(row);
|
||
else this.$todoList.appendChild(row);
|
||
}
|
||
|
||
const input = row.querySelector('.inline-create-input');
|
||
input.focus();
|
||
// 保存草稿
|
||
input.addEventListener('input', () => {
|
||
const val = input.value;
|
||
if (val) localStorage.setItem(draftKey, val);
|
||
else localStorage.removeItem(draftKey);
|
||
});
|
||
row.dataset.draftKey = draftKey;
|
||
}
|
||
|
||
hideSubInput() {
|
||
const existing = this.$todoList.querySelector('.inline-create');
|
||
if (existing) {
|
||
const dk = existing.dataset.draftKey;
|
||
if (dk) localStorage.removeItem(dk);
|
||
existing.remove();
|
||
}
|
||
this.addingChildFor = null;
|
||
}
|
||
|
||
async createSubTodo(parentId, inputEl) {
|
||
const title = inputEl.value.trim();
|
||
if (!title) return;
|
||
|
||
try {
|
||
await this.api('/api/todos', {
|
||
method: 'POST',
|
||
body: JSON.stringify({ title, parentId }),
|
||
});
|
||
// 清除草稿
|
||
const dk = this.subDraftPrefix + parentId;
|
||
localStorage.removeItem(dk);
|
||
await this.fetchAndRender();
|
||
} catch (e) {
|
||
alert('创建失败: ' + e.message);
|
||
}
|
||
}
|
||
|
||
/* ── 切换完成状态 ──────────────────────────────── */
|
||
async toggleComplete(id, row) {
|
||
const todo = this.todos.find(t => t.id === id);
|
||
if (!todo) return;
|
||
const newStatus = todo.status === 'completed' ? 'active' : 'completed';
|
||
|
||
try {
|
||
await this.api(`/api/todos/${id}`, {
|
||
method: 'PATCH',
|
||
body: JSON.stringify({ status: newStatus }),
|
||
});
|
||
await this.fetchAndRender();
|
||
} catch (e) {
|
||
alert('操作失败: ' + e.message);
|
||
}
|
||
}
|
||
|
||
/* ── 弹出菜单 ──────────────────────────────────── */
|
||
toggleMenu(id, row) {
|
||
this.closeMenu();
|
||
|
||
if (this.openMenuId === id) {
|
||
this.openMenuId = null;
|
||
return;
|
||
}
|
||
|
||
this.openMenuId = id;
|
||
const todo = this.todos.find(t => t.id === id);
|
||
if (!todo) return;
|
||
|
||
const level = this.getLevel(id);
|
||
const canAddSub = level < 2 && todo.status === 'active';
|
||
|
||
const wrapper = row.closest('.todo-row-wrapper');
|
||
wrapper.querySelector('.popup-menu')?.remove();
|
||
|
||
const menu = document.createElement('div');
|
||
menu.className = 'popup-menu show';
|
||
menu.innerHTML = this.buildMenuHtml(todo, canAddSub);
|
||
wrapper.appendChild(menu);
|
||
|
||
menu.addEventListener('click', (e) => {
|
||
const action = e.target.closest('[data-action]')?.dataset.action;
|
||
if (!action) return;
|
||
this.handleMenuAction(action, id);
|
||
});
|
||
}
|
||
|
||
buildMenuHtml(todo, canAddSub) {
|
||
const items = [];
|
||
if (todo.status === 'active') {
|
||
items.push(`<button class="popup-menu-item" data-action="complete">
|
||
<svg width="14" height="14" viewBox="0 0 14 14"><path d="M2 7l3 3 6-6" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
标记完成
|
||
</button>`);
|
||
items.push(`<button class="popup-menu-item" data-action="abandon">
|
||
<svg width="14" height="14" viewBox="0 0 14 14"><circle cx="7" cy="7" r="5.5" stroke="currentColor" stroke-width="1.2" fill="none"/><path d="M5 5l4 4M9 5l-4 4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||
标记废弃
|
||
</button>`);
|
||
} else {
|
||
items.push(`<button class="popup-menu-item" data-action="restore">
|
||
<svg width="14" height="14" viewBox="0 0 14 14"><path d="M3 8l3 3 5-6" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
恢复
|
||
</button>`);
|
||
}
|
||
if (canAddSub) {
|
||
items.push(`<div class="popup-divider"></div>`);
|
||
items.push(`<button class="popup-menu-item" data-action="addSub">
|
||
<svg width="14" height="14" viewBox="0 0 14 14"><path d="M7 2v10M2 7h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||
添加子任务
|
||
</button>`);
|
||
}
|
||
items.push(`<div class="popup-divider"></div>`);
|
||
items.push(`<button class="popup-menu-item danger" data-action="delete">
|
||
<svg width="14" height="14" viewBox="0 0 14 14"><path d="M3 4h8M5 4V3a1 1 0 011-1h2a1 1 0 011 1v1M6 6v4M8 6v4" stroke="currentColor" stroke-width="1.2" fill="none" stroke-linecap="round"/><path d="M4 4l.8 7.2a1 1 0 001 .8h2.4a1 1 0 001-.8L10 4" stroke="currentColor" stroke-width="1.2" fill="none"/></svg>
|
||
删除
|
||
</button>`);
|
||
return items.join('');
|
||
}
|
||
|
||
closeMenu() {
|
||
document.querySelectorAll('.popup-menu').forEach(m => m.remove());
|
||
this.openMenuId = null;
|
||
}
|
||
|
||
async handleMenuAction(action, id) {
|
||
this.closeMenu();
|
||
try {
|
||
switch (action) {
|
||
case 'complete':
|
||
await this.api(`/api/todos/${id}`, {
|
||
method: 'PATCH',
|
||
body: JSON.stringify({ status: 'completed' }),
|
||
});
|
||
break;
|
||
case 'abandon':
|
||
await this.api(`/api/todos/${id}`, {
|
||
method: 'PATCH',
|
||
body: JSON.stringify({ status: 'abandoned' }),
|
||
});
|
||
break;
|
||
case 'restore':
|
||
await this.api(`/api/todos/${id}`, {
|
||
method: 'PATCH',
|
||
body: JSON.stringify({ status: 'active' }),
|
||
});
|
||
break;
|
||
case 'addSub':
|
||
this.showSubInput(id);
|
||
return;
|
||
case 'delete':
|
||
if (!confirm('确定要删除该任务吗？子任务也会一并删除。')) return;
|
||
await this.api(`/api/todos/${id}`, { method: 'DELETE' });
|
||
break;
|
||
}
|
||
await this.fetchAndRender();
|
||
} catch (e) {
|
||
alert('操作失败: ' + e.message);
|
||
}
|
||
}
|
||
|
||
/* ── 视图切换 ──────────────────────────────────── */
|
||
switchView(view) {
|
||
this.view = view;
|
||
this.hideSubInput();
|
||
this.closeMenu();
|
||
this.closeSwipe();
|
||
|
||
document.querySelectorAll('.filter-tab').forEach(t => {
|
||
t.classList.toggle('active', t.dataset.view === view);
|
||
});
|
||
|
||
this.render();
|
||
}
|
||
|
||
/* ── 渲染 ──────────────────────────────────────── */
|
||
render() {
|
||
this.$todoList.innerHTML = '';
|
||
this.hideSubInput();
|
||
this.closeMenu();
|
||
this.closeSwipe();
|
||
|
||
// 找出根任务并按状态筛选
|
||
let roots = this.todos.filter(t => !t.parentId && t.status === this.view);
|
||
|
||
// 已完成和已废弃按更新时间倒序
|
||
if (this.view !== 'active') {
|
||
roots.sort((a, b) => new Date(b.updatedAt) - new Date(a.updatedAt));
|
||
}
|
||
|
||
if (roots.length === 0) {
|
||
this.$emptyState.classList.remove('hidden');
|
||
const labels = { active: '暂无进行中的任务', completed: '暂无已完成的任务', abandoned: '暂无已废弃的任务' };
|
||
this.$emptyState.querySelector('p').textContent = labels[this.view] || '暂无任务';
|
||
return;
|
||
}
|
||
|
||
this.$emptyState.classList.add('hidden');
|
||
for (const root of roots) {
|
||
this.renderNode(root, 0, this.$todoList);
|
||
}
|
||
|
||
this.updateTaskCount();
|
||
}
|
||
|
||
// 递归渲染节点及其所有子孙（不限状态，跟随父级归属）
|
||
renderNode(todo, level, container) {
|
||
const wrapper = this.createRowElement(todo, level);
|
||
container.appendChild(wrapper);
|
||
|
||
// 渲染所有子节点，不限状态
|
||
const children = this.todos.filter(t => t.parentId === todo.id);
|
||
for (const child of children) {
|
||
this.renderNode(child, level + 1, container);
|
||
}
|
||
}
|
||
|
||
/* 创建行 DOM（含滑动包装层） */
|
||
createRowElement(todo, level, isHistory = false) {
|
||
const wrapper = document.createElement('li');
|
||
wrapper.className = 'todo-row-wrapper';
|
||
wrapper.dataset.id = todo.id;
|
||
|
||
const checked = todo.status === 'completed' ? 'checked' : '';
|
||
const disabled = isHistory ? 'disabled' : '';
|
||
const statusLabel = todo.status === 'completed' ? '已完成' :
|
||
todo.status === 'abandoned' ? '已废弃' : '';
|
||
const badgeClass = todo.status === 'completed' ? 'completed' : 'abandoned';
|
||
const timeStr = this.formatTime(todo.createdAt);
|
||
|
||
// 滑动右侧标签：active → 完成, 其他 → 恢复
|
||
const rightSwipeLabel = isHistory ? '恢复' : '完成';
|
||
|
||
// 右侧操作按钮
|
||
let bgRightActions;
|
||
if (isHistory) {
|
||
bgRightActions = `
|
||
<span class="swipe-act swipe-act-edit" data-swipe-action="edit">编辑</span>
|
||
<span class="swipe-act swipe-act-delete" data-swipe-action="delete">删除</span>`;
|
||
} else {
|
||
bgRightActions = `
|
||
<span class="swipe-act swipe-act-edit" data-swipe-action="edit">编辑</span>
|
||
<span class="swipe-act swipe-act-abandon" data-swipe-action="abandon">废弃</span>
|
||
<span class="swipe-act swipe-act-delete" data-swipe-action="delete">删除</span>`;
|
||
}
|
||
|
||
wrapper.innerHTML = `
|
||
<div class="swipe-bg">
|
||
<div class="swipe-bg-left">
|
||
<span>✓ ${rightSwipeLabel}</span>
|
||
</div>
|
||
<div class="swipe-bg-right">${bgRightActions}</div>
|
||
</div>
|
||
<div class="todo-row-swipe">
|
||
<div class="todo-row ${todo.status} level-${Math.min(level, 2)}" data-id="${todo.id}">
|
||
<input type="checkbox" class="checkbox" ${checked} ${disabled}>
|
||
<span class="todo-title">${this.escapeHtml(todo.title)}</span>
|
||
${!isHistory ? `
|
||
<button class="btn-icon btn-add-sub" title="添加子任务">
|
||
<svg width="14" height="14" viewBox="0 0 14 14">
|
||
<path d="M7 2v10M2 7h10" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
|
||
</svg>
|
||
</button>
|
||
<button class="btn-icon btn-edit" title="编辑">
|
||
<svg width="13" height="13" viewBox="0 0 13 13">
|
||
<path d="M9.5 1.5l2 2-7.5 7.5L1 11.5l.5-2.5z" stroke="currentColor" stroke-width="1.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
</button>
|
||
` : ''}
|
||
<button class="btn-icon btn-menu" title="更多操作">
|
||
<svg width="15" height="15" viewBox="0 0 15 15">
|
||
<circle cx="3.5" cy="7.5" r="1.2" fill="currentColor"/>
|
||
<circle cx="7.5" cy="7.5" r="1.2" fill="currentColor"/>
|
||
<circle cx="11.5" cy="7.5" r="1.2" fill="currentColor"/>
|
||
</svg>
|
||
</button>
|
||
${statusLabel ? `<span class="status-badge ${badgeClass}">${statusLabel}</span>` : ''}
|
||
<span class="todo-time">${timeStr}</span>
|
||
</div>
|
||
</div>`;
|
||
|
||
return wrapper;
|
||
}
|
||
|
||
/* ── 工具方法 ──────────────────────────────────── */
|
||
getLevel(id) {
|
||
let depth = 0;
|
||
let current = this.todos.find(t => t.id === id);
|
||
while (current && current.parentId) {
|
||
depth++;
|
||
current = this.todos.find(t => t.id === current.parentId);
|
||
}
|
||
return depth;
|
||
}
|
||
|
||
findLastDescendantRow(parentId) {
|
||
const descendantIds = this.collectDescendantIds(parentId);
|
||
for (let i = descendantIds.length - 1; i >= 0; i--) {
|
||
const el = this.$todoList.querySelector(`.todo-row-wrapper[data-id="${descendantIds[i]}"]`);
|
||
if (el) return el;
|
||
}
|
||
return null;
|
||
}
|
||
|
||
collectDescendantIds(parentId) {
|
||
const ids = [];
|
||
const children = this.todos.filter(t => t.parentId === parentId);
|
||
for (const child of children) {
|
||
ids.push(child.id);
|
||
ids.push(...this.collectDescendantIds(child.id));
|
||
}
|
||
return ids;
|
||
}
|
||
|
||
formatTime(isoStr) {
|
||
const d = new Date(isoStr);
|
||
const now = new Date();
|
||
const diff = now - d;
|
||
|
||
if (diff < 60_000) return '刚刚';
|
||
if (diff < 3_600_000) return `${Math.floor(diff / 60_000)} 分钟前`;
|
||
if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)} 小时前`;
|
||
if (diff < 604_800_000) return `${Math.floor(diff / 86_400_000)} 天前`;
|
||
|
||
const y = d.getFullYear();
|
||
const m = String(d.getMonth() + 1).padStart(2, '0');
|
||
const day = String(d.getDate()).padStart(2, '0');
|
||
return `${y}-${m}-${day}`;
|
||
}
|
||
|
||
escapeHtml(str) {
|
||
const map = { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' };
|
||
return str.replace(/[&<>"']/g, c => map[c]);
|
||
}
|
||
|
||
updateTaskCount() {
|
||
const count = this.todos.filter(t => t.status === 'active').length;
|
||
this.$taskCount.textContent = count ? `${count} 个进行中` : '';
|
||
}
|
||
}
|
||
|
||
/* ── 启动 ─────────────────────────────────────────── */
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
new TodoApp();
|
||
});
|