NavPage - 现代导航面板
一个现代化的服务器应用导航面板，集成服务管理、智能搜索功能和综合系统监控。采用未来科技风格设计，具有实时数据可视化功能。
📸 主页预览
NavPage主页界面展示 - 包含搜索功能、服务网格布局和系统监控面板
✨ 核心功能
🏠 现代化主界面
- 智能搜索栏：居中设计，支持多搜索引擎切换
- 服务导航网格：卡片式布局，支持分类筛选和状态显示
- 实时系统监控：CPU、内存、网络、磁盘等多维度监控
- 未来科技风格：深色主题配合霓虹光效与动态粒子背景
🔍 智能搜索体验
- 多引擎支持：默认集成百度、必应等搜索引擎
- 智能识别：自动识别URL并直接跳转
- 历史记录：保存搜索历史，支持快速重搜
- 输入提示：基于历史记录的智能补全
📊 综合系统监控
- 实时数据：WebSocket实时推送，每3秒更新
- 多指标监控：CPU核心、内存分布、磁盘IO、网络流量
- 可视化展示：仪表盘、进度条、趋势图等多种展示方式
- 容器友好：支持在Docker容器中监控宿主机系统
⚙️ 集中式配置管理
- 服务管理：添加、编辑、删除应用服务
- 分类管理：自定义服务分类和主题颜色
- 搜索配置：管理搜索引擎列表和优先级
- 数据备份：JSON格式配置导入导出
🚀 快速开始
环境要求
- Node.js 18.0.0 或更高版本
- npm 或 yarn 包管理器
- 现代浏览器（Chrome 90+、Firefox 88+、Safari 14+）
本地开发
# 克隆项目
git clone https://github.com/dqsq2e2/navpage.git
cd navpage
# 安装依赖
npm install
# 启动开发服务器（前端+后端）
npm run dev
# 或分别启动
npm run client # 前端开发服务器（端口3000）
npm run server # 后端服务器（端口5000）
生产构建
# 构建生产版本
npm run build
# 预览生产构建
npm run preview
🐳 Docker 部署
镜像源选择
NavPage 提供两个镜像源供您选择：
| 镜像源 |
镜像地址 |
特点 |
推荐场景 |
| Docker Hub |
dqsq2e2/navpage:latest |
全球访问，自动构建 |
国际网络，GitHub Actions自动推送 |
| 阿里云镜像仓库 |
crpi-36bectlts4f4dtww.cn-shenzhen.personal.cr.aliyuncs.com/dqsq2e2/navpage:latest |
国内加速，稳定快速 |
中国大陆服务器部署 |
使用 Docker Compose（推荐）
创建 docker-compose.yml 文件：
services:
navpage:
# 请从以下两个镜像地址中任选一个使用：
image: dqsq2e2/navpage:latest
# image: crpi-36bectlts4f4dtww.cn-shenzhen.personal.cr.aliyuncs.com/dqsq2e2/navpage:latest
container_name: navpage-app
restart: unless-stopped
ports:
- "5833:5834" # 主机端口:容器端口
environment:
- NODE_ENV=production
- PORT=5834
volumes:
- /path/to/data:/app/server/data # ⚠️ 重要：请确保该目录具有读写权限，否则可能导致密钥创建失败
- /path/to/logs:/app/logs
# 系统监控需要的挂载点（必须）
- /proc:/host/proc:ro
- /sys:/host/sys:ro
- /:/rootfs:ro
# 可选：Docker容器监控
- /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
直接使用 Docker 命令
# 拉取并运行预构建镜像（选择其中一个）
# Docker Hub镜像
docker pull dqsq2e2/navpage:latest
# 或阿里云镜像
docker pull crpi-36bectlts4f4dtww.cn-shenzhen.personal.cr.aliyuncs.com/dqsq2e2/navpage:latest
# 运行容器
docker run -d \
--name navpage-app \
--restart unless-stopped \
-p 5833:5834 \
-e NODE_ENV=production \
-e PORT=5834 \
-v /path/to/data:/app/server/data \
-v /path/to/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 \
dqsq2e2/navpage:latest # 或使用阿里云镜像地址
本地构建镜像
如需自定义构建：
# 克隆代码
git clone https://github.com/dqsq2e2/navpage.git
cd navpage
# 构建镜像
docker build -t my-navpage .
# 运行自定义镜像
docker run -d \
--name my-navpage-app \
-p 5833:5834 \
-v /proc:/host/proc:ro \
-v /:/rootfs:ro \
my-navpage
环境变量配置
| 变量名 |
默认值 |
说明 |
NODE_ENV |
production |
运行环境：production/development |
PORT |
5834 |
应用监听端口 |
HOST_MOUNT_POINT |
/rootfs |
主机文件系统挂载点（监控用） |
端口说明
- 5833：外部访问端口（可在docker-compose中修改）
- 5834：容器内部应用端口（固定）
📁 项目结构
navpage/
**── src/ # React前端源码
** **── components/ # 可复用组件
** ** **── Login.tsx # 登录组件
** ** **── SearchBar.tsx # 搜索栏组件
** ** **── ServiceGrid.tsx # 服务网格组件
** ** **── SystemMonitor.tsx # 系统监控组件
** **── contexts/ # React上下文
** ** **── AuthContext.tsx # 认证状态管理
** **── utils/ # 工具函数
** ** **── api.ts # API请求封装
** ** **── configService.ts # 配置服务
** **── types/ # TypeScript类型定义
**── server/ # Node.js后端
** **── modules/ # 功能模块
** ** **── auth.js # 用户认证
** ** **── config.js # 配置管理
** ** **── system.js # 系统监控
** ** **── websocket.js # WebSocket通信
** **── index.js # 服务器入口
**── public/ # 静态资源
**── .github/workflows/ # GitHub Actions工作流
**── Dockerfile # Docker镜像构建
**── docker-compose.yml # Docker Compose配置
**── package.json # 项目配置
🎨 界面设计
视觉风格
- 未来科技主题：深色背景配蓝色霓虹光效
- 玻璃拟态效果：半透明卡片与背景模糊
- 动态粒子动画：浮动粒子营造科技氛围
- 响应式布局：完美适配桌面端与移动端
交互体验
- 实时数据更新：系统监控数据3秒自动刷新
- 流畅动画：卡片悬停、页面切换等交互动画
- 智能反馈：操作状态实时提示
- 键盘导航：支持快捷键操作
🔧 配置说明
搜索引擎配置
默认支持：
- 百度：
https://www.baidu.com/s?wd={query}
- 必应：
https://www.bing.com/search?q={query}
添加自定义引擎：https://example.com/search?q={query}，使用 {query} 作为查询参数占位符。
服务管理
通过Web界面管理：
- 添加服务：名称、URL、图标、描述、分类
- 分类管理：创建分类，设置图标和颜色
- 状态监控：自动检测服务可用性
系统监控配置
系统监控需要以下挂载点：
volumes:
- /proc:/host/proc:ro # CPU、进程信息
- /sys:/host/sys:ro # 系统信息
- /:/rootfs:ro # 磁盘使用情况
📡 API 接口
系统监控
GET /api/system-stats # 获取系统状态
WebSocket /socket.io # 实时数据推送
用户认证
POST /api/auth/login # 用户登录
GET /api/auth/verify # 验证会话
POST /api/auth/logout # 用户登出
配置管理
GET /api/config/services # 获取服务列表
POST /api/config/services # 更新服务配置
GET /api/config/engines # 获取搜索引擎
POST /api/config/engines # 更新搜索引擎
⚡ 技术架构
前端技术栈
- React 18 + TypeScript：组件化开发
- Vite：快速构建与热重载
- Socket.IO Client：实时通信
- CSS Modules：样式隔离
后端技术栈
- Express.js：Web服务器框架
- Socket.IO：WebSocket实时通信
- 文件系统API：直接读取/proc系统信息
- JWT认证：安全的用户认证
系统监控实现
- 无第三方依赖：直接解析Linux系统文件
- 高效读取：缓存机制减少文件IO
- 容器化支持：通过挂载访问宿主机信息
- 实时推送：WebSocket保持连接
🔐 安全特性
- 密钥认证系统：自定义密钥管理
- 会话安全：HTTP-only Cookie + JWT Token
- 数据加密：密钥哈希存储（SHA-256）
- API保护：关键接口需要认证
- 容器安全：只读挂载，最小权限原则
🚀 高级部署
Docker中的系统监控
启用完整监控功能：
-
必须挂载的目录：
-v /proc:/host/proc:ro # CPU和进程信息
-v /sys:/host/sys:ro # 系统参数
-v /:/rootfs:ro # 磁盘信息
-
可选监控：
-v /var/run/docker.sock:/var/run/docker.sock:ro # Docker容器监控
-
权限要求：
--privileged # 或使用更细粒度的--cap-add参数
支持的监控指标
- ✅ CPU使用率（总体和各核心）
- ✅ 内存使用（总量、已用、缓存、可用）
- ✅ 磁盘空间和IO速度
- ✅ 网络流量（上传/下载）
- ✅ 系统运行时间和负载
- ✅ 进程数量统计
🙏 致谢
感谢以下项目和资源：
📞 支持与联系
- GitHub Issues：报告问题或功能请求
- 文档：本README文件包含完整使用说明
- 社区：欢迎提交Pull Request参与改进
NavPage - 让服务器导航与管理更简单、更直观。
，可以看看你的配置或日志吗