回复：STtools 插件（0.4.0）：日程管理 2.0（和思源紧紧相拥的日历视图） - Achuan-2 的回 - 链滴，由于评论有字数限制，所以只能另发帖
数据库添加列
- 存储父任务信息
- 存储排序顺序
AI 写的 demo 代码
- 支持添加时间，支持设置时间段任务，支持显示过期时间
- 支持设置优先级
- 支持设置任务当前状态
- 支持拖拽排序，任务可以被拖拽成为某个任务的子任务
- 支持任务添加自定义分类
- 支持列表视图：平铺展示全部 or 分类下的所有任务，支持按状态、优先级、标题排序
- 支持看板视图：显示全部 or 分类下的任务进展状态（按待处理、正在进行、已完成展示三个看板）
<!DOCTYPE html> <html> <head> <title>高级任务管理系统</title> <style> body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; margin: 20px; background: #f5f5f5; } .task-tree { list-style: none; padding: 0; margin: 0; max-width: 800px; margin: 0 auto; } .task-item { margin: 2px 0; background: white; border: 1px solid #e0e0e0; border-radius: 6px; cursor: move; transition: all 0.2s ease; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .task-item-content { padding: 8px 12px; display: flex; align-items: center; gap: 12px; } .task-item:hover { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .task-item.dragging { opacity: 0.6; transform: scale(0.98); } /* 树形结构样式 */ .subtasks { list-style: none; padding-left: 24px; margin: 0; position: relative; } .subtasks::before { content: ''; position: absolute; left: 12px; top: 0; bottom: 0; width: 1px; background: #e0e0e0; } .status-tag { font-size: 0.8em; padding: 3px 8px; border-radius: 12px; flex-shrink: 0; } .priority-tag { font-size: 0.8em; padding: 3px 8px; border-radius: 12px; margin-left: auto; } .status-todo { background: #94a3b8; color: white; } .status-doing { background: #3b82f6; color: white; } .status-done { background: #22c55e; color: white; } .priority-high { background: #fecaca; color: #dc2626; } .priority-medium { background: #fde68a; color: #d97706; } .priority-low { background: #bbf7d0; color: #16a34a; } .priority-none { background: #dadada; color: #373737; } /* 优化后的右键菜单样式 */ .context-menu { position: fixed; background: white; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); z-index: 1000; min-width: 180px; display: none; } .menu-item { padding: 8px 16px; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: background 0.2s; } .menu-item:hover { background: #f8fafc; } .menu-separator { border-top: 1px solid #f1f5f9; margin: 4px 0; } .menu-header { padding: 12px 16px; font-weight: 500; color: #64748b; background: #f8fafc; border-radius: 8px 8px 0 0; } /* 菜单优先级标签调整 */ .context-menu .priority-tag { margin-left: 0px !important; } .menu-subtitle { padding: 8px 16px; font-size: 0.9em; color: #64748b; } .task-input-container { max-width: 800px; margin: 0 auto 20px auto; display: flex; gap: 10px; } .task-input { flex: 1; padding: 8px 12px; border: 1px solid #e0e0e0; border-radius: 6px; font-size: 14px; } .task-add-btn { padding: 8px 16px; background: #3b82f6; color: white; border: none; border-radius: 6px; cursor: pointer; transition: background 0.2s; } .task-add-btn:hover { background: #2563eb; } .sort-container { max-width: 800px; margin: 0 auto 10px auto; display: flex; gap: 10px; justify-content: flex-end; } .sort-btn { padding: 6px 12px; background: white; border: 1px solid #e0e0e0; border-radius: 6px; cursor: pointer; font-size: 14px; color: #64748b; transition: all 0.2s; } .sort-btn:hover { background: #f8fafc; border-color: #94a3b8; } .sort-btn.active { background: #3b82f6; color: white; border-color: #3b82f6; } .menu-item.delete { color: #ef4444; } .menu-item.delete:hover { background: #fef2f2; } .view-switch { max-width: 800px; margin: 0 auto 10px auto; display: flex; gap: 10px; justify-content: flex-end; } .tab-container { max-width: 800px; margin: 0 auto; border-bottom: 1px solid #e0e0e0; display: flex; align-items: center; margin-bottom: 20px; overflow-x: auto; display: flex; align-items: center; justify-content: flex-start; gap: 8px; flex-wrap: wrap; } .tab-container .hide-done-toggle { margin-left: auto; /* 将开关推到最右侧 */ } .tab-item { padding: 8px 16px; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; position: relative; } .tab-item.active { border-bottom-color: #3b82f6; color: #3b82f6; } .add-category-btn { padding: 4px 8px; background: #f1f5f9; border: none; border-radius: 4px; cursor: pointer; margin-left: auto; color: #64748b; margin-left: 0; /* 重置margin */ } .add-category-btn:hover { background: #e2e8f0; } .kanban-view { max-width: 100%; margin: 0 auto; display: flex; gap: 20px; overflow-x: auto; padding: 20px 0; } .kanban-column { flex: 1; min-width: 320px; /* 增加最小宽度 */ background: #f8fafc; border-radius: 8px; padding: 16px; display: flex; flex-direction: column; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); /* 添加阴影 */ border: 1px solid rgba(0, 0, 0, 0.05); /* 添加边框 */ } .kanban-column .task-tree { flex: 1; min-height: 100px; background: #ffffff; border-radius: 6px; padding: 12px; /* 增加内边距 */ margin-top: 12px; width: 100%; /* 确保宽度填充满列 */ box-sizing: border-box; /* 防止padding导致溢出 */ box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02); /* 添加内阴影 */ } .kanban-column .task-item { margin: 8px 0; } .kanban-status-header { font-weight: 500; color: #475569; display: flex; align-items: center; gap: 8px; } .kanban-status-header .status-tag { margin-right: 8px; } .kanban-status-count { font-size: 0.9em; color: #64748b; font-weight: normal; } .view-switch-btn { padding: 6px 12px; background: white; border: 1px solid #e0e0e0; border-radius: 6px; cursor: pointer; font-size: 14px; color: #64748b; } .view-switch-btn.active { background: #3b82f6; color: white; border-color: #3b82f6; } /* 添加隐藏已完成任务开关样式 */ .hide-done-toggle { display: flex; align-items: center; gap: 8px; margin-left: 16px; color: #64748b; font-size: 14px; } .hide-done-toggle input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; } /* 调整看板布局样式 */ .kanban-container { max-width: 1200px; /* 修改最大宽度 */ margin: 0 auto; padding: 20px 0; } /* 添加分类标签右键菜单样式 */ .category-context-menu { position: fixed; background: white; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); z-index: 1000; min-width: 160px; display: none; } .category-menu-item { padding: 8px 16px; cursor: pointer; transition: background 0.2s; } .category-menu-item:hover { background: #f8fafc; } .category-menu-item.delete { color: #ef4444; } .category-menu-item.delete:hover { background: #fef2f2; } /* 给标签添加右键菜单提示 */ .tab-item:not([data-category="all"]):not([data-category="none"])::after { content: '⋮'; margin-left: 4px; color: #64748b; opacity: 0.5; } /* 看板列添加任务样式 */ .kanban-quick-add { margin-top: 12px; display: flex; gap: 8px; } .kanban-quick-add input { flex: 1; padding: 6px 10px; border: 1px solid #e0e0e0; border-radius: 4px; font-size: 13px; } .kanban-quick-add button { padding: 6px 12px; background: #3b82f6; color: white; border: none; border-radius: 4px; cursor: pointer; } /* 任务时间样式 */ .task-time { font-size: 0.85em; color: #64748b; display: flex; align-items: center; gap: 4px; } .task-time.overdue { color: #ef4444; } .task-time-icon { width: 14px; height: 14px; } /* 时间选择弹窗样式 */ .time-picker-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 20px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); z-index: 1001; width: 300px; } .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 1000; } .time-picker-form { display: flex; flex-direction: column; gap: 12px; } .time-picker-form label { display: block; margin-bottom: 4px; color: #475569; } .time-picker-form input { width: 100%; padding: 6px; border: 1px solid #e2e8f0; border-radius: 4px; } .time-picker-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; } .time-picker-actions button { padding: 6px 12px; border-radius: 4px; cursor: pointer; } .time-picker-actions button.cancel { background: #e2e8f0; border: none; color: #475569; } .time-picker-actions button.confirm { background: #3b82f6; border: none; color: white; } /* 修改列表视图样式 */ .list-view-container { max-width: 1200px; margin: 0 auto; display: flex; gap: 20px; padding: 20px 0; } .list-category { flex: 1; min-width: 320px; max-width: 400px; background: #f8fafc; border-radius: 8px; padding: 16px; display: flex; flex-direction: column; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); border: 1px solid rgba(0, 0, 0, 0.05); } .list-category-header { font-weight: 500; color: #475569; display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .list-category-header .task-count { font-size: 0.9em; color: #64748b; font-weight: normal; } .list-category .task-tree { flex: 1; min-height: 100px; background: #ffffff; border-radius: 6px; padding: 12px; margin-top: 12px; width: 100%; box-sizing: border-box; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02); } /* 添加任务分类标签样式 */ .task-category { font-size: 0.8em; color: #64748b; margin-top: 4px; } </style> </head> <body> <div class="container"> <!-- 添加视图切换按钮 --> <div class="view-switch"> <button class="view-switch-btn active" data-view="tab">列表视图</button> <button class="view-switch-btn" data-view="kanban">看板视图</button> </div> <!-- 列表视图 --> <div id="tabView"> <div class="tab-container"> <div class="tab-item active" data-category="all">全部</div> <div class="tab-item" data-category="none">未分类</div> <!-- 动态添加分类标签 --> <button class="add-category-btn"> <span>+</span> </button> <div class="hide-done-toggle"> <input type="checkbox" id="hideDoneToggleTab"> <label for="hideDoneToggleTab">隐藏已完成任务</label> </div> </div> <div class="task-input-container"> <input type="text" id="newTaskInput" class="task-input" placeholder="添加新任务..."> <button id="addTaskBtn" class="task-add-btn">添加</button> </div> <div class="sort-container"> <button class="sort-btn" data-sort="status">按状态</button> <button class="sort-btn" data-sort="priority">按优先级</button> <button class="sort-btn" data-sort="title">按标题</button> </div> <div class="task-tree" id="taskTree"> <!-- 动态添加任务列表 --> </div> </div> <!-- 看板视图 --> <div id="kanbanView" style="display: none;"> <div class="tab-container"> <div class="tab-item active" data-category="all">全部</div> <div class="tab-item" data-category="none">未分类</div> <!-- 动态添加分类标签 --> <button class="add-category-btn"> <span>+</span> </button> <div class="hide-done-toggle"> <input type="checkbox" id="hideDoneToggle"> <label for="hideDoneToggle">隐藏已完成任务</label> </div> </div> <div class="kanban-container"> <div class="kanban-view"> <!-- 动态添加状态列 --> </div> </div> </div> </div> <!-- 修改后的右键菜单 --> <div id="contextMenu" class="context-menu"> <div class="menu-header">任务操作</div> <div class="menu-item" data-action="addSubtask"> <span>添加子任务</span> </div> <div class="menu-item delete" data-action="delete"> <span>删除任务</span> </div> <div class="menu-separator"></div> <div class="menu-item" data-action="setTime"> <span>设置时间</span> </div> <div class="menu-separator"></div> <div class="menu-subtitle">任务状态</div> <div class="menu-item" data-action="status" data-value="todo"> <span class="status-tag status-todo">待处理</span> </div> <div class="menu-item" data-action="status" data-value="doing"> <span class="status-tag status-doing">进行中</span> </div> <div class="menu-item" data-action="status" data-value="done"> <span class="status-tag status-done">已完成</span> </div> <div class="menu-separator"></div> <div class="menu-subtitle">优先级</div> <div class="menu-item" data-action="priority" data-value="high"> <span class="priority-tag priority-high">优先级：高</span> </div> <div class="menu-item" data-action="priority" data-value="medium"> <span class="priority-tag priority-medium">优先级：中</span> </div> <div class="menu-item" data-action="priority" data-value="low"> <span class="priority-tag priority-low">优先级：低</span> </div> <div class="menu-item" data-action="priority" data-value="none"> <span class="priority-tag priority-none">优先级：无</span> </div> <div class="menu-separator"></div> <div class="menu-subtitle">分类</div> <div class="menu-item" data-action="setCategory" data-value=""> <span>设置分类...</span> </div> </div> <!-- 添加分类右键菜单 --> <div id="categoryContextMenu" class="category-context-menu"> <div class="category-menu-item" data-action="rename">重命名分类</div> <div class="category-menu-item delete" data-action="delete">删除分类</div> </div> <!-- 添加时间选择弹窗 --> <div id="timePickerModal" class="time-picker-modal" style="display: none;"> <div class="time-picker-form"> <div> <label>任务类型</label> <select id="timeType"> <option value="deadline">截止日期</option> <option value="period">时间段</option> </select> </div> <div id="deadlineInputs"> <div> <label>截止日期时间</label> <input type="datetime-local" id="deadlineTime"> </div> </div> <div id="periodInputs" style="display: none;"> <div> <label>开始时间</label> <input type="datetime-local" id="startTime"> </div> <div> <label>结束时间</label> <input type="datetime-local" id="endTime"> </div> </div> <div class="time-picker-actions"> <button class="cancel" onclick="closeTimePicker()">取消</button> <button class="confirm" onclick="confirmTimePicker()">确定</button> </div> </div> </div> <div id="modalOverlay" class="modal-overlay" style="display: none;"></div> <script> // 添加分类相关数据 let categories = []; let currentView = 'tab'; // 'tab' 或 'kanban' let currentCategory = 'all'; const taskData = [ { id: "task1", title: "项目规划", status: "doing", parentId: null, order: 1, priority: "high", category: '', // 新增category字段 timeType: null, // 'deadline' or 'period' deadlineTime: null, startTime: null, endTime: null }, { id: "task2", title: "需求分析", status: "done", parentId: "task1", order: 1, priority: "medium", category: '', // 新增category字段 timeType: null, // 'deadline' or 'period' deadlineTime: null, startTime: null, endTime: null } ]; let tasks = []; let draggedItem = null; let currentTaskId = null; let currentSort = ''; // 当前排序方式 let hideCompletedTasks = false; // 添加隐藏已完成任务状态 let currentEditingTaskId = null; document.addEventListener('DOMContentLoaded', () => { loadTasks(); loadCategories(); // 视图切换按钮事件 const viewSwitchBtns = document.querySelectorAll('.view-switch-btn'); viewSwitchBtns.forEach(btn => { btn.addEventListener('click', (e) => { const view = e.target.dataset.view; switchView(view); }); }); // 分类标签点击事件 const tabContainer = document.querySelector('.tab-container'); if (tabContainer) { tabContainer.addEventListener('click', (e) => { const tab = e.target.closest('.tab-item'); if (tab) { document.querySelectorAll('.tab-item').forEach(t => t.classList.remove('active')); tab.classList.add('active'); currentCategory = tab.dataset.category; renderCategories(); } }); } // 添加分类按钮事件 document.querySelectorAll('.add-category-btn').forEach(btn => { btn.addEventListener('click', () => { const name = prompt('请输入分类名称：'); if (name) addCategory(name.trim()); }); }); // 时间类型选择事件 const timeTypeSelect = document.getElementById('timeType'); if (timeTypeSelect) { timeTypeSelect.addEventListener('change', toggleTimeInputs); } // 隐藏已完成任务切换事件 const hideDoneToggle = document.getElementById('hideDoneToggle'); const hideDoneToggleTab = document.getElementById('hideDoneToggleTab'); if (hideDoneToggle) { hideDoneToggle.addEventListener('change', (e) => { hideCompletedTasks = e.target.checked; if (hideDoneToggleTab) hideDoneToggleTab.checked = e.target.checked; if (currentView === 'kanban') { renderKanbanView(); } else { renderCategories(); } }); } if (hideDoneToggleTab) { hideDoneToggleTab.addEventListener('change', (e) => { hideCompletedTasks = e.target.checked; if (hideDoneToggle) hideDoneToggle.checked = e.target.checked; renderCategories(); }); } // 初始化视图 renderCategories(); }); function loadTasks() { const saved = localStorage.getItem('tasks'); tasks = saved ? JSON.parse(saved) : [...taskData]; } function saveTasks() { localStorage.setItem('tasks', JSON.stringify(tasks)); } function renderTasks() { const container = document.getElementById('taskTree'); if (!container) return; // 添加空检查 container.innerHTML = ''; buildTaskTree(container, null); addDragListeners(); } function buildTaskTree(container, parentId) { let filtered = tasks.filter(t => t.parentId === parentId); // 根据当前分类过滤 if (currentView === 'tab' && currentCategory !== 'all') { filtered = filtered.filter(t => currentCategory === 'none' ? !t.category : t.category === currentCategory ); } // 隐藏已完成任务 if (hideCompletedTasks) { filtered = filtered.filter(t => t.status !== 'done'); } // 根据当前排序方式对任务进行排序 if (currentSort) { filtered.sort((a, b) => { switch (currentSort) { case 'priority': const priorityOrder = { high: 1, medium: 2, low: 3, none: 4 }; return (priorityOrder[a.priority] || 4) - (priorityOrder[b.priority] || 4); case 'status': const statusOrder = { doing: 1, todo: 2, done: 3 }; return statusOrder[a.status] - statusOrder[b.status]; case 'title': return a.title.localeCompare(b.title); default: return a.order - b.order; } }); } else { filtered.sort((a, b) => a.order - b.order); } filtered.forEach(task => { const li = document.createElement('li'); li.className = 'task-item'; li.draggable = true; li.dataset.id = task.id; const content = document.createElement('div'); content.className = 'task-item-content'; content.innerHTML = renderTaskContent(task); li.appendChild(content); const hasChildren = tasks.some(t => t.parentId === task.id); if (hasChildren) { const subList = document.createElement('ul'); subList.className = 'subtasks'; li.appendChild(subList); buildTaskTree(subList, task.id); } container.appendChild(li); }); } function addDragListeners() { document.querySelectorAll('.task-item').forEach(item => { item.addEventListener('dragstart', handleDragStart); item.addEventListener('dragover', handleDragOver); item.addEventListener('dragend', handleDragEnd); item.addEventListener('drop', handleDrop); }); } function handleDragStart(e) { draggedItem = e.target.closest('.task-item'); draggedItem.classList.add('dragging'); e.dataTransfer.effectAllowed = 'move'; } function handleDragOver(e) { e.preventDefault(); if (!draggedItem) return; const targetItem = e.target.closest('.task-item'); if (!targetItem || targetItem === draggedItem) return; const rect = targetItem.getBoundingClientRect(); const mouseY = e.clientY; const mouseX = e.clientX; // 定义拖拽区域 const topThreshold = rect.top + rect.height * 0.25; const bottomThreshold = rect.bottom - rect.height * 0.25; const middleZone = mouseY > topThreshold && mouseY < bottomThreshold; // 水平方向判断 const leftEdge = rect.left; const horizontalThreshold = 50; // 向左拖动50px时取消父子关系 const shouldBeSibling = mouseX < leftEdge - horizontalThreshold; // 清除所有临时样式 document.querySelectorAll('.task-item').forEach(item => { item.style.borderTop = ''; item.style.borderBottom = ''; item.style.backgroundColor = ''; }); const currentList = targetItem.parentElement; const isDifferentList = draggedItem.parentElement !== currentList; if (middleZone && !shouldBeSibling && !isDifferentList) { // 在中间区域且不满足向左拖动条件时，表示将成为子任务 targetItem.style.backgroundColor = '#f0f9ff'; let subtasksList = targetItem.querySelector('.subtasks'); if (!subtasksList) { subtasksList = document.createElement('ul'); subtasksList.className = 'subtasks'; targetItem.appendChild(subtasksList); } const afterElement = getInsertPosition(subtasksList, mouseY); if (afterElement) { subtasksList.insertBefore(draggedItem, afterElement); } else { subtasksList.appendChild(draggedItem); } } else { // 如果是在同一列表中移动，先从原位置移除 if (!isDifferentList) { draggedItem.parentNode.removeChild(draggedItem); } // 在上下区域或满足向左拖动条件时，作为同级任务插入 const parentList = shouldBeSibling ? targetItem.parentElement.parentElement : targetItem.parentElement; if (mouseY < rect.top + rect.height / 2) { targetItem.style.borderTop = '2px solid #3b82f6'; parentList.insertBefore(draggedItem, targetItem); } else { targetItem.style.borderBottom = '2px solid #3b82f6'; parentList.insertBefore(draggedItem, targetItem.nextSibling); } if (shouldBeSibling) { targetItem.style.backgroundColor = '#f1f5f9'; } } e.stopPropagation(); } function getInsertPosition(container, y) { const draggableElements = [...container.querySelectorAll('.task-item:not(.dragging)')]; return draggableElements.reduce((closest, child) => { const box = child.getBoundingClientRect(); const offset = y - box.top - box.height / 2; if (offset < 0 && offset > closest.offset) { return { offset: offset, element: child }; } else { return closest; } }, { offset: Number.NEGATIVE_INFINITY }).element; } function handleDragEnd(e) { // 清除所有临时样式 document.querySelectorAll('.task-item').forEach(item => { item.style.borderTop = ''; item.style.borderBottom = ''; item.style.backgroundColor = ''; }); draggedItem.classList.remove('dragging'); // 在看板视图中更新任务状态 if (currentView === 'kanban') { const taskId = draggedItem.dataset.id; const task = tasks.find(t => t.id === taskId); const newStatusColumn = draggedItem.closest('.task-tree'); if (task && newStatusColumn) { const newStatus = newStatusColumn.dataset.status; if (newStatus && task.status !== newStatus) { task.status = newStatus; saveTasks(); } } } updateTaskOrders(); saveTasks(); if (currentView === 'kanban') { renderKanbanView(); } else { renderTasks(); } } function handleDrop(e) { e.preventDefault(); } function getDragAfterElement(container, y) { const items = [...container.querySelectorAll('.task-item:not(.dragging)')]; return items.reduce((closest, child) => { const box = child.getBoundingClientRect(); const offset = y - box.top - box.height / 2; return offset < 0 && offset > closest.offset ? { offset: offset, element: child } : closest; }, { offset: Number.NEGATIVE_INFINITY }).element; } function updateTaskOrders() { if (!currentSort) { // 只在没有自定义排序时更新order document.querySelectorAll('.task-item').forEach((item, index) => { const parentList = item.parentElement; const parentItem = parentList.closest('.task-item'); const task = tasks.find(t => t.id === item.dataset.id); if (task) { task.order = index + 1; task.parentId = parentItem ? parentItem.dataset.id : null; } }); } else { // 在排序模式下只更新父子关系 document.querySelectorAll('.task-item').forEach((item) => { const parentList = item.parentElement; const parentItem = parentList.closest('.task-item'); const task = tasks.find(t => t.id === item.dataset.id); if (task) { task.parentId = parentItem ? parentItem.dataset.id : null; } }); } } document.addEventListener('contextmenu', (e) => { const taskItem = e.target.closest('.task-item'); if (taskItem) { e.preventDefault(); currentTaskId = taskItem.dataset.id; showContextMenu(e.clientX, e.clientY); } }); document.addEventListener('click', hideContextMenu); function showContextMenu(x, y) { const menu = document.getElementById('contextMenu'); menu.style.display = 'block'; const winWidth = window.innerWidth; const winHeight = window.innerHeight; const menuRect = menu.getBoundingClientRect(); x = x + menuRect.width > winWidth ? winWidth - menuRect.width : x; y = y + menuRect.height > winHeight ? winHeight - menuRect.height : y; menu.style.left = `${x}px`; menu.style.top = `${y}px`; menu.querySelectorAll('.menu-item').forEach(item => { item.removeEventListener('click', handleMenuClick); item.addEventListener('click', handleMenuClick); }); } function hideContextMenu() { const menu = document.getElementById('contextMenu'); menu.style.display = 'none'; currentTaskId = null; } // 添加删除任务的函数 function deleteTask(taskId) { // 递归删除子任务 function recursiveDelete(id) { const children = tasks.filter(t => t.parentId === id); children.forEach(child => recursiveDelete(child.id)); tasks = tasks.filter(t => t.id !== id); } if (confirm('确定要删除这个任务吗？这将同时删除其所有子任务。')) { recursiveDelete(taskId); saveTasks(); renderTasks(); } } // 修改菜单点击处理函数 function handleMenuClick(e) { const action = e.currentTarget.dataset.action; const value = e.currentTarget.dataset.value; const task = tasks.find(t => t.id === currentTaskId); if (!task) return; switch (action) { case 'status': task.status = value; break; case 'priority': task.priority = value === 'none' ? null : value; break; case 'addSubtask': const title = prompt('请输入子任务名称：'); if (title && title.trim()) { addTask(title.trim(), task.id); } break; case 'delete': deleteTask(task.id); break; case 'setCategory': // 检查是否为顶级任务 if (task.parentId !== null) { alert('只有顶级任务支持设置分类'); return; } const categoryList = ['无分类', '删除分类', ...categories]; const category = prompt('请输入或选择分类：\n当前分类：' + (task.category || '无') + '\n' + categoryList.join('\n')); if (category === '无分类' || category === '删除分类') { task.category = ''; } else if (category && category.trim()) { const trimmedCategory = category.trim(); if (!categories.includes(trimmedCategory)) { categories.push(trimmedCategory); saveCategories(); updateCategoryTabs(); } task.category = trimmedCategory; } break; case 'setTime': showTimePicker(currentTaskId); break; } saveTasks(); if (currentView === 'kanban') { renderKanbanView(); } else { renderTasks(); } hideContextMenu(); } function getStatusText(status) { return { todo: '待处理', doing: '进行中', done: '已完成' }[status] || '未知状态'; } function getPriorityText(priority) { return `优先级：${priority}`; } // 生成唯一ID的函数 function generateId() { return 'task' + Date.now() + Math.random().toString(36).substr(2, 5); } // 添加新任务的函数 function addTask(title, parentId = null) { // 获取同级任务 const siblingTasks = tasks.filter(t => t.parentId === parentId); // 将所有同级任务的 order 加 1 siblingTasks.forEach(task => { task.order += 1; }); const newTask = { id: generateId(), title: title, status: 'todo', parentId: parentId, order: 1, // 新任务总是放在最前面，order 为 1 priority: 'none', category: '', // 新增category字段 timeType: null, // 'deadline' or 'period' deadlineTime: null, startTime: null, endTime: null }; tasks.push(newTask); saveTasks(); renderTasks(); return newTask; } // 绑定添加任务按钮事件 document.addEventListener('DOMContentLoaded', () => { const input = document.getElementById('newTaskInput'); const addBtn = document.getElementById('addTaskBtn'); function handleAddTask() { const title = input.value.trim(); if (title) { addTask(title); input.value = ''; } } if (addBtn && input) { addBtn.addEventListener('click', handleAddTask); input.addEventListener('keypress', (e) => { if (e.key === 'Enter') { handleAddTask(); } }); } loadTasks(); renderTasks(); // 添加排序按钮事件监听 document.querySelectorAll('.sort-btn').forEach(btn => { btn.addEventListener('click', (e) => { const sortType = e.target.dataset.sort; // 更新按钮状态 document.querySelectorAll('.sort-btn').forEach(b => { b.classList.remove('active'); }); if (currentSort === sortType) { // 再次点击同一个排序按钮时取消排序 currentSort = ''; } else { currentSort = sortType; e.target.classList.add('active'); } renderTasks(); }); }); // 视图切换按钮事件 document.querySelectorAll('.view-switch-btn').forEach(btn => { btn.addEventListener('click', (e) => { const view = e.target.dataset.view; switchView(view); }); }); // 分类标签点击事件 const tabContainer = document.querySelector('.tab-container'); if (tabContainer) { tabContainer.addEventListener('click', (e) => { const tab = e.target.closest('.tab-item'); if (tab) { document.querySelectorAll('.tab-item').forEach(t => t.classList.remove('active')); tab.classList.add('active'); currentCategory = tab.dataset.category; renderCategories(); } }); } // 添加分类按钮事件 document.querySelectorAll('.add-category-btn').forEach(btn => { btn.addEventListener('click', () => { const name = prompt('请输入分类名称：'); if (name) addCategory(name.trim()); }); }); loadCategories(); renderCategories(); // 初始化隐藏已完成任务开关状态 const hideDoneToggle = document.getElementById('hideDoneToggle'); const hideDoneToggleTab = document.getElementById('hideDoneToggleTab'); if (hideDoneToggle) { hideDoneToggle.checked = hideCompletedTasks; hideDoneToggle.addEventListener('change', (e) => { hideCompletedTasks = e.target.checked; if (hideDoneToggleTab) hideDoneToggleTab.checked = e.target.checked; if (currentView === 'kanban') { renderKanbanView(); } else { renderCategories(); } }); } if (hideDoneToggleTab) { hideDoneToggleTab.checked = hideCompletedTasks; hideDoneToggleTab.addEventListener('change', (e) => { hideCompletedTasks = e.target.checked; if (hideDoneToggle) hideDoneToggle.checked = e.target.checked; renderCategories(); }); } }); // 加载分类数据 function loadCategories() { const saved = localStorage.getItem('categories'); categories = saved ? JSON.parse(saved) : []; } // 保存分类数据 function saveCategories() { localStorage.setItem('categories', JSON.stringify(categories)); } // 添加分类 function addCategory(name) { if (name && !categories.includes(name)) { categories.push(name); saveCategories(); updateCategoryTabs(); // 如果在看板视图，重新渲染 if (currentView === 'kanban') { renderKanbanView(); } } } // 渲染分类标签或看板 function renderCategories() { if (currentView === 'tab') { // 更新分类标签 const tabContainer = document.querySelector('.tab-container'); const addCategoryBtn = tabContainer.querySelector('.add-category-btn'); const hideDoneToggle = tabContainer.querySelector('.hide-done-toggle'); // 清空现有标签，保留添加按钮和隐藏开关 Array.from(tabContainer.children).forEach(child => { if (!child.classList.contains('add-category-btn') && !child.classList.contains('hide-done-toggle')) { child.remove(); } }); // 添加"全部"和"未分类"标签 const allTab = document.createElement('div'); allTab.className = `tab-item${currentCategory === 'all' ? ' active' : ''}`; allTab.dataset.category = 'all'; allTab.textContent = '全部'; const noneTab = document.createElement('div'); noneTab.className = `tab-item${currentCategory === 'none' ? ' active' : ''}`; noneTab.dataset.category = 'none'; noneTab.textContent = '未分类'; // 插入标签到添加按钮前 tabContainer.insertBefore(allTab, addCategoryBtn); tabContainer.insertBefore(noneTab, addCategoryBtn); // 添加其他分类标签 categories.forEach(category => { const tab = document.createElement('div'); tab.className = `tab-item${currentCategory === category ? ' active' : ''}`; tab.dataset.category = category; tab.textContent = category; // 添加右键菜单监听 tab.addEventListener('contextmenu', (e) => { e.preventDefault(); currentCategoryElement = tab; showCategoryContextMenu(e.clientX, e.clientY); }); tabContainer.insertBefore(tab, addCategoryBtn); }); // 重新渲染任务列表 renderTasks(); } else { // 原有的看板视图渲染代码 const kanbanView = document.querySelector('.kanban-view'); kanbanView.innerHTML = ''; // 定义状态列 const statuses = [ { key: 'todo', text: '待处理', class: 'status-todo' }, { key: 'doing', text: '进行中', class: 'status-doing' }, { key: 'done', text: '已完成', class: 'status-done' } ]; // 过滤任务 let filteredTasks = tasks; if (currentCategory !== 'all') { filteredTasks = filteredTasks.filter(t => currentCategory === 'none' ? !t.category : t.category === currentCategory ); } if (hideCompletedTasks) { filteredTasks = filteredTasks.filter(t => t.status !== 'done'); } // 获取实际要显示的列数 let visibleColumns = hideCompletedTasks ? 2 : 3; // 设置列宽 const columnWidth = `${100 / visibleColumns}%`; // 创建状态列 statuses.forEach(status => { // 如果隐藏已完成任务且是已完成状态，则跳过 if (hideCompletedTasks && status.key === 'done') return; const column = document.createElement('div'); column.className = 'kanban-column'; column.style.width = columnWidth; // 设置列宽 column.style.flexGrow = '1'; // 允许列伸展 const tasksInStatus = filteredTasks .filter(t => t.status === status.key && !t.parentId) .sort((a, b) => a.order - b.order); column.innerHTML = ` <div class="kanban-status-header"> <span class="status-tag ${status.class}">${status.text}</span> <span class="kanban-status-count">${tasksInStatus.length}</span> </div> <div class="kanban-quick-add"> <input type="text" placeholder="添加新任务..." data-status="${status.key}"> <button onclick="quickAddTask(this)">添加</button> </div> <ul class="task-tree" data-status="${status.key}"></ul> `; kanbanView.appendChild(column); const taskList = column.querySelector('.task-tree'); tasksInStatus.forEach(task => { renderKanbanTask(task, taskList); }); }); addDragListeners(); } } // 添加列表分类函数 function addListCategory(name, tasks, category) { const listContainer = document.querySelector('.list-view-container'); const div = document.createElement('div'); div.className = 'list-category'; div.innerHTML = ` <div class="list-category-header"> <span>${name}</span> <span class="task-count">${tasks.length}</span> </div> <div class="kanban-quick-add"> <input type="text" placeholder="添加新任务..." data-category="${category}"> <button onclick="quickAddTask(this)">添加</button> </div> <ul class="task-tree" data-category="${category}"></ul> `; listContainer.appendChild(div); const taskList = div.querySelector('.task-tree'); const rootTasks = tasks.filter(t => !t.parentId); rootTasks.forEach(task => { renderKanbanTask(task, taskList); }); } // 添加快速添加任务功能 function quickAddTask(btn) { const input = btn.previousElementSibling; const title = input.value.trim(); if (!title) return; const newTask = addTask(title); // 根据当前视图设置任务属性 if (currentView === 'kanban') { newTask.status = input.dataset.status; } // 设置分类 const category = input.dataset.category; if (category && category !== 'all') { newTask.category = category === 'none' ? '' : category; } input.value = ''; if (currentView === 'kanban') { renderKanbanView(); } else { renderCategories(); } } // 修改视图切换函数 function switchView(view) { currentView = view; document.querySelectorAll('.view-switch-btn').forEach(btn => { btn.classList.toggle('active', btn.dataset.view === view); }); const tabView = document.getElementById('tabView'); const kanbanView = document.getElementById('kanbanView'); if (view === 'kanban') { tabView.style.display = 'none'; kanbanView.style.display = 'block'; // 在切换到看板视图时更新分类标签 updateCategoryTabs(); renderKanbanView(); } else { tabView.style.display = 'block'; kanbanView.style.display = 'none'; renderCategories(); } // 绑定分类标签点击事件 document.querySelectorAll('.tab-container .tab-item').forEach(tab => { tab.addEventListener('click', (e) => { const category = e.target.dataset.category; if (category) { currentCategory = category; document.querySelectorAll('.tab-item').forEach(t => t.classList.remove('active')); e.target.classList.add('active'); if (currentView === 'kanban') { renderKanbanView(); } else { renderCategories(); } } }); }); // 同步隐藏已完成任务状态 document.getElementById('hideDoneToggle').checked = hideCompletedTasks; document.getElementById('hideDoneToggleTab').checked = hideCompletedTasks; } // 新增看板视图渲染函数 function renderKanbanView() { const kanbanView = document.querySelector('.kanban-view'); kanbanView.innerHTML = ''; // 定义状态列 const statuses = [ { key: 'todo', text: '待处理', class: 'status-todo' }, { key: 'doing', text: '进行中', class: 'status-doing' }, { key: 'done', text: '已完成', class: 'status-done' } ]; // 过滤任务 let filteredTasks = tasks; if (currentCategory !== 'all') { filteredTasks = filteredTasks.filter(t => currentCategory === 'none' ? !t.category : t.category === currentCategory ); } if (hideCompletedTasks) { filteredTasks = filteredTasks.filter(t => t.status !== 'done'); } // 获取实际要显示的列数 let visibleColumns = hideCompletedTasks ? 2 : 3; // 设置列宽 const columnWidth = `${100 / visibleColumns}%`; // 创建状态列 statuses.forEach(status => { // 如果隐藏已完成任务且是已完成状态，则跳过 if (hideCompletedTasks && status.key === 'done') return; const column = document.createElement('div'); column.className = 'kanban-column'; column.style.width = columnWidth; // 设置列宽 column.style.flexGrow = '1'; // 允许列伸展 const tasksInStatus = filteredTasks .filter(t => t.status === status.key && !t.parentId) .sort((a, b) => a.order - b.order); column.innerHTML = ` <div class="kanban-status-header"> <span class="status-tag ${status.class}">${status.text}</span> <span class="kanban-status-count">${tasksInStatus.length}</span> </div> <div class="kanban-quick-add"> <input type="text" placeholder="添加新任务..." data-status="${status.key}"> <button onclick="quickAddTask(this)">添加</button> </div> <ul class="task-tree" data-status="${status.key}"></ul> `; kanbanView.appendChild(column); const taskList = column.querySelector('.task-tree'); tasksInStatus.forEach(task => { renderKanbanTask(task, taskList); }); }); addDragListeners(); } // 新增看板任务渲染函数 function renderKanbanTask(task, container) { const li = document.createElement('li'); li.className = 'task-item'; li.draggable = true; li.dataset.id = task.id; const content = document.createElement('div'); content.className = 'task-item-content'; content.innerHTML = renderTaskContent(task); li.appendChild(content); // 渲染子任务 const children = tasks .filter(t => t.parentId === task.id) .sort((a, b) => a.order - b.order); if (children.length > 0) { const subList = document.createElement('ul'); subList.className = 'subtasks'; children.forEach(child => renderKanbanTask(child, subList)); li.appendChild(subList); } container.appendChild(li); } // 显示分类右键菜单 function showCategoryContextMenu(x, y) { const menu = document.getElementById('categoryContextMenu'); menu.style.display = 'block'; // 调整菜单位置 const winWidth = window.innerWidth; const winHeight = window.innerHeight; const menuRect = menu.getBoundingClientRect(); x = Math.min(x, winWidth - menuRect.width); y = Math.min(y, winHeight - menuRect.height); menu.style.left = `${x}px`; menu.style.top = `${y}px`; // 添加菜单项点击事件 menu.querySelectorAll('.category-menu-item').forEach(item => { item.removeEventListener('click', handleCategoryMenuClick); item.addEventListener('click', handleCategoryMenuClick); }); } // 隐藏分类右键菜单 function hideCategoryContextMenu() { const menu = document.getElementById('categoryContextMenu'); menu.style.display = 'none'; currentCategoryElement = null; } // 处理分类菜单点击事件 function handleCategoryMenuClick(e) { const action = e.currentTarget.dataset.action; const category = currentCategoryElement.dataset.category; switch (action) { case 'rename': const newName = prompt('请输入新的分类名称：', category); if (newName && newName.trim() && newName !== category) { // 更新分类名称 const index = categories.indexOf(category); if (index !== -1) { categories[index] = newName; // 更新所有使用该分类的任务 tasks.forEach(task => { if (task.category === category) { task.category = newName; } }); saveCategories(); saveTasks(); renderCategories(); if (currentView === 'kanban') { renderKanbanView(); } else { renderTasks(); } } } break; case 'delete': if (confirm(`确定要删除分类"${category}"吗？\n该分类下的任务将变为未分类。`)) { // 删除分类 const index = categories.indexOf(category); if (index !== -1) { categories.splice(index, 1); // 将该分类下的任务设为未分类 tasks.forEach(task => { if (task.category === category) { task.category = ''; } }); saveCategories(); saveTasks(); // 如果当前显示的是被删除的分类，切换到"全部" if (currentCategory === category) { currentCategory = 'all'; } renderCategories(); if (currentView === 'kanban') { renderKanbanView(); } else { renderTasks(); } } } break; } hideCategoryContextMenu(); } // 修改任务渲染函数，添加时间显示 function renderTaskContent(task) { const timeHtml = getTaskTimeHtml(task); const categoryHtml = task.category && currentCategory === 'all' ? `<div class="task-category">分类：${task.category}</div>` : ''; return ` <div> <div style="display: flex; align-items: center; gap: 12px;"> <span class="status-tag status-${task.status}">${getStatusText(task.status)}</span> <span class="title">${task.title}</span> ${timeHtml} ${task.priority && task.priority !== 'none' ? `<span class="priority-tag priority-${task.priority}">${getPriorityText(task.priority)}</span>` : ''} </div> ${categoryHtml} </div> `; } function getTaskTimeHtml(task) { if (!task.timeType) return ''; const now = new Date(); let isOverdue = false; let timeText = ''; if (task.timeType === 'deadline') { const deadline = new Date(task.deadlineTime); isOverdue = now > deadline && task.status !== 'done'; timeText = formatRelativeDateTime(deadline, isOverdue); } else if (task.timeType === 'period') { const start = new Date(task.startTime); const end = new Date(task.endTime); isOverdue = now > end && task.status !== 'done'; timeText = `${formatRelativeDateTime(start)} - ${formatRelativeDateTime(end, isOverdue)}`; } return `<span class="task-time ${isOverdue ? 'overdue' : ''}">${timeText}</span>`; } function formatRelativeDateTime(date, isOverdue = false) { const now = new Date(); const today = new Date(now.getFullYear(), now.getMonth(), now.getDate()); const targetDate = new Date(date.getFullYear(), date.getMonth(), date.getDate()); const diffDays = Math.floor((targetDate - today) / (1000 * 60 * 60 * 24)); let timeStr = date.toLocaleString('zh-CN', { hour: '2-digit', minute: '2-digit' }); if (isOverdue) { // 检查是否是同一天但是时间已过 if (diffDays === 0) { const nowTime = now.getTime(); const targetTime = date.getTime(); if (targetTime < nowTime) { return `已过期 ${formatTime(date)}`; } } const overdueDays = Math.abs(diffDays); return `已过期${overdueDays}天`; } // 相对日期显示 if (diffDays === 0) { return `今天 ${formatTime(date)}`; } else if (diffDays === 1) { return `明天 ${formatTime(date)}`; } else if (diffDays === -1) { return `昨天 ${formatTime(date)}`; } return date.toLocaleString('zh-CN', { month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit' }); } function formatTime(date) { return date.toLocaleString('zh-CN', { hour: '2-digit', minute: '2-digit' }); } // 添加时间选择相关功能 function showTimePicker(taskId) { currentEditingTaskId = taskId; const task = tasks.find(t => t.id === taskId); // 设置当前值 document.getElementById('timeType').value = task.timeType || 'deadline'; document.getElementById('deadlineTime').value = task.deadlineTime || ''; document.getElementById('startTime').value = task.startTime || ''; document.getElementById('endTime').value = task.endTime || ''; toggleTimeInputs(); document.getElementById('timePickerModal').style.display = 'block'; document.getElementById('modalOverlay').style.display = 'block'; } function closeTimePicker() { document.getElementById('timePickerModal').style.display = 'none'; document.getElementById('modalOverlay').style.display = 'none'; currentEditingTaskId = null; } function confirmTimePicker() { const task = tasks.find(t => t.id === currentEditingTaskId); if (!task) return; const timeType = document.getElementById('timeType').value; task.timeType = timeType; if (timeType === 'deadline') { task.deadlineTime = document.getElementById('deadlineTime').value; task.startTime = null; task.endTime = null; } else { task.deadlineTime = null; task.startTime = document.getElementById('startTime').value; task.endTime = document.getElementById('endTime').value; } saveTasks(); closeTimePicker(); if (currentView === 'kanban') { renderKanbanView(); } else { renderTasks(); } } function toggleTimeInputs() { const timeType = document.getElementById('timeType').value; document.getElementById('deadlineInputs').style.display = timeType === 'deadline' ? 'block' : 'none'; document.getElementById('periodInputs').style.display = timeType === 'period' ? 'block' : 'none'; } // 更新分类标签 function updateCategoryTabs() { const tabContainers = document.querySelectorAll('.tab-container'); tabContainers.forEach(tabContainer => { const addCategoryBtn = tabContainer.querySelector('.add-category-btn'); const hideDoneToggle = tabContainer.querySelector('.hide-done-toggle'); // 清空现有标签 Array.from(tabContainer.children).forEach(child => { if (!child.classList.contains('add-category-btn') && !child.classList.contains('hide-done-toggle')) { child.remove(); } }); // 添加基本标签 const allTab = createTabElement('全部', 'all'); const noneTab = createTabElement('未分类', 'none'); tabContainer.insertBefore(allTab, addCategoryBtn); tabContainer.insertBefore(noneTab, addCategoryBtn); // 添加分类标签 categories.forEach(category => { const tab = createTabElement(category, category); // 为自定义分类添加右键菜单 if (category !== 'all' && category !== 'none') { tab.addEventListener('contextmenu', (e) => { e.preventDefault(); currentCategoryElement = tab; showCategoryContextMenu(e.clientX, e.clientY); }); } tabContainer.insertBefore(tab, addCategoryBtn); }); }); } function createTabElement(text, category) { const tab = document.createElement('div'); tab.className = `tab-item${currentCategory === category ? ' active' : ''}`; tab.dataset.category = category; tab.textContent = text; return tab; } // 添加点击事件监听器来关闭分类右键菜单 document.addEventListener('click', (e) => { if (!e.target.closest('#categoryContextMenu') && !e.target.closest('.tab-item')) { hideCategoryContextMenu(); } }); </script> </body> </html>
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于