434 lines
24 KiB
HTML
434 lines
24 KiB
HTML
<!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>
|
||
|