# 项目结构和组织

## 目录结构

### 核心目录

```
phper/
├── electron/                    # Electron 主进程代码
│   ├── main.ts                 # 主进程入口，IPC 处理
│   ├── preload.ts              # 预加载脚本，安全的 IPC 桥接
│   └── services/               # 服务管理模块
│       ├── ConfigStore.ts      # 配置存储管理
│       ├── ServiceManager.ts   # 统一服务管理
│       ├── *Manager.ts         # 各服务专用管理器
│       └── __tests__/          # 服务层单元测试
│
├── src/                        # Vue 前端源码
│   ├── App.vue                 # 根组件，包含布局和导航
│   ├── main.ts                 # 前端入口文件
│   ├── router/                 # Vue Router 配置
│   ├── stores/                 # Pinia 状态管理
│   ├── components/             # 可复用组件
│   ├── views/                  # 页面组件
│   └── styles/                 # 全局样式和主题
│
├── data/                       # 运行时数据目录
├── service/                    # 服务安装目录
├── build/                      # 构建资源
├── release/                    # 打包输出
└── scripts/                    # 构建脚本
```

## 架构模式

### Electron 架构
- **主进程** (`electron/main.ts`): 窗口管理、系统集成、IPC 处理
- **渲染进程** (`src/`): Vue 应用，用户界面
- **预加载脚本** (`electron/preload.ts`): 安全的 API 暴露

### 服务管理架构
- **ServiceManager**: 统一的服务生命周期管理
- **专用管理器**: 每个服务（PHP、MySQL、Nginx等）有独立的管理类
- **ConfigStore**: 集中的配置管理，基于 electron-store

### 前端架构
- **组件化**: 使用 Vue 3 Composition API
- **状态管理**: Pinia stores 管理应用状态
- **路由管理**: Vue Router 4 单页面应用
- **UI 组件**: Element Plus 提供一致的界面体验

## 命名约定

### 文件命名
- **组件文件**: PascalCase (如 `PhpManager.vue`)
- **服务文件**: PascalCase + Manager 后缀 (如 `MysqlManager.ts`)
- **工具文件**: camelCase (如 `configStore.ts`)
- **测试文件**: `*.test.ts` 后缀

### 代码约定
- **接口**: `I` 前缀 (如 `IServiceStatus`)
- **类型**: PascalCase (如 `ServiceConfig`)
- **常量**: UPPER_SNAKE_CASE
- **函数/变量**: camelCase

## 关键文件说明

### 配置文件
- `package.json`: 项目依赖和构建脚本
- `vite.config.ts`: Vite 构建配置，包含 Electron 插件
- `tsconfig.json`: TypeScript 编译配置
- `jest.config.js`: 测试框架配置

### 入口文件
- `index.html`: HTML 模板
- `src/main.ts`: Vue 应用入口
- `electron/main.ts`: Electron 主进程入口

### 服务管理
- 每个服务管理器负责：下载、安装、配置、启动/停止、状态检查
- 使用 Windows 原生命令和进程管理
- 支持多版本并存（PHP、MySQL、Node.js）

## 数据流

1. **用户操作** → Vue 组件
2. **组件事件** → Pinia Store 或直接 IPC 调用
3. **IPC 通信** → Electron 主进程
4. **服务调用** → 对应的 Manager 类
5. **系统操作** → Windows 命令/进程
6. **状态更新** → 通过 IPC 返回到前端

## 扩展指南

### 添加新服务
1. 创建 `*Manager.ts` 在 `electron/services/`
2. 在 `main.ts` 中注册 IPC 处理程序
3. 创建对应的 Vue 页面组件
4. 添加路由和导航菜单项
5. 更新 `ServiceManager.ts` 集成新服务

### 添加新功能
- 前端功能：在 `src/views/` 添加页面组件
- 后端功能：在对应的 Manager 类中添加方法
- 通用组件：在 `src/components/` 创建可复用组件