本地系统使用说明

下载地址

学习目标管理系统

安装与使用手册

有终点、有总量的进度追踪 · 完成率 / 连续天数 / 预计完成日，一目了然

瑟谷智学 · 2026年9月

一、产品概述

学习目标管理系统是一个专门管理有终点、有总量的学习目标的工具，比如"背完 2000 个单词"或"读完一本 440 页的书"，不是每天喝水那种无限期习惯打卡。

整个系统由一个 HTML 文件实现全部功能，不需要提供资料，不依赖任何外部 CDN 库，资源全内联，断网可用。

技术特性

· 单文件 HTML 应用，全部功能内联实现

· 原生 JS + CSS，不依赖任何外部 CDN 库

· 断网可用，资源全内联

· 响应式布局：手机、平板、电脑三种视图

· 支持本地持久化存储（通过 Node.js 本地服务）

· 支持在线云端同步（通过 WorkBuddy 平台）

二、核心功能

目标属性

包含名称、单位、总量、截止日、配色，以及两个选填字段：最容易拦住我的障碍和"如果它出现，我就……"的对策。

进度推算

每天自动计算"今日建议量 = 剩余量 ÷ 剩余天数"，打卡时预填但允许修改。每个目标显示完成率、连续打卡天数、预计完成日；预计完成日按近 7 天平均速度推算，与截止日比较后显示提前或拖后，样本不足时显示"暂无推算"，不会编数字。

容错机制（休息日）

连续天数允许每周（周一至周日）自动使用 1 个休息日：本周第一次漏打卡不中断，第二次才断。昨日漏打卡的目标今天自动置顶，分别用温和黄卡或红卡解释"使用了休息日"或"漏打卡断签滚入今日"；逾期目标显示逾期天数，并提供"立即打卡"和"调整计划"两个出口。卡片需展示用户预案。

记录机制

一天可记录多次，支持选填投入分钟数。支持补记最近 6 天，补记带"补"标，并按真实的补记日期重新计算连续天数和推算。

三、页面结构（四个 Tab）

今日

首屏显示新建目标按钮、今天要处理、可直接打卡的目标卡，列表底部再保留醒目的新建入口；支持编辑和二次确认删除。

看板

每个目标显示进度环、三个核心数字（总量、剩余、当前连续天数）、预案和最近 10 条可删除记录；用原生 Canvas 或手写 SVG 绘制近 14 天投入分钟的分目标堆叠柱状图，未填分钟的记录不硬凑。

周报

按周一到周日汇总投入量、打卡天数和分钟数，附上周同口径环比；可查看历史周，并保存"保持、问题、尝试、下周预案"四栏复盘文本；提供一键生成包含环比和四栏内容的周报文本用于复制分享。

我的

数据管理（同步状态、重新同步、清空全部）、本地数据持久化（备份/导出/导入）、关于数据说明、PWA 添加到主屏幕三步说明。

四、数据存储与防丢失

所有数据优先使用 localStorage 进行本地持久化。通过本地服务（server.js）访问时，数据会实时同步到磁盘上的 JSON 文件，彻底解决浏览器缓存丢失的问题。

· 累计打卡 20 条记录后，页面顶部出现可直接导出的温和备份横幅。

· 通过本地服务运行时，每次数据写入都会自动备份，最多保留 30 个历史版本。

· 支持手动备份、查看备份历史、一键恢复。

· 支持导出 JSON 文件跨设备迁移。

五、在线版使用

在线地址：https://www.workbuddy.cn/space/d/eTi0ghLOmA4Y203VTVj91O

使用方式

· 浏览器打开在线地址。

· 建议登录后使用，便于保持资料库访问权限和云端数据同步。

· 手机端可选择"分享"→"添加到主屏幕"，作为快捷入口使用。

数据保存位置

在线版关联三张资料库数据表：

· 学习目标表：保存目标名称、单位、总量、截止日、颜色和障碍预案。

· 每日打卡表：保存每日完成量、分钟数、补记标记和日期。

· 每周复盘表：保存每周的保持、问题、尝试和下周预案。

在线版的目标新增、编辑、打卡、补记、记录删除、目标删除和周报保存，会直接写入线上数据表。换设备或换浏览器后，打开同一个在线页面即可读取线上数据。

同步状态

在"我的"页面查看同步状态：

· 已同步：当前数据已写入线上。

· 同步中：正在读取或写入。

· 同步失败·可重试：本次操作未确认写入成功，点击"重新同步"后再检查。

六、本地版（基础模式 · 直接打开 HTML）

使用方式

· 打开文件夹，找到 learning-goal.html。

· 双击 learning-goal.html 用浏览器打开。

· 本地模式下可正常使用目标、打卡、补记、删除、周报和图表功能。

数据保存位置

直接双击本地 HTML 时，数据保存于当前浏览器的 localStorage：

· 同一台电脑、同一个浏览器中可以继续使用。

· 换浏览器、换设备或清理浏览器网站数据后，本地数据可能无法读取。

· 本地新增的数据不会自动同步到在线版。

· 在线版新增的数据也不会自动出现在本地版。

本地版更适合开发、试用、离线操作和功能验证；正式长期使用建议使用在线版或本地持久化模式。

七、本地持久化模式（推荐 · 通过 server.js 运行）

通过本地 Node.js 服务运行，数据实时同步到磁盘上的 JSON 文件，彻底解决浏览器缓存丢失问题。

前提条件

需要安装 Node.js（版本 12 或更高）：

· Windows：从 https://nodejs.org 下载安装包，选 LTS 版本

· macOS：brew install node

· Linux：sudo apt install nodejs 或从 https://nodejs.org 下载

安装后在终端运行 node -v 确认已安装成功。

文件说明

文件	说明
learning-goal.html	完整页面，核心应用文件
learning-goal.js	内联脚本检查副本，不需要单独引用
server.js	本地持久化服务器，零外部依赖
start.bat	Windows 一键启动脚本
start.sh	macOS/Linux 一键启动脚本
data/goals.json	持久化数据文件（自动创建）
data/backup/	自动备份目录（自动创建）

启动方式

方式一：双击启动（Windows）

· 双击 start.bat

· 浏览器自动打开 http://localhost:3721

· 开始使用

方式二：命令行启动

# 进入项目目录
cd 学习目标管理系统

# 默认端口 3721
node server.js

# 指定端口
node server.js 8080

方式三：macOS/Linux

chmod +x start.sh
./start.sh

数据存储机制

通过本地服务访问时，数据采用双写策略：

· 每次操作同时写入浏览器缓存和本地 JSON 文件

· 启动时优先从本地 JSON 文件加载数据

· 清除浏览器缓存后数据仍然保留

· 每次写入自动创建备份，最多保留 30 个历史版本

数据备份与恢复

在"我的"页面 →"本地数据持久化"卡片中：

按钮	功能
手动备份	创建一个带时间戳的备份文件
查看备份历史	显示所有备份文件，点击可恢复
导出数据	下载 JSON 文件，用于迁移到其他设备
导入数据	上传 JSON 文件，从其他设备导入

跨设备迁移

从设备 A 迁移到设备 B：

· 1. 在设备 A 打开「我的」→ 点击「导出数据」→ 下载 JSON 文件

· 2. 将 JSON 文件和整个项目文件夹复制到设备 B（U盘 / 网盘 / 邮件）

· 3. 在设备 B 安装 Node.js

· 4. 双击 start.bat（Windows）或运行 ./start.sh（macOS/Linux）

· 5. 打开「我的」→ 点击「导入数据」→ 选择之前导出的 JSON 文件

· 6. 数据完整恢复 ✓

也可以直接复制 data/goals.json 文件到新设备的同名位置。

八、功能使用说明

今日

· 新建目标：填写名称、单位、总量、截止日、颜色和可选障碍预案。

· 今日建议量：系统按剩余量和剩余天数自动计算，可在打卡前修改。

· 打卡：支持一天多次记录。

· 补记：可选择最近 6 天，系统自动标记"补"。

· 删除：目标和记录均采用二次确认，避免误操作。

看板

· 查看每个目标的完成率、累计完成量、连续打卡天数和预计完成日。

· 预计完成日按近 7 天平均速度推算；样本不足时不编造日期。

· 分钟图只统计实际填写分钟数的记录，不会把未填写的记录硬算进去。

周报

· 可查看本周和历史周。

· 填写保持、问题、尝试、下周预案。

· 保存后写入每周复盘表。

· 可生成并复制周报文本。

我的

· 查看同步状态和最近同步时间。

· 线上读取异常时点击"重新同步"。

· 本地持久化模式下，可查看文件同步状态、手动备份、导出/导入数据。

· 清空数据前必须输入"清空"。在线版清空会影响线上数据，操作前务必确认。

九、重要注意事项

· 1. 在线版和本地版是两套运行环境，本地版不会因为页面中存在数据表 ID 就自动连接云端。

· 2. 正式数据建议在在线版操作，或使用本地持久化模式运行，避免本地浏览器缓存丢失造成误判。

· 3. 不要直接删除资料库中的三张数据表，否则页面将无法同步。

· 4. 不要修改三张表的字段名称或类型，除非同时修改页面字段映射。

· 5. 同一天可以多次打卡，但每次记录都应填写正确日期和完成量。

· 6. 补记只支持最近 6 天，超过范围不要手动改表伪造日期。

· 7. 删除目标会同时删除其关联打卡记录，属于不可逆操作。

· 8. 清空全部数据会影响当前账号下对应的数据表记录，必须谨慎操作。

· 9. 如果要给不同学生使用，推荐每个学生独立页面、独立目标表、独立打卡表和独立周报表，避免数据串线。

· 10. 使用本地持久化模式时，不要手动编辑 data/goals.json 文件，除非了解数据结构。

· 11. data/backup/ 目录中的备份文件可以安全删除，不影响正常使用。

十、推荐使用策略

· 教师/家长：使用在线版查看和维护数据。

· 学生：使用在线版每天打卡。

· 本地长期使用：使用本地持久化模式（start.bat 启动），定期导出备份。

· 开发和测试：使用本地版验证新功能。

· 每次修改本地代码后，先完成本地功能检查，再更新在线页面。

· 在线页面更新后，刷新页面并检查"我的"页面同步状态。

· 跨设备迁移：通过导出/导入 JSON 文件实现。

十一、常见问题

Q: 端口 3721 被占用怎么办？

在命令行运行 node server.js 8080 指定其他端口，或修改 start.bat 最后一行为 node server.js 8080。

Q: 浏览器清了缓存，数据还在吗？

如果通过 start.bat 启动本地服务使用，数据保存在 data/goals.json，不受浏览器缓存影响。重新打开 http://localhost:3721 即可恢复。

Q: 如何从备份恢复数据？

方式一：在"我的"页面 → 查看备份历史 → 点击要恢复的备份。
方式二：手动将 data/backup/ 中的备份文件复制为 data/goals.json（覆盖），然后刷新页面。

Q: 怎样确认数据已经持久化成功？

在"我的"页面查看"已同步到本地文件"状态。也可以直接查看 data/goals.json 文件是否存在且内容正确。

Q: 视觉设计说明

使用冷白底、品牌蓝紫渐变为主色调；绿色代表成功/提前，红色代表逾期/断签，琥珀色代表休息日/补签；目标达成时有彩带动效；图标全部使用内联 SVG。
响应式布局：手机端底部四 Tab 和单列布局；平板端顶部横向导航；电脑端左侧固定边栏与右侧多栏布局。