docs(materials): auto rename ref docs (#264)

apps/docs/components/materials.tsx

@@ -0,0 +1,45 @@
+// @ts-expect-error
+import { PackageManagerTabs, SourceCode } from '@theme';
+
+export function MaterialDisplay(props: any) {
+  return (
+    <div>
+      <br />
+      <PackageManagerTabs
+        command={{
+          'By Import': `import { ${props.exportName} } from '@flowgram.ai/materials'`,
+          // components/type-selector/index.tsx -> components/type-selector
+          'By CLI': `npx @flowgram.ai/form-materials ${props.filePath
+            .split('/')
+            .slice(0, -1)
+            .join('/')}`,
+        }}
+      />
+      <br />
+      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+        <div style={{ width: '42%' }}>
+          {props.imgs.map((img: string | any, index: number) => (
+            <div key={index}>
+              <img
+                loading="lazy"
+                src={typeof img === 'string' ? img : img.src}
+                style={{ width: '100%' }}
+              />
+              {img.caption && (
+                <div style={{ textAlign: 'center', fontSize: 12, color: '#666' }}>
+                  {img.caption}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+        <div style={{ width: '55%' }}>
+          {props.children}
+          <SourceCode
+            href={`https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/${props.filePath}`}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

apps/docs/scripts/translate.ts

@@ -45,13 +45,15 @@ You are a translator.
 You will translate the following content from ${sourceLang} to ${targetLang}.\n
 `;
 
-  if (previousTargetContent) {
-    systemPrompts += `
-The target file is translated previously, here is the content:
-${previousTargetContent}
-Only translate the content that is different in ${sourceLang}.\n
-`;
-  }
+  console.log('previousTargetContent', previousTargetContent);
+
+  //   if (previousTargetContent) {
+  //     systemPrompts += `
+  // The target file is translated previously, here is the content:
+  // ${previousTargetContent}
+  // Only translate the content that is different in ${sourceLang}.\n
+  // `;
+  //   }
 
   systemPrompts += `
 Constraint:

apps/docs/src/en/guide/advanced/form-materials.mdx

@@ -1,3 +1,6 @@
+import { PackageManagerTabs } from '@theme';
+import { MaterialDisplay } from '../../../../components/materials';
+
 # Official Form Materials
 
 ## How to Use?
@@ -6,25 +9,22 @@
 
 Official form materials can be used directly via package reference:
 
-import { PackageManagerTabs } from '@theme';
-
-<PackageManagerTabs command={{
-  npm: "npm install @flowgram.ai/form-materials"
-}} />
+<PackageManagerTabs command="install @flowgram.ai/form-materials" />
 
 ```tsx
 import { JsonSchemaEditor } from '@flowgram.ai/form-materials'
 ```
 
+
 ### Adding Material Source Code via CLI
 
-If customization is required (e.g., modifying text, styles, or business logic), it is recommended to **add the material source code to the project for customization via CLI**:
+If customization of components is required (e.g., changing text, styles, or business logic), it is recommended to **add the material source code to the project for customization via CLI**:
 
 ```bash
 npx @flowgram.ai/form-materials
 ```
 
-After running, the CLI will prompt the user to select the material to add:
+After running, the CLI will prompt the user to select the material to add to the project:
 
 ```console
 ? Select one material to add: (Use arrow keys)
@@ -33,110 +33,90 @@ After running, the CLI will prompt the user to select the material to add:
   components/variable-selector
 ```
 
-Users can also directly add the source code of a specific material via CLI:
+Users can also directly add the source code of a specified material via CLI:
 
 ```bash
 npx @flowgram.ai/form-materials components/json-schema-editor
 ```
 
-Once the CLI completes successfully, the relevant materials will be automatically added to the `src/form-materials` directory in the current project.
+After the CLI runs successfully, the relevant materials will be automatically added to the `src/form-materials` directory in the current project.
 
 :::warning Notes
 
-1. The official materials are currently implemented based on [Semi Design](https://semi.design/). If there are requirements for an underlying component library, the source code can be copied via CLI and replaced.
-2. Some materials depend on third-party npm libraries, which will be automatically installed during CLI execution.
-3. Some materials depend on other official materials. The source code of these dependent materials will also be added to the project during CLI execution.
+1. Official materials are currently implemented based on [Semi Design](https://semi.design/). If there is a need for a different underlying component library, the source code can be copied via CLI for replacement.
+2. Some materials may depend on third-party npm libraries, which will be automatically installed during CLI execution.
+3. Some materials may depend on other official materials. The source code of these dependent materials will also be added to the project during CLI execution.
 
 :::
 
 ## Currently Supported Component Materials
 
-### [TypeSelector](https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/type-selector/index.tsx)
-
-TypeSelector is used for variable type selection.
-
-<img loading="lazy" src="/materials/type-selector.png" style={{width:500}}/>
-
-Usage via package reference:
-
-```tsx
-import { TypeSelector } from '@flowgram.ai/materials'
-```
-
-Adding source code via CLI:
-```bash
-npx @flowgram.ai/materials components/type-selector
-```
+### TypeSelector
 
-### [VariableSelector](https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/variable-selector/index.tsx)
+<MaterialDisplay
+  imgs={['/materials/type-selector.png']}
+  filePath="components/type-selector/index.tsx"
+  exportName="TypeSelector"
+>
+  TypeSelector is used for variable type selection.
+</MaterialDisplay>
 
-VariableSelector is used for selecting a single variable.
 
-<img loading="lazy" src="/materials/variable-selector.png" style={{width:500}}/>
+### VariableSelector
 
-Usage via package reference:
+<MaterialDisplay
+  imgs={['/materials/variable-selector.png']}
+  filePath="components/variable-selector/index.tsx"
+  exportName="VariableSelector"
+>
+  VariableSelector is used to display a variable tree and select a single variable from it.
+</MaterialDisplay>
 
-```tsx
-import { VariableSelector } from '@flowgram.ai/materials'
-```
 
-Adding source code via CLI:
-```bash
-npx @flowgram.ai/materials components/variable-selector
-```
+### JsonSchemaEditor
 
-### [JsonSchemaEditor](https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/json-schema-editor/index.tsx)
+<MaterialDisplay
+  imgs={['/materials/json-schema-editor.png']}
+  filePath="components/json-schema-editor/index.tsx"
+  exportName="JsonSchemaEditor"
+>
+  JsonSchemaEditor is used for visually editing [JsonSchema](https://json-schema.org/).
 
-JsonSchemaEditor is used for visually editing JsonSchema, commonly used for configuring node output variables visually.
+  Commonly used for visually configuring the output variables of nodes.
+</MaterialDisplay>
 
-<img loading="lazy" src="/materials/json-schema-editor.png" style={{width:500}}/>
 
-Usage via package reference:
+### DynamicValueInput
 
-```tsx
-import { JsonSchemaEditor } from '@flowgram.ai/materials'
-```
-
-Adding source code via CLI:
-```bash
-npx @flowgram.ai/materials components/json-schema-editor
-```
-
-### [DynamicValueInput](https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/dynamic-value-input/index.tsx)
-
-DynamicValueInput is used for configuring values (constant values + variable values).
-
-<img loading="lazy" src="/materials/dynamic-value-input.png" style={{width:500}}/>
-
-Usage via package reference:
-
-```tsx
-import { DynamicValueInput } from '@flowgram.ai/materials'
-```
-
-Adding source code via CLI:
-```bash
-npx @flowgram.ai/materials components/dynamic-value-input
-```
+<MaterialDisplay
+  imgs={['/materials/dynamic-value-input.png']}
+  filePath="components/dynamic-value-input/index.tsx"
+  exportName="DynamicValueInput"
+>
+  DynamicValueInput is used for configuring values (constant values + variable values).
+</MaterialDisplay>
 
 ## Currently Supported Effect Materials
 
-### [provideBatchInputEffect](https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/effects/provide-batch-input/index.ts)
-
-provideBatchInputEffect is used for configuring batch input derivation in loops. It automatically derives two variables based on the input:
-
-- item: Derived from the input variable array type, representing each item in the loop
-- index: Numeric type, representing the iteration count
-
-<img loading="lazy" src="/materials/provide-batch-input.png" style={{width:500}}/>
-
-Usage via package reference:
-
-```tsx
-import { provideBatchInputEffect } from '@flowgram.ai/materials'
-```
-
-Adding source code via CLI:
-```bash
-npx @flowgram.ai/materials effects/provide-batch-input
-```
+### provideBatchInput
+
+<MaterialDisplay
+  imgs={[{ src: '/materials/provide-batch-input.png', caption: 'Type of item is automatically inferred based on preceding type.' }]}
+  filePath="effects/provide-batch-input/index.ts"
+  exportName="provideBatchInputEffect"
+>
+  provideBatchInputEffect is used for configuring loop batch input derivation. It automatically derives two variables based on the input:
+  - item: Derived from the input variable array type, representing each item in the loop.
+  - index: Numeric type, representing the iteration count.
+</MaterialDisplay>
+
+### autoRenameRef
+
+<MaterialDisplay
+  imgs={[{ src: '/materials/auto-rename-ref.gif', caption: 'When the query variable name changes, automatically rename references in downstream inputs.' }]}
+  filePath="effects/auto-rename-ref/index.ts"
+  exportName="autoRenameRefEffect"
+>
+  When the name of a preceding output variable changes:
+  - All references to that variable in form items are automatically renamed.
+</MaterialDisplay>

apps/docs/src/zh/guide/advanced/form-materials.mdx

@@ -1,3 +1,6 @@
+import { PackageManagerTabs } from '@theme';
+import { MaterialDisplay } from '../../../../components/materials';
+
 # 官方表单物料
 
 ## 如何使用？
@@ -6,11 +9,7 @@
 
 官方表单物料可以直接通过包引用使用：
 
-import { PackageManagerTabs } from '@theme';
-
-<PackageManagerTabs command={{
-  npm: "npm install @flowgram.ai/form-materials"
-}} />
+<PackageManagerTabs command="install @flowgram.ai/form-materials" />
 
 ```tsx
 import { JsonSchemaEditor } from '@flowgram.ai/form-materials'
@@ -53,98 +52,72 @@ CLI 运行成功后，相关物料会自动添加到当前项目下的 `src/form
 
 ## 当前支持的 Component 物料
 
-### [TypeSelector](https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/type-selector/index.tsx)
-
-TypeSelector 用于变量类型选择
-
-<img loading="lazy" src="/materials/type-selector.png" style={{width:500}}/>
-
-通过包引用使用：
-
-```tsx
-import { TypeSelector } from '@flowgram.ai/materials'
-```
-
-通过 CLI 复制源代码使用：
-```bash
-npx @flowgram.ai/materials components/type-selector
-```
-
-
-### [VariableSelector](https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/variable-selector/index.tsx)
-
-VariableSelector 用于选择单个变量
-
-<img loading="lazy" src="/materials/variable-selector.png" style={{width:500}}/>
-
-
-通过包引用使用：
-
-```tsx
-import { VariableSelector } from '@flowgram.ai/materials'
-```
-
-通过 CLI 复制源代码使用：
-```bash
-npx @flowgram.ai/materials components/variable-selector
-```
-
-
-### [JsonSchemaEditor](https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/json-schema-editor/index.tsx)
-
-JsonSchemaEditor 用于可视化编辑 JsonSchema，常用于可视化配置节点的输出变量
-
-<img loading="lazy" src="/materials/json-schema-editor.png" style={{width:500}}/>
-
+### TypeSelector
 
-通过包引用使用：
+<MaterialDisplay
+  imgs={['/materials/type-selector.png']}
+  filePath="components/type-selector/index.tsx"
+  exportName="TypeSelector"
+>
+  TypeSelector 用于变量类型选择
+</MaterialDisplay>
 
-```tsx
-import { JsonSchemaEditor } from '@flowgram.ai/materials'
-```
 
-通过 CLI 复制源代码使用：
-```bash
-npx @flowgram.ai/materials components/json-schema-editor
-```
+### VariableSelector
 
+<MaterialDisplay
+  imgs={['/materials/variable-selector.png']}
+  filePath="components/variable-selector/index.tsx"
+  exportName="VariableSelector"
+>
+  VariableSelector 用于展示变量树，并从变量树中选择单个变量
+</MaterialDisplay>
 
-### [DynamicValueInput](https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/dynamic-value-input/index.tsx)
 
-DynamicValueInput 用于值（常量值 + 变量值）的配置
+### JsonSchemaEditor
 
-<img loading="lazy" src="/materials/dynamic-value-input.png" style={{width:500}}/>
+<MaterialDisplay
+  imgs={['/materials/json-schema-editor.png']}
+  filePath="components/json-schema-editor/index.tsx"
+  exportName="JsonSchemaEditor"
+>
+  JsonSchemaEditor 用于可视化编辑 [JsonSchema](https://json-schema.org/)
 
+  常用于可视化配置节点的输出变量
+</MaterialDisplay>
 
-通过包引用使用：
 
-```tsx
-import { DynamicValueInput } from '@flowgram.ai/materials'
-```
+### DynamicValueInput
 
-通过 CLI 复制源代码使用：
-```bash
-npx @flowgram.ai/materials components/dynamic-value-input
-```
+<MaterialDisplay
+  imgs={['/materials/dynamic-value-input.png']}
+  filePath="components/dynamic-value-input/index.tsx"
+  exportName="DynamicValueInput"
+>
+  DynamicValueInput 用于值（常量值 + 变量值）的配置
+</MaterialDisplay>
 
 ## 当前支持的 Effect 物料
 
-### [provideBatchInputEffect](https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/effects/provide-batch-input/index.ts)
-
-provideBatchInputEffect 用于配置循环批处理输入推导，会根据输入自动推导出两个变量：
-
-- item：根据输入变量数组类型自动推导，代表循环的每一项
-- index：数字类型，代表循环第几次
-
-<img loading="lazy" src="/materials/provide-batch-input.png" style={{width:500}}/>
-
-通过包引用使用：
-
-```tsx
-import { provideBatchInputEffect } from '@flowgram.ai/materials'
-```
-
-通过 CLI 复制源代码使用：
-```bash
-npx @flowgram.ai/materials effects/provide-batch-input
-```
+### provideBatchInput
+
+<MaterialDisplay
+  imgs={[{ src: '/materials/provide-batch-input.png', caption: 'item 的类型会自动根据前置类型联动推导' }]}
+  filePath="effects/provide-batch-input/index.ts"
+  exportName="provideBatchInputEffect"
+>
+  provideBatchInputEffect 用于配置循环批处理输入推导，会根据输入自动推导出两个变量：
+  - item：根据输入变量数组类型自动推导，代表循环的每一项
+  - index：数字类型，代表循环第几次
+</MaterialDisplay>
+
+### autoRenameRef
+
+<MaterialDisplay
+  imgs={[{ src: '/materials/auto-rename-ref.gif', caption: 'query 变量名变化时，自动重命名下游 inputs 中的引用' }]}
+  filePath="effects/auto-rename-ref/index.ts"
+  exportName="autoRenameRefEffect"
+>
+  当前置输出变量名发生变化时:
+  - 表单项中所有的对该变量的引用，自动重命名
+</MaterialDisplay>