尧图网页设计 
后端前端物联网工业制造数据可视化时序数据库【免费下载链接】FUXAWeb-based Process Visualization (SCADA/HMI/Dashboard) software项目地址https://gitcode.com/gh_mirrors/fu/FUXA点击查看免费下载FUXA 的 HMI 界面视图、导航、顶栏布局由编辑器中的Layout settings布局设置统一管理。本文以官方文档 HowTo-UI-Layout.md 为骨架结合仓库中布局数据模型与运行时源码完整讲解如何为最终用户配置启动视图、缩放、输入弹窗、导航侧边菜单与顶部导航栏并揭示这些设置从保存到生效的底层实现链路。读完本文你将能够独立完成一套面向终端用户的 HMI 界面框架定制。布局设置的入口编辑器中的 Layout Settings在 FUXA 编辑器中进入Setup设置页面即可找到Layout settings入口它是整个 HMI 外观与交互框架的唯一配置中心配置结果最终保存到项目的hmi.layout对象中。从源码结构看布局设置对话框由 layout-property.component.ts 及其模板 layout-property.component.html 实现它使用 Angular Material 的 Tab 组件把配置项组织为四个标签页General常规—— 全局行为如启动视图、缩放、输入弹窗、导航显示等Navigation Side Menu导航侧边菜单—— 左侧菜单项及其样式Header Navigation Bar顶部导航栏—— 顶栏内容与通知按钮样式Custom Styles自定义样式—— 注入自定义 CSS对应LayoutSettings.customStyles对话框内嵌 CodeMirror 编辑器见 layout-property.component.html。配置完成后点击 OK数据通过ProjectService.setLayout()写入项目并同步到服务器存储见 project.service.ts。布局数据模型LayoutSettings 与运行时组件在深入各标签页之前先理解布局在代码中的数据结构。FUXA 的 HMI 对象包含一个layout字段类型为LayoutSettings定义于 hmi.tsexport class LayoutSettings { autoresize?: boolean false; // 视图自动缩放 start ; // 启动视图首页id navigation: NavigationSettings new NavigationSettings(); // 左侧导航 header: HeaderSettings new HeaderSettings(); // 顶部导航栏 showdev true; // 显示开发按钮Edit/Home/Lab 切换 zoom: ZoomModeType; // 缩放模式 inputdialog false; // 输入控件弹窗模式 hidenavigation false; // 隐藏导航Header 与侧边菜单 theme ; // GUI 主题 loginonstart?: boolean false; // 启动时是否要求登录 loginoverlaycolor?: LoginOverlayColorType; // 登录弹窗遮罩颜色 show_connection_error? true; // 是否显示连接错误提示 customStyles ; // 自定义 CSS }NavigationSettings与HeaderSettings分别承载侧边菜单与顶栏的配置export class NavigationSettings { mode: NaviModeType; // 侧边菜单模式void / push / over / fix type: NaviItemType; // 菜单项展示类型icon / text / block / inline bkcolor #F4F5F7; // 菜单背景色 fgcolor #1D1D1D; // 菜单文字/图标色 items: NaviItem[]; // 菜单项 logo?: boolean false; // 自定义 Logo 资源 } export class HeaderSettings { static readonly DefaultHeight 46; static readonly DefaultButtonHeight 36; title: string; // 顶栏标题 alarms: NotificationModeType; // 告警通知按钮模式 infos: NotificationModeType; // 信息通知按钮模式 bkcolor #ffffff; fgcolor #000000; height HeaderSettings.DefaultHeight; // 顶栏高度默认 46px buttonHeight HeaderSettings.DefaultButtonHeight; // 按钮高度默认 36px fontFamily: string; // 字体 fontSize 13; // 字号 items: HeaderItem[]; // 顶栏自定义按钮/标签/图片 itemsAnchor: AnchorType left; // 顶栏项对齐方式 loginInfo: LoginInfoType; // 登录信息显示 dateTimeDisplay: string; // 日期时间格式 language: LanguageShowModeType; // 语言切换显示模式 }这两个模型的字段几乎与配置对话框中的控件一一对应是下文各标签页配置项的代码注释。General 标签页全局交互行为配置General 标签页集中定义 HMI 的全局行为对应 layout-property.component.html 中的表单项包括Start View启动视图即首页视图用户在浏览器访问http://localhost:1881时首先看到的面。下拉列表列出项目内所有视图按视图 id 存储于layout.start。若未设置编辑器会默认取第一个视图见 editor.component.ts 关联的 editor.component.ts。运行时加载逻辑位于 home.component.ts优先匹配layout.start指定的视图其次回退到第一个视图同时支持通过 URL 查询参数?viewNamexxx指定启动视图。Zoom缩放启用后可用鼠标滚轮缩放视图、按住鼠标左键拖动画布。取值来自ZoomModeType枚举hmi.ts取值语义disabled禁用缩放enabled启用缩放滚轮缩放 左键拖动autoresize视图自适应窗口自动缩放enabled模式在运行时通过panzoom库绑定到#home容器见 home.component.tsautoresize模式则在 fuxa-view.component.ts 中处理。Dialog Mode of input field输入控件弹窗模式启用后点击 Input 值控件时会弹出对话框输入数值而不是直接在画布上编辑。取值来自InputModeType枚举hmi.ts取值语义false禁用弹窗直接在控件上输入true启用弹窗输入keyboard启用弹窗并附带虚拟键盘keyboardFullScreen启用全屏虚拟键盘弹窗运行时逻辑见 fuxa-view.component.ts 与 fuxa-view.component.ts当配置为keyboardFullScreen时触发全屏键盘当配置以keyboard开头且控件为HtmlInputComponent类型时调用 FUXA 自带的触摸键盘组件位于 framework/ngx-touch-keyboard。Show Navigation显示导航通过layout.hidenavigation控制是否隐藏顶部 Header 与侧边菜单。运行时在 home.component.ts 中通过Utils.Boolify(this.hmi.layout.hidenavigation)决定是否渲染导航。Hide development button隐藏开发按钮对应layout.showdev关闭后隐藏 Edit/Home/Lab 切换等开发按钮避免最终用户进入编辑模式。全局生效逻辑见 app.component.ts。此外General 标签还提供以下在文档基础上的扩展配置Login on start启动时登录layout.loginonstart启用后未登录用户打开页面即弹出登录框配合Login overlay colorloginoverlaycolor取值none/black/white可设置遮罩颜色运行时通过backdropClass应用见 home.component.tsConnection message连接错误提示layout.show_connection_error控制是否展示连接失败 toastGUI Themelayout.theme通过ThemeService.setTheme()应用见 header.component.ts 与 project.service.ts。下图展示了配置后的典型最终界面效果顶栏 侧边菜单 视图区Navigation Side Menu 标签页构建左侧导航菜单Navigation Side Menu 标签页用于定义左侧菜单项及样式左侧是所见即所得的菜单预览区支持拖拽、上下移动、删除菜单项右侧是属性配置区见 layout-property.component.html。核心配置项如下Mode侧边菜单模式来自NaviModeType枚举hmi.ts取值语义void不显示侧边菜单push菜单展开时把视图内容向右推over菜单浮在视图之上覆盖模式fix菜单固定停靠始终展开运行时在 home.component.ts 中据此决定 Material Sidenav 的over/push/side模式其中fix模式会在加载后自动打开侧边栏。Type菜单项展示类型来自NaviItemType枚举hmi.ts取值语义icon仅显示图标text仅显示文字block图标与文字纵向块状排列inline图标与文字横向内联排列Menu Background / Foreground color背景色/前景色通过颜色选择器设置navigation.bkcolor与navigation.fgcolor默认分别为#F4F5F7与#1D1D1D支持 Alpha 透明度。Logo自定义 Logo从项目资源images 资源组中选择图片作为菜单头部 Logo对应navigation.logo字段。Menu items菜单项点击预览区的按钮添加菜单项弹出 layout-menu-item-property 对话框每个菜单项NaviItem定义见 hmi.ts可配置text菜单显示文本view点击后跳转的目标视图link跳转的 URL 链接与 view 二选一icon/imageMaterial 图标或自定义图片资源permission/permissionRoles菜单项的角色权限show/enabled两个角色数组用于按用户角色控制可见性与可用性支持为text与inline类型的菜单项配置子菜单children在预览区点击展开/收起运行时的子菜单渲染见 layout-property.component.ts。菜单在运行时由 sidenav.component.ts 渲染通过setLayout()接收布局配置。Header Navigation Bar 标签页定制顶部导航栏Header Navigation Bar 标签页配置顶栏的显示内容与样式左侧为实时预览含告警/信息通知按钮、日期时间、语言切换等右侧为配置项见 layout-property.component.html。文档指出该标签页用于定义是否以及如何显示 Alarms 通知项以及不同的样式属性实际可配置项包括Alarms / Infos告警与信息通知模式来自NotificationModeType枚举hmi.ts取值语义hide隐藏通知按钮fix固定展开通知面板float悬浮式通知面板运行时在 home.component.ts 中把这两个模式赋值给告警/信息面板。Title顶栏标题header.title显示在顶栏的文本。Login info登录信息显示header.loginInfo取值nothing/username/fullname/both控制顶栏显示当前登录用户的哪些信息。Show language语言切换显示header.language取值nothing/simple/key/fullname控制语言切换按钮与当前语言标识的展示形式。Date / Time日期时间header.dateTimeDisplay填入 Angular 日期格式串如yyyy/MM/dd HH:mm:ss顶栏即实时显示当前时间预览区通过 1 秒间隔定时刷新见 layout-property.component.ts实际路径 layout-property.component.ts。Font / Font size字体与字号header.fontFamily与header.fontSize默认 13范围 10–20。Anchor对齐方式header.itemsAnchor取值left/center/right控制顶栏项的水平对齐。Button height / Header height按钮高度/顶栏高度header.buttonHeight默认 36范围 20–100与header.height默认 46范围 32–120。Background / Foreground color背景色/前景色顶栏bkcolor默认#ffffff与fgcolor默认#000000。Header items顶栏自定义项通过添加弹出 layout-header-item-property 对话框。HeaderItemhmi.ts支持三种类型HeaderItemTypebutton按钮可配置图标/图片、文本property.text、颜色、左右边距marginLeft/marginRight与高度label文本标签同样可绑定变量与事件image纯图片按钮。每个顶栏项还可通过Gauge property按钮对应 layout-property.component.ts绑定变量值显示、事件与动作例如显示某个 Tag 的实时值——运行时由 home.component.ts 的processValueInHeaderItem()处理变量值刷新。布局设置如何从保存到生效运行时链路理解了各标签页的配置项后再看这些设置如何在实际运行中生效。整个链路如下保存点击 OK 后LayoutPropertyComponent.onOkClick()会先规范化 Header 高度字段空值自动删除再把完整LayoutSettings通过ProjectService.setLayout()持久化见 layout-property.component.ts 与 project.service.ts。加载 HMI运行时首页组件HomeComponent.loadHmi()读取hmi.layout依次执行解析启动视图layout.start→ 根据hidenavigation决定是否隐藏导航 → 根据navigation.mode初始化侧边菜单over/push/fix→ 将header配置克隆给顶栏并加载顶栏项 → 根据zoom初始化缩放 → 根据loginonstart决定是否强制登录见 home.component.ts。全局注入layout.customStyles作为style标签注入页面layout.showdev false时隐藏开发入口见 app.component.ts。由此可以看出布局设置并非静态外观描述而是贯穿 HMI 启动、导航、输入交互与权限控制的运行时开关且所有字段都有明确的默认值与类型约束见 hmi.ts即使项目文件中缺少某字段也能被安全合并补齐——编辑器打开布局对话框时使用Utils.mergeDeep(new LayoutSettings(), data.layout)保证数据完整性layout-property.component.ts。小结通过编辑器 Setup 中的 Layout settings可以一站式完成 FUXA HMI 的界面框架定制General 标签决定启动视图、缩放与输入弹窗等全局行为Navigation Side Menu 标签构建带权限控制与子菜单的左侧导航Header Navigation Bar 标签定制顶栏标题、通知按钮、日期时间、语言切换与自定义顶栏项Custom Styles 标签则允许注入任意 CSS 深度微调。这些配置最终统一写入hmi.layouthmi.ts由 Home、Sidenav、Header、FuxaView 等运行时组件协同解析生效从而为不同角色与场景交付差异化的操作界面。赞分享后端前端物联网工业制造数据可视化时序数据库【免费下载链接】FUXAWeb-based Process Visualization (SCADA/HMI/Dashboard) software项目地址https://gitcode.com/gh_mirrors/fu/FUXA点击查看免费下载相关推荐ng-zorro-antd 实战用 Layout 组件搭建「顶部导航 侧边栏」的 Header-Sider 页面布局ng zorro antd 实战用 Layout 组件搭建「顶部导航 侧边栏」的 Header Sider 页面布局 本文以 ng zorro antdUI组件前端Simple-Salesforce Bulk 2.0新特性解析为什么它比V1快10倍Simple Salesforce Bulk 2.0新特性解析为什么它比V1快10倍 Simple Salesforce是一款专为Python开发者设计的Sa后端开发工具Ant Design 顶部导航 侧边栏布局实战用 Layout 组件搭建展示类网站骨架Ant Design 顶部导航 侧边栏布局实战用 Layout 组件搭建展示类网站骨架 本指南围绕 Ant Design Layout 组件中最具代表性的前端UI组件设计系统上一篇如何3分钟完成foobar2000美化终极DUI主题定制指南下一篇Betaflight 2025.12 硬件测试终极指南温度与电压应力测试完整解析创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 FUXA 界面布局（UI Layout）配置完全指南：从 Layout Settings 到导航侧边菜单与顶部导航栏
后端前端物联网工业制造数据可视化时序数据库【免费下载链接】FUXAWeb-based Process Visualization (SCADA/HMI/Dashboard) software项目地址https://gitcode.com/gh_mirrors/fu/FUXA点击查看免费下载FUXA 的 HMI 界面视图、导航、顶栏布局由编辑器中的Layout settings布局设置统一管理。本文以官方文档 HowTo-UI-Layout.md 为骨架结合仓库中布局数据模型与运行时源码完整讲解如何为最终用户配置启动视图、缩放、输入弹窗、导航侧边菜单与顶部导航栏并揭示这些设置从保存到生效的底层实现链路。读完本文你将能够独立完成一套面向终端用户的 HMI 界面框架定制。布局设置的入口编辑器中的 Layout Settings在 FUXA 编辑器中进入Setup设置页面即可找到Layout settings入口它是整个 HMI 外观与交互框架的唯一配置中心配置结果最终保存到项目的hmi.layout对象中。从源码结构看布局设置对话框由 layout-property.component.ts 及其模板 layout-property.component.html 实现它使用 Angular Material 的 Tab 组件把配置项组织为四个标签页General常规—— 全局行为如启动视图、缩放、输入弹窗、导航显示等Navigation Side Menu导航侧边菜单—— 左侧菜单项及其样式Header Navigation Bar顶部导航栏—— 顶栏内容与通知按钮样式Custom Styles自定义样式—— 注入自定义 CSS对应LayoutSettings.customStyles对话框内嵌 CodeMirror 编辑器见 layout-property.component.html。配置完成后点击 OK数据通过ProjectService.setLayout()写入项目并同步到服务器存储见 project.service.ts。布局数据模型LayoutSettings 与运行时组件在深入各标签页之前先理解布局在代码中的数据结构。FUXA 的 HMI 对象包含一个layout字段类型为LayoutSettings定义于 hmi.tsexport class LayoutSettings { autoresize?: boolean false; // 视图自动缩放 start ; // 启动视图首页id navigation: NavigationSettings new NavigationSettings(); // 左侧导航 header: HeaderSettings new HeaderSettings(); // 顶部导航栏 showdev true; // 显示开发按钮Edit/Home/Lab 切换 zoom: ZoomModeType; // 缩放模式 inputdialog false; // 输入控件弹窗模式 hidenavigation false; // 隐藏导航Header 与侧边菜单 theme ; // GUI 主题 loginonstart?: boolean false; // 启动时是否要求登录 loginoverlaycolor?: LoginOverlayColorType; // 登录弹窗遮罩颜色 show_connection_error? true; // 是否显示连接错误提示 customStyles ; // 自定义 CSS }NavigationSettings与HeaderSettings分别承载侧边菜单与顶栏的配置export class NavigationSettings { mode: NaviModeType; // 侧边菜单模式void / push / over / fix type: NaviItemType; // 菜单项展示类型icon / text / block / inline bkcolor #F4F5F7; // 菜单背景色 fgcolor #1D1D1D; // 菜单文字/图标色 items: NaviItem[]; // 菜单项 logo?: boolean false; // 自定义 Logo 资源 } export class HeaderSettings { static readonly DefaultHeight 46; static readonly DefaultButtonHeight 36; title: string; // 顶栏标题 alarms: NotificationModeType; // 告警通知按钮模式 infos: NotificationModeType; // 信息通知按钮模式 bkcolor #ffffff; fgcolor #000000; height HeaderSettings.DefaultHeight; // 顶栏高度默认 46px buttonHeight HeaderSettings.DefaultButtonHeight; // 按钮高度默认 36px fontFamily: string; // 字体 fontSize 13; // 字号 items: HeaderItem[]; // 顶栏自定义按钮/标签/图片 itemsAnchor: AnchorType left; // 顶栏项对齐方式 loginInfo: LoginInfoType; // 登录信息显示 dateTimeDisplay: string; // 日期时间格式 language: LanguageShowModeType; // 语言切换显示模式 }这两个模型的字段几乎与配置对话框中的控件一一对应是下文各标签页配置项的代码注释。General 标签页全局交互行为配置General 标签页集中定义 HMI 的全局行为对应 layout-property.component.html 中的表单项包括Start View启动视图即首页视图用户在浏览器访问http://localhost:1881时首先看到的面。下拉列表列出项目内所有视图按视图 id 存储于layout.start。若未设置编辑器会默认取第一个视图见 editor.component.ts 关联的 editor.component.ts。运行时加载逻辑位于 home.component.ts优先匹配layout.start指定的视图其次回退到第一个视图同时支持通过 URL 查询参数?viewNamexxx指定启动视图。Zoom缩放启用后可用鼠标滚轮缩放视图、按住鼠标左键拖动画布。取值来自ZoomModeType枚举hmi.ts取值语义disabled禁用缩放enabled启用缩放滚轮缩放 左键拖动autoresize视图自适应窗口自动缩放enabled模式在运行时通过panzoom库绑定到#home容器见 home.component.tsautoresize模式则在 fuxa-view.component.ts 中处理。Dialog Mode of input field输入控件弹窗模式启用后点击 Input 值控件时会弹出对话框输入数值而不是直接在画布上编辑。取值来自InputModeType枚举hmi.ts取值语义false禁用弹窗直接在控件上输入true启用弹窗输入keyboard启用弹窗并附带虚拟键盘keyboardFullScreen启用全屏虚拟键盘弹窗运行时逻辑见 fuxa-view.component.ts 与 fuxa-view.component.ts当配置为keyboardFullScreen时触发全屏键盘当配置以keyboard开头且控件为HtmlInputComponent类型时调用 FUXA 自带的触摸键盘组件位于 framework/ngx-touch-keyboard。Show Navigation显示导航通过layout.hidenavigation控制是否隐藏顶部 Header 与侧边菜单。运行时在 home.component.ts 中通过Utils.Boolify(this.hmi.layout.hidenavigation)决定是否渲染导航。Hide development button隐藏开发按钮对应layout.showdev关闭后隐藏 Edit/Home/Lab 切换等开发按钮避免最终用户进入编辑模式。全局生效逻辑见 app.component.ts。此外General 标签还提供以下在文档基础上的扩展配置Login on start启动时登录layout.loginonstart启用后未登录用户打开页面即弹出登录框配合Login overlay colorloginoverlaycolor取值none/black/white可设置遮罩颜色运行时通过backdropClass应用见 home.component.tsConnection message连接错误提示layout.show_connection_error控制是否展示连接失败 toastGUI Themelayout.theme通过ThemeService.setTheme()应用见 header.component.ts 与 project.service.ts。下图展示了配置后的典型最终界面效果顶栏 侧边菜单 视图区Navigation Side Menu 标签页构建左侧导航菜单Navigation Side Menu 标签页用于定义左侧菜单项及样式左侧是所见即所得的菜单预览区支持拖拽、上下移动、删除菜单项右侧是属性配置区见 layout-property.component.html。核心配置项如下Mode侧边菜单模式来自NaviModeType枚举hmi.ts取值语义void不显示侧边菜单push菜单展开时把视图内容向右推over菜单浮在视图之上覆盖模式fix菜单固定停靠始终展开运行时在 home.component.ts 中据此决定 Material Sidenav 的over/push/side模式其中fix模式会在加载后自动打开侧边栏。Type菜单项展示类型来自NaviItemType枚举hmi.ts取值语义icon仅显示图标text仅显示文字block图标与文字纵向块状排列inline图标与文字横向内联排列Menu Background / Foreground color背景色/前景色通过颜色选择器设置navigation.bkcolor与navigation.fgcolor默认分别为#F4F5F7与#1D1D1D支持 Alpha 透明度。Logo自定义 Logo从项目资源images 资源组中选择图片作为菜单头部 Logo对应navigation.logo字段。Menu items菜单项点击预览区的按钮添加菜单项弹出 layout-menu-item-property 对话框每个菜单项NaviItem定义见 hmi.ts可配置text菜单显示文本view点击后跳转的目标视图link跳转的 URL 链接与 view 二选一icon/imageMaterial 图标或自定义图片资源permission/permissionRoles菜单项的角色权限show/enabled两个角色数组用于按用户角色控制可见性与可用性支持为text与inline类型的菜单项配置子菜单children在预览区点击展开/收起运行时的子菜单渲染见 layout-property.component.ts。菜单在运行时由 sidenav.component.ts 渲染通过setLayout()接收布局配置。Header Navigation Bar 标签页定制顶部导航栏Header Navigation Bar 标签页配置顶栏的显示内容与样式左侧为实时预览含告警/信息通知按钮、日期时间、语言切换等右侧为配置项见 layout-property.component.html。文档指出该标签页用于定义是否以及如何显示 Alarms 通知项以及不同的样式属性实际可配置项包括Alarms / Infos告警与信息通知模式来自NotificationModeType枚举hmi.ts取值语义hide隐藏通知按钮fix固定展开通知面板float悬浮式通知面板运行时在 home.component.ts 中把这两个模式赋值给告警/信息面板。Title顶栏标题header.title显示在顶栏的文本。Login info登录信息显示header.loginInfo取值nothing/username/fullname/both控制顶栏显示当前登录用户的哪些信息。Show language语言切换显示header.language取值nothing/simple/key/fullname控制语言切换按钮与当前语言标识的展示形式。Date / Time日期时间header.dateTimeDisplay填入 Angular 日期格式串如yyyy/MM/dd HH:mm:ss顶栏即实时显示当前时间预览区通过 1 秒间隔定时刷新见 layout-property.component.ts实际路径 layout-property.component.ts。Font / Font size字体与字号header.fontFamily与header.fontSize默认 13范围 10–20。Anchor对齐方式header.itemsAnchor取值left/center/right控制顶栏项的水平对齐。Button height / Header height按钮高度/顶栏高度header.buttonHeight默认 36范围 20–100与header.height默认 46范围 32–120。Background / Foreground color背景色/前景色顶栏bkcolor默认#ffffff与fgcolor默认#000000。Header items顶栏自定义项通过添加弹出 layout-header-item-property 对话框。HeaderItemhmi.ts支持三种类型HeaderItemTypebutton按钮可配置图标/图片、文本property.text、颜色、左右边距marginLeft/marginRight与高度label文本标签同样可绑定变量与事件image纯图片按钮。每个顶栏项还可通过Gauge property按钮对应 layout-property.component.ts绑定变量值显示、事件与动作例如显示某个 Tag 的实时值——运行时由 home.component.ts 的processValueInHeaderItem()处理变量值刷新。布局设置如何从保存到生效运行时链路理解了各标签页的配置项后再看这些设置如何在实际运行中生效。整个链路如下保存点击 OK 后LayoutPropertyComponent.onOkClick()会先规范化 Header 高度字段空值自动删除再把完整LayoutSettings通过ProjectService.setLayout()持久化见 layout-property.component.ts 与 project.service.ts。加载 HMI运行时首页组件HomeComponent.loadHmi()读取hmi.layout依次执行解析启动视图layout.start→ 根据hidenavigation决定是否隐藏导航 → 根据navigation.mode初始化侧边菜单over/push/fix→ 将header配置克隆给顶栏并加载顶栏项 → 根据zoom初始化缩放 → 根据loginonstart决定是否强制登录见 home.component.ts。全局注入layout.customStyles作为style标签注入页面layout.showdev false时隐藏开发入口见 app.component.ts。由此可以看出布局设置并非静态外观描述而是贯穿 HMI 启动、导航、输入交互与权限控制的运行时开关且所有字段都有明确的默认值与类型约束见 hmi.ts即使项目文件中缺少某字段也能被安全合并补齐——编辑器打开布局对话框时使用Utils.mergeDeep(new LayoutSettings(), data.layout)保证数据完整性layout-property.component.ts。小结通过编辑器 Setup 中的 Layout settings可以一站式完成 FUXA HMI 的界面框架定制General 标签决定启动视图、缩放与输入弹窗等全局行为Navigation Side Menu 标签构建带权限控制与子菜单的左侧导航Header Navigation Bar 标签定制顶栏标题、通知按钮、日期时间、语言切换与自定义顶栏项Custom Styles 标签则允许注入任意 CSS 深度微调。这些配置最终统一写入hmi.layouthmi.ts由 Home、Sidenav、Header、FuxaView 等运行时组件协同解析生效从而为不同角色与场景交付差异化的操作界面。赞分享后端前端物联网工业制造数据可视化时序数据库【免费下载链接】FUXAWeb-based Process Visualization (SCADA/HMI/Dashboard) software项目地址https://gitcode.com/gh_mirrors/fu/FUXA点击查看免费下载相关推荐ng-zorro-antd 实战用 Layout 组件搭建「顶部导航 侧边栏」的 Header-Sider 页面布局ng zorro antd 实战用 Layout 组件搭建「顶部导航 侧边栏」的 Header Sider 页面布局 本文以 ng zorro antdUI组件前端Simple-Salesforce Bulk 2.0新特性解析为什么它比V1快10倍Simple Salesforce Bulk 2.0新特性解析为什么它比V1快10倍 Simple Salesforce是一款专为Python开发者设计的Sa后端开发工具Ant Design 顶部导航 侧边栏布局实战用 Layout 组件搭建展示类网站骨架Ant Design 顶部导航 侧边栏布局实战用 Layout 组件搭建展示类网站骨架 本指南围绕 Ant Design Layout 组件中最具代表性的前端UI组件设计系统上一篇如何3分钟完成foobar2000美化终极DUI主题定制指南下一篇Betaflight 2025.12 硬件测试终极指南温度与电压应力测试完整解析创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考