统一VarInput变量的管理

2025-06-29 20:32:44 +08:00 · 2025-01-08 14:39:08 +08:00 · 2025-01-08 14:39:08 +08:00 · 7a43695e2d
commit 7a43695e2d
parent b528cfa97d
24 changed files with 190 additions and 516 deletions
--- a/src/components/composer/MultiParams.vue
+++ b/src/components/composer/MultiParams.vue
@ -15,6 +15,7 @@ import { defineComponent } from "vue";
 import OperationCard from "components/composer/common/OperationCard.vue";
 import ParamInput from "components/composer/common/ParamInput.vue";
 import { stringifyArgv, parseFunction } from "js/composer/formatString";
+import { newVarInputVal } from "js/composer/varInputValManager";

 export default defineComponent({
  name: "MultiParams",
@ -52,11 +53,7 @@ export default defineComponent({
      return [...this.commonConfig, ...this.functionConfig].map((item) => {
        const value =
          item.type === "varInput"
-            ? item.defaultValue || {
-                value: "",
-                isString: true,
-                __varInputVal__: true,
-              }
+            ? item.defaultValue || newVarInputVal("str")
            : // 其他类型情况复杂，不做判断，没有默认值返回undefined
              item.defaultValue;
        return {
--- a/src/components/composer/common/ArrayEditor.vue
+++ b/src/components/composer/common/ArrayEditor.vue
@ -94,35 +94,30 @@
 * @example
 * // 基础数组
 * [
- *   {
- *     value: "张三",
- *     isString: true,
- *     __varInputVal__: true
- *   }
+ *   newVarInputVal("str", "张三")
 * ]
 *
 * // 多键对象数组
 * options.keys = ['name', 'age', 'email']
 * [
 *   {
- *     name: { value: "张三", isString: true, __varInputVal__: true },
- *     age: { value: "18", isString: false, __varInputVal__: true },
- *     email: { value: "zhangsan@example.com", isString: true, __varInputVal__: true }
+ *     name: newVarInputVal("str", "张三"),
+ *     age: newVarInputVal("str", "18"),
+ *     email: newVarInputVal("str", "zhangsan@example.com")
 *   }
 * ]
 *
 * // 下拉选择模式
 * options.items = ['选项1', '选项2', '选项3']
 * [
- *   {
- *     value: "选项1",
- *     isString: true,
- *     __varInputVal__: true
- *   }
+ *   newVarInputVal("str", "选项1"),
+ *   newVarInputVal("str", "选项2"),
+ *   newVarInputVal("str", "选项3")
 * ]
 */
 import { defineComponent } from "vue";
 import VariableInput from "components/composer/common/VariableInput.vue";
+import { newVarInputVal } from "js/composer/varInputValManager";

 export default defineComponent({
  name: "ArrayEditor",
@ -169,22 +164,12 @@ export default defineComponent({
      if (this.optionsKeys?.length) {
        const item = {};
        this.optionsKeys.forEach((key) => {
-          item[key] = {
-            value: "",
-            isString: true,
-            __varInputVal__: true,
-          };
+          item[key] = newVarInputVal("str");
        });
        return [item];
      }

-      return [
-        {
-          value: "",
-          isString: true,
-          __varInputVal__: true,
-        },
-      ];
+      return [newVarInputVal("str")];
    },
    /**
     * 添加新的数组项
@ -195,22 +180,11 @@ export default defineComponent({
      if (this.options.keys) {
        const newItem = {};
        this.options.keys.forEach((key) => {
-          newItem[key] = {
-            value: "",
-            isString: true,
-            __varInputVal__: true,
-          };
+          newItem[key] = newVarInputVal("str");
        });
        newItems = [...this.items, newItem];
      } else {
-        newItems = [
-          ...this.items,
-          {
-            value: "",
-            isString: true,
-            __varInputVal__: true,
-          },
-        ];
+        newItems = [...this.items, newVarInputVal("str")];
      }
      this.$emit("update:modelValue", newItems);
    },
@ -225,19 +199,11 @@ export default defineComponent({
        if (this.options.keys) {
          const newItem = {};
          this.options.keys.forEach((key) => {
-            newItem[key] = {
-              value: "",
-              isString: true,
-              __varInputVal__: true,
-            };
+            newItem[key] = newVarInputVal("str");
          });
          newItems.push(newItem);
        } else {
-          newItems.push({
-            value: "",
-            isString: true,
-            __varInputVal__: true,
-          });
+          newItems.push(newVarInputVal("str"));
        }
      }
      this.$emit("update:modelValue", newItems);
--- a/src/components/composer/common/DictEditor.vue
+++ b/src/components/composer/common/DictEditor.vue
@ -95,6 +95,7 @@

 <script>
 import { defineComponent } from "vue";
+import { newVarInputVal } from "js/composer/varInputValManager";
 import VariableInput from "components/composer/common/VariableInput.vue";

 /**
@ -108,21 +109,15 @@ import VariableInput from "components/composer/common/VariableInput.vue";
 * @example
 * // 基础字典对象
 * {
- *   key: {
- *     value: "", // 输入框的值
- *     isString: true, // 是否是字符串
- *     __varInputVal__: true // 用于标识是变量输入框
- *   }
+ *   key: newVarInputVal("str"),
 * }
 *
 * // 下拉选择模式
 * options.items = ['User-Agent', 'Content-Type', 'Accept']
 * {
- *   "User-Agent": {
- *     value: "Mozilla/5.0",
- *     isString: true,
- *     __varInputVal__: true
- *   }
+ *   "User-Agent": newVarInputVal("str", "Mozilla/5.0"),
+ *   "Content-Type": newVarInputVal("str", "text/html"),
+ *   "Accept": newVarInputVal("str", "text/html")
 * }
 */
 export default defineComponent({
@ -149,11 +144,7 @@ export default defineComponent({
        : [
            {
              key: "",
-              value: {
-                value: "",
-                isString: true,
-                __varInputVal__: true,
-              },
+              value: newVarInputVal("str"),
            },
          ],
      filterOptions: this.options?.items || [],
@ -183,7 +174,7 @@ export default defineComponent({
        ...this.items,
        {
          key: "",
-          value: { value: "", isString: true, __varInputVal__: true },
+          value: newVarInputVal("str"),
        },
      ];
    },
@ -193,7 +184,7 @@ export default defineComponent({
      if (newItems.length === 0) {
        newItems.push({
          key: "",
-          value: { value: "", isString: true, __varInputVal__: true },
+          value: newVarInputVal("str"),
        });
      }
      this.items = newItems;
--- a/src/components/composer/common/VariableInput.vue
+++ b/src/components/composer/common/VariableInput.vue
@ -138,7 +138,7 @@

 <script>
 import { defineComponent, inject } from "vue";
-
+import { newVarInputVal } from "js/composer/varInputValManager";
 /**
 * 变量输入框组件
 * @description 支持变量选择和字符串输入的输入框组件
@ -179,11 +179,7 @@ export default defineComponent({
    modelValue: {
      type: Object,
      required: true,
-      default: () => ({
-        value: "",
-        isString: true,
-        __varInputVal__: true,
-      }),
+      default: () => newVarInputVal("str"),
    },
    label: String,
    icon: String,
@ -265,22 +261,14 @@ export default defineComponent({
    insertVariable(variable) {
      this.selectedVariable = variable;
      this.isString = false; // 变量模式下不需要字符串处理
-      this.$emit("update:modelValue", {
-        isString: false,
-        value: variable.name,
-        __varInputVal__: true,
-      });
+      this.$emit("update:modelValue", newVarInputVal("var", variable.name));
    },

    // 清除变量时的处理
    clearVariable() {
      this.selectedVariable = null;
      this.isString = true; // 恢复到字符串模式
-      this.$emit("update:modelValue", {
-        isString: true,
-        value: "",
-        __varInputVal__: true,
-      });
+      this.$emit("update:modelValue", newVarInputVal("str"));
    },

    // 切换类型
@ -301,11 +289,7 @@ export default defineComponent({

    selectItem(option) {
      const value = this.getItemValue(option);
-      this.$emit("update:modelValue", {
-        value,
-        isString: true,
-        __varInputVal__: true,
-      });
+      this.$emit("update:modelValue", newVarInputVal("str", value));
    },
    escapePath(paths) {
      if (!paths) return null;
@ -319,26 +303,14 @@ export default defineComponent({
        const files = this.escapePath(utools.showOpenDialog(options));
        if (!files) return;
        if (files.length > 1) {
-          this.$emit("update:modelValue", {
-            value: files,
-            isString: false,
-            __varInputVal__: true,
-          });
+          this.$emit("update:modelValue", newVarInputVal("var", files));
        } else if (files.length === 1) {
-          this.$emit("update:modelValue", {
-            value: files[0],
-            isString: true,
-            __varInputVal__: true,
-          });
+          this.$emit("update:modelValue", newVarInputVal("str", files[0]));
        }
      } else {
        const file = this.escapePath(utools.showSaveDialog(options));
        if (!file) return;
-        this.$emit("update:modelValue", {
-          value: file,
-          isString: true,
-          __varInputVal__: true,
-        });
+        this.$emit("update:modelValue", newVarInputVal("str", file));
      }
    },
  },
--- a/src/components/composer/data/AsymmetricCryptoEditor.vue
+++ b/src/components/composer/data/AsymmetricCryptoEditor.vue
@ -186,7 +186,7 @@
 import { defineComponent } from "vue";
 import VariableInput from "components/composer/common/VariableInput.vue";
 import { stringifyArgv, parseFunction } from "js/composer/formatString";
-
+import { newVarInputVal } from "js/composer/varInputValManager";
 export default defineComponent({
  name: "AsymmetricCryptoEditor",
  components: {
@ -200,11 +200,7 @@ export default defineComponent({
    return {
      defaultArgvs: {
        operation: "encrypt",
-        text: {
-          value: "",
-          isString: true,
-          __varInputVal__: true,
-        },
+        text: newVarInputVal("str"),
        algorithm: "RSA",
        keyLength: 1024,
        padding: "RSAES-PKCS1-V1_5",
--- a/src/components/composer/data/SymmetricCryptoEditor.vue
+++ b/src/components/composer/data/SymmetricCryptoEditor.vue
@ -186,6 +186,7 @@
 import { defineComponent } from "vue";
 import VariableInput from "components/composer/common/VariableInput.vue";
 import { stringifyArgv, parseFunction } from "js/composer/formatString";
+import { newVarInputVal } from "js/composer/varInputValManager";

 export default defineComponent({
  name: "SymmetricCryptoEditor",
@ -200,11 +201,7 @@ export default defineComponent({
    return {
      defaultArgvs: {
        operation: "encrypt",
-        text: {
-          value: "",
-          isString: true,
-          __varInputVal__: true,
-        },
+        text: newVarInputVal("str"),
        algorithm: "AES",
        keyLength: 128,
        mode: "CBC",
--- a/src/components/composer/data/ZlibEditor.vue
+++ b/src/components/composer/data/ZlibEditor.vue
@ -132,6 +132,8 @@ import { stringifyArgv, parseFunction } from "js/composer/formatString";
 import VariableInput from "components/composer/common/VariableInput.vue";
 import NumberInput from "components/composer/common/NumberInput.vue";
 import OperationCard from "components/composer/common/OperationCard.vue";
+import { newVarInputVal } from "js/composer/varInputValManager";
+
 export default defineComponent({
  name: "ZlibEditor",
  components: {
@ -188,11 +190,7 @@ export default defineComponent({
      defaultArgvs: {
        operation: "compressData",
        method: "gzip",
-        data: {
-          value: "",
-          isString: true,
-          __varInputVal__: true,
-        },
+        data: newVarInputVal("str"),
        options: {
          level: -1,
          memLevel: 8,
--- a/src/components/composer/data/regex/RegexEditor.vue
+++ b/src/components/composer/data/regex/RegexEditor.vue
@ -98,6 +98,7 @@ import RegexInput from "./RegexInput.vue";
 import RegexBuilder from "./RegexBuilder.vue";
 import RegexTester from "./RegexTester.vue";
 import { parseToHasType } from "js/composer/formatString";
+import { newVarInputVal } from "js/composer/varInputValManager";

 export default defineComponent({
  name: "RegexEditor",
@ -122,17 +123,9 @@ export default defineComponent({
      },
      showBuilder: false,
      defaultArgvs: {
-        textValue: {
-          value: "",
-          isString: true,
-          __varInputVal__: true,
-        },
+        textValue: newVarInputVal("str"),
        regexValue: "",
-        replaceValue: {
-          value: "",
-          isString: true,
-          __varInputVal__: true,
-        },
+        replaceValue: newVarInputVal("str"),
        isReplace: false,
        flags: {
          ignoreCase: false,
--- a/src/components/composer/data/regex/RegexTester.vue
+++ b/src/components/composer/data/regex/RegexTester.vue
@ -43,17 +43,14 @@

 <script>
 import { defineComponent } from "vue";
+import { newVarInputVal } from "js/composer/varInputValManager";

 export default defineComponent({
  name: "RegexTester",
  props: {
    text: {
      type: Object,
-      default: () => ({
-        value: "",
-        isString: false,
-        __varInputVal__: true,
-      }),
+      default: () => newVarInputVal("var"),
    },
    regex: {
      type: String,
@ -65,11 +62,7 @@ export default defineComponent({
    },
    replace: {
      type: Object,
-      default: () => ({
-        value: "",
-        isString: false,
-        __varInputVal__: true,
-      }),
+      default: () => newVarInputVal("var"),
    },
    isReplace: {
      type: Boolean,
--- a/src/components/composer/file/FileOperationEditor.vue
+++ b/src/components/composer/file/FileOperationEditor.vue
@ -383,6 +383,7 @@ import { defineComponent } from "vue";
 import VariableInput from "components/composer/common/VariableInput.vue";
 import NumberInput from "components/composer/common/NumberInput.vue";
 import { stringifyArgv, parseFunction } from "js/composer/formatString";
+import { newVarInputVal } from "js/composer/varInputValManager";

 // 静态选项数据
 const ENCODING_OPTIONS = [
@ -463,11 +464,7 @@ export default defineComponent({
      manageOperationOptions: MANAGE_OPERATION_OPTIONS,
      defaultArgvs: {
        operation: "read",
-        filePath: {
-          value: "",
-          isString: true,
-          __varInputVal__: true,
-        },
+        filePath: newVarInputVal("str"),
        encoding: "utf8",
        readMode: "all",
        readFlag: "async",
--- a/src/components/composer/network/AxiosConfigEditor.vue
+++ b/src/components/composer/network/AxiosConfigEditor.vue
@ -162,6 +162,7 @@ import {
  methods,
  responseTypes,
 } from "js/options/httpOptions";
+import { newVarInputVal } from "js/composer/varInputValManager";

 export default defineComponent({
  name: "AxiosConfigEditor",
@ -187,18 +188,10 @@ export default defineComponent({
        .map((h) => h.value),
      activeTab: "headers",
      defaultArgvs: {
-        url: {
-          value: "",
-          isString: true,
-          __varInputVal__: true,
-        },
+        url: newVarInputVal("str"),
        method: "GET",
        headers: {
-          "User-Agent": {
-            value: userAgent[0].value,
-            isString: true,
-            __varInputVal__: true,
-          },
+          "User-Agent": newVarInputVal("str", userAgent[0].value),
          "Content-Type": contentTypes[0].value,
        },
        otherHeaders: {},
@ -208,36 +201,16 @@ export default defineComponent({
        maxRedirects: 5,
        responseType: "json",
        auth: {
-          username: {
-            value: "",
-            isString: true,
-            __varInputVal__: true,
-          },
-          password: {
-            value: "",
-            isString: true,
-            __varInputVal__: true,
-          },
+          username: newVarInputVal("str"),
+          password: newVarInputVal("str"),
        },
-        proxy: {
-          host: {
-            value: "",
-            isString: true,
-            __varInputVal__: true,
-          },
-          port: null,
-          auth: {
-            username: {
-              value: "",
-              isString: true,
-              __varInputVal__: true,
-            },
-            password: {
-              value: "",
-              isString: true,
-              __varInputVal__: true,
-            },
-          },
+      },
+      proxy: {
+        host: newVarInputVal("str"),
+        port: null,
+        auth: {
+          username: newVarInputVal("str"),
+          password: newVarInputVal("str"),
        },
      },
      commonPanels: [
@ -483,9 +456,7 @@ export default defineComponent({
      const formattedHeaders = Object.entries(headers).reduce(
        (acc, [key, value]) => {
          acc[key] =
-            typeof value === "string"
-              ? { value, isString: true, __varInputVal__: true }
-              : value;
+            typeof value === "string" ? newVarInputVal("str", value) : value;
          return acc;
        },
        {}
@ -501,11 +472,7 @@ export default defineComponent({
      this.updateArgvs("headers", newHeaders);
    },
    setUserAgent(value) {
-      this.updateArgvs("headers.User-Agent", {
-        value,
-        isString: true,
-        __varInputVal__: true,
-      });
+      this.updateArgvs("headers.User-Agent", newVarInputVal("str", value));
    },
    getFieldValue(path) {
      return path.split(".").reduce((obj, key) => obj?.[key], this.argvs);
--- a/src/components/composer/system/SystemCommandEditor.vue
+++ b/src/components/composer/system/SystemCommandEditor.vue
@ -132,6 +132,7 @@
 <script>
 import { defineComponent } from "vue";
 import { parseFunction, stringifyArgv } from "js/composer/formatString";
+import { newVarInputVal } from "js/composer/varInputValManager";
 import VariableInput from "components/composer/common/VariableInput.vue";
 import NumberInput from "components/composer/common/NumberInput.vue";
 import DictEditor from "components/composer/common/DictEditor.vue";
@ -164,30 +165,18 @@ export default defineComponent({
        { label: "Base64", value: "base64" },
      ],
      defaultArgvs: {
-        command: {
-          value: "",
-          isString: true,
-          __varInputVal__: true,
+        command: newVarInputVal("str"),
        },
        options: {
-          cwd: {
-            value: "",
-            isString: true,
-            __varInputVal__: true,
-          },
+          cwd: newVarInputVal("str"),
          env: {},
          autoEncoding: true,
          encoding: "buffer",
          timeout: 0,
          maxBuffer: 1024 * 1024, // 1MB
-          shell: {
-            value: "",
-            isString: true,
-            __varInputVal__: true,
-          },
-          windowsHide: true,
-        },
-      },
+        shell: newVarInputVal("str"),
+        windowsHide: true,
+      },  
    };
  },
  computed: {
--- a/src/components/composer/ubrowser/UBrowserBasic.vue
+++ b/src/components/composer/ubrowser/UBrowserBasic.vue
@ -71,7 +71,7 @@ import { defineComponent, ref, computed } from "vue";
 import { userAgent } from "js/options/httpOptions";
 import VariableInput from "components/composer/common/VariableInput.vue";
 import NumberInput from "components/composer/common/NumberInput.vue";
-
+import { newVarInputVal } from "js/composer/varInputValManager";
 export default defineComponent({
  name: "UBrowserBasic",
  components: {
@ -109,11 +109,7 @@ export default defineComponent({
      if (!newConfigs.goto.headers) {
        newConfigs.goto.headers = {};
      }
-      newConfigs.goto.headers.userAgent = {
-        value: val,
-        isString: true,
-        __varInputVal__: true,
-      };
+      newConfigs.goto.headers.userAgent = newVarInputVal("str", val);
      emit("update:configs", newConfigs);
      selectedUA.value = null;
    };
--- a/src/components/composer/ubrowser/operations/UBrowserCookieList.vue
+++ b/src/components/composer/ubrowser/operations/UBrowserCookieList.vue
@ -55,7 +55,7 @@
 <script>
 import { defineComponent } from "vue";
 import VariableInput from "components/composer/common/VariableInput.vue";
-
+import { newVarInputVal } from "js/composer/varInputValManager";
 export default defineComponent({
  name: "UBrowserCookieList",
  components: {
@ -66,16 +66,8 @@ export default defineComponent({
      type: Array,
      default: () => [
        {
-          name: {
-            value: "",
-            isString: true,
-            __varInputVal__: true,
-          },
-          value: {
-            value: "",
-            isString: true,
-            __varInputVal__: true,
-          },
+          name: newVarInputVal("str"),
+          value: newVarInputVal("str"),
        },
      ],
    },
@ -86,16 +78,8 @@ export default defineComponent({
      const newValue = [
        ...this.modelValue,
        {
-          name: {
-            value: "",
-            isString: true,
-            __varInputVal__: true,
-          },
-          value: {
-            value: "",
-            isString: true,
-            __varInputVal__: true,
-          },
+          name: newVarInputVal("str"),
+          value: newVarInputVal("str"),
        },
      ];
      this.$emit("update:modelValue", newValue);
@ -105,16 +89,8 @@ export default defineComponent({
      newValue.splice(index, 1);
      if (newValue.length === 0) {
        newValue.push({
-          name: {
-            value: "",
-            isString: true,
-            __varInputVal__: true,
-          },
-          value: {
-            value: "",
-            isString: true,
-            __varInputVal__: true,
-          },
+          name: newVarInputVal("str"),
+          value: newVarInputVal("str"),
        });
      }
      this.$emit("update:modelValue", newValue);
--- a/src/components/composer/ubrowser/operations/UBrowserDeviceName.vue
+++ b/src/components/composer/ubrowser/operations/UBrowserDeviceName.vue
@ -33,7 +33,7 @@
 import { defineComponent } from "vue";
 import { deviceName } from "js/options/httpOptions";
 import VariableInput from "components/composer/common/VariableInput.vue";
-
+import { newVarInputVal } from "js/composer/varInputValManager";
 export default defineComponent({
  name: "UBrowserDeviceName",
  components: {
@ -42,11 +42,7 @@ export default defineComponent({
  props: {
    modelValue: {
      type: Object,
-      default: () => ({
-        value: "",
-        isString: true,
-        __varInputVal__: true,
-      }),
+      default: () => newVarInputVal("str"),
    },
    label: {
      type: String,
--- a/src/components/composer/ubrowser/operations/UBrowserFileList.vue
+++ b/src/components/composer/ubrowser/operations/UBrowserFileList.vue
@ -43,7 +43,7 @@
 <script>
 import { defineComponent } from "vue";
 import VariableInput from "components/composer/common/VariableInput.vue";
-
+import { newVarInputVal } from "js/composer/varInputValManager";
 export default defineComponent({
  name: "UBrowserFileList",
  components: {
@ -60,11 +60,7 @@ export default defineComponent({
    addFile() {
      const newValue = [
        ...(this.modelValue || []),
-        {
-          value: "",
-          isString: true,
-          __varInputVal__: true,
-        },
+        newVarInputVal("str"),
      ];
      this.$emit("update:modelValue", newValue);
    },
--- a/src/components/composer/ubrowser/operations/UBrowserNamedParamList.vue
+++ b/src/components/composer/ubrowser/operations/UBrowserNamedParamList.vue
@ -47,7 +47,7 @@
 <script>
 import { defineComponent } from "vue";
 import VariableInput from "components/composer/common/VariableInput.vue";
-
+import { newVarInputVal } from "js/composer/varInputValManager";
 export default defineComponent({
  name: "UBrowserNamedParamList",
  components: {
@ -56,20 +56,7 @@ export default defineComponent({
  props: {
    modelValue: {
      type: Array,
-      default: () => [
-        {
-          name: {
-            value: "",
-            isString: true,
-            __varInputVal__: true,
-          },
-          value: {
-            value: "",
-            isString: true,
-            __varInputVal__: true,
-          },
-        },
-      ],
+      default: () => [newVarInputVal("str"), newVarInputVal("str")],
    },
    label: String,
  },
@ -79,16 +66,8 @@ export default defineComponent({
      const newValue = [
        ...(this.modelValue || []),
        {
-          name: {
-            value: "",
-            isString: true,
-            __varInputVal__: true,
-          },
-          value: {
-            value: "",
-            isString: true,
-            __varInputVal__: true,
-          },
+          name: newVarInputVal("str"),
+          value: newVarInputVal("str"),
        },
      ];
      this.$emit("update:modelValue", newValue);
--- a/src/components/composer/ui/SelectListEditor.vue
+++ b/src/components/composer/ui/SelectListEditor.vue
@ -178,15 +178,8 @@ import VariableInput from "../common/VariableInput.vue";
 import ArrayEditor from "../common/ArrayEditor.vue";
 import OperationCard from "../common/OperationCard.vue";
 import { parseFunction, stringifyArgv } from "js/composer/formatString";
+import { newVarInputVal, isVarInputVal} from "js/composer/varInputValManager";

-const newVarInputVal = (type = "str", val = "") => {
-  if (typeof val !== "string") val = JSON.stringify(val);
-  return {
-    value: val,
-    isString: type === "str",
-    __varInputVal__: true,
-  };
-};

 const jsonDefaultSelects = new Array(3).fill().map((_, index) => ({
  id: newVarInputVal("var", index),
@ -228,11 +221,7 @@ export default defineComponent({
        inputMode: "manual",
        selects: defaultSelects.json,
        optionType: "json",
-        placeholder: {
-          value: "搜索...",
-          isString: true,
-          __varInputVal__: true,
-        },
+        placeholder: newVarInputVal("str", "搜索..."),
        enableSearch: true,
        showCancelButton: false,
        closeOnSelect: true,
@ -303,7 +292,7 @@ export default defineComponent({
        if (!result) return this.defaultArgvs;

        const [selects, options = {}] = result.argvs;
-        const inputMode = selects.__varInputVal__ ? "variable" : "manual";
+        const inputMode = isVarInputVal(selects) ? "variable" : "manual";
        return {
          ...this.defaultArgvs,
          inputMode,
--- a/src/js/composer/commands/dataCommands.js
+++ b/src/js/composer/commands/dataCommands.js
@ -1,3 +1,5 @@
+import { newVarInputVal } from "js/composer/varInputValManager";
+
 export const dataCommands = {
  label: "数据处理",
  icon: "format_color_text",
@ -552,13 +554,7 @@ export const dataCommands = {
              type: "arrayEditor",
              icon: "memory",
              width: 12,
-              defaultValue: [
-                {
-                  value: "",
-                  isString: false,
-                  __varInputVal__: true,
-                },
-              ],
+              defaultValue: [newVarInputVal("var")],
            },
            {
              label: "总长度（可选）",
--- a/src/js/composer/commands/uiCommands.js
+++ b/src/js/composer/commands/uiCommands.js
@ -1,3 +1,5 @@
+import { newVarInputVal } from "js/composer/varInputValManager";
+
 export const uiCommands = {
  label: "UI操作",
  icon: "web",
@ -14,16 +16,8 @@ export const uiCommands = {
          label: "按钮组",
          type: "arrayEditor",
          defaultValue: [
-            {
-              value: "是",
-              isString: true,
-              __varInputVal__: true,
-            },
-            {
-              value: "否",
-              isString: true,
-              __varInputVal__: true,
-            },
+            newVarInputVal("str", "是"),
+            newVarInputVal("str", "否"),
          ],
        },
      ],
@ -53,16 +47,8 @@ export const uiCommands = {
          },
          defaultValue: [
            {
-              label: {
-                value: "请输入",
-                isString: true,
-                __varInputVal__: true,
-              },
-              value: {
-                value: "",
-                isString: true,
-                __varInputVal__: true,
-              },
+              label: newVarInputVal("str", "请输入"),
+              value: newVarInputVal("str"),
            },
          ],
        },
--- a/src/js/composer/customComponentGuide.js
+++ b/src/js/composer/customComponentGuide.js
@ -249,8 +249,7 @@ const customComponentGuide = {
          parseToHasType: {
            description: "将字符串解析为带类型的值",
            usage: "用于解析 VariableInput 类型的值",
-            example:
-              "将 '\"text\"' 解析为 {value: 'text', isString: true, __varInputVal__: true,}",
+            example: "将 '\"text\"' 解析为 newVarInputVal('str', 'text')",
          },
        },
      },
@ -292,7 +291,7 @@ const customComponentGuide = {
          description: "变量输入组件",
          usage: "用于输入可能包含变量的字符串",
          props: [
-            "model-value - 输入值，需要包含 value、isString、__varInputVal__ 属性",
+            "model-value - 输入值，需要包含 value、isString、__varInputVal__ 属性, 通过 varInputValManager 的 newVarInputVal 创建",
            "label - 输入框标签",
            "icon - 输入框图标",
          ],
--- a/src/js/composer/formatString.js
+++ b/src/js/composer/formatString.js
@ -1,13 +1,9 @@
 import { parse } from "@babel/parser";
-
-/**
- * 处理带有 __varInputVal__ 属性的对象
- * @param {Object} argv 要处理的对象
- * @returns {string} 处理后的字符串
- */
-const stringifyVarInputVal = (argv) => {
-  return argv.isString ? `"${argv.value}"` : argv.value;
-};
+import {
+  stringifyVarInputVal,
+  isVarInputVal,
+  newVarInputVal,
+} from "./varInputValManager";

 /**
 * 递归移除对象中的空值
@ -17,12 +13,10 @@ const stringifyVarInputVal = (argv) => {
 const removeEmptyValues = (obj) => {
  return window.lodashM.omitBy(obj, (value) => {
    // 如果value是VariableInput的输出，则取其value值
-    const realValue = value?.hasOwnProperty("__varInputVal__")
-      ? value.value
-      : value;
+    const realValue = isVarInputVal(value) ? value.value : value;
    if (window.lodashM.isNil(realValue) || realValue === "") return true;
    // 如果value是对象，并且不是VariableInput的输出，则递归移除空值
-    if (typeof value === "object" && !value.hasOwnProperty("__varInputVal__"))
+    if (typeof value === "object" && !isVarInputVal(value))
      return window.lodashM.isEmpty(removeEmptyValues(value));
    return false;
  });
@ -38,7 +32,7 @@ const processObject = (obj, parentPath = "") => {
  // 移除空值
  obj = removeEmptyValues(obj);
  // 如果是 VariableInput 的输出，直接用 stringifyVarInputVal 处理
-  if (obj?.hasOwnProperty("__varInputVal__")) {
+  if (isVarInputVal(obj)) {
    return stringifyVarInputVal(obj);
  }

@ -51,7 +45,7 @@ const processObject = (obj, parentPath = "") => {
    // 处理对象类型
    if (value && typeof value === "object") {
      // 如果是 VariableInput 的输出，直接用 stringifyVarInputVal 处理
-      if (value.hasOwnProperty("__varInputVal__")) {
+      if (isVarInputVal(value)) {
        valueStr = stringifyVarInputVal(value);
      } else {
        valueStr = processObject(value, parentPath + "  ");
@ -83,7 +77,7 @@ const processObject = (obj, parentPath = "") => {
 * @returns {string} 格式化后的JSON字符串
 */
 const stringifyObject = (jsonObj) => {
-  if (jsonObj?.hasOwnProperty("__varInputVal__")) {
+  if (isVarInputVal(jsonObj)) {
    return stringifyVarInputVal(jsonObj);
  }
  if (jsonObj instanceof Array) {
@ -126,23 +120,11 @@ export const stringifyArgv = (argv) => {
 */
 export const parseToHasType = (str) => {
  if (!str) {
-    return {
-      value: "",
-      isString: true,
-      __varInputVal__: true,
-    };
+    return newVarInputVal("str", "");
  }
  return str.startsWith('"') && str.endsWith('"')
-    ? {
-        value: str.slice(1, -1),
-        isString: true,
-        __varInputVal__: true,
-      }
-    : {
-        value: str,
-        isString: false,
-        __varInputVal__: true,
-      };
+    ? newVarInputVal("str", str.slice(1, -1))
+    : newVarInputVal("var", str);
 };

 /**
@ -272,31 +254,23 @@ export const parseFunction = (functionStr, options = {}) => {
        case "StringLiteral":
          // 字符串字面量总是带引号的
          return shouldUseVariableFormat
-            ? { value: node.value, isString: true, __varInputVal__: true }
+            ? newVarInputVal("str", node.value)
            : node.value;
        // 数字、布尔
        case "NumericLiteral":
        case "BooleanLiteral":
          return shouldUseVariableFormat
-            ? {
-                value: JSON.stringify(node.value),
-                isString: false,
-                __varInputVal__: true,
-              }
+            ? newVarInputVal("var", JSON.stringify(node.value))
            : node.value;
        // null
        case "NullLiteral":
          return shouldUseVariableFormat
-            ? {
-                value: "null",
-                isString: false,
-                __varInputVal__: true,
-              }
+            ? newVarInputVal("var", "null")
            : null;
        case "Identifier":
          // 标识符（变量）总是不带引号的
          return shouldUseVariableFormat
-            ? { value: node.name, isString: false, __varInputVal__: true }
+            ? newVarInputVal("var", node.name)
            : node.name;
        case "ObjectExpression":
          return node.properties.reduce((obj, prop) => {
@ -317,18 +291,14 @@ export const parseFunction = (functionStr, options = {}) => {
              return Object.entries(processedElement).reduce(
                (acc, [key, value]) => {
                  // 如果值已经是 varInputVal 格式，直接使用
-                  if (value?.__varInputVal__) {
+                  if (isVarInputVal(value)) {
                    acc[key] = value;
                  } else {
                    // 否则转换为 varInputVal 格式
-                    acc[key] = {
-                      value:
-                        typeof value === "string"
-                          ? value
-                          : JSON.stringify(value),
-                      isString: typeof value === "string",
-                      __varInputVal__: true,
-                    };
+                    acc[key] = newVarInputVal(
+                      typeof value === "string" ? "str" : "var",
+                      typeof value === "string" ? value : JSON.stringify(value)
+                    );
                  }
                  return acc;
                },
--- a/src/js/composer/ubrowserConfig.js
+++ b/src/js/composer/ubrowserConfig.js
@ -1,3 +1,5 @@
+import { newVarInputVal } from "js/composer/varInputValManager";
+
 // ubrowser 浏览器操作配置
 export const ubrowserOperationConfigs = [
  {
@ -565,22 +567,10 @@ const defaultUBrowserRunConfigs = {
 export const defaultUBrowserConfigs = {
  // 基础参数
  goto: {
-    url: {
-      value: "",
-      isString: true,
-      __varInputVal__: true,
-    },
+    url: newVarInputVal("str"),
    headers: {
-      Referer: {
-        value: "",
-        isString: true,
-        __varInputVal__: true,
-      },
-      userAgent: {
-        value: "",
-        isString: true,
-        __varInputVal__: true,
-      },
+      Referer: newVarInputVal("str"),
+      userAgent: newVarInputVal("str"),
    },
    timeout: 60000,
  },
@ -590,183 +580,87 @@ export const defaultUBrowserConfigs = {
    timeout: 60000,
  },
  click: {
-    selector: {
-      value: "",
-      isString: true,
-      __varInputVal__: true,
-    },
+    selector: newVarInputVal("str"),
  },
  css: {
-    value: {
-      value: "",
-      isString: true,
-      __varInputVal__: true,
-    },
+    value: newVarInputVal("str"),
  },
  press: {
-    key: {
-      value: "",
-      isString: true,
-      __varInputVal__: true,
-    },
+    key: newVarInputVal("str"),
    modifiers: [],
  },
  paste: {
-    text: {
-      value: "",
-      isString: true,
-      __varInputVal__: true,
-    },
+    text: newVarInputVal("str"),
  },
  screenshot: {
-    selector: {
-      value: "",
-      isString: true,
-      __varInputVal__: true,
-    },
+    selector: newVarInputVal("str"),
    rect: { x: 0, y: 0, width: 0, height: 0 },
-    savePath: {
-      value: "",
-      isString: true,
-      __varInputVal__: true,
-    },
+    savePath: newVarInputVal("str"),
  },
  pdf: {
    options: {
      marginsType: 0,
      pageSize: "A4",
    },
-    savePath: {
-      value: "",
-      isString: true,
-      __varInputVal__: true,
-    },
+    savePath: newVarInputVal("str"),
  },
  device: {
    size: { width: 1280, height: 800 },
-    useragent: {
-      value: "",
-      isString: true,
-      __varInputVal__: true,
-    },
+    useragent: newVarInputVal("str"),
  },
  cookies: {
-    name: {
-      value: "",
-      isString: true,
-      __varInputVal__: true,
-    },
+    name: newVarInputVal("str"),
  },
  setCookies: {
    items: [
      {
-        name: {
-          value: "",
-          isString: true,
-          __varInputVal__: true,
-        },
-        value: {
-          value: "",
-          isString: true,
-          __varInputVal__: true,
-        },
+        name: newVarInputVal("str"),
+        value: newVarInputVal("str"),
      },
    ],
  },
  removeCookies: {
-    name: {
-      value: "",
-      isString: true,
-      __varInputVal__: true,
-    },
+    name: newVarInputVal("str"),
  },
  clearCookies: {
-    url: {
-      value: "",
-      isString: true,
-      __varInputVal__: true,
-    },
+    url: newVarInputVal("str"),
  },
  evaluate: {
    function: "",
    params: [],
  },
  when: {
-    condition: {
-      value: "",
-      isString: false,
-      __varInputVal__: true,
-    },
+    condition: newVarInputVal("var"),
  },
  mousedown: {
-    selector: {
-      value: "",
-      isString: true,
-      __varInputVal__: true,
-    },
+    selector: newVarInputVal("str"),
  },
  mouseup: {
-    selector: {
-      value: "",
-      isString: true,
-      __varInputVal__: true,
-    },
+    selector: newVarInputVal("str"),
  },
  file: {
-    selector: {
-      value: "",
-      isString: true,
-      __varInputVal__: true,
-    },
+    selector: newVarInputVal("str"),
    files: [],
  },
  value: {
-    selector: {
-      value: "",
-      isString: true,
-      __varInputVal__: true,
-    },
-    value: {
-      value: "",
-      isString: true,
-      __varInputVal__: true,
-    },
+    selector: newVarInputVal("str"),
+    value: newVarInputVal("str"),
  },
  check: {
-    selector: {
-      value: "",
-      isString: true,
-      __varInputVal__: true,
-    },
+    selector: newVarInputVal("str"),
    checked: false,
  },
  focus: {
-    selector: {
-      value: "",
-      isString: true,
-      __varInputVal__: true,
-    },
+    selector: newVarInputVal("str"),
  },
  scroll: {
-    target: {
-      value: "",
-      isString: true,
-      __varInputVal__: true,
-    },
+    target: newVarInputVal("str"),
    x: 0,
    y: 0,
  },
  download: {
-    url: {
-      value: "",
-      isString: true,
-      __varInputVal__: true,
-    },
-    savePath: {
-      value: "",
-      isString: true,
-      __varInputVal__: true,
-    },
+    url: newVarInputVal("str"),
+    savePath: newVarInputVal("str"),
  },
  // 运行参数
  run: defaultUBrowserRunConfigs,
--- a/src/js/composer/varInputValManager.js
+++ b/src/js/composer/varInputValManager.js
@ -0,0 +1,41 @@
+/**
+ * 创建一个 VariableInput 对象
+ * @param {string} type - 变量类型，默认为 "str"
+ * @param {string} val - 变量值
+ * @returns {Object} VariableInput 对象
+ */
+export const newVarInputVal = (type = "str", val = "") => {
+  if (typeof val !== "string") val = JSON.stringify(val);
+  return {
+    value: val,
+    isString: type === "str",
+    __varInputVal__: true,
+  };
+};
+
+/**
+ * 检查一个对象是否是 VariableInput 对象
+ * @param {Object} val - 要检查的对象
+ * @returns {boolean} 是否是 VariableInput 对象
+ */
+export const isVarInputVal = (val) => {
+  return val && val.__varInputVal__;
+};
+
+/**
+ * 创建一个空的 VariableInput 对象
+ * @param {string} type - 变量类型，默认为 "str"
+ * @returns {Object} 空的 VariableInput 对象
+ */
+export const newEmptyVarInputVal = (type = "str") => {
+  return newVarInputVal(type, "");
+};
+
+/**
+ * 处理带有 __varInputVal__ 属性的对象
+ * @param {Object} argv 要处理的对象
+ * @returns {string} 处理后的字符串
+ */
+export const stringifyVarInputVal = (argv) => {
+  return argv.isString ? `"${argv.value}"` : argv.value;
+};