first commit
This commit is contained in:
commit
5591b153e0
389
README-Phper.md
Normal file
389
README-Phper.md
Normal file
@ -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>
|
||||||
5
docs/.gitkeep
Normal file
5
docs/.gitkeep
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
# 此目录用于存放文档截图
|
||||||
|
# 请将以下截图放入此目录：
|
||||||
|
# - dashboard.png 仪表盘截图
|
||||||
|
# - php-manager.png PHP管理页面截图
|
||||||
|
|
||||||
BIN
docs/dashboard.png
Normal file
BIN
docs/dashboard.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
BIN
docs/mysql.png
Normal file
BIN
docs/mysql.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
BIN
docs/nginx.png
Normal file
BIN
docs/nginx.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
BIN
docs/nodejs.png
Normal file
BIN
docs/nodejs.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
BIN
docs/php.png
Normal file
BIN
docs/php.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
BIN
docs/python.png
Normal file
BIN
docs/python.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
BIN
docs/redis.png
Normal file
BIN
docs/redis.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
BIN
docs/setting.png
Normal file
BIN
docs/setting.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
11
favicon.svg
Normal file
11
favicon.svg
Normal file
@ -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>
|
||||||
|
|
||||||
|
After Width: | Height: | Size: 423 B |
433
index.html
Normal file
433
index.html
Normal file
@ -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>
|
||||||
|
|
||||||
183
script.js
Normal file
183
script.js
Normal file
@ -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);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
Loading…
Reference in New Issue
Block a user