diff --git a/client/packages/lowcoder/src/comps/comps/allComp.test.tsx b/client/packages/lowcoder/src/comps/comps/allComp.test.tsx
index db6e1c09d..c77d37fe5 100644
--- a/client/packages/lowcoder/src/comps/comps/allComp.test.tsx
+++ b/client/packages/lowcoder/src/comps/comps/allComp.test.tsx
@@ -51,16 +51,16 @@ const COMPS_MAP = {
   string: StringControl,
   test: TestComp,
   input: InputComp,
-  // query: QueryComp,
-  // js: JSQuery,
-  // mysql: SQLQuery,
-  // params: ParamsStringControl,
-  // layout: AppLayoutComp,
-  // root: RootComp,
-  // listView: ListViewComp,
-  // table: TableComp,
-  // tableColumn: ColumnComp,
-  // tableColumnRender: RenderComp,
+  query: QueryComp,
+  js: JSQuery,
+  mysql: SQLQuery,
+  params: ParamsStringControl,
+  layout: AppLayoutComp,
+  root: RootComp,
+  listView: ListViewComp,
+  table: TableComp,
+  tableColumn: ColumnComp,
+  tableColumnRender: RenderComp,
 } as Record<string, CompConstructor>;
 
 Object.entries(uiCompRegistry).forEach(async ([key, value]) => {
diff --git a/client/packages/lowcoder/src/comps/comps/layout/layoutActionComp.tsx b/client/packages/lowcoder/src/comps/comps/layout/layoutActionComp.tsx
index 0a6dc0b6d..8426151d7 100644
--- a/client/packages/lowcoder/src/comps/comps/layout/layoutActionComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/layout/layoutActionComp.tsx
@@ -3,7 +3,7 @@ import { Dropdown } from "components/Dropdown";
 import { StringControl } from "comps/controls/codeControl";
 import { BranchDiv, Treediv } from "components/Trees";
 import { AppSelectComp } from "comps/comps/layout/appSelectComp";
-import { keyValueListControl } from "comps/controls/keyValueControl";
+import { keyValueListControl } from "comps/controls/keyValueListControl";
 import { trans } from "i18n";
 import { KeyValue } from "types/common";
 import { keyValueListToSearchStr } from "util/appUtils";
diff --git a/client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx b/client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx
index 0bf33a399..e337ac869 100644
--- a/client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx
+++ b/client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx
@@ -7,9 +7,9 @@ import { BranchDiv, Dropdown } from "lowcoder-design";
 import { BottomResTypeEnum } from "types/bottomRes";
 import { getPromiseAfterDispatch } from "util/promiseUtils";
 import { trans } from "i18n";
-import {keyValueListControl, keyValueListToSearchStr, withDefault} from "lowcoder-sdk";
-import {KeyValue} from "@lowcoder-ee/types/common";
-import { useCallback, useContext, useEffect, useMemo } from "react";
+import { withDefault } from "comps/generators";
+import { keyValueListControl} from "comps/controls/keyValueListControl";
+import { useCallback } from "react";
 
 const ExecuteQueryPropertyView = ({
   comp,
diff --git a/client/packages/lowcoder/src/comps/controls/actionSelector/goToURLAction.tsx b/client/packages/lowcoder/src/comps/controls/actionSelector/goToURLAction.tsx
index 2223079ef..7c4d93f05 100644
--- a/client/packages/lowcoder/src/comps/controls/actionSelector/goToURLAction.tsx
+++ b/client/packages/lowcoder/src/comps/controls/actionSelector/goToURLAction.tsx
@@ -4,7 +4,7 @@ import { BranchDiv } from "lowcoder-design";
 import { KeyValue } from "types/common";
 import { BoolControl } from "comps/controls/boolControl";
 import { StringControl } from "comps/controls/codeControl";
-import { keyValueListControl } from "../keyValueControl";
+import { keyValueListControl } from "../keyValueListControl";
 import { keyValueListToSearchStr } from "../../../util/appUtils";
 import { trans } from "i18n";
 
diff --git a/client/packages/lowcoder/src/comps/controls/actionSelector/openAppAction.tsx b/client/packages/lowcoder/src/comps/controls/actionSelector/openAppAction.tsx
index c35eb0670..758912b4c 100644
--- a/client/packages/lowcoder/src/comps/controls/actionSelector/openAppAction.tsx
+++ b/client/packages/lowcoder/src/comps/controls/actionSelector/openAppAction.tsx
@@ -4,7 +4,7 @@ import { BranchDiv } from "lowcoder-design";
 import { KeyValue } from "types/common";
 import ApplicationSelectControl from "../appSelectControl";
 import { BoolControl } from "../boolControl";
-import { keyValueListControl } from "../keyValueControl";
+import { keyValueListControl } from "../keyValueListControl";
 import { keyValueListToSearchStr, openApp } from "../../../util/appUtils";
 import { trans } from "i18n";
 
diff --git a/client/packages/lowcoder/src/comps/controls/keyValueControl.tsx b/client/packages/lowcoder/src/comps/controls/keyValueControl.tsx
index acfe36b23..86e02a1a4 100644
--- a/client/packages/lowcoder/src/comps/controls/keyValueControl.tsx
+++ b/client/packages/lowcoder/src/comps/controls/keyValueControl.tsx
@@ -1,13 +1,11 @@
-import { ControlPropertyViewWrapper, KeyValueList, OptionsType } from "lowcoder-design";
+import { OptionsType } from "lowcoder-design";
 import { ReactNode } from "react";
 import styled from "styled-components";
 import { MultiCompBuilder } from "../generators";
-import { list } from "../generators/list";
 import { StringControl } from "./codeControl";
 import { ControlParams } from "./controlParams";
 import { dropdownControl } from "./dropdownControl";
-import { ParamsControlType, ParamsStringControl } from "./paramsControl";
-import { FunctionProperty } from "../queries/queryCompUtils";
+import { ParamsStringControl } from "./paramsControl";
 
 const KeyValueWrapper = styled.div`
   display: flex;
@@ -57,7 +55,7 @@ export type KeyValueControlParams = ControlParams & {
  * controlType: params output: {key: {"1+2": () => "3"}, value: {"-1": () => "-1"}}
  * controlType: string output: {key: "xxx", value: "xxxx"}
  */
-function keyValueControl<T extends OptionsType>(
+export function keyValueControl<T extends OptionsType>(
   hasType: boolean = false,
   types: T,
   controlType: "params" | "string" = "params"
@@ -112,42 +110,3 @@ function keyValueControl<T extends OptionsType>(
   };
 }
 
-/**
- * Provides a list of kv input boxes with add and delete buttons
- * output [{key: "", value: ""}, {key: "", value: ""}]
- */
-export function keyValueListControl<T extends OptionsType>(
-  hasType: boolean = false,
-  types: T | OptionsType = [],
-  controlType: "params" | "string" = "params"
-) {
-  return class extends list(keyValueControl(hasType, types, controlType)) {
-    getQueryParams() {
-      if (controlType === "params") {
-        return this.getView().reduce(
-          (result: FunctionProperty[], kv) => [
-            ...result,
-            ...(kv.children.key as InstanceType<ParamsControlType>).getQueryParams(),
-            ...(kv.children.value as InstanceType<ParamsControlType>).getQueryParams(),
-          ],
-          []
-        );
-      }
-      return [];
-    }
-
-    propertyView(params: KeyValueControlParams): ReactNode {
-      return (
-        <ControlPropertyViewWrapper {...params}>
-          <KeyValueList
-            list={this.getView().map((child) => child.propertyView(params))}
-            onAdd={() => this.dispatch(this.pushAction({}))}
-            onDelete={(item, index) => this.dispatch(this.deleteAction(index))}
-            isStatic={params.isStatic}
-            indicatorForAll={params.indicatorForAll}
-          />
-        </ControlPropertyViewWrapper>
-      );
-    }
-  };
-}
diff --git a/client/packages/lowcoder/src/comps/controls/keyValueListControl.tsx b/client/packages/lowcoder/src/comps/controls/keyValueListControl.tsx
new file mode 100644
index 000000000..6beb5eddc
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/controls/keyValueListControl.tsx
@@ -0,0 +1,48 @@
+import { ControlPropertyViewWrapper, KeyValueList, OptionsType } from "lowcoder-design";
+import { ReactNode } from "react";
+import styled from "styled-components";
+import { list } from "../generators/list";
+import { ControlParams } from "./controlParams";
+import { ParamsControlType, ParamsStringControl } from "./paramsControl";
+import { FunctionProperty } from "../queries/queryCompUtils";
+import { keyValueControl, KeyValueControlParams } from "./keyValueControl"
+
+/**
+ * Provides a list of kv input boxes with add and delete buttons
+ * output [{key: "", value: ""}, {key: "", value: ""}]
+ */
+export function keyValueListControl<T extends OptionsType>(
+  hasType: boolean = false,
+  types: T | OptionsType = [],
+  controlType: "params" | "string" = "params"
+) {
+  return class extends list(keyValueControl(hasType, types, controlType)) {
+    getQueryParams() {
+      if (controlType === "params") {
+        return this.getView().reduce(
+          (result: FunctionProperty[], kv) => [
+            ...result,
+            ...(kv.children.key as InstanceType<ParamsControlType>).getQueryParams(),
+            ...(kv.children.value as InstanceType<ParamsControlType>).getQueryParams(),
+          ],
+          []
+        );
+      }
+      return [];
+    }
+
+    propertyView(params: KeyValueControlParams): ReactNode {
+      return (
+        <ControlPropertyViewWrapper {...params}>
+          <KeyValueList
+            list={this.getView().map((child) => child.propertyView(params))}
+            onAdd={() => this.dispatch(this.pushAction({}))}
+            onDelete={(item, index) => this.dispatch(this.deleteAction(index))}
+            isStatic={params.isStatic}
+            indicatorForAll={params.indicatorForAll}
+          />
+        </ControlPropertyViewWrapper>
+      );
+    }
+  };
+}
diff --git a/client/packages/lowcoder/src/comps/queries/httpQuery/graphqlQuery.tsx b/client/packages/lowcoder/src/comps/queries/httpQuery/graphqlQuery.tsx
index e5f412bd1..aca0e742b 100644
--- a/client/packages/lowcoder/src/comps/queries/httpQuery/graphqlQuery.tsx
+++ b/client/packages/lowcoder/src/comps/queries/httpQuery/graphqlQuery.tsx
@@ -5,7 +5,7 @@ import { QueryConfigItemWrapper, QueryConfigLabel, QueryConfigWrapper } from "co
 import { simpleMultiComp } from "comps/generators/multi";
 import { ReactNode } from "react";
 import { JSONValue } from "../../../util/jsonTypes";
-import { keyValueListControl } from "../../controls/keyValueControl";
+import { keyValueListControl } from "../../controls/keyValueListControl";
 import { ParamsJsonControl, ParamsStringControl } from "../../controls/paramsControl";
 import { list } from "../../generators/list";
 import { valueComp, withDefault } from "../../generators/simpleGenerators";
diff --git a/client/packages/lowcoder/src/comps/queries/httpQuery/httpQuery.tsx b/client/packages/lowcoder/src/comps/queries/httpQuery/httpQuery.tsx
index b4c05231f..2fd50921e 100644
--- a/client/packages/lowcoder/src/comps/queries/httpQuery/httpQuery.tsx
+++ b/client/packages/lowcoder/src/comps/queries/httpQuery/httpQuery.tsx
@@ -4,7 +4,7 @@ import { valueComp, withDefault } from "comps/generators";
 import { trans } from "i18n";
 import { includes } from "lodash";
 import { CompAction, MultiBaseComp } from "lowcoder-core";
-import { keyValueListControl } from "../../controls/keyValueControl";
+import { keyValueListControl } from "../../controls/keyValueListControl";
 import { ParamsJsonControl, ParamsStringControl } from "../../controls/paramsControl";
 import { withTypeAndChildrenAbstract } from "../../generators/withType";
 import { toQueryView } from "../queryCompUtils";
diff --git a/client/packages/lowcoder/src/comps/queries/pluginQuery/pluginQuery.tsx b/client/packages/lowcoder/src/comps/queries/pluginQuery/pluginQuery.tsx
index b41ab20a8..492c33791 100644
--- a/client/packages/lowcoder/src/comps/queries/pluginQuery/pluginQuery.tsx
+++ b/client/packages/lowcoder/src/comps/queries/pluginQuery/pluginQuery.tsx
@@ -29,7 +29,8 @@ import { CompConstructor } from "lowcoder-core";
 import { dropdownControl } from "comps/controls/dropdownControl";
 import { ControlParams, ControlType } from "comps/controls/controlParams";
 import MarkdownTooltip from "lowcoder-design/src/components/MarkdownTooltip";
-import { KeyValueControlParams, keyValueListControl } from "comps/controls/keyValueControl";
+import { KeyValueControlParams } from "comps/controls/keyValueControl";
+import { keyValueListControl } from "comps/controls/keyValueListControl";
 import { VariablesControl } from "../httpQuery/graphqlQuery";
 import { HttpHeaderPropertyView } from "../httpQuery/httpQueryConstants";
 
diff --git a/client/packages/lowcoder/src/comps/queries/queryComp/variablesComp.tsx b/client/packages/lowcoder/src/comps/queries/queryComp/variablesComp.tsx
index 87c5bd432..a192116fd 100644
--- a/client/packages/lowcoder/src/comps/queries/queryComp/variablesComp.tsx
+++ b/client/packages/lowcoder/src/comps/queries/queryComp/variablesComp.tsx
@@ -1,5 +1,5 @@
 import {MultiCompBuilder, withDefault} from "../../generators";
-import {keyValueListControl} from "lowcoder-sdk";
+import { keyValueListControl } from "../../controls/keyValueListControl";
 
 export const VariablesComp = new MultiCompBuilder(
   {
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
index 57677ff5e..19947cbcb 100644
--- a/client/packages/lowcoder/src/i18n/locales/en.ts
+++ b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -855,7 +855,8 @@ export const en = {
     "categoryDocumentHandling" : "Report & Document Generation",
     "categoryRPA" : "Robotic Process Automation",
     "componentsUsingQueryTitle" : "Query Usage",
-    "componentsUsingQuery" : "Where is this Query in use"
+    "componentsUsingQuery" : "Where is this Query in use",
+    "query.variables" : "Variables"
   },
 
 
diff --git a/client/packages/lowcoder/src/index.sdk.ts b/client/packages/lowcoder/src/index.sdk.ts
index 4d9f9bcf6..db8d14daa 100644
--- a/client/packages/lowcoder/src/index.sdk.ts
+++ b/client/packages/lowcoder/src/index.sdk.ts
@@ -93,6 +93,7 @@ export * from "comps/controls/actionSelector/actionSelectorControl";
 export * from "comps/controls/iconControl";
 export * from "comps/controls/shapeControl";
 export * from "comps/controls/keyValueControl";
+export * from "comps/controls/keyValueListControl";
 export * from "comps/controls/labelControl";
 export * from "comps/controls/millisecondControl";
 export * from "comps/controls/optionsControl";