phper/.kiro/steering/structure.md

项目结构和组织

目录结构

核心目录

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/ 创建可复用组件