公版面板配置

涂鸦公版面板配置支持 零代码实现 和 自定义方案，本文通过示例为您这两种面板配置的方法。由于产品的功能差异，最终面板配置效果以设备最终显示为准。

零代码实现面板配置

零代码实现的产品，无法更改设备功能，只能更改面板外观与面板文案。零代码实现产品常见品类为 电工 和 照明。本章节以 Wi-Fi 四路排插为例，为您介绍零代码产品面板配置。

需求分析

假设该 Wi-Fi 四路排插包含 2 个国标插座与 2 个 USB 插座的四路排插。

效果展示

准备工作

请确保您已经创建了一款 Wi-Fi 四路排插产品。详细步骤描述，可参考 快速入门。

配置步骤

1. 在 设备面板 开发阶段，选择 公版面板。

   

2. 选择自定义面板。

   平台提供固定样式模板和自定义模板。仅左上角标注 自定义 的面板支持自定义修改。

   

3. 单击 编辑 ，进入模板编辑界面。
   

4. 编辑面板背景。
   此处可选择 App 面板的背景样式，奠定面板基调。面板背景可选择纯色背景或图片背景。编辑完成后可扫描 页面右侧二维码 预览效果。修改完成前后的对比如下图。
   

   • 纯色背景：可选择预设颜色，也可填写十六进制的 RGB 颜色代码进行自定义。填写完成后点击 保存。
     

   • 图片背景：可选择预设图片，也可上传自定义背景图。填写完成后点击 保存。

     图片尺寸要求：750*1334 px。图片格式支持：PNG、JPEG 和 JPG。

     

5. 编辑面板主题色
   编辑面板主题色即选择面板呈现的主题颜色。在四路排插面板中呈现为 总开关 的背景颜色。

   • 面板主题色可选择预设颜色或十六进制 RGB 颜色代码。编辑完成后请点击保存，并可扫描 页面右侧二维码 预览效果。
     

   • 面板主题色修改前后的对比图如下所示。
     

6. 编辑字体颜色
   编辑字体颜色即选择面板呈现的字体颜色。在四路排插面板中还能改变按钮图标的前景色。字体颜色可选择预设颜色或十六进制 RGB 颜色代码。点击 自定义设置 中的色块可出现调色盘进行更多颜色的选择。

   • 编辑完成后请点击 **保存 ，并可扫描 ** 页面右侧二维码 预览效果。
     

   • 字体颜色修改前后的对比图如下所示。
     

7. 编辑图标样式
   编辑图标样式即选择面板呈现的图标样式，也可上传自定义的图标样式。在四路排插面板中可选择插座规格样式。

   自定义图标尺寸要求：336*336px。图标格式支持 PNG。

   • 编辑完成后请点击保存，并可扫描 页面右侧二维码 预览效果。
     

   • 图标样式修改前后的对比图如下所示。
     

8. 设置面板文案

   如果文案修改未生效，请清理 App 缓存后重试或重新扫码。

   您可以在 多语言管理 选项中编辑面板的文案描述。操作步骤如下。

   1. 点击 设置，进入多语言管理页面。
      

   2. 在 产品功能 页面，编辑 DP 对应的字段文案。
      
      修改完成并保存后，App 面板如图。
      

   3. 在 面板界面 界面可编辑面板上除 DP 外的字段文案。
      
      面板效果如图。
      

自定义方案面板配置

自定义方案产品的常见品类为小家电、厨房电器和传感。本章节以 Wi-Fi 空气净化器为例为您介绍自定义方案面板配置方法。自定义方案产品支持编辑 DP，您可以在部分支持自定义的公版面板上增删产品功能 DP。更多详情，请参考 产品功能。

注意事项

• 自定义功能不可选择 字符型 或 Raw 型，否则将可能导致公版空净面板崩溃。
• 自定义功能中 可上报 类型 DP 将展示在 主界面上，可上报可下发 类型 DP 将展示在 设置 界面上。
• 故障型 DP 不展示。

功能需求

• 面板上展示室内温湿度、TVOC 和甲醛浓度。
• 面板上增加一个摆叶开关。
• 室内 PM2.5 数值字体颜色根据数值改变（0-50 为绿色；50-100 为黄色；100 以上为红色）。
• 室外天气展示天气图标。
• 取消室内 PM2.5 曲线展示。

效果展示

准备工作

请确保您已经创建了一款 Wi-Fi 空气净化器产品。详细步骤描述，可参考 快速入门。

配置步骤

1. 设置 DP。

   1. 根据产品需求勾选下图标准 DP。
      

   2. 确定后 DP 详情展示如下。
      

   3. 根据产品需求自定义添加下图 DP。
      

   4. 选择一款公版空净模板。
      

      设置完成后面板样式如下。
      

2. 设置多语言文案。

   如果修改未生效请清理 App 缓存或重新扫码。

3. 通过工单提交面板更改需求。

   PM2.5 数值字体颜色、天气图标、室内 PM2.5 曲线需要涂鸦工作人员协助完成。因此，有上述修改需求请 提交工单 申请更改。