FlatNas:打造你的专属浏览器仪表盘,一个集优雅与实用于一身的开源导航页

在信息爆炸的今天，我们每天都要打开无数个网页：查邮件、看新闻、管理任务、听音乐、访问NAS......浏览器书签栏早已不堪重负。有没有一个解决方案，能将这些高频应用优雅地整合在一起，提供一个既美观又高效的个人工作台？今天要介绍的 FlatNas，就是这样一个让人眼前一亮的开源项目。

_20251212_071946.png

什么是 FlatNas？

1.png

FlatNas 是一个基于 Vue 3 和 Express 构建的轻量级、高度可定制的个人导航页与仪表盘系统。它最初为 NAS 用户设计，但凭借其强大的功能和优雅的设计，迅速吸引了极客、开发者和追求效率的所有用户群体。

简单来说，FlatNas 就是你的浏览器起始页+个人仪表盘，让你在一个页面上管理所有日常所需，告别杂乱无章的书签和散落各处的工具。

该项目在github 已有 109 star

github地址：github.com/Garry-QD/Fl...

_20251212_064517.png

核心亮点：不止是导航页

🖥️ 自由拖拽的网格布局

FlatNas 采用了灵活的网格布局系统，所有组件------时钟、天气、书签、RSS阅读器------都可以像拼图一样自由拖拽、调整大小。你可以根据个人习惯，将最常用的组件放在最显眼的位置，打造独一无二的工作流界面。

🧩 开箱即用的丰富组件

项目内置了多种实用小组件，覆盖日常高频需求：

书签组件：支持自定义图标和链接，首次启动时会自动填充 GitHub、Bilibili 等10个常用网站。
时钟与天气：实时显示时间、日期和当地天气。
待办事项 (Todo) ：轻量级任务管理，随时记录灵感。
RSS 订阅器：内置阅读器，实时追踪订阅源更新。
热搜榜单：集成微博、新闻等热门榜单，把握即时热点。
简易计算器：无需切换应用，随时计算。
本地音乐播放器：播放存储在服务器端的音乐文件。

🎨 深度个性化定制

图标自定义 ：内置图标库 + 上传自定义图片 + Hex 颜色代码 （如 #ff6b6b）设置背景色。
壁纸与背景 ：支持自定义全局壁纸，更可为每个分组单独设置卡片背景（图片、模糊、遮罩效果），实现风格统一的视觉分区。
访客统计：在页脚显示总访问量、今日访问量和在线时长（需在设置中开启）。
数据安全 ：所有配置数据存储在本地 data.json 文件中，完全由你掌控。同时提供简单的密码保护（默认 admin），保护你的隐私设置。

技术栈与架构

FlatNas 采用前后端分离架构：

前端：Vue 3 + Vite，提供流畅的交互体验。
后端：Node.js + Express，提供API服务和静态文件托管。
数据存储：纯 JSON 文件存储，简单直接，易于备份和迁移。

项目结构清晰：

python 复制代码

FlatNas/
├── src/                # 前端 Vue 源码
├── server/             # 后端 Express 服务
│   ├── data/           # 用户配置数据 (data.json)
│   ├── music/          # 本地音乐文件目录
│   ├── cgi-bin/        # CGI 脚本扩展目录
│   └── server.js       # 后端主程序

快速上手：多种部署方式

1. 本地开发/部署

适合想要二次开发或自定义功能的用户：

bash 复制代码

# 克隆项目
git clone https://github.com/Garry-QD/FlatNas.git
cd FlatNas

# 安装依赖并启动
npm install
npm start  # 同时启动前端(5173端口)和后端(3000端口)

# 生产构建
npm run build
npm run server

2. Docker 部署（推荐）

项目提供了完整的 Docker 支持，部署极其简单：

创建docker-compose.yml文件

yaml 复制代码

services:
  flatnas:
    image: qdnas/flatnas:latest
    container_name: flatnas
    restart: unless-stopped
    ports:
      - '23000:3000'
    volumes:
      - ./data:/app/server/data   # 持久化配置数据
      - ./music:/app/server/music # 映射音乐目录

启动服务

docker-compose up -d
访问服务

浏览器打开 http://localhost:23000

使用

在浏览器中打开地址http://localhost:23000即可，管理员默认密码admin

_20251212_065829.png

如果需要给多个人使用的话切多用户模式

ScreenShot_2025-12-12_070131_410.png

整体使用下来整个代办和便笺是我比较喜欢的功能，整体ui也比较好看

_20251212_070621.png

如果家人们只是需要一个类似与收藏夹的导航页面、对于ui和其他功能没啥要求的话也可以考虑下Sun-Panel

结语

FlatNas 不仅仅是一个导航页，它是一个可自由拼装的工作台 ，一个智能的网络访问助手 ，一个完全属于你的数字空间。它用简洁优雅的方式，解决了我们在数字生活中的碎片化问题。

无论你是想要一个漂亮的浏览器起始页，还是需要一个集中管理所有工具的个人仪表盘，FlatNas 都值得一试。它的开源特性意味着你可以完全掌控自己的数据，并按照自己的需求进行定制。

附录其它导航Sun-Panel

一个服务器、NAS导航面板、Homepage、浏览器首页。

github地址：https://github.com/hslr-s/sun-panel

官网地址：https://doc.sun-panel.top/zh_cn/

docker-compose.yml