[分享] NOWEN：一款高颜值的 NAS 导航页 & 系统监控面板 (React+Docker)
大家好，我是 NOWEN 的开发者。
作为一名前端开发工程师和 NAS 玩家，我一直想找一个既美观又能直观查看服务器状态的导航页。市面上虽然已有不少优秀产品（如 Sun-panel, Homarr 等），但总觉得在 UI 动效和交互体验上还能打磨得更好。
于是利用业余时间，我开发了 **NOWEN (星云门户)**。
这是一个基于 React + TypeScript + Node.js 开发的现代化个人起始页。在设计上，我追求“深空”与“理性”的结合，使用了极光背景和大量毛玻璃效果；在功能上，它不仅是书签导航，更是你的 NAS 仪表盘。
✨ 核心特性
- 🌌 沉浸式设计：全站采用深空极光主题，配合 Framer Motion 驱动的平滑过渡和 3D 卡片微交互，拒绝生硬的点击反馈。
- 📊 NAS 系统监控：集成实时监控面板，直观展示服务器的 CPU 占用、内存使用、磁盘空间和网络流量（支持 Docker 部署下的宿主机监控）。
- 🔍 Spotlight 全局搜索：致敬 macOS 的
Cmd/Ctrl + K交互，全键盘操作即可快速过滤书签或触发系统指令，手不离键盘即可直达目标。 - 🍱 Bento 网格布局：采用流行的 Bento 风格，支持书签分组、拖拽排序，让你的服务入口井井有条。
- 🛡️ 隐私与管理：内置完善的后台管理系统，支持私有化部署，数据存储于本地 SQLite ，完全掌握在自己手中。
- 🐳 Docker 开箱即用：适配 x86 和 ARM64 架构，镜像体积小，资源占用低。
🛠️ 技术栈
- Frontend: React 18, Vite, Tailwind CSS, Framer Motion
- UI / Components: Aceternity UI, Radix UI
- Backend: Node.js (Express)
- Database: SQLite (无需配置繁琐的数据库服务)
- DevOps: Docker & Docker Compose
👀 界面预览
(建议在此处插入 2-3 张截图)
桌面端主页：极光背景与 Bento 布局
移动端完美适配
🚀 如何部署
提供了 Docker Compose 一键启动，非常简单：
version: '3'
services:
nowen:
image: cropflre/nowen:latest # (请替换为你实际上传的 Docker Hub 镜像名)
container_name: nowen
ports:
- "3000:3000"
volumes:
- ./data:/app/server/data
restart: unless-stopped
GitHub: [https://github.com/cropflre/NOWEN]
目前项目还在快速迭代中，不仅限于 NAS 导航，未来计划加入更多实用的小组件。
如果你对 UI 细节有强迫症，或者正在寻找一个高颜值的 NAS 首页，欢迎试用！ 如果有任何 Bug 或建议，欢迎在评论区或 Issue 提出。
如果觉得不错，求一个 ⭐️ Star 支持，感谢！
Select Language