kaiyiwing / qwerty-learner

为键盘工作者设计的单词记忆与英语肌肉记忆锻炼软件 / Words learning and English muscle memory training software designed for keyboard workers

Qwerty Learner

English

为键盘工作者设计的单词记忆与英语肌肉记忆锻炼软件

📸 在线访问

Vercel: https://qwerty.kaiyi.cool/ , https://qwerty-learner.vercel.app/ GitHub Pages: https://realkai42.github.io/qwerty-learner/ Gitee Pages: https://kaiyiwing.gitee.io/qwerty-learner/

国内用户建议使用 Gitee 访问

项目已发布 VSCode 插件版，一键启动、随时开始练习 VSCode Plugin Market GitHub

快速部署

Vercel

部署步骤

1. 更新 Vercel Build & Development Settings -> Output Directory："build"
2. Click Deploy Button

✨ 设计**

软件设计的目标群体为以英语作为主要工作语言的键盘工作者。部分人会出现输入母语时的打字速度快于英语的情况，因为多年的母语输入练就了非常坚固的肌肉记忆 💪，而英语输入的肌肉记忆相对较弱，易出现输入英语时“提笔忘字”的现象。

同时为了巩固英语技能，也需要持续的背诵单词 📕，本软件将英语单词的记忆与英语键盘输入的肌肉记忆的锻炼相结合，可以在背诵单词的同时巩固肌肉记忆。

为了避免造成错误的肌肉记忆，设计上如果用户单词输入错误则需要重新输入单词，尽可能确保用户维持正确的肌肉记忆。

软件也对需要机考英语的人群有一定的帮助。

For Coder：

内置了程序员工作常用单词的词库，方便练习工作中常用的单词、提高输入速度。也内置了诸多语言的 API 的练习，帮助以程序员快速熟悉常用的 API，更多语言的 API 正在逐步添加中...

🛠 功能列表

词库

内置了常用的 CET-4 、CET-6 、GMAT 、GRE 、IELTS 、SAT 、TOEFL 、考研英语、专业四级英语、专业八级英语，也有程序员常见英语单词以及多种编程语言 API 等词库。 尽可能满足大部分用户对单词记忆的需求，也非常欢迎社区贡献更多的词库。

音标显示、发音功能

方便用户在记忆单词时，同时记忆读音与音标。

默写模式

在用户完成一个章节的练习后，会弹出选项是否默写本章，方便用户巩固本章学习的单词。

速度、正确率显示

量化用户输入的速度和输入的正确率，让用户有感知的了解自己技能的提升

如何贡献

贡献代码

Call for Contributor 贡献准则

贡献词库

导入词典

运行项目

本项目是基于React开发的，需要 node 环境来运行。

手动安装

1. 安装 NodeJS，参考官方文档
2. 使用 git clone 下载项目到本地, 不使用 git 可能因为缺少依赖而无法运行
3. 打开命令行，在项目根目录下，运行yarn install来下载依赖。
4. 执行yarn start来启动项目，项目默认地址为http://localhost:5173/
5. 在浏览器中打开http://localhost:5173/来访问项目。

脚本执行

对于 Windows 用户，可以直接执行 install.ps1 脚本，来一键安装依赖并启动项目。

1. 打开 powershell，定位到项目根目录中的scripts目录
2. 在命令行中，执行.\install.ps1
3. 等待脚本完成。

备注 脚本依赖winget来安装 node，仅在 Windows 10 1709（版本 16299）或更高版本上受支持！

对于 MacOS 用户，可以直接执行 install.sh 脚本来一键安装依赖并启动项目

1. 打开终端，并进入此项目文件夹
2. 在命令行中执行 scripts/install.sh
3. 等待脚本完成

此脚本依赖于 homebrew，请确保自己电脑上可以执行brew命令

🏆 荣誉

• Github 全球趋势榜上榜项目
• V2EX 全站热搜项目
• Gitee 全站推荐项目
• 少数派首页推荐
• Gitee 最有价值开源项目(GVP)

📕 词库列表

• CET-4
• CET-6
• GMAT
• GRE
• IELTS
• SAT
• TOEFL
• 考研英语
• 专业四级英语
• 专业八级英语
• Coder Dict 程序员常用词
• 高考
• 中考
• 商务英语
• BEC
• 人教版英语 3-9 年级
• 王陆雅思王听力语料库 @Saigyouji_WKKun
• 日语常见词、N1 ～ N5 @xiaojia

如果您需要背诵其他词库，欢迎在 Issue 中提出

📗 API 词库

• JavaScript API. @sdu-gyf
• Node.js API. @chrysalis1215
• Java API. @darkSheep
• Linux Command. @归谜
• C#: List API @nidbCN

目前 API 相关词库主要依赖于社区贡献，如果您想贡献自己需要的 API 词库，建议参考 Issue #42 pr #67 贡献词典。

🎙 功能与建议

目前项目处于开发初期，新功能正在持续添加中，如果你对软件有任何功能与建议，欢迎在 Issues 中提出

项目的进展与未来计划在 Issue 中详细介绍，内部也包含对未来功能的意见征询等，如果对 Qwerty Learner 的未来感兴趣，欢迎参与讨论。

如果你也喜欢本软件的设计**，欢迎提交 pr，非常感谢你对我们的支持！

🏄‍♂️ 贡献指南

如果您对本项目感兴趣，我们非常欢迎参与到项目的贡献中，我们会尽可能地提供帮助

在贡献前，希望您阅读 Issue #42 了解我们目前的开发计划，我们希望您能参与到"计划中"的工作亦或者 Issue 区 Label 为 "Help Wanted" 的工作，我们也非常欢迎您实现自己的想法。

如果您确定了想要参与的工作，希望在有基本进展后提交 draft pr，我们可以在 draft pr 上进行讨论，也有利于听取其他 collaborator 的意见。

再次感谢您对项目的贡献！🎉

☕️ Buy us a coffe

非常感谢大家使用 Qwerty Learner, 目前该网站由三个人用业余时间在维护，我们希望在未来购买独立的域名(目前使用 vercel 部署)，并购买服务器以方便国内用户访问与云同步存储数据。

如果您喜欢我们软件，非常感谢您对我们未来的支持!

👨‍💻 Contributors

🎁 大感谢

灵感来源

Keybr 以算法著称，功能非常完善的打字网站，根据用户输入每个字母的正确率与速度生成“伪英语”来帮助用户集中锻炼个别输入较慢的字母。并可以根据用户的输入记录生成完整的分析报告。

也是本项目的核心灵感来源，Keybr 更多针对英语为母语的用户。在我使用 Keybr 练习打字时，觉得虽然生成的伪英语能够练习输入不顺畅的个别字母，但并不能提升非母语用户对单词的掌握，于是有了本项目。

Typing Academy 非常优秀的打字练习网站 其优秀的 UI 风格，以及对速度、正确率的展示极大的影响了本项目的 UI 设计

react-code-game 一个非常酷的开源项目，使用 ts 实现，可以在练习打字的同时练习 js 内置 api，项目中添加代码 api 的想法便来源自此项目。

开源项目

React & CRA 完整和详细的文档对初学者非常友好，React 系的文档是我目前自学过程中读过最棒的文档，几乎解决使用中大部分问题。非常感谢 React 对开源世界的贡献，为我们搭建了很好的基础，让初学者也能构建非常棒的软件。

Tailwindcss 如果没有 tailwind，这个项目还有再拖一阵子，tailwind 的设计思路解决了 css 入门选手对写复杂 css 的恐惧，让新手以一个非常舒适的方式去设计 UI。

数据来源

字典数据来自于kajweb，项目爬取了常见的字典，也是这个项目让我看到了实现本项目的希望。

语音数据来源于有道词典开放 API，感谢有道的贡献让我们这种小项目也可以用上非常专业的发音资源，感谢有道团队以及考神团队为**教育与中外交流做出的重要贡献。

JS API 来自于react-code-game ，感谢项目对 JS API 的爬取与预处理。

项目 Icon

感谢libregd提供图标设计，给项目贡献了多个好看的图标设计方案，同时也在项目的进行中提供了设计、建议、未来规划等诸多支持

感谢支持

感谢云谦、大圣 在项目只有十几个 star 时关注了项目，给项目推进下去的动力。

也感谢在项目初期跟我讨论 idea、提供建议并时不时 Push 一下我的朋友们，没有你们这个 idea 可能还得再拖一年（🐶

感谢 Pear Mini ，最开始跟我讨论 idea 给我项目支持，也是他的项目让我相信即使是一个学生的 idea 实现出来也可以很酷。 他的 Gossip 项目完全是 Next Generation Slides 级别的创意！

感谢 AZ，鼓励我把 idea 实现出来（虽然我还是拖了很久），他无与伦比的行动力影响了我。他是一个非常酷的 lib maker，写了很多非常棒的 python 库，例如中文语音识别的框架ASRFrame

感谢 Luyu Cheng，我认识的最酷的前端大佬，给项目与我的前端自学提供了无尽的帮助。在项目初期帮助我进行技术选型，在开发阶段帮我解决技术问题，为我不知道如何实现的 feature 提供技术思路，也为项目贡献了很多非常受欢迎的 feature。

🌟 Stargazers over time

qwerty-learner's Issues

添加开发模式的相关文档说明

补充在 readme.md 最下面或者另外开一个 development.md （

feat: 句子背诵模式

feat：- 设计倒计时模式，在限定时间内完成章节

feat: 完成一个章节后自动暂停，用户选择后下一章节后自动开始

用户焦点管理

目前用户点击字典选择框后，焦点会持续在选择框上，导致快捷键 enter 开关失效

最好可以有用户的数据存储

方便收录错误的单词 和 用户的进度

大写的单词打不了

如何输入 “cliché”？

带声调的字符我是用 compose key 输入的，但是网页上我按完 “e” 键就识别了，导致我无法打出这个单词。

feat: 页面显示从chap. 1开始

考虑到目标用户很多为非程序员用户，页面显示从chap. 1开始对这这些用户会更加友好

feat：“keyboard only” 设计

目前用户在选择下一章节时需要离开键盘使用鼠标，未来应该将弹出的提示框的按钮也设计成 输入单词的模式，用户输入 next chapter，则跳转到下一章节。
减少用户使用鼠标操作的需求

feat：抄写模式

目前仅有“描红模式”，需提供选项支持 目标单词在上方，下方为输入框的模式

feat：单词释义分行、分中英展示，并提供开关

feat: 希望加入深色模式, 照顾暗黑风VS Code用户的视觉体验

目前敲字体验非常棒!
希望加入深色模式, 照顾暗黑风VS Code用户的视觉体验, 谢谢!

feat: 单词输入正确和错误后的动画反馈

feat: 单词默写模式

页面无法拦截到用户输入

是这样的，我的chrome安装了插件：Vimium

当我敲击键盘时，部分键入事件应该是被Vimium拦截了，这时候页面无法获取我的输入，禁用插件后可以正常使用！

建议优化方案：页面增加一个隐藏的input输入框，默认是聚集的，用户进入页面后，输入内容时，就会是普通的输入事件，插件应该不会去拦截。

Is internationalization supported?

AFAIS, UI, readme, issues are only comprehensible for Chinese users. But the dictionary, especially TOEFL and IELTS, could feed any non-native speakers.

feat：程序员专属词库

添加程序员写代码时常用的单词和命令词库

这种 é 怎么输入呀？

feat: 无尽模式

能不能不按照 chapter 呢，有时候 chapter 感觉很麻烦，全局随机（逃

feat:单词发音和音标的显示

监测到用户输入自动开始

fix: 报告缺陷, 完成单章节词库的所有单词后, 页面白屏

完成单章节词库的所有单词后, 例如js-global, 页面白屏, 试了两次均是如此

能告诉后端怎么安装这个东西吗

一个后端看得津津有味，就是没有找到安装方法。yarn install 然并卵~~~~~

英式美式拼写偏好设置

偏好：英式/美式/不做偏好

如果用户设置了偏好，在词库中遇到拼写不同的词的时候，自动进行转换（并给予提示）

例如，color，analyze

切换词库时，进度没有被正确修改

复现：

• CET-4进行到27章第10个单词
• 切换到js-object
• 页面空白，控制台报错TypeError: Cannot read property 'name' of undefined

能否增加“键盘”及“手指指示”，参考一个外国的打字练习网站

打字练习网站：https://www.typingclub.com/sportal/program-3/147.play

关于单unit重复和乱序Plus的建议

可以在背每个unit之前设一个重复次数……比如这个unit我要打3遍这样的……然后每一遍的顺序是不同的

BTW 求一个python 数据挖掘有关 api

feat: 希望能增加 Node.js 的 API 支持

qwerty-learner 真的是一个很棒的产品，希望后面能支持 Node.js 的API。
在前端开发中，会常常用到这些

• HTML 、CSS、 javascript、react、 vue、Node.js 等
  如果有开放的词典贡献流程，可以号召更多的人去支持自己的词库，那就更棒了。

Add vocabularies of other languages

能否多加入几种语言，比如中文，日文

建议：增加进度记忆功能

下次打开时能从上次练习的地方开始

自定义背景色或本地设置背景图

很喜欢这个项目，打击音非常解压，或许会成为我以后放松时的娱乐项目之一。基于“放松”这样的使用场景，希望可以让使用者自定义页面背景色，最好可以自己上传本地背景图片，让眼睛👀也适当得到放松，谢谢开发者~

可以有语音吗

非常喜欢这个项目，可以在打这个单词之前播放一次这个单词发音吗，只看音标会有点难度

用户调查

我们对输入错误字母的时候做了三种不同的处理

1. 清空已经输入的字母并从头输入 (https://qwerty-learner.vercel.app)
2. 当遇到错误时阻塞用户输入，直到用户按下正确的字母或者按下 Backspace 删除错误的输入(https://qwerty-blocking.vercel.app/)
3. 当遇到错误时不阻塞用户输入，用户仍可以继续输入后续字母但输入错误的字母会被标记(https://qwerty-non-blocking.vercel.app/)

我们希望得到大家的反馈，我们会根据大家的反馈决定最终输入处理策略，并考虑是否三种方式并存并为用户提供切换模式选项

feat: 默写时是否可以加入一个"显示首字母"的选项

默写只显示字母数量太硬核了, 是否可以加入一个"显示首字母"的选项? 感谢

feat： 自定义单词列表模式

支持用户输入自己的词典，背诵自己特定的单词列表

新字典源推荐

https://github.com/skywind3000/ECDICT

MORE WORDs, MORE POWER

feat：游戏模式

基于单词拼写的游戏模式，例如结合飞机大战，用户需要输入单词来攻击袭来的飞机✈️

建议添加一个vscode插件

这样就能在一个非常隐蔽的角落学习英语了

feat：API 背诵模式

方便 Coder 背诵 API，形成对 API 的肌肉记忆💪

UI 改变

将速度显示的 ui 放置在其他位置，目前放在下方的方式影响用户阅读中文释义，过于显眼。目前的方式也影响多行中文翻译的布局

单词默写模式的一点疑问

add this feature at 7756924

Originally posted by @Kaiyiwing in #8 (comment)

单词默写模式 == 开关英语显示 Ctrl +V对吗？
体验了一下，问题在于，plentiful 和 abundant 意思差不多，中文和英文词汇不是一一对应的关系。
建议可以考虑默写的情况下，_ _ _ _ _ _ _ _ _ 来逐一显示（每个字母对的话，绿色，还有两个差不多意思的单词字母个数都一样的情况，比如作为名词的type和kind，中文释义的话意思是差不多的。）

feat: 单词发音

能不能做到在单词显示时候进行发音呢，现在只能显示音标好像不能发音

项目进展 #1

大家好，非常开心 Qwerty Learner 项目能够受到大家的喜爱

通过 contributors 的努力，我们在开源之初的基础上增加与完善了许多功能，目前项目的基础体验已经相对完善，可以很好的满足大部分用户对一款单词记忆软件的需求。

我们非常开心的宣布项目的第一个 iteration 圆满结束，我们会暂停一段时间功能性更新，仅对影响体验的 bug 进行修复。在这段时间内，我们会讨论项目未来功能的发展方向，我们非常希望大家能够通过 Issue 参与到讨论之中，给我们提供建议与想法。

开发任务

已经提上开发日程的工作

• 代码重构 @Kaiyiwing
• 新版本UI更新 #23 @sdu-gyf
• 动画反馈 #6 @Kaiyiwing
• 单词发音 #34 pr: #50 @whexy @sdu-gyf
• 默写模式下输入错误时会显示音标提示 #55 @sdu-gyf
• 词典与章节选择框的UI更新 #45 @chengluyu
• Dark Mode #46 pr:#64 @CLDXiang

个人使用体验和建议

1. ipad+logitech蓝牙键盘可以用，这真的太妙了。
2. 下方的数据展示是必要的，但是感觉因为一直在计算，视觉上在跳动，比较影响注意力，可以考虑放到边角？——我认为这个特点是学英语，打字倒是次要的
3. 单词可否给出音标+语音（默认打开，可手动关闭）的设置，这样听力视觉二合一
4. 单词是通过输入变色的来判定输入的，可以考虑加入上一行下一行照抄的模式吗？抄对的字母绿色，不对的红色。
5. 单词可以否标明词性，如果有多个词性，从上到下排列.....
6. 单词的释义可否是中英文双语的，且可只显示某一种语言的释义，因为基本只有英语释义的才讲使用情景。
7. 想要练习文章，然后重点词汇和词组🈶️色彩高亮.....

希望能增加英文释义模式

通过回溯多年以来的个人学习经历，在学习外国语言时，能让学习者理解其英文释义，将更有助于记住这个单词的用法以及与其他近义词的不同。

建议增加错词统计功能

要是能分析什么键位容易按错就更好了🤣

feat：匿名存储用户速度，完成后显示排名

例如：您的速度超过了 XX% 人

默写拼错时希望能加上音标提示

鉴于同义词的问题，希望在默写模式下写错时加上音标提示，感谢。

是否可以降低提交频率？以及两个问题。

想提个 pr，结果仓库已经更新了，刚同步到最新版，又更新了，太难了！
是否可以适当降低下提交频率，或者在 dev 分支上做？

问题如下

1. 在 windows 上开发会遇到 Delete `␍` prettier/prettier 这样的提示
   需要修改 packages.json 中的配置

      "prettier/prettier": ["error", {
        "endOfLine": "auto"
      }]

2. 横纵都有滚动条（在v2上反馈过）
   定位了下，是右上方 Star 按钮下的 "快捷键 Enter" 提示把元素顶出去了
   我倾向在 nav 上加 padding 来解决这个问题，个人觉得有点留边也更好看

// src/components/Header/index.tsx
<nav className="w-full container mx-auto px-10 py-6">
  // ...
<nav>

就是把 px-0 改为了 px-10