简体中文

官方表单物料

如何使用？

通过包引用使用

官方表单物料可以直接通过包引用使用：

npm

yarn

pnpm

bun

npm install @flowgram.ai/form-materials

import { JsonSchemaEditor } from '@flowgram.ai/form-materials'

通过 CLI 添加物料源代码使用

如果业务对组件有定制诉求（如：更改文案、样式、业务逻辑），推荐 通过 CLI 将物料源代码添加到项目中进行定制：

npx @flowgram.ai/form-materials@latest

运行后 CLI 会提示用户选择要添加到项目中的物料:

? Select one material to add: (Use arrow keys)
❯ components/json-schema-editor
  components/type-selector
  components/variable-selector

使用者也可以直接在 CLI 中添加指定物料的源代码:

npx @flowgram.ai/form-materials@latest components/json-schema-editor

CLI 运行成功后，相关物料会自动添加到当前项目下的 src/form-materials 目录下

注意事项

官方物料目前底层基于 Semi Design 实现，业务如果有底层组件库的诉求，可以通过 CLI 复制源码进行替换
一些物料会依赖一些第三方 npm 库，这些库会在 CLI 运行时自动安装
一些物料会依赖另外一些官方物料，这些被依赖的物料源代码在 CLI 运行时会一起被添加到项目中去

当前支持的 Component 物料

TypeSelector

By Import

By CLI

import { TypeSelector } from '@flowgram.ai/form-materials'

TypeSelector 用于变量类型选择

Source

VariableSelector

By Import

By CLI

import { VariableSelector } from '@flowgram.ai/form-materials'

VariableSelector 用于展示变量树，并从变量树中选择单个变量

Source

JsonSchemaEditor

By Import

By CLI

import { JsonSchemaEditor } from '@flowgram.ai/form-materials'

JsonSchemaEditor 用于可视化编辑 JsonSchema

常用于可视化配置节点的输出变量

Source

DynamicValueInput

By Import

By CLI

import { DynamicValueInput } from '@flowgram.ai/form-materials'

DynamicValueInput 用于值（常量值 + 变量值）的配置

Source

JsonEditorWithVariables

By Import

By CLI

import { JsonEditorWithVariables } from '@flowgram.ai/form-materials'

一个支持变量的 JSON 编辑器

Source

CodeEditor

By Import

By CLI

import { CodeEditor } from '@flowgram.ai/form-materials'

一个代码编辑器，目前只支持 TypeScript（JavaScript）

Source

ConditionRow

By Import

By CLI

import { ConditionRow } from '@flowgram.ai/form-materials'

第一个条件为 query 变量包含 Hello Flow，第二个条件为 enable 变量为 true

ConditionRow 用于一行条件判断的配置

Source

PromptEditorWithVariables

By Import

By CLI

import { PromptEditorWithVariables } from '@flowgram.ai/form-materials'

LLM_3 和 LLM_4 的提示词中引用了循环的批处理变量

PromptEditorWithVariables 用于支持变量配置的 Prompt 编辑器。

下面是一个 Prompt 编辑器的配置示例，其中 query 变量为字符串类型，enable 变量为布尔类型：

{
  type: "template",
  content: "#User Input:\nquery:{{start_0.query}}\nenable:{{start_0.enable}}"
}

Source

PromptEditorWithInputs

By Import

By CLI

import { PromptEditorWithInputs } from '@flowgram.ai/form-materials'

一个带输入变量的 Prompt 编辑器，使用时需传入 inputsValues 的值：

<PromptEditorWithInputs
  inputsValues={{
    a: { type: 'constant', content: "test" },
    b: { type: 'ref', content: ["a", "b", "c"] }
  }}
/>

Source

InputsValues

By Import

By CLI

import { InputsValues } from '@flowgram.ai/form-materials'

键值对输入，可以配置 infer-inputs-plugin 物料实现 inputs 类型推导

Source

BatchOutputs

By Import

By CLI

import { BatchOutputs } from '@flowgram.ai/form-materials'

循环输出，需要配置 batch-outputs-plugin 物料实现循环输出作用域限制 + 输出变量自动联动推导

Source

当前支持的 Effect 物料

provideBatchInput

By Import

By CLI

import { provideBatchInputEffect } from '@flowgram.ai/form-materials'

item 的类型会自动根据前置类型联动推导

provideBatchInputEffect 用于配置循环批处理输入推导，会根据输入自动推导出两个变量：

item：根据输入变量数组类型自动推导，代表循环的每一项
index：数字类型，代表循环第几次

Source

autoRenameRef

By Import

By CLI

import { autoRenameRefEffect } from '@flowgram.ai/form-materials'

query 变量名变化时，自动重命名下游 inputs 中的引用

当前置输出变量名发生变化时:

表单项中所有的对该变量的引用，自动重命名

Source

syncVariableTitle

By Import

By CLI

import { syncVariableTitle } from '@flowgram.ai/form-materials'

变量系统中节点名自动联动变化

Source

provideJsonSchemaOutputs

By Import

By CLI

import { provideJsonSchemaOutputs } from '@flowgram.ai/form-materials'

节点 JsonSchema 同步到变量系统节点输出，使节点下游可以选择

Source

当前支持的 FormPlugin 物料

batch-outputs-plugin

By Import

By CLI

import { createBatchOutputsFormPlugin } from '@flowgram.ai/form-materials'

插件限制循环作用域只能引用循环体内节点的变量

下游节点自动根据进行推导

循环输出插件，需要配置 BatchOutputs 物料使用

const formMeta = {
  plugins: [createBatchOutputsFormPlugin({ outputKey: 'loopOutputs' })],
}

Source

infer-inputs-plugin

By Import

By CLI

import { inferInputsPlugin } from '@flowgram.ai/form-materials'

inputs 为 inputsValues 的 JsonSchema 类型

传到后端时，基于变量引擎自动计算出 inputsValues 的 JsonSchema 类型

const formMeta = {
  plugins: [
    // headers 存储 headersValues 的类型定义
    createInferInputsPlugin({ sourceKey: 'headersValues', targetKey: 'headers' }),
    // params 存储 paramsValues 的类型定义
    createInferInputsPlugin({ sourceKey: 'paramsValues', targetKey: 'params' }),
  ],
}

Source

#官方表单物料

#如何使用？

#通过包引用使用

#通过 CLI 添加物料源代码使用

#当前支持的 Component 物料

#TypeSelector

#VariableSelector

#JsonSchemaEditor

#DynamicValueInput

#JsonEditorWithVariables

#CodeEditor

#ConditionRow

#PromptEditorWithVariables

#PromptEditorWithInputs

#InputsValues

#BatchOutputs

#当前支持的 Effect 物料

#provideBatchInput

#autoRenameRef

#syncVariableTitle

#provideJsonSchemaOutputs

#当前支持的 FormPlugin 物料

#batch-outputs-plugin

#infer-inputs-plugin

官方表单物料

如何使用？

通过包引用使用

通过 CLI 添加物料源代码使用

当前支持的 Component 物料

TypeSelector

VariableSelector

JsonSchemaEditor

DynamicValueInput

JsonEditorWithVariables

CodeEditor

ConditionRow

PromptEditorWithVariables

PromptEditorWithInputs

InputsValues

BatchOutputs

当前支持的 Effect 物料

provideBatchInput

autoRenameRef

syncVariableTitle

provideJsonSchemaOutputs

当前支持的 FormPlugin 物料

batch-outputs-plugin

infer-inputs-plugin