基于Vue 3与IndexedDB的本地化学习追踪器：为公考备考者量身打造的数据驱动复习方案

1. 项目概述：一个为“考公人”量身打造的学习追踪器

如果你正在准备公务员考试，或者身边有朋友是“考公大军”中的一员，那你一定对那种“学了忘，忘了学”，进度模糊、效率低下的状态深有体会。纸质计划本写满了又划掉，Excel表格越做越复杂却难以坚持记录，各种学习App功能花哨却与公考复习的独特节奏格格不入。今天要聊的这个开源项目——KaguraNanaga/kaogong-study-tracker，正是瞄准了这个精准的痛点。它不是一个泛泛而谈的时间管理工具，而是一个专门为公务员考试备考者设计的、高度定制化的学习进度追踪与管理系统。

简单来说，你可以把它理解为一个为你私人定制的“数字化学习教练”。它帮你把庞大的公考知识体系（行测、申论、专业科目等）拆解成可管理、可追踪的每日任务，清晰地记录你的学习时长、刷题数量、正确率变化，并通过可视化的图表，让你一眼看清自己的复习轨迹和薄弱环节。项目的核心价值在于“聚焦”和“数据化”。它剥离了通用型工具中那些无关的社交、娱乐功能，将所有设计都围绕“备考”这一单一目标展开，同时通过记录学习数据，将模糊的“我感觉今天效率不错”转化为清晰的“今日行测言语理解模块学习2.5小时，刷题80道，正确率从65%提升至72%”，为调整复习策略提供坚实依据。

这个项目适合所有正在备战公考的考生，无论是初次备考、对复习规划毫无头绪的新手，还是二战、三战希望借助工具实现精细化复习、寻求突破的老手。对于开发者或技术爱好者而言，它也是一个非常值得研究的案例，展示了如何针对一个垂直领域的具体需求，设计开发一个轻量、实用、以数据驱动为核心的工具。接下来，我将从设计思路、功能拆解、部署实践到深度使用技巧，为你完整解析这个项目。

2. 项目核心设计思路与架构解析

2.1 为什么通用工具无法满足公考备考需求？

在深入代码之前，我们必须先理解公考备考的特殊性，这是本项目设计的出发点。通用时间管理应用（如Todoist、滴答清单）或学习类App（如Forest、番茄Todo）主要解决的是“有无记录”和“专注时长”的问题，但在备考场景下，需求远不止于此。

首先，知识体系结构化要求高。公考行测包含言语理解、判断推理、数量关系、资料分析、常识判断五大模块，申论又有归纳概括、综合分析、公文写作、大作文等题型。备考者需要均衡推进各模块，并根据自身强弱项动态调整时间分配。通用工具很难预设这种复杂的、带有权重关系的任务树。

其次，学习成果需要量化与对比。备考的核心动作是“听课-做题-复盘”。仅仅记录“学习了行测”2小时是无效的，必须记录“做了某机构《2025年行测5000题》中图形推理部分第50-100题”，并录入“正确题数”、“错误题数”、“耗时”，才能计算出“正确率”和“平均每题耗时”这两个关键效率指标。这些数据需要历史对比，才能看出进步趋势。

再者，复习计划具有强烈的周期性和迭代性。公考复习通常分为“基础学习-专项强化-真题演练-冲刺模拟”多个阶段，每个阶段的学习重点和任务密度不同。工具需要支持灵活的计划模板和阶段切换。

最后，数据隐私与纯粹性。许多备考者不希望自己的学习数据上传到云端，或受到社交功能的干扰，一个本地化、功能纯粹的工具更符合高强度备考时的心境。

kaogong-study-tracker正是基于以上四点深度需求进行的设计。它没有选择做一个大而全的平台，而是做一个“小而美”的专用工具，通过高度定制的数据模型和交互界面，直击备考核心流程。

2.2 技术栈选型：轻量、本地优先与可扩展性

浏览项目仓库，可以看到其技术选型充分体现了“务实”和“聚焦”的思路。

前端采用Vue 3 + TypeScript + Vite。Vue 3的响应式系统和组合式API非常适合构建这种数据驱动型的交互应用。TypeScript的引入保证了在定义复杂的学习任务、记录数据模型时的类型安全，减少运行时错误。Vite作为构建工具，提供了极快的冷启动和热更新速度，提升了开发体验，也使得最终产物体积更小。

UI框架选用Naive UI。这是一个基于Vue 3的组件库，风格现代、组件丰富，且特别强调“完整”和“可用性”。对于这类工具型应用，使用一个成熟、美观的UI库可以极大节省开发在界面设计上的精力，专注于业务逻辑。Naive UI的表格、表单、数据统计卡片等组件，与本项目的数据展示和录入需求高度契合。

数据持久化方案：本地IndexedDB + 可选导出/导入。这是本项目架构中一个关键且明智的选择。没有引入后端服务器和数据库，所有学习数据都存储在浏览器的IndexedDB中。这带来了几个巨大优势：

1. 绝对隐私：数据完全留在用户本地，无任何泄露风险。
2. 离线可用：一旦页面加载完成，后续所有操作无需网络，在图书馆、自习室等网络不稳定环境也能流畅使用。
3. 零部署成本：用户只需打开一个网页（甚至可以打包为桌面Electron应用），无需关心服务器、域名、备案等问题。
4. 简化开发：开发者无需处理用户认证、API接口、数据同步等复杂后端逻辑。

同时，项目提供了完整的数据导出（为JSON文件）和导入功能，解决了本地存储的“数据迁移”和“备份”痛点。用户可以在不同设备间手动同步数据，或定期备份以防浏览器数据被清除。

状态管理采用Pinia。作为Vue官方的状态管理库，Pinia与Vue 3的组合式API配合得天衣无缝。它用于管理全局的应用状态，如用户配置、当前选中的学习阶段、所有任务和记录的数据等。其结构清晰，易于调试。

这样的技术栈组合，确保了项目既是现代的（使用主流前沿框架），又是稳健的（类型安全、成熟UI库），更是贴合实际需求的（本地存储、离线优先）。整个应用可以非常方便地通过GitHub Pages、Vercel等静态托管服务进行部署，用户访问一个链接即可使用，门槛极低。

3. 功能模块深度拆解与使用指南

3.1 核心数据模型：任务、记录与计划

要玩转这个追踪器，必须理解其核心的三个数据模型，它们构成了整个应用的骨架。

1. 学习任务 (Study Task)这是知识体系的最小单元。一个典型的任务属性包括：

• id: 唯一标识。
• name: 任务名称，如“行测-言语理解-逻辑填空”。
• subject: 所属科目，如“行测”、“申论”、“专业科目”。
• module: 所属模块，对“行测”来说就是五大模块之一。
• type: 任务类型，如“视频学习”、“教材阅读”、“刷题练习”、“错题复盘”、“模拟考试”。
• target: 目标量（可选），例如“刷题100道”、“观看视频3节”。
• priority: 优先级（高/中/低），用于任务排序和重点提示。
• tags: 自定义标签，如“难点”、“公式多”、“需要背诵”，用于灵活筛选。

2. 学习记录 (Study Record)这是每次学习活动的快照。当你完成一次学习后，需要创建一条记录，其关键字段与任务关联：

• taskId: 关联的学习任务ID。
• date: 学习日期。
• duration: 学习时长（分钟）。
• quantity: 完成数量，如“刷题50道”、“阅读20页”。
• correct: 正确数量（仅对刷题类任务有效）。
• notes: 文字笔记，记录本次学习的心得、遇到的难题、灵光一现的解题思路等。
• efficiencyScore: 可能由系统根据时长、数量、正确率综合计算的一个效率评分（如果项目实现了此功能）。

3. 学习计划 (Study Plan)计划是任务的容器，代表一个复习阶段。例如，你可以创建“2025省考-基础阶段”、“2025国考-冲刺阶段”等计划。

• 每个计划包含一组任务。
• 可以为计划设置总体的开始日期和结束日期。
• 系统可以根据计划日期和任务量，粗略估算每日学习负荷。

这三个模型的关系是：计划包含多个任务，而记录是任务在时间维度上的具体执行证明。通过记录与任务的关联，系统才能将零散的学习活动，聚合成按科目、模块、类型划分的立体化学习报告。

3.2 仪表盘：你的学习数据驾驶舱

应用首页通常是一个功能强大的仪表盘，这里是你每日复习的起点和总览中心。一个设计良好的仪表盘应包含以下Widget：

今日聚焦面板：

• 今日待办：清晰列出当天计划完成的任务列表，可以直接点击开始计时或标记完成。
• 快速记录：一个简化表单，让你无需进入详情页就能快速为某个任务添加一条学习记录（输入时长、刷题数等）。
• 倒计时：显示距离目标考试日期的剩余天数，营造紧迫感。

学习数据概览：

• 本周/本月学习总时长：以柱状图或趋势线展示，一眼看出自己学习时间的投入是否稳定。
• 各科目时间分布饼图：直观展示你在行测、申论等科目上的时间分配比例，警惕偏科。
• 近期正确率趋势图（针对刷题）：对于刷题任务，用折线图展示最近7天或30天的平均正确率变化，是上升、下降还是徘徊，这是调整复习策略的核心依据。

成就与激励：

• 连续学习天数：鼓励形成习惯。
• 任务完成率：显示本周/本月计划任务的完成百分比。
• 效率高峰时段：通过分析历史记录，告诉你通常在一天中哪个时间段学习效率最高（平均单题耗时最短、正确率最高），帮助你优化作息安排。

实操心得：不要只把仪表盘当成一个“看板”，而要把它作为每日复习决策的依据。每天早上花2分钟看仪表盘：如果发现某个模块正确率持续低迷，今天就给它多分配一小时；如果发现连续几天学习时长不足，就要反思原因并调整计划。让数据驱动你的复习，而不是凭感觉。

3.3 任务与计划管理：构建你的复习大厦

这是应用中最需要静下心来精心配置的部分。混乱的任务体系会导致记录失去意义。

创建任务的黄金法则：

1. 拆解要足够细：不要创建“复习行测”这样的任务。应该拆分为“行测-资料分析-速算技巧练习”、“行测-判断推理-图形推理-立体图形”等。粒度越细，记录越精准，复盘越有效。
2. 类型要选准确：“视频学习”和“刷题练习”是两种不同的脑力活动，分开记录有助于分析哪种学习方式对你更有效。
3. 善用标签系统：给任务打上“易错”、“耗时”、“核心考点”等标签。后期你可以通过筛选标签，快速找到所有“易错”点进行专题复盘，效率倍增。

制定计划的实用策略：

1. 阶段化：遵循“基础→强化→真题→冲刺”的经典节奏创建不同的计划。每个计划有独立的日期范围。
2. 任务量合理化：在计划中分配任务时，要估算每个任务所需的总时间（如“完成XX题库”预计需要30小时），然后平摊到计划周期的每一天，确保每日任务量是可达成的，避免因计划过于激进而产生挫败感。
3. 灵活调整：计划不是铁律。每周进行一次“计划回顾”，根据实际完成情况和仪表盘反映出的问题（如某个模块进度严重滞后），动态调整下一周的任务安排。这个追踪器应该支持你方便地在计划间移动任务或修改时间。

一个常见的任务结构表示例：

- 计划：2025省考-基础阶段 (3月1日 - 4月30日) - 科目：行测 - 模块：言语理解 - [任务] 视频学习：XX机构方法精讲（8节） - [任务] 刷题练习：《XX5000题》言语部分（目标：800题） - [任务] 错题复盘：言语理解错题本（每周日） - 模块：判断推理 - [任务] 视频学习：图形推理专题（5节） - [任务] 刷题练习：逻辑判断（目标：300题） - 科目：申论 - [任务] 教材阅读：《申论的规矩》通读 - [任务] 视频学习：概括归纳题技巧 - [任务] 写作练习：每周一篇大作文

3.4 学习记录：忠实记录每一份努力

记录环节是数据生产的源头，贵在坚持和真实。

高效记录的最佳实践：

• 即时记录：学习一结束，立刻花30秒记录。不要等到晚上凭记忆补录，细节和感受会模糊。
• 善用计时器：对于需要专注的任务（如一套真题模拟），使用应用内置的番茄钟或正计时功能。它不仅帮你记录精确时长，其“计时中”的状态本身也是一种专注承诺。
• 详实填写笔记：笔记栏不要空着。对于错题，记录下错误原因（“概念混淆”、“计算粗心”、“时间不够”）；对于灵感，记下突然理解的解题套路。这些笔记在未来复习时是宝贵的私人财富。
• 量化刷题结果：对于刷题记录，强制自己录入“总题数”和“正确数”。这是计算正确率、追踪进步的唯一方式。即使正确率很低，也要诚实记录，直面问题才是进步的起点。

避坑指南：警惕“为了记录而记录”的形式主义。如果某天状态极差，只学了1小时，那就只记1小时。如果某天突击了10小时，也如实记录。数据的价值在于反映真实的、波动的学习状态，而不是一张完美的、自欺欺人的图表。系统应该允许你为记录添加“状态标签”，如“高效”、“低效”、“生病”，以便后期分析时能结合上下文理解数据波动。

4. 数据统计、分析与复盘：从记录到洞察

记录数据是第一步，分析数据并指导行动才是目的。本项目的数据分析功能应致力于将原始数据转化为 actionable insights（可执行的洞察）。

4.1 多维度的统计分析报表

一个强大的统计分析模块应提供多种视角的切片数据：

1. 时间投入分析：

• 总学习时长趋势：按日、周、月查看学习时间的投入是否稳定，考前冲刺期是否达到峰值。
• 每日学习时段分布：通过热力图展示你在一天24小时中哪些时段在学习，帮助你找到并固定自己的高效时段。
• 各科目/模块时间占比：长期来看，你在行测和申论上的时间分配是否合理？在行测内部，是否因为讨厌“数量关系”而刻意减少其时间投入？数据会无情地揭示你的逃避倾向。

2. 学习效果分析（核心）：

• 刷题正确率趋势：这是最重要的指标之一。为每个刷题任务生成正确率折线图。理想的状态是，随着复习深入，正确率在波动中稳步上升。如果某个模块的正确率长期横盘甚至下降，就必须引起高度重视，需要改变学习方法（如回看课程、专题突破）。
• 单位耗时分析：计算“平均每题耗时”或“平均每页阅读耗时”。在保证正确率的前提下，单位耗时的下降是解题熟练度提升的直接表现。对于行测这种时间紧迫的考试，提速与提分同等重要。
• 任务完成度分析：统计计划内任务的完成率。哪些类型的任务（如“错题复盘”）最容易被你拖延？这反映了你的学习习惯弱点。

3. 自定义报告生成： 允许用户自定义时间范围（如“最近30天”、“第二轮复习期间”），选择特定的科目、模块或任务标签，生成一份聚焦的分析报告。例如，可以生成一份“考前一个月‘数量关系’模块专项报告”，集中分析该模块的时间投入、正确率变化和主要错因。

4.2 基于数据的复盘与计划调整流程

数据分析不是看个热闹，必须闭环到复习行动的调整上。我建议建立这样一个每周复盘流程：

第一步：数据收集（每周日晚进行）

1. 打开应用的统计页面，查看“本周汇总”数据。
2. 导出“本周所有学习记录”到笔记软件或打印出来。

第二步：数据审视（回答以下问题）

1. 时间问题：本周总学习时长是否达标？各科目时间分配是否符合当前阶段重点？（例如，冲刺阶段申论写作时间是否足够？）
2. 效率问题：核心刷题任务的正确率是升是降？哪些模块的正确率拖了后腿？
3. 计划问题：本周计划任务完成了百分之多少？未完成的任务是因为计划太满，还是自身懈怠？
4. 状态问题：结合记录中的笔记，回想本周是否有几天状态特别差/好？原因是什么？（身体、情绪、环境？）

第三步：制定调整方案

1. 时间重分配：如果某个模块正确率低，下周为其增加20%的学习时间。如果某个模块已达到稳定高分，可略微减少时间，匀给薄弱项。
2. 方法优化：如果某个模块刷题很多但正确率不涨，说明方法有问题。下周安排时间重新观看该部分的教学视频，或寻找新的解题技巧资料，并记录为“视频学习”任务。
3. 计划修订：在应用中对下一周的计划任务进行微调。删除或推迟明显无法完成的任务，增加针对薄弱环节的专题任务。
4. 习惯强化：如果发现自己在下午效率高，就尝试把最重要的学习任务安排在下午。如果发现“错题复盘”任务总是完不成，可以将其拆解到每天睡前固定15分钟进行。

通过这样“记录→分析→调整→再记录”的持续循环，你的复习将从凭感觉的“漫灌”转变为精准的“滴灌”，每一分努力都用在刀刃上。

5. 本地部署、数据备份与进阶使用技巧

5.1 从源码到本地运行：一步步部署指南

对于希望自己部署或了解其运行机制的用户，可以遵循以下步骤：

1. 环境准备：确保本地已安装 Node.js (版本建议16以上) 和 npm/yarn/pnpm 包管理器。
2. 获取代码：使用 Git 克隆项目仓库到本地：git clone https://github.com/KaguraNanaga/kaogong-study-tracker.git
3. 安装依赖：进入项目目录，运行npm install或yarn或pnpm install。
4. 启动开发服务器：运行npm run dev。通常 Vite 会启动一个本地开发服务器（如http://localhost:5173），在浏览器中打开即可实时预览和调试应用。
5. 构建生产版本：运行npm run build。这将在dist目录下生成优化后的静态文件（HTML, JS, CSS）。
6. 本地使用：你可以直接将dist文件夹内的文件拷贝到任何地方，用浏览器打开index.html即可使用。由于数据存储在 IndexedDB 中，即使文件放在本地硬盘，数据也能持久保存（在同源策略下）。

注意事项：由于采用本地存储，数据与浏览器/设备绑定。如果你在电脑A的Chrome浏览器中使用，数据就存在电脑A的Chrome里。换到电脑B或同一台电脑的Edge浏览器，都需要重新开始。因此，定期备份数据至关重要。

5.2 数据备份、迁移与安全策略

手动备份与恢复：

• 备份：在应用的“设置”或“数据管理”页面，找到“导出数据”功能。点击后，系统会将所有任务、计划、记录打包成一个JSON文件并下载到你的电脑。
• 恢复：在新设备或新浏览器中打开应用后，使用“导入数据”功能，选择之前备份的JSON文件，即可恢复全部学习数据。
• 最佳实践：建议每周日复盘结束后，进行一次手动备份，并将备份文件同步到你的网盘（如坚果云、OneDrive）或U盘中。可以以日期命名，如study_backup_20250421.json。

潜在的数据丢失风险与应对：

1. 浏览器数据清空：如果你清除了浏览器缓存和网站数据，IndexedDB中的数据也会被清除。定期备份是唯一保险。
2. 跨设备同步需求：如果你需要在手机、平板、电脑多端使用，目前原生不支持自动同步。一个变通方案是：将构建好的dist文件夹部署到你的个人服务器或云存储（如用Netlify/Vercel部署），然后所有设备都访问同一个网址。这样数据虽然仍存储在各自设备的浏览器中，但应用版本是统一的。数据本身仍不同步，你仍需定期导出、导入来手动同步数据。
3. 数据损坏：虽然罕见，但IndexedDB也可能损坏。拥有多个历史备份文件可以最大程度减少损失。

5.3 进阶技巧：让工具更贴合个人习惯

1. 自定义主题与布局：如果项目支持，可以根据个人喜好切换浅色/深色主题，或者调整仪表盘各组件的布局，把最关心的数据放在最显眼的位置。
2. 利用浏览器书签与PWA：将部署好的应用网址添加到浏览器书签栏，一键打开。如果项目配置了PWA（渐进式Web应用），你还可以将其“安装”到桌面或手机主屏幕，获得类似原生应用的体验，包括离线启动。
3. 与笔记软件联动：将每周的数据分析报告和复盘思考，整理后粘贴到你的主力笔记软件（如Obsidian、Notion、语雀）中，形成长期的备考日记和成长档案。
4. 开发自己的小功能（针对开发者）：如果你懂前端开发，可以 Fork 这个项目，根据自己的需求添加新功能。例如：
   • 增加“鸡汤语录”或“倒计时激励”组件。
   • 开发更复杂的统计模型，如预测未来正确率。
   • 集成简单的日历视图，直观显示每日学习打卡情况。
   • 由于项目开源，这完全是一个可以自由发挥的起点。

6. 常见问题与排查实录

在实际使用这类本地化Web应用时，你可能会遇到一些典型问题。以下是我根据经验整理的排查清单：

最重要的心得：将备份视为使用这个工具的第一纪律。在投入大量时间记录后，数据就是你宝贵的数字资产。设定一个每周日的日历提醒，专门用于数据备份。多设备用户，可以建立一个简单的流程：每晚在结束学习的主设备上导出数据，同步到网盘，第二天在其他设备上开始学习前先导入。虽然有些繁琐，但比起数据丢失的代价，这点操作完全值得。

这个项目的精髓在于，它通过一个轻巧的技术实现，回归了工具的本质——为人服务，解决一个具体而真实的痛点。它不试图取代你的努力，而是让你的努力变得可见、可衡量、可优化。在公考这场漫长的跋涉中，它就像一块可靠的计步器，记录你走过的每一步，并提醒你方向是否正确，步伐是否坚实。