diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
index c82e0cdd..ab7d6f55 100644
--- a/common/config/rush/pnpm-lock.yaml
+++ b/common/config/rush/pnpm-lock.yaml
@@ -12,6 +12,7 @@ importers:
       '@types/markdown-it': ^13.0.0
       '@types/react': ^18.0.0
       '@types/react-dom': ^18.0.0
+      '@visactor/vutils': ~0.17.4
       '@vitejs/plugin-react': 3.1.0
       axios: ^1.4.0
       chalk: ^3.0.0
@@ -31,6 +32,7 @@ importers:
       yargs: ^17.1.1
     dependencies:
       '@arco-design/web-react': 2.46.1_tmih5ryase7m737mtcsxs5l4a4
+      '@visactor/vutils': 0.17.4
       axios: 1.6.7
       highlight.js: 11.9.0
       lodash: 4.17.21
diff --git a/docs/assets/guide/en/Basic_Tutorial/Chart_Generation.md b/docs/assets/guide/en/Basic_Tutorial/Chart_Generation.md
index 9210ab06..c4e09ab1 100644
--- a/docs/assets/guide/en/Basic_Tutorial/Chart_Generation.md
+++ b/docs/assets/guide/en/Basic_Tutorial/Chart_Generation.md
@@ -44,7 +44,7 @@ const vmind = new VMind(options)
 const userPrompt = 'show me the changes in sales rankings of various car brand';
 const { spec, time } = await vmind.generateChart(userPrompt, fieldInfo, dataset);
 ```
-You can learn how to create a VMind instance and the information of the parameters in options in [Creating a VMind Instance](./Create_VMind_Instance.md), and get more information about fieldInfo and dataset in the [Data Format and Data Processing](./Data_Process.md) section.
+You can learn how to create a VMind instance and the information of the parameters in options in [Creating a VMind Instance](./Create_VMind_Instance), and get more information about fieldInfo and dataset in the [Data Format and Data Processing](./Data_Process) section.
 
 You can reprocess the spec to change the color, style, animation, etc. of the chart, or you can directly render the VChart chart:
 
@@ -235,11 +235,11 @@ If `userPrompt` is `Show me the change of the GDP rankings of each country`, the
 ![](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vmind/tutorials/VMind_dynamic_bar.gif)
 
 
-To make VMind generate a chart that meets your expectations, you need to describe your display intention and purpose as clearly as possible in `userPrompt`. In addition, you need to ensure that the field names in the dataset have certain semantics, or add field descriptions in the field information, please refer to the [Data Format and Data Processing](./Data_Process.md) chapter for details.
+To make VMind generate a chart that meets your expectations, you need to describe your display intention and purpose as clearly as possible in `userPrompt`. In addition, you need to ensure that the field names in the dataset have certain semantics, or add field descriptions in the field information, please refer to the [Data Format and Data Processing](./Data_Process) chapter for details.
 
 
 ### enableDataQuery
-In the [Data Aggregation](./Data_Aggregation.md) chapter, we have introduced that in order to meet the chart display requirements such as `showing the top 10 departments with the most sales` or `showing the sales of various products in the northern region`, we need to aggregate the data first, and then generate the chart. By default, the `generateChart` function will call `dataQuery` once during execution, using the same `userPrompt`, `fieldInfo` and `dataset` to aggregate the data, and then complete the subsequent chart generation steps with the aggregated data.
+In the [Data Aggregation](./Data_Aggregation) chapter, we have introduced that in order to meet the chart display requirements such as `showing the top 10 departments with the most sales` or `showing the sales of various products in the northern region`, we need to aggregate the data first, and then generate the chart. By default, the `generateChart` function will call `dataQuery` once during execution, using the same `userPrompt`, `fieldInfo` and `dataset` to aggregate the data, and then complete the subsequent chart generation steps with the aggregated data.
 
 However, if you are sure that your data can meet the user's chart display requirements without further aggregation, filtering and sorting, you can turn off this process by setting `enableDataQuery` to `false`:
 ```ts
@@ -249,7 +249,7 @@ const vmind = new VMind(options)
 const userPrompt = 'show me the changes in sales rankings of various car brand';
 const { spec, time } = await vmind.generateChart(userPrompt, fieldInfo, dataset, false); // Set enableDataQuery to false to turn off data aggregation
 ```
-This can reduce the process of calling the large model once, reduce token consumption, and improve chart generation speed. For more information about VMind data aggregation, please refer to the [Data Aggregation](./Data_Aggregation.md) chapter.
+This can reduce the process of calling the large model once, reduce token consumption, and improve chart generation speed. For more information about VMind data aggregation, please refer to the [Data Aggregation](./Data_Aggregation) chapter.
 
 ## Chart Types Supported by VMind
 VMind currently supports 13 common chart types in VChart:
diff --git a/docs/assets/guide/en/Basic_Tutorial/Custom_Request.md b/docs/assets/guide/en/Basic_Tutorial/Custom_Request.md
index f1f69cae..15f5fc4c 100644
--- a/docs/assets/guide/en/Basic_Tutorial/Custom_Request.md
+++ b/docs/assets/guide/en/Basic_Tutorial/Custom_Request.md
@@ -1,6 +1,6 @@
 
 # Customizing Large Language Model (LLM) Invocation Method
-In previous chapters, we have mentioned that VMind calls the Large Language Model (LLM) during the processes of [data processing](./Data_Process.md), [data aggregation](./Data_Aggregation.md), and [chart generation](./Chart_Generation.md). By default, we call the LLM via HTTP requests. You can specify the URL of the LLM service and set the header for authentication when [initializing the VMind instance](./Create_VMind_Instance.md).
+In previous chapters, we have mentioned that VMind calls the Large Language Model (LLM) during the processes of [data processing](./Data_Process), [data aggregation](./Data_Aggregation), and [chart generation](./Chart_Generation). By default, we call the LLM via HTTP requests. You can specify the URL of the LLM service and set the header for authentication when [initializing the VMind instance](./Create_VMind_Instance).
 
 However, in some special cases, you may need to customize the way the LLM service is called. For example, you may want to request the service via RPC, or you may want to do some extra processing after the model returns the results, and then return the processed results to VMind. To meet these needs, we provide an option to set the `customRequestFunc` object when initializing the VMind object. You can use this option to customize the way the LLM service is called at different stages.
 
diff --git a/docs/assets/guide/en/Basic_Tutorial/Data_Aggregation.md b/docs/assets/guide/en/Basic_Tutorial/Data_Aggregation.md
index 0ff29b45..5374dc7f 100644
--- a/docs/assets/guide/en/Basic_Tutorial/Data_Aggregation.md
+++ b/docs/assets/guide/en/Basic_Tutorial/Data_Aggregation.md
@@ -96,7 +96,7 @@ Next, we will detail the usage of the VMind data aggregation function.
 
 
 ## dataQuery
-The dataQuery function of the VMind object is a powerful data aggregation tool. It takes three parameters: userPrompt for user display intent, fieldInfo for dataset field information, and the original dataset. Detailed information about fieldInfo and dataset can be found in [Data Format and Data Processing](./Data_Process.md). VMind will write SQL statements based on the user's display intent, execute queries on the dataset, and the query results will be stored in the dataset property of the function return value; at the same time, the fields in the query results may change, and the updated field information will also be stored in the fieldInfo property of the return result.
+The dataQuery function of the VMind object is a powerful data aggregation tool. It takes three parameters: userPrompt for user display intent, fieldInfo for dataset field information, and the original dataset. Detailed information about fieldInfo and dataset can be found in [Data Format and Data Processing](./Data_Process). VMind will write SQL statements based on the user's display intent, execute queries on the dataset, and the query results will be stored in the dataset property of the function return value; at the same time, the fields in the query results may change, and the updated field information will also be stored in the fieldInfo property of the return result.
 
 Next, let's see how to use the dataQuery function through an example:
 ```ts
@@ -229,7 +229,7 @@ The returned fieldInfo is as follows:
 
 ```
 
-With this information, we can directly use fieldInfo and dataset to generate charts. You can find the specific operation steps in the [Intelligent Chart Generation](./Chart_Generation.md) section.
+With this information, we can directly use fieldInfo and dataset to generate charts. You can find the specific operation steps in the [Intelligent Chart Generation](./Chart_Generation) section.
 
 📢 **Attention: The dataQuery method will pass the userPrompt and fieldInfo to the large model to generate SQL, and the detailed data in the dataset will not be passed.**
 
@@ -361,7 +361,7 @@ const sourceFieldInfo = [
 Suppose we want to show the top three products in terms of sales in the north region, we can do this:
 
 ```ts
-const userPrompt = `Show me the top three products in terms of sales in the north region`
+const userPrompt = `Show me the top three products in terms of sales in the north`
 const vmind = new VMind(options)
 
 // Call the dataQuery method, pass in userPrompt, sourceFieldInfo, and sourceDataset to perform data aggregation
diff --git a/docs/assets/guide/en/Basic_Tutorial/Data_Process.md b/docs/assets/guide/en/Basic_Tutorial/Data_Process.md
index 75e403fd..c00c9470 100644
--- a/docs/assets/guide/en/Basic_Tutorial/Data_Process.md
+++ b/docs/assets/guide/en/Basic_Tutorial/Data_Process.md
@@ -165,7 +165,7 @@ const { fieldInfo, dataset } = vmind.parseCSVData(csv);
 
 ```
 
-For the creation of the VMind instance and the detailed configuration in options, please refer to [Creating VMind Instance](./Create_VMind_Instance.md)
+For the creation of the VMind instance and the detailed configuration in options, please refer to [Creating VMind Instance](./Create_VMind_Instance)
 
 
 In this example, the returned dataset is the same as the product sales dataset in the previous chapter, and the returned fieldInfo is as follows:
@@ -190,7 +190,7 @@ In this example, the returned dataset is the same as the product sales dataset i
 ```
 
 
-For the creation of the VMind instance and the detailed configuration in options, please refer to [Creating VMind Instance](./Create_VMind_Instance.md)
+For the creation of the VMind instance and the detailed configuration in options, please refer to [Creating VMind Instance](./Create_VMind_Instance)
 
 
 The dataset and fieldInfo can be directly used for chart generation and data aggregation in VMind.
diff --git a/docs/assets/guide/en/Getting_Started.md b/docs/assets/guide/en/Getting_Started.md
index 7cc03e5e..55eda8af 100644
--- a/docs/assets/guide/en/Getting_Started.md
+++ b/docs/assets/guide/en/Getting_Started.md
@@ -47,7 +47,7 @@ headers: { //Specify the header when calling the large model service
 })
 ```
 
-When initializing the VMind instance, you can specify the url of the large model service, the type of model, custom model request methods and other parameters. For detailed tutorials, please go to the [Create VMind Instance](./Basic_Tutorial/Create_VMind_Instance.md) chapter
+When initializing the VMind instance, you can specify the url of the large model service, the type of model, custom model request methods and other parameters. For detailed tutorials, please go to the [Create VMind Instance](./Basic_Tutorial/Create_VMind_Instance) chapter
 
 ## Chart Intelligent Generation Module
 
diff --git a/docs/assets/guide/zh/Basic_Tutorial/Chart_Generation.md b/docs/assets/guide/zh/Basic_Tutorial/Chart_Generation.md
index 07eaa708..f5b6e3b1 100644
--- a/docs/assets/guide/zh/Basic_Tutorial/Chart_Generation.md
+++ b/docs/assets/guide/zh/Basic_Tutorial/Chart_Generation.md
@@ -44,7 +44,7 @@ const vmind = new VMind(options)
 const userPrompt = 'show me the changes in sales rankings of various car brand';
 const { spec, time } = await vmind.generateChart(userPrompt, fieldInfo, dataset);
 ```
-你可以在[创建VMind实例](./Create_VMind_Instance.md)中了解如何创建VMind实例和options中的参数信息，在[数据格式与数据处理](./Data_Process.md)章节中获取更多关于fieldInfo和dataset的相关信息。
+你可以在[创建VMind实例](./Create_VMind_Instance)中了解如何创建VMind实例和options中的参数信息，在[数据格式与数据处理](./Data_Process)章节中获取更多关于fieldInfo和dataset的相关信息。
 
 你可以对spec进行二次加工，改变图表的颜色、样式、动画等配置，也可以直接渲染VChart图表：
 
@@ -236,11 +236,11 @@ VMind还支持[动态条形图（ranking bar）](https://www.visactor.io/vchart/
 ![](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vmind/tutorials/VMind_dynamic_bar.gif)
 
 
-为了让VMind生成符合预期的图表，你需要在`userPrompt`中尽可能清晰地描述你的展示意图和目的。此外，你还需要确保数据集的字段名称具有一定的语义，或者在字段信息中添加字段描述，具体请参见[数据格式与数据处理](./Data_Process.md)章节。
+为了让VMind生成符合预期的图表，你需要在`userPrompt`中尽可能清晰地描述你的展示意图和目的。此外，你还需要确保数据集的字段名称具有一定的语义，或者在字段信息中添加字段描述，具体请参见[数据格式与数据处理](./Data_Process)章节。
 
 
 ### enableDataQuery
-在[数据聚合](./Data_Aggregation.md)章节中，我们已经介绍过，为了满足`展示销售额最多的10个部门`或`展示北方区域各商品的销售额`等图表展示需求，我们需要先对数据进行聚合，然后再生成图表。在默认情况下，`generateChart`函数会在执行过程中调用一次`dataQuery`，使用相同的`userPrompt`，`fieldInfo`和`dataset`对数据进行聚合，然后使用聚合后的数据完成后续的图表生成步骤。
+在[数据聚合](./Data_Aggregation)章节中，我们已经介绍过，为了满足`展示销售额最多的10个部门`或`展示北方区域各商品的销售额`等图表展示需求，我们需要先对数据进行聚合，然后再生成图表。在默认情况下，`generateChart`函数会在执行过程中调用一次`dataQuery`，使用相同的`userPrompt`，`fieldInfo`和`dataset`对数据进行聚合，然后使用聚合后的数据完成后续的图表生成步骤。
 
 然而，如果你确定你的数据无需进行进一步的聚合、筛选和排序就可以满足用户的图表展示需求，你可以通过将`enableDataQuery`设置为`false`来关闭这一流程：
 ```ts
@@ -250,7 +250,7 @@ const vmind = new VMind(options)
 const userPrompt = 'show me the changes in sales rankings of various car brand';
 const { spec, time } = await vmind.generateChart(userPrompt, fieldInfo, dataset, false); //将enableDataQuery设置为false，关闭数据聚合
 ```
-这样做可以减少一次调用大模型的过程，降低token消耗，提高图表生成速度。关于VMind数据聚合的更多信息，请参考[数据聚合](./Data_Aggregation.md)章节。
+这样做可以减少一次调用大模型的过程，降低token消耗，提高图表生成速度。关于VMind数据聚合的更多信息，请参考[数据聚合](./Data_Aggregation)章节。
 
 ## VMind支持的图表类型
 VMind目前支持VChart中常见的13种图表类型：
diff --git a/docs/assets/guide/zh/Basic_Tutorial/Custom_Request.md b/docs/assets/guide/zh/Basic_Tutorial/Custom_Request.md
index ee64d0eb..8e049e3b 100644
--- a/docs/assets/guide/zh/Basic_Tutorial/Custom_Request.md
+++ b/docs/assets/guide/zh/Basic_Tutorial/Custom_Request.md
@@ -1,5 +1,5 @@
 # 自定义大语言模型(LLM)调用方式
-在前面的章节中，我们已经提到，VMind在进行[数据处理](./Data_Process.md)、[数据聚合](./Data_Aggregation.md)和[图表生成](./Chart_Generation.md)的过程中，都会调用大语言模型(LLM)。默认情况下，我们是通过HTTP请求的方式来调用LLM的，你可以在[初始化VMind实例](./Create_VMind_Instance.md)时，通过指定LLM服务的url和设置header来完成鉴权。
+在前面的章节中，我们已经提到，VMind在进行[数据处理](./Data_Process)、[数据聚合](./Data_Aggregation)和[图表生成](./Chart_Generation)的过程中，都会调用大语言模型(LLM)。默认情况下，我们是通过HTTP请求的方式来调用LLM的，你可以在[初始化VMind实例](./Create_VMind_Instance)时，通过指定LLM服务的url和设置header来完成鉴权。
 
 然而，在某些特殊情况下，你可能需要自定义LLM服务的调用方式。比如，你可能想通过RPC方式来请求服务，或者你可能想在模型返回结果后进行一些额外的处理，然后再将处理后的结果返回给VMind。为了满足这些需求，我们提供了一个在初始化VMind对象时设置`customRequestFunc`对象的选项，你可以通过这个选项来自定义LLM服务在不同阶段的调用方式。
 
diff --git a/docs/assets/guide/zh/Basic_Tutorial/Data_Aggregation.md b/docs/assets/guide/zh/Basic_Tutorial/Data_Aggregation.md
index 4441e563..745d9f34 100644
--- a/docs/assets/guide/zh/Basic_Tutorial/Data_Aggregation.md
+++ b/docs/assets/guide/zh/Basic_Tutorial/Data_Aggregation.md
@@ -96,7 +96,7 @@ VMind 1.2.2版本开始支持智能数据聚合功能。该功能会将用户传
 
 
 ## dataQuery
-VMind对象的dataQuery函数是一个强大的数据聚合工具。它接收三个参数：用户展示意图userPrompt，数据集字段信息fieldInfo和原始数据集dataset。你可以在[数据格式与数据处理](./Data_Process.md)中找到关于fieldInfo和dataset的详细信息。VMind会根据用户的展示意图，编写SQL语句并对dataset执行查询，查询结果会被储存在函数返回值的dataset属性中；同时，查询结果中的字段可能会发生变化，更新后的字段信息也会被储存在返回结果的fieldInfo属性中。
+VMind对象的dataQuery函数是一个强大的数据聚合工具。它接收三个参数：用户展示意图userPrompt，数据集字段信息fieldInfo和原始数据集dataset。你可以在[数据格式与数据处理](./Data_Process)中找到关于fieldInfo和dataset的详细信息。VMind会根据用户的展示意图，编写SQL语句并对dataset执行查询，查询结果会被储存在函数返回值的dataset属性中；同时，查询结果中的字段可能会发生变化，更新后的字段信息也会被储存在返回结果的fieldInfo属性中。
 
 下面，让我们通过一个示例来看看如何使用dataQuery函数：
 ```ts
@@ -228,7 +228,7 @@ const { fieldInfo, dataset } = vmind.dataQuery(userPrompt, sourceFieldInfo, sour
 ]
 ```
 
-有了这些信息，我们就可以直接使用fieldInfo和dataset生成图表了。具体的操作步骤，你可以在[图表智能生成](./Chart_Generation.md)章节中找到。
+有了这些信息，我们就可以直接使用fieldInfo和dataset生成图表了。具体的操作步骤，你可以在[图表智能生成](./Chart_Generation)章节中找到。
 
 📢 **注意：dataQuery方法会将userPrompt和fieldInfo传递给大模型用于生成SQL，dataset中的明细数据并不会被传递。**
 
@@ -360,7 +360,7 @@ const sourceFieldInfo = [
 假设我们想要展示北方区域销售额排名前三的商品，我们可以这样做：
 
 ```ts
-const userPrompt = `帮我展示north区域排名前三的商品销售额`
+const userPrompt = `帮我展示北方排名前三的商品销售额`
 const vmind = new VMind(options)
 
 // 调用dataQuery方法，传入userPrompt，sourceFieldInfo和sourceDataset，执行数据聚合
diff --git a/docs/assets/guide/zh/Basic_Tutorial/Data_Process.md b/docs/assets/guide/zh/Basic_Tutorial/Data_Process.md
index bd8eba43..c66fbce0 100644
--- a/docs/assets/guide/zh/Basic_Tutorial/Data_Process.md
+++ b/docs/assets/guide/zh/Basic_Tutorial/Data_Process.md
@@ -164,7 +164,7 @@ const { fieldInfo, dataset } = vmind.parseCSVData(csv);
 
 ```
 
-关于VMind实例的创建以及options中的详细配置，可以参见[创建VMind实例](./Create_VMind_Instance.md)
+关于VMind实例的创建以及options中的详细配置，可以参见[创建VMind实例](./Create_VMind_Instance)
 
 
 在这个例子中，该函数返回的dataset与上一章的商品销售数据集dataset相同，返回的fieldInfo如下：
@@ -220,7 +220,7 @@ const vmind = new VMind(options)
 const { fieldInfo, dataset } = vmind.parseCSVData(csv, userPrompt);
 ```
 
-关于VMind实例的创建以及options中的详细配置，可以参见[创建VMind实例](./Create_VMind_Instance.md)
+关于VMind实例的创建以及options中的详细配置，可以参见[创建VMind实例](./Create_VMind_Instance)
 
 
 在这个例子中，返回的dataset和fieldInfo均与上一章的商品销售数据集dataset相同。
diff --git a/docs/assets/guide/zh/Getting_Started.md b/docs/assets/guide/zh/Getting_Started.md
index cbcd7cca..10d0ab77 100644
--- a/docs/assets/guide/zh/Getting_Started.md
+++ b/docs/assets/guide/zh/Getting_Started.md
@@ -47,7 +47,7 @@ const vmind = new VMind({
 })
 ```
 
-在初始化VMind实例时，你可以指定大模型服务的url，模型种类，自定义模型请求方法等参数。详细教程请前往[创建VMind实例](./Basic_Tutorial/Create_VMind_Instance.md)章节
+在初始化VMind实例时，你可以指定大模型服务的url，模型种类，自定义模型请求方法等参数。详细教程请前往[创建VMind实例](./Basic_Tutorial/Create_VMind_Instance)章节
 
 ## 图表智能生成模块
 
diff --git a/docs/package.json b/docs/package.json
index d9acdc7d..9828fc6b 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -17,7 +17,8 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-router-dom": "6.9.0",
-    "lodash": "4.17.21"
+    "lodash": "4.17.21",
+    "@visactor/vutils": "~0.17.4"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",