想摸鱼背单词？我用 Cursor 一个小时开发了一个 Electron 应用

🐟 一个极简的文字轮播记忆工具，支持摸鱼模式，让你在工作的间隙也能偷偷背单词！

📖 故事开始

最近想在工作间隙背单词，但市面上的应用要么太复杂，要么干扰工作。于是我想：能不能做一个极简的应用，放在屏幕角落，不显眼但又能随时看到单词？

说干就干！我打开 Cursor（一个强大的 AI 编程助手），开始了一个小时的开发之旅。

🎯 核心需求

我的需求很简单：

极简界面：只显示文字，不要花里胡哨的 UI
自动轮播：可以设置间隔时间自动切换
可定制：字体大小、颜色可以调整
摸鱼友好：窗口可以很小，不占用太多屏幕空间
置顶显示：可以始终显示在其他应用上层

⚡ 技术选型

考虑到要快速开发，我选择了：

Electron：跨平台桌面应用框架
React + TypeScript：现代前端技术栈
Vite：极速构建工具
Zustand：轻量级状态管理

🚀 开发过程

第一步：基础框架搭建

在 Cursor 的帮助下，我快速搭建了 Electron + React 的基础框架：

bash 复制代码

# 创建项目结构
npm create vite@latest lexiloop -- --template react-ts
npm install electron electron-builder
npm install zustand

第二步：核心功能实现

文字轮播组件：使用 React 组件显示当前语料，定时器自动切换
语料管理：使用 Zustand 管理状态，localStorage 持久化存储
自定义标题栏：去掉默认标题栏，自己实现一个简洁的工具栏

第三步：摸鱼模式实现

这是最有趣的部分！我实现了：

一键切换摸鱼模式：点击 🐟 按钮，窗口自动缩小到 50px 高度
自动置顶：进入摸鱼模式后自动开启窗口置顶
拖拽手柄：左侧添加 🤚 拖拽图标，方便移动窗口
极简布局：去掉所有内边距，只保留必要的内容

第四步：增强功能

随着开发的深入，我添加了更多实用功能：

✅ 主题切换：支持浅色/深色主题
✅ 窗口置顶：可手动控制窗口是否置顶
✅ 导出功能：支持将语料导出为 TXT 文件
✅ 响应式布局：窗口较小时，进度显示自动移到标题栏
✅ 快捷键支持：空格暂停、方向键切换

🎨 功能亮点

1. 摸鱼模式 🐟

这是我最喜欢的功能！点击摸鱼按钮后：

窗口自动缩小到 50px 高度，宽度 500px（可调整）
自动开启窗口置顶，始终显示在其他应用上层
左侧有拖拽手柄，可以轻松移动窗口
极简布局，去掉所有多余的内边距和装饰

非常适合放在屏幕角落，工作间隙偷偷瞄一眼！

2. 智能进度显示

窗口高度 ≥ 200px：进度显示在底部
窗口高度 < 200px：进度自动移到标题栏，去掉背景和内边距，保持简洁

3. 主题切换

支持浅色/深色主题，可以随时切换，适配不同的使用场景。

4. 完整的语料管理

批量添加（每行一条）
编辑、删除语料
导出为 TXT 文件
自动保存到本地

💻 技术实现细节

窗口控制

使用 Electron 的 IPC 通信实现窗口控制：

typescript 复制代码

// 主进程
ipcMain.handle("window-set-size", (_, width, height) => {
  mainWindow?.setSize(width, height);
});

ipcMain.handle("window-set-always-on-top", (_, flag) => {
  mainWindow?.setAlwaysOnTop(flag);
});

状态管理

使用 Zustand 进行状态管理，配合持久化中间件：

typescript 复制代码

export const useAppStore = create<AppState>()(
  persist(
    (set, get) => ({
      // 状态和操作
    }),
    {
      name: "lexiloop-storage",
    }
  )
);

响应式布局

通过监听窗口大小变化，动态调整 UI：

typescript 复制代码

window.electronAPI?.onResize((size) => {
  setWindowHeight(size.height);
});

🎯 使用场景

背单词：工作间隙偷偷背几个单词
记忆句子：练习英语口语常用句子
学习诗词：记忆古诗词
知识回顾：快速回顾重要知识点

📦 打包发布

使用 electron-builder 打包：

bash 复制代码

npm run build

打包后的安装包在 release 目录，可以直接分发给用户使用。

🎉 开发成果

从零到一，只用了一个小时（加上 Cursor 的 AI 辅助），就完成了一个功能完整的 Electron 应用：

✅ 极简的界面设计
✅ 完整的语料管理功能
✅ 独特的摸鱼模式
✅ 主题切换和窗口置顶
✅ 导出功能
✅ 快捷键支持

🤔 开发心得

AI 辅助开发真的很高效：Cursor 的 AI 助手帮我快速生成了大量样板代码，我只需要关注业务逻辑
简单就是美：不要过度设计，聚焦核心需求
迭代开发：先实现核心功能，再逐步完善细节

🌟 未来计划

虽然已经实现了核心功能，但还有很多可以改进的地方：

支持导入语料文件
添加统计功能（学习进度、复习提醒）
支持多语言界面
添加更多主题样式
支持云端同步（可选）

💡 开源贡献

这个项目完全开源，欢迎：

⭐ Star 这个项目，让更多人看到
🐛 提交 Issue，报告 Bug 或提出建议
💻 提交 PR，贡献代码或改进文档
📢 分享给需要的朋友

📝 项目地址

GitHub : LexiLoop

🎁 特别感谢

感谢 Cursor 提供的 AI 编程助手，让开发效率提升了一个档次！

如果你觉得这个项目有用，欢迎给个 ⭐ Star，你的支持是我持续改进的动力！

让我们一起用技术让学习变得更简单、更有趣！ 🚀

Made with ❤️ using Cursor + Electron + React + TypeScript