TBMQ PE功能
仅 TBMQ Professional Edition 支持 White labeling 功能。
概述
白标功能可让您根据品牌与偏好定制TBMQ实例，尤其适用于向客户提供IoT解决方案的企业。
可设置公司或产品名称、上传徽标并选择配色方案。
自定义TBMQ Web界面
进入“白标”页面配置公司或产品徽标及配色方案。
在“通用”标签页中可设置或修改以下选项：
- 应用标题：可自定义在浏览器标签页中显示的页面标题；
- Favicon（网站图标）：可将默认网站图标替换为自有图标；
- 徽标：可将左上角标准徽标替换为公司徽标；
- 徽标高度：可调整徽标尺寸；
-
白标支持通过调整主色与强调色配色以匹配UI设计。
- 主色配色：可从建议的UI设计中选取或自定义背景色与字体颜色；
- 强调色配色：可自定义部分元素颜色，如开关等；
- 高级CSS：可任意样式化TBMQ界面元素。详见下文；
-
显示/隐藏平台名称和版本：勾选后，平台名称及当前版本将显示在左下角。
自定义界面的最终效果：
高级CSS
可通过CSS任意样式化TBMQ界面元素，如背景、图标、字体等。
在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 and the color of the active menu button (White labeling) changed to white.
自定义图标颜色、滚动条颜色及激活按钮的CSS示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/*icon color*/
a.mat-mdc-button.mat-mdc-button-base .mat-icon {
color: #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);
}
/*active button color*/
.mat-mdc-button.mat-mdc-button-base.tb-active{
color: #a60062;
}
利用本文档描述的功能，可按照您的偏好自定义TBMQ界面外观。
自定义登录页
在”登录”标签页中，可配置TBMQ登录页。
- 输入已注册域名，或参阅本文档了解如何注册新域名；
- 建议禁止使用请求头中的主机名；
- 输入自定义应用标题；
- 将默认网站图标和徽标替换为自有图标；
- 定义主色与强调色配色；
- 设置页面背景色。
完成后保存更改。
使用自定义域名访问TBMQ Web界面登录页，验证配置结果。
