企业官网建设流程全解析

本地词库、本地记录：Qwerty Learner 单词记忆与打字训练的存储架构

【免费下载链接】qwerty-learner为键盘工作者设计的单词记忆与英语肌肉记忆锻炼软件 / Words learning and English muscle memory training software designed for keyboard workers项目地址: https://gitcode.com/GitHub_Trending/qw/qwerty-learner

Qwerty Learner 是一款面向键盘工作者的开源工具：你在实体键盘上逐个敲出单词，一边记忆拼写，一边训练肌肉记忆。项目没有为任何数据架设服务器——200 多本词库和每条练习记录，全部存在浏览器本地。下面按"数据从哪来、怎么存、怎么查、怎么带走"的顺序，讲清楚这套本地方案的设计。

📦 为什么所有数据都放在本地

词库是静态 JSON 文件，直接随站点一起分发，放在 public/dicts/ 目录下。大学英语四级、雅思、GRE，乃至日语 N5 到 N1、德语、印尼语、编程语言关键词，目前收录了 200 多本。

词库选择界面：200 多本 JSON 词库按级别与语言分类，全部由本地文件驱动

本地优先带来三个直接好处：

• 离线可用。飞机上、断网的机房里，词库照常加载，因为文件就在站点里；
• 隐私安全。练习记录从不上传，错误打在哪、花了多少毫秒，只有你自己能看到；
• 结构统一。每本词库都是"单词 + 释义 + 英美音标"的同一套结构，新词库只要放进目录就能被界面自动识别。

代码单词练习：编程语言关键词同样来自本地 JSON，与英语词库共用加载链路

大词库为什么能秒开

加载链路很短：src/utils/wordListFetcher.ts 用fetch拉取 JSON，外面套一层 SWR 缓存——SWR 可以理解为"先读缓存、再请求远端"的浏览器侧请求库。同一本词库第二次打开时，直接命中缓存。

真正让大词库不卡顿的，是分片策略。词库被切成每章 20 个单词的固定分片，界面只渲染当前这一片：

newWords = wordList.slice( currentChapter * CHAPTER_LENGTH, (currentChapter + 1) * CHAPTER_LENGTH )

这段代码说明：无论词库有 926 个词还是 7000 个词，单屏永远只处理 20 个，章节切换只是移动一个 slice 的起点，渲染成本恒定。

IndexedDB 三张表的分工

练习数据落在 IndexedDB 里——浏览器内置的本地数据库，相当于设备上的一个迷你数据库文件。项目用 Dexie 这个封装库操作它，核心代码在 src/utils/db/。数据库RecordDB定义了三张表：

this.version(3).stores({ wordRecords: '++id,word,timeStamp,dict,chapter,wrongCount,[dict+chapter]', chapterRecords: '++id,timeStamp,dict,chapter,time,[dict+chapter]', reviewRecords: '++id,dict,createTime,isFinished', })

这段字符串声明了每张表的索引，是理解查询性能的关键：

• wordRecords记录每个单词的练习细节：时间戳、错误次数、每个字母的击键间隔、每个位置打成了什么错键；
• chapterRecords记录每次章节练习的汇总：用时、正误按键数、一次打对的单词下标，并由此现场算出 WPM（每分钟单词数）和准确率；
• reviewRecords保存复习模式的进度与动态生成的单词队列。

注意[dict+chapter]这个复合索引：按"某本词库的某个章节"过滤记录时直接命中索引，不必全表扫描。

从击键到图表

每条wordRecords里的timing数组存着相邻字母的时间差，mistakes存着"第几个字母被错按成了哪把键"。分析页 src/pages/Analysis/ 就是对这些原始数据的聚合。useWordStats按时间范围批量取数：

const records = await db.wordRecords .where('timeStamp') .between(startTimeStamp, endTimeStamp) .toArray()

这段代码说明：热力图、WPM 折线图、错误时段柱状图背后是同一次范围查询，时间戳索引让它保持高效。

分析页：练习热力图与速度趋势均由本地 IndexedDB 记录即时聚合

好扩展，也拿得走

扩展词库只需要一步：把符合统一结构的 JSON 文件放进public/dicts/，界面会自动收录它，不需要改任何代码。

迁移靠导出导入：exportDatabase把三张表整体导出为 JSON，再经 gzip 压缩成.gz文件下载；换机器时反向导入即可，进度完整还原。

整套架构的逻辑是一致的：词库走静态文件，记录走 IndexedDB，聚合在客户端完成。没有账号、没有同步服务，数据天然离线可用、可携带，也让任何一台能开浏览器的机器，都足以支撑长期、高频的打字肌肉记忆训练。

【免费下载链接】qwerty-learner为键盘工作者设计的单词记忆与英语肌肉记忆锻炼软件 / Words learning and English muscle memory training software designed for keyboard workers项目地址: https://gitcode.com/GitHub_Trending/qw/qwerty-learner