企业官网建设流程全解析

• 后端
• 前端
• 物联网
• 工业制造
• 数据可视化
• 时序数据库

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 组件把配置项组织为四个标签页：

1. General（常规）—— 全局行为，如启动视图、缩放、输入弹窗、导航显示等；
2. Navigation Side Menu（导航侧边菜单）—— 左侧菜单项及其样式；
3. Header Navigation Bar（顶部导航栏）—— 顶栏内容与通知按钮样式；
4. Custom Styles（自定义样式）—— 注入自定义 CSS（对应LayoutSettings.customStyles，对话框内嵌 CodeMirror 编辑器，见 layout-property.component.html）。

配置完成后点击 OK，数据通过ProjectService.setLayout()写入项目并同步到服务器存储，见 project.service.ts。

布局数据模型：LayoutSettings 与运行时组件

在深入各标签页之前，先理解布局在代码中的数据结构。FUXA 的 HMI 对象包含一个layout字段，类型为LayoutSettings，定义于 hmi.ts：

export 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 查询参数?viewName=xxx指定启动视图。

• Zoom（缩放）：启用后可用鼠标滚轮缩放视图、按住鼠标左键拖动画布。取值来自ZoomModeType枚举（hmi.ts）：

  取值	语义
  disabled	禁用缩放
  enabled	启用缩放：滚轮缩放 + 左键拖动
  autoresize	视图自适应窗口自动缩放

  enabled模式在运行时通过panzoom库绑定到#home容器，见 home.component.ts；autoresize模式则在 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 color（loginoverlaycolor，取值none/black/white）可设置遮罩颜色，运行时通过backdropClass应用，见 home.component.ts；
  • Connection message（连接错误提示）：layout.show_connection_error，控制是否展示连接失败 toast；
  • GUI Theme：layout.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/image：Material 图标或自定义图片资源；
  • 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 对话框。HeaderItem（hmi.ts）支持三种类型（HeaderItemType）：

  • button：按钮，可配置图标/图片、文本（property.text）、颜色、左右边距（marginLeft/marginRight）与高度；
  • label：文本标签，同样可绑定变量与事件；
  • image：纯图片按钮。

  每个顶栏项还可通过Gauge property按钮（对应 layout-property.component.ts）绑定变量值显示、事件与动作，例如显示某个 Tag 的实时值——运行时由 home.component.ts 的processValueInHeaderItem()处理变量值刷新。

布局设置如何从保存到生效：运行时链路

理解了各标签页的配置项后，再看这些设置如何在实际运行中生效。整个链路如下：

1. 保存：点击 OK 后，LayoutPropertyComponent.onOkClick()会先规范化 Header 高度字段（空值自动删除），再把完整LayoutSettings通过ProjectService.setLayout()持久化，见 layout-property.component.ts 与 project.service.ts。
2. 加载 HMI：运行时首页组件HomeComponent.loadHmi()读取hmi.layout，依次执行：解析启动视图（layout.start）→ 根据hidenavigation决定是否隐藏导航 → 根据navigation.mode初始化侧边菜单（over/push/fix）→ 将header配置克隆给顶栏并加载顶栏项 → 根据zoom初始化缩放 → 根据loginonstart决定是否强制登录，见 home.component.ts。
3. 全局注入：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.layout（hmi.ts），由 Home、Sidenav、Header、FuxaView 等运行时组件协同解析生效，从而为不同角色与场景交付差异化的操作界面。

• 后端
• 前端
• 物联网
• 工业制造
• 数据可视化
• 时序数据库