应用界面与布局（App Layout）

应用的界面并不是写死的，而是由 布局管理器（Layout Manager） 动态生成。
这意味着：
你可以完全自由地决定应用的界面结构、模块组合方式，以及运行时的呈现效果。

---

一、布局的核心概念

Pop 布局由以下三个要素构成：

1. 组件（Widgets）

布局中每个区域都由组件构成，例如：

• 表单（Form）
• 文本显示（Text Viewer）
• 图像预览（Image Viewer）
• 图表（Chart）
• AI Panel
• 控制台（Console）
• 文件浏览器
• Markdown Viewer
• JSON Viewer

组件的作用是承担应用界面中的“功能单元”。

---

2. 容器（Containers）

容器用于组织组件的布局结构，常见类型：

容器类型	说明
行（Row）	横向排列组件
列（Column）	纵向排列组件
面板（Panel）	独立的可折叠区域
分屏（Split）	左右或上下分割视图
网格（Grid）	多单元格自由拖放布局

---

3. 布局树（Layout Tree）

整个界面实际上是一个嵌套结构（Tree），由容器 + 组件构成。

示例结构：

- Row
  - Form
  - Split
    - Result Panel
    - Console

你可以使用拖拽方式任意调整结构，无需编写代码。

---

二、应用布局由谁决定？

布局来自：

① 工作流绑定的布局（最常用）

即在工作流编辑器 → 布局管理器中设计好的布局。

发布应用时，系统会提示：

是否使用当前工作流的布局？

选择“是”，应用将完整继承布局。

---

② 应用专属布局

你也可以单独为应用创建专属布局：

场景：

• 同一个工作流需要多种界面呈现方式
• 想把工作流逻辑封装为不同的产品
• 需要完全不同的 UI 体验

---

③ 自动生成布局（默认）

如果没有绑定布局，Pop 会根据：

• 输入字段
• 输出节点类型

自动生成一个基础界面：

• 左侧：输入表单
• 右侧：运行结果 + 控制台

适合快速调试功能。

---

三、布局中常用组件说明

下面是布局中最常使用的组件：

表单区域（Form）

自动读取 Workflow 输入参数，生成输入界面，可手动调整字段位置。

支持字段类型：

• 文本输入框
• 多行输入
• 文件上传
• 数值
• JSON
• 模型选择器
• 下拉框
• 开关

---

运行面板（Run Panel）

用于触发工作流执行。

包含：

• 运行按钮
• 停止按钮
• 参数预览

---

结果展示区（Result Area）

用于展示工作流输出，支持：

• 文本
• Markdown
• 图片
• 图表
• 表格
• JSON
• 文件下载

---

控制台（Console）

展示工作流执行日志，包括：

• 节点输入/输出
• 服务响应
• 错误堆栈
• 调试信息

开发者调试时十分重要。

---

四、布局的设计建议

以下是创建优秀应用界面的实践建议：

1. 表单放左 / 结果在右

用户操作流更自然。

2. 分屏结构更容易理解

利用左右或上下分屏，保持界面层次简洁。

3. 结果部分尽量使用 Markdown / 组件化输出

例如图表工具、表格、文件预览，都能提供更好体验。

4. 控制台可以默认折叠

普通用户不需要看到技术日志。

5. 保持界面三要素：输入 + 执行 + 输出

输入
运行
结果

这是所有应用最核心的交互模型。

---

五、布局的导入与导出

应用布局可以：

• 与工作流一起导出（workflow.json 包含 layout 字段）
• 在应用管理中导出界面配置
• 导入至另一个工作流或应用

这让你可以轻松复制 UI 设计，提高团队共享效率。

---

六、小结

应用界面与布局是 Pop 应用体验的核心部分。
它使你能够：

• 将工作流逻辑包装成易用界面
• 组合各种视觉组件形成完整产品
• 灵活调整布局适应不同业务场景
• 在不改代码的情况下持续优化界面