# 项目启动器工具react

**Repository Path**: okamiOs/project-starter-tool-react

## Basic Information

- **Project Name**: 项目启动器工具react
- **Description**: 简单配置项目路径和命令方式，即可一键启动前后端项目
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-05-12
- **Last Updated**: 2026-05-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 项目管理

## README

# AppLauncher - 项目启动器

一个基于 Electron + React 开发的桌面应用，用于统一管理所有项目（微信小程序/Web/Node.js 等）的运行和打包命令。

## 功能特性

- ✅ 可视化管理所有项目（新增、编辑、删除）
- ✅ 一键运行/打包项目命令
- ✅ 项目列表展示，绿色圆点标识运行状态
- ✅ 查看命令运行详情（终端实时输出）
- ✅ 关闭应用自动停止所有运行中进程
- ✅ 中文菜单栏（项目/操作/视图/帮助）
- ✅ 导入/导出项目配置（JSON 格式）
- ✅ 全部启动/全部停止
- ✅ 项目搜索功能（回车搜索，按项目名称模糊匹配）
- ✅ 自定义项目排序（序号越小越靠前）
- ✅ 支持 Windows 平台

## 技术栈

- **框架**: Electron 33 + Node.js 22
- **前端**: React 18 + TypeScript + Vite
- **状态管理**: MobX 6
- **打包**: electron-builder (NSIS 安装包)
- **UI**: 原生 CSS

## 快速开始

### 环境要求

- Node.js 18+（推荐 22）
- npm 或 yarn

### 安装依赖

```bash
# 使用 nvm 切换 Node.js 版本（可选）
nvm use 22

# 安装依赖
npm install
```

### 启动开发模式

```bash
npm run electron:dev
```

### 打包成 exe

```bash
# 打包为安装包（输出到 dist/ 目录）
npm run electron:build

# 仅打包为目录（不生成安装包，调试用）
npm run electron:build:dir
```

打包完成后：
- 安装包: `dist/AppLauncher-Setup-1.0.0.exe` (~78MB)
- 免安装版: `dist/win-unpacked/AppLauncher.exe`

## 使用说明

### 添加项目

1. 启动应用后，点击右上角「新增项目」按钮
2. 填写项目名称、项目路径（可点击选择文件夹）
3. 填写运行命令（如 `npm run dev`）和打包命令（如 `npm run build`）
4. 保存后，项目卡片会出现在列表中

### 运行/打包项目

1. 点击项目卡片上的「运行」或「打包」按钮执行对应命令
2. 运行中的项目会显示绿色圆点
3. 点击「查看详情」可查看命令实时输出

### 搜索项目

1. 在顶部搜索框输入项目名称关键词
2. 按下回车键进行搜索
3. 列表将只显示匹配的项目（支持模糊匹配，不区分大小写）
4. 清空搜索框并回车即可显示全部项目

### 排序项目

1. 点击项目卡片上的「序号」徽章
2. 输入自定义排序号（数字越小越靠前）
3. 按回车确认或点击其他地方取消

## 菜单功能

| 菜单 | 功能 |
|------|------|
| 项目 → 添加项目 | 新增项目（快捷键 Ctrl+N） |
| 项目 → 导入配置 | 从 JSON 文件导入项目列表 |
| 项目 → 导出配置 | 导出当前项目列表为 JSON 文件 |
| 操作 → 全部启动 | 一键启动所有项目的运行命令 |
| 操作 → 全部停止 | 一键停止所有运行中的命令 |
| 视图 → 开发者工具 | 打开 DevTools 调试（F12） |
| 帮助 → 关于 | 查看应用版本信息 |

## 项目结构

```
appLauncher/
├── electron/                 # Electron 主进程代码
│   ├── main.js              # 主进程入口
│   ├── preload.js           # 预加载脚本
│   ├── installer.nsh        # NSIS 安装脚本
│   └── fix-rcedit.js        # 打包修复脚本
├── src/                     # React 前端代码
│   ├── components/          # React 组件
│   │   ├── AppHeader.tsx    # 顶部导航栏
│   │   ├── ProjectCard.tsx  # 项目卡片
│   │   ├── ProjectModal.tsx # 项目编辑弹窗
│   │   ├── DeleteConfirmModal.tsx  # 删除确认弹窗
│   │   └── DetailModal.tsx  # 运行详情弹窗
│   ├── stores/              # 状态管理
│   │   └── ProjectStore.ts  # MobX Store
│   ├── hooks/               # 自定义 Hooks
│   │   └── useProjects.ts   # 项目相关 Hook
│   ├── types/               # TypeScript 类型定义
│   │   └── index.ts
│   ├── App.tsx              # 主应用组件
│   ├── App.css              # 应用样式
│   ├── index.tsx            # 入口文件
│   └── index.css            # 全局样式
├── assets/                  # 静态资源
│   ├── icon.ico             # 应用图标
│   └── icon.png
├── public/                  # 公共资源
├── build/                   # Vite 构建输出
├── dist/                    # Electron 打包输出
├── package.json             # 项目配置
├── vite.config.ts           # Vite 配置
└── tsconfig.json            # TypeScript 配置
```

## 开发指南

### 状态管理

本项目使用 MobX 进行状态管理，核心 Store 位于 `src/stores/ProjectStore.ts`：

- `projects`: 项目列表
- `runningProcesses`: 运行中的进程信息
- `searchKeyword`: 搜索关键词
- `sortedProjects`: 排序并筛选后的项目列表（计算属性）

### 添加新功能

1. 在 `ProjectStore.ts` 中添加状态和方法
2. 在 `src/components/` 中创建或修改组件
3. 在 `electron/main.js` 中添加 IPC 通信（如需）

## 常见问题

### 打包后图标不显示

确保 `assets/icon.ico` 文件存在且格式正确，然后重新运行 `npm run electron:build`。

### 运行命令乱码

本项目使用 `iconv-lite` 处理编码问题，如仍有乱码，请检查项目终端编码设置。

## 贡献指南

欢迎提交 Issue 和 Pull Request！

1. Fork 本仓库
2. 创建你的特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交你的修改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 提交 Pull Request

## 开源协议

本项目基于 [MIT License](LICENSE) 开源。

## 作者

AppLauncher

## 更新日志

### v1.0.0

- 初始版本发布
- 支持项目增删改查
- 支持运行/打包命令
- 支持导入/导出配置
- 支持项目搜索
- 支持自定义排序