KeyFlow ⚡

一款优雅的英语单词打字练习桌面应用

流畅打字，轻松提升 | 让学习成为一种享受

下载应用 • 功能特点 • 快速开始 • 使用指南 • 技术栈 • 开发

🎬 演示

💡 提示： 也可以访问在线版本立即体验！

📥 下载应用

macOS

系统要求： macOS 11.0 (Big Sur) 或更高版本

架构支持： Apple Silicon (M1/M2/M3) & Intel

安装步骤

点击上方按钮下载最新版本
解压下载的 .zip 文件
将 KeyFlow.app 拖入 应用程序 文件夹
首次打开时，右键点击应用选择"打开"（macOS 安全设置）

💡 提示： 如果遇到"无法打开应用"的提示，请前往 系统偏好设置 > 安全性与隐私 允许打开该应用。

📖 项目简介

KeyFlow 是一款专为英语学习者设计的桌面打字练习应用。它整合了9大考试词库（CET-4/6、考研、雅思、托福、GRE、SAT、专四/八），提供沉浸式的打字练习体验，帮助用户在提升打字速度的同时，深入掌握英语词汇。

✨ 核心亮点

🎯 专注模式 - 极简界面设计，让你专注于学习
📚 9大词库 - 涵盖主流英语考试，超过2万词汇量
🎨 优雅美观 - 玻璃态设计，渐变色彩，赏心悦目
🎵 机械键盘音效 - 14种真实键盘音效，打字更有快感
🗣️ 真人发音 - 支持美式/英式发音，多种语音可选
📖 丰富内容 - 例句、同义词、常用短语，全方位学习
💾 进度保存 - 自动保存学习进度，随时继续
🎮 双模式 - 练习模式 + 默写模式，灵活切换

🎯 功能特点

📚 词库管理

9大考试词库
- CET-4 大学英语四级
- CET-6 大学英语六级
- 考研英语
- IELTS 雅思
- TOEFL 托福
- GRE
- SAT
- 专业四级
- 专业八级
灵活练习
- 自定义每章节单词数量（10-50个）
- 支持顺序练习和随机打乱
- 章节切换，自由选择学习范围

🎨 界面设计

极简美学
- 玻璃态（Glassmorphism）设计
- 流畅的渐变色彩
- 简洁的交互反馈
- 沉浸式学习体验
响应式布局
- 三栏布局（左：例句 | 中：练习区 | 右：同义词短语）
- 可折叠侧边栏
- 适配不同屏幕尺寸

🎵 音效系统

14种机械键盘音效
- Cherry MX Blues/Browns/Blacks
- Gateron Red/Black Inks
- Holy Pandas
- Topre
- Kailh Box Navies
- SKCM Blue Alps
- Buckling Spring
- 更多...
智能音频
- 独立音量控制
- 一键静音
- 正确/错误反馈音效

🗣️ 语音功能

多语音支持
- 美式英语 (en-US)
- 英式英语 (en-GB)
- 多种说话人可选
便捷操作
- 一键播放发音
- 快捷键支持（Cmd/Ctrl + P）

📊 学习统计

实时数据
- 打字速度（WPM - Words Per Minute）
- 准确率（Accuracy）
- 练习时间
进度跟踪
- 章节进度保存
- 单词进度记录
- 自动恢复上次练习

🎮 练习模式

练习模式

显示完整单词
实时错误提示
字符级别反馈
侧边栏辅助学习

默写模式

仅显示发音按钮
听音拼写
专注训练听力和拼写
自动隐藏辅助内容

📖 学习辅助

例句学习
- 真实语境中的例句
- 中英文对照
- 最多显示3条
同义词扩展
- 按词性分类
- 最多显示5组
- 帮助理解词义
常用短语
- 实用短语搭配
- 中文释义
- 最多显示5条

🚀 快速开始

环境要求

Node.js >= 18.x
npm >= 9.x

安装依赖

# 克隆项目
git clone <repository-url>
cd two

# 安装依赖
npm install

开发运行

# 启动开发服务器
npm start

应用将在开发模式下启动，支持热重载。

构建应用

# 构建生产版本
npm run make

构建完成后，可执行文件将在 out 目录中。

📱 使用指南

基本操作

选择词库
- 启动应用后，在主页选择想要练习的词库
- 支持9种不同考试类型的词库
开始练习
- 进入练习界面后，开始输入单词
- 输入正确后自动进入下一个单词
切换章节
- 点击顶部章节按钮，选择想要练习的章节
- 支持快速跳转

快捷键

快捷键	功能
`Tab` (长按)	显示单词提示
`Cmd/Ctrl + P`	播放单词发音
`←`	上一个单词
`→`	下一个单词

设置选项

点击顶部 ⚙️ 设置 按钮可以调整：

每章节单词数量（10-50个）
练习模式（顺序/随机）
其他个性化设置

侧边栏

点击 📖 侧栏 按钮可以：

显示/隐藏学习辅助内容
左侧：例句
右侧：同义词和常用短语

🛠 技术栈

前端框架

React 18 - UI 框架
TypeScript - 类型安全
React Router - 路由管理

桌面框架

Electron 32 - 跨平台桌面应用
Electron Forge - 打包和分发

样式

Tailwind CSS - 原子化 CSS 框架
PostCSS - CSS 处理

构建工具

Vite - 快速构建工具
esbuild - JavaScript 打包

音频/语音

Web Audio API - 音效播放
Web Speech API - 语音合成

📁 项目结构

two/
├── assets/              # 应用资源
│   ├── icon.png        # 应用图标
│   └── ...
├── public/             # 公共资源
│   ├── books/          # 词库数据（JSONL格式）
│   │   ├── CET4_3.json
│   │   ├── CET6_3.json
│   │   └── ...
│   └── sounds/         # 音效文件
│       ├── key-sound/  # 键盘音效
│       ├── correct.wav
│       └── beep.wav
├── src/
│   ├── components/     # React 组件
│   │   ├── HintModal.tsx
│   │   └── SettingsModal.tsx
│   ├── data/          # 数据管理
│   │   └── dictionaries.ts
│   ├── layout/        # 布局组件
│   │   └── layout.tsx
│   ├── pages/         # 页面组件
│   │   ├── home.tsx
│   │   ├── practice.tsx
│   │   └── typing-practice.tsx
│   ├── types/         # TypeScript 类型
│   │   └── index.ts
│   ├── utils/         # 工具函数
│   │   ├── loadBooks.ts
│   │   └── progress.ts
│   ├── app.tsx        # 应用入口
│   ├── main.ts        # Electron 主进程
│   ├── preload.ts     # 预加载脚本
│   ├── renderer.ts    # 渲染进程
│   └── index.css      # 全局样式
├── forge.config.ts    # Electron Forge 配置
├── vite.*.config.ts   # Vite 配置
├── tailwind.config.js # Tailwind 配置
├── tsconfig.json      # TypeScript 配置
└── package.json       # 项目配置

🔧 开发

添加新词库

将词库 JSON 文件放入 public/books/ 目录
在 src/utils/loadBooks.ts 中添加词库配置：

{
  id: 'new-book',
  name: '新词库名称',
  description: '词库描述',
  category: '考试',
  fileName: 'NewBook.json',
}

添加键盘音效

将音频文件放入 public/sounds/key-sound/ 目录
在 src/pages/typing-practice.tsx 中添加到 keySounds 数组：

{ name: '音效名称', file: 'filename.mp3' }

自定义样式

全局样式在 src/index.css 中定义，使用 Tailwind CSS 的 @layer 指令：

@layer components {
  .glass-effect {
    @apply bg-white/80 backdrop-blur-md;
  }
}

🎨 设计理念

极简主义

去除冗余元素
专注核心功能
减少认知负担

玻璃态设计

半透明背景
背景模糊效果
轻盈的视觉感受

渐变色彩

从紫色到粉色的主题渐变
柔和的色彩过渡
活力而不刺眼

流畅动画

平滑的过渡效果
微妙的悬停反馈
自然的交互体验

🤝 贡献

欢迎贡献代码、报告问题或提出建议！

贡献步骤

Fork 本仓库
创建特性分支 (git checkout -b feature/AmazingFeature)
提交更改 (git commit -m 'Add some AmazingFeature')
推送到分支 (git push origin feature/AmazingFeature)
开启 Pull Request

代码规范

遵循 TypeScript 最佳实践
使用有意义的变量和函数名
添加必要的注释
保持代码整洁

📝 更新日志

v1.0.0 (2025-01-12)

新增

✨ 9大考试词库支持
🎨 全新玻璃态设计界面
🎵 14种机械键盘音效
🗣️ 多语音发音支持
📖 例句、同义词、短语学习
💾 自动进度保存
🎮 练习/默写双模式

优化

⚡ 异步词库加载，提升性能
🎯 三栏布局，更好的学习体验
📱 响应式设计，适配各种屏幕

📄 许可证

MIT License

🙏 致谢

感谢所有开源项目的贡献者
感谢各类机械键盘音效素材提供者
感谢使用 KeyFlow 的每一位用户

📮 联系方式

如有问题或建议，欢迎通过以下方式联系：

提交 Issue
发送 Pull Request
邮件联系：[3090699578xx@gmail.com]

Made with 💜 by KeyFlow Team

让打字成为一种享受 | 让学习充满乐趣

⬆ 回到顶部

Name		Name	Last commit message	Last commit date
Latest commit History 15 Commits
assets		assets
docs		docs
functions		functions
public		public
scripts		scripts
src		src
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
.npmrc		.npmrc
DESIGN_NOTES.md		DESIGN_NOTES.md
README.md		README.md
WEB_DEPLOYMENT.md		WEB_DEPLOYMENT.md
forge.config.ts		forge.config.ts
forge.env.d.ts		forge.env.d.ts
index-web.html		index-web.html
index.html		index.html
output.css		output.css
package-lock.json		package-lock.json
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json
vite.config.ts		vite.config.ts
vite.main.config.ts		vite.main.config.ts
vite.preload.config.ts		vite.preload.config.ts
vite.renderer.config.ts		vite.renderer.config.ts

NoyaMrXiao/KeyFlow

Folders and files

Latest commit

History

Repository files navigation