NavPage - 现代化智能导航面板
项目概述
NavPage是一个现代化的服务器应用导航面板，专为个人和团队的服务管理需求而设计。它集成了服务管理、智能搜索功能和综合系统监控，采用未来科技风格设计，具有实时数据可视化功能。
🎯 设计理念：简洁、高效、智能
🔧 技术特色：现代化前后端分离架构
📱 用户体验：响应式设计，支持多设备访问
🚀 部署方式：支持Docker一键部署
核心功能特性
🏠 智能导航界面
顶部导航包含Logo标识、居中搜索栏、实时时间显示和用户管理功能。服务导航区采用网格式卡片展示，支持分类筛选。
🔍 智能搜索系统
支持服务名称、描述、标签的模糊搜索，实时搜索结果展示，快速定位目标服务。
📊 系统监控面板
实时显示CPU使用率、内存占用、网络状态、磁盘空间等关键系统指标，支持历史数据查看。
🔐 用户认证系统
支持多用户管理，基于角色的权限控制，安全的会话管理和密钥系统。
⚙️ 配置管理
灵活的服务配置管理，支持分类、标签、自定义图标，可视化配置界面。
🌐 实时通信
基于WebSocket的实时数据更新，系统状态实时同步，多用户协同操作。
技术架构
前端技术栈
- React 18
- TypeScript
- Vite
- CSS3
- WebSocket
后端技术栈
- Node.js
- Express
- Socket.IO
- JSON配置
- 系统API
部署和运维
- Docker
- Docker Compose
- Nginx
- PM2
界面设计亮点
1. 现代化UI设计
采用扁平化设计风格，配色方案基于科技蓝色调，界面简洁而不失功能性。所有组件都经过精心设计，确保视觉一致性。
2. 响应式布局
完全响应式设计，在桌面、平板、手机等不同设备上都能提供优秀的用户体验。自适应网格布局确保内容在各种屏幕尺寸下都能完美展示。
3. 交互体验优化
流畅的动画效果、直观的操作反馈、智能的状态提示，每一个交互细节都经过精心打磨。
设计原则：遵循Material Design和现代Web设计最佳实践，确保界面既美观又实用。
系统监控功能
| 监控指标 |
功能描述 |
更新频率 |
| CPU使用率 |
实时显示系统CPU占用情况，支持多核心监控 |
每秒更新 |
| 内存状态 |
显示内存使用量、可用内存、缓存等详细信息 |
每秒更新 |
| 磁盘空间 |
监控各分区磁盘使用情况，预警空间不足 |
每分钟更新 |
| 网络状态 |
显示网络接口状态、流量统计、连接数等 |
每5秒更新 |
| 系统负载 |
显示系统平均负载、进程数、运行时间等 |
每30秒更新 |
安全特性
认证和授权
- 多层认证：支持密码认证和API密钥认证
- 会话管理：安全的会话控制，自动过期机制
- 权限控制：基于角色的访问控制，细粒度权限管理
- 密钥管理：完整的API密钥生命周期管理
⚠️ 安全建议：建议在生产环境中启用HTTPS，定期更新密钥，并配置适当的防火墙规则。
部署方案
项目地址：https://github.com/dqsq2e2/navpage
1. Docker镜像部署（推荐）
使用预构建的Docker镜像，快速部署NavPage服务。这是最简单和推荐的部署方式。
🚀 快速启动命令
# 拉取并运行预构建镜像
docker run -d \
--name navpage-app \
--restart unless-stopped \
-p 5833:5834 \
-e NODE_ENV=production \
-e PORT=5834 \
-v navpage-data:/app/server/data \
-v navpage-logs:/app/logs \
-v /proc:/host/proc:ro \
-v /sys:/host/sys:ro \
-v /:/rootfs:ro \
-v /var/run/docker.sock:/var/run/docker.sock:ro \
--privileged \
crpi-36bectlts4f4dtww.cn-shenzhen.personal.cr.aliyuncs.com/navpage/navpage:latest
📋 使用Docker Compose部署
创建 docker-compose.yml 文件：
services:
navpage:
image: crpi-36bectlts4f4dtww.cn-shenzhen.personal.cr.aliyuncs.com/navpage/navpage:latest
container_name: navpage-app
restart: unless-stopped
ports:
- "5833:5834" # 主应用端口
environment:
- NODE_ENV=production
- PORT=5834
volumes:
- navpage-data:/app/server/data
- navpage-logs:/app/logs
# 系统监控需要的挂载点
- /proc:/host/proc:ro
- /sys:/host/sys:ro
- /:/rootfs:ro
- /var/run/docker.sock:/var/run/docker.sock:ro
privileged: true # 获取系统信息需要特权
healthcheck:
test: ["CMD", "curl", "-f", "http://localhost:5834/api/health"]
interval: 30s
timeout: 10s
retries: 3
start_period: 40s
networks:
- navpage-network
volumes:
navpage-data:
driver: local
navpage-logs:
driver: local
networks:
navpage-network:
driver: bridge
然后执行：
docker-compose up -d
✅ 镜像优势：
✅ 无需本地构建，直接拉取预构建镜像
✅ 节省构建时间和存储空间
✅ 版本稳定，经过充分测试
✅ 支持完整的系统监控功能
✅ 包含健康检查和自动重启
2. 本地构建部署
从GitHub仓库克隆源码并本地构建，适合需要自定义修改的场景。
# 克隆项目
git clone https://github.com/dqsq2e2/navpage.git
cd navpage
# 使用Docker Compose构建并启动
docker-compose up -d
# 或者手动构建
docker build -t navpage .
docker run -d \
--name navpage-app \
--restart unless-stopped \
-p 5833:5834 \
-e NODE_ENV=production \
-e PORT=5834 \
-v navpage-data:/app/server/data \
-v /proc:/host/proc:ro \
-v /sys:/host/sys:ro \
-v /:/rootfs:ro \
navpage
3. 环境变量配置
NavPage支持以下环境变量配置：
NODE_ENV=production # 环境模式
PORT=5834 # 后端端口
HOST_MOUNT_POINT=/rootfs # 监控用主机文件系统挂载点
4. 系统监控配置说明
为了启用完整的系统监控功能，需要挂载主机系统文件：
| 挂载路径 |
作用 |
权限 |
| /proc:/host/proc |
CPU、内存、网络等系统信息 |
只读(ro) |
| /sys:/host/sys |
系统硬件信息 |
只读(ro) |
| /:/rootfs |
磁盘使用情况 |
只读(ro) |
| /var/run/docker.sock |
Docker容器监控 |
只读(ro) |
| navpage-data:/app/server/data |
应用数据持久化 |
读写 |
| navpage-logs:/app/logs |
日志文件持久化 |
读写 |
⚠️ 安全提醒：所有主机目录挂载均使用只读权限(:ro)，确保容器无法修改主机系统文件。
5. 镜像信息
| 镜像信息 |
详情 |
| 镜像地址 |
crpi-36bectlts4f4dtww.cn-shenzhen.personal.cr.aliyuncs.com/navpage/navpage:latest |
| 镜像大小 |
约 270MB（压缩后） |
| 架构支持 |
linux/amd64 |
| 更新频率 |
跟随主分支更新 |
6. 端口说明
- 5833：外部访问端口（可自定义）
- 5834：容器内应用端口（固定）
7. 访问和初始化
部署完成后，访问 http://your-server-ip:5833 即可使用NavPage。
首次访问会提示设置管理员密钥，请妥善保存用于后续管理操作。
使用场景
🏢 企业内网导航
为企业内部各种服务和系统提供统一的访问入口，提升工作效率。
🏠 家庭服务器管理
管理家庭NAS、媒体服务器、智能家居等各种服务的理想选择。
💻 开发环境导航
为开发团队提供开发、测试、监控等环境的快速访问。
🔧 运维监控中心
集中管理和监控多个服务器和应用的运行状态。
项目特色
🎨 现代化设计：采用最新的UI/UX设计理念，界面美观且易用
⚡ 高性能：前后端分离架构，响应速度快，资源占用低
🔧 易于定制：模块化设计，可根据需求轻松扩展功能
📱 跨平台兼容：支持各种操作系统和浏览器
🚀 快速部署：提供多种部署方案，几分钟即可上线
📊 实时监控：全面的系统监控，实时掌握服务状态
🔐 安全可靠：完善的认证授权机制，保障系统安全
开源信息
NavPage是一个开源项目，采用MIT许可证，欢迎社区贡献和反馈。
| 项目信息 |
详情 |
| 开源许可 |
MIT License |
| 开发语言 |
TypeScript, JavaScript |
| 项目状态 |
活跃开发中 |
| 文档支持 |
完整的中英文文档 |
| 社区支持 |
GitHub Issues, 讨论区 |
贡献指南：欢迎提交Bug报告、功能建议或代码贡献。项目采用标准的GitHub工作流，详细的贡献指南请参考 GitHub仓库。
未来规划
短期计划
- 增加更多系统监控指标
- 支持自定义主题和皮肤
- 优化移动端体验
- 添加数据导出功能
长期愿景
- 插件系统支持
- 多语言国际化
- 云同步功能
- AI智能推荐
总结
NavPage作为一个现代化的智能导航面板，不仅提供了优秀的用户体验，更重要的是它解决了服务管理和系统监控的实际需求。无论您是个人用户还是企业团队，NavPage都能为您提供高效、安全、美观的服务管理解决方案。
🌟 选择NavPage的理由
✅ 开箱即用，部署简单
✅ 界面现代，体验优秀
✅ 功能全面，扩展性强
✅ 开源免费，社区活跃
✅ 持续更新，长期维护
立即开始使用NavPage，体验现代化服务管理的便利！
