5.9 布局管理器（Layout Manager）

布局管理器是 Pop 工作流体系中最重要的组成部分之一。
它的作用是：将工作流的输出以界面化方式呈现，让你的工作流变成一款真正可使用的应用（App）。

通过布局管理器，你可以：

创建可视化界面（Dashboard / 表单 / 数据展示）
将工作流的输出绑定到组件（文本 / 图表 / 表格 / 文件下载）
构建带交互的输入表单
打包为 Web App、桌面插件或内部工具
作为 API 输出接口的可视化展示层

它是让“工作流 → 应用”真正落地的关键。

🎨 一、布局管理器的核心能力

布局管理器支持构建 UI 页面，包含：

网格布局系统（Grid Layout）
可拖拽组件（Widgets）
输入表单（Form）
数据展示组件（Display Components）
图表渲染（Charts）
文件预览 / 下载组件
运行按钮、操作按钮

布局的最终目标是：

让不写代码的用户，也能使用你设计的 AI / 自动化应用。

🧱 二、布局结构概览

布局由以下部分组成：

页面（Page）
 ├── Header（可选）
 ├── Form：用于工作流输入
 ├── Grid：拖拽组件的主画布
 └── Footer（可选）

布局与工作流之间的关系：

输入参数 → Form 表单 → 工作流执行
输出参数 → 组件绑定 → UI 展示

🧩 三、组件（Widget）类型总览

布局管理器内置以下组件：

类型	示例	作用
文本（Text）	结果摘要、提示文字	显示字符串内容
Markdown	文档说明	支持渲染 md 内容
表格（Table）	数据统计表、报表	展示结构化数据
图表（Charts）	折线图、柱状图、饼图	可视化数据
文件下载（File Download）	导出的 PDF、Excel	文件类结果输出
图片展示（Image View）	OCR 结果、生成图片	展示图片
自定义 HTML	高级场景	嵌入组件或脚本
执行按钮（Run Button）	手动触发运行	让用户主动点击执行

所有组件均支持：

拖拽
调整大小
配置样式
绑定工作流输出字段

🔗 四、将组件绑定到工作流输出

工作流输出定义在 Output 节点中，例如：

{
  "summary": "文本摘要",
  "chart_data": [...],
  "file_url": "xxx.pdf"
}

在布局管理器中，你可以在组件设置中填入绑定路径：

例：

文本组件：

{{workflow.outputs.summary}}

图表组件：

{{workflow.outputs.chart_data}}

组件会在工作流运行后自动刷新数据。

📝 五、创建输入表单（Form）

表单来自工作流的 输入参数（Inputs）。

当定义了输入字段时（在工作流设置里）：

示例：

title: text
date_range: text
file: file
options: json

布局管理器会自动渲染成：

文本框
文件上传框
下拉选择
多段输入

这些表单字段用户填入后，将自动作为工作流的输入参数执行。

🧭 六、布局编辑功能

布局画布支持丰富的编辑操作：

✔ 拖拽组件到网格

✔ 修改组件大小（支持宽高缩放）

✔ 文本编辑、Markdown 编辑

✔ 配置背景色、边框、卡片样式

✔ 复制/删除组件

✔ 撤销 / 重做

✔ 预览模式（Preview Mode）

高级功能：

自动对齐
吸附网格
锁定组件防止误操作
组件折叠/标题显示开关

📂 七、页面与多页面布局（未来扩展）

布局管理器将支持：

多页面应用（分页导航）
子页面、弹窗、对话框
拖拽式仪表盘搭建

当前版本的布局为单页结构，但 UI 和数据绑定方式完全兼容未来多页能力。

📤 八、布局与应用发布

当你将工作流发布为应用时：

布局就是最终用户看到的界面
输入表单成为用户填写的参数
输出组件展示运行结果
可嵌入到网站、系统或手机中

发布过程完全自动化，无需编写任何 HTML/CSS/JS。

📝 九、最佳实践

1. 将重要信息放在顶部

例如标题、摘要、运行按钮。

2. 图表与表格并排展示

让用户一眼看到分析结果。

3. 文本说明放在侧边栏或底部

用 Markdown 提供解释与指导。

4. 输出字段命名要清晰

例如：

summary_text
analysis_table
trend_chart

5. 善用块状布局（Cards）

视觉效果更整洁。

🎯 十、小结

布局管理器是 Pop 工作流的重要组成，它让你的工作流不只是一段逻辑，而是可以让用户直接使用的「完整应用」。

通过布局管理器，你可以：

构建 UI 界面
绑定工作流输入输出
自定义图表、表格、文本展示
打包为实际可用的工具

掌握布局能力，将让你的 Pop 工作流从自动化脚本升级为真正的 无代码应用开发框架。