ThingsBoard UI 组件库开发实战把仓库跑起来再动手改一个组件【免费下载链接】thingsboardOpen-source IoT Platform - Device management, data collection, processing and visualization.项目地址: https://gitcode.com/GitHub_Trending/th/thingsboard要给 ThingsBoard 的设备列表页塞一枚自定义状态徽章动手之前先得认清两件事前端全部代码在ui-ngx/这一个 Angular 20 工程里UI 组件又散落在 ui-ngx/src/app/shared/components/ 等目录中找错位置会浪费一整天。下面按“工程怎么跑、样式怎么控、组件怎么复用”三块拆开每块给一个能直接验证的操作。骨架层yarn 两条命令拉起组件工程目录按 core / shared / modules 分层本地跑起 ThingsBoard 前端组件工程只需两条命令git clone https://gitcode.com/GitHub_Trending/th/thingsboard cd thingsboard/ui-ngx yarn install依赖装完后启动开发服务ng serve会开热更新yarn start # 等价于 ng serve--configuration development端口 0.0.0.0工程骨架分三层改代码前先记住各自职责core/放 HTTP、鉴权、路由守卫shared/放可复用的 UI 组件、指令、模型与工具modules/放设备、仪表盘等页面级业务。注意一个容易踩反的点——shared 里的组件不是靠各自独立的 Module 文件对外暴露的而是由 ui-ngx/src/app/shared/components/public-api.ts 这个桶文件统一导出别的模块importshared 的 public-api 就能拿到全部组件所以新增组件后记得在桶文件里补一行export。皮肤层主题变量集中在 theme.scss改一个变量全局生效骨架跑通后样式体系决定了你改一处能影响多少页面。入口是 ui-ngx/src/styles.scss主题变量集中在 ui-ngx/src/theme.scss可复用的 SCSS 混入放在 ui-ngx/src/scss/mixins.scss、constants.scss、fonts.scss。组件自己的.component.scss里直接use引用这些变量与混入即可颜色、字号、圆角统一走变量改一个$前缀的值全站生效不必逐组件微调。另外 Tailwind 已接入工程模板里可以直接写工具类处理间距与布局如classp-4与 SCSS 变量并存结构性样式走变量一次性布局走工具类。行为层输入属性加内容投影就是组件对外 API 的全部样式定稿后组件“怎么被复用”由 API 决定而这里其实只有两件事输入属性Input()与内容投影ng-content调用方往标签里塞的子模板。翻任何现成组件的.ts看Input()列表、看.html里ng-content的位置十分钟就能推断它支持什么用法。新组件照这个模式写.ts只声明输入.html只留投影位行为层就稳定了。过测试、避坑lint、spec 与三个高频问题组件写完后按最小闭环验收ng lint干净、同级目录.spec.ts单测通过、yarn start起服务目测三步齐了才谈合并yarn lint ng test三个高频问题提前说明。其一工程用patch-package维护第三方依赖补丁ui-ngx/patches/里的补丁文件在每次yarn install时自动打上删掉或改动依赖版本都会让运行期行为发生偏差其二echarts、flot等依赖直接指向外部 git 仓库离线环境装不上需要代理或镜像其三ng test默认要拉起真实 ChromeCI 或无图形界面环境会卡住先配好 headless 浏览器再跑。下一步清单在 ui-ngx/src/app/shared/components/ 下ng g c 徽章组件名生成骨架加一个Input() status模板里写徽章节点组件加 OnPush 变更检测依赖变化才刷新该组件父组件是 OnPush 时内部更新要手动markForCheck()否则界面不刷新public-api.ts补一行导出ng lintng test双绿后在本地页面目测。参考资源ui-ngx/src/assets/help/en_US/下的产品帮助文档tailwind.config.js的 Tailwind 扫描配置ui-ngx/patches/的第三方补丁清单ui-ngx/src/theme.scss主题变量总表。【免费下载链接】thingsboardOpen-source IoT Platform - Device management, data collection, processing and visualization.项目地址: https://gitcode.com/GitHub_Trending/th/thingsboard创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考