小身材，大视野：Dashlet私有化仪表盘

前言

在数据泛滥的时代，我们真正需要的不是更多的信息，而是清晰、可控、属于自己的视窗。

Dashlet是一个轻量级、完全自托管的仪表盘解决方案——无需依赖第三方云服务，不上传任何数据，只需几十MB内存，即可将你的服务器状态、应用指标、网络流量、日志摘要等关键信息，汇聚于一屏之内。

它小巧如一枚芯片，却能为你打开全局视野；

它沉默运行于本地，却时刻守护你的数字主权。

无论你是开发者、运维工程师，还是注重隐私的个人用户，Dashlet都愿成为你值得信赖的“数字驾驶舱”。

轻装上阵，掌控全局——从Dashlet开始。

image-20260109175305930

1.Dashlet优势是什么？

轻量高效：基于原生 JavaScript 与 SCSS 构建，无重型框架依赖，确保极速加载与流畅运行。
玻璃磨砂美学：采用现代化视觉设计，搭配细腻的动态过渡与交互动画，带来沉浸式用户体验。
配置驱动架构：所有服务与设置均通过 public/config.json 文件集中管理，无需修改代码即可灵活调整。
多主题支持：内置系统自动、深色、浅色三种模式，并支持完全自定义配色方案；用户还可通过 URL 设置个性化背景壁纸。
智能排序机制：支持按名称、URL、描述自动排序，也允许手动拖拽自定义顺序，灵活组织你的服务列表。
直观拖放交互：通过简单的拖放操作，即可实时调整服务图标位置，所见即所得。
清爽布局设计：固定式控制面板与响应式网格布局相结合，界面整洁有序，信息一目了然。
深度自定义能力：支持上传自定义 CSS 与 JavaScript 文件，满足高级用户的个性化与功能扩展需求。

2.前提条件

2.1ssh远程连接到极空间

  • 开启【SSH 服务】
  • 使用终端（Windows PowerShell / Mac Terminal）登录：
ssh root@IP

没有ssh的小伙伴可以参考这篇文章：

连接成功：极空间别再吃灰了！开启SSH，秒变全能服务器！ – cpolar 极点云官网

957c00e3b3f0ce8aa95df96aa41b8715

2.2验证docker是否开启

使用命令：

docker -v 
systemctl status -v

没有docker的小伙伴可以参考这篇文章：极空间开箱实录：从拆箱到远程访问保姆级教程，30分钟上手！ – cpolar 极点云官网

image-20251017103712618

3.安装Portainer

新建文件夹dashlet目录并进入:

 mkdir Dashlet

image-20260109171540538

docker命令安装：

docker run -d \
  --name dashlet \
  --restart unless-stopped \
  -p 8989:8989 \
  -v $(pwd)/data:/app/public \
  ghcr.io/jaberio/dashlet:latest

也可以使用Docker Compose（本文使用）:

services:
  dashlet:
    image: ghcr.io/jaberio/dashlet:latest
    container_name: dashlet
    restart: unless-stopped
    ports:
      - "8989:8989"
    volumes:
      - ./data:/app/public

image-20260109171932407

在浏览器中输入 http://极空间IP:8989 就能看到登录界面：

image-20260109172104789

点击设置，点击导入按键：

image-20260109172312513

image-20260109172328745

点击打开文件，就可以看到如下啦：

image-20260109172420503

image-20260109172427085编辑后，点击导入配置文件：

编辑内容（自定义，仅参考）：

{
  "settings": {
    "theme": "system",
    "appTitle": "Dashlet",
    "greeting": "Welcome",
    "accentColor": "#3b82f6",
    "blur": true,
    "animations": true,
    "openNewTab": true,
    "layout": "list",
    "wallpaper": "",
    "searchProvider": "https://duckduckgo.com/?q=",
    "customCSS": "",
    "disableDragDrop": false,
    "dragDelay": 0,
    "searchEnabled": true,
    "footerText": "Powered by",
    "footerColor": "",
    "sortBy": "manual"
    },
"services": [
  {
    "id": "1",
    "name": "GitHub",
    "description": "Code hosting",
    "url": "https://github.com",
    "icon": "https://github.githubassets.com/favicons/favicon.png"
  },
  {
    "id": "2",
    "name": "YouTube",
    "description": "Watch videos",
    "url": "https://youtube.com",
    "icon": "https://www.youtube.com/s/desktop/10c3d9b4/img/favicon_144x144.png"
  },
  {
    "id": "3",
    "name": "Google",
    "description": "Search engine",
    "url": "https://www.google.com",
    "icon": "https://www.google.com/favicon.ico"
  },
  {
    "id": "4",
    "name": "Gmail",
    "description": "Email service",
    "url": "https://mail.google.com",
    "icon": "https://ssl.gstatic.com/ui/v1/icons/mail/rfr/gmail.ico"
  },
  {
    "id": "5",
    "name": "Notion",
    "description": "All-in-one workspace",
    "url": "https://notion.so",
    "icon": "https://www.notion.so/images/favicon.ico"
  },
  {
    "id": "6",
    "name": "Reddit",
    "description": "Social news & discussion",
    "url": "https://reddit.com",
    "icon": "https://www.redditstatic.com/desktop2x/img/favicon/favicon-32x32.png"
  },
  {
    "id": "7",
    "name": "Twitter / X",
    "description": "Social media",
    "url": "https://twitter.com",
    "icon": "https://abs.twimg.com/favicons/twitter.3.ico"
  },
  {
    "id": "8",
    "name": "Stack Overflow",
    "description": "Developer Q&A",
    "url": "https://stackoverflow.com",
    "icon": "https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico"
  },
  {
    "id": "9",
    "name": "Wikipedia",
    "description": "Free encyclopedia",
    "url": "https://en.wikipedia.org",
    "icon": "https://en.wikipedia.org/static/favicon/wikipedia.ico"
  },
  {
    "id": "10",
    "name": "Netflix",
    "description": "Streaming movies & shows",
    "url": "https://netflix.com",
    "icon": "https://assets.nflxext.com/us/ffe/siteui/common/icons/nficon2016.ico"
  },
  {
    "id": "11",
    "name": "Spotify",
    "description": "Music streaming",
    "url": "https://open.spotify.com",
    "icon": "https://open.scdn.co/cdn/images/favicon32.c6a9e59d8375a83e22c7b79e9b7a3e3d.png"
  },
  {
    "id": "12",
    "name": "Weather",
    "description": "Check local forecast",
    "url": "https://weather.com",
    "icon": "https://weather.com/favicon.ico"
  }
]
}

image-20260109172944936

导入了12个网址：

4bab59c5db909b9bd1010627019c7413

这样，我们就可以整理我们想立刻点击的网址啦！

通过结合cpolar内网穿透服务，Dashlet不仅能在本地网络中使用，还可安全地从外网访问。只需一条命令，即可将你的私有仪表盘暴露到公网，随时随地掌控你的服务状态——无需公网IP，也无需复杂配置。

4.安装cpolar

cpolar 可以将你本地电脑中的服务（如 SSH、Web、数据库）映射到公网。即使你在家里或外出时，也可以通过公网地址连接回本地运行的开发环境。

❤️以下是安装cpolar步骤：

官网在此：https://www.cpolar.com

使用一键脚本安装命令：

sudo curl https://get.cpolar.sh | sh

e464b045413a024674a93ea472511b0f

安装完成后，执行下方命令查看cpolar服务状态：（如图所示即为正常启动）

sudo systemctl status cpolar

aa03713b56d9eef12a4da6b99d2e46ac

Cpolar安装和成功启动服务后，在浏览器上输入虚拟机主机IP加9200端口即:【http://ip:9200】访问Cpolar管理界面，使用Cpolar官网注册的账号登录,登录后即可看到cpolar web 配置界面,接下来在web 界面配置即可：

打开浏览器访问本地9200端口，使用cpolar账户密码登录即可,登录后即可对隧道进行管理。

3af79ad708cc47c5bbea0b63c2c7230d

5.配置公网地址

登录cpolar web UI管理界面后,点击左侧仪表盘的隧道管理——创建隧道：

  • 隧道名称：可自定义，本例使用了:dashlet，注意不要与已有的隧道名称重复
  • 协议：http
  • 本地地址：8989
  • 域名类型：随机域名
  • 地区：选择China Top

image-20260109174156723

创建成功后，打开左侧在线隧道列表,可以看到刚刚通过创建隧道生成了公网地址，接下来就可以在其他电脑或者移动端设备（异地）上，使用地址访问。

image-20260109174658215

访问成功。

image-20260109174745451

6.保留固定公网地址

使用cpolar为其配置二级子域名，该地址为固定地址，不会随机变化。

image-20250918151358733

点击左侧的预留，选择保留二级子域名，地区选择china Top，然后设置一个二级子域名名称，我使用的是dashlet，大家可以自定义。填写备注信息，点击保留。

image-20260109174921149

登录cpolar web UI管理界面，点击左侧仪表盘的隧道管理——隧道列表，找到所要配置的隧道，点击右侧的编辑。

image-20260109175032370

修改隧道信息，将保留成功的二级子域名配置到隧道中

  • 域名类型：选择二级子域名
  • Sub Domain：填写保留成功的二级子域名
  • 地区: China Top

点击更新

image-20260109175004750

更新完成后，打开在线隧道列表，此时可以看到随机的公网地址已经发生变化，地址名称也变成了保留和固定的二级子域名名称。

image-20260109175111712

最后，我们使用固定的公网地址在任意设备的浏览器中访问，可以看到成功访问的页面，这样一个永久不会变化的二级子域名公网网址即设置好了。

image-20260109175142258

总结

Dashlet是一款轻量级、完全自托管的仪表盘工具，基于原生JavaScript和 SCSS构建，资源占用低、加载迅速。它采用玻璃磨砂UI设计，支持主题切换、自定义壁纸、拖拽排序及通过config.json灵活配置服务。无需依赖云服务，数据完全私有，让你在本地即可拥有清晰、高效、个性化的数字控制中心——小身材，大视野。

感谢您对本篇文章的喜爱，有任何问题欢迎留言交流。cpolar官网-安全的内网穿透工具 | 无需公网ip | 远程访问 | 搭建网站

Share:

鸽子

鸽子

我是鸽子，是这个网站的文章编辑之一！喜欢研究各种有趣的开源项目。希望大家喜欢我的文章！

发表回复

目录

On Key

推荐文章