Multi Project Daily Tracker 项目介绍

界面预览

概述

这是一个功能强大的多项目日常追踪工具，用于管理和监控多个项目的日常进度。采用现代化的玻璃拟态设计和深色主题，提供了优雅的用户界面。

核心功能

📅 日历管理

• 月度日历视图：以月份形式展示每一天的完成状态
• 日期切换：支持按钮快速导航到上一月、下一月、上一年、下一年
• 实时标记：点击日期即可标记任务完成或取消完成状态
• 当日高亮：当前日期自动标记突出显示

📊 年度概览

• 微型日历网格：以7×12的网格方式展示整年的完成情况
• 一键切换：点击"Year Overview"按钮展开/隐藏年度视图
• 可视化统计：已完成的日期用项目颜色突出显示

📝 活动日志

• 完整记录：自动记录每次完成/取消完成的操作
• 时间戳：精确记录操作的日期和时间
• 日志管理：支持删除单条日志记录
• 智能显示：当无日志时展示美观的空状态提示

💾 数据管理

• 导出数据：一键导出所有项目数据为JSON文件
• 导入数据：支持从JSON文件恢复之前导出的数据
• 清除数据：清空所有项目记录（需要二次确认保护）
• 本地存储：使用浏览器localStorage自动保存数据

操作说明

1. 数据管理工具栏

工具栏位于页面顶部，提供三个核心操作按钮：

📤 Export All Data（导出全部数据）

• 功能：一键导出所有项目的进度数据和日志记录
• 数据格式：JSON 格式文件，命名为 Project_Tracker_Data_[日期].json
• 用途：用于数据备份或在不同设备间迁移项目数据
• 注意：导出文件包含所有项目的完成状态和操作日志

📥 Import Data（导入数据）

• 功能：从本地选择 JSON 文件恢复项目数据
• 使用流程：
  1. 点击"Import Data"按钮
  2. 在文件选择器中选择 .json 格式的数据文件
  3. 系统验证文件格式，成功导入后页面自动刷新
• 兼容性：仅支持通过本工具导出的 JSON 格式数据
• 提示：导入完成后所有项目数据将被更新

🗑️ Clear All Data（清空全部数据）

• 功能：清除所有项目的完成记录和活动日志
• 安全机制：操作前会弹出确认弹窗，防止误操作
• 影响范围：清空后无法恢复，建议清空前先导出数据
• 确认提示："Are you sure you want to clear all project records and logs?"

2. 项目日历模块

独立项目卡片

• 四个项目分别拥有独立的卡片展示区
• 每个卡片配备专属主题渐变背景：
  • LOVELYLOOK：粉红色渐变 (#d6336c → #ff6b8b)
  • iChengHub：红色渐变 (#d63939 → #ff7979)
  • MomentoX：蓝色渐变 (#066fd1 → #74b9ff)
  • BiteMe：绿色渐变 (#2fb344 → #55efc4)

月度日历操作

• 默认显示：系统启动时显示当前年月的日历
• 日历布局：以 7 列网格展示（周日至周六）
• 日期标记：
  • 点击日期可标记为"完成（Completed）"状态
  • 再次点击可取消标记为"未完成（Uncompleted）"状态
  • 完成状态的日期背景会显示项目主题色
• 当日标识：当前日期会显示外围边框高亮

日历导航按钮

按钮	功能
<<	前往上一年
<	前往上一月
>	前往下一月
>>	前往下一年

• 灵活浏览：支持查看任意历史或未来时间段的进度

年度概览视图

• "Year Overview"按钮：点击展开/隐藏年度视图
• 视觉展示：12 个月份的迷你日历（7×12 网格布局）
• 颜色识别：
  • 已完成日期：显示项目主题色
  • 未完成日期：透明底色
• 一键切换：可快速在月度和年度视图之间切换

3. 活动日志模块

日志实时记录

• 自动记录：每次日期状态变更都会自动生成日志记录
• 记录格式：[日期] [状态] [操作时间]
  • 示例：2026-2-3 Completed 2026-02-05 18:21:43
• 排序规则：按操作时间倒序排列，最新操作始终在列表顶部

日志显示规则

• 显示数量：单个项目最多显示 6 条最新日志
• 隐藏滚动条：超出部分可滚动查看，但不显示滚动条UI
• 空状态提示：
  • 当项目无操作记录时，显示"No activity yet"文案
  • 配合📝图标提升视觉友好度

日志管理操作

• 删除单条日志：每条日志右侧配备"×"删除按钮
• 实时同步：删除后数据立即同步至本地存储
• 确认提示：点击删除按钮后不再弹窗，直接删除

项目列表

系统预配置了4个项目，每个项目拥有独立的颜色主题和完整的追踪数据：

1. LOVELYLOOK - 粉红色系主题
2. iChengHub - 红色系主题
3. MomentoX - 蓝色系主题
4. BiteMe - 绿色系主题

设计亮点

• ✨ 玻璃拟态设计：现代化毛玻璃效果，视觉层次分明
• 🎨 渐变色彩：每个项目配备独特的渐变配色方案
• 🎉 庆祝动画：完成任务时释放庆祝特效（🎉）
• 📱 响应式布局：自适应网格布局，支持多种屏幕尺寸
• 🌙 深色主题：护眼的深蓝色渐变背景

技术实现

• 纯前端方案：无需后端服务器，完全运行在浏览器中
• 本地数据存储：利用HTML5 localStorage实现数据持久化
• Vanilla JavaScript：无框架依赖，性能轻量