qdnas/flatnas

FlatNas

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

交流*** ***

镜像概述

FlatNas 是一款面向个人用户的导航页与仪表盘系统，采用前后端分离架构（Vue 3 前端 + Express 后端），提供直观的可视化编辑界面，支持用户自由定制个人网络入口。其核心价值在于将分散的网络资源、工具和信息整合到单一页面，同时保持高度的个性化和数据自主性。

核心功能与特性

🖥️ 仪表盘与布局

• 网格布局：支持组件自由拖拽，可调整不同尺寸组件的位置与排列。
• 分组管理：允许创建多个分组，对应用和书签进行分类管理，提升组织效率。
• 响应式设计：完美适配桌面端与移动端，在不同设备上均能提供良好体验。
• 编辑模式：所见即所得的编辑界面，支持添加、删除和重排组件，操作直观。

🧩 丰富的小组件

内置多种实用组件，满足日常需求：

• 书签组件：快速访问常用网站，支持自定义图标；首次启动自动填充 10 个常用网站（如 GitHub、Bilibili 等）。
• 时钟与天气：实时显示当前时间、日期及当地天气信息。
• 待办事项(Todo)：简易任务管理工具，记录待办事项与灵感。
• RSS 订阅：内置 RSS 阅读器，实时获取订阅源最新内容。
• 热搜榜单：集成微博热搜、新闻热榜等，及时掌握热点资讯。
• 计算器：便捷的内置计算器工具。
• 音乐播放器：MiniPlayer 组件，支持播放服务器端本地音乐文件。

🎨 个性化定制

• 图标管理：内置图标库，支持上传自定义图片，全面支持 Hex 颜色代码（如 #ffffff）自定义图标背景色。
• 背景设置：支持自定义壁纸，打造个性化视觉风格。
• 分组卡片背景：可在分组设置中统一配置该组所有卡片的背景（图片、模糊、遮罩），实现风格统一的视觉效果。
• 访客统计：底部页脚显示网站总访问量、今日访问量及当前在线时长（需在设置中开启）。
• 数据安全：本地存储配置（server/data/data.json），数据完全自主掌控；支持简单密码访问保护（默认密码：admin）。

🌐 智能网络环境检测

• 多维度识别：结合客户端 IP、访问域名和网络延迟判断网络环境（局域网/互联网）。
• 自动路由：局域网环境自动优先使用内网地址，公网环境切换至外网地址，无需手动干预。
• 双栈支持：支持 IPv4/IPv6 双栈识别，适配复杂网络环境。

使用场景

• 个人浏览器起始页：替代默认浏览器首页，集中管理常用网站与工具。
• NAS 导航中心：为 NAS 用户提供统一入口，整合各类 NAS 服务与应用。
• 极客信息仪表盘：集成 RSS 订阅、热搜、天气等，一站式获取所需信息。
• 开发环境导航：开发者可自定义部署，整合开发文档、工具链接与监控组件。

部署与使用方法

Docker 快速部署

1. 直接运行容器

bash
docker run -d \
  -p 3000:3000 \
  -v $(pwd)/flatnas/data:/app/server/data \
  -v $(pwd)/flatnas/music:/app/server/music \
  --name flatnas \
  docker.xuanyuan.run/qdnas/flatnas:latest

说明：

• -p 3000:3000：映射容器 3000 端口到主机 3000 端口
• -v $(pwd)/flatnas/data:/app/server/data：挂载数据目录，持久化配置数据
• -v $(pwd)/flatnas/music:/app/server/music：挂载音乐目录，提供本地音乐播放支持

2. Docker Compose 部署

创建 docker-compose.yml 文件：

yaml
version: '3.8'

services:
  flatnas:
    image: docker.xuanyuan.run/qdnas/flatnas:latest
    container_name: flatnas
    restart: unless-stopped
    ports:
      - '3000:3000'  # 可修改主机端口（左侧数值）
    volumes:
      - ./flatnas/data:/app/server/data  # 配置数据持久化
      - ./flatnas/music:/app/server/music  # 音乐文件目录

启动服务：

bash
docker-compose up -d

访问与配置

1. 部署完成后，通过 http://<主机IP>:3000 访问 FlatNas。
2. 首次登录使用默认密码 admin，建议登录后立即在设置中修改密码。
3. 进入编辑模式（点击页面编辑按钮），可拖拽组件调整布局、添加新组件或编辑现有组件。
4. 配置内网地址：在组件编辑对话框中填写“内网链接”，系统将根据网络环境自动切换访问地址。

配置说明

关键目录与文件

• 数据存储：所有配置（布局、组件、书签等）存储于 server/data/data.json，需通过数据卷挂载持久化。
• 音乐文件：本地音乐需放入 server/music 目录，刷新页面后播放器可自动识别。
• CGI 扩展：自定义脚本放置于 server/cgi-bin 目录，通过 /cgi-bin/script.cgi 访问。

核心配置参数

最近更新日志

v1.0.12

• 新增音乐上传功能，支持批量添加本地音乐文件
• 图标搜索组件，支持模糊查找图标
• 水平模式下新增备注功能
• 支持通过 JSON 文件导入项目

v1.0.11

• 书签组件支持自动抓取网页标题和图标，简化添加流程
• 新增 /api/fetch-meta 接口解决跨域问题，提升抓取成功率
• 支持导入浏览器书签文件（*.html），批量导入书签

v1.0.9

• 全组件支持 4x4 自由尺寸选择，布局更灵活
• 设置页底部重构，优化版权信息展示
• 版本号旁新增红点提醒，检测到新版本时提示更新

注意事项

• 首次登录后请立即修改默认密码（admin），保障数据安全。
• 建议通过数据卷挂载 data 和 music 目录，避免容器重启导致数据丢失。
• 使用反向代理时需配置 X-Forwarded-For 头，确保网络环境检测功能正常工作。

开源协议

本项目采用 https://www.gnu.org/licenses/agpl-3.0.html 协议开源。