【导航站 UI 换新】放弃了 Sun-Panel，适合自己的才更好

好久没冒泡了，最近折腾了一下自己的 NAS 和服务器的门户页面。之前一直都在用 Sun-Panel 作为导航站，确实挺好用的，功能强大，集成度高，但是用久了总觉得哪里不对劲。

不是说 Sun-Panel 不好，它甚至可以说是目前中文圈子里最好用的导航站之一了。但是，对于我个人现在的使用场景来说，它有点显得过于“重”了。有时候我们想要的仅仅是一个简洁、高效的入口，而不是一个功能繁杂的控制台。

今天就来聊聊为什么我决定放弃 Sun-Panel，以及我是如何找到更适合自己风格的 UI 方案的。如果你也在纠结导航站的选择，或者觉得现在的导航页面太臃肿，希望这篇文章能给你一点新的思路。

🤔 为什么想要换掉 Sun-Panel？

最开始选择 Sun-Panel，是因为它“开箱即用”。你不需要懂太多的前端代码，Docker 一拉，配置文件一改，就能跑起来。而且它支持内网穿透的 WebRTC、Docker 容器管理等功能，看起来非常极客。

但问题往往就出在这里。随着我挂在上面的服务越来越多，Sun-Panel 的加载速度开始让我感到焦虑。尤其是当我仅仅想要快速打开一个 Plex 或 Jellyfin 看剧的时候，还得等那一大堆 widgets（小组件）加载完，心里总觉得别扭。

新导航站 UI 界面

最终实现的轻量化导航站界面

此外，Sun-Panel 的 UI 风格虽然现代，但那种卡片式的布局充斥着整个屏幕，定制化空间虽然有，但要想玩出花样，得去啃它的文档，甚至动手写 CSS。对于一个只是想偶尔改改图标的人门槛有点高。

在决定更换之前，我明确了新导航站的几个核心需求：

带着这些需求，我开始在 GitHub 上寻找替代品。市面上其实有很多优秀的开源导航站，比如 Bookmark Hub、Heimdall 等等。但我这次没有直接照搬现成的项目，而是决定走“半自研”的路线——借鉴优秀的源码，搭积木。

最终，我选择了一个基于 Vue 和 Tailwind CSS 的静态页面模版进行魔改。为什么选这个技术栈？因为生态好，改起来快，而且组件化开发非常适合我这种“想改哪就改哪”的性格。

我去掉了所有复杂的图标动效和天气小组件。首屏保留了最常用的 6-8 个服务的入口，采用大图标设计，适合触屏操作，也适合鼠标点击。背景换成了磨砂玻璃效果，配合自动切换的每日一图（使用 Unsplash Source），既美观又不抢眼。

之前 Sun-Panel 的搜索功能虽然强大，但我其实只用它来搜 Google 或者 Bing。新方案里，我把搜索框做成了核心组件，支持多引擎切换，默认聚焦，一按键盘就能搜，体验非常顺手。

这是我在 Sun-Panel 里最喜欢的功能，所以我把它保留了下来。不过，我换成了更轻量的方案——通过简单的 API 接口调用服务器的状态脚本（Python 写的简易后端），只展示 CPU、内存和 uptime。不再加载沉重的 Docker 镜像列表，毕竟我不需要在导航页管理容器。

这点非常重要。以前的 Sun-Panel 在手机上还能凑合用，但现在的方案我是严格按照“移动优先”的原则设计的。图标自动调整大小，布局在窄屏下自动切换为瀑布流，手指操作起来非常跟手。

当然，折腾过程也不是一帆风顺的。既然是自己魔改，遇到问题只能自己查资料。

坑一：跨域问题 最开始想直接用纯前端去抓取服务器状态，结果浏览器 CORS 策略直接教你做人。后来没办法，只好在 Nginx 反向代理里加了一行 add_header Access-Control-Allow-Origin *;，问题解决。

坑二：图标资源管理 Sun-Panel 有个很好的图标库功能，我自己搞的时候，图标散落在项目的 assets 文件夹里乱七八糟。后来我使用了一个简单的 JSON 文件来管理图标链接（支持 SVG 和图片 URL），这样维护起来就方便多了，只需要改一个配置文件，不用动代码。

折腾了一圈下来，虽然花了不少时间，但看着这个完全符合自己审美的导航页，心里还是挺有成就感的。

放弃 Sun-Panel 并不是因为它不好，而是因为我的需求变了。对于我们这些喜欢折腾的人来说，工具没有最好的，只有最适合当下的。如果你也觉得现在的导航站用着别扭，不妨试试动手改改，哪怕只是换换背景图、调调字体大小，也许都能让心情变好。

好了，今天的分享就到这里。大家如果有什么好用的导航站模版或者配置技巧，欢迎在评论区交流，咱们下期见！