最近在整理thingsboard课程，基于最新thingsboard版本3.9.1/4.0，欢迎大家收藏、关注我，提问，在评论区留言，我争取把最新、最准、最好的课程，呈现在各位亦师亦友的csdn广大读者面前。
目录
1.增加菜单
（1）菜单解读
在ThingsBoard CE版中，菜单项是固定的，不可配置在数据库，不可动态修改。
在3.9.1版本中，前端菜单的设计特点：
a-解耦设计
菜单配置（menuSectionMap）与权限逻辑分离，便于独立修改。
角色模板（defaultUserMenuMap）支持快速调整菜单结构。
b-动态过滤
结合AuthState实现运行时权限判断（如功能开关、License控制）。
c-国际化支持
name字段使用国际化键（如 'home.home'），不是硬编码文本。
如果要新增菜单需要以下步骤：在 MenuId 中添加枚举；在menuSectionMap中配置属性。在对应角色的MenuReference模板中引用。即可。
详细了解，可以查看相关代码，如下：
在ui-ngx\src\app\core\services\menu.models.ts文件中：
export interface MenuSection {
id: MenuId | string; // 菜单唯一标识（枚举或字符串）
name: string; // 国际化键名（如'home.home'）
type: 'link' | 'toggle'; // 类型：链接或可折叠分组
path: string; // 路由路径（如'/home'）
icon: string; // 图标（Material Icon或自定义）
pages?: MenuSection[]; // 子菜单项
opened?: boolean; // 是否默认展开（toggle类型）
rootOnly?: boolean; // 是否仅根菜单显示
}
export enum MenuId {
home = 'home',
tenants = 'tenants',
// ...（共50+项，覆盖系统所有功能模块）
}在ui-ngx\src\app\core\services\menu.service.ts文件中：
核心方法如下：
private buildMenu() {
this.store.pipe(select(selectAuth), take(1)).subscribe((authState: AuthState) => {
if (authState.authUser) {
// 1. 生成角色对应的菜单树
this.currentMenuSections = buildUserMenu(authState);
// 2. 更新展开状态（基于当前路由）
this.updateOpenedMenuSections();
// 3. 推送菜单数据流
this.menuSections$.next(this.currentMenuSections);
// 4. 生成扁平化菜单（用于快速查询）
const availableMenuSections = this.allMenuSections(this.currentMenuSections);
this.availableMenuSections$.next(availableMenuSections);
// 5. 生成首页分类
const homeSections = buildUserHome(authState, availableMenuSections);
this.homeSections$.next(homeSections);
}
});
}（2）业务需求
根据业务需求，规划增加一些菜单项，如下：
“业务”，“视频中心”，物联卡，“可视化”这四个是本次要新增的菜单项。
菜单规划：
//业务：mybiz，
{
id: 'mybiz',
name: 'mybiz.service',
type: 'toggle',
path: '/mybiz',
icon: 'subject',
pages: [
{
id: 'kanban',
name: 'mybiz.kanban',
type: 'link',
path: '/mybiz/kanban',
icon: 'aspect_ratio'
},
{
id: 'cgw',
name: 'mybiz.cgw',
type: 'link',
path: '/mybiz/cgw',
icon: 'work_outline'
},
{
id: 'schedule',
name: 'mybiz.schedule',
type: 'link',
path: '/mybiz/schedule',
icon: 'schedule'
},
{
id: 'threem',
name: 'mybiz.threem',
type: 'link',
path: '/mybiz/threem',
icon: 'device_hub'
}
]
}
//视频中心：myvideo，
{
id: 'myvideo',
name: 'home.video',
type: 'toggle',
path: '/video',
icon: 'video_call',
pages: [
{
id: 'videolist',
name: 'home.videolist',
type: 'link',
path: '/myvideo/videolist',
icon: 'switch_video'
},
{
id: 'mediaserver',
name: 'home.mediaserver',
type: 'link',
path: '/myvideo/mediaserver',
icon: 'fiber_dvr'
},
{
id: 'sourcechannel',
name: 'home.sourcechannel',
type: 'link',
path: '/myvideo/sourcechannel',
icon: 'videocam'
}
]
}
//物联卡：mycard，
{
id: 'mycard',
name: 'home.card',
type: 'toggle',
path: '/card',
icon: 'phone_android',
pages: [
{
id: 'cardlist',
name: 'home.cardlist',
type: 'link',
path: '/mycard/cardlist',
icon: 'layers'
},
{
id: 'rechargelist',
name: 'home.rechargelist',
type: 'link',
path: '/mycard/rechargelist',
icon: 'payment'
},
{
id: '',
name: 'home.trafficlist',
type: 'link',
path: '/mycard/trafficlist',
icon: 'tune'
}
]
}
//可视化：mydatav，
{
id: 'mydatav',
name: 'home.mydatav',
type: 'toggle',
path: '/mydatav',
icon: 'airplay',
pages: [
{
id: 'dashlist',
name: 'home.dashlist',
type: 'link',
path: '/mydatav/dashlist',
icon: 'web_asset'
},
{
id: 'dashdesign',
name: 'home.dashdesign',
type: 'link',
path: '/mydatav/dashdesign',
icon: 'graphic_eq'
},
{
id: 'scadalist',
name: 'home.scadalist',
type: 'link',
path: '/mydatav/scadalist',
icon: 'list_alt'
},
{
id: 'scadadesign',
name: 'home.scadadesign',
type: 'link',
path: '/mydatav/scadadesign',
icon: 'swap_calls'
}
]
}（3）新增模块mybiz及子模块
执行下面的2个ng命令之后，新建1个mybiz文件夹以及下面6个文件。如下：
ng g module mybiz –routing
ng g c mybiz
进入到mybiz目录，执行下面4个ng命令之后，创建了mybiz的四个子模块。如下：
cd mybiz
ng g c kanban
ng g c cgw
ng g c schedule
ng g c threem
（4）增加菜单项及权限
在menu.models.ts文件中，在MenuId数据结构中增加：
mybiz = 'mybiz',
kanban = 'kanban',
cgw = 'cgw',
schedule = 'schedule',
threem = 'threem'在menu.models.ts文件中，在menuSectionMap数据结构中增加：
[
MenuId.mybiz,
{
id: MenuId.mybiz,
name: 'mybiz.service',
type: 'toggle',
path: '/mybiz',
icon: 'subject'
}
],
[
MenuId.kanban,
{
id: MenuId.kanban,
name: 'mybiz.kanban',
fullName: 'mybiz.kanban',
type: 'link',
path: '/mybiz/kanban',
icon: 'aspect_ratio'
}
],
[
MenuId.cgw,
{
id: MenuId.cgw,
name: 'mybiz.cgw',
fullName: 'mybiz.cgw',
type: 'link',
path: '/mybiz/cgw',
icon: 'work_outline'
}
],
[
MenuId.schedule,
{
id: MenuId.schedule,
name: 'mybiz.schedule',
fullName: 'mybiz.schedule',
type: 'link',
path: '/mybiz/schedule',
icon: 'schedule'
}
],
[
MenuId.threem,
{
id: MenuId.threem,
name: 'mybiz.threem',
fullName: 'mybiz.threem',
type: 'link',
path: '/mybiz/threem',
icon: 'device_hub'
}
]在menu.models.ts文件中，在defaultUserMenuMap数据结构中增加：
比如，在Authority.TENANT_ADMIN数组元素中，
（5）增加国际化语言
在src\assets\locale\ locale.constant-zh_CN.json文件中，增加：
"mybiz": {
"service": "业务",
"kanban": "看板",
"cgw": "采集网关",
"schedule": "定时任务",
"threem": "三维监控"
}在src\assets\locale\locale.constant-en_US.json文件中，增加：
"mybiz": {
"service": "Service",
"kanban": "Kanban",
"cgw": "CollGW",
"schedule": "Schedule",
"threem": "ViMonitor"
}在src\app\modules\home\pages\home-pages.module.ts中添加mybiz模块，如下：
（7）整理mybiz模块内部的菜单路由
（建议参考edge-routing.module.ts文件的路由配置）
在mybiz-routing.module.ts文件中，引入组件，增加：
import { MenuId } from '@core/services/menu.models';
import { Authority } from '@shared/models/authority.enum';
import { KanbanComponent } from '@home/pages/mybiz/kanban/kanban.component';
import { CgwComponent } from '@home/pages/mybiz/cgw/cgw.component';
import { ScheduleComponent } from '@home/pages/mybiz/schedule/schedule.component';
import { ThreemComponent } from '@home/pages/mybiz/threem/threem.component';
在mybiz-routing.module.ts文件中，填充路由，增加：
const routes: Routes = [];
（8）重新编译
在vscode环境下，使用yarn start命令构建，如下：
（9）总结
本次增加菜单的功能，涉及到改动：
在ui-ngx\src\app\modules\home\pages目录下，新建模块。
在ui-ngx\src\app\modules\home\pages\home-pages.module.ts中，添加新的菜单模块。
在ui-ngx\src\app\core\services\menu.models.ts文件中，增加菜单路由。
在ui-ngx\src\app\modules\home\pages\mybizmybiz-routing.module.ts中，增加mybiz内部路由。
修改中文和英语的国际化语言json文件。
扫一扫
721
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
