first commit

README-Phper.md

@@ -0,0 +1,389 @@
+# PHPer 开发环境管理器
+
+<p align="center">
+  <img src="public/icon.svg" alt="PHPer Logo" width="120" height="120">
+</p>
+
+<p align="center">
+  <strong>一款功能强大的 Windows PHP 开发环境管理工具</strong>
+</p>
+
+<p align="center">
+  轻松管理 PHP、MySQL、Nginx、Redis、Node.js、Python 等服务，告别繁琐的手动配置
+</p>
+
+<p align="center">
+  <a href="#功能特性">功能特性</a> •
+  <a href="#安装使用">安装使用</a> •
+  <a href="#使用指南">使用指南</a> •
+  <a href="#常见问题">常见问题</a>
+</p>
+
+---
+
+## 📸 界面预览
+
+<table>
+  <tr>
+    <td><img src="docs/dashboard.png" alt="仪表盘" /></td>
+    <td><img src="docs/php.png" alt="PHP管理" /></td>
+  </tr>
+  <tr>
+    <td align="center">🏠 仪表盘</td>
+    <td align="center">🐘 PHP 版本管理</td>
+  </tr>
+  <tr>
+    <td><img src="docs/mysql.png" alt="MySQL管理" /></td>
+    <td><img src="docs/nginx.png" alt="Nginx管理" /></td>
+  </tr>
+  <tr>
+    <td align="center">🐬 MySQL 管理</td>
+    <td align="center">🌐 Nginx 管理</td>
+  </tr>
+  <tr>
+    <td><img src="docs/redis.png" alt="Redis管理" /></td>
+    <td><img src="docs/nodejs.png" alt="Node.js管理" /></td>
+  </tr>
+  <tr>
+    <td align="center">🔴 Redis 管理</td>
+    <td align="center">💚 Node.js 管理</td>
+  </tr>
+  <tr>
+    <td><img src="docs/python.png" alt="Python管理" /></td>
+    <td><img src="docs/setting.png" alt="设置" /></td>
+  </tr>
+  <tr>
+    <td align="center">🐍 Python 管理</td>
+    <td align="center">⚙️ 设置</td>
+  </tr>
+</table>
+
+## ✨ 功能特性
+
+### 🐘 PHP 版本管理
+
+| 功能         | 说明                                                       |
+| ------------ | ---------------------------------------------------------- |
+| 多版本管理   | 支持同时安装 PHP 8.1、8.2、8.3、8.4、8.5 等多个版本        |
+| CGI 独立控制 | 每个 PHP 版本可独立启动/停止 CGI 进程，支持多版本并行运行  |
+| 端口自动分配 | 各版本自动分配端口（如 8.4→9084, 8.3→9083）                |
+| 一键切换     | 点击即可切换 PHP 版本，自动配置系统环境变量                |
+| 扩展管理     | 可视化管理 PHP 扩展，支持在线安装（从 PECL）               |
+| 配置编辑     | 在线编辑 php.ini，无需手动查找配置文件                     |
+| 自动配置     | 安装时自动启用常用扩展（curl、gd、mbstring、pdo_mysql 等） |
+| Composer     | 集成 Composer 管理，支持镜像源切换（阿里云、腾讯云等）     |
+| 日志查看     | 直接查看 PHP 错误日志                                      |
+| 下载源       | 从 [windows.php.net](https://windows.php.net) 官方下载     |
+
+### 🐬 MySQL 管理
+
+| 功能       | 说明                                                                 |
+| ---------- | -------------------------------------------------------------------- |
+| 版本支持   | 支持 MySQL 5.7.x 和 8.0.x 系列                                       |
+| 服务控制   | 启动、停止、重启 MySQL 服务                                          |
+| 密码管理   | 一键修改 root 密码                                                   |
+| 配置编辑   | 在线编辑 my.ini 配置文件                                             |
+| 自动初始化 | 安装时自动初始化数据库，开箱即用                                     |
+| 下载源     | 从[阿里云镜像站](https://mirrors.aliyun.com/mysql/)下载，速度更快    |
+
+### 🌐 Nginx 管理
+
+| 功能         | 说明                                          |
+| ------------ | --------------------------------------------- |
+| 版本管理     | 支持多个 Nginx 版本，可随时切换               |
+| 服务控制     | 启动、停止、重启、热重载配置                  |
+| 站点管理     | 可视化添加、删除、启用、禁用虚拟主机          |
+| Laravel 支持 | 自动生成 Laravel 项目的伪静态配置             |
+| SSL 证书     | 支持申请 Let's Encrypt 免费 SSL 证书          |
+| 配置编辑     | 在线编辑 nginx.conf 主配置文件                |
+| 下载源       | 从 [nginx.org](https://nginx.org) 官方下载    |
+
+### 🔴 Redis 管理
+
+| 功能         | 说明                                                                       |
+| ------------ | -------------------------------------------------------------------------- |
+| Windows 版本 | 使用 Windows 原生编译版 Redis                                              |
+| 服务控制     | 启动、停止、重启 Redis 服务                                                |
+| 状态监控     | 实时查看运行状态、内存使用情况                                             |
+| 配置编辑     | 在线编辑 redis.windows.conf 配置                                           |
+| 下载源       | 从 [GitHub (redis-windows)](https://github.com/redis-windows/redis-windows) 下载 |
+
+### 💚 Node.js 管理
+
+| 功能       | 说明                                                     |
+| ---------- | -------------------------------------------------------- |
+| 多版本管理 | 支持同时安装多个 Node.js 版本                            |
+| LTS 支持   | 显示 LTS 版本和 Current 版本标识                         |
+| npm 集成   | 自动显示对应的 npm 版本                                  |
+| 一键切换   | 快速切换默认 Node.js 版本，自动配置环境变量              |
+| 下载源     | 从 [nodejs.org](https://nodejs.org) 官方下载             |
+
+### 🐍 Python 管理
+
+| 功能       | 说明                                                     |
+| ---------- | -------------------------------------------------------- |
+| 嵌入式版本 | 使用免安装的嵌入式版本，不影响系统环境                   |
+| pip 集成   | 自动配置 pip，支持安装 Python 包                         |
+| 多版本管理 | 支持同时安装多个 Python 版本                             |
+| 一键切换   | 快速切换默认 Python 版本                                 |
+| 下载源     | 从 [python.org](https://www.python.org) 官方下载         |
+
+### 🔧 Git 管理
+
+| 功能       | 说明                           |
+| ---------- | ------------------------------ |
+| 版本管理   | 一键安装/卸载 Git for Windows  |
+| 配置管理   | 可视化配置用户名、邮箱等信息   |
+| 环境变量   | 自动配置系统 PATH              |
+
+### 🌍 站点管理
+
+- ➕ **快速创建站点** - 填写域名和路径即可创建虚拟主机
+- 🎯 **Laravel 一键配置** - 自动配置 public 目录和伪静态规则
+- 🔒 **SSL 证书申请** - 集成 Let's Encrypt 自动申请
+- 📝 **Hosts 自动配置** - 自动添加域名到系统 hosts 文件
+- 📋 **站点日志查看** - 查看每个站点的访问日志和错误日志
+- 🌐 **一键打开站点** - 点击域名在默认浏览器打开
+
+### 📋 日志查看
+
+| 功能         | 说明                                           |
+| ------------ | ---------------------------------------------- |
+| 多服务日志   | 支持查看 Nginx、PHP、MySQL、Redis 日志         |
+| 站点日志     | 查看各站点的访问日志和错误日志                 |
+| 实时刷新     | 支持刷新日志内容，查看最新记录                 |
+| 行数控制     | 可配置显示的日志行数（100-5000 行）            |
+| 快速清空     | 一键清空指定日志文件                           |
+| 打开目录     | 快速在文件管理器中打开日志目录                 |
+
+### ⚙️ 其他功能
+
+- 🚀 **开机自启动** - 可配置各服务开机自动启动（静默模式，无弹窗）
+- 🔇 **静默启动** - 所有服务启动无黑色窗口闪烁
+- 📋 **Hosts 管理** - 可视化管理系统 hosts 文件
+- 🌙 **深色/浅色主题** - 支持主题切换
+- 📊 **服务状态监控** - 实时显示各服务运行状态
+- ⚡ **页面切换优化** - 使用 KeepAlive 缓存页面，切换无闪烁
+- 🔢 **自动版本号** - 打包时自动更新版本号
+- 📥 **下载源说明** - 清晰显示各软件的下载来源
+- 🌐 **默认浏览器打开** - 站点链接自动在默认浏览器打开
+
+## 🛠️ 技术栈
+
+| 技术                                          | 说明         |
+| --------------------------------------------- | ------------ |
+| [Vue 3](https://vuejs.org/)                   | 前端框架     |
+| [TypeScript](https://www.typescriptlang.org/) | 类型安全     |
+| [Electron](https://www.electronjs.org/)       | 桌面应用框架 |
+| [Element Plus](https://element-plus.org/)     | UI 组件库    |
+| [Vite](https://vitejs.dev/)                   | 构建工具     |
+| [Pinia](https://pinia.vuejs.org/)             | 状态管理     |
+
+## 📦 安装使用
+
+### 系统要求
+
+- ✅ Windows 10/11 (64 位)
+- ✅ Node.js 18.0 或更高版本
+- ✅ 管理员权限（用于管理服务和修改 hosts 文件）
+- ✅ [Visual C++ Redistributable 2015-2022](https://aka.ms/vs/17/release/vc_redist.x64.exe)
+
+### 开发环境
+
+```bash
+# 克隆项目
+git clone https://github.com/your-username/phper.git
+cd phper
+
+# 安装依赖
+npm install
+
+# 启动开发服务器
+npm run electron:dev
+```
+
+### 构建生产版本
+
+```bash
+# 构建 Windows 安装包（自动更新 patch 版本号 +0.0.1）
+npm run build
+
+# 指定版本号更新类型
+npm run build:patch   # 1.0.0 -> 1.0.1
+npm run build:minor   # 1.0.0 -> 1.1.0
+npm run build:major   # 1.0.0 -> 2.0.0
+
+# 不更新版本号直接打包
+npm run build:nobump
+```
+
+构建完成后，安装包将生成在 `release` 目录中。
+
+## 📁 项目结构
+
+```
+phper/
+├── electron/                    # Electron 主进程
+│   ├── main.ts                 # 主进程入口
+│   ├── preload.ts              # 预加载脚本（IPC 通信）
+│   └── services/               # 服务管理模块
+│       ├── ConfigStore.ts      # 配置存储（使用 electron-store）
+│       ├── PhpManager.ts       # PHP 版本管理器
+│       ├── MysqlManager.ts     # MySQL 服务管理器
+│       ├── NginxManager.ts     # Nginx 服务管理器
+│       ├── RedisManager.ts     # Redis 服务管理器
+│       ├── NodeManager.ts      # Node.js 版本管理器
+│       ├── PythonManager.ts    # Python 版本管理器
+│       ├── GitManager.ts       # Git 管理器
+│       ├── ServiceManager.ts   # 开机自启服务管理器
+│       ├── HostsManager.ts     # Hosts 文件管理器
+│       └── LogManager.ts       # 日志管理器
+│
+├── src/                         # Vue 前端源码
+│   ├── App.vue                 # 根组件（含 KeepAlive 缓存）
+│   ├── main.ts                 # 入口文件
+│   ├── vite-env.d.ts           # 类型声明
+│   ├── router/                 # 路由配置
+│   │   └── index.ts
+│   ├── stores/                 # Pinia 状态管理
+│   │   └── serviceStore.ts     # 服务状态存储
+│   ├── components/             # 公共组件
+│   │   └── LogViewer.vue       # 日志查看器组件
+│   ├── styles/                 # 样式文件
+│   │   └── main.scss           # 全局样式（含主题变量）
+│   └── views/                  # 页面视图
+│       ├── Dashboard.vue       # 仪表盘
+│       ├── PhpManager.vue      # PHP 管理
+│       ├── MysqlManager.vue    # MySQL 管理
+│       ├── NginxManager.vue    # Nginx 管理
+│       ├── RedisManager.vue    # Redis 管理
+│       ├── NodeManager.vue     # Node.js 管理
+│       ├── PythonManager.vue   # Python 管理
+│       ├── GitManager.vue      # Git 管理
+│       ├── SitesManager.vue    # 站点管理
+│       ├── HostsManager.vue    # Hosts 管理
+│       └── Settings.vue        # 设置
+│
+├── scripts/                     # 构建脚本
+│   └── bump-version.js         # 版本号自动更新脚本
+│
+├── public/                      # 静态资源
+│   ├── icon.svg                # 应用图标
+│   └── version.json            # 版本信息（构建时生成）
+│
+├── index.html                   # HTML 模板
+├── package.json                 # 项目配置
+├── vite.config.ts              # Vite 配置
+├── tsconfig.json               # TypeScript 配置
+└── README.md                   # 项目说明
+```
+
+## 📖 使用指南
+
+### 首次使用
+
+1. **安装运行时依赖**
+
+   - 确保已安装 [Visual C++ Redistributable 2015-2022](https://aka.ms/vs/17/release/vc_redist.x64.exe)
+
+2. **以管理员身份运行**
+
+   - 右键点击应用图标，选择"以管理员身份运行"
+   - 这是管理服务和修改 hosts 文件所必需的
+
+3. **安装服务**
+   - 首次使用需要安装 PHP、MySQL、Nginx、Redis
+   - 进入对应管理页面，点击"安装"按钮
+
+### 创建第一个站点
+
+1. 安装并启动 Nginx 和 PHP
+2. 进入"站点管理"页面
+3. 点击"添加站点"
+4. 填写站点信息：
+   - 站点名称：如 `myproject`
+   - 域名：如 `myproject.test`
+   - 根目录：如 `C:\Projects\myproject`（Laravel 项目无需指定 public）
+   - 选择 PHP 版本
+   - 如果是 Laravel 项目，开启"Laravel 项目"选项
+5. 点击确认，站点即创建完成
+6. 在浏览器访问 http://myproject.test
+
+### 配置开机自启动
+
+1. 进入"设置"页面
+2. 在"开机自启动"部分，开启需要自启的服务
+3. 应用会在 Windows 启动目录创建启动脚本
+
+## ❓ 常见问题
+
+### Q: 为什么需要管理员权限？
+
+A: 应用需要管理员权限来：
+
+- 启动/停止 Windows 服务
+- 修改系统 hosts 文件
+- 配置系统环境变量
+
+### Q: PHP 下载很慢怎么办？
+
+A: PHP 从 windows.php.net 官方下载，如果速度较慢：
+
+- 可以手动从官网下载 ZIP 文件
+- 解压到 `[安装目录]/php/php-版本号` 目录
+- 重新打开应用即可识别
+
+### Q: MySQL 启动失败？
+
+A: 常见原因：
+
+- 3306 端口被占用，检查是否有其他 MySQL 实例
+- 防火墙阻止，添加防火墙规则
+- 数据目录权限问题，确保目录可写
+
+### Q: 如何卸载服务？
+
+A: 进入对应服务管理页面，先停止服务，然后点击"卸载"按钮。
+
+## 🔗 相关资源
+
+| 软件    | 下载源                                                                 |
+| ------- | ---------------------------------------------------------------------- |
+| PHP     | [windows.php.net](https://windows.php.net/download/) - 官方 Windows 版 |
+| MySQL   | [阿里云镜像](https://mirrors.aliyun.com/mysql/) - 国内高速下载         |
+| Nginx   | [nginx.org](https://nginx.org/en/download.html) - 官方 Windows 版      |
+| Redis   | [GitHub redis-windows](https://github.com/redis-windows/redis-windows) |
+| Node.js | [nodejs.org](https://nodejs.org/en/download/) - 官方下载               |
+| Python  | [python.org](https://www.python.org/downloads/windows/) - 嵌入式版本   |
+| Git     | [git-scm.com](https://git-scm.com/download/win) - 官方 Windows 版      |
+
+## 📄 开源协议
+
+本项目基于 [MIT License](LICENSE) 开源。
+
+## 🤝 贡献指南
+
+欢迎提交 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
+
+## 📮 反馈建议
+
+如果您在使用过程中遇到问题或有任何建议，欢迎：
+
+- 提交 [Issue](https://github.com/your-username/phper/issues)
+- 发送邮件至 your-email@example.com
+
+---
+
+<p align="center">
+  Made with ❤️ for PHP Developers
+</p>
+
+<p align="center">
+  ⭐ 如果这个项目对您有帮助，请给我们一个 Star！
+</p>

docs/.gitkeep

@@ -0,0 +1,5 @@
+# 此目录用于存放文档截图
+# 请将以下截图放入此目录：
+# - dashboard.png     仪表盘截图
+# - php-manager.png   PHP管理页面截图
+

favicon.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <defs>
+    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#10b981"/>
+      <stop offset="100%" style="stop-color:#06b6d4"/>
+    </linearGradient>
+  </defs>
+  <circle cx="50" cy="50" r="45" fill="url(#grad)"/>
+  <text x="50" y="65" text-anchor="middle" font-size="50" fill="white">🐘</text>
+</svg>
+

index.html

@@ -0,0 +1,433 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PHPer - Windows PHP 开发环境管理器</title>
+    <meta name="description" content="一款功能强大的 Windows PHP 开发环境管理工具，轻松管理 PHP、MySQL、Nginx、Redis、Node.js、Python 等服务">
+    <meta name="keywords" content="PHP, Windows, 开发环境, WNMP, MySQL, Nginx, Redis, Node.js">
+    <link rel="icon" type="image/svg+xml" href="favicon.svg">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <!-- 背景装饰 -->
+    <div class="bg-decoration">
+        <div class="grid-lines"></div>
+        <div class="glow glow-1"></div>
+        <div class="glow glow-2"></div>
+        <div class="glow glow-3"></div>
+    </div>
+
+    <!-- 导航栏 -->
+    <nav class="navbar">
+        <div class="container">
+            <a href="#" class="logo">
+                <span class="logo-icon">🐘</span>
+                <span class="logo-text">PHPer</span>
+            </a>
+            <div class="nav-links">
+                <a href="#features">功能特性</a>
+                <a href="#screenshots">界面预览</a>
+                <a href="#services">支持服务</a>
+                <a href="#faq">常见问题</a>
+                <a href="https://github.com/ethanfly/php-manager" target="_blank" class="btn btn-outline btn-sm">
+                    <svg class="icon" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
+                    GitHub
+                </a>
+            </div>
+            <button class="mobile-menu-btn" aria-label="菜单">
+                <span></span>
+                <span></span>
+                <span></span>
+            </button>
+        </div>
+    </nav>
+
+    <!-- Hero 区域 -->
+    <header class="hero">
+        <div class="container">
+            <div class="hero-content">
+                <div class="hero-badge">
+                    <span class="badge-dot"></span>
+                    Windows 专属 · 开源免费
+                </div>
+                <h1 class="hero-title">
+                    <span class="title-line">告别繁琐配置</span>
+                    <span class="title-line gradient-text">一键管理开发环境</span>
+                </h1>
+                <p class="hero-description">
+                    PHPer 是一款功能强大的 Windows PHP 开发环境管理工具，<br>
+                    轻松管理 <span class="highlight">PHP</span>、<span class="highlight">MySQL</span>、<span class="highlight">Nginx</span>、<span class="highlight">Redis</span>、<span class="highlight">Node.js</span>、<span class="highlight">Python</span> 等服务
+                </p>
+                <div class="hero-actions">
+                    <a href="https://github.com/ethanfly/php-manager/releases" target="_blank" class="btn btn-primary btn-lg">
+                        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+                        下载最新版本
+                    </a>
+                    <a href="https://github.com/ethanfly/php-manager" target="_blank" class="btn btn-ghost btn-lg">
+                        <svg class="icon" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
+                        查看源码
+                    </a>
+                </div>
+                <div class="hero-stats">
+                    <div class="stat">
+                        <span class="stat-value">7+</span>
+                        <span class="stat-label">支持服务</span>
+                    </div>
+                    <div class="stat-divider"></div>
+                    <div class="stat">
+                        <span class="stat-value">100%</span>
+                        <span class="stat-label">开源免费</span>
+                    </div>
+                    <div class="stat-divider"></div>
+                    <div class="stat">
+                        <span class="stat-value">Win</span>
+                        <span class="stat-label">原生支持</span>
+                    </div>
+                </div>
+            </div>
+            <div class="hero-visual">
+                <div class="terminal-window">
+                    <div class="terminal-header">
+                        <div class="terminal-buttons">
+                            <span class="btn-close"></span>
+                            <span class="btn-minimize"></span>
+                            <span class="btn-maximize"></span>
+                        </div>
+                        <span class="terminal-title">PHPer 管理器</span>
+                    </div>
+                    <div class="terminal-body">
+                        <div class="service-row">
+                            <span class="service-icon">🐘</span>
+                            <span class="service-name">PHP 8.4.2</span>
+                            <span class="service-status running">● 运行中</span>
+                            <span class="service-port">:9084</span>
+                        </div>
+                        <div class="service-row">
+                            <span class="service-icon">🐬</span>
+                            <span class="service-name">MySQL 8.0.40</span>
+                            <span class="service-status running">● 运行中</span>
+                            <span class="service-port">:3306</span>
+                        </div>
+                        <div class="service-row">
+                            <span class="service-icon">🌐</span>
+                            <span class="service-name">Nginx 1.27.3</span>
+                            <span class="service-status running">● 运行中</span>
+                            <span class="service-port">:80</span>
+                        </div>
+                        <div class="service-row">
+                            <span class="service-icon">🔴</span>
+                            <span class="service-name">Redis 7.4.1</span>
+                            <span class="service-status running">● 运行中</span>
+                            <span class="service-port">:6379</span>
+                        </div>
+                        <div class="service-row">
+                            <span class="service-icon">💚</span>
+                            <span class="service-name">Node.js 22.12</span>
+                            <span class="service-status stopped">○ 已停止</span>
+                            <span class="service-port">—</span>
+                        </div>
+                        <div class="terminal-prompt">
+                            <span class="prompt-symbol">❯</span>
+                            <span class="prompt-text typing">所有服务已就绪...</span>
+                            <span class="cursor"></span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <!-- 功能特性 -->
+    <section id="features" class="section features">
+        <div class="container">
+            <div class="section-header">
+                <span class="section-tag">功能特性</span>
+                <h2 class="section-title">开发环境管理<br><span class="gradient-text">从未如此简单</span></h2>
+                <p class="section-desc">告别命令行配置，可视化管理所有开发服务</p>
+            </div>
+            <div class="features-grid">
+                <div class="feature-card feature-highlight">
+                    <div class="feature-icon">🐘</div>
+                    <h3>PHP 多版本管理</h3>
+                    <p>支持 PHP 8.1 - 8.5 多版本并行，每个版本独立 CGI 进程，一键切换系统默认版本</p>
+                    <ul class="feature-list">
+                        <li>各版本端口自动分配</li>
+                        <li>可视化扩展管理</li>
+                        <li>在线编辑 php.ini</li>
+                        <li>集成 Composer 管理</li>
+                    </ul>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">🐬</div>
+                    <h3>MySQL 管理</h3>
+                    <p>支持 MySQL 5.7/8.0，一键安装初始化，密码管理，配置编辑</p>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">🌐</div>
+                    <h3>Nginx 管理</h3>
+                    <p>多版本切换，站点管理，Laravel 自动配置，SSL 证书申请</p>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">🔴</div>
+                    <h3>Redis 管理</h3>
+                    <p>Windows 原生版 Redis，服务控制，状态监控，配置编辑</p>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">💚</div>
+                    <h3>Node.js 管理</h3>
+                    <p>多版本管理，LTS 标识，npm 集成，一键切换</p>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">🐍</div>
+                    <h3>Python 管理</h3>
+                    <p>嵌入式版本，pip 集成，多版本管理，不污染系统</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 界面预览 -->
+    <section id="screenshots" class="section screenshots">
+        <div class="container">
+            <div class="section-header">
+                <span class="section-tag">界面预览</span>
+                <h2 class="section-title">精心设计的<span class="gradient-text">用户界面</span></h2>
+                <p class="section-desc">深色/浅色主题，现代化 UI 设计，流畅的操作体验</p>
+            </div>
+            <div class="screenshot-tabs">
+                <button class="tab-btn active" data-tab="dashboard">🏠 仪表盘</button>
+                <button class="tab-btn" data-tab="php">🐘 PHP</button>
+                <button class="tab-btn" data-tab="mysql">🐬 MySQL</button>
+                <button class="tab-btn" data-tab="nginx">🌐 Nginx</button>
+                <button class="tab-btn" data-tab="redis">🔴 Redis</button>
+                <button class="tab-btn" data-tab="nodejs">💚 Node.js</button>
+            </div>
+            <div class="screenshot-container">
+                <div class="screenshot-frame">
+                    <div class="screenshot-window-bar">
+                        <div class="window-buttons">
+                            <span></span><span></span><span></span>
+                        </div>
+                        <span class="window-title">PHPer</span>
+                    </div>
+                    <div class="screenshot-wrapper">
+                        <img src="docs/dashboard.png" alt="仪表盘" class="screenshot-img active" data-tab="dashboard">
+                        <img src="docs/php.png" alt="PHP管理" class="screenshot-img" data-tab="php">
+                        <img src="docs/mysql.png" alt="MySQL管理" class="screenshot-img" data-tab="mysql">
+                        <img src="docs/nginx.png" alt="Nginx管理" class="screenshot-img" data-tab="nginx">
+                        <img src="docs/redis.png" alt="Redis管理" class="screenshot-img" data-tab="redis">
+                        <img src="docs/nodejs.png" alt="Node.js管理" class="screenshot-img" data-tab="nodejs">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 更多功能 -->
+    <section class="section more-features">
+        <div class="container">
+            <div class="features-banner">
+                <div class="banner-content">
+                    <h3>🌍 站点管理</h3>
+                    <p>可视化创建虚拟主机，自动配置 Nginx，支持 Laravel 项目一键配置</p>
+                </div>
+                <div class="banner-content">
+                    <h3>📋 Hosts 管理</h3>
+                    <p>可视化管理系统 hosts 文件，添加域名自动同步</p>
+                </div>
+                <div class="banner-content">
+                    <h3>🚀 开机自启</h3>
+                    <p>服务开机自动启动，静默模式，无黑窗口闪烁</p>
+                </div>
+                <div class="banner-content">
+                    <h3>📊 日志查看</h3>
+                    <p>统一查看各服务日志，支持刷新、清空、打开目录</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 支持的服务 -->
+    <section id="services" class="section services">
+        <div class="container">
+            <div class="section-header">
+                <span class="section-tag">下载源</span>
+                <h2 class="section-title">官方渠道<span class="gradient-text">安全可靠</span></h2>
+                <p class="section-desc">所有软件均从官方或可信镜像下载，安全有保障</p>
+            </div>
+            <div class="services-table">
+                <div class="table-row table-header">
+                    <span>软件</span>
+                    <span>下载源</span>
+                    <span>说明</span>
+                </div>
+                <div class="table-row">
+                    <span class="service-name"><span class="emoji">🐘</span> PHP</span>
+                    <span class="source"><a href="https://windows.php.net/download/" target="_blank">windows.php.net</a></span>
+                    <span class="desc">官方 Windows 版</span>
+                </div>
+                <div class="table-row">
+                    <span class="service-name"><span class="emoji">🐬</span> MySQL</span>
+                    <span class="source"><a href="https://mirrors.aliyun.com/mysql/" target="_blank">阿里云镜像</a></span>
+                    <span class="desc">国内高速下载</span>
+                </div>
+                <div class="table-row">
+                    <span class="service-name"><span class="emoji">🌐</span> Nginx</span>
+                    <span class="source"><a href="https://nginx.org/en/download.html" target="_blank">nginx.org</a></span>
+                    <span class="desc">官方 Windows 版</span>
+                </div>
+                <div class="table-row">
+                    <span class="service-name"><span class="emoji">🔴</span> Redis</span>
+                    <span class="source"><a href="https://github.com/redis-windows/redis-windows" target="_blank">GitHub</a></span>
+                    <span class="desc">Windows 编译版</span>
+                </div>
+                <div class="table-row">
+                    <span class="service-name"><span class="emoji">💚</span> Node.js</span>
+                    <span class="source"><a href="https://nodejs.org/en/download/" target="_blank">nodejs.org</a></span>
+                    <span class="desc">官方下载</span>
+                </div>
+                <div class="table-row">
+                    <span class="service-name"><span class="emoji">🐍</span> Python</span>
+                    <span class="source"><a href="https://www.python.org/downloads/windows/" target="_blank">python.org</a></span>
+                    <span class="desc">嵌入式版本</span>
+                </div>
+                <div class="table-row">
+                    <span class="service-name"><span class="emoji">🔧</span> Git</span>
+                    <span class="source"><a href="https://git-scm.com/download/win" target="_blank">git-scm.com</a></span>
+                    <span class="desc">官方 Windows 版</span>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 常见问题 -->
+    <section id="faq" class="section faq">
+        <div class="container">
+            <div class="section-header">
+                <span class="section-tag">FAQ</span>
+                <h2 class="section-title">常见问题</h2>
+            </div>
+            <div class="faq-list">
+                <div class="faq-item">
+                    <button class="faq-question">
+                        <span>为什么需要管理员权限？</span>
+                        <svg class="faq-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
+                    </button>
+                    <div class="faq-answer">
+                        <p>应用需要管理员权限来：</p>
+                        <ul>
+                            <li>启动/停止 Windows 服务</li>
+                            <li>修改系统 hosts 文件</li>
+                            <li>配置系统环境变量</li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="faq-item">
+                    <button class="faq-question">
+                        <span>PHP 下载很慢怎么办？</span>
+                        <svg class="faq-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
+                    </button>
+                    <div class="faq-answer">
+                        <p>PHP 从 windows.php.net 官方下载，如果速度较慢：</p>
+                        <ul>
+                            <li>可以手动从官网下载 ZIP 文件</li>
+                            <li>解压到 <code>[安装目录]/php/php-版本号</code> 目录</li>
+                            <li>重新打开应用即可识别</li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="faq-item">
+                    <button class="faq-question">
+                        <span>MySQL 启动失败怎么办？</span>
+                        <svg class="faq-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
+                    </button>
+                    <div class="faq-answer">
+                        <p>常见原因：</p>
+                        <ul>
+                            <li>3306 端口被占用，检查是否有其他 MySQL 实例</li>
+                            <li>防火墙阻止，添加防火墙规则</li>
+                            <li>数据目录权限问题，确保目录可写</li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="faq-item">
+                    <button class="faq-question">
+                        <span>系统要求是什么？</span>
+                        <svg class="faq-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
+                    </button>
+                    <div class="faq-answer">
+                        <ul>
+                            <li>Windows 10/11 (64 位)</li>
+                            <li>管理员权限</li>
+                            <li><a href="https://aka.ms/vs/17/release/vc_redist.x64.exe" target="_blank">Visual C++ Redistributable 2015-2022</a></li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 技术栈 -->
+    <section class="section tech-stack">
+        <div class="container">
+            <div class="tech-content">
+                <h3>🛠️ 技术栈</h3>
+                <div class="tech-tags">
+                    <span class="tech-tag">Vue 3</span>
+                    <span class="tech-tag">TypeScript</span>
+                    <span class="tech-tag">Electron</span>
+                    <span class="tech-tag">Element Plus</span>
+                    <span class="tech-tag">Vite</span>
+                    <span class="tech-tag">Pinia</span>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- CTA 区域 -->
+    <section class="section cta">
+        <div class="container">
+            <div class="cta-content">
+                <h2>准备好提升开发效率了吗？</h2>
+                <p>立即下载 PHPer，开启高效的 PHP 开发之旅</p>
+                <div class="cta-actions">
+                    <a href="https://github.com/ethanfly/php-manager/releases" target="_blank" class="btn btn-primary btn-lg">
+                        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+                        免费下载
+                    </a>
+                    <a href="https://github.com/ethanfly/php-manager" target="_blank" class="btn btn-outline btn-lg">
+                        <svg class="icon" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
+                        Star on GitHub
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 页脚 -->
+    <footer class="footer">
+        <div class="container">
+            <div class="footer-content">
+                <div class="footer-brand">
+                    <span class="logo-icon">🐘</span>
+                    <span class="logo-text">PHPer</span>
+                </div>
+                <p class="footer-text">Made with ❤️ for PHP Developers</p>
+                <div class="footer-links">
+                    <a href="https://github.com/ethanfly/php-manager" target="_blank">GitHub</a>
+                    <a href="https://github.com/ethanfly/php-manager/issues" target="_blank">反馈问题</a>
+                    <a href="https://github.com/ethanfly/php-manager/releases" target="_blank">下载</a>
+                </div>
+                <p class="copyright">© 2024 PHPer. 基于 MIT 协议开源.</p>
+            </div>
+        </div>
+    </footer>
+
+    <script src="script.js"></script>
+</body>
+</html>
+

script.js

@@ -0,0 +1,183 @@
+/**
+ * PHPer 官网交互脚本
+ */
+
+document.addEventListener('DOMContentLoaded', () => {
+    // 初始化所有功能
+    initScreenshotTabs();
+    initFAQ();
+    initScrollAnimations();
+    initMobileMenu();
+    initSmoothScroll();
+});
+
+/**
+ * 截图标签切换
+ */
+function initScreenshotTabs() {
+    const tabs = document.querySelectorAll('.tab-btn');
+    const images = document.querySelectorAll('.screenshot-img');
+    
+    tabs.forEach(tab => {
+        tab.addEventListener('click', () => {
+            const target = tab.dataset.tab;
+            
+            // 切换标签状态
+            tabs.forEach(t => t.classList.remove('active'));
+            tab.classList.add('active');
+            
+            // 切换图片
+            images.forEach(img => {
+                if (img.dataset.tab === target) {
+                    img.classList.add('active');
+                } else {
+                    img.classList.remove('active');
+                }
+            });
+        });
+    });
+}
+
+/**
+ * FAQ 折叠面板
+ */
+function initFAQ() {
+    const faqItems = document.querySelectorAll('.faq-item');
+    
+    faqItems.forEach(item => {
+        const question = item.querySelector('.faq-question');
+        
+        question.addEventListener('click', () => {
+            // 关闭其他展开的项目
+            faqItems.forEach(other => {
+                if (other !== item && other.classList.contains('active')) {
+                    other.classList.remove('active');
+                }
+            });
+            
+            // 切换当前项目
+            item.classList.toggle('active');
+        });
+    });
+}
+
+/**
+ * 滚动动画
+ */
+function initScrollAnimations() {
+    const observerOptions = {
+        root: null,
+        rootMargin: '0px',
+        threshold: 0.1
+    };
+    
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.classList.add('visible');
+            }
+        });
+    }, observerOptions);
+    
+    // 观察需要动画的元素
+    const animatedElements = document.querySelectorAll(
+        '.feature-card, .faq-item, .table-row:not(.table-header)'
+    );
+    
+    animatedElements.forEach((el, index) => {
+        el.style.transitionDelay = `${index * 0.05}s`;
+        observer.observe(el);
+    });
+}
+
+/**
+ * 移动端菜单
+ */
+function initMobileMenu() {
+    const menuBtn = document.querySelector('.mobile-menu-btn');
+    const navLinks = document.querySelector('.nav-links');
+    
+    if (!menuBtn || !navLinks) return;
+    
+    menuBtn.addEventListener('click', () => {
+        menuBtn.classList.toggle('active');
+        navLinks.classList.toggle('mobile-open');
+    });
+    
+    // 点击链接后关闭菜单
+    navLinks.querySelectorAll('a').forEach(link => {
+        link.addEventListener('click', () => {
+            menuBtn.classList.remove('active');
+            navLinks.classList.remove('mobile-open');
+        });
+    });
+}
+
+/**
+ * 平滑滚动
+ */
+function initSmoothScroll() {
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function(e) {
+            const href = this.getAttribute('href');
+            if (href === '#') return;
+            
+            e.preventDefault();
+            const target = document.querySelector(href);
+            
+            if (target) {
+                target.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'start'
+                });
+            }
+        });
+    });
+}
+
+/**
+ * 导航栏滚动效果
+ */
+let lastScroll = 0;
+const navbar = document.querySelector('.navbar');
+
+window.addEventListener('scroll', () => {
+    const currentScroll = window.pageYOffset;
+    
+    if (currentScroll > 100) {
+        navbar.style.boxShadow = '0 4px 20px rgba(0, 0, 0, 0.3)';
+    } else {
+        navbar.style.boxShadow = 'none';
+    }
+    
+    lastScroll = currentScroll;
+});
+
+/**
+ * 打字机效果（终端提示）
+ */
+function typeWriter(element, text, speed = 50) {
+    let i = 0;
+    element.textContent = '';
+    
+    function type() {
+        if (i < text.length) {
+            element.textContent += text.charAt(i);
+            i++;
+            setTimeout(type, speed);
+        }
+    }
+    
+    type();
+}
+
+// 页面加载完成后启动打字机效果
+window.addEventListener('load', () => {
+    const promptText = document.querySelector('.prompt-text');
+    if (promptText) {
+        setTimeout(() => {
+            typeWriter(promptText, '所有服务已就绪，开始开发吧！', 80);
+        }, 1500);
+    }
+});
+