当前位置：首页 > news >正文

零依赖每月工作计划备忘录：高效管理你的每一天

news 2025/9/3 7:14:40

📅 零依赖每月工作计划备忘录：高效管理你的每一天

在这里插入图片描述
请添加图片描述

🌈 个人主页：创客白泽 - CSDN博客
🔥 系列专栏：🐍《Python开源项目实战》
💡 热爱不止于代码，热情源自每一个灵感闪现的夜晚。愿以开源之火，点亮前行之路。
🐋 希望大家多多支持，我们一起进步！
👍 🎉如果文章对你有帮助的话，欢迎点赞 👍🏻 评论 💬 收藏 ⭐️ 加关注+💗分享给更多人哦

请添加图片描述
在这里插入图片描述

在现代快节奏的工作环境中，一个高效的任务管理工具至关重要。本文将介绍一款基于纯前端技术开发的每月工作计划备忘录，支持拖拽排序、Excel导入导出等功能，完全离线使用，保护你的数据隐私。

🌟 概述

每月工作计划备忘录是一款专为个人和团队设计的任务管理工具，它采用纯前端技术实现，无需任何后端支持，真正做到零依赖、轻量级和高性能。通过直观的月度视图和灵活的任务管理功能，帮助用户合理安排时间，提高工作效率。

核心特点：

🚀 纯前端实现，零外部依赖
📱 响应式设计，支持桌面和移动端
💾 本地存储，数据永不丢失
📤 支持Excel/CSV导入导出
🎯 智能时间管理和优先级设置
🖱️ 拖拽操作，直观易用

📋 功能特性

1. 月度视图展示

直观的31天网格布局，清晰展示整月安排
上午、下午、晚上三个时间段划分
今日高亮显示，快速定位当前日期

2. 任务管理

添加/编辑/删除任务
设置任务优先级（高/中/低）
标记任务完成状态
任务备注信息

3. 时间设置

自定义各时段时间范围
灵活显示/隐藏晚上时段
移动端时间范围显示控制

4. 数据导入导出

CSV格式任务导入
日报/月报Excel导出
数据备份与恢复

5. 个性化设置

多主题切换（浅色/深色/护眼绿）
自定义表格标题
时段显示偏好设置

🎨 展示效果

桌面端效果

在这里插入图片描述

设置页面

在这里插入图片描述

任务编辑界面

在这里插入图片描述

🛠️ 使用步骤说明

1. 基本操作

添加任务：

点击任意日期和时段的单元格
填写任务标题、时间、优先级等信息
可以选择应用到多个日期
点击保存完成任务添加

编辑任务：

点击已存在的任务卡片
修改任务信息
点击保存更新任务

删除任务：

点击任务卡片上的删除按钮(×)
确认删除操作

2. 拖拽功能

桌面端：直接拖拽任务到其他单元格
移动端：长按任务后拖拽到目标位置

3. 数据导入

点击"CSV导入"按钮
选择或拖拽CSV文件到上传区域
预览导入的任务数据
确认导入操作

4. 数据导出

点击"导出Excel"下拉菜单
选择导出类型（日报/月报/CSV备份）
对于日报，选择具体日期
系统自动生成并下载文件

5. 个性化设置

点击右上角设置按钮(⚙️)
调整主题颜色
配置时段显示选项
设置时间范围
保存设置

🔍 代码解析

核心数据结构

// 任务数据结构
let task = {id: generateId(),           // 唯一标识title: '任务标题',          // 任务名称start: '09:00',            // 开始时间end: '10:00',              // 结束时间note: '任务备注',          // 备注信息priority: 2,               // 优先级(1-3)done: false,               // 完成状态day: 15,                   // 日期(1-31)slot: 'AM',                // 时段(AM/PM/EVENING)order: Date.now()          // 排序依据
};

本地存储机制

// 保存数据到本地存储
function saveToLocalStorage(taskData = null) {const dataToSave = taskData || tasks;localStorage.setItem('weeklyTasks', JSON.stringify(dataToSave));if (taskData === null) {showToast('已自动保存到本地');}
}// 从本地存储加载数据
function loadFromLocalStorage() {const saved = localStorage.getItem('weeklyTasks');if (saved) {try {const parsed = JSON.parse(saved);tasks = Array.isArray(parsed) ? parsed : [];return tasks;} catch (error) {console.error('解析本地存储数据失败:', error);tasks = [];return [];}}tasks = [];return [];
}

拖拽功能实现

// 允许放置
function allowDrop(ev) {ev.preventDefault();
}// 处理放置操作
function drop(ev, targetType, targetElement = null) {ev.preventDefault();if (!draggedTask) return;const cell = targetElement || ev.target.closest('.task-cell');if (cell) {// 网格间移动，直接更新位置draggedTask.day = parseInt(cell.dataset.day);draggedTask.slot = cell.dataset.slot;}renderTasks();saveToLocalStorage();
}

响应式布局设计

/* 桌面端布局 */
.monthly-grid {display: grid;grid-template-columns: 80px repeat(3, 1fr);grid-template-rows: 60px repeat(31, 1fr);gap: 1px;background-color: var(--border-color);
}/* 移动端适配 */
@media (max-width: 768px) {.monthly-grid {grid-template-columns: 60px repeat(3, 1fr);grid-template-rows: 50px repeat(31, 1fr);}.task-card {font-size: 12px;padding: 4px;}
}

Excel导出功能

// 导出月报功能
function exportWeeklyReport() {const tasks = loadFromLocalStorage() || [];const slotNames = { 'AM': '上午', 'PM': '下午', 'EVENING': '晚上' };const priorityNames = { 1: '高', 2: '中', 3: '低' };// 获取当前月份信息const today = new Date();const currentMonth = today.getMonth();const currentYear = today.getFullYear();const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();// 筛选本月的任务const monthTasks = tasks.filter(task => task.day && task.day >= 1 && task.day <= daysInMonth);// 创建工作簿和工作表const wb = XLSX.utils.book_new();const wsData = [['日期', '时段', '任务标题', '开始时间', '结束时间', '优先级', '完成状态', '备注']];// 填充数据for (let day = 1; day <= daysInMonth; day++) {const dayTasks = monthTasks.filter(task => task.day === day).sort((a, b) => {const slotOrder = { 'AM': 1, 'PM': 2, 'EVENING': 3 };if (a.slot !== b.slot) return (slotOrder[a.slot] || 4) - (slotOrder[b.slot] || 4);return (a.start || '').localeCompare(b.start || '');});if (dayTasks.length > 0) {dayTasks.forEach(task => {wsData.push([`${day}日`,slotNames[task.slot] || task.slot,task.title || '',task.start || '',task.end || '',priorityNames[task.priority] || '中',task.done ? '已完成' : '未完成',task.note || '']);});}}// 生成并导出文件const ws = XLSX.utils.aoa_to_sheet(wsData);XLSX.utils.book_append_sheet(wb, ws, `${currentMonth+1}月工作月报`);const fileName = `${currentMonth+1}月工作月报_${currentYear}年${(currentMonth+1).toString().padStart(2,'0')}月${today.getDate().toString().padStart(2,'0')}日.xlsx`;XLSX.writeFile(wb, fileName);showToast(`成功导出${currentMonth+1}月工作月报，共${monthTasks.length}个任务`);
}