ThingsBoard移动端界面菜单栏自定义优化指南

在ThingsBoard物联网平台3.9.1 PE版本中，用户经常需要针对移动端界面进行个性化调整。本文重点探讨如何优化移动设备上的用户界面，特别是隐藏或移除通知和安全菜单项的方法。

移动端界面现状分析

ThingsBoard默认界面在移动设备上会显示完整的菜单栏，包括通知和安全等选项。这些菜单项虽然重要，但在某些特定业务场景下可能显得冗余，特别是当：

• 移动端用户只需要核心功能
• 系统管理员希望简化界面
• 特定用户角色不需要这些功能

技术实现方案

方案一：基于权限控制的全局隐藏

通过调整用户组角色配置，可以全局隐藏这些菜单项：

1. 进入系统管理控制台
2. 导航至用户组角色设置
3. 修改相应角色的Profile权限
4. 移除"通知管理"和"安全设置"相关权限

此方案会同时影响桌面和移动端界面，适合需要统一简化界面的场景。

方案二：响应式CSS定制方案

针对仅需在移动端隐藏的需求，可采用CSS媒体查询技术：

@media (max-width: 768px) {
  .mat-tab-link[href*="/notifications"],
  .mat-tab-link[href*="/security"] {
    display: none !important;
  }
}

实现步骤：

1. 定位ThingsBoard前端资源目录
2. 创建或修改自定义CSS文件
3. 添加上述媒体查询规则
4. 确保CSS文件被正确加载

技术细节说明

1. 断点选择：768px是常见的移动设备分界点，可根据实际设备调整
2. 选择器优化：使用属性选择器确保准确匹配目标菜单项
3. 优先级处理：!important确保覆盖默认样式
4. 兼容性考虑：测试不同移动浏览器的渲染效果

实施建议

1. 测试环境验证：先在测试实例验证效果
2. 渐进式调整：从隐藏单个菜单开始
3. 用户反馈收集：确保调整不影响核心业务流程
4. 文档更新：记录自定义修改内容

注意事项

1. 修改前备份原始文件
2. 考虑升级兼容性，自定义修改可能在版本升级时被覆盖
3. 对于PE版本，可考虑联系官方支持获取更优雅的解决方案
4. 确保修改符合企业安全策略和合规要求

通过以上方法，ThingsBoard管理员可以灵活控制移动端界面元素，打造更符合业务需求的用户界面。