🚀 LifeLog 是一个极简的数字化个人空间。它将时间管理、情绪监测与日常效率工具汇聚于单一网页，助你在极简的界面中找回生活的掌控感。
功能特性 · 技术细节 · 快速上手 · 在线演示
在信息爆炸的时代，个人需要一个集中管理日常任务、快速访问常用资源的平台。传统的桌面应用和网页往往功能单一，无法满足现代用户对效率和个性化的需求。基于此，我们开发了 LifeLog，一个集成化的个人数字空间，旨在为用户提供一站式的个人信息管理解决方案。
本文档旨在详细说明 LifeLog 的技术实现、功能设计和使用方法，为开发者提供完整的技术参考，同时为用户提供清晰的应用指南。
- 智能搜索：内置双引擎，支持默认谷歌搜索，通过
b: 内容 指令快速切换百度。
- 待办清单 (Todo)：支持任务优先级标注（紧急/普通）及状态持久化。
- 番茄钟 (Pomodoro)：25 分钟标准专注周期，配合可视化专注时长统计。
- 快速导航：左侧侧边栏支持动态添加、删除常用网站链接。
- 情感监测：8 种心情快捷记录，基于加权算法实时计算并更新“心情指数”。
- 实时天气：集成和风天气 API，根据地理位置动态更新气温与天气状态。
- 智能感性问候系统：
- 精细时段切换：根据一天中的 6 个精细时段（清晨、上午、中午、下午、傍晚、深夜）自动切换问候语
- 双层视觉架构：采用“主标题+副标题”设计，区分核心问候与感性寄语，提升视觉层次感
- 情绪感知交互：联动心情记录功能，当检测到用户近期心情低落或疲惫时，自动触发安慰模式
- 动态效果：包含淡入淡出动画效果，增强用户体验
- 周末专属：周末时段自动切换为周末专属问候语
- 深色模式：原生支持深浅色皮肤一键切换，保护视力。
- 响应式布局：完美适配 PC、平板及移动端。
- 隐私安全：所有数据仅存储于本地
localStorage，无需担心隐私泄露。
| 技术 |
用途 |
| HTML5 |
页面结构 |
| CSS3 |
页面样式和响应式设计 |
| JavaScript (ES6+) |
交互逻辑、定时器、天气 API 调用等核心功能实现 |
| LocalStorage |
本地数据存储，实现本地数据持久化 |
| 浏览器 Geolocation API |
获取用户地理位置 |
| 和风天气 API |
获取实时天气数据 |
- 单页面应用：所有功能集成在单个HTML文件中
- 模块化设计：功能按模块划分，便于维护
- 响应式布局：适配不同屏幕尺寸
- 本地存储：使用LocalStorage持久化数据
- 顶部导航栏：显示问候语、搜索框、时钟和主题切换
- 左侧边栏：常用链接管理
- 主内容区：
- 左侧：天气信息、心情记录
- 中间：待办清单
- 右侧：番茄钟专注模式
- 心情加权算法：
兴奋/快乐: +5 分 | 平静/疲惫/困惑: +3 ~ 4 分 | 难过/焦虑/生气: +1 ~ 2 分。- 分值将实时反映在 UI 进度条中，反映近期的心理状态趋势。
- 数据流：全站数据通过
localStorage 进行统一序列化管理。
| 模块 |
功能 |
技术实现 |
| 常用链接 |
快速访问、添加、编辑、删除、拖拽排序 |
动态生成DOM元素，LocalStorage存储 |
| 待办清单 |
添加、编辑、删除、标记完成、拖拽排序 |
拖拽事件监听，LocalStorage存储 |
| 天气信息 |
自动获取本地天气，显示温度湿度 |
浏览器定位API，和风天气API |
| 心情记录 |
记录心情变化，显示对应颜色 |
事件监听，状态管理 |
| 番茄钟 |
25分钟倒计时，任务专注计时 |
setInterval计时，任务关联 |
| 快速搜索 |
快捷搜索功能 |
事件监听，URL构建 |
由于项目采用纯前端架构，无需任何环境搭建，直接克隆并打开即可：
git clone https://github.com/moyichen0219/LifeLog.git
cd LifeLog
# 直接在浏览器打开 index.html
- 添加链接：点击"+ 添加链接"按钮
- 编辑链接：点击链接右侧的"编辑"按钮
- 删除链接：点击链接右侧的"删除"按钮
- 拖拽排序：按住链接拖动到目标位置
- 添加任务：在输入框中输入任务内容，选择优先级，点击"添加"
- 标记完成：点击任务左侧的复选框
- 编辑任务：点击任务右侧的"编辑"按钮
- 删除任务：点击任务右侧的"删除"按钮
- 开启专注：点击"开启专注"按钮，自动启动番茄钟
- 开始：点击"开始"按钮
- 暂停：点击"暂停"按钮
- 重置：点击"重置"按钮
- 任务关联：从待办清单启动专注时自动关联任务
- Enter：添加当前输入的任务
- Ctrl/Cmd + K：聚焦搜索框
<body>
<header class="header">
<!-- 顶部导航 -->
</header>
<main class="main-content">
<aside class="sidebar">
<!-- 常用链接 -->
</aside>
<div class="grid-container">
<!-- 天气信息 -->
<!-- 待办清单 -->
<!-- 番茄钟 -->
<!-- 心情记录 -->
</div>
</main>
</body>
| 步骤 |
预期结果 |
实际结果 |
| 添加任务 |
任务出现在列表中 |
✅ 成功 |
| 标记完成 |
任务文本变灰并添加删除线 |
✅ 成功 |
| 编辑任务 |
弹出编辑框，保存后更新任务 |
✅ 成功 |
| 删除任务 |
任务从列表中移除 |
✅ 成功 |
| 步骤 |
预期结果 |
实际结果 |
| 添加链接 |
链接出现在侧边栏 |
✅ 成功 |
| 编辑链接 |
弹出编辑框，保存后更新 |
✅ 成功 |
| 删除链接 |
链接从侧边栏移除 |
✅ 成功 |
| 拖拽排序 |
链接顺序改变 |
✅ 成功 |
| 步骤 |
预期结果 |
实际结果 |
| 页面加载 |
显示本地天气或默认天气 |
✅ 成功 |
| 定位权限 |
自动获取位置并更新天气 |
✅ 成功 |
| 无定位权限 |
显示默认北京天气 |
✅ 成功 |
| 步骤 |
预期结果 |
实际结果 |
| 开始计时 |
倒计时开始 |
✅ 成功 |
| 暂停计时 |
计时暂停 |
✅ 成功 |
| 重置计时 |
时间恢复25:00 |
✅ 成功 |
- 事件委托：减少DOM事件监听器数量
- 节流处理：避免频繁操作导致的性能问题
- 模块化设计：代码按功能模块划分，便于维护
- 平滑动画：添加过渡效果提升视觉体验
- 智能提示：滚动时显示渐变遮罩
- 错误处理：完善的错误提示机制
- 本地存储：使用LocalStorage持久化数据
- 数据结构设计：合理的对象结构存储任务和链接信息
- 功能优化：联合待办清单和番茄钟模块
- 多用户支持：添加用户认证系统
- 数据同步：云存储实现多设备同步
- 更多集成：日历、轻量级 Markdown 笔记等功能
- API扩展：支持更多第三方服务集成
- 主题市场：用户自定义主题
LifeLog 致力于通过技术手段简化生活。我们相信，一个高效的个人空间不应是繁琐的，而应是如影随形、懂你所想。欢迎提交 Issue 或 PR 参与共建！
GitHub · 预览项目
文档版本：v1.1.0 | 更新日期：2026-02-15
保持纯粹，让效率回归本质。
