Revamp homepage and scripts for DevTools branding; update styles for new design. Replace PHPer references with DevTools, enhance navbar and product card interactions, and implement lazy loading for images. Remove outdated documentation images and files.
This commit is contained in:
parent
1b177e4798
commit
953691e7a3
339
README-easyshell.md
Normal file
339
README-easyshell.md
Normal file
@ -0,0 +1,339 @@
|
||||
<p align="center">
|
||||
<img src="public/icon.svg" width="120" height="120" alt="EasyShell Logo">
|
||||
</p>
|
||||
|
||||
<h1 align="center">EasyShell</h1>
|
||||
|
||||
<p align="center">
|
||||
<strong>🚀 赛博朋克风格的跨平台远程 Shell 管理终端</strong>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://github.com/ethanfly/easyshell"><img src="https://img.shields.io/github/stars/ethanfly/easyshell?style=for-the-badge&labelColor=0a1628&color=00d4ff" alt="Stars"></a>
|
||||
<a href="https://github.com/ethanfly/easyshell/releases"><img src="https://img.shields.io/badge/版本-1.0.0-00d4ff?style=for-the-badge&labelColor=0a1628" alt="Version"></a>
|
||||
<img src="https://img.shields.io/badge/Electron-28-00ff88?style=for-the-badge&labelColor=0a1628" alt="Electron">
|
||||
<img src="https://img.shields.io/badge/React-18-61dafb?style=for-the-badge&labelColor=0a1628" alt="React">
|
||||
<img src="https://img.shields.io/badge/Capacitor-5.6-ff6b35?style=for-the-badge&labelColor=0a1628" alt="Capacitor">
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
支持 <strong>Windows</strong> · <strong>macOS</strong> · <strong>Linux</strong> · <strong>Android</strong> 多平台运行
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://github.com/ethanfly/easyshell">GitHub</a> ·
|
||||
<a href="https://github.com/ethanfly/easyshell/releases">下载</a> ·
|
||||
<a href="https://github.com/ethanfly/easyshell/issues">反馈问题</a>
|
||||
</p>
|
||||
|
||||
---
|
||||
|
||||
## 📸 界面预览
|
||||
|
||||
### 🏠 欢迎界面
|
||||
|
||||
精心设计的赛博朋克风格欢迎界面，霓虹光效与深色主题完美融合。
|
||||
|
||||
|
||||
|
||||
### ➕ 添加主机
|
||||
|
||||
便捷的主机配置面板，支持密码和 SSH 私钥两种认证方式，可自定义分组和标识颜色。
|
||||
|
||||
|
||||
|
||||
### 💻 SSH 终端
|
||||
|
||||
功能完整的 SSH 终端，基于 xterm.js 打造，支持完整的终端模拟体验。
|
||||
|
||||
|
||||
|
||||
### 📁 SFTP 文件管理器
|
||||
|
||||
强大的 SFTP 文件管理功能，支持文件浏览、上传、下载、重命名、删除等操作。
|
||||
|
||||
|
||||
|
||||
### 📊 主机信息面板
|
||||
|
||||
实时监控远程主机状态，包括 CPU、内存、磁盘使用情况和系统运行时间。
|
||||
|
||||
|
||||
|
||||
### ⌨️ 快捷命令面板
|
||||
|
||||
内置常用命令快捷面板，按 `Ctrl + K` 快速调出，支持 Docker、文件操作等常用命令。
|
||||
|
||||
|
||||
|
||||
### 🗂️ 主机管理
|
||||
|
||||
集中管理所有 SSH 主机，支持分组、搜索、批量操作。
|
||||
|
||||
|
||||
|
||||
### ☁️ 云端同步
|
||||
|
||||
支持 MySQL 数据库云端同步，实现多设备主机配置共享。
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
## ✨ 功能特点
|
||||
|
||||
| 功能 | 描述 |
|
||||
|------|------|
|
||||
| 🎨 **赛博朋克 UI** | 霓虹色调、玻璃拟态、动态光效，打造独特视觉体验 |
|
||||
| 🖥️ **SSH 终端** | 完整的 xterm.js 终端模拟，支持各种终端操作 |
|
||||
| 📁 **SFTP 文件管理** | 远程文件浏览、上传、下载、权限修改 |
|
||||
| 📊 **主机监控** | 实时 CPU、内存、磁盘使用率监控 |
|
||||
| ⌨️ **快捷命令** | 内置常用命令，Ctrl+K 快速调出 |
|
||||
| ☁️ **云端同步** | MySQL 数据库同步，多设备配置共享 |
|
||||
| 🏷️ **分组管理** | 主机分组、颜色标识、便捷管理 |
|
||||
| 📱 **跨平台** | 桌面端和移动端统一体验 |
|
||||
|
||||
---
|
||||
|
||||
## 🏗️ 项目结构
|
||||
|
||||
```
|
||||
easyshell/
|
||||
├── src/ # React 前端源码
|
||||
│ ├── components/ # UI 组件
|
||||
│ │ ├── Terminal.js # SSH 终端组件
|
||||
│ │ ├── SFTPBrowser.js # SFTP 文件管理器
|
||||
│ │ ├── HostInfoPanel.js # 主机信息面板
|
||||
│ │ ├── HostManager.js # 主机管理器
|
||||
│ │ ├── Sidebar.js # 侧边栏
|
||||
│ │ └── TitleBar.js # 标题栏
|
||||
│ ├── services/ # 服务层
|
||||
│ │ ├── api.js # 跨平台 API 适配层
|
||||
│ │ ├── database.js # 数据库服务 (SQLite/MySQL)
|
||||
│ │ ├── ssh.js # SSH 服务
|
||||
│ │ └── sftp.js # SFTP 服务
|
||||
│ └── App.js # 主应用组件
|
||||
├── server/ # 后端服务器 (移动端需要)
|
||||
│ ├── index.js # Express + Socket.IO 服务
|
||||
│ └── package.json
|
||||
├── android/ # Android 原生项目 (Capacitor)
|
||||
├── public/ # 静态资源
|
||||
│ ├── icon.svg # 应用图标 (SVG)
|
||||
│ ├── icon.png # 应用图标 (PNG)
|
||||
│ └── icon.ico # 应用图标 (Windows)
|
||||
├── docs/ # 文档和截图
|
||||
├── main.js # Electron 主进程
|
||||
├── preload.js # Electron 预加载脚本
|
||||
├── capacitor.config.ts # Capacitor 配置
|
||||
└── tailwind.config.js # Tailwind CSS 配置
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🚀 快速开始
|
||||
|
||||
### 环境要求
|
||||
|
||||
- Node.js >= 16
|
||||
- npm >= 8
|
||||
- (可选) Android Studio (构建 Android 版本)
|
||||
|
||||
### 安装依赖
|
||||
|
||||
```bash
|
||||
# 克隆项目
|
||||
git clone https://github.com/ethanfly/easyshell.git
|
||||
cd easyshell
|
||||
|
||||
# 安装前端依赖
|
||||
npm install
|
||||
|
||||
# 安装服务器依赖 (如需移动端)
|
||||
cd server && npm install && cd ..
|
||||
```
|
||||
|
||||
### 桌面端开发
|
||||
|
||||
```bash
|
||||
# 启动开发模式 (React + Electron)
|
||||
npm start
|
||||
```
|
||||
|
||||
### 构建发布版
|
||||
|
||||
```bash
|
||||
# 构建 Windows 安装包
|
||||
npm run dist
|
||||
|
||||
# 生成的安装包位于 dist/ 目录
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📱 移动端部署
|
||||
|
||||
### 1. 启动后端服务器
|
||||
|
||||
移动端需要通过后端服务器代理 SSH 连接：
|
||||
|
||||
```bash
|
||||
# 启动服务器
|
||||
npm run server
|
||||
|
||||
# 或开发模式 (自动重启)
|
||||
npm run server:dev
|
||||
```
|
||||
|
||||
服务器将在 `http://0.0.0.0:3001` 启动。
|
||||
|
||||
### 2. 构建 Android 应用
|
||||
|
||||
```bash
|
||||
# 首次使用需要添加 Android 平台
|
||||
npm run cap:add:android
|
||||
|
||||
# 构建并打开 Android Studio
|
||||
npm run android
|
||||
|
||||
# 或直接运行到设备
|
||||
npm run android:run
|
||||
```
|
||||
|
||||
### 3. 手机配置
|
||||
|
||||
1. 确保手机和电脑在同一局域网
|
||||
2. 打开 EasyShell 应用
|
||||
3. 进入设置配置服务器地址
|
||||
4. 输入电脑 IP，如 `http://192.168.1.100:3001`
|
||||
5. 测试连接成功后即可使用
|
||||
|
||||
---
|
||||
|
||||
## ⌨️ 快捷键
|
||||
|
||||
| 快捷键 | 功能 |
|
||||
|--------|------|
|
||||
| `Ctrl + K` | 打开命令面板 |
|
||||
| `Ctrl + F` | SFTP 搜索文件 |
|
||||
| `Enter` | 执行选中命令 |
|
||||
| `Esc` | 关闭面板/弹窗 |
|
||||
|
||||
---
|
||||
|
||||
## 🔧 配置说明
|
||||
|
||||
### 数据存储
|
||||
|
||||
- **桌面端**: 使用 `electron-store` + SQLite 本地存储
|
||||
- **移动端**: 使用 `localStorage` 存储配置
|
||||
|
||||
### 云端同步
|
||||
|
||||
支持 MySQL 数据库同步，配置步骤：
|
||||
|
||||
1. 点击设置按钮
|
||||
2. 切换到「数据库同步」标签
|
||||
3. 填写 MySQL 连接信息
|
||||
4. 点击「连接数据库」
|
||||
|
||||
数据库不存在时会自动创建。
|
||||
|
||||
---
|
||||
|
||||
## 🛡️ 安全说明
|
||||
|
||||
- SSH 密码和私钥加密存储在本地
|
||||
- 移动端通过 WebSocket 与后端服务器通信
|
||||
- 建议在受信任的网络环境中使用
|
||||
- 生产环境建议配置 HTTPS/WSS
|
||||
|
||||
---
|
||||
|
||||
## 🤝 技术栈
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td align="center" width="25%">
|
||||
|
||||
**前端**
|
||||
|
||||
</td>
|
||||
<td align="center" width="25%">
|
||||
|
||||
**桌面端**
|
||||
|
||||
</td>
|
||||
<td align="center" width="25%">
|
||||
|
||||
**移动端**
|
||||
|
||||
</td>
|
||||
<td align="center" width="25%">
|
||||
|
||||
**后端**
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="center">
|
||||
|
||||
React 18<br>
|
||||
Tailwind CSS<br>
|
||||
Framer Motion<br>
|
||||
xterm.js
|
||||
|
||||
</td>
|
||||
<td align="center">
|
||||
|
||||
Electron 28<br>
|
||||
electron-store<br>
|
||||
ssh2<br>
|
||||
sql.js
|
||||
|
||||
</td>
|
||||
<td align="center">
|
||||
|
||||
Capacitor 5<br>
|
||||
Socket.IO Client<br>
|
||||
Android Studio
|
||||
|
||||
</td>
|
||||
<td align="center">
|
||||
|
||||
Express<br>
|
||||
Socket.IO<br>
|
||||
ssh2<br>
|
||||
mysql2
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
---
|
||||
|
||||
## 📦 脚本命令
|
||||
|
||||
```bash
|
||||
npm start # 启动开发模式
|
||||
npm run build # 构建 React 应用
|
||||
npm run dist # 打包桌面应用
|
||||
npm run icons # 生成应用图标
|
||||
npm run server # 启动后端服务器
|
||||
npm run android # 构建并打开 Android Studio
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📄 许可证
|
||||
|
||||
[MIT License](LICENSE)
|
||||
|
||||
---
|
||||
|
||||
<p align="center">
|
||||
Made with ❤️ and ⚡ by <strong>EasyShell Team</strong>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<sub>© 2024 EasyShell - Cyberpunk Edition</sub>
|
||||
</p>
|
||||
BIN
docs-easyshell/1.png
Normal file
BIN
docs-easyshell/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 406 KiB |
BIN
docs-easyshell/2.png
Normal file
BIN
docs-easyshell/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 404 KiB |
BIN
docs-easyshell/3.png
Normal file
BIN
docs-easyshell/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
BIN
docs-easyshell/4.png
Normal file
BIN
docs-easyshell/4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
BIN
docs-easyshell/5.png
Normal file
BIN
docs-easyshell/5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 115 KiB |
BIN
docs-easyshell/6.png
Normal file
BIN
docs-easyshell/6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
BIN
docs-easyshell/7.png
Normal file
BIN
docs-easyshell/7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
BIN
docs-easyshell/8.png
Normal file
BIN
docs-easyshell/8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
|
Before Width: | Height: | Size: 91 KiB After Width: | Height: | Size: 91 KiB |
|
Before Width: | Height: | Size: 71 KiB After Width: | Height: | Size: 71 KiB |
|
Before Width: | Height: | Size: 67 KiB After Width: | Height: | Size: 67 KiB |
|
Before Width: | Height: | Size: 70 KiB After Width: | Height: | Size: 70 KiB |
|
Before Width: | Height: | Size: 79 KiB After Width: | Height: | Size: 79 KiB |
|
Before Width: | Height: | Size: 67 KiB After Width: | Height: | Size: 67 KiB |
|
Before Width: | Height: | Size: 66 KiB After Width: | Height: | Size: 66 KiB |
|
Before Width: | Height: | Size: 96 KiB After Width: | Height: | Size: 96 KiB |
331
easyshell.html
Normal file
331
easyshell.html
Normal file
@ -0,0 +1,331 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>EasyShell - 赛博朋克风格跨平台远程 Shell 管理终端</title>
|
||||
<meta name="description" content="赛博朋克风格的跨平台远程 Shell 管理终端，支持 SSH、SFTP、主机监控、云端同步等功能">
|
||||
<meta name="keywords" content="SSH, SFTP, 终端, Shell, 远程管理, 赛博朋克, Electron, Capacitor">
|
||||
<link rel="icon" type="image/svg+xml" href="icon.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=Outfit:wght@300;400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body class="easyshell-page">
|
||||
<!-- 背景装饰 - 赛博朋克风格 -->
|
||||
<div class="bg-decoration cyber-bg">
|
||||
<div class="gradient-orb orb-1 orb-cyan"></div>
|
||||
<div class="gradient-orb orb-2 orb-magenta"></div>
|
||||
<div class="gradient-orb orb-3 orb-cyan"></div>
|
||||
<div class="cyber-grid"></div>
|
||||
<div class="scan-line"></div>
|
||||
<div class="noise-overlay"></div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<nav class="navbar navbar-cyber">
|
||||
<div class="container">
|
||||
<a href="index.html" class="logo">
|
||||
<span class="logo-icon">⚡</span>
|
||||
<span class="logo-text">DevTools</span>
|
||||
</a>
|
||||
<div class="nav-links">
|
||||
<a href="index.html">首页</a>
|
||||
<a href="phper.html">PHPer</a>
|
||||
<a href="easyshell.html" class="active">EasyShell</a>
|
||||
<a href="https://github.com/nicennnnnnnlee/easyshell" target="_blank" class="btn btn-nav btn-nav-cyber">
|
||||
<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 detail-hero cyber-hero">
|
||||
<div class="container">
|
||||
<div class="hero-content">
|
||||
<div class="hero-badge hero-badge-cyber">
|
||||
<span class="badge-dot badge-dot-cyber"></span>
|
||||
跨平台 · 开源免费
|
||||
</div>
|
||||
<h1 class="hero-title cyber-title">
|
||||
<span class="product-logo">🔐</span>
|
||||
<span class="title-line title-cyber">EasyShell</span>
|
||||
</h1>
|
||||
<p class="hero-tagline cyber-tagline">赛博朋克风格的跨平台远程 Shell 管理终端</p>
|
||||
<p class="hero-description">
|
||||
支持 <span class="highlight-cyber">Windows</span> ·
|
||||
<span class="highlight-cyber">macOS</span> ·
|
||||
<span class="highlight-cyber">Linux</span> ·
|
||||
<span class="highlight-cyber">Android</span> 多平台运行
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a href="https://github.com/nicennnnnnnlee/easyshell/releases" target="_blank" class="btn btn-cyber 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/nicennnnnnnlee/easyshell" target="_blank" class="btn btn-ghost-cyber 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 cyber-stats">
|
||||
<div class="stat">
|
||||
<span class="stat-value stat-value-cyber">4</span>
|
||||
<span class="stat-label">支持平台</span>
|
||||
</div>
|
||||
<div class="stat-divider stat-divider-cyber"></div>
|
||||
<div class="stat">
|
||||
<span class="stat-value stat-value-cyber">SSH</span>
|
||||
<span class="stat-label">安全连接</span>
|
||||
</div>
|
||||
<div class="stat-divider stat-divider-cyber"></div>
|
||||
<div class="stat">
|
||||
<span class="stat-value stat-value-cyber">☁️</span>
|
||||
<span class="stat-label">云端同步</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 界面预览 -->
|
||||
<section id="screenshots" class="section screenshots cyber-section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-tag section-tag-cyber">界面预览</span>
|
||||
<h2 class="section-title">霓虹光效与深色主题<span class="gradient-text-cyber">完美融合</span></h2>
|
||||
<p class="section-desc">精心设计的赛博朋克风格界面，独特视觉体验</p>
|
||||
</div>
|
||||
<div class="screenshot-tabs cyber-tabs">
|
||||
<button class="tab-btn tab-btn-cyber active" data-tab="welcome">🏠 欢迎</button>
|
||||
<button class="tab-btn tab-btn-cyber" data-tab="addhost">➕ 添加主机</button>
|
||||
<button class="tab-btn tab-btn-cyber" data-tab="sync">☁️ 云端同步</button>
|
||||
<button class="tab-btn tab-btn-cyber" data-tab="terminal">💻 SSH 终端</button>
|
||||
<button class="tab-btn tab-btn-cyber" data-tab="sftp">📁 SFTP</button>
|
||||
<button class="tab-btn tab-btn-cyber" data-tab="info">📊 主机信息</button>
|
||||
<button class="tab-btn tab-btn-cyber" data-tab="command">⌨️ 快捷命令</button>
|
||||
<button class="tab-btn tab-btn-cyber" data-tab="hostmanager">🗂️ 主机管理</button>
|
||||
</div>
|
||||
<div class="screenshot-container">
|
||||
<div class="screenshot-frame cyber-frame">
|
||||
<div class="screenshot-window-bar cyber-window-bar">
|
||||
<div class="window-buttons">
|
||||
<span></span><span></span><span></span>
|
||||
</div>
|
||||
<span class="window-title">EasyShell</span>
|
||||
</div>
|
||||
<div class="screenshot-wrapper">
|
||||
<img src="docs-easyshell/1.png" alt="欢迎界面" class="screenshot-img active" data-tab="welcome">
|
||||
<img src="docs-easyshell/2.png" alt="添加主机" class="screenshot-img" data-tab="addhost">
|
||||
<img src="docs-easyshell/3.png" alt="云端同步" class="screenshot-img" data-tab="sync">
|
||||
<img src="docs-easyshell/4.png" alt="SSH终端" class="screenshot-img" data-tab="terminal">
|
||||
<img src="docs-easyshell/5.png" alt="SFTP文件管理器" class="screenshot-img" data-tab="sftp">
|
||||
<img src="docs-easyshell/6.png" alt="主机信息面板" class="screenshot-img" data-tab="info">
|
||||
<img src="docs-easyshell/7.png" alt="快捷命令" class="screenshot-img" data-tab="command">
|
||||
<img src="docs-easyshell/8.png" alt="主机管理" class="screenshot-img" data-tab="hostmanager">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 功能特性 -->
|
||||
<section id="features" class="section features cyber-features">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-tag section-tag-cyber">功能特性</span>
|
||||
<h2 class="section-title">强大功能<br><span class="gradient-text-cyber">一应俱全</span></h2>
|
||||
<p class="section-desc">为远程服务器管理而生的专业工具</p>
|
||||
</div>
|
||||
<div class="features-grid cyber-grid-features">
|
||||
<div class="feature-card feature-card-cyber">
|
||||
<div class="feature-icon">🎨</div>
|
||||
<h3>赛博朋克 UI</h3>
|
||||
<p>霓虹色调、玻璃拟态、动态光效，打造独特视觉体验</p>
|
||||
</div>
|
||||
<div class="feature-card feature-card-cyber">
|
||||
<div class="feature-icon">🖥️</div>
|
||||
<h3>SSH 终端</h3>
|
||||
<p>完整的 xterm.js 终端模拟，支持各种终端操作</p>
|
||||
</div>
|
||||
<div class="feature-card feature-card-cyber">
|
||||
<div class="feature-icon">📁</div>
|
||||
<h3>SFTP 文件管理</h3>
|
||||
<p>远程文件浏览、上传、下载、权限修改</p>
|
||||
</div>
|
||||
<div class="feature-card feature-card-cyber">
|
||||
<div class="feature-icon">📊</div>
|
||||
<h3>主机监控</h3>
|
||||
<p>实时 CPU、内存、磁盘使用率监控</p>
|
||||
</div>
|
||||
<div class="feature-card feature-card-cyber">
|
||||
<div class="feature-icon">⌨️</div>
|
||||
<h3>快捷命令</h3>
|
||||
<p>内置常用命令，Ctrl+K 快速调出</p>
|
||||
</div>
|
||||
<div class="feature-card feature-card-cyber">
|
||||
<div class="feature-icon">☁️</div>
|
||||
<h3>云端同步</h3>
|
||||
<p>MySQL 数据库同步，多设备配置共享</p>
|
||||
</div>
|
||||
<div class="feature-card feature-card-cyber">
|
||||
<div class="feature-icon">🏷️</div>
|
||||
<h3>分组管理</h3>
|
||||
<p>主机分组、颜色标识、便捷管理</p>
|
||||
</div>
|
||||
<div class="feature-card feature-card-cyber">
|
||||
<div class="feature-icon">📱</div>
|
||||
<h3>跨平台</h3>
|
||||
<p>桌面端和移动端统一体验</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 快捷键 -->
|
||||
<section class="section shortcuts cyber-section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-tag section-tag-cyber">快捷键</span>
|
||||
<h2 class="section-title">键盘<span class="gradient-text-cyber">快捷操作</span></h2>
|
||||
</div>
|
||||
<div class="shortcuts-grid">
|
||||
<div class="shortcut-item">
|
||||
<kbd>Ctrl</kbd> + <kbd>K</kbd>
|
||||
<span>打开命令面板</span>
|
||||
</div>
|
||||
<div class="shortcut-item">
|
||||
<kbd>Ctrl</kbd> + <kbd>F</kbd>
|
||||
<span>SFTP 搜索文件</span>
|
||||
</div>
|
||||
<div class="shortcut-item">
|
||||
<kbd>Enter</kbd>
|
||||
<span>执行选中命令</span>
|
||||
</div>
|
||||
<div class="shortcut-item">
|
||||
<kbd>Esc</kbd>
|
||||
<span>关闭面板/弹窗</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 平台支持 -->
|
||||
<section class="section platforms cyber-section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-tag section-tag-cyber">平台支持</span>
|
||||
<h2 class="section-title">随时随地<span class="gradient-text-cyber">管理服务器</span></h2>
|
||||
</div>
|
||||
<div class="platforms-grid">
|
||||
<div class="platform-card">
|
||||
<div class="platform-icon">🪟</div>
|
||||
<h3>Windows</h3>
|
||||
<p>Electron 原生应用</p>
|
||||
</div>
|
||||
<div class="platform-card">
|
||||
<div class="platform-icon">🍎</div>
|
||||
<h3>macOS</h3>
|
||||
<p>Electron 原生应用</p>
|
||||
</div>
|
||||
<div class="platform-card">
|
||||
<div class="platform-icon">🐧</div>
|
||||
<h3>Linux</h3>
|
||||
<p>Electron 原生应用</p>
|
||||
</div>
|
||||
<div class="platform-card">
|
||||
<div class="platform-icon">📱</div>
|
||||
<h3>Android</h3>
|
||||
<p>Capacitor 移动端</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 技术栈 -->
|
||||
<section class="section tech-stack cyber-section">
|
||||
<div class="container">
|
||||
<div class="tech-content">
|
||||
<h3>🛠️ 技术栈</h3>
|
||||
<div class="tech-tags cyber-tech-tags">
|
||||
<span class="tech-tag tech-tag-cyber">React 18</span>
|
||||
<span class="tech-tag tech-tag-cyber">Tailwind CSS</span>
|
||||
<span class="tech-tag tech-tag-cyber">Electron 28</span>
|
||||
<span class="tech-tag tech-tag-cyber">Capacitor 5</span>
|
||||
<span class="tech-tag tech-tag-cyber">xterm.js</span>
|
||||
<span class="tech-tag tech-tag-cyber">ssh2</span>
|
||||
<span class="tech-tag tech-tag-cyber">Socket.IO</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA 区域 -->
|
||||
<section class="section cta cta-cyber">
|
||||
<div class="container">
|
||||
<div class="cta-content">
|
||||
<h2>准备好连接你的服务器了吗？</h2>
|
||||
<p>下载 EasyShell，开启赛博朋克式的远程管理体验</p>
|
||||
<div class="cta-actions">
|
||||
<a href="https://github.com/nicennnnnnnlee/easyshell/releases" target="_blank" class="btn btn-cyber 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/nicennnnnnnlee/easyshell" target="_blank" class="btn btn-outline-cyber 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 footer-cyber">
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<div class="footer-brand">
|
||||
<span class="product-emoji">🔐</span>
|
||||
<span class="logo-text logo-text-cyber">EasyShell</span>
|
||||
</div>
|
||||
<p class="footer-text">Made with ❤️ and ⚡ by EasyShell Team</p>
|
||||
<div class="footer-links">
|
||||
<a href="index.html">首页</a>
|
||||
<a href="phper.html">PHPer</a>
|
||||
<a href="https://github.com/nicennnnnnnlee/easyshell" target="_blank">GitHub</a>
|
||||
<a href="https://github.com/nicennnnnnnlee/easyshell/issues" target="_blank">反馈问题</a>
|
||||
</div>
|
||||
<p class="copyright">© 2024 EasyShell - Cyberpunk Edition. 基于 MIT 协议开源.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
592
index.html
592
index.html
@ -4,40 +4,39 @@
|
||||
<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">
|
||||
<title>开发者工具集 - PHPer & EasyShell</title>
|
||||
<meta name="description" content="高效的开发者工具集，包含 PHPer Windows PHP 开发环境管理器和 EasyShell 跨平台远程 Shell 管理终端">
|
||||
<meta name="keywords" content="PHP, Windows, 开发环境, SSH, 终端, SFTP, 开发工具">
|
||||
<link rel="icon" type="image/svg+xml" href="icon.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"
|
||||
href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap"
|
||||
rel="stylesheet">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body class="home-page">
|
||||
<!-- 背景装饰 -->
|
||||
<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 class="gradient-orb orb-1"></div>
|
||||
<div class="gradient-orb orb-2"></div>
|
||||
<div class="gradient-orb orb-3"></div>
|
||||
<div class="noise-overlay"></div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<nav class="navbar">
|
||||
<div class="container">
|
||||
<a href="#" class="logo">
|
||||
<img src="icon.svg" alt="PHPer" class="logo-icon">
|
||||
<span class="logo-text">PHPer</span>
|
||||
<a href="index.html" class="logo">
|
||||
<span class="logo-icon">⚡</span>
|
||||
<span class="logo-text">DevTools</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">
|
||||
<a href="#products">产品</a>
|
||||
<a href="phper.html">PHPer</a>
|
||||
<a href="easyshell.html">EasyShell</a>
|
||||
<a href="https://github.com/nicennnnnnnlee" target="_blank" class="btn btn-nav">
|
||||
<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" />
|
||||
@ -58,390 +57,249 @@
|
||||
<div class="container">
|
||||
<div class="hero-content">
|
||||
<div class="hero-badge">
|
||||
<span class="badge-dot"></span>
|
||||
Windows 专属 · 开源免费
|
||||
<span class="badge-icon">🚀</span>
|
||||
开源免费 · 持续更新
|
||||
</div>
|
||||
<h1 class="hero-title">
|
||||
<span class="title-line">告别繁琐配置</span>
|
||||
<span class="title-line gradient-text">一键管理开发环境</span>
|
||||
<span class="title-line">为开发者打造的</span>
|
||||
<span class="title-line"><span class="gradient-text">高效工具集</span></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> 等服务
|
||||
我们专注于创建简洁、高效的开发者工具，<br>
|
||||
帮助你更专注于创造，而非繁琐的配置
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a href="https://github.com/ethanfly/php-manager/releases" target="_blank"
|
||||
class="btn btn-primary btn-lg">
|
||||
<a href="#products" 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" />
|
||||
<path d="M19 14l-7 7m0 0l-7-7m7 7V3" />
|
||||
</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 class="floating-cards">
|
||||
<div class="float-card card-1">
|
||||
<span class="card-emoji">🐘</span>
|
||||
<span class="card-label">PHP</span>
|
||||
</div>
|
||||
<span class="terminal-title">PHPer 管理器</span>
|
||||
<div class="float-card card-2">
|
||||
<span class="card-emoji">🔐</span>
|
||||
<span class="card-label">SSH</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 class="float-card card-3">
|
||||
<span class="card-emoji">🐬</span>
|
||||
<span class="card-label">MySQL</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 class="float-card card-4">
|
||||
<span class="card-emoji">📁</span>
|
||||
<span class="card-label">SFTP</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 class="float-card card-5">
|
||||
<span class="card-emoji">🌐</span>
|
||||
<span class="card-label">Nginx</span>
|
||||
</div>
|
||||
<div class="float-card card-6">
|
||||
<span class="card-emoji">💻</span>
|
||||
<span class="card-label">Terminal</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 功能特性 -->
|
||||
<section id="features" class="section features">
|
||||
<!-- 产品展示 -->
|
||||
<section id="products" class="section products">
|
||||
<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>
|
||||
<span class="section-tag">产品</span>
|
||||
<h2 class="section-title">两款精心打造的<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">
|
||||
<!-- PHPer 产品卡片 -->
|
||||
<div class="product-card product-phper">
|
||||
<div class="product-info">
|
||||
<div class="product-header">
|
||||
<span class="product-icon">🐘</span>
|
||||
<div class="product-meta">
|
||||
<h3 class="product-name">PHPer</h3>
|
||||
<span class="product-badge">Windows 专属</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="product-tagline">功能强大的 Windows PHP 开发环境管理器</p>
|
||||
<p class="product-desc">
|
||||
告别繁琐的手动配置，一键管理 PHP、MySQL、Nginx、Redis、Node.js、Python 等服务。
|
||||
支持多版本并行、可视化扩展管理、站点管理、开机自启等功能。
|
||||
</p>
|
||||
<div class="product-features">
|
||||
<div class="feature-item">
|
||||
<span class="feature-icon">🔄</span>
|
||||
<span>多版本管理</span>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<span class="feature-icon">🌐</span>
|
||||
<span>站点配置</span>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<span class="feature-icon">🚀</span>
|
||||
<span>开机自启</span>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<span class="feature-icon">🎨</span>
|
||||
<span>深色主题</span>
|
||||
</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 class="product-tech">
|
||||
<span class="tech-item">Vue 3</span>
|
||||
<span class="tech-item">Electron</span>
|
||||
<span class="tech-item">TypeScript</span>
|
||||
</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>
|
||||
<div class="product-actions">
|
||||
<a href="phper.html" class="btn btn-primary">
|
||||
了解更多
|
||||
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</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">
|
||||
</a>
|
||||
<a href="https://github.com/nicennnnnnnlee/phper/releases" target="_blank"
|
||||
class="btn btn-outline">
|
||||
<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" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-preview">
|
||||
<div class="preview-window">
|
||||
<div class="window-header">
|
||||
<div class="window-dots">
|
||||
<span></span><span></span><span></span>
|
||||
</div>
|
||||
<span class="window-title">PHPer</span>
|
||||
</div>
|
||||
<img src="docs-phper/dashboard.png" alt="PHPer 仪表盘" class="preview-img">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- EasyShell 产品卡片 -->
|
||||
<div class="product-card product-easyshell reverse">
|
||||
<div class="product-info">
|
||||
<div class="product-header">
|
||||
<span class="product-icon">🔐</span>
|
||||
<div class="product-meta">
|
||||
<h3 class="product-name">EasyShell</h3>
|
||||
<span class="product-badge product-badge-cyber">跨平台</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="product-tagline">赛博朋克风格的远程 Shell 管理终端</p>
|
||||
<p class="product-desc">
|
||||
精心设计的 SSH 客户端，支持 Windows、macOS、Linux、Android 多平台。
|
||||
内置 SFTP 文件管理、主机监控、快捷命令、云端同步等功能，打造独特的赛博朋克视觉体验。
|
||||
</p>
|
||||
<div class="product-features">
|
||||
<div class="feature-item">
|
||||
<span class="feature-icon">💻</span>
|
||||
<span>SSH 终端</span>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<span class="feature-icon">📁</span>
|
||||
<span>SFTP 管理</span>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<span class="feature-icon">☁️</span>
|
||||
<span>云端同步</span>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<span class="feature-icon">📱</span>
|
||||
<span>移动端</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-tech">
|
||||
<span class="tech-item">React</span>
|
||||
<span class="tech-item">Electron</span>
|
||||
<span class="tech-item">Capacitor</span>
|
||||
</div>
|
||||
<div class="product-actions">
|
||||
<a href="easyshell.html" class="btn btn-cyber">
|
||||
了解更多
|
||||
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
Star on GitHub
|
||||
</a>
|
||||
<a href="https://github.com/nicennnnnnnlee/easyshell/releases" target="_blank"
|
||||
class="btn btn-outline-cyber">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-preview">
|
||||
<div class="preview-window preview-cyber">
|
||||
<div class="window-header">
|
||||
<div class="window-dots">
|
||||
<span></span><span></span><span></span>
|
||||
</div>
|
||||
<span class="window-title">EasyShell</span>
|
||||
</div>
|
||||
<img src="docs-easyshell/1.png" alt="EasyShell 界面" class="preview-img">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 特性对比 -->
|
||||
<section class="section comparison">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-tag">对比</span>
|
||||
<h2 class="section-title">选择适合你的<span class="gradient-text">工具</span></h2>
|
||||
</div>
|
||||
<div class="comparison-table">
|
||||
<div class="comparison-header">
|
||||
<div class="comparison-cell"></div>
|
||||
<div class="comparison-cell">
|
||||
<span class="product-icon-sm">🐘</span>
|
||||
<span>PHPer</span>
|
||||
</div>
|
||||
<div class="comparison-cell">
|
||||
<span class="product-icon-sm">🔐</span>
|
||||
<span>EasyShell</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comparison-row">
|
||||
<div class="comparison-cell">主要用途</div>
|
||||
<div class="comparison-cell">本地开发环境管理</div>
|
||||
<div class="comparison-cell">远程服务器管理</div>
|
||||
</div>
|
||||
<div class="comparison-row">
|
||||
<div class="comparison-cell">支持平台</div>
|
||||
<div class="comparison-cell">Windows</div>
|
||||
<div class="comparison-cell">Win/Mac/Linux/Android</div>
|
||||
</div>
|
||||
<div class="comparison-row">
|
||||
<div class="comparison-cell">UI 风格</div>
|
||||
<div class="comparison-cell">现代简约</div>
|
||||
<div class="comparison-cell">赛博朋克</div>
|
||||
</div>
|
||||
<div class="comparison-row">
|
||||
<div class="comparison-cell">技术栈</div>
|
||||
<div class="comparison-cell">Vue + Electron</div>
|
||||
<div class="comparison-cell">React + Electron/Capacitor</div>
|
||||
</div>
|
||||
<div class="comparison-row">
|
||||
<div class="comparison-cell">适用场景</div>
|
||||
<div class="comparison-cell">PHP/Web 开发者</div>
|
||||
<div class="comparison-cell">运维/全栈开发者</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -452,16 +310,16 @@
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<div class="footer-brand">
|
||||
<img src="icon.svg" alt="PHPer" class="logo-icon">
|
||||
<span class="logo-text">PHPer</span>
|
||||
<span class="logo-icon">⚡</span>
|
||||
<span class="logo-text">DevTools</span>
|
||||
</div>
|
||||
<p class="footer-text">Made with ❤️ for PHP Developers</p>
|
||||
<p class="footer-text">为开发者打造高效工具</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>
|
||||
<a href="phper.html">PHPer</a>
|
||||
<a href="easyshell.html">EasyShell</a>
|
||||
<a href="https://github.com/nicennnnnnnlee" target="_blank">GitHub</a>
|
||||
</div>
|
||||
<p class="copyright">© 2024 PHPer. 基于 MIT 协议开源.</p>
|
||||
<p class="copyright">© 2024 DevTools. 基于 MIT 协议开源.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
419
phper.html
Normal file
419
phper.html
Normal file
@ -0,0 +1,419 @@
|
||||
<!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="icon.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=Outfit:wght@300;400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body class="phper-page">
|
||||
<!-- 背景装饰 -->
|
||||
<div class="bg-decoration">
|
||||
<div class="gradient-orb orb-1 orb-green"></div>
|
||||
<div class="gradient-orb orb-2 orb-cyan"></div>
|
||||
<div class="noise-overlay"></div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<nav class="navbar">
|
||||
<div class="container">
|
||||
<a href="index.html" class="logo">
|
||||
<span class="logo-icon">⚡</span>
|
||||
<span class="logo-text">DevTools</span>
|
||||
</a>
|
||||
<div class="nav-links">
|
||||
<a href="index.html">首页</a>
|
||||
<a href="phper.html" class="active">PHPer</a>
|
||||
<a href="easyshell.html">EasyShell</a>
|
||||
<a href="https://github.com/nicennnnnnnlee/phper" target="_blank" class="btn btn-nav">
|
||||
<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 detail-hero">
|
||||
<div class="container">
|
||||
<div class="hero-content">
|
||||
<div class="hero-badge hero-badge-green">
|
||||
<span class="badge-dot"></span>
|
||||
Windows 专属 · 开源免费
|
||||
</div>
|
||||
<h1 class="hero-title">
|
||||
<span class="product-logo">🐘</span>
|
||||
<span class="title-line">PHPer</span>
|
||||
</h1>
|
||||
<p class="hero-tagline">功能强大的 Windows PHP 开发环境管理器</p>
|
||||
<p class="hero-description">
|
||||
告别繁琐的手动配置，轻松管理
|
||||
<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/nicennnnnnnlee/phper/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/nicennnnnnnlee/phper" 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>
|
||||
</header>
|
||||
|
||||
<!-- 界面预览 -->
|
||||
<section id="screenshots" class="section screenshots">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-tag section-tag-green">界面预览</span>
|
||||
<h2 class="section-title">精心设计的<span class="gradient-text-green">用户界面</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>
|
||||
<button class="tab-btn" data-tab="python">🐍 Python</button>
|
||||
<button class="tab-btn" data-tab="setting">⚙️ 设置</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-phper/dashboard.png" alt="仪表盘" class="screenshot-img active" data-tab="dashboard">
|
||||
<img src="docs-phper/php.png" alt="PHP管理" class="screenshot-img" data-tab="php">
|
||||
<img src="docs-phper/mysql.png" alt="MySQL管理" class="screenshot-img" data-tab="mysql">
|
||||
<img src="docs-phper/nginx.png" alt="Nginx管理" class="screenshot-img" data-tab="nginx">
|
||||
<img src="docs-phper/redis.png" alt="Redis管理" class="screenshot-img" data-tab="redis">
|
||||
<img src="docs-phper/nodejs.png" alt="Node.js管理" class="screenshot-img" data-tab="nodejs">
|
||||
<img src="docs-phper/python.png" alt="Python管理" class="screenshot-img" data-tab="python">
|
||||
<img src="docs-phper/setting.png" alt="设置" class="screenshot-img" data-tab="setting">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 功能特性 -->
|
||||
<section id="features" class="section features">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-tag section-tag-green">功能特性</span>
|
||||
<h2 class="section-title">开发环境管理<br><span class="gradient-text-green">从未如此简单</span></h2>
|
||||
<p class="section-desc">告别命令行配置，可视化管理所有开发服务</p>
|
||||
</div>
|
||||
<div class="features-grid">
|
||||
<div class="feature-card feature-highlight feature-green">
|
||||
<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>
|
||||
<li>PECL 在线安装扩展</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 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 section-tag-green">下载源</span>
|
||||
<h2 class="section-title">官方渠道<span class="gradient-text-green">安全可靠</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 section-tag-green">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">
|
||||
<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 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>
|
||||
</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 cta-green">
|
||||
<div class="container">
|
||||
<div class="cta-content">
|
||||
<h2>准备好提升开发效率了吗？</h2>
|
||||
<p>立即下载 PHPer，开启高效的 PHP 开发之旅</p>
|
||||
<div class="cta-actions">
|
||||
<a href="https://github.com/nicennnnnnnlee/phper/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/nicennnnnnnlee/phper" 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="product-emoji">🐘</span>
|
||||
<span class="logo-text">PHPer</span>
|
||||
</div>
|
||||
<p class="footer-text">Made with ❤️ for PHP Developers</p>
|
||||
<div class="footer-links">
|
||||
<a href="index.html">首页</a>
|
||||
<a href="easyshell.html">EasyShell</a>
|
||||
<a href="https://github.com/nicennnnnnnlee/phper" target="_blank">GitHub</a>
|
||||
<a href="https://github.com/nicennnnnnnlee/phper/issues" target="_blank">反馈问题</a>
|
||||
</div>
|
||||
<p class="copyright">© 2024 PHPer. 基于 MIT 协议开源.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
234
script.js
234
script.js
@ -1,5 +1,6 @@
|
||||
/**
|
||||
* PHPer 官网交互脚本
|
||||
* DevTools 官网交互脚本
|
||||
* 支持主页、PHPer、EasyShell 页面
|
||||
*/
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
@ -9,6 +10,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
initScrollAnimations();
|
||||
initMobileMenu();
|
||||
initSmoothScroll();
|
||||
initNavbarScroll();
|
||||
});
|
||||
|
||||
/**
|
||||
@ -18,6 +20,8 @@ function initScreenshotTabs() {
|
||||
const tabs = document.querySelectorAll('.tab-btn');
|
||||
const images = document.querySelectorAll('.screenshot-img');
|
||||
|
||||
if (!tabs.length || !images.length) return;
|
||||
|
||||
tabs.forEach(tab => {
|
||||
tab.addEventListener('click', () => {
|
||||
const target = tab.dataset.tab;
|
||||
@ -44,6 +48,8 @@ function initScreenshotTabs() {
|
||||
function initFAQ() {
|
||||
const faqItems = document.querySelectorAll('.faq-item');
|
||||
|
||||
if (!faqItems.length) return;
|
||||
|
||||
faqItems.forEach(item => {
|
||||
const question = item.querySelector('.faq-question');
|
||||
|
||||
@ -81,11 +87,13 @@ function initScrollAnimations() {
|
||||
|
||||
// 观察需要动画的元素
|
||||
const animatedElements = document.querySelectorAll(
|
||||
'.feature-card, .faq-item, .table-row:not(.table-header)'
|
||||
'.feature-card, .faq-item, .table-row:not(.table-header), .product-card, .banner-content, .platform-card, .shortcut-item, .comparison-row'
|
||||
);
|
||||
|
||||
animatedElements.forEach((el, index) => {
|
||||
el.style.transitionDelay = `${index * 0.05}s`;
|
||||
// 为每组元素设置递增的延迟
|
||||
const delay = Math.min(index * 0.05, 0.5);
|
||||
el.style.transitionDelay = `${delay}s`;
|
||||
observer.observe(el);
|
||||
});
|
||||
}
|
||||
@ -111,6 +119,14 @@ function initMobileMenu() {
|
||||
navLinks.classList.remove('mobile-open');
|
||||
});
|
||||
});
|
||||
|
||||
// 点击页面其他地方关闭菜单
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!menuBtn.contains(e.target) && !navLinks.contains(e.target)) {
|
||||
menuBtn.classList.remove('active');
|
||||
navLinks.classList.remove('mobile-open');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
@ -138,46 +154,204 @@ function initSmoothScroll() {
|
||||
/**
|
||||
* 导航栏滚动效果
|
||||
*/
|
||||
let lastScroll = 0;
|
||||
const navbar = document.querySelector('.navbar');
|
||||
function initNavbarScroll() {
|
||||
const navbar = document.querySelector('.navbar');
|
||||
if (!navbar) return;
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
let lastScroll = 0;
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
const currentScroll = window.pageYOffset;
|
||||
|
||||
if (currentScroll > 100) {
|
||||
navbar.style.boxShadow = '0 4px 20px rgba(0, 0, 0, 0.3)';
|
||||
navbar.style.boxShadow = '0 4px 30px rgba(0, 0, 0, 0.3)';
|
||||
navbar.style.background = 'rgba(8, 12, 20, 0.95)';
|
||||
} else {
|
||||
navbar.style.boxShadow = 'none';
|
||||
navbar.style.background = 'rgba(8, 12, 20, 0.85)';
|
||||
}
|
||||
|
||||
lastScroll = currentScroll;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 产品卡片悬停效果增强
|
||||
*/
|
||||
document.querySelectorAll('.product-card').forEach(card => {
|
||||
card.addEventListener('mouseenter', function() {
|
||||
this.style.transform = 'translateY(-8px)';
|
||||
});
|
||||
|
||||
card.addEventListener('mouseleave', function() {
|
||||
this.style.transform = 'translateY(0)';
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* 打字机效果（终端提示）
|
||||
* 浮动卡片交互效果
|
||||
*/
|
||||
function typeWriter(element, text, speed = 50) {
|
||||
let i = 0;
|
||||
element.textContent = '';
|
||||
document.querySelectorAll('.float-card').forEach(card => {
|
||||
card.addEventListener('mouseenter', function() {
|
||||
// 暂停动画
|
||||
this.style.animationPlayState = 'paused';
|
||||
});
|
||||
|
||||
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);
|
||||
}
|
||||
card.addEventListener('mouseleave', function() {
|
||||
// 恢复动画
|
||||
this.style.animationPlayState = 'running';
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* 按钮点击波纹效果
|
||||
*/
|
||||
document.querySelectorAll('.btn').forEach(btn => {
|
||||
btn.addEventListener('click', function(e) {
|
||||
const ripple = document.createElement('span');
|
||||
const rect = this.getBoundingClientRect();
|
||||
const size = Math.max(rect.width, rect.height);
|
||||
const x = e.clientX - rect.left - size / 2;
|
||||
const y = e.clientY - rect.top - size / 2;
|
||||
|
||||
ripple.style.cssText = `
|
||||
position: absolute;
|
||||
width: ${size}px;
|
||||
height: ${size}px;
|
||||
left: ${x}px;
|
||||
top: ${y}px;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 50%;
|
||||
transform: scale(0);
|
||||
animation: ripple 0.6s ease-out;
|
||||
pointer-events: none;
|
||||
`;
|
||||
|
||||
this.style.position = 'relative';
|
||||
this.style.overflow = 'hidden';
|
||||
this.appendChild(ripple);
|
||||
|
||||
setTimeout(() => ripple.remove(), 600);
|
||||
});
|
||||
});
|
||||
|
||||
// 添加波纹动画样式
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@keyframes ripple {
|
||||
to {
|
||||
transform: scale(4);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
/**
|
||||
* 图片懒加载
|
||||
*/
|
||||
function initLazyLoad() {
|
||||
const images = document.querySelectorAll('img[data-src]');
|
||||
|
||||
if ('IntersectionObserver' in window) {
|
||||
const imageObserver = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const img = entry.target;
|
||||
img.src = img.dataset.src;
|
||||
img.removeAttribute('data-src');
|
||||
imageObserver.unobserve(img);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
images.forEach(img => imageObserver.observe(img));
|
||||
} else {
|
||||
// 降级处理
|
||||
images.forEach(img => {
|
||||
img.src = img.dataset.src;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 页面加载完成后的初始化
|
||||
*/
|
||||
window.addEventListener('load', () => {
|
||||
// 移除加载状态
|
||||
document.body.classList.add('loaded');
|
||||
|
||||
// 初始化懒加载
|
||||
initLazyLoad();
|
||||
});
|
||||
|
||||
/**
|
||||
* 复制代码功能（如果需要）
|
||||
*/
|
||||
function copyToClipboard(text) {
|
||||
if (navigator.clipboard) {
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
showToast('已复制到剪贴板');
|
||||
});
|
||||
} else {
|
||||
// 降级处理
|
||||
const textarea = document.createElement('textarea');
|
||||
textarea.value = text;
|
||||
document.body.appendChild(textarea);
|
||||
textarea.select();
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(textarea);
|
||||
showToast('已复制到剪贴板');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 显示提示消息
|
||||
*/
|
||||
function showToast(message) {
|
||||
const toast = document.createElement('div');
|
||||
toast.className = 'toast';
|
||||
toast.textContent = message;
|
||||
toast.style.cssText = `
|
||||
position: fixed;
|
||||
bottom: 24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(16, 185, 129, 0.9);
|
||||
color: white;
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
z-index: 9999;
|
||||
animation: toastIn 0.3s ease, toastOut 0.3s ease 2s forwards;
|
||||
`;
|
||||
|
||||
document.body.appendChild(toast);
|
||||
setTimeout(() => toast.remove(), 2500);
|
||||
}
|
||||
|
||||
// Toast 动画样式
|
||||
const toastStyle = document.createElement('style');
|
||||
toastStyle.textContent = `
|
||||
@keyframes toastIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-50%) translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) translateY(0);
|
||||
}
|
||||
}
|
||||
@keyframes toastOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) translateY(0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateX(-50%) translateY(-20px);
|
||||
}
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(toastStyle);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user