

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

![_20251212_071946.png](https://developer.qcloudimg.com/http-save/yehe-9735680/bcf4ef9a56e5a2e1c585ee2342c9743e.png)



## 什么是 FlatNas？

![1.png](https://developer.qcloudimg.com/http-save/yehe-9735680/d72c8eca890a53c9f3cd025e762f8055.png)


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

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

该项目在github 已有 109 star

github地址：[https://github.com/Garry-QD/FlatNas](https://github.com/Garry-QD/FlatNas)

![_20251212_064517.png](https://developer.qcloudimg.com/http-save/yehe-9735680/fa476808c10a79984dfe586b8c838237.png)


## 核心亮点：不止是导航页


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



### 🧩 开箱即用的丰富组件

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


### 🎨 深度个性化定制

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





## 技术栈与架构

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

项目结构清晰：
```
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](https://developer.qcloudimg.com/http-save/yehe-9735680/8896d84ea4525f2a3fbd20378a8646ea.png)

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

![ScreenShot_2025-12-12_070131_410.png](https://developer.qcloudimg.com/http-save/yehe-9735680/34f31c392cd9ca04ee5d332fed591dc0.png)

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

![_20251212_070621.png](https://developer.qcloudimg.com/http-save/yehe-9735680/2ecbdb8afc1824e51692d99fbcc01560.png)

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




## 结语

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

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

## 附录 其它导航Sun-Panel


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

[github地址：https://github.com/hslr-s/sun-panel](https://github.com/hslr-s/sun-panel)

[官网地址：https://doc.sun-panel.top/zh_cn/](https://doc.sun-panel.top/zh_cn/)


docker-compose.yml
```yaml
version: "3.3"
services:
  sun-panel:
    image: hslr/sun-panel:latest
    container_name: sun-panel
    volumes:
    - ./conf:/app/conf
    - ./uploads:/app/uploads
    - ./database:/app/database
    ports:
    - 3002:3002
    restart: always
    environment:
      TZ: 'Asia/Shanghai'

```


![_20251212_071648.png](https://developer.qcloudimg.com/http-save/yehe-9735680/45fcac96e071e649983796e63d10295d.png)











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

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

FlatNas 是一个轻量级、高度可定制的个人导航页与仪表盘系统。它基于 Vue 3 和 Express 构建，旨在为 NAS 用户、极客和开发者提供一个优雅的浏览器起始页

前端

开发工具

FlatNas是一款基于Vue3和Express的开源个人导航页与仪表盘系统，提供自由拖拽布局、丰富组件（书签、天气、待办事项等）和深度个性化定制功能。支持本地部署和Docker安装，帮助用户高效管理日常应用，打造专属数字工作空间。

数据安全

文件存储

数据存储

服务器

Docker

GitHub

JSON

2026采购季 | AI焕新·智启新局

4核4G3M云服务器 新用户低至38元/年！

对象存储COS新用户低至1元！


dsgc

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

FlatNas:打造你的专属浏览器仪表盘,一个集优雅与实用于一身的开源导航页-腾讯云开发者社区-腾讯云

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

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

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐