静态展示框

1. 组件概述

静态展示框是一个内容展示组件，用于以只读方式展示数据。与输入类组件不同，它不允许用户编辑内容，仅用于呈现信息。该组件适用于详情页、确认页、数据回显等只需展示不需编辑的场景。静态展示框可以展示文本、日期、图片、进度等多种类型的数据，并支持复制、查看更多、快速编辑等扩展功能。

加载中...

查看 JSON

复制 JSON

2. 应用场景示例

• 场景一：AI 生成结果展示。在智能写作助手应用中，用户输入主题后，AI 工作流生成的文章内容可以通过静态展示框呈现。将静态展示框绑定到工作流返回的结果变量，当工作流完成时，生成的内容会自动显示在页面上。如果内容较长，可以开启”查看更多展示”功能，让用户点击后在弹窗中查看完整内容。

• 场景二：学习记录详情页。在学习辅导类应用中，展示学生的答题记录详情时，可以使用静态展示框显示题目、学生答案、正确答案、AI 点评等信息。开启”可复制”功能，方便学生复制 AI 的解析内容进行保存或分享。

加载中...

查看 JSON

复制 JSON

3. 功能配置

高级

基本折叠组

配置项	说明
绑定变量	组件的变量名。静态展示框会显示该变量对应的值。其他组件或工作流可以通过修改此变量来更新展示内容。
标题	显示在展示内容左侧的标签文字，用于说明该展示项的含义，如”AI 回复”、“生成结果”等。
内容	设置要展示的具体内容。可以直接输入静态文本，也可以绑定变量来动态显示内容。当绑定的变量值发生变化时，展示内容会自动更新。
可快速编辑	开启后，用户可以直接在展示框上进行编辑操作。适用于需要偶尔修改数据的场景，如修正 AI 生成的内容。开启后可配置以下选项： - 编辑模式：选择”下拉”时，点击后会弹出编辑框；选择”内嵌”时，直接在原位置进行编辑。 - 图标：设置编辑按钮的图标样式。 - 立即保存：开启后，修改内容会立即提交保存，而不是等待批量提交。 - 保存接口：当开启立即保存时，可以单独配置保存数据的接口。 - 配置编辑模板：点击可自定义编辑时使用的表单组件。
查看更多展示	开启后，当内容较长时，用户可以点击查看完整内容。适用于展示长文本、详细信息等场景。开启后可配置以下选项： - 弹出模式：选择”浮层”时，内容以悬浮气泡形式显示；选择”弹框”时，内容在模态弹窗中显示；选择”抽屉”时，内容从侧边滑出显示。 - 浮层位置：当弹出模式为”浮层”时，可设置浮层相对于目标的位置，如目标左上角、目标中部、页面右下角等。 - 查看更多内容配置：点击可自定义查看更多时显示的内容模板。
可复制	开启后，展示内容旁边会显示复制按钮，用户点击即可将内容复制到剪贴板。适用于需要复制 AI 生成内容、代码片段等场景。开启后可配置”内容模板”，自定义复制的内容格式，默认复制当前字段的值。
标题提示	在标题旁边显示一个小问号图标，鼠标悬停时弹出提示内容。适合放置对该展示项的简短说明。
控件提示	在展示内容旁边显示一个小问号图标，鼠标悬停时弹出提示内容。注意：需要设置控件宽度，否则图标可能换行。
占位提示	当没有内容可展示时显示的提示文字，默认显示”-“。可以自定义为”暂无数据”、“等待生成…”等提示语。
描述	显示在展示内容下方的浅色说明文字，用于补充解释该展示项的含义或来源。

状态折叠组

配置项	说明
可见	控制组件是否显示。默认可见。可以绑定变量实现动态控制，例如只有当 AI 返回结果后才显示该展示框。
隐藏	控制组件是否隐藏。与”可见”相反。
隐藏时删除字段	开启后，当该组件被隐藏时，其绑定的变量值会从数据中删除。

设计

表单项折叠组

此折叠组包含表单项的通用样式配置，如标题宽度、标题位置等布局相关设置。

控件折叠组

配置项	说明
边框	设置展示框的边框样式。可选：全边框（四周都有边框）、半边框（仅底部有边框）、无边框（无任何边框）。默认为全边框。

CSS类名折叠组

配置项	说明
整体	设置整个组件的自定义 CSS 类名。
标签	设置标题部分的自定义 CSS 类名。
控件	设置展示内容部分的自定义 CSS 类名。
描述	设置描述文字的自定义 CSS 类名，仅在配置了描述时显示。