当前位置: 首页 > 工具软件 > ngx-ui > 使用案例 >

Thingsboard 3.1.0 - UI修改

鲍向笛
2023-12-01

一、修改logo

制作自己logo,格式为.svg,可参考原logo。

  1. 复制到tingsboard源码ui-ngx\src\assets目录下
    找到源码ui-ngx\src\app\shared\components\logo.component.ts文件
    修改logo = require(新logo地址).default;

  2. 找到源码ui-ngx\src\app\modules\home\home.component.ts文件
    修改logo = require(新logo地址).default;

二、修改titile和默认语言

  1. 找到源码ui-ngx\src\environments\environment.ts和environment.prod.ts文件
    修改appTitle = 标题名称
    修改defaultLang = 默认语言

  2. 找到源码ui-ngx\src\index.html文件
    修改title = 标题名称

三、修改浏览器图标

  1. 找到源码ui-ngx\src\thingsboard.ico文件
    替换thingsboard.ico

四、修改主题颜色

找到源码ui-ngx\src\theme.scss文件

  1. 修改$tb-primary-color: 主颜色
  2. 修改$tb-secondary-color: 副颜色
  3. 修改$tb-hue3-color:

五、删除仪表板右下角文字

  1. 找到ui-ngx\src\app\modules\home\pages\dashboard\dashboard-page.component.html文件
    搜索Powered by,注释掉整行。

六、删除页面的帮助问号?

  1. 找到文件:ui-ngx\src\app\shared\components\help.component.html
    注释button源码

七、重新编译,运行

  1. 编译后生成thingsboard-windows.zip,把zip中的\lib\thingsboard-3.1.0.jar解压。注意大小大约150M,实际上是springBoot的jar包。

  2. 停止运行中的thingsboard,替换\lib\thingsboard-3.1.0.jar,重新启动即可。

 类似资料: