diff --git a/client/packages/lowcoder/src/comps/comps/simpleVariableHeaderComp.tsx b/client/packages/lowcoder/src/comps/comps/simpleVariableHeaderComp.tsx
new file mode 100644
index 000000000..a709da485
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/comps/simpleVariableHeaderComp.tsx
@@ -0,0 +1,65 @@
+import { ControlParams } from "comps/controls/controlParams";
+import { CompAction, SimpleComp } from "lowcoder-core";
+import { ControlPropertyViewWrapper, PopupCard, Input } from "lowcoder-design";
+import { useEffect, useState } from "react";
+import { trans } from "i18n";
+import { checkName } from "../utils/rename";
+const SimpleVariableHeaderPropertyView = ({params, comp, isCheck}: any) => {
+  const [error, setError] = useState<string | undefined>();
+  const [value, setValue] = useState(comp.value);
+  useEffect(() => {
+    setValue(comp.value);
+    isCheck && setError(undefined);
+  }, [comp]);
+  return (
+    <ControlPropertyViewWrapper {...params}>
+      <Input
+        value={value}
+        placeholder={params.placeholder}
+        onChange={(e) => {
+          const error = isCheck && checkName(e.target.value);
+          isCheck && setError(error || undefined);
+          setValue(e.target.value);
+        }}
+        onBlur={(e) => {
+          if(!isCheck || !error) comp.dispatchChangeValueAction(value);
+          else {
+            setValue(comp.value);
+            setError(undefined);
+          }
+        }}
+      />
+      {isCheck && <PopupCard
+        editorFocus={!!error}
+        title={error ? trans("error") : ""}
+        content={error}
+        hasError={!!error}
+      />}
+    </ControlPropertyViewWrapper>
+  );
+}
+export const SimpleVariableHeaderComp = (isCheck: boolean = false) => {
+    return class SimpleVariableHeaderComp extends SimpleComp<string> {
+    override reduce(action: CompAction): this {
+      // if (isBroadcastAction<RenameAction>(action, CompActionTypes.RENAME)) {
+      //   if (this.getView() === action.action.oldName) {
+      //     return super.reduce(this.changeValueAction(action.action.name));
+      //   }
+      // }
+      return super.reduce(action);
+    }
+
+    readonly IGNORABLE_DEFAULT_VALUE = "";
+    protected getDefaultValue(): string {
+      return "";
+    }
+
+    getPropertyView() {
+      return this.propertyView({});
+    }
+
+    propertyView(params: ControlParams) {
+      return <SimpleVariableHeaderPropertyView params={params} comp={this} isCheck={isCheck}></SimpleVariableHeaderPropertyView>
+    }
+  }
+}
diff --git a/client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx b/client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx
index e337ac869..7946d93ab 100644
--- a/client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx
+++ b/client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx
@@ -99,7 +99,7 @@ const ExecuteQueryPropertyView = ({
 const ExecuteQueryTmpAction = (function () {
   const childrenMap = {
     queryName: SimpleNameComp,
-    queryVariables: withDefault(keyValueListControl(false, [], "string"), [])
+    queryVariables: withDefault(keyValueListControl(false, [], "variable"), [])
   };
   return new MultiCompBuilder(childrenMap, () => {
     return () => Promise.resolve(undefined as unknown);
diff --git a/client/packages/lowcoder/src/comps/controls/keyValueControl.tsx b/client/packages/lowcoder/src/comps/controls/keyValueControl.tsx
index 86e02a1a4..319d8ac0a 100644
--- a/client/packages/lowcoder/src/comps/controls/keyValueControl.tsx
+++ b/client/packages/lowcoder/src/comps/controls/keyValueControl.tsx
@@ -6,6 +6,7 @@ import { StringControl } from "./codeControl";
 import { ControlParams } from "./controlParams";
 import { dropdownControl } from "./dropdownControl";
 import { ParamsStringControl } from "./paramsControl";
+import { SimpleVariableHeaderComp } from "../comps/simpleVariableHeaderComp";
 
 const KeyValueWrapper = styled.div`
   display: flex;
@@ -58,13 +59,20 @@ export type KeyValueControlParams = ControlParams & {
 export function keyValueControl<T extends OptionsType>(
   hasType: boolean = false,
   types: T,
-  controlType: "params" | "string" = "params"
+  controlType: "params" | "string" | "variable" = "params"
 ) {
-  const childrenMap = {
+  let childrenMap = {
     key: controlType === "params" ? ParamsStringControl : StringControl,
     value: controlType === "params" ? ParamsStringControl : StringControl,
     type: dropdownControl(types, types[0]?.value),
   };
+  if(controlType === "variable") {
+    childrenMap = {
+      key: SimpleVariableHeaderComp(true) as any,
+      value: SimpleVariableHeaderComp() as any,
+      type: dropdownControl(types, types[0]?.value),
+    };
+  }
   return class extends new MultiCompBuilder(childrenMap, (props) => {
     return hasType
       ? {
diff --git a/client/packages/lowcoder/src/comps/controls/keyValueListControl.tsx b/client/packages/lowcoder/src/comps/controls/keyValueListControl.tsx
index 6beb5eddc..fab6b0d0e 100644
--- a/client/packages/lowcoder/src/comps/controls/keyValueListControl.tsx
+++ b/client/packages/lowcoder/src/comps/controls/keyValueListControl.tsx
@@ -14,7 +14,7 @@ import { keyValueControl, KeyValueControlParams } from "./keyValueControl"
 export function keyValueListControl<T extends OptionsType>(
   hasType: boolean = false,
   types: T | OptionsType = [],
-  controlType: "params" | "string" = "params"
+  controlType: "params" | "string" | "variable" = "params"
 ) {
   return class extends list(keyValueControl(hasType, types, controlType)) {
     getQueryParams() {
diff --git a/client/packages/lowcoder/src/comps/queries/queryComp/variablesComp.tsx b/client/packages/lowcoder/src/comps/queries/queryComp/variablesComp.tsx
index 94ce13f03..ec271e28f 100644
--- a/client/packages/lowcoder/src/comps/queries/queryComp/variablesComp.tsx
+++ b/client/packages/lowcoder/src/comps/queries/queryComp/variablesComp.tsx
@@ -3,7 +3,7 @@ import { keyValueListControl } from "../../controls/keyValueListControl";
 
 export const VariablesComp = new MultiCompBuilder(
   {
-    variables: withDefault(keyValueListControl(false, [], "string"), [{ key: "", value: "" }]),
+    variables: withDefault(keyValueListControl(false, [], "variable"), [{ key: "", value: "" }]),
   },
   (props) => props //props.variables
   )

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/lowcoder-org/lowcoder/pull/1506.diff" target="_blank">Alternative Proxy</a></p><p><a href="http://clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/lowcoder-org/lowcoder/pull/1506.diff" target="_blank">pFad Proxy</a></p><p><a href="http://clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/lowcoder-org/lowcoder/pull/1506.diff" target="_blank">pFad v3 Proxy</a></p><p><a href="http://clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/lowcoder-org/lowcoder/pull/1506.diff" target="_blank">pFad v4 Proxy</a></p></body>
</html>