# visStart

**Repository Path**: Lanse12/vis-start

## Basic Information

- **Project Name**: visStart
- **Description**: win项目可视化启停服务
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-26
- **Last Updated**: 2026-07-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# VisStart

单机版服务一键启停工具。基于 Vue3 + Electron 构建，提供可视化的脚本启停界面，支持多脚本依次启动、延迟启动、实时日志查看、配置持久化等功能。

## 功能特性

### 服务控制
- 一键开启/关闭服务，左侧控制面板展示运行状态（运行中/已停止）和主进程 PID
- 开启服务按钮在运行时禁用，关闭服务按钮在停止时禁用，防止误操作

### 启动配置（设置弹窗）
- 右上角齿轮图标打开「启动配置」弹窗，主界面左侧仅保留服务控制，配置不干扰操作
- 支持添加多个启动脚本，可配置脚本类型（命令行 / 批处理）和脚本内容
- 脚本支持上下移动调整顺序，可单个删除
- **主脚本**：立即启动，日志显示在主界面
- **非主脚本**：可配置「延迟启动」时间（单位秒，支持小数和 0），相对于上一个脚本的启动时间延迟启动
  - 例如：脚本2 设置 3 → 主脚本启动 3s 后启动脚本2
  - 脚本3 设置 1 → 脚本2 启动 1s 后启动脚本3
  - 设置 0 → 与上一个脚本同时启动
- 非主脚本在后台静默执行，日志不输出到主界面
- 保存按钮：持久化配置并关闭弹窗；取消按钮：仅关闭弹窗不保存

### 实时日志
- 右侧日志面板实时展示主脚本的 stdout/stderr 输出
- 支持日志级别（info/warn/error/success）区分显示
- 日志超过 2000 条自动滚动裁剪，支持清空

### 进程管理
- 关闭服务按钮：终止所有启动的进程及其子进程树（Windows 下使用 `taskkill /f /t`）
- 关闭程序窗口（点击右上角 X）：在程序退出前同步杀死所有进程，确保无残留
- 双保险机制：`before-quit` 事件同步终止 + `window-all-closed` 事件触发退出

### 应用外观
- 隐藏 Electron 菜单栏（`autoHideMenuBar` + `setMenu(null)`）
- 自定义应用图标（窗口左上角 + 任务栏）
- 暗色玻璃拟态 UI，毛玻璃模糊背景

## 技术栈

| 技术 | 版本 | 用途 |
|------|------|------|
| Vue 3 | ^3.4.0 | 前端框架（组合式 API） |
| Electron | ^28.3.3 | 桌面应用壳层 |
| Vite | ^5.0.0 | 前端构建工具 |
| electron-builder | ^24.9.1 | 打包为 exe 安装包 |
| Node child_process | 内置 | 进程管理（spawn/exec/execSync） |
| concurrently + wait-on | 开发依赖 | 开发环境并行启动 Vite 和 Electron |

## 项目结构

```
VisStart/
├── electron/                  # Electron 主进程
│   ├── main.js                # 主进程入口：窗口、IPC、进程管理、配置持久化
│   └── preload.js             # 预加载脚本：contextBridge 暴露安全 API
├── src/                       # 渲染进程（Vue3）
│   ├── components/
│   │   ├── ServiceControl.vue # 左侧服务控制面板
│   │   ├── LogViewer.vue      # 右侧日志查看器
│   │   └── SettingsModal.vue  # 启动配置弹窗
│   ├── composables/
│   │   ├── useConfig.js       # 配置加载/保存（单例 + 纯对象转换）
│   │   └── useService.js      # 服务启停、日志监听、状态管理
│   ├── assets/styles/main.css # 全局样式与 CSS 变量
│   ├── App.vue                # 应用根组件（布局编排）
│   └── main.js                # 渲染进程入口
├── build/                     # 打包资源
│   └── icon.png               # 应用图标
├── scripts/generate-icon.js   # 图标生成脚本
├── vite.config.js             # Vite 配置
└── package.json               # 依赖与打包配置
```

## 实现逻辑

### IPC 通信架构
主进程与渲染进程通过 `ipcMain.handle` / `ipcRenderer.invoke` 进行异步通信，preload.js 使用 `contextBridge` 暴露安全 API：

- `config:load` / `config:save` — 配置读取与持久化
- `service:start` / `service:stop` / `service:status` — 服务启停与状态查询
- `service:log` / `service:started` / `service:stopped` — 主进程向渲染进程推送事件

**关键点**：Vue3 的 reactive proxy 无法通过 Electron IPC 克隆，在 [useConfig.js](src/composables/useConfig.js) 和 [useService.js](src/composables/useService.js) 中通过 `JSON.parse(JSON.stringify())` 转为纯对象再传递。

### 配置持久化
配置文件存储在 `app.getPath('userData')/config.json`，打包后仍可正常读写。配置结构：

```json
{
  "scripts": [
    { "id": 1, "type": "command", "value": "java -jar app.jar", "delay": 0 },
    { "id": 2, "type": "bat", "value": "C:\\app\\start.bat", "delay": 3 }
  ]
}
```

### 多脚本依次启动
[main.js](electron/main.js) 的 `startService` 函数按顺序启动脚本：
1. 主脚本（索引 0）立即启动，等待 800ms 让初始日志输出
2. 非主脚本按 `delay` 秒延迟启动，延迟时间相对于上一个脚本的启动时刻
3. 所有进程通过 `processes` 数组统一管理，每个进程标记 `isPrimary` 属性
4. 仅 `isPrimary` 为 true 的进程会通过 `sendLog` 向前端推送日志

### 进程树终止
Windows 下进程可能派生子进程（如 shell → java → 子进程），必须终止整个进程树：

- **关闭服务按钮**：异步 `exec('taskkill /pid <pid> /f /t')`
- **程序退出**：同步 `execSync('taskkill /pid <pid> /f /t')`，在 `before-quit` 事件中执行，确保 Electron 退出前所有子进程已被杀死

## 开发与运行

### 环境要求
- Node.js >= 16
- npm >= 8

### 安装依赖
```bash
npm install
```

### 开发模式（热更新）
```bash
npm run electron:dev
```
同时启动 Vite 开发服务器（5173 端口）和 Electron，支持前端热更新。

### 生产构建
```bash
npm run electron:build:win
```
输出目录：`release/`，生成 NSIS 安装包。

> **打包注意事项**：Windows 下首次打包可能遇到 winCodeSign 解压符号链接失败（普通用户无权限）。解决方案：
> 1. 以管理员身份运行终端再执行打包命令
> 2. 或开启 Windows 开发者模式（设置 → 隐私和安全性 → 开发者选项）

## 使用说明

1. 首次启动后，点击右上角齿轮图标打开设置弹窗
2. 添加启动脚本：第一个为主脚本（立即启动，日志显示在主界面），后续脚本可配置延迟启动时间
3. 保存配置后，点击左侧「开启服务」按钮启动
4. 主脚本的运行日志实时显示在右侧面板
5. 点击「关闭服务」或直接关闭程序窗口，所有相关进程会被彻底终止