概览

生产取向的 Electron 桌面启动模板,内置安全 IPC、认证、计费、设置、更新与一键改名。

Electron 模板面向需要发布 macOS、Windows 与 Linux 商业桌面应用的团队。 它预置了常见桌面产品的基础设施:认证、设置、自动更新管线、日志、Creem 计费、安全 IPC、安装包构建,以及一键改名脚本。

把它当作 clone-and-ship 的基础。替换默认品牌、页面、演示功能和业务逻辑, 保留 Electron 外壳与类型化进程边界。

"生产取向" 表示模板提供真实的桌面应用基础设施,不表示可以不经审查直接上线。 部分功能是 ExampleOpt-in slotRemovable demo,发布前应按你的产品改造。

默认身份在评估阶段故意保持直白:Soar Electronsoar-electron://com.soarstarter.electron。准备替换时运行 pnpm rebrand,它会同步更新代码、 electron-builder.yml、包元数据和应用资源里的相关值。

技术栈

层级选择
桌面运行时Electron 40.1、electron-builder 26.7、electron-updater 6.8
UI 运行时React 19.2、React DOM 19.2、React Router 7.13
语言与构建TypeScript 5.9、Vite 7.3、electron-vite 5.0
样式Tailwind CSS 4.1、shadcn 风格组件、Radix UI、CVA、sonner
应用状态zustand 5、TanStack Query 5、react-hook-form、zod 4
后端客户端Supabase JS 2.106,带类型化数据库访问
计费Creem,通过 Supabase Edge Functions 与 Supabase 权益读模型接入
桌面外壳Conveyor IPC、Zod 校验、设置存储、托盘、菜单、快捷键
可观测性electron-log、脱敏诊断、可选 @sentry/electron
本地化i18next 与 react-i18next,英文和简体中文
测试Vitest 4、Testing Library、Playwright 冒烟测试
工具链pnpm 11.1.3、ESLint、Prettier、bundle analyzer、rebrand 脚本

功能状态

本根目录统一使用这些状态标签:

  • Integrated - 已接入应用,默认可用。
  • Flag-gated - 由构建期开关隐藏或剥离;每页会说明默认值。
  • Opt-in slot - 配置完成且用户同意后才启用。
  • Example - 可运行示例代码,预期由你的产品逻辑替换。
  • Removable demo - 评估用演示面,带 [template-demo] 标记,并有 Showcase 删除清单。
区域状态范围
Shell 与 IPCIntegratedmain/preload/renderer 拆分、沙盒 renderer、contextBridge preload、Conveyor API、Zod 校验 IPC 入参与返回值
桌面界面Integrated自定义标题栏、侧边栏、命令面板、原生菜单、托盘、快捷键、日志、诊断、外部导航防护
设置Integrated带前向迁移的版本化 JSON 设置存储、备份导入导出、搜索、主题、语言、代理、存储、通知、快捷键
自动更新Flag-gatedVITE_AUTO_UPDATE_ENABLED 默认开启;后台/手动检查使用 electron-updater 和自托管 generic feed
认证与数据Flag-gated / ExampleSupabase 邮箱认证默认开启;profile、avatar、todos 是示例,需要按 Supabase 设置页补齐 schema
计费Flag-gatedVITE_BILLING_ENABLED 默认关闭;配置后才启用 Creem checkout、客户门户、license mode 与 <FeatureGate>
隐私插槽Opt-in slotSentry 错误上报和通用 analytics 目的地在配置且用户同意前都是 no-op
Showcase 目录Removable demoCapability catalog、组件画廊和演示路由由 showcase flag 与 [template-demo] 标记保护
分发IntegratedmacOS DMG、Windows NSIS、Linux AppImage/Snap/Deb、签名/公证 env hook、自托管更新元数据
开发体验Integratedpnpm dev、质量门禁脚本、共置测试、bundle 分析、类型化 IPC 模式、一键改名

应用界面图

renderer 是运行在桌面外壳里的 React SPA:

  • 侧边栏布局 - Home、Showcase、Components、Logs、Help、Settings、About, 以及启用计费后的 Billing。
  • 认证 - Login、Register、Forgot Password、Reset Password 不使用主外壳。
  • 设置中心 - 当前有 8 个 tab:General、Appearance、Notifications、 Shortcuts、Proxy、Storage、Updates、Advanced,并带翻译搜索。
  • Account - 独立页面,处理登录用户的 profile 与 avatar 流程。
  • Update page - 从 main process 流式显示检查、下载、安装、错误与 release notes。
  • 命令面板 - Cmd/Ctrl+K 打开路由动作、设置快捷入口、最近文件,以及启用演示层时的 Showcase 动作。
  • Onboarding gate - 首次运行引导通过 main-process 设置存储持久化;配置 EULA 后可要求接受协议。

当前 renderer 在挂载前会校验 VITE_SUPABASE_URLVITE_SUPABASE_PUBLISHABLE_KEY。你可以用 .env.example 的占位值探索外壳, 但真实认证、profile、avatar、todos 和计费流程需要 Supabase 项目。

从这里开始

按这个顺序最快从 clone 走到可分发桌面应用:

On this page