Sun-Panel：打造你的专属NAS门户，从零开始构建高效导航首页

1. 为什么你需要一个NAS导航首页？

每天打开电脑，第一件事就是面对浏览器里密密麻麻的书签栏——Jellyfin、Nextcloud、Bitwarden、Transmission...这些自建服务分散在不同的IP和端口上，记不住地址就得反复翻找记事本。更头疼的是，在公司想访问家里的NAS服务时，还得区分内网外网地址。这种体验就像把工具扔在杂乱的工具箱里，每次使用都要翻找半天。

Sun-Panel就是为解决这些问题而生的NAS导航门户。它相当于给你的所有服务做了个可视化目录，就像图书馆的检索系统。我实测下来最实用的三个场景：

• 统一入口：把所有自建服务、常用网页整合在一个页面，支持分类管理
• 智能切换：自动识别内外网环境，点击图标无需手动切换地址
• 状态监控：直观显示服务器CPU、内存等基础信息，异常状态一目了然

对于家庭用户，它能将孩子的学习资源、家人的照片库、影音服务分门别类展示；对小型团队，可以按部门设置不同权限的导航组。我自己的使用方案是把服务分成四类：

1. 媒体中心：Jellyfin、Plex、qBittorrent
2. 文件管理：Nextcloud、FileBrowser
3. 工具集合：Bitwarden、Portainer、HomeAssistant
4. 常用网站：GitHub、技术文档等

2. Sun-Panel核心功能解析

2.1 比传统书签强在哪？

普通浏览器书签只能保存单一URL，而Sun-Panel有这些独特优势：

• 双地址自动切换：一个图标可同时设置内网（如192.168.1.100:8096）和公网地址（如mydomain.com/jellyfin），系统会根据访问环境自动选择
• 可视化仪表盘：支持自定义背景、布局调整，图标尺寸可自由缩放
• 多账户隔离：家庭成员各自有独立视图，避免孩子误操作管理后台
• 服务状态集成：通过简单配置就能显示服务的在线/离线状态

2.2 那些让人惊喜的细节

使用三个月后，我发现几个特别实用的功能：

• 图标库集成：内置Iconify的6000+图标，搜索"movie"就能找到完美的影视图标
• 小窗模式：点击图标可选择直接弹出小窗口，适合快速查看下载进度
• CSS注入：通过自定义CSS可以修改字体、颜色等，我的暗黑模式方案是这样的：

body { background-color: #1a1a1a; color: #e0e0e0; } .card { background-color: #2d2d2d; }

• Docker健康监测：如果通过Docker部署，会自动显示容器运行状态

3. 从零开始的安装指南

3.1 硬件准备建议

虽然Sun-Panel本身资源占用极低（实测内存<100MB），但考虑到要整合各种服务，建议：

• NAS设备：群晖DS220+/威联通TS-251D等x86机型更佳
• 内存容量：如果同时运行多个服务，建议4GB以上
• 存储空间：系统本身只需50MB，预留1GB空间用于存放上传的图标和配置

我的测试环境是一台树莓派4B（4GB内存），同时运行Sun-Panel+Jellyfin+Transmission，负载稳定在0.3左右。

3.2 两种安装方式详解

3.2.1 Docker CLI方案

适合熟悉命令行的用户，这里给出完整路径示例：

# 创建目录结构（群晖用户注意修改/volume1为实际存储卷） mkdir -p /volume1/docker/sun-panel/{conf,database,uploads} # 启动容器（端口3004可自行修改） docker run -d \ --name sun-panel \ -p 3004:3002 \ -v /volume1/docker/sun-panel/conf:/app/conf \ -v /volume1/docker/sun-panel/uploads:/app/uploads \ -v /volume1/docker/sun-panel/database:/app/database \ --restart unless-stopped \ hslr/sun-panel:latest

3.2.2 Docker-Compose方案

推荐使用这种方式，方便后期管理。创建一个docker-compose.yml文件：

version: '3' services: sun-panel: image: hslr/sun-panel:latest container_name: sun-panel restart: unless-stopped ports: - "3004:3002" volumes: - ./conf:/app/conf - ./uploads:/app/uploads - ./database:/app/database

然后执行：

docker-compose up -d

4. 个性化配置实战

4.1 安全设置第一步

首次登录后（默认账号admin@sun.cc/12345678），立即要做三件事：

1. 修改管理员密码：进入"账户管理"→"修改密码"
2. 创建新用户：建议为每个家庭成员创建独立账号
3. 禁用默认账户：在账户列表点击"禁用"图标

4.2 导航分组技巧

合理的分类能大幅提升效率，这是我的分组方案示例：

• 媒体中心：图标颜色统一用蓝色系
• 文件管理：使用绿色系图标+灰色背景
• 智能家居：所有Home相关服务集中放置
• 工作区：仅对办公账号可见

创建分组时，可以按住图标直接拖拽调整顺序。对于高频服务，建议放到第一屏可见位置。

4.3 图标优化指南

从Iconify选择图标的几个技巧：

1. 搜索使用英文关键词（如"cloud"比"云"结果多）
2. 优先选择"mdi-"开头的Material Design图标
3. 复杂图标建议下载SVG后上传，避免在线加载延迟

修改图标样式的CSS示例：

/* 圆形背景 */ .icon-wrapper { border-radius: 50%; padding: 8px; background: rgba(255,255,255,0.1); } /* 悬停效果 */ .card:hover { transform: scale(1.05); transition: all 0.3s ease; }

5. 高级应用场景

5.1 内外网智能切换

这是Sun-Panel最实用的功能之一。添加服务时：

• 公网地址：填写域名+端口（如https://mydomain.com:8443）
• 内网地址：填写局域网IP（如http://192.168.1.100:8096）

系统会自动检测访问来源，当我在公司点击图标时，会自动跳转到公网地址；回到家则使用内网地址，避免绕行公网提升速度。

5.2 多用户权限管理

通过创建不同用户组实现权限隔离：

1. 在"账户管理"创建children组
2. 为该组只分配"儿童影视"和"学习资料"分组
3. 设置组权限为"仅查看"

这样孩子登录后，既看不到管理后台，也无法访问成人内容分区。

5.3 与其它工具集成

通过自定义HTML区块，可以嵌入实用组件：

<!-- 嵌入天气插件 --> <iframe src="https://embed.windy.com/embed.html" width="300" height="200"></iframe> <!-- 待办事项列表 --> <div id="todo-list"> <h3>今日任务</h3> <ul> <li><input type="checkbox"> 备份NAS数据</li> <li><input type="checkbox"> 整理照片库</li> </ul> </div>

6. 常见问题解决方案

6.1 图标加载慢怎么办？

如果遇到图标显示延迟，可以：

1. 在设置中关闭"实时加载在线图标"
2. 将常用图标下载为SVG后上传到本地
3. 修改/app/conf/app.conf中的CDN设置：

[icon] cache_time = 3600 preload_num = 50

6.2 忘记密码如何处理？

如果管理员账户被锁定：

1. 进入容器shell：

docker exec -it sun-panel sh

2. 执行密码重置：

cd /app ./sun-panel --reset-password

3. 按提示输入新密码

6.3 如何备份配置？

重要！定期备份这三个目录：

• /app/conf：所有配置文件
• /app/database：用户数据和导航设置
• /app/uploads：上传的图标和图片

我的自动化备份方案是通过群晖的Hyper Backup，每天凌晨3点同步到Google Drive。