清华学堂在线mooc平台
70.03MB · 2025-11-05
最近想在工作间隙背单词，但市面上的应用要么太复杂，要么干扰工作。于是我想：能不能做一个极简的应用，放在屏幕角落，不显眼但又能随时看到单词？
说干就干！我打开 Cursor（一个强大的 AI 编程助手），开始了一个小时的开发之旅。
我的需求很简单：
考虑到要快速开发，我选择了：
在 Cursor 的帮助下，我快速搭建了 Electron + React 的基础框架：
# 创建项目结构
npm create vite@latest lexiloop -- --template react-ts
npm install electron electron-builder
npm install zustand
这是最有趣的部分！我实现了：
随着开发的深入，我添加了更多实用功能：
这是我最喜欢的功能！点击摸鱼按钮后：
非常适合放在屏幕角落，工作间隙偷偷瞄一眼！
支持浅色/深色主题，可以随时切换，适配不同的使用场景。
使用 Electron 的 IPC 通信实现窗口控制：
// 主进程
ipcMain.handle("window-set-size", (_, width, height) => {
mainWindow?.setSize(width, height);
});
ipcMain.handle("window-set-always-on-top", (_, flag) => {
mainWindow?.setAlwaysOnTop(flag);
});
使用 Zustand 进行状态管理，配合持久化中间件：
export const useAppStore = create<AppState>()(
persist(
(set, get) => ({
// 状态和操作
}),
{
name: "lexiloop-storage",
}
)
);
通过监听窗口大小变化，动态调整 UI：
window.electronAPI?.onResize((size) => {
setWindowHeight(size.height);
});
使用 electron-builder 打包：
npm run build
打包后的安装包在 release 目录，可以直接分发给用户使用。
从零到一，只用了一个小时（加上 Cursor 的 AI 辅助），就完成了一个功能完整的 Electron 应用：
虽然已经实现了核心功能，但还有很多可以改进的地方：
这个项目完全开源，欢迎：
GitHub: LexiLoop
感谢 Cursor 提供的 AI 编程助手，让开发效率提升了一个档次！
如果你觉得这个项目有用，欢迎给个 ⭐ Star，你的支持是我持续改进的动力！
让我们一起用技术让学习变得更简单、更有趣！
Made with ️ using Cursor + Electron + React + TypeScript
2025-11-05
《大千世界2》双溪瀑钓鱼介绍
2025-11-05
【阿里西西开箱】WIKO Hi MateBook 14 锐龙版轻薄本实拍：2.8K OLED 高刷触控屏、锐龙 7 H 255 处理器
