docs(materials): update some WIP materials docs (#944)

* docs(materials): debug panel layout

* fix(material): prompt-editor default value not applied

* docs: update

* fix: file directory

* docs: blur input

* docs: db condition row

* docs: display schema

* docs: prompt editor

* docs: inputs values

* fix: ts check

apps/demo-materials/src/components/form-header/styles.tsx

@@ -6,7 +6,7 @@
 import styled from 'styled-components';
 
 export const Header = styled.div`
-  height: 30px;
+  height: 40px;
 `;
 
 export const HeaderInner = styled.div`

apps/demo-materials/src/components/free-editor/index.css

@@ -15,7 +15,6 @@
     var(--light-usage-border-color-border, rgba(28, 31, 35, 0.08));
   background: #fff;
   box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
-  padding: 10px;
   position: relative;
 }
 

apps/demo-materials/src/components/free-editor/plugins/debug-panel-plugin/components/debug-panel.tsx

@@ -6,8 +6,8 @@
 import { useState } from 'react';
 
 import styled from 'styled-components';
-import { Button, Collapsible, Tabs, Tooltip } from '@douyinfe/semi-ui';
-import { IconMinus, IconTerminal } from '@douyinfe/semi-icons';
+import { Button, SideSheet, Tabs, Tooltip } from '@douyinfe/semi-ui';
+import { IconTerminal } from '@douyinfe/semi-icons';
 
 import { WorkflowJsonEditor } from './workflow-json-editor';
 import { FullVariableList } from './full-variable-list';
@@ -17,35 +17,14 @@ const PanelWrapper = styled.div`
   box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.1);
 `;
 
-const DebugPanelButton = styled(Button)<{ $isOpen: boolean }>`
+const DebugPanelButton = styled(Button)`
   position: absolute;
   top: 0;
   right: 0;
   border-radius: 20px;
-  width: ${(props) => (props.$isOpen ? '40px' : '90px')};
-  height: ${(props) => (props.$isOpen ? '40px' : '40px')};
+  width: 90px;
+  height: 40px;
   z-index: 999;
-  top: ${(props) => (props.$isOpen ? '10px' : '0')};
-  right: ${(props) => (props.$isOpen ? '10px' : '0')};
-`;
-
-const PanelContainer = styled.div`
-  width: 1000px;
-  border-radius: 5px;
-  background-color: #fff;
-  overflow: hidden;
-  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.1);
-  z-index: 30;
-
-  .semi-tabs-bar {
-    padding-left: 20px;
-  }
-
-  .semi-tabs-content {
-    padding: 20px;
-    height: 80vh;
-    overflow: auto;
-  }
 `;
 
 export function DebugPanel() {
@@ -54,33 +33,29 @@ export function DebugPanel() {
   return (
     <PanelWrapper>
       <Tooltip content="Toggle Debug Panel">
-        <DebugPanelButton
-          $isOpen={isOpen}
-          theme={isOpen ? 'borderless' : 'light'}
-          onClick={() => setOpen((_open) => !_open)}
-        >
-          {isOpen ? (
-            <IconMinus />
-          ) : (
-            <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
-              <IconTerminal />
-              Debug
-            </div>
-          )}
+        <DebugPanelButton theme="light" onClick={() => setOpen((_open) => !_open)}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
+            <IconTerminal />
+            Debug
+          </div>
         </DebugPanelButton>
       </Tooltip>
-      <Collapsible isOpen={isOpen}>
-        <PanelContainer>
-          <Tabs>
-            <Tabs.TabPane itemKey="workflow_json" tab="Workflow JSON">
-              <WorkflowJsonEditor />
-            </Tabs.TabPane>
-            <Tabs.TabPane itemKey="variables" tab="Variable List">
-              <FullVariableList />
-            </Tabs.TabPane>
-          </Tabs>
-        </PanelContainer>
-      </Collapsible>
+      <SideSheet
+        title="Debug Panel"
+        visible={isOpen}
+        onCancel={() => setOpen(false)}
+        width={1000}
+        footer={null}
+      >
+        <Tabs>
+          <Tabs.TabPane itemKey="workflow_json" tab="Workflow JSON">
+            <WorkflowJsonEditor />
+          </Tabs.TabPane>
+          <Tabs.TabPane itemKey="variables" tab="Variable List">
+            <FullVariableList />
+          </Tabs.TabPane>
+        </Tabs>
+      </SideSheet>
     </PanelWrapper>
   );
 }

apps/demo-materials/src/components/free-editor/plugins/debug-panel-plugin/components/workflow-json-editor.tsx

@@ -34,15 +34,14 @@ export function WorkflowJsonEditor() {
     }
   };
 
-  const handleRefresh = () => {
-    setJson(JSON.stringify(ctx.document?.toJSON() || {}, null, 2));
-    setIsUpdated(false);
-  };
+  // const handleRefresh = () => {
+  //   setJson(JSON.stringify(ctx.document?.toJSON() || {}, null, 2));
+  //   setIsUpdated(false);
+  // };
 
   return (
     <div>
       <div style={{ display: 'flex', gap: 5, marginBottom: 5 }}>
-        <Button onClick={handleRefresh}>Refresh</Button>
         {isUpdated && <Button onClick={handleSync}>Sync</Button>}
       </div>
 

apps/docs/components/form-materials/components/blur-input.tsx

@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import { Field } from '@flowgram.ai/free-layout-editor';
+
+import { FreeFormMetaStoryBuilder, FormHeader } from '../../free-form-meta-story-builder';
+
+const BlurInput = React.lazy(() =>
+  import('@flowgram.ai/form-materials').then((module) => ({
+    default: module.BlurInput,
+  }))
+);
+
+export const BasicStory = () => (
+  <FreeFormMetaStoryBuilder
+    filterEndNode
+    filterStartNode
+    formMeta={{
+      render: () => (
+        <>
+          <FormHeader />
+          <Field<string> name="blur_input" defaultValue="Initial text">
+            {({ field }) => (
+              <>
+                <BlurInput
+                  value={field.value}
+                  onChange={(value) => field.onChange(value)}
+                  placeholder="Please enter text"
+                />
+                <p className="mt-2">Current value: {field.value}</p>
+                <p className="text-sm text-gray-500">
+                  Note: Value updates after clicking outside the input
+                </p>
+              </>
+            )}
+          </Field>
+        </>
+      ),
+    }}
+  />
+);
+
+export const PlaceholderStory = () => (
+  <FreeFormMetaStoryBuilder
+    filterEndNode
+    filterStartNode
+    formMeta={{
+      render: () => (
+        <>
+          <FormHeader />
+          <Field<string> name="blur_input_placeholder" defaultValue="">
+            {({ field }) => (
+              <>
+                <BlurInput
+                  value={field.value}
+                  onChange={(value) => field.onChange(value)}
+                  placeholder="This is an input field with placeholder"
+                />
+                <p className="mt-2">Current value: {field.value || 'Empty'}</p>
+              </>
+            )}
+          </Field>
+        </>
+      ),
+    }}
+  />
+);
+
+export const DisabledStory = () => (
+  <FreeFormMetaStoryBuilder
+    filterEndNode
+    filterStartNode
+    formMeta={{
+      render: () => (
+        <>
+          <FormHeader />
+          <Field<string> name="blur_input_disabled" defaultValue="Disabled state text">
+            {({ field }) => (
+              <BlurInput value={field.value} onChange={(value) => field.onChange(value)} disabled />
+            )}
+          </Field>
+        </>
+      ),
+    }}
+  />
+);

apps/docs/components/form-materials/components/code-editor.tsx

@@ -5,7 +5,7 @@
 
 import React from 'react';
 
-import { Field } from '@flowgram.ai/fixed-layout-editor';
+import { Field } from '@flowgram.ai/free-layout-editor';
 
 import { FreeFormMetaStoryBuilder, FormHeader } from '../../free-form-meta-story-builder';
 
@@ -42,7 +42,7 @@ export const BasicStory = () => (
     height={600}
     formMeta={{
       render: () => (
-        <div style={{ maxWidth: 500 }}>
+        <div style={{ width: 500 }}>
           <FormHeader />
           <Field<string | undefined> name="code_editor" defaultValue={defaultTsCode}>
             {({ field }) => (

apps/docs/components/form-materials/components/condition-row.tsx

@@ -5,7 +5,7 @@
 
 import React from 'react';
 
-import { Field } from '@flowgram.ai/fixed-layout-editor';
+import { Field } from '@flowgram.ai/free-layout-editor';
 
 import { FreeFormMetaStoryBuilder, FormHeader } from '../../free-form-meta-story-builder';
 

apps/docs/components/form-materials/components/db-condition-row.tsx

@@ -5,7 +5,7 @@
 
 import React from 'react';
 
-import { Field } from '@flowgram.ai/fixed-layout-editor';
+import { Field } from '@flowgram.ai/free-layout-editor';
 
 import { FreeFormMetaStoryBuilder, FormHeader } from '../../free-form-meta-story-builder';
 
@@ -22,7 +22,20 @@ export const BasicStory = () => (
       render: () => (
         <>
           <FormHeader />
-          <Field<any | undefined> name="db_condition_row">
+          <Field<any | undefined>
+            name="db_condition_row"
+            defaultValue={{
+              left: 'amount',
+              operator: 'gt',
+              right: {
+                type: 'constant',
+                content: 1000,
+                schema: {
+                  type: 'number',
+                },
+              },
+            }}
+          >
             {({ field }) => (
               <DBConditionRow
                 options={[

apps/docs/components/form-materials/components/display-schema-tag.tsx

@@ -16,6 +16,7 @@ const DisplaySchemaTag = React.lazy(() =>
 export const BasicStory = () => (
   <FreeFormMetaStoryBuilder
     filterEndNode
+    filterStartNode
     formMeta={{
       render: () => (
         <>

apps/docs/components/form-materials/components/display-schema-tree.tsx

@@ -16,6 +16,7 @@ const DisplaySchemaTree = React.lazy(() =>
 export const BasicStory = () => (
   <FreeFormMetaStoryBuilder
     filterEndNode
+    filterStartNode
     formMeta={{
       render: () => (
         <>

apps/docs/components/form-materials/components/dynamic-value-input.tsx

@@ -5,7 +5,7 @@
 
 import React from 'react';
 
-import { Field } from '@flowgram.ai/fixed-layout-editor';
+import { Field } from '@flowgram.ai/free-layout-editor';
 
 import { FreeFormMetaStoryBuilder, FormHeader } from '../../free-form-meta-story-builder';
 

apps/docs/components/form-materials/components/inputs-values-tree.tsx

@@ -5,7 +5,7 @@
 
 import React from 'react';
 
-import { Field } from '@flowgram.ai/fixed-layout-editor';
+import { Field } from '@flowgram.ai/free-layout-editor';
 
 import { FreeFormMetaStoryBuilder, FormHeader } from '../../free-form-meta-story-builder';
 

apps/docs/components/form-materials/components/inputs-values.tsx

@@ -5,7 +5,7 @@
 
 import React from 'react';
 
-import { Field } from '@flowgram.ai/fixed-layout-editor';
+import { Field } from '@flowgram.ai/free-layout-editor';
 
 import { FreeFormMetaStoryBuilder, FormHeader } from '../../free-form-meta-story-builder';
 

apps/docs/components/form-materials/components/json-editor-with-variables.tsx

@@ -5,7 +5,7 @@
 
 import React from 'react';
 
-import { Field } from '@flowgram.ai/fixed-layout-editor';
+import { Field } from '@flowgram.ai/free-layout-editor';
 
 import { FreeFormMetaStoryBuilder, FormHeader } from '../../free-form-meta-story-builder';
 
@@ -20,7 +20,7 @@ export const BasicStory = () => (
     filterEndNode
     formMeta={{
       render: () => (
-        <>
+        <div style={{ width: 400 }}>
           <FormHeader />
           <Field<any> name="json_editor_with_variables" defaultValue={`{ "a": {{start_0.str}}}`}>
             {({ field }) => (
@@ -30,7 +30,7 @@ export const BasicStory = () => (
               />
             )}
           </Field>
-        </>
+        </div>
       ),
     }}
   />

apps/docs/components/form-materials/components/json-schema-editor.tsx

@@ -5,8 +5,8 @@
 
 import React from 'react';
 
+import { Field } from '@flowgram.ai/free-layout-editor';
 import type { IJsonSchema } from '@flowgram.ai/form-materials';
-import { Field } from '@flowgram.ai/fixed-layout-editor';
 
 import { FreeFormMetaStoryBuilder, FormHeader } from '../../free-form-meta-story-builder';
 

apps/docs/components/form-materials/components/prompt-editor-with-inputs.tsx

@@ -5,8 +5,8 @@
 
 import React from 'react';
 
+import { Field } from '@flowgram.ai/free-layout-editor';
 import { IFlowTemplateValue, IInputsValues, InputsValuesTree } from '@flowgram.ai/form-materials';
-import { Field } from '@flowgram.ai/fixed-layout-editor';
 
 import { FreeFormMetaStoryBuilder, FormHeader } from '../../free-form-meta-story-builder';
 
@@ -21,7 +21,7 @@ export const BasicStory = () => (
     filterEndNode
     formMeta={{
       render: () => (
-        <>
+        <div style={{ width: 400 }}>
           <FormHeader />
           <Field<IInputsValues | undefined>
             name="inputsValues"
@@ -54,7 +54,7 @@ export const BasicStory = () => (
               </Field>
             )}
           </Field>
-        </>
+        </div>
       ),
     }}
   />

apps/docs/components/form-materials/components/prompt-editor-with-variables.tsx

@@ -5,7 +5,7 @@
 
 import React from 'react';
 
-import { Field } from '@flowgram.ai/fixed-layout-editor';
+import { Field } from '@flowgram.ai/free-layout-editor';
 
 import { FreeFormMetaStoryBuilder, FormHeader } from '../../free-form-meta-story-builder';
 
@@ -20,7 +20,7 @@ export const BasicStory = () => (
     filterEndNode
     formMeta={{
       render: () => (
-        <>
+        <div style={{ width: 400 }}>
           <FormHeader />
           <Field<any | undefined>
             name="prompt_editor"
@@ -40,7 +40,7 @@ You are a helpful assistant
               />
             )}
           </Field>
-        </>
+        </div>
       ),
     }}
   />

apps/docs/components/form-materials/components/prompt-editor.tsx

@@ -5,7 +5,7 @@
 
 import React from 'react';
 
-import { Field } from '@flowgram.ai/fixed-layout-editor';
+import { Field } from '@flowgram.ai/free-layout-editor';
 
 import { FreeFormMetaStoryBuilder, FormHeader } from '../../free-form-meta-story-builder';
 
@@ -26,9 +26,7 @@ export const BasicStory = () => (
             name="prompt_editor"
             defaultValue={{
               type: 'template',
-              content: `# Role
-You are a helpful assistant
-`,
+              content: '# Role \n You are a helpful assistant',
             }}
           >
             {({ field }) => (

apps/docs/components/form-materials/components/sql-editor-with-variables.tsx

@@ -5,7 +5,7 @@
 
 import React from 'react';
 
-import { Field } from '@flowgram.ai/fixed-layout-editor';
+import { Field } from '@flowgram.ai/free-layout-editor';
 
 import { FreeFormMetaStoryBuilder, FormHeader } from '../../free-form-meta-story-builder';
 
@@ -20,11 +20,11 @@ export const BasicStory = () => (
     filterEndNode
     formMeta={{
       render: () => (
-        <>
+        <div style={{ width: 400 }}>
           <FormHeader />
           <Field<string | undefined>
             name="sql_editor_with_variables"
-            defaultValue={'SELECT * FROM users WHERE user_id = {{start_0.str}}'}
+            defaultValue={'SELECT * FROM users \n WHERE user_id = {{start_0.str}}'}
           >
             {({ field }) => (
               <SQLEditorWithVariables
@@ -33,7 +33,7 @@ export const BasicStory = () => (
               />
             )}
           </Field>
-        </>
+        </div>
       ),
     }}
   />

apps/docs/components/form-materials/components/type-selector.tsx

@@ -5,8 +5,8 @@
 
 import React from 'react';
 
+import { Field } from '@flowgram.ai/free-layout-editor';
 import type { IJsonSchema } from '@flowgram.ai/form-materials';
-import { Field } from '@flowgram.ai/fixed-layout-editor';
 
 import { FreeFormMetaStoryBuilder, FormHeader } from '../../free-form-meta-story-builder';
 

apps/docs/components/form-materials/components/variable-selector.tsx

@@ -5,7 +5,7 @@
 
 import React from 'react';
 
-import { Field } from '@flowgram.ai/fixed-layout-editor';
+import { Field } from '@flowgram.ai/free-layout-editor';
 
 import { FreeFormMetaStoryBuilder, FormHeader } from '../../free-form-meta-story-builder';
 

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

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

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

@@ -1,11 +1,129 @@
 import { SourceCode } from '@theme';
+import { BasicStory, PlaceholderStory, DisabledStory } from 'components/form-materials/components/blur-input';
 
-:::warning
-The material has been developed and the documentation is still being improved. Contributions are welcome.
-:::
+# BlurInput
 
-# BlurInput (WIP)
+BlurInput is a special input component that only triggers value updates when the input loses focus, suitable for scenarios where frequent update operations need to be avoided.
+
+## Examples
+
+### Basic Usage
+
+<BasicStory />
+
+```tsx pure title="form-meta.tsx"
+const formMeta = {
+  render: () => (
+    <>
+      <FormHeader />
+      <Field<string> name="blur_input" defaultValue="Initial text">
+        {({ field }) => (
+          <>
+            <BlurInput
+              value={field.value}
+              onChange={(value) => field.onChange(value)}
+              placeholder="Please enter text"
+            />
+            <p className="mt-2">Current value: {field.value}</p>
+            <p className="text-sm text-gray-500">
+              Note: Value updates after clicking outside the input
+            </p>
+          </>
+        )}
+      </Field>
+    </>
+  )
+}
+```
+
+### With Placeholder
+
+<PlaceholderStory />
+
+```tsx pure title="form-meta.tsx"
+const formMeta = {
+  render: () => (
+    <>
+      <FormHeader />
+      <Field<string> name="blur_input_placeholder" defaultValue="">
+        {({ field }) => (
+          <>
+            <BlurInput
+              value={field.value}
+              onChange={(value) => field.onChange(value)}
+              placeholder="This is an input field with placeholder"
+            />
+            <p className="mt-2">Current value: {field.value || 'Empty'}</p>
+          </>
+        )}
+      </Field>
+    </>
+  )
+}
+```
+
+### Disabled State
+
+<DisabledStory />
+
+```tsx pure title="form-meta.tsx"
+const formMeta = {
+  render: () => (
+    <>
+      <FormHeader />
+      <Field<string> name="blur_input_disabled" defaultValue="Disabled state text">
+        {({ field }) => (
+          <BlurInput value={field.value} onChange={(value) => field.onChange(value)} disabled />
+        )}
+      </Field>
+    </>
+  )
+}
+```
+## API Reference
+
+### Properties
+
+| Property | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| value | `string` | - | The value of the input |
+| onChange | `(value: string, event?: React.FocusEvent) => void` | - | Callback function triggered when focus is lost |
+| placeholder | `string` | - | Placeholder text for the input |
+| disabled | `boolean` | `false` | Whether to disable the input |
+| ref | `React.RefObject<HTMLInputElement>` | - | Reference to the input element |
+| Other properties | Inherited from [Semi UI Input component](https://semi.design/input/) | - | Supports all other properties of the Semi UI Input component |
+
+## Source Code Guide
 
 <SourceCode
   href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/blur-input"
-/>
+/>
+
+You can copy the source code to your local machine using the CLI command:
+
+```bash
+npx @flowgram.ai/cli@latest materials components/blur-input
+```
+
+### Directory Structure
+
+```
+components/blur-input/
+└── index.tsx  # Component implementation file
+```
+
+### Core Implementation
+
+The core implementation of the BlurInput component is very concise and mainly includes the following parts:
+
+1. **State Management**: Uses `useState` to maintain internal value state, decoupled from the incoming `value` property
+2. **Value Synchronization**: Uses `useEffect` to update the internal state when the external `value` changes
+3. **Delayed Update**: Only updates the internal state during user input, and calls the externally passed `onChange` callback only when the `onBlur` event is triggered
+
+This implementation ensures that value updates only occur when the user finishes inputting and clicks outside the area, effectively reducing unnecessary update operations, especially suitable for scenarios requiring form validation or remote data requests.
+
+### Dependency Analysis
+
+#### Third-party Libraries
+
+[**Semi UI Input component**](https://semi.design/input/) provides basic input box functionality support, and the BlurInput component inherits all its properties and adds the feature of updating on blur.

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

@@ -1,11 +1,9 @@
 import { SourceCode } from '@theme';
 import { BasicStory } from 'components/form-materials/components/db-condition-row';
 
-:::warning
-The material has been developed and the documentation is still being improved. Contributions are welcome.
-:::
+# DBConditionRow
 
-# DbConditionRow (WIP)
+DBConditionRow is a database condition row component used for building database query conditions. It provides field selection, operator selection, and value input functionality, which can automatically display appropriate operators and input controls based on field types.
 
 ## Demo
 
@@ -13,7 +11,7 @@ The material has been developed and the documentation is still being improved. C
 
 <BasicStory />
 
-```typescript pure title="form-meta.tsx"
+```tsx pure title="form-meta.tsx"
 import { DBConditionRow } from '@flowgram.ai/form-materials';
 
 const formMeta = {
@@ -60,6 +58,39 @@ const formMeta = {
 }
 ```
 
+## API Reference
+
+### DBConditionRow Props
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `value` | `DBConditionRowValueType` | - | The value of the condition row, including left (field name), operator (operator), and right (value) |
+| `onChange` | `(value?: DBConditionRowValueType) => void` | - | Callback function when value changes |
+| `options` | `DBConditionOptionType[]` | - | List of optional fields, each field contains label, value, and schema |
+| `readonly` | `boolean` | `false` | Whether it is read-only mode |
+| `style` | `React.CSSProperties` | - | Custom styles |
+| `ruleConfig` | `{ ops?: ConditionOpConfigs; rules?: Record<string, IConditionRule> }` | - | **Deprecated**, use ConditionContext instead |
+
+### DBConditionRowValueType Type
+
+```typescript
+interface DBConditionRowValueType {
+  left?: string; // Field name
+  operator?: string; // Operator
+  right?: IFlowConstantRefValue; // Value, supports constant or variable reference
+}
+```
+
+### DBConditionOptionType Type
+
+```typescript
+interface DBConditionOptionType {
+  label: string | JSX.Element; // Field display name
+  value: string; // Field value
+  schema: IJsonSchema; // Field type definition
+}
+```
+
 ## Source Code Guide
 
 <SourceCode
@@ -71,3 +102,81 @@ Use the CLI command to copy the source code locally:
 ```bash
 npx @flowgram.ai/cli@latest materials components/db-condition-row
 ```
+
+### Directory Structure Explanation
+
+```
+db-condition-row/
+├── index.tsx    # Main component implementation
+├── types.ts     # Type definitions
+└── styles.css   # Style files
+```
+
+### Core Implementation Explanation
+
+#### Component Implementation Process
+
+```mermaid
+sequenceDiagram
+    participant User
+    participant LeftValue
+    participant useCondition
+    participant Operator
+    participant RightValue
+
+    User->>LeftValue: Select field
+    LeftValue->>LeftValue: Update left value
+    LeftValue->>useCondition: Trigger condition calculation
+    useCondition->>useCondition: Get field type information
+    useCondition-->>Operator: Return available operator list
+    User->>Operator: Select operator
+    Operator->>Operator: Update operator value
+    Operator->>useCondition: Recalculate target type
+    useCondition-->>RightValue: Return targetSchema
+
+    alt targetSchema exists
+        RightValue->>RightValue: Render InjectDynamicValueInput
+        User->>RightValue: Input or select value
+        RightValue->>RightValue: Update right value
+    else targetSchema does not exist
+        RightValue->>RightValue: Render disabled input box
+        RightValue->>RightValue: Display default prompt text
+    end
+
+    RightValue-->>User: Return complete condition object
+```
+
+1. **Left Value: Field Selector**: Uses Semi UI's Select component to display available fields based on options, and shows field type icons.
+
+2. **Operator: Operator Selector**: Gets the list of operators matching the field type through the useCondition Hook, and updates the operator after user selection.
+
+3. **Right Value: Value Input Component**: Dynamically displays appropriate input controls based on the selected field type and operator:
+   - When targetSchema exists, use the InjectDynamicValueInput component
+   - Otherwise, display a disabled input box with prompt information
+
+### Dependency Overview
+
+#### flowgram API
+
+[**@flowgram.ai/editor**](https://github.com/bytedance/flowgram.ai/tree/main/packages/client/editor)
+- [`I18n`](https://flowgram.ai/auto-docs/editor/variables/I18n): Internationalization utility class
+
+[**@flowgram.ai/json-schema**](https://github.com/bytedance/flowgram.ai/tree/main/packages/variable/json-schema)
+- [`IJsonSchema`](https://flowgram.ai/auto-docs/json-schema/interfaces/IJsonSchema): JSON Schema type definition
+
+#### Other Materials
+
+[**ConditionContext**](./condition-context)
+- `useCondition`: Hook to get condition configuration
+- `ConditionOpConfigs`: Operator configuration type
+- `IConditionRule`: Condition rule type
+
+[**DynamicValueInput**](./dynamic-value-input)
+- `InjectDynamicValueInput`: Injectable dynamic value input component
+
+#### Third-party Libraries
+
+[**Semi UI**](https://semi.design/)
+- [`Select`](https://semi.design/input/select): Selector component
+- [`Button`](https://semi.design/basic/button): Button component
+- [`Input`](https://semi.design/input/input): Input box component

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

@@ -1,19 +1,17 @@
 import { SourceCode } from '@theme';
 import { BasicStory } from 'components/form-materials/components/display-schema-tag';
 
-:::warning
-The material has been developed and the documentation is still being improved. Contributions are welcome.
-:::
+# DisplaySchemaTag
 
-# DisplaySchemaTag (WIP)
+DisplaySchemaTag is a tag component used to display JSON Schema. When users click on the tag, a detailed schema tree structure will pop up, making it easy to view complex data structures.
 
-## Demo
+## Examples
 
 ### Basic Usage
 
 <BasicStory />
 
-```typescript pure title="form-meta.tsx"
+```tsx pure title="form-meta.tsx"
 import { DisplaySchemaTag } from '@flowgram.ai/form-materials';
 
 const formMeta = {
@@ -54,6 +52,15 @@ const formMeta = {
 }
 ```
 
+## API Reference
+
+| Property | Type | Default Value | Description |
+| :--- | :--- | :--- | :--- |
+| title | `JSX.Element \| string` | - | The title text displayed on the tag |
+| value | `IJsonSchema` | `{}` | The JSON Schema object to display |
+| showIconInTree | `boolean` | - | Whether to show icons in the popped-up tree structure |
+| warning | `boolean` | `false` | Whether to show warning state (yellow tag) |
+
 ## Source Code Guide
 
 <SourceCode
@@ -65,3 +72,34 @@ Use the CLI command to copy the source code locally:
 ```bash
 npx @flowgram.ai/cli@latest materials components/display-schema-tag
 ```
+
+### Directory Structure
+
+```plaintext
+components/display-schema-tag/
+├── index.tsx  # Main component implementation
+└── styles.css # Component styles
+```
+
+### Core Implementation
+
+DisplaySchemaTag component is implemented based on Semi UI's Popover and Tag components, with DisplaySchemaTree integrated internally to display detailed schema structure in a pop-up box.
+
+### Dependencies
+
+#### flowgram API
+
+[**@flowgram.ai/json-schema**](https://github.com/bytedance/flowgram.ai/tree/main/packages/json-schema)
+- [`IJsonSchema`](https://flowgram.ai/auto-docs/json-schema/interfaces/IJsonSchema): JSON Schema type definition
+- [`useTypeManager`](https://flowgram.ai/auto-docs/json-schema/functions/useTypeManager): Type manager Hook
+
+
+#### Other Materials
+
+[**DisplaySchemaTree**](./display-schema-tree) Used to display detailed schema tree structure in the pop-up box
+
+#### Third-party Libraries
+
+[**Semi UI**](https://semi.design/en-US)
+- `Popover`: Pop-up box component
+- `Tag`: Tag component

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

@@ -1,19 +1,17 @@
 import { SourceCode } from '@theme';
 import { BasicStory } from 'components/form-materials/components/display-schema-tree';
 
-:::warning
-The material has been developed and the documentation is still being improved. Contributions are welcome.
-:::
+# DisplaySchemaTree
 
-# DisplaySchemaTree (WIP)
+DisplaySchemaTree is a tree component used to visually display JSON Schema structure, which can recursively show hierarchical relationships of complex data structures such as objects and arrays.
 
-## Demo
+## Examples
 
 ### Basic Usage
 
 <BasicStory />
 
-```typescript pure title="form-meta.tsx"
+```tsx pure title="form-meta.tsx"
 import { DisplaySchemaTree } from '@flowgram.ai/form-materials';
 
 const formMeta = {
@@ -53,6 +51,15 @@ const formMeta = {
 }
 ```
 
+## API Reference
+
+| Property | Type | Default Value | Description |
+| :--- | :--- | :--- | :--- |
+| value | `IJsonSchema` | `{}` | The JSON Schema object to display |
+| drilldown | `boolean` | `true` | Whether to expand nested property structure |
+| showIcon | `boolean` | `true` | Whether to show type icons |
+| typeManager | `JsonSchemaTypeManager` | - | Type manager for getting type-related information |
+
 ## Source Code Guide
 
 <SourceCode
@@ -63,4 +70,26 @@ Use the CLI command to copy the source code locally:
 
 ```bash
 npx @flowgram.ai/cli@latest materials components/display-schema-tree
-```
+```
+
+### Directory Structure
+
+```plaintext
+components/display-schema-tree/
+├── index.tsx  # Main component implementation
+└── styles.css # Component styles
+```
+
+### Core Implementation
+
+DisplaySchemaTree component displays JSON Schema hierarchical structure through recursive rendering.
+
+It uses `useTypeManager` to obtain type-related information, including icons, display text, etc. The component recursively renders the child properties of the Schema internally, supporting multi-level nested data structure display.
+
+### Dependencies
+
+#### flowgram API
+
+[**@flowgram.ai/json-schema**](https://github.com/bytedance/flowgram.ai/tree/main/packages/json-schema)
+- [`IJsonSchema`](https://flowgram.ai/auto-docs/json-schema/interfaces/IJsonSchema): JSON Schema type definition
+- [`useTypeManager`](https://flowgram.ai/auto-docs/json-schema/functions/useTypeManager): Type manager Hook

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

@@ -1,19 +1,25 @@
 import { SourceCode } from '@theme';
 import { BasicStory } from 'components/form-materials/components/inputs-values-tree';
 
-:::warning
-The material has been developed and the documentation is still being improved. Contributions are welcome.
-:::
+# InputsValuesTree
+
+InputsValuesTree is a component for displaying and editing **tree-structured input values**. Each leaf node is a key-value pair, with values supporting both constant and variable input modes through the DynamicValueInput component. The component uses a tree hierarchy display with expand/collapse functionality, making it suitable for building complex nested data structures.
+
+:::tip{title="Difference from InputsValues"}
+
+- **Structure Difference**: InputsValues only supports flat key-value pairs, while InputsValuesTree supports tree-structured nested data
+- **Display Method**: InputsValues uses a simple list display, while InputsValuesTree uses a tree structure with indentation and expand/collapse functionality
+- **Usage Scenarios**: InputsValues is suitable for simple key-value pair configurations, while InputsValuesTree is suitable for complex multi-level data structure configurations
 
-# InputsValuesTree (WIP)
+:::
 
-## Demo
+## Examples
 
 ### Basic Usage
 
 <BasicStory />
 
-```typescript
+```tsx pure title="form-meta.tsx"
 import { InputsValuesTree } from '@flowgram.ai/form-materials';
 
 const formMeta = {
@@ -49,6 +55,18 @@ const formMeta = {
 }
 ```
 
+## API Reference
+
+| Property | Type | Default Value | Description |
+| :--- | :--- | :--- | :--- |
+| value | `IInputsValues` | - | Tree-structured input value object |
+| onChange | `(value?: IInputsValues) => void` | - | Callback function when value changes |
+| readonly | `boolean` | `false` | Whether in read-only mode |
+| hasError | `boolean` | `false` | Whether to show error state |
+| schema | `IJsonSchema` | - | JSON Schema definition for validation and type hints |
+| style | `React.CSSProperties` | - | Custom styles |
+| constantProps | `{ strategies?: ConstantInputStrategy[]; [key: string]: any }` | - | Configuration properties for constant input component |
+
 ## Source Code Guide
 
 <SourceCode
@@ -59,4 +77,86 @@ Use the CLI command to copy the source code locally:
 
 ```bash
 npx @flowgram.ai/cli@latest materials components/inputs-values-tree
-```
+```
+
+### Directory Structure
+
+```plaintext
+components/inputs-values-tree/
+├── index.tsx          # Component entry file
+├── row.tsx            # Tree row component, handles display and editing of individual nodes
+├── types.ts           # Type definitions
+├── icon.tsx           # Icon components
+├── styles.css         # Component styles
+└── hooks/
+    └── use-child-list.tsx # Custom hook for handling child node lists
+```
+
+### Core Implementation
+
+InputsValuesTree component is primarily used for displaying and editing tree-structured input values, supporting two types of values: constant values and reference values.
+
+#### Workflow Sequence Diagram
+
+```mermaid
+sequenceDiagram
+    participant User as User
+    participant Tree as InputsValuesTree
+    participant ObjectList as useObjectList
+    participant Row as InputValueRow
+    participant ChildList as useChildList
+    participant DynamicInput as InjectDynamicValueInput
+
+    User->>Tree: Provide initial tree data
+    Tree->>ObjectList: Initialize top-level data
+    ObjectList-->>Tree: Return list operation methods
+    Tree->>Row: Render each top-level node
+    Row->>ChildList: Check for child nodes
+    ChildList-->>Row: Return child node list and operation methods
+
+    alt User expands node
+        User->>Row: Click expand button
+        Row->>Row: Toggle collapse state
+        Row->>Row: Render child node list
+    end
+
+    alt User adds node
+        User->>Row: Click add button
+        Row->>ObjectList: Call add method
+        ObjectList-->>Tree: Update data
+        Tree-->>User: Trigger onChange callback
+    end
+
+    alt User modifies node value
+        User->>DynamicInput: Edit value
+        DynamicInput->>Row: Call onUpdateValue
+        Row->>ObjectList: Update node value
+        ObjectList-->>Tree: Update data
+        Tree-->>User: Trigger onChange callback
+    end
+```
+
+Key Features:
+
+1. **Tree Structure Display**: Displays nested tree data structures through recursion
+2. **Value Type Support**: Supports both constant values (strings, numbers, booleans, etc.) and reference values that point to other nodes in the workflow
+3. **CRUD Operations**: Supports adding, deleting, and modifying node keys and values
+4. **Configurable**: Customize constant input component behavior through constantProps
+
+The component internally uses the useObjectList hook to manage object lists and the InputValueRow component to render each row of data. When the user clicks the add button, an empty string-type constant value is added by default.
+
+### Dependencies
+
+#### flowgram API
+
+[**@flowgram.ai/editor**](https://github.com/bytedance/flowgram.ai/tree/main/packages/client/editor)
+- [`I18n`](https://flowgram.ai/auto-docs/editor/variables/I18n): Internationalization utility
+
+[**@flowgram.ai/json-schema**](https://github.com/bytedance/flowgram.ai/tree/main/packages/json-schema)
+- [`IJsonSchema`](https://flowgram.ai/auto-docs/json-schema/interfaces/IJsonSchema): JSON Schema type definition
+
+#### Third-party Libraries
+
+[**Semi UI**](https://semi.design/en-US)
+- `Button`: Button component
+- `IconPlus`: Plus icon component

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

@@ -23,7 +23,14 @@ import { PromptEditorWithVariables } from '@flowgram.ai/form-materials';
 const formMeta = {
   render: () => (
     <>
-      <Field<any> name="prompt_template" defaultValue="Hello {{user.name}}, your balance is {{user.balance}}">
+      <Field<any> name="prompt_template" defaultValue={{
+              type: 'template',
+              content: `# Role
+You are a helpful assistant
+
+# Query
+{{start_0.str}}`,
+            }}>
         {({ field }) => (
           <PromptEditorWithVariables
             value={field.value}
@@ -132,6 +139,9 @@ The `EditorVariableTagInject` component is responsible for variable tag renderin
 - `EditorAPI`: Editor API interface
 
 #### coze-editor-extensions materials
+
+See [CozeEditorExtensions](./coze-editor-extensions)
+
 - `EditorVariableTree`: Variable tree selection trigger
 - `EditorVariableTagInject`: Variable tag display
 
@@ -162,4 +172,4 @@ graph TD
     P --> Q[Insert variable]
 
     Q --> R[Update template content]
-```
+```

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

@@ -1,18 +1,53 @@
 import { SourceCode } from '@theme';
 import { BasicStory } from 'components/form-materials/components/prompt-editor';
 
-:::warning
-The material has been developed and the documentation is still being improved. Contributions are welcome.
-:::
+# PromptEditor
 
-# PromptEditor (WIP)
+PromptEditor is a professional prompt editor component built on Coze Editor, supporting Markdown syntax highlighting, Jinja template syntax highlighting, and other features, suitable for creating and editing AI prompt templates.
 
-## Demo
+## Examples
 
 ### Basic Usage
 
 <BasicStory />
 
+```tsx pure title="form-meta.tsx"
+import { PromptEditor } from '@flowgram.ai/form-materials';
+
+const formMeta = {
+  render: () => (
+    <>
+      <Field<any | undefined>
+        name="prompt_editor"
+        defaultValue={{
+          type: 'template',
+          content: '# Role\n You are a helpful assistant',
+        }}
+      >
+        {({ field }) => (
+          <PromptEditor value={field.value} onChange={(value) => field.onChange(value)} />
+        )}
+      </Field>
+    </>
+  ),
+}
+```
+
+## API Reference
+
+| Property | Type | Default Value | Description |
+| :--- | :--- | :--- | :--- |
+| value | `{ type: 'template'; content: string }` | - | Editor value object |
+| onChange | `(value: { type: 'template'; content: string }) => void` | - | Callback function when value changes |
+| readonly | `boolean` | `false` | Whether in read-only mode |
+| placeholder | `string` | - | Placeholder text |
+| activeLinePlaceholder | `React.ReactNode` | - | Active line placeholder |
+| style | `React.CSSProperties` | - | Custom styles |
+| hasError | `boolean` | `false` | Whether to show error state |
+| disableMarkdownHighlight | `boolean` | `false` | Whether to disable Markdown highlighting |
+| options | `Partial<InferValues<Preset[number]>>` | - | Additional editor options |
+| children | `React.ReactNode` | - | Child components |
+
 ## Source Code Guide
 
 <SourceCode
@@ -25,3 +60,43 @@ Use the CLI command to copy the source code locally:
 npx @flowgram.ai/cli@latest materials components/prompt-editor
 ```
 
+### Directory Structure
+
+```plaintext
+components/prompt-editor/
+├── index.tsx          # Component entry file
+├── editor.tsx         # Editor core implementation
+├── types.tsx          # Type definitions
+├── styles.css         # Component styles
+└── extensions/        # Editor extensions
+    ├── jinja.tsx      # Jinja template syntax highlighting
+    ├── markdown.tsx   # Markdown syntax highlighting
+    └── language-support.tsx # Language support configuration
+```
+
+### Core Implementation
+
+The PromptEditor component is built on @flowgram.ai/coze-editor and provides professional prompt editing functionality. Key features include:
+
+1. **Markdown Syntax Highlighting**: Supports syntax highlighting for Markdown elements such as headings, italics, bold, lists, etc.
+2. **Jinja Template Syntax Highlighting**: Supports syntax highlighting for Jinja template engine, facilitating the creation of dynamic prompts
+3. **Responsive Updates**: Listens for external value changes and synchronizes to the editor
+4. **Customizability**: Supports multiple configuration options such as custom styles and placeholders
+
+The component internally uses lazy loading to optimize performance and provides core editor functionality through EditorProvider and Renderer components.
+
+### Dependencies
+
+#### flowgram API
+
+[**@flowgram.ai/coze-editor**](https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/coze-editor)
+- `Renderer`: Editor rendering component
+- `EditorProvider`: Editor context provider
+- `ActiveLinePlaceholder`: Active line placeholder component
+- `preset-prompt`: Prompt editor preset plugin
+
+#### Third-party Libraries
+
+[**CodeMirror**](https://codemirror.net/)
+- Provides underlying editor functionality support
+

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

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

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

@@ -4,7 +4,7 @@ import { SourceCode } from '@theme';
 物料已完成开发，文档还在完善中，欢迎参与贡献
 :::
 
-# 物料依赖注入 (WIP)
+# InjectMaterial (WIP)
 
 <SourceCode
   href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/shared/inject-material"

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

@@ -1,11 +1,129 @@
 import { SourceCode } from '@theme';
+import { BasicStory, PlaceholderStory, DisabledStory } from 'components/form-materials/components/blur-input';
 
-:::warning
-物料已完成开发，文档还在完善中，欢迎参与贡献
-:::
+# BlurInput
 
-# BlurInput (WIP)
+BlurInput 是一个特殊的输入框组件，它只在输入框失焦时才会触发值的更新，适用于需要避免频繁触发更新操作的场景。
+
+## 案例演示
+
+### 基本使用
+
+<BasicStory />
+
+```tsx pure title="form-meta.tsx"
+const formMeta = {
+  render: () => (
+    <>
+      <FormHeader />
+      <Field<string> name="blur_input" defaultValue="Initial text">
+        {({ field }) => (
+          <>
+            <BlurInput
+              value={field.value}
+              onChange={(value) => field.onChange(value)}
+              placeholder="Please enter text"
+            />
+            <p className="mt-2">Current value: {field.value}</p>
+            <p className="text-sm text-gray-500">
+              Note: Value updates after clicking outside the input
+            </p>
+          </>
+        )}
+      </Field>
+    </>
+  )
+}
+```
+
+### 带占位符
+
+<PlaceholderStory />
+
+```tsx pure title="form-meta.tsx"
+const formMeta = {
+  render: () => (
+    <>
+      <FormHeader />
+      <Field<string> name="blur_input_placeholder" defaultValue="">
+        {({ field }) => (
+          <>
+            <BlurInput
+              value={field.value}
+              onChange={(value) => field.onChange(value)}
+              placeholder="This is an input field with placeholder"
+            />
+            <p className="mt-2">Current value: {field.value || 'Empty'}</p>
+          </>
+        )}
+      </Field>
+    </>
+  )
+}
+```
+
+### 禁用状态
+
+<DisabledStory />
+
+```tsx pure title="form-meta.tsx"
+const formMeta = {
+  render: () => (
+    <>
+      <FormHeader />
+      <Field<string> name="blur_input_disabled" defaultValue="Disabled state text">
+        {({ field }) => (
+          <BlurInput value={field.value} onChange={(value) => field.onChange(value)} disabled />
+        )}
+      </Field>
+    </>
+  )
+}
+```
+## API 参考
+
+### 属性
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| :--- | :--- | :--- | :--- |
+| value | `string` | - | 输入框的值 |
+| onChange | `(value: string, event?: React.FocusEvent) => void` | - | 失焦时触发的回调函数 |
+| placeholder | `string` | - | 输入框占位符文本 |
+| disabled | `boolean` | `false` | 是否禁用输入框 |
+| ref | `React.RefObject<HTMLInputElement>` | - | 输入框的引用 |
+| 其他属性 | 继承自 [Semi UI Input 组件](https://semi.design/zh-CN/input/input) | - | 支持 Semi UI Input 组件的所有其他属性 |
+
+## 源码导读
 
 <SourceCode
   href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/blur-input"
 />
+
+使用 CLI 命令可以复制源代码到本地：
+
+```bash
+npx @flowgram.ai/cli@latest materials components/blur-input
+```
+
+### 目录结构讲解
+
+```
+components/blur-input/
+└── index.tsx  # 组件实现文件
+```
+
+### 核心实现说明
+
+BlurInput 组件的核心实现非常简洁，主要包含以下几个部分：
+
+1. **状态管理**：使用 `useState` 维护内部值状态，与传入的 `value` 属性解耦
+2. **值同步**：使用 `useEffect` 在外部 `value` 变化时更新内部状态
+3. **延迟更新**：在用户输入时只更新内部状态，仅在 `onBlur` 事件触发时才调用外部传入的 `onChange` 回调
+
+这种实现方式确保了值的更新只在用户完成输入并点击外部区域时发生，有效减少了不必要的更新操作，特别适合需要进行表单验证或远程数据请求的场景。
+
+### 依赖梳理
+
+#### 第三方库
+
+[**Semi UI Input 组件**](https://semi.design/zh-CN/input/input) 提供基础的输入框功能支持，BlurInput 组件继承了其所有属性并添加了失焦更新的特性。

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

@@ -112,7 +112,7 @@ code-editor/
 │   ├── light.ts        # 亮色主题
 │   └── index.ts        # 主题导出
 ├── utils.ts            # 工具函数
-└── README.md          # 组件说明文档
+└── styles.css          # 样式文件
 ```
 
 ### 核心实现说明

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

@@ -108,8 +108,7 @@ npx @flowgram.ai/cli@latest materials components/condition-row
 condition-row/
 ├── index.tsx           # 主组件实现，包含 ConditionRow 核心逻辑
 ├── types.ts            # 类型定义
-├── styles.tsx          # 样式定义，使用 styled-components
-└── README.md          # 组件说明文档
+└── styles.css          # 样式文件
 ```
 
 ### 核心实现说明

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

@@ -1,19 +1,17 @@
 import { SourceCode } from '@theme';
 import { BasicStory } from 'components/form-materials/components/db-condition-row';
 
-:::warning
-物料已完成开发，文档还在完善中，欢迎参与贡献
-:::
+# DBConditionRow
 
-# DbConditionRow (WIP)
+DBConditionRow 是一个数据库条件行组件，用于构建数据库查询条件。它提供了字段选择、操作符选择和值输入功能，可以根据字段类型自动显示合适的操作符和输入控件。
 
-## 示例
+## 案例演示
 
-### 基础用法
+### 基本使用
 
 <BasicStory />
 
-```typescript pure title="form-meta.tsx"
+```tsx pure title="form-meta.tsx"
 import { DBConditionRow } from '@flowgram.ai/form-materials';
 
 const formMeta = {
@@ -60,14 +58,126 @@ const formMeta = {
 }
 ```
 
-## 源码指南
+## API 参考
+
+### DBConditionRow Props
+
+| 属性名 | 类型 | 默认值 | 描述 |
+|--------|------|--------|------|
+| `value` | `DBConditionRowValueType` | - | 条件行的值，包含 left（字段名）、operator（操作符）和 right（值） |
+| `onChange` | `(value?: DBConditionRowValueType) => void` | - | 值变化时的回调函数 |
+| `options` | `DBConditionOptionType[]` | - | 可选字段列表，每个字段包含 label、value 和 schema |
+| `readonly` | `boolean` | `false` | 是否为只读模式 |
+| `style` | `React.CSSProperties` | - | 自定义样式 |
+| `ruleConfig` | `{ ops?: ConditionOpConfigs; rules?: Record<string, IConditionRule> }` | - | **已废弃**，使用 ConditionContext 替代 |
+
+### DBConditionRowValueType 类型
+
+```typescript
+interface DBConditionRowValueType {
+  left?: string; // 字段名
+  operator?: string; // 操作符
+  right?: IFlowConstantRefValue; // 值，支持常量或变量引用
+}
+```
+
+### DBConditionOptionType 类型
+
+```typescript
+interface DBConditionOptionType {
+  label: string | JSX.Element; // 字段显示名称
+  value: string; // 字段值
+  schema: IJsonSchema; // 字段类型定义
+}
+```
+
+## 源码导读
 
 <SourceCode
   href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/db-condition-row"
 />
 
-使用 CLI 命令将源码复制到本地：
+使用 CLI 命令可以复制源代码到本地：
 
 ```bash
 npx @flowgram.ai/cli@latest materials components/db-condition-row
 ```
+
+### 目录结构讲解
+
+```
+db-condition-row/
+├── index.tsx    # 主组件实现
+├── types.ts     # 类型定义
+└── styles.css   # 样式文件
+```
+
+### 核心实现说明
+
+#### 组件实现流程
+
+```mermaid
+sequenceDiagram
+    participant 用户
+    participant 左值
+    participant useCondition
+    participant 操作符
+    participant 右值
+
+    用户->>左值: 选择字段
+    左值->>左值: 更新 left 值
+    左值->>useCondition: 触发条件计算
+    useCondition->>useCondition: 获取字段类型信息
+    useCondition-->>操作符: 返回可用操作符列表
+    用户->>操作符: 选择操作符
+    操作符->>操作符: 更新 operator 值
+    操作符->>useCondition: 重新计算目标类型
+    useCondition-->>右值: 返回 targetSchema
+
+    alt 存在 targetSchema
+        右值->>右值: 渲染 InjectDynamicValueInput
+        用户->>右值: 输入或选择值
+        右值->>右值: 更新 right 值
+    else 不存在 targetSchema
+        右值->>右值: 渲染禁用的输入框
+        右值->>右值: 显示默认提示文本
+    end
+
+    右值-->>用户: 返回完整条件对象
+```
+
+1. **左值：字段选择器**：使用 Semi UI 的 Select 组件，根据 options 显示可用字段，并展示字段类型图标。
+
+2. **操作符：操作符选择器**：通过 useCondition Hook 获取与字段类型匹配的操作符列表，用户选择后更新 operator。
+
+3. **右值：值输入组件**：根据选择的字段类型和操作符，动态显示合适的输入控件：
+   - 当存在 targetSchema 时，使用 InjectDynamicValueInput 组件
+   - 否则显示禁用的输入框，展示提示信息
+
+
+### 依赖梳理
+
+#### flowgram API
+
+[**@flowgram.ai/editor**](https://github.com/bytedance/flowgram.ai/tree/main/packages/client/editor)
+- [`I18n`](https://flowgram.ai/auto-docs/editor/variables/I18n): 国际化工具类
+
+[**@flowgram.ai/json-schema**](https://github.com/bytedance/flowgram.ai/tree/main/packages/variable/json-schema)
+- [`IJsonSchema`](https://flowgram.ai/auto-docs/json-schema/interfaces/IJsonSchema): JSON Schema 类型定义
+
+#### 其他物料
+
+[**ConditionContext**](./condition-context)
+- `useCondition`: 获取条件配置的 Hook
+- `ConditionOpConfigs`: 操作符配置类型
+- `IConditionRule`: 条件规则类型
+
+[**DynamicValueInput**](./dynamic-value-input)
+- `InjectDynamicValueInput`: 可注入的动态值输入组件
+
+#### 第三方库
+
+[**Semi UI**](https://semi.design/zh-CN/)
+- [`Select`](https://semi.design/zh-CN/input/select): 选择器组件
+- [`Button`](https://semi.design/zh-CN/basic/button): 按钮组件
+- [`Input`](https://semi.design/zh-CN/input/input): 输入框组件

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

@@ -1,19 +1,17 @@
 import { SourceCode } from '@theme';
 import { BasicStory } from 'components/form-materials/components/display-schema-tag';
 
-:::warning
-物料已完成开发，文档还在完善中，欢迎参与贡献
-:::
+# DisplaySchemaTag
 
-# DisplaySchemaTag (WIP)
+DisplaySchemaTag 是一个用于展示 JSON Schema 的标签组件，当用户点击标签时，会弹出详细的 schema 树形结构，方便查看复杂的数据结构。
 
-## 示例
+## 案例演示
 
-### 基础用法
+### 基本使用
 
 <BasicStory />
 
-```typescript pure title="form-meta.tsx"
+```tsx pure title="form-meta.tsx"
 import { DisplaySchemaTag } from '@flowgram.ai/form-materials';
 
 const formMeta = {
@@ -54,14 +52,54 @@ const formMeta = {
 }
 ```
 
-## 源码指南
+## API 参考
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| :--- | :--- | :--- | :--- |
+| title | `JSX.Element \| string` | - | 标签显示的标题文本 |
+| value | `IJsonSchema` | `{}` | 要展示的 JSON Schema 对象 |
+| showIconInTree | `boolean` | - | 是否在弹出的树形结构中显示图标 |
+| warning | `boolean` | `false` | 是否显示警告状态（黄色标签） |
+
+## 源码导读
 
 <SourceCode
   href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/display-schema-tag"
 />
 
-使用 CLI 命令将源码复制到本地：
+使用 CLI 命令可以复制源代码到本地：
 
 ```bash
 npx @flowgram.ai/cli@latest materials components/display-schema-tag
 ```
+
+### 目录结构讲解
+
+```plaintext
+components/display-schema-tag/
+├── index.tsx  # 组件主要实现文件
+└── styles.css # 组件样式文件
+```
+
+### 核心实现说明
+
+DisplaySchemaTag 组件基于 Semi UI 的 Popover 和 Tag 组件实现，内部集成了 DisplaySchemaTree 来在弹出框中展示详细的 schema 结构。
+
+### 依赖梳理
+
+#### flowgram API
+
+[**@flowgram.ai/json-schema**](https://github.com/bytedance/flowgram.ai/tree/main/packages/json-schema)
+- [`IJsonSchema`](https://flowgram.ai/auto-docs/json-schema/interfaces/IJsonSchema): JSON Schema 类型定义
+- [`useTypeManager`](https://flowgram.ai/auto-docs/json-schema/functions/useTypeManager): 类型管理器 Hook
+
+
+#### 其他物料
+
+[**DisplaySchemaTree**](./display-schema-tree) 用于在弹出框中展示详细的 schema 树形结构
+
+#### 第三方库
+
+[**Semi UI**](https://semi.design/zh-CN)
+- `Popover`: 弹出框组件
+- `Tag`: 标签组件

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

@@ -1,19 +1,17 @@
 import { SourceCode } from '@theme';
 import { BasicStory } from 'components/form-materials/components/display-schema-tree';
 
-:::warning
-物料已完成开发，文档还在完善中，欢迎参与贡献
-:::
+# DisplaySchemaTree
 
-# DisplaySchemaTree (WIP)
+DisplaySchemaTree 是一个用于可视化展示 JSON Schema 结构的树形组件，可以递归地展示对象、数组等复杂数据结构的层级关系。
 
-## 示例
+## 案例演示
 
-### 基础用法
+### 基本使用
 
 <BasicStory />
 
-```typescript pure title="form-meta.tsx"
+```tsx pure title="form-meta.tsx"
 import { DisplaySchemaTree } from '@flowgram.ai/form-materials';
 
 const formMeta = {
@@ -53,14 +51,45 @@ const formMeta = {
 }
 ```
 
-## 源码指南
+## API 参考
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| :--- | :--- | :--- | :--- |
+| value | `IJsonSchema` | `{}` | 要展示的 JSON Schema 对象 |
+| drilldown | `boolean` | `true` | 是否展开嵌套的属性结构 |
+| showIcon | `boolean` | `true` | 是否显示类型图标 |
+| typeManager | `JsonSchemaTypeManager` | - | 类型管理器，用于获取类型相关信息 |
+
+## 源码导读
 
 <SourceCode
   href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/display-schema-tree"
 />
 
-使用 CLI 命令将源码复制到本地：
+使用 CLI 命令可以复制源代码到本地：
 
 ```bash
 npx @flowgram.ai/cli@latest materials components/display-schema-tree
 ```
+
+### 目录结构讲解
+
+```plaintext
+components/display-schema-tree/
+├── index.tsx  # 组件主要实现文件
+└── styles.css # 组件样式文件
+```
+
+### 核心实现说明
+
+DisplaySchemaTree 组件通过递归渲染的方式展示 JSON Schema 的层级结构。
+
+它使用 `useTypeManager` 获取类型相关信息，包括图标、显示文本等。组件内部递归渲染 Schema 的子属性，支持多级嵌套的数据结构展示。
+
+### 依赖梳理
+
+#### flowgram API
+
+[**@flowgram.ai/json-schema**](https://github.com/bytedance/flowgram.ai/tree/main/packages/json-schema)
+- [`IJsonSchema`](https://flowgram.ai/auto-docs/json-schema/interfaces/IJsonSchema): JSON Schema 类型定义
+- [`useTypeManager`](https://flowgram.ai/auto-docs/json-schema/functions/useTypeManager): 类型管理器 Hook

apps/docs/src/zh/materials/components/dynamic-value-input.mdx

@@ -58,31 +58,6 @@ const formMeta = {
 }
 ```
 
-### 常量模式
-
-```tsx
-<DynamicValueInput
-  value={{
-    type: 'constant',
-    content: 'Hello World',
-    schema: { type: 'string' }
-  }}
-  onChange={handleChange}
-/>
-```
-
-### 变量模式
-
-```tsx
-<DynamicValueInput
-  value={{
-    type: 'ref',
-    content: ['start_0', 'query']
-  }}
-  onChange={handleChange}
-/>
-```
-
 ## API 参考
 
 ### DynamicValueInput Props
@@ -97,31 +72,6 @@ const formMeta = {
 | `schema` | `IJsonSchema` | - | 约束输入类型的 JSON Schema |
 | `constantProps` | `ConstantInputProps` | - | 传递给常量输入组件的额外属性 |
 
-### IFlowConstantRefValue
-
-```typescript
-type IFlowConstantRefValue =
-  | IFlowConstantValue  // 常量值
-  | IFlowRefValue;     // 变量引用
-
-interface IFlowConstantValue {
-  type: 'constant';
-  content: any;           // 常量值
-  schema: IJsonSchema;  // 值的类型定义
-}
-
-interface IFlowRefValue {
-  type: 'ref';
-  content: string; // 变量路径，如 "user.name"
-}
-```
-
-### 模式切换
-
-组件支持两种输入模式的智能切换：
-
-1. **常量模式**: 直接输入值
-2. **变量模式**: 选择作用域内的变量
 
 ## 源码导读
 
@@ -141,8 +91,7 @@ npx @flowgram.ai/cli@latest materials components/dynamic-value-input
 dynamic-value-input/
 ├── index.tsx           # 主组件实现，包含 DynamicValueInput 核心逻辑
 ├── hooks.ts            # 自定义 Hooks，处理变量引用和 schema 选择
-├── styles.tsx          # 样式定义，使用 styled-components
-└── README.md          # 组件说明文档
+└── styles.css          # 样式文件
 ```
 
 ### 核心实现说明
@@ -178,22 +127,6 @@ if (value?.type === 'ref') {
 }
 ```
 
-### 使用到的 flowgram API
-
-#### @flowgram.ai/json-schema
-- `JsonSchemaUtils`: JSON Schema 工具类
-- `IJsonSchema`: JSON Schema 类型定义
-- `useTypeManager`: 类型管理器 Hook
-
-#### @flowgram.ai/variable-core
-- `useScopeAvailable`: 获取当前作用域的可用变量
-
-#### 内部组件
-- [`InjectVariableSelector`](./variable-selector): 变量选择器
-- [`TypeSelector`](./type-selector): 类型选择器
-- `ConstantInput`: 常量输入组件
-- `createInjectMaterial`: 创建可注入的物料组件
-
 ### 整体流程
 
 ```mermaid
@@ -216,3 +149,32 @@ graph TD
 
 ```
 
+### 使用到的 flowgram API
+
+[**@flowgram.ai/json-schema**](https://github.com/bytedance/flowgram.ai/tree/main/packages/variable/json-schema)
+- [`JsonSchemaUtils`](https://flowgram.ai/auto-docs/json-schema/modules/JsonSchemaUtils): JSON Schema 工具类
+- [`IJsonSchema`](https://flowgram.ai/auto-docs/json-schema/interfaces/IJsonSchema): JSON Schema 类型定义
+- [`useTypeManager`](https://flowgram.ai/auto-docs/json-schema/functions/useTypeManager): 类型管理器 Hook
+
+[**@flowgram.ai/variable-core**](https://github.com/bytedance/flowgram.ai/tree/main/packages/variable/variable-engine/core)
+- [`useScopeAvailable`](https://flowgram.ai/auto-docs/variable-core/functions/useScopeAvailable): 获取当前作用域的可用变量
+
+
+### 依赖的其他物料
+
+[**TypeSelector**](./type-selector) 类型选择器
+
+[**ConstantInput**](./constant-input) 常量输入组件
+
+[**VariableSelector**](./variable-selector) 变量选择器
+- `InjectVariableSelector`: 依赖注入变量选择器
+
+
+[**FlowValue**](../common/flow-value)
+- `IFlowConstantRefValue`: 常量或变量引用值类型
+
+[**InjectMaterial**](../common/inject-material) 可注入物料组件
+- `createInjectMaterial`: 创建可注入的物料组件
+
+
+

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

@@ -1,11 +1,17 @@
 import { SourceCode } from '@theme';
 import { BasicStory } from 'components/form-materials/components/inputs-values-tree';
 
-:::warning
-物料已完成开发，文档还在完善中，欢迎参与贡献
-:::
+# InputsValuesTree
+
+InputsValuesTree 是一个用于展示和编辑**树状结构输入值**的组件，每个叶子节点为一个键值对，值支持常量和变量两种输入模式，通过 DynamicValueInput 组件实现灵活的输入方式。组件采用树形层级展示，支持节点的展开和折叠，适用于构建复杂的嵌套数据结构。
 
-# InputsValuesTree (WIP)
+:::tip{title="和 InputsValues 的区别"}
+
+- **结构差异**：InputsValues 仅支持一级键值对列表，而 InputsValuesTree 支持树形嵌套结构
+- **展示方式**：InputsValues 使用简单的行列表展示，InputsValuesTree 使用树形结构展示，带有缩进和展开/折叠功能
+- **适用场景**：InputsValues 适用于简单的键值对配置，InputsValuesTree 适用于复杂的多层级数据结构配置
+
+:::
 
 ## 案例演示
 
@@ -13,7 +19,7 @@ import { BasicStory } from 'components/form-materials/components/inputs-values-t
 
 <BasicStory />
 
-```typescript
+```tsx pure title="form-meta.tsx"
 import { InputsValuesTree } from '@flowgram.ai/form-materials';
 
 const formMeta = {
@@ -49,7 +55,17 @@ const formMeta = {
 }
 ```
 
+## API 参考
 
+| 属性名 | 类型 | 默认值 | 说明 |
+| :--- | :--- | :--- | :--- |
+| value | `IInputsValues` | - | 树状结构的输入值对象 |
+| onChange | `(value?: IInputsValues) => void` | - | 值变化时的回调函数 |
+| readonly | `boolean` | `false` | 是否只读模式 |
+| hasError | `boolean` | `false` | 是否显示错误状态 |
+| schema | `IJsonSchema` | - | JSON Schema 定义，用于验证和类型提示 |
+| style | `React.CSSProperties` | - | 自定义样式 |
+| constantProps | `{ strategies?: ConstantInputStrategy[]; [key: string]: any }` | - | 常量输入组件的配置属性 |
 
 ## 源码导读
 
@@ -57,9 +73,90 @@ const formMeta = {
   href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/inputs-values-tree"
 />
 
-
 使用 CLI 命令可以复制源代码到本地：
 
 ```bash
 npx @flowgram.ai/cli@latest materials components/inputs-values-tree
 ```
+
+### 目录结构讲解
+
+```plaintext
+components/inputs-values-tree/
+├── index.tsx          # 组件入口文件
+├── row.tsx            # 树行组件，处理单个节点的展示和编辑
+├── types.ts           # 类型定义文件
+├── icon.tsx           # 图标组件
+├── styles.css         # 组件样式文件
+└── hooks/
+    └── use-child-list.tsx # 处理子节点列表的自定义 Hook
+```
+
+### 核心实现说明
+
+InputsValuesTree 组件主要用于展示和编辑树状结构的输入值，支持两种类型的值：常量值（constant）和引用值（ref）。
+
+#### 工作流程时序图
+
+```mermaid
+sequenceDiagram
+    participant User as 用户
+    participant Tree as InputsValuesTree
+    participant ObjectList as useObjectList
+    participant Row as InputValueRow
+    participant ChildList as useChildList
+    participant DynamicInput as InjectDynamicValueInput
+
+    User->>Tree: 提供初始树状数据
+    Tree->>ObjectList: 初始化顶层数据
+    ObjectList-->>Tree: 返回列表操作方法
+    Tree->>Row: 渲染每个顶层节点
+    Row->>ChildList: 检查是否有子节点
+    ChildList-->>Row: 返回子节点列表和操作方法
+
+    alt 用户展开节点
+        User->>Row: 点击展开按钮
+        Row->>Row: 切换collapse状态
+        Row->>Row: 渲染子节点列表
+    end
+
+    alt 用户添加节点
+        User->>Row: 点击添加按钮
+        Row->>ObjectList: 调用add方法
+        ObjectList-->>Tree: 更新数据
+        Tree-->>User: 触发onChange回调
+    end
+
+    alt 用户修改节点值
+        User->>DynamicInput: 编辑值
+        DynamicInput->>Row: 调用onUpdateValue
+        Row->>ObjectList: 更新节点值
+        ObjectList-->>Tree: 更新数据
+        Tree-->>User: 触发onChange回调
+    end
+```
+
+核心功能特点：
+
+1. **树状结构展示**：通过递归的方式展示嵌套的树状数据结构
+2. **值类型支持**：支持常量值和引用值两种类型，常量值可以是字符串、数字、布尔值等，引用值指向工作流中的其他节点
+3. **增删改操作**：支持添加、删除、修改节点的键名和值
+4. **可配置性**：通过 constantProps 属性可以自定义常量输入组件的行为
+
+组件内部使用 useObjectList 钩子管理对象列表，使用 InputValueRow 组件渲染每一行数据。当用户点击添加按钮时，会默认添加一个空的字符串类型常量值。
+
+### 依赖梳理
+
+#### flowgram API
+
+[**@flowgram.ai/editor**](https://github.com/bytedance/flowgram.ai/tree/main/packages/client/editor)
+- [`I18n`](https://flowgram.ai/auto-docs/editor/variables/I18n): 国际化工具类
+
+[**@flowgram.ai/json-schema**](https://github.com/bytedance/flowgram.ai/tree/main/packages/json-schema)
+- [`IJsonSchema`](https://flowgram.ai/auto-docs/json-schema/interfaces/IJsonSchema): JSON Schema 类型定义
+
+#### 第三方库
+
+[**Semi UI**](https://semi.design/zh-CN)
+- `Button`: 按钮组件
+- `IconPlus`: 加号图标组件

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

@@ -135,8 +135,7 @@ npx @flowgram.ai/cli@latest materials components/inputs-values
 inputs-values/
 ├── index.tsx           # 主组件实现，包含 InputsValues 核心逻辑
 ├── types.ts            # 类型定义
-├── styles.tsx          # 样式定义，使用 styled-components
-└── README.md          # 组件说明文档
+└── styles.css          # 样式文件
 ```
 
 ### 核心实现说明

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

@@ -9,6 +9,17 @@ JsonEditorWithVariables 是一个增强版的 JSON 编辑器，支持在 JSON
 
 ### 基本使用
 
+:::tip{title="变量插入"}
+
+在编辑器中输入 `@` 字符可以触发变量选择器。
+
+输入 `@` 后会显示可用的变量列表，选择变量后会自动插入为 `{{variable.name}}` 格式。
+
+
+**注意**：`JsonEditorWithVariables` 默认不支持 `{` 触发，因为 `{` 是 JSON 的语法。
+
+:::
+
 <BasicStory />
 
 ```tsx pure title="form-meta.tsx"
@@ -31,22 +42,6 @@ const formMeta = {
 }
 ```
 
-### 带变量的 JSON 示例
-
-```json
-{
-  "user_info": {
-    "name": "{{start_0.name}}",
-    "email": "{{start_0.email}}",
-  }
-}
-```
-
-### 变量插入
-
-在编辑器中输入 `@` 字符可以触发变量选择器。
-
-输入 `@` 后会显示可用的变量列表，选择变量后会自动插入为 `{{variable.name}}` 格式。
 
 ## API 参考
 
@@ -62,20 +57,6 @@ const formMeta = {
 | `readonly` | `boolean` | `false` | 是否为只读模式 |
 | `options` | `Options` | - | CodeMirror 配置选项 |
 
-### 变量语法
-
-在 JSON 字符串中使用双花括号语法引用变量：
-
-```json
-{
-  "key": "{{variable.path}}"
-}
-```
-
-支持的变量格式：
-- `{{start_0.name}}` - 简单变量
-- `{{start_0.address.city}}` - 嵌套属性
-
 ## 源码导读
 
 <SourceCode
@@ -93,86 +74,18 @@ npx @flowgram.ai/cli@latest materials components/json-editor-with-variables
 ```
 json-editor-with-variables/
 ├── index.tsx           # 懒加载导出文件
-├── editor.tsx          # 主组件实现
-└── README.md          # 组件说明文档
+└── editor.tsx          # 主组件实现
 ```
 
 ### 核心实现说明
 
-#### 变量语法解析
-通过正则表达式解析 JSON 中的变量引用：
+#### 变量能力集成
 
-```typescript
-const matches = findAllMatches(originalSource, /\{\{([^\}]*)\}\}/g);
-```
+JsonEditorWithVariables 扩展了基础 JsonCodeEditor，并基于 coze-editor-extensions 增加了变量引用和回显功能。
 
+### 依赖的其他物料
 
-#### 变量选择器集成
-集成 `EditorVariableTree` 和 `EditorVariableTagInject` 扩展：
-
-```typescript
-<EditorVariableTree triggerCharacters={TRIGGER_CHARACTERS} />
-<EditorVariableTagInject />
-```
-
-#### 触发字符
-使用 `@` 作为变量选择的触发字符：
-
-```typescript
-const TRIGGER_CHARACTERS = ['@'];
-```
-
-### 使用到的 flowgram API
-
-#### @flowgram.ai/coze-editor
-- `JsonCodeEditor`: JSON 代码编辑器
-- `transformerCreator`: 语法转换器创建器
-- `EditorVariableTree`: 变量树选择器
-- `EditorVariableTagInject`: 变量标签注入器
-- `Text`: 文本处理工具
-
-#### @flowgram.ai/i18n
-- `I18n`: 国际化支持
-
-#### coze-editor-extensions 物料
+[**CozeEditorExtensions**](./coze-editor-extensions)
 - `EditorVariableTree`: 变量树选择触发
 - `EditorVariableTagInject`: 变量标签展示
 
-
-### 整体流程
-
-```mermaid
-graph TD
-    A[JsonEditorWithVariables 组件] --> B[渲染 JsonCodeEditor]
-    B --> C[加载 JSON 语法高亮]
-    B --> D[集成变量扩展]
-
-    D --> E[EditorVariableTree]
-    D --> F[EditorVariableTagInject]
-
-    E --> G[监听 @ 触发]
-    F --> H[处理变量标签]
-
-    G --> I[显示变量列表]
-    I --> J[选择并插入变量]
-
-    H --> L[渲染变量标签样式]
-
-    J --> M[更新编辑器内容]
-```
-
-#### 自定义触发字符
-可以通过扩展支持更多触发字符：
-
-```typescript
-const CUSTOM_TRIGGERS = ['@', '#', '$'];
-
-<JsonCodeEditor
-  options={{
-    transformer: customTransformer,
-  }}
->
-  <EditorVariableTree triggerCharacters={CUSTOM_TRIGGERS} />
-</JsonCodeEditor>
-```
-

apps/docs/src/zh/materials/components/json-schema-editor.mdx

@@ -88,10 +88,10 @@ npx @flowgram.ai/cli@latest materials components/json-schema-editor
 json-schema-editor/
 ├── index.tsx           # 主组件实现
 ├── types.ts            # 类型定义
-├── hooks.ts            # 状态管理钩子
-├── styles.ts           # 样式组件
+├── hooks.tsx           # 状态管理钩子
+├── styles.css          # 样式文件
 ├── default-value.tsx   # 默认值编辑器
-└── README.md          # 组件说明文档
+└── icon.tsx            # 图标组件
 ```
 
 ### 核心实现说明

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

@@ -3,12 +3,22 @@ import { BasicStory } from 'components/form-materials/components/prompt-editor-w
 
 # PromptEditorWithInputs
 
-PromptEditorWithInputs 是一个增强版的提示编辑器，集成了输入变量管理功能。它基于 PromptEditor 构建，额外提供了输入变量的树形选择器，使用户能够在提示模板中方便地引用和管理输入变量。
+PromptEditorWithInputs 是一个增强版的提示编辑器，集成了**节点输入提示**功能。
+
+它基于 [PromptEditor](./prompt-editor) 构建，通过 `@`, `{` 字符弹出节点输入选择器，使用户能够在提示模板中方便地引用节点的输入。
 
 ## 案例演示
 
 ### 基本使用
 
+:::tip{title="Inputs 插入"}
+
+在编辑器中输入 `@`, `{` 字符可以触发 Inputs 选择器。
+
+输入 `@`, `{` 后会显示可用的变量列表，选择变量后会自动插入为 `{{inputs.path}}` 格式。
+
+:::
+
 <BasicStory />
 
 ```tsx pure title="form-meta.tsx"
@@ -54,12 +64,6 @@ const formMeta = {
 }
 ```
 
-### Inputs 插入
-
-在编辑器中输入 `@`, `{` 字符可以触发 Inputs 选择器。
-
-输入 `@`, `{` 后会显示可用的变量列表，选择变量后会自动插入为 `{{inputs.path}}` 格式。
-
 
 ## API 参考
 
@@ -96,101 +100,24 @@ npx @flowgram.ai/cli@latest materials components/prompt-editor-with-inputs
 
 ```
 prompt-editor-with-inputs/
-├── index.tsx           # 懒加载导出文件
-├── editor.tsx          # 主组件实现
-└── README.md          # 组件说明文档
-
-prompt-editor/
-├── index.tsx           # 基础提示编辑器导出
-├── editor.tsx          # 基础提示编辑器实现
-├── types.ts            # 类型定义
-├── styles.ts           # 样式组件
-└── extensions/         # 编辑器扩展
-    ├── markdown.tsx    # Markdown高亮
-    ├── language-support.tsx # 语言支持
-    └── jinja.tsx       # Jinja模板高亮
+└──  index.tsx          # 主组件实现
 ```
 
 ### 核心实现说明
 
 #### 输入变量集成
-PromptEditorWithInputs 扩展了基础 PromptEditor，增加了输入变量选择器：
-
-```typescript
-export function PromptEditorWithInputs({
-  inputsValues,
-  ...restProps
-}: PromptEditorWithInputsProps) {
-  return (
-    <PromptEditor {...restProps}>
-      <EditorInputsTree inputsValues={inputsValues} />
-    </PromptEditor>
-  );
-}
-```
-
-#### 基础提示编辑器
-基础 PromptEditor 提供了完整的模板编辑功能：
 
-```typescript
-<PromptEditor
-  value={field.value}
-  onChange={(value) => field.onChange(value)}
-  placeholder="输入提示模板..."
-  activeLinePlaceholder="按 @ 插入变量"
-/>
-```
+PromptEditorWithInputs 扩展了基础 [PromptEditor](./prompt-editor)，并基于 [coze-editor-extensions](./coze-editor-extensions) 增加了节点 inputs 引用功能。
 
-#### 编辑器扩展
-基础编辑器集成了多个扩展：
 
-- **MarkdownHighlight**: 提供Markdown语法高亮
-- **LanguageSupport**: 支持多种编程语言
-- **JinjaHighlight**: Jinja2模板语法高亮
-
-#### 变量选择器
-`EditorInputsTree` 组件提供了树形结构的变量选择器：
-
-```typescript
-<EditorInputsTree inputsValues={inputsValues} />
-```
+### 依赖的其他物料
 
-### 使用到的 flowgram API
+[**PromptEditor**](./prompt-editor)
 
-#### @flowgram.ai/coze-editor/react
-- `Renderer`: 编辑器渲染器
-- `EditorProvider`: 编辑器提供者
-- `ActiveLinePlaceholder`: 活动行占位符
-- `InferValues`: 类型推断工具
+[**CozeEditorExtensions**](./coze-editor-extensions)
+- `EditorInputsTree`: 输入树选择触发
 
-#### @flowgram.ai/coze-editor/preset-prompt
-- `preset`: 提示编辑器预设配置
-- `EditorAPI`: 编辑器API接口
-
-#### 通用物料逻辑
+[**FlowValue**](../common/flow-value)
 - `IInputsValues`: 输入变量类型定义
 
-### 整体流程
-
-```mermaid
-graph TD
-    A[PromptEditorWithInputs] --> B[传递 inputsValues]
-    A --> C[PromptEditor 渲染]
-    C --> D[加载预设配置]
-    D --> E[集成扩展插件]
-
-    E --> F[MarkdownHighlight]
-    E --> G[LanguageSupport]
-    E --> H[JinjaHighlight]
 
-    F --> I[语法高亮]
-    G --> J[语言支持]
-    H --> K[模板语法]
-
-    B --> L[EditorInputsTree]
-    L --> M[输入树解析 + 展示]
-    M --> N[变量选择]
-    N --> O[插入变量]
-
-    O --> P[更新模板内容]
-```

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

@@ -3,7 +3,9 @@ import { BasicStory } from 'components/form-materials/components/prompt-editor-w
 
 # PromptEditorWithVariables
 
-PromptEditorWithVariables 是一个增强版的提示编辑器，集成了变量管理功能。它基于 PromptEditor 构建，提供了变量树选择器和变量标签注入功能，使用户能够在提示模板中方便地引用和管理变量。
+PromptEditorWithVariables 是一个增强版的提示编辑器，集成了变量引用功能。
+
+它基于 [PromptEditor](./prompt-editor) 构建，通过 `@`, `{` 弹出变量树选择器，并将输入变量回显为标签，使用户能够在提示模板中方便地引用和管理变量。
 
 <br />
 <div>
@@ -15,6 +17,15 @@ PromptEditorWithVariables 是一个增强版的提示编辑器，集成了变量
 
 ### 基本使用
 
+:::tip{title="变量插入"}
+
+在编辑器中输入 `@`, `{` 字符可以触发变量选择器。
+
+输入 `@`, `{` 后会显示可用的变量列表，选择变量后会自动插入为 `{{variable.path}}` 格式。
+
+:::
+
+
 <BasicStory />
 
 ```tsx pure title="form-meta.tsx"
@@ -23,8 +34,14 @@ import { PromptEditorWithVariables } from '@flowgram.ai/form-materials';
 const formMeta = {
   render: () => (
     <>
-      <FormHeader />
-      <Field<any> name="prompt_template" defaultValue="Hello {{user.name}}, your balance is {{user.balance}}">
+      <Field<any> name="prompt_template" defaultValue={{
+              type: 'template',
+              content: `# Role
+You are a helpful assistant
+
+# Query
+{{start_0.str}}`,
+            }}>
         {({ field }) => (
           <PromptEditorWithVariables
             value={field.value}
@@ -37,13 +54,6 @@ const formMeta = {
 }
 ```
 
-
-### 变量插入
-
-在编辑器中输入 `@`, `{` 字符可以触发变量选择器。
-
-输入 `@`, `{` 后会显示可用的变量列表，选择变量后会自动插入为 `{{variable.path}}` 格式。
-
 ## API 参考
 
 ### PromptEditorWithVariables Props
@@ -63,7 +73,7 @@ const formMeta = {
 ## 源码导读
 
 <SourceCode
-  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/prompt-editor-with-variables"
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/prompt-editor-with-variables/index.tsx"
 />
 
 使用 CLI 命令可以复制源代码到本地：
@@ -76,93 +86,20 @@ npx @flowgram.ai/cli@latest materials components/prompt-editor-with-variables
 
 ```
 prompt-editor-with-variables/
-├── index.tsx           # 懒加载导出文件
-├── editor.tsx          # 主组件实现
-└── README.md          # 组件说明文档
-
-prompt-editor/
-├── index.tsx           # 基础提示编辑器导出
-├── editor.tsx          # 基础提示编辑器实现
-├── types.ts            # 类型定义
-├── styles.ts           # 样式组件
-└── extensions/         # 编辑器扩展
-    ├── markdown.tsx    # Markdown高亮
-    ├── language-support.tsx # 语言支持
-    └── jinja.tsx       # Jinja模板高亮
+└── index.tsx           # 主组件实现
 ```
 
 ### 核心实现说明
 
-#### 变量选择器集成
-PromptEditorWithVariables 扩展了基础 PromptEditor，增加了变量管理功能：
-
-```typescript
-export function PromptEditorWithVariables(props: PromptEditorWithVariablesProps) {
-  return (
-    <PromptEditor {...props}>
-      <EditorVariableTree />
-      <EditorVariableTagInject />
-    </PromptEditor>
-  );
-}
-```
-
-#### 变量树选择器
-`EditorVariableTree` 组件提供了树形结构的变量选择器：
-
-- 支持按 `@` 触发变量选择
-- 支持嵌套变量的树形展示
-- 支持搜索和过滤变量
-- 支持变量类型图标显示
+#### 变量能力集成
 
-#### 变量标签注入
-`EditorVariableTagInject` 组件负责变量标签的渲染和管理：
+PromptEditorWithVariables 扩展了基础 [PromptEditor](./prompt-editor)，并基于 [CozeEditorExtensions](./coze-editor-extensions) 增加了变量引用和回显功能。
 
-- 变量标签的样式渲染
-- 变量标签的交互处理
-- 变量标签的验证和错误提示
+### 依赖的其他物料
 
-### 使用到的 flowgram API
+[**PromptEditor**](./prompt-editor)
 
-#### @flowgram.ai/coze-editor/react
-- `Renderer`: 编辑器渲染器
-- `EditorProvider`: 编辑器提供者
-- `ActiveLinePlaceholder`: 活动行占位符
-- `InferValues`: 类型推断工具
-
-#### @flowgram.ai/coze-editor/preset-prompt
-- `preset`: 提示编辑器预设配置
-- `EditorAPI`: 编辑器API接口
-
-#### coze-editor-extensions 物料
+[**CozeEditorExtensions**](./coze-editor-extensions)
 - `EditorVariableTree`: 变量树选择触发
-- `EditorVariableTagInject`: 变量标签展示
-
-### 整体流程
+- `EditorVariableTagInject`: 变量 Tag 回显
 
-```mermaid
-graph TD
-    A[PromptEditorWithVariables] --> B[渲染 PromptEditor]
-    B --> C[加载预设配置]
-    C --> D[集成扩展插件]
-
-    D --> E[MarkdownHighlight]
-    D --> F[LanguageSupport]
-    D --> G[JinjaHighlight]
-
-    E --> H[语法高亮]
-    F --> I[语言支持]
-    G --> J[模板语法]
-
-    A --> K[集成变量扩展]
-    K --> L[EditorVariableTree]
-    K --> M[EditorVariableTagInject]
-
-    L --> N[变量选择器]
-    M --> O[变量标签渲染]
-
-    N --> P[变量选择]
-    P --> Q[插入变量]
-
-    Q --> R[更新模板内容]
-```

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

@@ -1,11 +1,9 @@
 import { SourceCode } from '@theme';
 import { BasicStory } from 'components/form-materials/components/prompt-editor';
 
-:::warning
-物料已完成开发，文档还在完善中，欢迎参与贡献
-:::
+# PromptEditor
 
-# PromptEditor (WIP)
+PromptEditor 是一个专业的提示词编辑器组件，基于 Coze Editor 构建，支持 Markdown 语法高亮、Jinja 模板语法高亮等功能，适用于创建和编辑 AI 提示词模板。
 
 ## 案例演示
 
@@ -13,6 +11,43 @@ import { BasicStory } from 'components/form-materials/components/prompt-editor';
 
 <BasicStory />
 
+```tsx pure title="form-meta.tsx"
+import { PromptEditor } from '@flowgram.ai/form-materials';
+
+const formMeta = {
+  render: () => (
+    <>
+      <Field<any | undefined>
+        name="prompt_editor"
+        defaultValue={{
+          type: 'template',
+          content: '# Role\n You are a helpful assistant',
+        }}
+      >
+        {({ field }) => (
+          <PromptEditor value={field.value} onChange={(value) => field.onChange(value)} />
+        )}
+      </Field>
+    </>
+  ),
+}
+```
+
+## API 参考
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| :--- | :--- | :--- | :--- |
+| value | `{ type: 'template'; content: string }` | - | 编辑器的值对象 |
+| onChange | `(value: { type: 'template'; content: string }) => void` | - | 值变化时的回调函数 |
+| readonly | `boolean` | `false` | 是否只读模式 |
+| placeholder | `string` | - | 占位符文本 |
+| activeLinePlaceholder | `React.ReactNode` | - | 活动行占位符 |
+| style | `React.CSSProperties` | - | 自定义样式 |
+| hasError | `boolean` | `false` | 是否显示错误状态 |
+| disableMarkdownHighlight | `boolean` | `false` | 是否禁用 Markdown 高亮 |
+| options | `Partial<InferValues<Preset[number]>>` | - | 编辑器额外选项 |
+| children | `React.ReactNode` | - | 子组件 |
+
 ## 源码导读
 
 <SourceCode
@@ -24,3 +59,44 @@ import { BasicStory } from 'components/form-materials/components/prompt-editor';
 ```bash
 npx @flowgram.ai/cli@latest materials components/prompt-editor
 ```
+
+### 目录结构讲解
+
+```plaintext
+components/prompt-editor/
+├── index.tsx          # 组件入口文件
+├── editor.tsx         # 编辑器核心实现
+├── types.tsx          # 类型定义文件
+├── styles.css         # 组件样式文件
+└── extensions/        # 编辑器扩展功能
+    ├── jinja.tsx      # Jinja 模板语法高亮支持
+    ├── markdown.tsx   # Markdown 语法高亮支持
+    └── language-support.tsx # 语言支持基础配置
+```
+
+### 核心实现说明
+
+PromptEditor 组件基于 @flowgram.ai/coze-editor 构建，提供了专业的提示词编辑功能。主要特点包括：
+
+1. **Markdown 语法高亮**：支持标题、斜体、粗体、列表等 Markdown 元素的语法高亮
+2. **Jinja 模板语法高亮**：支持 Jinja 模板引擎的语法高亮，方便创建动态提示词
+3. **响应式更新**：监听外部值变化并同步到编辑器
+4. **可定制性**：支持自定义样式、占位符等多种配置选项
+
+组件内部使用懒加载优化性能，并通过 EditorProvider 和 Renderer 组件提供编辑器核心功能。
+
+### 依赖梳理
+
+#### flowgram API
+
+[**@flowgram.ai/coze-editor**](https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/coze-editor)
+- `Renderer`: 编辑器渲染组件
+- `EditorProvider`: 编辑器上下文提供者
+- `ActiveLinePlaceholder`: 活动行占位符组件
+- `preset-prompt`: 提示词编辑器预设插件
+
+#### 第三方库
+
+[**CodeMirror**](https://codemirror.net/)
+- 提供底层编辑器功能支持
+

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

@@ -9,6 +9,14 @@ SQLEditorWithVariables 是一个增强版的 SQL 编辑器，支持在 SQL 中
 
 ### 基本使用
 
+:::tip{title="变量插入"}
+
+在编辑器中输入 `@`, `{` 字符可以触发变量选择器。
+
+输入 `@`, `{` 后会显示可用的变量列表，选择变量后会自动插入为 `{{variable.name}}` 格式。
+
+:::
+
 <BasicStory />
 
 ```tsx pure title="form-meta.tsx"
@@ -45,12 +53,6 @@ WHERE id = {{start_0.user_id}}
 LIMIT 10;
 ```
 
-### 变量插入
-
-在编辑器中输入 `@`, `{` 字符可以触发变量选择器。
-
-输入 `@`, `{` 后会显示可用的变量列表，选择变量后会自动插入为 `{{variable.name}}` 格式。
-
 ## API 参考
 
 ### SQLEditorWithVariables Props
@@ -65,18 +67,6 @@ LIMIT 10;
 | `readonly` | `boolean` | `false` | 是否为只读模式 |
 | `options` | `Options` | - | CodeMirror 配置选项 |
 
-### 变量语法
-
-在 SQL 字符串中使用双花括号语法引用变量：
-
-```sql
-SELECT * FROM orders WHERE user_id = {{variable.path}}
-```
-
-支持的变量格式：
-- `{{start_0.name}}` - 简单变量
-- `{{start_0.address.city}}` - 嵌套属性
-
 ## 源码导读
 
 <SourceCode
@@ -94,64 +84,17 @@ npx @flowgram.ai/cli@latest materials components/sql-editor-with-variables
 ```
 sql-editor-with-variables/
 ├── index.tsx           # 懒加载导出文件
-├── editor.tsx          # 主组件实现
-└── README.md          # 组件说明文档
+└── editor.tsx          # 主组件实现
 ```
 
 ### 核心实现说明
 
-#### 变量选择器集成
-集成 `EditorVariableTree` 和 `EditorVariableTagInject` 扩展：
-
-```typescript
-<EditorVariableTree />
-<EditorVariableTagInject />
-```
-
-#### 触发字符
-默认使用 `@` 作为变量选择的触发字符。若需要自定义触发字符，可使用底层 `SQLCodeEditor` 进行扩展：
-
-```typescript
-import { SQLCodeEditor } from '@flowgram.ai/form-materials';
-
-<SQLCodeEditor>
-  <EditorVariableTree triggerCharacters={["@", "#", "$"]} />
-  <EditorVariableTagInject />
-</SQLCodeEditor>
-```
-
-### 使用到的 flowgram API
+#### 变量能力集成
 
-#### @flowgram.ai/coze-editor
-- `SQLCodeEditor`: SQL 代码编辑器
-- `EditorVariableTree`: 变量树选择器
-- `EditorVariableTagInject`: 变量标签注入器
+SQLEditorWithVariables 扩展了基础 SQLCodeEditor，并基于 coze-editor-extensions 增加了变量引用和回显功能。
 
-#### @flowgram.ai/i18n
-- `I18n`: 国际化支持
+### 依赖的其他物料
 
-#### coze-editor-extensions 物料
+[**CozeEditorExtensions**](./coze-editor-extensions)
 - `EditorVariableTree`: 变量树选择触发
 - `EditorVariableTagInject`: 变量标签展示
-
-### 整体流程
-
-```mermaid
-graph TD
-    A[SQLEditorWithVariables 组件] --> B[渲染 SQLCodeEditor]
-    B --> C[加载 SQL 语法高亮]
-    B --> D[集成变量扩展]
-
-    D --> E[EditorVariableTree]
-    D --> F[EditorVariableTagInject]
-
-    E --> G[监听 @ 触发]
-    F --> H[处理变量标签]
-
-    G --> I[显示变量列表]
-    I --> J[选择并插入变量]
-
-    H --> L[渲染变量标签样式]
-
-    J --> M[更新编辑器内容]
-```

apps/docs/src/zh/materials/components/type-selector.mdx

@@ -70,8 +70,7 @@ npx @flowgram.ai/cli@latest materials components/type-selector
 
 ```
 type-selector/
-├── index.tsx           # 主组件实现，包含 TypeSelector 核心逻辑
-└── README.md          # 组件说明文档
+└── index.tsx           # 主组件实现，包含 TypeSelector 核心逻辑
 ```
 
 ### 核心实现说明

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

@@ -135,8 +135,7 @@ variable-selector/
 ├── index.tsx           # 主组件实现，包含 VariableSelector 核心逻辑
 ├── context.tsx         # 提供 `VariableSelectorContext` 上下文，支持全局配置变量过滤逻辑
 ├── use-variable-tree.tsx # 自定义 Hook，处理变量树数据的转换和过滤
-├── styles.tsx          # 样式定义，使用 styled-components
-└── README.md          # 组件说明文档
+└── styles.css          # 样式文件
 ```
 
 

packages/materials/form-materials/src/components/code-editor/editor.tsx

@@ -57,18 +57,28 @@ export function BaseCodeEditor({
 }: CodeEditorPropsType) {
   const editorRef = useRef<EditorAPI | null>(null);
 
+  const editorValue = String(value || '');
+
   useEffect(() => {
     // listen to value change
-    if (editorRef.current?.getValue() !== value) {
-      editorRef.current?.setValue(String(value || ''));
+    if (editorRef.current?.getValue() !== editorValue) {
+      // apply updates on readonly mode
+      const editorView = editorRef.current?.$view;
+      editorView?.dispatch({
+        changes: {
+          from: 0,
+          to: editorView?.state.doc.length,
+          insert: editorValue,
+        },
+      });
     }
-  }, [value]);
+  }, [editorValue]);
 
   return (
     <div className={`gedit-m-code-editor-container ${mini ? 'mini' : ''}`}>
       <EditorProvider>
         <OriginCodeEditor
-          defaultValue={String(value || '')}
+          defaultValue={editorValue}
           options={{
             uri: `file:///untitled${getSuffixByLanguageId(languageId)}`,
             languageId,

packages/materials/form-materials/src/components/db-condition-row/types.ts

@@ -9,7 +9,6 @@ import { IFlowConstantRefValue } from '@/shared';
 
 export interface DBConditionRowValueType {
   left?: string;
-  schema?: IJsonSchema;
   operator?: string;
   right?: IFlowConstantRefValue;
 }

packages/materials/form-materials/src/components/prompt-editor/editor.tsx

@@ -43,12 +43,22 @@ export function PromptEditor(props: PromptEditorPropsType) {
 
   const editorRef = useRef<EditorAPI | null>(null);
 
+  const editorValue = String(value?.content || '');
+
   useEffect(() => {
     // listen to value change
-    if (editorRef.current?.getValue() !== value?.content) {
-      editorRef.current?.setValue(String(value?.content || ''));
+    if (editorRef.current?.getValue() !== editorValue) {
+      // apply updates on readonly mode
+      const editorView = editorRef.current?.$view;
+      editorView?.dispatch({
+        changes: {
+          from: 0,
+          to: editorView?.state.doc.length,
+          insert: editorValue,
+        },
+      });
     }
-  }, [value]);
+  }, [editorValue]);
 
   return (
     <div className={`gedit-m-prompt-editor-container ${hasError ? 'has-error' : ''}`} style={style}>
@@ -58,7 +68,7 @@ export function PromptEditor(props: PromptEditorPropsType) {
             editorRef.current = editor;
           }}
           plugins={preset}
-          defaultValue={String(value?.content)}
+          defaultValue={editorValue}
           options={{
             readOnly: readonly,
             editable: !readonly,