Sparkle xishang0128
Use this command to install Sparkle:
winget install --id=xishang0128.Sparkle -e
Another Mihomo GUI.
README
Sparkle
Another Mihomo GUI
特性
- 开箱即用,无需服务模式的 Tun
- 多种配色主题可选,UI 焕然一新
- 支持大部分 Mihomo 常用配置修改
- 内置稳定版和预览版 Mihomo 内核
- 通过 WebDAV 一键备份和恢复配置
- 强大的覆写功能,任意修订配置文件
- 深度集成 Sub-Store,轻松管理订阅
开发
环境要求
- Node.js: >= 20.0.0 (推荐使用 LTS 版本)
- pnpm: >= 9.0.0 (必需)
- Git: 最新版本
技术架构
Sparkle 基于 Electron + React + TypeScript 构建
前端技术栈
- React 19 - 用户界面框架
- TypeScript - 类型安全的 JavaScript
- HeroUI (NextUI) - UI 组件库
- Tailwind CSS - 原子化 CSS 框架
- Monaco Editor - 代码编辑器
后端技术栈
- Electron - 应用主进程
- Mihomo Core - 代理内核
- sysproxy-go - 系统代理集成
快速开始
- 克隆项目
git clone https://github.com/xishang0128/sparkle.git
cd sparkle
- 安装依赖
pnpm install
- 处理 Electron 安装问题(如果遇到 pnpm dev 等命令无法成功运行)
# 如果 Electron 没有正确安装,执行以下命令
cd node_modules/electron
node install.js
cd ../..
- 启动开发服务器
pnpm dev
注意事项
windows 开发时可能会出现页面白屏,关闭 tun(虚拟网卡)即可
项目结构
sparkle/
├── src/
│ ├── main/ # Electron 主进程
│ │ ├── core/ # 内核管理
│ │ ├── config/ # 配置管理
│ │ ├── resolve/ # 解析器
│ │ ├── sys/ # 系统集成
│ │ └── utils/ # 工具函数
│ ├── renderer/ # Electron 渲染进程(前端界面)
│ │ ├── src/
│ │ │ ├── assets/ # 静态资源
│ │ │ ├── components/ # React 组件
│ │ │ ├── pages/ # 页面组件
│ │ │ ├── hooks/ # 自定义 hooks
│ │ │ ├── routes/ # 路由配置
│ │ │ └── utils/ # 前端工具
│ │ └── index.html # 渲染进程入口 HTML
│ ├── preload/ # Electron 预加载脚本(进程间通信桥梁)
│ │ ├── index.ts # 预加载脚本主文件
│ │ └── index.d.ts # 预加载脚本类型定义
│ └── shared/ # 共享类型定义
│ └── types.d.ts # 全局类型定义文件
├── resources/ # 应用资源文件
├── build/ # 构建配置
├── extra/ # 额外资源
├── dist/ # 构建输出目录
├── electron-builder.yml # 打包配置
├── package.json # 项目配置
└── README.md # 项目说明
可用脚本
开发命令
pnpm dev
- 启动开发服务器(前端热重载,后端需要手动重启)pnpm typecheck
- TypeScript 类型检查pnpm typecheck:node
- 主进程类型检查pnpm typecheck:web
- 渲染进程类型检查pnpm lint
- 运行代码检查pnpm format
- 格式化代码
构建命令
pnpm build:win
- 构建 Windows 版本pnpm build:mac
- 构建 macOS 版本pnpm build:linux
- 构建 Linux 版本
其他命令
pnpm prepare
- 准备构建环境pnpm postinstall
- 安装 Electron 依赖
构建发布
环境准备
根据目标平台准备相应的构建环境:
Windows 构建:
pnpm build:win
macOS 构建:
pnpm build:mac
Linux 构建:
pnpm build:linux
指定架构:
pnpm build:win --x64/--arm64
pnpm build:mac --arm64/--x64
pnpm build:linux --x64/--arm64
指定产物类型:
pnpm build:win 7z/nsis
pnpm build:linux deb/rpm/pacman
pnpm build:mac pkg/dmg
指定架构和产物类型:
pnpm build:win --x64 7z
pnpm build:mac --arm64 pkg
pnpm build:linux --x64 deb
构建产物
- Windows:
.exe
安装包和.7z
便携版 - macOS:
.pkg
安装包 - Linux:
.deb
、.rpm
、.pacman
等格式
常见问题
包管理器要求
本项目使用 pnpm 作为包管理器。
确保使用 pnpm 9.0.0 或更高版本:
pnpm --version
Node.js 版本要求
确保使用 Node.js 20.0.0 或更高版本:
node --version
开发环境问题
- 确保 Node.js 版本 >= 20.0.0
- 使用 pnpm 进行依赖管理
贡献指南
- Fork 本仓库
- 创建功能分支 (
git checkout -b feature/AmazingFeature
) - 提交更改 (
git commit -m 'Add some AmazingFeature'
) - 推送分支 (
git push origin feature/AmazingFeature
) - 创建 Pull Request
开发注意事项
- 请确保代码通过 ESLint 检查
- 提交前运行
pnpm format
格式化代码 - 遵循现有的代码风格和命名规范
- 添加新功能时请更新相关文档
- 主进程代码修改后需要重启开发服务器
- 渲染进程代码支持热重载
- 所有命令都使用 pnpm 执行
- 修改类型定义后需要重启 TypeScript 服务
- 预加载脚本修改后需要重启应用