[分享] 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 支持，感谢！