# 界面

界面与卡片均为小艺通过智能体提供的用户交互方式。其中，界面以全屏或半屏弹出的形式呈现，为用户提供一个相对独立、沉浸式的交互空间。用户可在该界面中通过点击按钮、输入文本等控件操作，与智能体完成高效、直观的交互。

本章节将介绍界面创建与发布，当智能体需要实现图形用户界面（以下简称GUI）交互场景时，可以参考本章节介绍实现。GUI创建后支持在智能体中供工作流绑定使用，工作流绑定GUI参考[工作流界面使用](https://developer.huawei.com/consumer/cn/doc/service/workflow-gui-0000002549407129)、触发器绑定GUI参考[触发器通用事件](https://developer.huawei.com/consumer/cn/doc/service/trigger-common-0000002492963588)。

## 新建界面

进入小艺开放平台，点击【工作空间】-【界面】-【新建用户界面】，填写用户界面名称和描述后，点击【新建】。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/44/v3/ywT9gx50SkS3rFOi8c-iow/zh-cn_image_0000002670263809.png?HW-CC-KV=V1&HW-CC-Date=20261008T171328Z&HW-CC-Expire=31536000000&HW-CC-Sign=76ACD3F1B84E6E02DD69925664017FFE53CEDBF29DA4B27D7C2EF392369C7A18 "点击放大")

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/af/v3/1gtb0sJ-RaC9eIZlXu2BtQ/zh-cn_image_0000002640263912.png?HW-CC-KV=V1&HW-CC-Date=20261008T171328Z&HW-CC-Expire=31536000000&HW-CC-Sign=61BB008BC5C7B135A9022998BD194AA7CD80CFC6BC907A7F8C3401364F5FE583 "点击放大")

新建界面后可以新建版本、编辑版本、复制、删除界面。也可以看到界面关联的智能体、卡片，当被智能体、卡片关联时，无法删除界面。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/dc/v3/-4rKCXyeRJynlvRsdEoYiA/zh-cn_image_0000002640263920.png?HW-CC-KV=V1&HW-CC-Date=20261008T171328Z&HW-CC-Expire=31536000000&HW-CC-Sign=DACC96623C7C11FE581BBAF82311C4FEC117F21CF8C2199E5434A10C03961CD3 "点击放大")

## 编辑界面

界面编辑页面从左到右依次为功能区、预览画布区和属性配置区。开发者可以拖动组件图标到中间画布区域，选中中间画布上某个组件时，右边会展示该组件的属性配置，修改属性配置可以实时在画布上生效。组件编辑使用可参考[自定义卡片编辑](https://developer.huawei.com/consumer/cn/doc/service/custom-card-editing-0000002471264337)。添加H5组件后，其它组件不可使用。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/40/v3/BuFnA6o8RAi5Vna6hnqC0w/zh-cn_image_0000002670263801.png?HW-CC-KV=V1&HW-CC-Date=20261008T171328Z&HW-CC-Expire=31536000000&HW-CC-Sign=BE2A3841E03BC26A3DED6FFAF6693BAC3C4932F5EE64F2979F7FD41C7443B1A9 "点击放大")

变量：

变量用于存储页面的临时数据以及用户界面的入参，分为两种类型：

* 界面入参变量：工作流输出界面时传入，非必传，如果不传就会用界面内定义的默认值。
* 其他变量：自定义变量参数。

变量创建后，可以在组件属性配置时绑定使用。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/f5/v3/MWZdlY4gT6-1n0cmu7hM9A/zh-cn_image_0000002640103976.png?HW-CC-KV=V1&HW-CC-Date=20261008T171328Z&HW-CC-Expire=31536000000&HW-CC-Sign=F13D131996309A8772A04A6CE82567DE78FA9D3B76F115AB265E777E5336E4CA "点击放大")

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/a5/v3/O99Cz2JoSVKCssIw7vJ4OQ/zh-cn_image_0000002640103972.png?HW-CC-KV=V1&HW-CC-Date=20261008T171328Z&HW-CC-Expire=31536000000&HW-CC-Sign=2709B636D5577B3FF448C79F077127B80923FC1B27B9D39D2B9B7DF704B0FA35)

## 界面关联技能

在【关联技能】管理页面支持添加插件或工作流，作为组件事件调用的白名单。注意：

* 事件执行动作中使用的插件/工作流将自动在此处生成关联关系。
* H5组件只允许添加端插件作为白名单。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/3e/v3/_NAaAv0oRSOlAgTRIAGbkQ/zh-cn_image_0000002670263807.png?HW-CC-KV=V1&HW-CC-Date=20261008T171328Z&HW-CC-Expire=31536000000&HW-CC-Sign=C79BA8B27D30302FEDBC791A6EB959D08FF0808CFDAF5B71D3F14D83D69A1FDF)

## 界面预览、保存与发布

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/ca/v3/lW0ezqYDSDq3X3x2pA8PJA/zh-cn_image_0000002670263805.png?HW-CC-KV=V1&HW-CC-Date=20261008T171328Z&HW-CC-Expire=31536000000&HW-CC-Sign=4498BEA012070B63C5DA9A23E8F633BDDDD50D615935F670E6AAA2A8D1BB7A53 "点击放大")

**界面预览**

点击预览后，可在弹出的窗口中预览界面效果。预览展示了界面在设备上的预期显示效果。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/79/v3/VkspwkFMRHa6ZZQttFZ5pA/zh-cn_image_0000002640103978.png?HW-CC-KV=V1&HW-CC-Date=20261008T171328Z&HW-CC-Expire=31536000000&HW-CC-Sign=E6D26ED96347EF40525C6869F92E56C28B860AA98A39605B4D6BD1F1EDF7A129 "点击放大")

**界面保存与发布**

预览效果符合预期后，点击保存并发布界面，界面发布后，在智能体工作流绑定界面时，就可以关联到已发布的界面。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/60/v3/snCbL-yTRbeVXPXAkx_JqA/zh-cn_image_0000002640263918.png?HW-CC-KV=V1&HW-CC-Date=20261008T171328Z&HW-CC-Expire=31536000000&HW-CC-Sign=881E728CDE8307E9BCA1819119A35B911E672BF13C22EEBF63DCD06E06053E97 "点击放大")

使用界面

界面发布后，可以在智能体编排页内配置两种方式使用界面。

1、快捷指令绑定界面

进入智能体详情编辑页面，选择添加快捷指令，选择跳转型，跳转方式选择界面，点击添加按钮，可以选择当前已发布的界面。

快捷指令使用界面目前仅支持对界面入参配置静态参数，不支持绑定变量。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/18/v3/6q68RU03TCqmIBHI0GF8jQ/zh-cn_image_0000002640263916.png?HW-CC-KV=V1&HW-CC-Date=20261008T171328Z&HW-CC-Expire=31536000000&HW-CC-Sign=C39ED54F190A6A683092585EC54E2D0807ACC9B51A695B452BE560462499659E "点击放大")

2、工作流绑定界面

进入智能体编排页，添加工作流，对工作流节点选择绑定卡片或界面，选择界面跳转，点击添加按钮，可以选择已发布的界面。

鼠标悬浮到已选择的界面上，点击界面入参配置，配置工作流当节点的输出参数和界面入参的绑定关系即可。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/d5/v3/UfjfR6q1RkqocGX_Af7YfA/zh-cn_image_0000002640263922.png?HW-CC-KV=V1&HW-CC-Date=20261008T171328Z&HW-CC-Expire=31536000000&HW-CC-Sign=96B6A494A805081D89F2119ABEF707C6FF68E18EB45650DAFC74B2569F7790CC "点击放大")

