# 宝塔面板导航 Server Navigator

**Repository Path**: xunjinlu/server-guide-panel

## Basic Information

- **Project Name**: 宝塔面板导航 Server Navigator
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-27
- **Last Updated**: 2026-02-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🖥️ 宝塔面板导航 (Server Navigator)

<p align="center">
  <img src="https://img.shields.io/badge/PHP-7.0+-777BB4?style=flat-square&logo=php&logoColor=white" alt="PHP">
  <img src="https://img.shields.io/badge/HTML5-E34F26?style=flat-square&logo=html5&logoColor=white" alt="HTML5">
  <img src="https://img.shields.io/badge/JavaScript-F7DF1E?style=flat-square&logo=javascript&logoColor=black" alt="JavaScript">
  <img src="https://img.shields.io/badge/WebGL-990000?style=flat-square&logo=webgl&logoColor=white" alt="WebGL">
</p>

<p align="center">
  <b>一个简洁优雅的宝塔面板服务器导航与实时监控工具</b>
</p>

<p align="center">
  <a href="#-功能特性">功能特性</a> •
  <a href="#-在线预览">在线预览</a> •
  <a href="#-快速开始">快速开始</a> •
  <a href="#-配置说明">配置说明</a> •
  <a href="#-截图展示">截图展示</a>
</p>

---

## ✨ 功能特性

- 🔗 **服务器导航** - 集中管理多个宝塔面板服务器和站点入口
- 📊 **实时监控** - 实时显示 CPU、内存、磁盘使用率，网络上下行速度
- 🟢 **在线检测** - 自动检测服务器在线/离线状态，显示网络延迟
- 📁 **到期管理** - 支持标记已到期服务器，归档展示
- 🔍 **筛选搜索** - 支持按状态筛选（全部/在线/离线/到期）和关键词搜索
- 🌓 **主题切换** - 支持暗黑/明亮模式一键切换
- 🎨 **WebGL 背景** - 炫酷的动态网格背景效果
- 📱 **响应式设计** - 完美适配桌面端和移动端

---

---

## 📸 截图展示

### 🌙 暗黑主题 (Dark Theme)

<p align="center">
  <img src="https://gitee.com/xunjinlu/server-guide-panel/raw/master/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202026-02-27%20170519.png" alt="暗黑主题截图" width="90%">
  <br>
  <em>暗黑主题 - 服务器卡片实时监控界面</em>
</p>

<details>
<summary>📋 点击查看暗黑主题更多细节</summary>

- 深邃的黑色背景配合 WebGL 动态网格
- 霓虹风格的渐变色彩（青色/紫色/绿色）
- SVG 环形进度条展示 CPU/内存/磁盘使用率
- 实时网络速度监控（上行/下行）

</details>

### ☀️ 明亮主题 (Light Theme)

<p align="center">
  <img src="./屏幕截图 2026-02-27 170547.png" alt="明亮主题截图" width="90%">
  <br>
  <em>明亮主题 - 服务器卡片实时监控界面</em>
</p>

<details>
<summary>📋 点击查看明亮主题更多细节</summary>

- 清新的浅色背景设计
- 蓝色主题色调，专业简洁
- 同样的功能布局，不同的视觉体验
- 适合白天使用，减少眼部疲劳

</details>

> 💡 **提示**: 点击页面右上角的"切换模式"按钮即可在暗黑/明亮主题间切换

---

## 🚀 快速开始

### 环境要求

- PHP 7.0 或更高版本
- 支持 cURL 扩展
- Web 服务器 (Nginx / Apache / Caddy)

### 安装步骤

1. **克隆仓库**

```bash
git clone https://gitee.com/yourusername/bt-panel-navigator.git
cd bt-panel-navigator
```

2. **上传文件**

将 `index.php` 上传到您的 Web 服务器目录：

```bash
/var/www/html/
└── index.php
```

3. **配置服务器信息**

编辑 `index.php` 中的 `$serverConfig` 数组，添加您的服务器信息：

```php
$serverConfig = [
    [
        'name' => '我的服务器',
        'url' => 'http://服务器IP:面板端口/安全入口',
        'panel_host' => 'http://服务器IP:面板端口',
        'panel_key' => '您的宝塔API密钥',
        'type' => 'server',
        'expired' => false
    ],
    // 添加更多服务器...
];
```

4. **访问页面**

在浏览器中访问：`http://您的域名/index.php`

---

## ⚙️ 配置说明

### 服务器配置结构

| 字段 | 类型 | 说明 | 示例 |
|------|------|------|------|
| `name` | string | 服务器显示名称 | `'香港服务器-01'` |
| `url` | string | 面板登录地址 | `'http://1.2.3.4:8888/abc123'` |
| `panel_host` | string | 宝塔API地址 | `'http://1.2.3.4:8888'` |
| `panel_key` | string | 宝塔API密钥 | `'您的API密钥'` |
| `type` | string | 类型: server/blog | `'server'` |
| `expired` | boolean | 是否已到期 | `false` |

### 配置示例

#### 正常服务器
```php
[
    'name' => '生产服务器-香港',
    'url' => 'http://123.45.67.89:8888/abc123',
    'panel_host' => 'http://123.45.67.89:8888',
    'panel_key' => '您的宝塔API密钥',
    'type' => 'server',
    'expired' => false
]
```

#### 博客站点
```php
[
    'name' => '我的技术博客',
    'url' => 'https://blog.example.com',
    'panel_host' => '',
    'panel_key' => '',
    'type' => 'blog',
    'expired' => false
]
```

#### 已到期服务器
```php
[
    'name' => '旧服务器-已到期',
    'url' => 'http://旧IP:8888',
    'panel_host' => '',
    'panel_key' => '',
    'type' => 'server',
    'expired' => true
]
```

### 获取宝塔 API 密钥

1. 登录宝塔面板
2. 进入 **面板设置** → **API 接口**
3. 开启 API 接口，复制密钥
4. 将 IP 白名单添加为 `*` 或您的服务器 IP

<p align="center">
  <img src="./screenshots/bt-api-setup.png" alt="宝塔API设置" width="70%">
  <br>
  <em>宝塔面板 API 接口设置位置</em>
</p>

---

## 🛡️ 安全建议

> ⚠️ **重要**: 由于页面包含敏感的服务器信息，请务必配置访问控制！

### 方案一: Nginx Basic Auth

```nginx
location / {
    auth_basic "Restricted Access";
    auth_basic_user_file /etc/nginx/.htpasswd;
    try_files $uri $uri/ =404;
}
```

### 方案二: IP 白名单

```nginx
location / {
    allow 192.168.1.0/24;
    deny all;
    try_files $uri $uri/ =404;
}
```

### 方案三: 使用 HTTPS

建议配置 SSL 证书，使用 HTTPS 访问：

```nginx
server {
    listen 443 ssl http2;
    server_name your-domain.com;
    
    ssl_certificate /path/to/cert.pem;
    ssl_certificate_key /path/to/key.pem;
    
    # ... 其他配置
}
```

---

## 🔧 自定义配置

### 修改刷新频率

编辑 `index.php` 中的 JavaScript 代码：

```javascript
// Ping 检测间隔 (默认 30000ms = 30秒)
setInterval(() => { ... }, 30000);

// 监控数据刷新间隔 (默认 10000ms = 10秒)
setInterval(() => { ... }, 10000);
```

### 修改主题颜色

编辑 CSS 变量部分：

```css
:root {
    --bg-body: #050507;        /* 背景色 */
    --card-bg: rgba(20, 20, 30, 0.95);  /* 卡片背景 */
    --accent: #00f2ea;         /* 主题色（青色） */
    --success: #00ff9d;        /* 成功色（绿色） */
    --warning: #ffbb00;        /* 警告色（黄色） */
    --danger: #ff3d5a;         /* 危险色（红色） */
}
```

---

## 🐛 常见问题

### Q1: 监控数据显示 "未配置API密钥"
**原因**: `panel_key` 为空或错误  
**解决**: 检查宝塔面板的 API 密钥是否正确

### Q2: 显示 "连接失败"
**原因**: `panel_host` 无法访问或防火墙阻止  
**解决**: 
1. 检查 `panel_host` 地址是否正确
2. 检查服务器防火墙是否开放面板端口
3. 检查宝塔面板是否正常运行

### Q3: 所有服务器都显示离线
**原因**: uapis.cn Ping API 服务异常  
**解决**: 等待服务恢复或修改代码使用其他 Ping API

### Q4: WebGL 背景不显示
**原因**: 浏览器不支持 WebGL  
**解决**: 更新浏览器到最新版本，或忽略此问题（不影响核心功能）

---

## 📝 更新日志

### v1.0 (2026-02-27)
- ✅ 初始版本发布
- ✅ 服务器导航功能
- ✅ 实时监控功能 (CPU/内存/磁盘/网络)
- ✅ 在线检测功能
- ✅ 筛选和搜索功能
- ✅ 主题切换功能
- ✅ WebGL 动态背景

---

## 🤝 贡献指南

欢迎提交 Issue 和 Pull Request！

1. Fork 本仓库
2. 创建您的特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交您的更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 打开一个 Pull Request

---

## 📄 许可证

本项目采用 [MIT](LICENSE) 许可证开源。

```
MIT License

Copyright (c) 2026 尋鯨錄

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

---

## 👨‍💻 作者信息

<table>
  <tr>
    <td align="center">
      <a href="https://www.xunjinlu.fun">
        <img src="https://img.shields.io/badge/作者-尋鯨錄-00f2ea?style=for-the-badge" alt="尋鯨錄">
      </a>
    </td>
    <td align="center">
      <a href="https://www.xunjinlu.fun">
        <img src="https://img.shields.io/badge/博客-www.xunjinlu.fun-7000ff?style=for-the-badge" alt="博客">
      </a>
    </td>
  </tr>
</table>

**尋鯨錄** - 热爱技术的全栈开发者，专注于服务器运维和 Web 开发。

- 🌐 博客: [www.xunjinlu.fun](https://www.xunjinlu.fun)
- 📧 邮箱: [您的邮箱]

---

## 🙏 致谢

- [宝塔面板](https://www.bt.cn/) - 优秀的服务器管理面板
- [uapis.cn](https://uapis.cn/) - 提供免费 Ping 检测 API

---

<p align="center">
  <img src="https://img.shields.io/badge/Made%20with-%E2%9D%A4%EF%B8%8F%20by%20尋鯨錄-00f2ea?style=for-the-badge" alt="Made with love">
</p>

<p align="center">
  <b>⭐ 如果这个项目对您有帮助，请给它一个 Star！</b>
</p>

<p align="center">
  Copyright © 2026 尋鯨錄. All Rights Reserved.
</p>