1358 字

4 分钟

告别繁琐配置：NAS 导航页的终极形态 —— 从 Sun-Panel 到 FlatNAS

2026-01-05

docker

/

NAS

/

导航页

统计加载中...

告别繁琐配置：NAS 导航页的终极形态 —— 从 Sun-Panel 到 FlatNAS#

1 为什么放弃 Homepage 选择 Sun-Panel？#

对于每一个拥有 NAS 的玩家来说，随着 Docker 容器的增多，记住那一串串 IP:端口 简直是噩梦。我们在选择导航页时，通常会经历三个阶段：

导航页	颜值	配置难度	优点	缺点
Heimdall	⭐⭐	低	傻瓜式操作，应用库全	界面风格陈旧，不支持复杂组件
Homepage	⭐⭐⭐⭐⭐	极高	功能最强，支持 Docker Socket	纯 YAML 配置劝退，无后台，修改麻烦
Sun-Panel	⭐⭐⭐⭐	低	可视化拖拽，资源极低	原版部分高级样式需要付费
FlatNAS	⭐⭐⭐⭐⭐	低	解锁 Pro 功能，高度定制	本质是 Sun-Panel 的魔改，配置更自由

结论：Sun-Panel 及其增强版 FlatNAS 是目前的最佳平衡点——既有 Homepage 的现代颜值，又有 Heimdall 的可视化操作。

2 标准选择：Sun-Panel 部署指南#

Sun-Panel 是一个服务器端渲染的轻量级导航页。它的核心逻辑是“极简”，镜像体积小，启动快，非常适合作为 NAS 的浏览器主页。

2.1 核心配置说明#

账号信息：
初始账号：admin@sun.cc
初始密码：12345678
目录结构：已更新为 /mnt/docker/apps，与你的整体存储规划保持一致。
默认端口：使用官方默认的 3002 端口。

2.2 部署代码 (docker-compose.yaml)#

1
name: sun-panel
2
# 最后编辑时间：2025-04-21
3
services:
4
  sun-panel:
5
    # 镜像地址
6
    image: hslr/sun-panel:latest
7
    container_name: sun-panel
8
    hostname: sun-panel
9
    # 路径映射
10
    volumes:
11
      - /mnt/docker/apps/sun-panel:/app/conf
12
      - /mnt/docker/apps/sun-panel/icon:/app/conf/uploads
13
      - /var/run/docker.sock:/var/run/docker.sock:ro
14
      - /mnt/docker/apps/sun-panel/custom:/app/web/custom
15
    network_mode: bridge
16
    ports:
17
      - 3002:3002
18
    restart: always

3 进阶完全体：FlatNAS 深度解析#

你目前使用的 FlatNAS 是 Sun-Panel 的增强版。它不仅解除了原版的限制，还针对媒体播放、壁纸管理做了深度优化。

3.1 核心差异与功能亮点#

账号信息：
默认账号：admin
默认密码：admin (注意：与原版 Sun-Panel 不同)
解锁 Pro 功能：无限制的分组、页脚自定义。
媒体增强：你专门映射了 music 和 PC/APP 壁纸目录，这意味着你可以直接在导航页播放 NAS 里的音乐，或者随机切换本地壁纸。
端口策略 (13000)：
我们将宿主机端口映射到了 13000。这是为了防止常用的 3000 端口已经被 AdGuard Home 或 MoviePilot 等项目占用。使用万位以上的高位端口，既安全又不容易撞车。

3.2 部署代码 (docker-compose.yaml)#

1
name: flatnas
2
# 最后编辑时间：2025-12-18 23:24:38
3
services:
4
  flatnas:
5
    # 镜像地址 (QDNAS版本)
6
    image: qdnas/flatnas:latest
7
    container_name: flatnas
8
    hostname: flatnas
9
    volumes:
10
      # 基本数据路径
11
      - /mnt/docker/apps/flatnas/data:/app/server/data
12
      # 映射播放器路径 (支持本地音乐播放)
13
      - /mnt/docker/apps/flatnas/music:/app/server/music
14
      # 映射PC端壁纸路径 (用于轮播背景)
15
      - /mnt/docker/apps/flatnas/PC:/app/server/PC
16
      # 映射移动端壁纸路径
17
      - /mnt/docker/apps/flatnas/APP:/app/server/APP
18
      # 映射Docker (用于获取容器状态)
19
      - /var/run/docker.sock:/var/run/docker.sock
20
    ports:
21
      # webUI 端口 (注意容器端口为 3000)
22
      - 13000:3000
23
    restart: always

4 完美搭档：搭配自建图标库 HD-Icons (组合拳思路)#

很多时候我们觉得导航页不够完美，最大的痛点是图标。用网络图片加载慢，用内置图标风格不统一。

4.1 终极解决方案：本地闭环#

正如我之前的文章所介绍的，HD-Icons (Docker 版) 是一个运行在本地的高清图标仓库。把它和导航页部署在同一个 NAS 里，能打出一套完美的“内网闭环组合拳”。

4.2 为什么这套组合拳无敌？#

毫秒级加载：图标数据直接走内网（例如 http://192.168.3.7:端口/icons/...），页面打开瞬间即达。
风格统一：HD-Icons 里有成千上万个经过筛选的高清图标（圆角、圆形、矢量），强迫症狂喜。
断网可用：即使外网断了，你的导航页图标依然完整，不会出现“裂图”。

4.3 联动操作流#

部署 HD-Icons：在 NAS 上拉起镜像。
挑选图标：打开 HD-Icons Web 界面（如 十三的图标库），搜索应用名。
一键复制：点击图标，复制生成的本地 URL。
粘贴应用：在 FlatNAS 的图标设置里粘贴该 URL。

5 你的配置亮点与生态联动#

5.1 Lucky 反向代理联动#

配合 Sun-Panel，你可以实现内外网分流。在图标 URL 填入域名（如 https://nas.你的域名.com），配合 Lucky 的端口转发，无论你在家（内网）还是在公司（外网），点击同一个图标都能无缝访问。

5.2 资源挂载与界面定制#

媒体中心化：FlatNAS 侧非常细致地挂载了 /mnt/... 下的媒体资源，让导航页兼具了简单的媒体中心功能。
特效注入：通过挂载 /custom 目录，你可以注入 JS/CSS 实现磨砂玻璃、动态背景等特效，让界面充满科技感。

6 总结与效果展示#

6.1 极简清爽：Sun-Panel#

如果你喜欢干净、无干扰的界面，Sun-Panel 是最佳选择。它资源占用极低，配合一张治愈的壁纸，能让你的 NAS 首页看起来非常轻盈。

6.2 深度定制：FlatNAS#

如果你是折腾党，希望把导航页变成一个功能强大的“控制台”，FlatNAS 则是终极形态。配合 CSS 注入和本地 HD-Icons 图标库，你可以打造出像下面这样极具科技感和个人风格的界面。

左手 FlatNAS 负责高颜值的界面展示，右手 HD-Icons 负责极速的本地资源供给。这套组合拳打下来，你得到的不仅仅是一个导航页，而是一个完全自主可控、极速响应的个人数据中心门户。

Created with ❤️ by 十三