docs(materials): add WIP empty docs for materials (#920)

* feat: ref value change docs

* docs(material): add WIP for developed materials

* fix: rename

apps/docs/components/form-materials/effects/listen-ref-schema-change.tsx

@@ -24,7 +24,7 @@ export const BasicStory = () => (
         'inputsValues.*': listenRefSchemaChange(({ name, schema, form, formValues }) => {
           form.setValueIn(
             `log`,
-            `${form.getValueIn(`log`) || ''}* ${name}: ${JSON.stringify(schema)} \n`
+            `${form.getValueIn(`log`) || ''}${name}: ${JSON.stringify(schema)}\n`
           );
         }),
       },
@@ -47,7 +47,17 @@ export const BasicStory = () => (
           <br />
           <Field<any> name="log" defaultValue={'When schema updated, log changes:\n'}>
             {({ field }) => (
-              <pre style={{ padding: 4, background: '#f5f5f5', fontSize: 12 }}>{field.value}</pre>
+              <pre
+                style={{
+                  width: 500,
+                  padding: 4,
+                  background: '#f5f5f5',
+                  fontSize: 12,
+                  whiteSpace: 'pre-wrap',
+                }}
+              >
+                {field.value}
+              </pre>
             )}
           </Field>
         </>

apps/docs/components/form-materials/effects/listen-ref-value-change.tsx

@@ -24,11 +24,7 @@ export const BasicStory = () => (
         'inputsValues.*': listenRefValueChange(({ name, variable, form }) => {
           form.setValueIn(
             `log`,
-            `${form.getValueIn(`log`) || ''}* ${name}: ${JSON.stringify({
-              name: variable?.name,
-              type: variable?.type,
-              value: variable?.value,
-            })} \n`
+            `${form.getValueIn(`log`) || ''}${name}: ${JSON.stringify(variable?.toJSON() || {})} \n`
           );
         }),
       },
@@ -51,7 +47,17 @@ export const BasicStory = () => (
           <br />
           <Field<any> name="log" defaultValue={'When variable value updated, log changes:\n'}>
             {({ field }) => (
-              <pre style={{ padding: 4, background: '#f5f5f5', fontSize: 12 }}>{field.value}</pre>
+              <pre
+                style={{
+                  width: 500,
+                  padding: 4,
+                  background: '#f5f5f5',
+                  fontSize: 12,
+                  whiteSpace: 'pre-wrap',
+                }}
+              >
+                {field.value}
+              </pre>
             )}
           </Field>
         </>

apps/docs/src/en/materials/_meta.json

@@ -16,6 +16,11 @@
     "name": "form-plugins",
     "label": "Form Plugins"
   },
+  {
+    "type": "dir",
+    "name": "validate",
+    "label": "Validate"
+  },
   {
     "type": "dir",
     "name": "common",

apps/docs/src/en/materials/common/_meta.json

@@ -1,3 +1,6 @@
 [
-  "flow-value"
+  "flow-value",
+  "disable-declaration-plugin",
+  "inject-material",
+  "json-schema-preset"
 ]

apps/docs/src/en/materials/common/disable-declaration-plugin.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# DisableDeclarationPlugin (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/plugins/disable-declaration-plugin"
+/>

apps/docs/src/en/materials/common/inject-material.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# InjectMaterial (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/shared/inject-material"
+/>

apps/docs/src/en/materials/common/json-schema-preset.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# JsonSchemaPreset (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/plugins/json-schema-preset"
+/>

apps/docs/src/en/materials/components/_meta.json

@@ -8,5 +8,23 @@
   "code-editor",
   "json-editor-with-variables",
   "prompt-editor-with-variables",
-  "prompt-editor-with-inputs"
+  "prompt-editor-with-inputs",
+  "assign-row",
+  "assign-rows",
+  "batch-outputs",
+  "batch-variable-selector",
+  "blur-input",
+  "code-editor-mini",
+  "condition-context",
+  "constant-input",
+  "coze-editor-extensions",
+  "db-condition-row",
+  "display-flow-value",
+  "display-inputs-values",
+  "display-outputs",
+  "display-schema-tag",
+  "display-schema-tree",
+  "inputs-values-tree",
+  "prompt-editor",
+  "sql-editor-with-variables"
 ]

apps/docs/src/en/materials/components/assign-row.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# AssignRow (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/assign-row"
+/>

apps/docs/src/en/materials/components/assign-rows.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# AssignRows (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/assign-rows"
+/>

apps/docs/src/en/materials/components/batch-outputs.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# BatchOutputs (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/batch-outputs"
+/>

apps/docs/src/en/materials/components/batch-variable-selector.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# BatchVariableSelector (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/batch-variable-selector"
+/>

apps/docs/src/en/materials/components/blur-input.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# BlurInput (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/blur-input"
+/>

apps/docs/src/en/materials/components/code-editor-mini.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# CodeEditorMini (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/code-editor-mini"
+/>

apps/docs/src/en/materials/components/condition-context.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# ConditionContext (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/condition-context"
+/>

apps/docs/src/en/materials/components/constant-input.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# ConstantInput (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/constant-input"
+/>

apps/docs/src/en/materials/components/coze-editor-extensions.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# CozeEditorExtensions (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/coze-editor-extensions"
+/>

apps/docs/src/en/materials/components/db-condition-row.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# DbConditionRow (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/db-condition-row"
+/>

apps/docs/src/en/materials/components/display-flow-value.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# DisplayFlowValue (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/display-flow-value"
+/>

apps/docs/src/en/materials/components/display-inputs-values.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# DisplayInputsValues (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/display-inputs-values"
+/>

apps/docs/src/en/materials/components/display-outputs.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# DisplayOutputs (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/display-outputs"
+/>

apps/docs/src/en/materials/components/display-schema-tag.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# DisplaySchemaTag (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/display-schema-tag"
+/>

apps/docs/src/en/materials/components/display-schema-tree.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# DisplaySchemaTree (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/display-schema-tree"
+/>

apps/docs/src/en/materials/components/inputs-values-tree.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# InputsValuesTree (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/inputs-values-tree"
+/>

apps/docs/src/en/materials/components/prompt-editor.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# PromptEditor (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/prompt-editor"
+/>

apps/docs/src/en/materials/components/sql-editor-with-variables.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# SQLEditorWithVariables (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/sql-editor-with-variables"
+/>

apps/docs/src/en/materials/effects/_meta.json

@@ -1,4 +1,9 @@
 [
   "auto-rename-ref",
-  "listen-ref-schema-change"
-]
+  "listen-ref-schema-change",
+    "listen-ref-value-change",
+    "provide-batch-input",
+    "provide-json-schema-outputs",
+    "sync-variable-title",
+    "validate-when-variable-sync"
+  ]

apps/docs/src/en/materials/effects/listen-ref-value-change.mdx

@@ -0,0 +1,117 @@
+# listenRefValueChange
+
+Listen for changes in the value of the referenced variable and trigger a callback function when it changes.
+
+## Case Demo
+
+import { BasicStory } from 'components/form-materials/effects/listen-ref-value-change';
+
+### Basic Usage
+
+<BasicStory />
+
+```tsx pure title="form-meta.tsx"
+import { listenRefValueChange } from '@flowgram.ai/form-materials';
+
+const formMeta = {
+  effect: {
+    'inputsValues.*': listenRefValueChange(({ name, variable, form }) => {
+      form.setValueIn(
+        `log`,
+        `${form.getValueIn(`log`) || ''}* ${name}: ${JSON.stringify(
+          variable?.toJSON() || {}
+        )} \n`
+      );
+    }),
+  },
+  render: () => (
+    <>
+      <FormHeader />
+      <Field<Record<string, any> | undefined>
+        name="inputsValues"
+        defaultValue={{
+          a: {
+            type: 'ref',
+            content: ['start_0', 'str'],
+          },
+        }}
+      >
+        {({ field }) => (
+          <InputsValues value={field.value} onChange={(value) => field.onChange(value)} />
+        )}
+      </Field>
+      <br />
+      <Field<any> name="log" defaultValue={'When variable value updated, log changes:\n'}>
+        {({ field }) => (
+          <pre style={{ width: 500, padding: 4, background: '#f5f5f5', fontSize: 12 }}>
+            {field.value}
+          </pre>
+        )}
+      </Field>
+    </>
+  ),
+}
+```
+
+## API Introduction
+
+### listenRefValueChange
+
+```typescript
+listenRefValueChange(
+  cb: (props: EffectFuncProps<IFlowRefValue> & { variable?: BaseVariableField }) => void
+): EffectOptions[]
+```
+
+#### Parameters
+
+| Parameter | Type | Description |
+|---|---|---|
+| `cb` | `(props: EffectFuncProps<IFlowRefValue> & { variable?: BaseVariableField }) => void` | Callback function, triggered when the referenced value changes |
+
+#### Callback Function Parameters
+
+| Parameter | Type | Description |
+|---|---|---|
+| `name` | `string` | Field name |
+| `value` | `IFlowRefValue` | Reference value object |
+| `form` | `IForm` | Form instance |
+| `variable` | `BaseVariableField` | The variable instance pointed to by the reference |
+
+### Supported Value Types
+
+- `IFlowRefValue`: Reference type value, including `type: 'ref'` and `content: string[]`
+
+## Source Code Guide
+
+import { SourceCode } from '@theme';
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/effects/listen-ref-value-change"
+/>
+
+Use the CLI command to copy the source code locally:
+
+```bash
+npx @flowgram.ai/cli@latest materials effects/listen-ref-value-change
+```
+
+### Directory Structure
+
+```
+listen-ref-value-change/
+└── index.ts          # Main entry file
+```
+
+### How It Works
+
+1. **Listen for value changes**: Listen for the `DataEvent.onValueInitOrChange` event
+2. **Type check**: Check if the value is of `ref` type
+3. **Path tracking**: Use `trackByKeyPath` to track the reference path and get the referenced variable
+4. **Callback trigger**: Trigger the callback when the value of the referenced variable changes
+
+### flowgram APIs Used
+
+#### @flowgram.ai/variable-core
+
+- `getNodeScope(context.node).available.trackByKeyPath`: Tracks changes to the value of the specified path and triggers a callback when the value corresponding to the path changes.

apps/docs/src/en/materials/effects/provide-batch-input.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# provideBatchInput (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/effects/provide-batch-input"
+/>

apps/docs/src/en/materials/effects/provide-json-schema-outputs.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# provideJsonSchemaOutputs (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/effects/provide-json-schema-outputs"
+/>

apps/docs/src/en/materials/effects/sync-variable-title.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# syncVariableTitle (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/effects/sync-variable-title"
+/>

apps/docs/src/en/materials/effects/validate-when-variable-sync.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# validateWhenVariableSync (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/effects/validate-when-variable-sync"
+/>

apps/docs/src/en/materials/form-plugins/_meta.json

@@ -1 +1,5 @@
-[]
+[
+  "batch-outputs-plugin",
+  "infer-assign-plugin",
+  "infer-inputs-plugin"
+]

apps/docs/src/en/materials/form-plugins/batch-outputs-plugin.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# batchOutputsPlugin (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/form-plugins/batch-outputs-plugin"
+/>

apps/docs/src/en/materials/form-plugins/infer-assign-plugin.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# inferAssignPlugin (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/form-plugins/infer-assign-plugin"
+/>

apps/docs/src/en/materials/form-plugins/infer-inputs-plugin.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# inferInputsPlugin (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/form-plugins/infer-inputs-plugin"
+/>

apps/docs/src/en/materials/validate/_meta.json

@@ -0,0 +1,3 @@
+[
+  "validate-flow-value"
+]

apps/docs/src/en/materials/validate/validate-flow-value.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# validateFlowValue (WIP)
+
+<SourceCode
+  href="https.://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/validate/validate-flow-value"
+/>

apps/docs/src/zh/materials/_meta.json

@@ -14,7 +14,12 @@
   {
     "type": "dir",
     "name": "form-plugins",
-    "label": "表单插件 (WIP)"
+    "label": "表单插件"
+  },
+  {
+    "type": "dir",
+    "name": "validate",
+    "label": "表单校验器"
   },
   {
     "type": "dir",

apps/docs/src/zh/materials/common/_meta.json

@@ -1,3 +1,5 @@
 [
-  "flow-value"
+  "flow-value",
+  "json-schema-preset",
+  "disable-declaration-plugin"
 ]

apps/docs/src/zh/materials/common/disable-declaration-plugin.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# DisableDeclarationPlugin (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/plugins/disable-declaration-plugin"
+/>

apps/docs/src/zh/materials/common/inject-material.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# 物料依赖注入 (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/shared/inject-material"
+/>

apps/docs/src/zh/materials/common/json-schema-preset.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# JsonSchemaPreset (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/plugins/json-schema-preset"
+/>

apps/docs/src/zh/materials/components/_meta.json

@@ -8,5 +8,23 @@
   "code-editor",
   "json-editor-with-variables",
   "prompt-editor-with-variables",
-  "prompt-editor-with-inputs"
+  "prompt-editor-with-inputs",
+  "sql-editor-with-variables",
+  "assign-row",
+  "assign-rows",
+  "batch-outputs",
+  "batch-variable-selector",
+  "blur-input",
+  "code-editor-mini",
+  "condition-context",
+  "constant-input",
+  "coze-editor-extensions",
+  "db-condition-row",
+  "display-flow-value",
+  "display-inputs-values",
+  "display-outputs",
+  "display-schema-tag",
+  "display-schema-tree",
+  "inputs-values-tree",
+  "prompt-editor"
 ]

apps/docs/src/zh/materials/components/assign-row.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# AssignRow (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/assign-row"
+/>

apps/docs/src/zh/materials/components/assign-rows.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# AssignRows (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/assign-rows"
+/>

apps/docs/src/zh/materials/components/batch-outputs.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# BatchOutputs (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/batch-outputs"
+/>

apps/docs/src/zh/materials/components/batch-variable-selector.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# BatchVariableSelector (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/batch-variable-selector"
+/>

apps/docs/src/zh/materials/components/blur-input.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# BlurInput (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/blur-input"
+/>

apps/docs/src/zh/materials/components/code-editor-mini.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# CodeEditorMini (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/code-editor-mini"
+/>

apps/docs/src/zh/materials/components/condition-context.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# ConditionContext (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/condition-context"
+/>

apps/docs/src/zh/materials/components/constant-input.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# ConstantInput (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/constant-input"
+/>

apps/docs/src/zh/materials/components/coze-editor-extensions.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# CozeEditorExtensions (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/coze-editor-extensions"
+/>

apps/docs/src/zh/materials/components/db-condition-row.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# DbConditionRow (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/db-condition-row"
+/>

apps/docs/src/zh/materials/components/display-flow-value.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# DisplayFlowValue (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/display-flow-value"
+/>

apps/docs/src/zh/materials/components/display-inputs-values.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# DisplayInputsValues (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/display-inputs-values"
+/>

apps/docs/src/zh/materials/components/display-outputs.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# DisplayOutputs (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/display-outputs"
+/>

apps/docs/src/zh/materials/components/display-schema-tag.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# DisplaySchemaTag (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/display-schema-tag"
+/>

apps/docs/src/zh/materials/components/display-schema-tree.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# DisplaySchemaTree (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/display-schema-tree"
+/>

apps/docs/src/zh/materials/components/inputs-values-tree.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# InputsValuesTree (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/inputs-values-tree"
+/>

apps/docs/src/zh/materials/components/prompt-editor-with-inputs.mdx

@@ -167,7 +167,7 @@ export function PromptEditorWithInputs({
 - `preset`: 提示编辑器预设配置
 - `EditorAPI`: 编辑器API接口
 
-#### @flowgram.ai/shared
+#### 通用物料逻辑
 - `IInputsValues`: 输入变量类型定义
 
 ### 整体流程

apps/docs/src/zh/materials/components/prompt-editor.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# PromptEditor (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/prompt-editor"
+/>

apps/docs/src/zh/materials/components/sql-editor-with-variables.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# SQLEditorWithVariables (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/sql-editor-with-variables"
+/>

apps/docs/src/zh/materials/effects/_meta.json

@@ -1,4 +1,9 @@
 [
   "auto-rename-ref",
-  "listen-ref-schema-change"
+  "listen-ref-value-change",
+  "listen-ref-schema-change",
+  "provide-batch-input",
+  "provide-json-schema-outputs",
+  "sync-variable-title",
+  "validate-when-variable-sync"
 ]

apps/docs/src/zh/materials/effects/listen-ref-value-change.mdx

@@ -0,0 +1,117 @@
+# listenRefValueChange
+
+监听引用变量值的变化，并在变化时触发回调函数。
+
+## 案例演示
+
+import { BasicStory } from 'components/form-materials/effects/listen-ref-value-change';
+
+### 基本使用
+
+<BasicStory />
+
+```tsx pure title="form-meta.tsx"
+import { listenRefValueChange } from '@flowgram.ai/form-materials';
+
+const formMeta = {
+  effect: {
+    'inputsValues.*': listenRefValueChange(({ name, variable, form }) => {
+      form.setValueIn(
+        `log`,
+        `${form.getValueIn(`log`) || ''}* ${name}: ${JSON.stringify(
+          variable?.toJSON() || {}
+        )} \n`
+      );
+    }),
+  },
+  render: () => (
+    <>
+      <FormHeader />
+      <Field<Record<string, any> | undefined>
+        name="inputsValues"
+        defaultValue={{
+          a: {
+            type: 'ref',
+            content: ['start_0', 'str'],
+          },
+        }}
+      >
+        {({ field }) => (
+          <InputsValues value={field.value} onChange={(value) => field.onChange(value)} />
+        )}
+      </Field>
+      <br />
+      <Field<any> name="log" defaultValue={'When variable value updated, log changes:\n'}>
+        {({ field }) => (
+          <pre style={{ width: 500, padding: 4, background: '#f5f5f5', fontSize: 12 }}>
+            {field.value}
+          </pre>
+        )}
+      </Field>
+    </>
+  ),
+}
+```
+
+## API 介绍
+
+### listenRefValueChange
+
+```typescript
+listenRefValueChange(
+  cb: (props: EffectFuncProps<IFlowRefValue> & { variable?: BaseVariableField }) => void
+): EffectOptions[]
+```
+
+#### 参数
+
+| 参数 | 类型 | 描述 |
+|------|------|------|
+| `cb` | `(props: EffectFuncProps<IFlowRefValue> & { variable?: BaseVariableField }) => void` | 回调函数，当引用的值发生变化时触发 |
+
+#### 回调函数参数
+
+| 参数 | 类型 | 描述 |
+|------|------|------|
+| `name` | `string` | 字段名称 |
+| `value` | `IFlowRefValue` | 引用值对象 |
+| `form` | `IForm` | 表单实例 |
+| `variable` | `BaseVariableField` | 引用指向的变量实例 |
+
+### 支持值类型
+
+- `IFlowRefValue`：引用类型值，包含 `type: 'ref'` 和 `content: string[]`
+
+## 源码导读
+
+import { SourceCode } from '@theme';
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/effects/listen-ref-value-change"
+/>
+
+使用 CLI 命令可以复制源代码到本地：
+
+```bash
+npx @flowgram.ai/cli@latest materials effects/listen-ref-value-change
+```
+
+### 目录结构
+
+```
+listen-ref-value-change/
+└── index.ts          # 主入口文件
+```
+
+### 工作原理
+
+1. **监听值变化**：监听 `DataEvent.onValueInitOrChange` 事件
+2. **类型检查**：检查值是否为 `ref` 类型
+3. **路径跟踪**：使用 `trackByKeyPath` 跟踪引用路径，获取被引用的变量
+4. **回调触发**：当引用的变量值发生变化时触发回调
+
+### 使用到的 flowgram API
+
+#### @flowgram.ai/variable-core
+
+- `getNodeScope(context.node).available.trackByKeyPath`: 跟踪指定路径的值变化，当路径对应的值发生变化时触发回调。

apps/docs/src/zh/materials/effects/provide-batch-input.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# provideBatchInput (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/effects/provide-batch-input"
+/>

apps/docs/src/zh/materials/effects/provide-json-schema-outputs.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# provideJsonSchemaOutputs (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/effects/provide-json-schema-outputs"
+/>

apps/docs/src/zh/materials/effects/sync-variable-title.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# syncVariableTitle (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/effects/sync-variable-title"
+/>

apps/docs/src/zh/materials/effects/validate-when-variable-sync.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# validateWhenVariableSync (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/effects/validate-when-variable-sync"
+/>

apps/docs/src/zh/materials/form-plugins/_meta.json

@@ -1 +1,5 @@
-[]
+[
+  "batch-outputs-plugin",
+  "infer-inputs-plugin",
+  "infer-assign-plugin"
+]

apps/docs/src/zh/materials/form-plugins/batch-outputs-plugin.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# batchOutputsPlugin (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/form-plugins/batch-outputs-plugin"
+/>

apps/docs/src/zh/materials/form-plugins/infer-assign-plugin.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# inferAssignPlugin (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/form-plugins/infer-assign-plugin"
+/>

apps/docs/src/zh/materials/form-plugins/infer-inputs-plugin.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# inferInputsPlugin (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/form-plugins/infer-inputs-plugin"
+/>

apps/docs/src/zh/materials/validate/_meta.json

@@ -0,0 +1,3 @@
+[
+  "validate-flow-value"
+]

apps/docs/src/zh/materials/validate/validate-flow-value.mdx

@@ -0,0 +1,7 @@
+import { SourceCode } from '@theme';
+
+# validateFlowValue (WIP)
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/validate/validate-flow-value"
+/>