设计器2024.1+

驾驶舱设计器，用于设计驾驶舱页面，可将我的看板内发布的看板进行展示和操作，也可外链其他页面。

界面介绍

序号	名称	说明
①	工具栏	位于界面最上方，左侧名称编辑和返回，右侧为驾驶舱发布历史、保存、发布功能；工具栏中心为用户提供设备模拟效果，单击可切换到 PC 端和移动端。
②	页面设置	位于界面左侧，可对驾驶舱整体风格、主题颜色、Logo&标题以及位置、背景颜色、PC 导航模式、移动端导航模式、顶部/底部导航模式、顶部面板、侧边面板、内容区域进行设置。
③	导航树	位于界面右侧，可搜索导航、新建导航、删除导航、设置主页、导航属性设置、导航权限【仅在团队中显示】设置等。
④	画布	位于界面中心位置，该区域是对页面设置与导航树属性进行解析渲染。

工具栏

• 1、返回： 单击此按钮可退出驾驶舱设计器。

  提示：

  注意点： 编辑驾驶舱数据未保存直接退出会有未保存提示。

• 2、驾驶舱名称： 单击文字可对驾驶舱名称进行编辑。

  提示：

  注意点： 驾驶舱名称不允许清空。鼠标点击名称当将驾驶舱名称清空，鼠标失去焦点，此时驾驶舱名称将自动补全为修改前的状态。

• 3、PC 模式： 单击此按钮可将画布区域切换至 PC 端设计效果。
• 4、移动端模式： 单击此按钮可将画布区域切换至移动端设计效果。
• 5、发布历史： 单击此按钮可打开弹窗，弹窗显示驾驶舱发布历史信息。
• 6、保存： 单击此按钮可保存驾驶舱数据。

  提示：

  注意点： 通过新建进入驾驶舱以或修改驾驶舱内数据则允许单击保存，通过已创建驾驶舱进入，未编辑驾驶舱内数据则不允许单击保存。

• 7、发布： 单击此按钮打开发布弹窗，可设置访问设置，单击确定即可发布。

  提示：

  注意点： 通过新建进入驾驶舱未单击保存则不允许发布，当单击保存后则允许发布。如果驾驶舱内数据有修改未点击保存则不允许发布。

• 8、画布分辨率： 单击下拉可切换不同分辨率，用于查看画布在该分辨率下真实的效果,支持百分比和自适应选项。
• 9、仿真： 单击可模拟在真机下的展示效果。

  提示：

  注意点： 自适应分辨率模式下不支持仿真效果。

页面设置

对画布区域整体效果进行设置，具体可设置参数属性有：整体风格、主题颜色、Logo&标题、背景颜色、导航风格、PC端导航模式、移动端导航模式、顶部/底部导航选中模式、顶部面板、侧边面板、内容区域。

整体风格

页面设置整体风格可选项有浅色、暗色两种模式。

• 浅色：页面整体为浅色模式，导航栏为浅色模式。

• 暗色：页面整体为暗色模式，导航栏为暗色模式。

主题颜色

页面用于设置画布区域主题颜色，支持用户自定义颜色的设置，当前颜色可控制画布内导航选中激活效果，也可作为导航风格的主题色。

• 切换主题：默认提供 7 个主题可供选择，切换效果如下。
• 自定义主题：支持用户自定义主题颜色设置。

Logo&标题

画布区域内 Logo 和标题的控制。

• 显示标题：控制驾驶舱标题显示。

• 替换 Logo: 单击图片可打开素材库弹窗，素材库弹窗支持创建文件夹和上传 Logo。

  • Logo 显示：选中弹窗素材库内图片资源，点击确定即可替换显示当前 Logo 资源。
  • Logo 不显示：弹窗选中的图片再次单击即可取消选中状态，在取消选中状态下，单击确定按钮可去掉 Logo 资源，此时 Logo 将不显示。

• Logo&标题位置：画布区域 Logo 和标题显示位置可选择项侧边面板、顶部面板两种模式。

  提示：

  注意点： 当 PC 端导航模式为：顶部时，按钮侧边面板不可选中。

  • 侧边面板：侧边面板，Logo 显示在侧边，标题显示在侧边。
  • 顶部面板：顶部面板，Logo 显示在顶部，标题显示在顶部。
  • Logo 不支持设置大小，Logo 显示大小由本身宽高以及 Logo 所在位置决定。当 Logo 选择为顶部面板：Logo 以顶部面板高限制 Logo 高度并以高度等比例显示 Logo，当 Logo 选择为侧边面板：Logo 以侧边宽限制 Logo 宽度并以宽度等比例显示 Logo，Logo 宽小于侧边最大宽度，取 Logo 自身宽度显示，Logo 宽大于侧边内宽度，取侧边宽度为宽等比例显示 Logo。

  提示：

  注意点： 素材设计人员可参考如下。

  • Logo 为顶部素材：Logo 素材最大高度：32px，宽度无限制。
  • Logo 为侧边素材：Logo 素材最大宽度：224px, 高度无限制。

背景颜色

画布内容区域背景颜色设置。

导航风格

画布区域顶部面板、侧边面板、底部面板导航风格控制，可选项有浅色、暗色、主题色三种模式。

提示：

注意点： 样式优先级高于整体风格，当整体风格为：暗色时，按钮浅色不可选中。

PC 端导航模式

画布区域导航显示的位置，见画布，侧边：导航显示在侧边面板、顶部：导航显示在顶部面板、混合：导航显示在侧边和顶部两块区域。

提示：

注意点： 设计器模式选择为 PC 端，此处设置才可在画布区域看到效果。

• 混合模式 Logo&标题：侧边面板选中，则侧边显示所有一级导航目录，顶部面板则显示侧边激活导航的下级所有子导航 。
• 混合模式 Logo&标题：顶部面板选中，则顶部显示所有一级导航目录，侧边面板则显示顶部激活导航的下级所有子导航 。

移动端导航模式

画布区域导航显示的位置，见画布，顶部：导航显示在顶部面板、底部：导航显示在底部面板、抽屉：导航显示在侧边面板。

提示：

注意点： 设计器模式选择为移动端，此处设置才可在画布区域看到效果。

• 底部模式：当一级导航树数量大于 4 个时，底部按钮名称最多显示 4 个文字，超出文字将省略显示，超出的导航将在【更多】下呈现。

顶部/底部导航选中模式

画布区域有导航显示在顶部/底部时，导航激活效果将采用以下设置。可选项选中文字、字+线、选中块三种模式。

提示：

注意点： 导航模式为顶部或底部选中，并激活一个导航，此处设置才可在画布区域看到效果。

• 选中文字：激活导航只有文字高亮。
• 字 + 线：激活导航文字高亮，文字有下/上滑线。
• 选中块： 导航背景块颜色高亮。

顶部面板

对顶部面板位置样式控制，当画布内容区域出现滚动条时，此处可对顶部面板设置如下效果。

提示：

注意点： 画布区域有顶部面板显示，此处设置才可在画布区域看到效果。移动端底部模式无此效果。

• 固定：开启时，顶部面板位置不跟随鼠标滑动而滑动。关闭时：将跟随鼠标上/下滑而移动，具体鼠标下滑多少 px 才跟随鼠标移动取决于滚动显示模式配置的数值，未开启【滚动显示模式】，顶部面板将会直接跟随鼠标滑动而滑动， 开启【滚动显示模式】默认阈值为 250px，需要下滑像素大于 250px 才开始触发跟随鼠标移动。
• 滚动显示模式： 开启时： 可设置触发滑动阈值，默认 250px，即鼠标下滑大于 250px 顶部菜单才触发滑动效果，该效果生效前置条件为，顶部面板固定：未开启。
• 分割样式：画布顶部面板和内容区域的分割线，可选择无、边框、阴影。

侧边面板

对侧边面板位置样式控制。

提示：

注意点： 画布区域有侧边面板显示，并且侧边面板为展开状态，此处设置才可在画布区域看到效果。

• 固定：开启时：侧边面板不跟随鼠标滑动而滑动，关闭时：侧边面板将跟随鼠标移动而移动，移动的前置条件时侧边面板是展开状态。
• 分割样式：画布侧边面板和内容区域的分割线，可选择无、边框、阴影。

内容区域

画布内容区域布局方式。

提示：

注意点： 画布内容区域需要有页面渲染，此处设置才可在画布区域看到效果。

• 流式：占用整个内容区域。
• 固定：内容区域固定宽度，高度自适应。

导航树

对导航树内，导航节点、导航属性、导航权限进行设置

导航节点

对导航树内导航节点功能的操作。

• 1、添加导航： 单击可新增导航。
• 2、搜索导航： 单击在搜索框根据导航名称快速查找。
• 3、展开/收起所有导航： 单击可将所有导航进行统一展开和收起。
• 4、添加子导航： 单击在指定导航下新增子导航。
• 5、设置为主页： 单击可将导航设置为主页，发布预览时设置为主页的导航将默认激活。
• 6、删除导航： 单击删除指定的导航。

导航属性设置

对导航树内选中导航节点进行设置。

• 1、菜单名称： 设置选中导航名称。

• 2、菜单图标： 设置选中导航图标。

• 3、链接类型： 下拉选择导航链接类型，看板、外链两种模式。

• 4、链接看板/地址： 链接类型选中看板，此处可选择指定看板。链接类型选中外链，此处可输入外链地址。

  提示：

  注意点： 单击导航显示配置的导航资源。

  • 当前导航下无子节点：按照打开方式直接打开导航配置信息。
  • 当前导航下有子节点：
    • 子节点下无激活导航：
      • 1、当前导航与其中一个子节点导航配置的【链接类型以、链接看板/地址】完全一致，则默认打开匹配一致的子节点导航。
      • 2、当前导航下没有一个子节点导航配置的【链接类型以、链接看板/地址】完全一致，则直接打开当前导航。
    • 子节点下有激活导航：当前导航打开方式为【新窗口】则直接打开当前导航，打开方式【默认、当前窗口】则当前导航不加载【链接看板/地址】配置，即当前点击导航配置不生效。

• 5、打开方式： 默认、当前窗口、新窗口。

  • 默认：在页面内容区域渲染。
  • 当前窗口【只在发布页面生效】：替换当前页面。
  • 新窗口【只在发布页面生效】：打开浏览器新窗口。

• 6、上级菜单： 在下拉树节点内，可将导航树内选中的导航，快速移动到下拉选中的导航内。

• 7、菜单序号： 同层级导航排序，模式为升序排序，从 0 开始。序号越小导航越靠上。

导航权限设置【仅在团队中显示】

对导航权限进行分配，设置的导航为导航树内选中的导航节点。

• 1、权限搜索【仅在团队中显示】： 在搜索框根据人员或用户组名称快速查找。
• 2、用户组人员【仅在团队中显示】： 勾选用户组可将用户组内所有人员都分配导航查看权限。
• 3、个人【仅在团队中显示】： 勾选指定人员对导航的查看权限。

提示：

• 注意点 ①： 权限生效前置条件，发布模式选择为：开启访问限制并勾选登录验证。
• 注意点 ②： 发布验证勾选人员和此处导航权限人员是不一样的，发布登录验证权限是指勾选人员有查看此发布驾驶舱的权限，导航权限是指人员登录后有查看被分配导航节点的权限。
• 注意点 ③： 导航权限分配。

导航树样例节点如下：

  ├── 订单详情
  ├── 发货详情
  │   └── 发货地点
  │       └──  省
  │           └── 省份1
  │           └── 省份2
  │           └── 省份3
  └── 产品详情

提示：

• 注意点 ④： 如果想分配指定人员只查看【省份 1、省份 3】导航权限，则需要将【省份 1、省份 3】以及其上层父节点【发货详情、发货地点、省】都给该人员勾选上权限，如果中间【发货地点】未分配权限，则该人员是无法查看到【省份 1、省份 3】导航。
• 注意点 ⑤： 导航权限分配遵守以下设置，如果选中导航没有任何人员或用户组勾选则该导航所有人员都有查看权限，一旦有一个人员或用户组勾选，则只有勾选的人员或用户组才有查看权限。

画布

• ①： 顶部面板
• ②： 侧边面板
• ③： 底部面板
• ④： 内容区域