ThingsBoard PE 功能
仅专业版支持White labeling功能。
请使用ThingsBoard Cloud或自行安装平台实例。
白标功能让您可以根据品牌和偏好定制ThingsBoard实例——特别适合向客户提供IoT解决方案的公司。
设置公司或产品名称、上传Logo、选择配色方案、使用自定义菜单或翻译——无需编写代码或重启服务即可完成。
实用视频课程 🎥
观看此实用视频课程，按步骤了解如何个性化IoT平台的外观和体验。
基础与继承
白标配置基于您当前登录的层级：
- 租户级 —— 继承系统品牌，并可为指定租户及其客户覆盖。
- 客户级 —— 继承租户品牌，并可为该客户及其用户自定义UI。
继承关系： System → Tenant → Customer。下级可在其范围内覆盖设置。
自定义ThingsBoard Web界面
请注意：配置白标需要相应的权限。
要配置公司或产品Logo和配色方案，请前往“白标”页面。
在“常规”选项卡中可设置或修改以下选项：
- 应用标题 - 可指定自定义页面标题，显示在浏览器标签页中；
- Favicon（网站图标）- 可将默认网站图标改为您自己的图标；
- Logo - 可将左上角标准Logo替换为公司Logo；
- Logo高度 - 可调整Logo尺寸；
-
白标允许您通过调整主色和强调色板来自定义配色主题，以符合您期望的UI设计。
- 主色板 - 可选择建议的UI设计选项之一或自定义现有选项来设置背景色和字体颜色；
- 强调色板 - 可为部分元素（如开关）自定义颜色；
- 高级CSS - 可按需美化ThingsBoard用户界面的任意元素。更多说明见下文；
- 覆盖Trendz分析插件名称 - 勾选后，分析插件名称将在整个平台中由Trendz覆盖为“高级分析”。
- 显示/隐藏平台名称和版本 - 勾选后，平台名称及当前版本将显示在左下角。
自定义用户界面的最终效果：
高级CSS
使用CSS可按需美化ThingsBoard用户界面的任意元素，如背景、图标、字体等。
在UI设计中使用CSS的步骤：
- Click on the "Advanced CSS" button;
- Paste the CSS code with the style for the user interface into the "Advanced CSS" pop-up window and click "Save". Then save all changes;
- As you can see icons color changed to purple.
自定义图标颜色和滚动条颜色的CSS示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/*icon color*/
.mat-icon.notranslate.material-icons.mat-ligature-font.mat-icon-no-color.ng-star-inserted{
fill: #a60062;
color: #a60062;
}
.mat-icon.notranslate.mat-icon-no-color.ng-star-inserted{
fill: #a60062;
}
/*scroll color*/
mat-toolbar::-webkit-scrollbar-thumb,
div::-webkit-scrollbar-thumb,
ng-component::-webkit-scrollbar-thumb {
background-color: #c526a5 !important;
background-image: linear-gradient(#e72c83, #a742c6);
border-radius: 200px/300px !important;
border: 0.1rem linear-gradient(#e72c83, #a742c6);
}
.mat-mdc-button.mat-mdc-button-base.tb-active{
color: #ffffff;
}
再为左侧菜单添加渐变效果：
- Paste the CSS-code into the "Advanced CSS" window. Do not delete the previously added CSS code to keep the previous color scheme. Save all changes;
- Added a gradient to the left menu color scheme.
自定义侧边栏菜单外观的CSS示例：
1
2
3
4
5
/*menu gradient*/
.tb-side-menu {
background: linear-gradient(44deg, #9d9d9d, #ffffff, #9f9f9f);
}
使用本文档介绍的功能，您可以根据自身偏好自定义ThingsBoard UI的外观。
自定义登录页
在“登录”选项卡中，可为客户配置登录页。
- 输入已注册的域名，或参阅本文档了解如何注册新域名；
- 建议禁用从请求头读取主机名的用法；
- 输入自定义应用标题；
- 将默认网站图标和Logo替换为您自己的；
- 定义主色和强调色板；
- 设置页面背景色。
完成后保存更改。
使用自定义域名访问ThingsBoard Web界面登录页，验证配置结果。
