【学员福利】学习目标管理系统 —— 源码和设计思路

解说视频

这是一份非常优秀、逻辑严密的产品级提示词。针对你的疑问，我逐一进行解析，并提供解决方案和优化后的提示词。

Workbuddy的学习目标管理系统提示词：

个人工作台帮我做一个学习目标管理台，专门管理有终点、有总量的学习目标，比如“背完 2000 个单词”或“读完一本 440 页的书”，不是每天喝水那种无限期习惯打卡。一个 HTML 文件实现全部功能，不连任何外部接口，也不需要我提供资料。
每个目标包含名称、单位、总量、截止日、配色，以及两个选填字段：最容易拦住我的障碍和“如果它出现，我就……”的对策。每天自动计算今日建议量=剩余量÷剩余天数，打卡时预填但允许修改。每个目标显示完成率、连续打卡天数、预计完成日；预计完成日按近 7 天平均速度推算，与截止日比较后显示提前或拖后，样本不足时显示“暂无推算”，不要编数字。
连续天数允许每周从周一开始自动使用 1 个休息日：本周第一次漏打卡不中断，第二次才断。昨日漏打卡的目标今天自动置顶，分别用温和黄卡或红卡解释休息日和滚入今日；逾期目标显示天数，并提供“立即打卡”和“调整计划”两个出口。卡片展示用户预案。一天可记录多次，支持选填分钟数和补记最近 6 天，补记带“补”标并按真实日期参与连续天数和推算。
页面分四个 Tab：
1. 今日：首屏显示新建目标按钮、今天要处理、可直接打卡的目标卡，列表底部再保留醒目的新建入口；支持编辑和二次确认删除。
2. 看板：每个目标显示进度环、三个核心数字、预案和最近 10 条可删除记录；再用手写 SVG 绘制近 14 天投入分钟的分目标堆叠柱状图，未填分钟的记录不硬凑。
3. 周报：按周一到周日汇总投入量、打卡天数和分钟数，附上周同口径环比；可查看历史周，并保存保持、问题、尝试、下周预案四栏；一键生成包含环比和四栏内容的周报文本。
4. 我的：导出 JSON、覆盖确认后导入、旧版本迁移、清空示例、输入“清空”后清空全部，以及添加到手机主屏幕的三步说明。
预置背英语单词、读《人类简史》、Python 入门课 3 个带示例标签的目标和几天记录，覆盖补记、休息日、连续漏打、障碍预案等状态。累计 20 条打卡记录后，页面顶部出现可直接导出的温和备份横幅。
视觉使用冷白底、紫色渐变、绿色成功、红色逾期、琥珀色休息日；目标达成时有彩带动效；图标全部使用内联 SVG，不用 emoji。手机底部四 Tab 和单列布局，平板顶部横向导航，电脑左侧固定边栏与多栏布局。所有输入即时保存到 localStorage。交付一个无外部库、资源全内联、断网可用的单文件 HTML。

但是，这个提示词实现的本地数据功能是十分弱的，具体如下：

一、针对你的疑问解析

1. 是否实现了本地数据库的功能？

实现了，但属于“轻量级/弱数据库”范畴。

原提示词中指定了 “所有输入即时保存到 localStorage”。localStorage 是浏览器提供的一种键值对（Key-Value）本地存储机制，它的确可以在离线状态下保存数据，起到“本地数据库”的作用。但它存在局限性：

存储量小：通常只有 5MB，对于纯文本打卡来说能存几万条，基本够用。
查询效率低：不支持像 SQL 那样的高级查询，只能把所有数据读取到内存（解析 JSON）再进行过滤。

2. 清空浏览器后，数据是不是就没了？

是的，绝对会没。

localStorage 与浏览器的缓存、Cookie 绑定。如果用户执行了“清除浏览器数据”、“清除缓存和站点数据”，或者使用了浏览器的“无痕/隐私模式”并关闭窗口，里面的所有数据都会被永久抹除。

3. 有没有更好的可迁移方案？如何解决这个问题？

要在一个“单文件 HTML、不连任何外部接口”的前提下解决数据丢失和跨设备迁移问题，有以下几个层次的方案：

方案 A：强化本地文件备份（纯离线方案，符合原设定）
- 自动触发下载：除了手动导出 JSON，可以通过代码设定“每新增 50 条记录”或“每周一”自动在浏览器触发一个 .json 文件的下载，将数据硬备份到用户的电脑/手机存储中。
方案 B：升级本地存储引擎（提升性能）
- 改用 IndexedDB：它是浏览器内建的真正的本地 NoSQL 数据库，存储空间极大（通常几百MB），且支持索引查询。虽然清空浏览器依然会丢失，但处理大量数据和图表计算时性能远超 localStorage。
方案 C：增加可选的“自带云盘同步”（最佳跨设备迁移方案）
- 引入 WebDAV：在不依赖自己服务器的情况下，允许用户在“我的”页面填入自己的 WebDAV 账号（如坚果云、Nextcloud）。HTML 单文件可以直接通过 WebDAV 协议将 JSON 文件悄悄同步到用户的个人云盘，实现跨设备数据漫游。这是单文件应用（Local-first App）目前最极客、最完美的解决方案。

二、提示词优化与升级

我将上述的 IndexedDB（提升本地性能）、WebDAV（解决跨设备与防丢失） 和 自动本地下载备份（防呆机制） 融合进了你的提示词中。

优化后的提示词（你可以直接复制发给 AI）：Markdown

个人工作台：帮我做一个学习目标管理台，专门管理有终点、有总量的学习目标，比如“背完 2000 个单词”或“读完一本 440 页的书”，不是每天喝水那种无限期习惯打卡。一个 HTML 文件实现全部功能，不需要我提供资料，不依赖任何外部 CDN 库，资源全内联，断网可用。

【核心功能与逻辑】
1. 目标属性：包含名称、单位、总量、截止日、配色，以及两个选填字段：最容易拦住我的障碍和“如果它出现，我就……”的对策。
2. 进度推算：每天自动计算“今日建议量 = 剩余量 ÷ 剩余天数”，打卡时预填但允许修改。每个目标显示完成率、连续打卡天数、预计完成日；预计完成日按近 7 天平均速度推算，与截止日比较后显示提前或拖后，样本不足时显示“暂无推算”，不要编数字。
3. 容错机制（休息日）：连续天数允许每周（周一至周日）自动使用 1 个休息日：本周第一次漏打卡不中断，第二次才断。昨日漏打卡的目标今天自动置顶，分别用温和黄卡或红卡解释“使用了休息日”或“漏打卡断签滚入今日”；逾期目标显示逾期天数，并提供“立即打卡”和“调整计划”两个出口。卡片需展示用户预案。
4. 记录机制：一天可记录多次，支持选填投入分钟数。支持补记最近 6 天，补记带“补”标，并按真实的补记日期重新计算连续天数和推算。

【页面结构（四个 Tab）】
1. 今日：首屏显示新建目标按钮、今天要处理、可直接打卡的目标卡，列表底部再保留醒目的新建入口；支持编辑和二次确认删除。
2. 看板：每个目标显示进度环、三个核心数字（总量、剩余、当前连续天数）、预案和最近 10 条可删除记录；用原生 Canvas 或手写 SVG 绘制近 14 天投入分钟的分目标堆叠柱状图，未填分钟的记录不硬凑。
3. 周报：按周一到周日汇总投入量、打卡天数和分钟数，附上周同口径环比；可查看历史周，并保存“保持、问题、尝试、下周预案”四栏复盘文本；提供一键生成包含环比和四栏内容的周报文本用于复制分享。
4. 我的（数据与设置）：
   - 本地导入导出：导出 JSON 文件、覆盖确认后导入、旧版本迁移、清空示例、输入“清空”后清空全部。
   - WebDAV 云同步（重点）：提供 WebDAV 配置表单（服务器地址、账号、密码），用户配置后，每次打卡自动静默将全量 JSON 同步至云盘，打开应用时自动从云盘拉取最新数据比对合并，解决清空浏览器丢失数据和跨设备同步问题。
   - PWA 说明：提供将网页添加到手机主屏幕的三步说明。

【数据存储与防丢失】
所有数据优先使用 IndexedDB 或 localStorage 进行本地持久化。为防止用户清理浏览器缓存导致数据丢失：
1. 累计打卡 20 条记录后，页面顶部出现可直接导出的温和备份横幅。
2. 触发防呆备份：若用户未配置 WebDAV，每累计新增 30 条记录，在打卡成功时自动触发一次 JSON 文件的本地下载。

【视觉与交付要求】
1. 视觉设计：使用冷白底、紫色渐变为主色调；绿色代表成功/提前，红色代表逾期/断签，琥珀色代表休息日/补签；目标达成时有彩带动效；图标全部使用内联 SVG，不使用 emoji。
2. 响应式布局：手机端底部四 Tab 和单列布局；平板端顶部横向导航；电脑端左侧固定边栏与右侧多栏布局。
3. 交付形式：输出一个代码结构清晰、带中文注释的单文件 HTML，原生 JS+CSS 实现。

优化点说明：

加入了 WebDAV 配置：这是目前单文件 HTML 最强大的扩展能力。用户只需注册一个免费的坚果云，填入账号密码，这个单文件就能变成一个“真·全平台同步 App”，再也不怕清空浏览器。
加入了防呆备份机制：如果没有配置 WebDAV，强制每 30 条记录自动下载一次 JSON 文件到本地硬盘，最大程度兜底。
明确了图表技术栈：要求 AI 用原生 Canvas 或手写 SVG，避免 AI 擅自引入 Echarts 等外部库导致断网不可用。

一、 针对你的疑问解析