Spanel - 现代化跨平台服务器运维管理面板，根据自己的想法借助AI编程工具实现的一个管理面板

是一款基于 Web 的轻量级服务器可视化管理面板。它旨在简化服务器运维工作，通过直观的图形界面（GUI）替代繁琐的命令行操作。Spanel 采用现代化的前后端分离架构，支持 Windows 和 Linux 双平台，无论是个人开发者管理云服务器，还是进行即席运维，都能提供流畅、高效的体验。

核心功能模块

系统概览 (Dashboard)

进入面板的首页，提供服务器状态的实时全景视图：

• 资源监控：实时展示 CPU、内存、磁盘空间的利用率，以及系统负载 (Load Average)。
• 网络流量：实时监测网络上传/下载速率，帮助及时发现异常流量。
• 系统信息：展示操作系统版本、内核版本、运行时间、主机名等关键信息。
• 快捷状态：一目了然地查看核心服务（如 Nginx, MySQL, SSH）的运行状态。

系统监控 (System Monitor)

深入的历史数据分析中心，帮助运维人员回溯问题：

• 多维图表：提供 CPU、内存、网络 IO、磁盘 IO 的历史趋势图。
• 时间范围：支持查看过去 1小时、24小时甚至更长时间的数据。
• 自定义监控：支持用户自定义关键指标的监控图表，灵活满足特定业务需求。

告警通知 (Alert Notifications)

构建主动防御体系，确保第一时间感知异常：

• 告警规则：支持设置 CPU、内存、磁盘、网络等资源的阈值（如 CPU > 90% 持续 5分钟）。
• 多渠道触达：支持邮件、Webhook (钉钉/飞书/Slack)、短信等多种通知方式。
• 告警记录：完整记录历史告警事件，便于后续复盘分析。

终端管理 (Terminal)

无需安装 SSH 客户端，浏览器即是强大的终端：

• Web SSH：基于 xterm.js 和 WebSocket，提供低延迟、全功能的命令行体验。
• 多会话支持：支持同时打开多个终端标签页，并行处理任务。
• 跨平台兼容：在 Linux 下是 Bash/Zsh，在 Windows 下是 PowerShell/CMD。

连接工具 (Connection Tools)

集中管理所有的远程服务器连接：

• 资产管理：保存常用的 SSH 连接信息（主机、端口、用户名、密钥/密码）。
• 一键连接：点击即可快速打开远程服务器的终端会话，作为跳板机使用。
• 密钥管理：安全存储私钥文件，免去反复输入密码的烦恼。

文件管理 (File Manager)

功能对标本地资源管理器的在线文件系统：

• 全功能操作：支持新建、删除、重命名、复制、移动、压缩、解压、上传（可拖拽）、下载。
• 上传下载：支持大文件分片上传和文件夹下载。
• 在线编辑：集成 Monaco Editor，支持多种语言的语法高亮和代码折叠，轻松修改配置文件。
• 权限控制：可视化修改文件权限 (chmod) 和所有者 (chown)。

站点管理 (Site Manager)

Web 服务的可视化管家：

• 站点创建：快速创建静态网站或反向代理服务。
• 域名管理：绑定和管理站点域名。
• SSL 证书：支持证书的上传与配置，开启 HTTPS 安全访问。
• 配置编辑：在线编辑 Nginx/Apache 配置文件，实时生效。
• PM2 集成：深度整合 Node.js PM2，可视化管理 Node 应用的生命周期、日志查看和集群模式。

服务管理 (Service Manager)

全方位的进程与服务管控：

• 系统服务：管理 Systemd (Linux) 或 Windows Services，支持启停、重启及开机自启。
• 进程管理：内置 Web 版 "Task Manager"，查看所有进程的资源占用，支持强制结束进程。
• 端口管理：查看系统端口占用情况，快速定位占用端口的进程。
• 创建服务：自定义创建启动服务，管理服务配置端口查看日志。

计划任务 (Cron Manager)

自动化任务调度中心：

• 可视化编辑：无需记忆复杂的 Crontab 语法，通过界面轻松设置定时任务。
• 任务类型：支持 Shell 脚本、URL 请求等多种任务类型。
• 执行日志：查看任务的执行结果和输出日志，确保任务按预期运行。

用户管理 (User Management)

多用户协作的基础设施：

• 用户增删：创建和管理面板登录用户。
• 锁定策略：支持设置登录失败锁定策略，增强安全性。
• Shell 映射：可以将面板用户映射到特定的系统用户 (System Shell User) 执行命令。

权限管理 (Permission Management)

企业级 RBAC (Role-Based Access Control) 权限系统：

• 角色管理：创建自定义角色（如“审计员”、“运维”、“开发”）。
• 细粒度控制：精确控制每个角色对菜单、文件路径、特定操作（如删除文件、重启服务）的访问权限。

基本配置 (Settings)

面板自身的系统设置：

• 面板端口：修改面板运行端口。
• 安全设置：配置 Session 超时时间、登录验证码开关等。
• 外观设置：自定义面板标题、Logo 等（如有）。

系统日志 (System Logs)

服务器运行日志查看器：

• 日志聚合：集中查看 /var/log 下的系统日志或应用日志。
• 实时滚动：支持类似 tail -f 的实时日志查看模式。
• 日志搜索：快速过滤和查找关键日志信息。

安全审计 (Security Logs)

记录面板内的所有操作痕迹：

• 登录审计：记录所有登录尝试（成功/失败）、IP 地址、时间。
• 操作审计：记录用户在面板内的关键操作（如删除文件、修改配置），确保责任可追溯。

安全配置 (Security Settings)

服务器安全加固中心：

• 防火墙管理：可视化管理 UFW / Firewalld (Linux) 或 Windows Firewall，开放/关闭端口。
• SSH 安全：在线修改 SSH 端口、禁止 Root 登录、禁止密码登录等。
• IP 访问限制：设置允许/禁止访问面板的 IP 黑白名单。

快速开始 (Quick Start)

环境要求

• 操作系统: Windows 10/11/Server 或 Linux (Ubuntu/Debian/CentOS)
• Node.js: v18.0.0 或更高版本
• 数据库: MySQL 5.7+ 或 8.0+
• 包管理器: npm 或 pnpm

安装步骤

后端 (Server)

进入服务端目录：

cd server

安装依赖：

npm install

配置环境变量：

复制 `.env.example` (如有) 或直接创建 `.env` 文件，填入以下内容：
```env
# 数据库配置
DB_HOST=localhost
DB_PORT=3306
DB_USER=root
DB_PASSWORD=your_password
DB_NAME=spanel

# 服务端口
PORT=3001

# 安全密钥 (JWT)
JWT_SECRET=your_complex_secret_key
```

启动服务：

# 首次启动会自动创建数据库表结构并初始化默认账号
node index.js

# 默认管理员账号: `admin` / `admin123`

前端 (Client)

进入客户端目录：

cd client

安装依赖：

npm install

启动开发服务器：

npm run dev

构建生产版本：

npm run build

构建产物位于 `client/dist`，后端服务会自动托管该目录下的静态文件，生产环境中只需启动后端即可访问完整应用。

技术架构

项目采用现代化的全栈技术构建，确保高性能与易维护性：

• 前端 (Client)

  • 框架: React 19 + Vite
  • UI 组件库: Ant Design 6.x
  • 图表库: Recharts (数据可视化)
  • 终端组件: Xterm.js (Web 终端仿真)
  • 编辑器: Monaco Editor (代码编辑体验)
  • 状态管理: Context API

• 后端 (Server)

  • 运行环境: Node.js
  • Web 框架: Express 5.x
  • 数据库: MySQL (主要存储), 支持 Redis/PostgreSQL 连接管理
  • 实时通信: Socket.io (用于终端流、实时监控数据推送)

  • 系统交互:

    • systeminformation: 获取硬件与系统详尽信息。
    • node-pty: 实现伪终端交互。
    • ssh2: 处理 SSH 连接。
    • child_process: 执行底层系统命令。

项目目录结构 (Directory Structure)

spanel/
├── client/                 # 前端项目源码 (React)
│   ├── src/
│   │   ├── pages/          # 页面组件
│   │   ├── components/     # 公共组件 (终端、图表等)
│   │   └── api.js          # 后端 API 接口定义
│   └── vite.config.js      # Vite 构建配置
├── server/                 # 后端项目源码 (Node.js)
│   ├── routes/             # API 路由定义 (services, system, files...)
│   ├── utils/              # 工具类 (ssh, pty, monitor...)
│   ├── db.js               # 数据库连接与初始化
│   ├── index.js            # 服务入口
│   └── .env                # 环境配置文件
└── README.md               # 项目介绍文档

项目特色

跨平台：不同于大多数只支持 Linux 的面板，Spanel 在底层做了大量兼容适配，使其在 Windows Server 上也能提供完整的功能体验（如服务管理、防火墙、CMD/PowerShell 终端）。
轻量与高性能：占用资源极低，适合从树莓派到高性能服务器的各种环境。
开箱即用：集成了运维最常用的高频工具（文件、终端、监控），无需安装复杂的插件。
安全优先：内建完善的权限控制和审计机制，适合团队协作场景。

常见问题 (FAQ)

Q: 忘记管理员密码怎么办？
A: 目前没有提供重置密码的脚本。您需要直接连接数据库，在 users 表中找到对应的用户，手动修改 password 字段（注意密码是经过 bcrypt 哈希的，您可以先生成一个新的哈希值替换进去，或者直接清空表让系统重新初始化默认账号）。

Q: Windows 下部分功能受限？
A: 虽然 Spanel 支持 Windows，但部分 Linux 专属功能（如 iptables 防火墙、loadavg 负载详情、SSH 密钥登录管理等）在 Windows 下可能不可用或表现不同。系统会自动隐藏不支持的功能。

Q: 如何部署到生产环境？
A: 建议使用 PM2 托管后端服务：

npm install -g pm2
cd server
pm2 start index.js --name spanel-server

前端建议构建后由 Nginx 托管，或直接使用后端内置的静态文件服务