From 7a43695e2d280eca05e60ee65dfcf9dd810a047c Mon Sep 17 00:00:00 2001
From: fofolee <fofolee@qq.com>
Date: Wed, 8 Jan 2025 14:39:08 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=9F=E4=B8=80VarInput=E5=8F=98=E9=87=8F?=
 =?UTF-8?q?=E7=9A=84=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/composer/MultiParams.vue       |   7 +-
 .../composer/common/ArrayEditor.vue           |  62 ++-----
 src/components/composer/common/DictEditor.vue |  25 +--
 .../composer/common/VariableInput.vue         |  44 +----
 .../composer/data/AsymmetricCryptoEditor.vue  |   8 +-
 .../composer/data/SymmetricCryptoEditor.vue   |   7 +-
 src/components/composer/data/ZlibEditor.vue   |   8 +-
 .../composer/data/regex/RegexEditor.vue       |  13 +-
 .../composer/data/regex/RegexTester.vue       |  13 +-
 .../composer/file/FileOperationEditor.vue     |   7 +-
 .../composer/network/AxiosConfigEditor.vue    |  61 ++-----
 .../composer/system/SystemCommandEditor.vue   |  23 +--
 .../composer/ubrowser/UBrowserBasic.vue       |   8 +-
 .../operations/UBrowserCookieList.vue         |  38 +---
 .../operations/UBrowserDeviceName.vue         |   8 +-
 .../ubrowser/operations/UBrowserFileList.vue  |   8 +-
 .../operations/UBrowserNamedParamList.vue     |  29 +---
 .../composer/ui/SelectListEditor.vue          |  17 +-
 src/js/composer/commands/dataCommands.js      |  10 +-
 src/js/composer/commands/uiCommands.js        |  26 +--
 src/js/composer/customComponentGuide.js       |   5 +-
 src/js/composer/formatString.js               |  74 +++-----
 src/js/composer/ubrowserConfig.js             | 164 ++++--------------
 src/js/composer/varInputValManager.js         |  41 +++++
 24 files changed, 190 insertions(+), 516 deletions(-)
 create mode 100644 src/js/composer/varInputValManager.js

diff --git a/src/components/composer/MultiParams.vue b/src/components/composer/MultiParams.vue
index 19c8ddb..08d6d6d 100644
--- 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 {
diff --git a/src/components/composer/common/ArrayEditor.vue b/src/components/composer/common/ArrayEditor.vue
index a11b71e..c5f536e 100644
--- 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);
diff --git a/src/components/composer/common/DictEditor.vue b/src/components/composer/common/DictEditor.vue
index ce51305..2514b7a 100644
--- 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;
diff --git a/src/components/composer/common/VariableInput.vue b/src/components/composer/common/VariableInput.vue
index 17d8b8d..b0e0013 100644
--- 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));
       }
     },
   },
diff --git a/src/components/composer/data/AsymmetricCryptoEditor.vue b/src/components/composer/data/AsymmetricCryptoEditor.vue
index 363b3f7..8c3a6f7 100644
--- 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",
diff --git a/src/components/composer/data/SymmetricCryptoEditor.vue b/src/components/composer/data/SymmetricCryptoEditor.vue
index 69c39bd..9f21bac 100644
--- 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",
diff --git a/src/components/composer/data/ZlibEditor.vue b/src/components/composer/data/ZlibEditor.vue
index 3890627..3751d86 100644
--- 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,
diff --git a/src/components/composer/data/regex/RegexEditor.vue b/src/components/composer/data/regex/RegexEditor.vue
index 36f5801..327ecd7 100644
--- 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,
diff --git a/src/components/composer/data/regex/RegexTester.vue b/src/components/composer/data/regex/RegexTester.vue
index 9f253a1..d88a029 100644
--- 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,
diff --git a/src/components/composer/file/FileOperationEditor.vue b/src/components/composer/file/FileOperationEditor.vue
index baaac9a..9320ff0 100644
--- 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",
diff --git a/src/components/composer/network/AxiosConfigEditor.vue b/src/components/composer/network/AxiosConfigEditor.vue
index 5a2d499..2cc9617 100644
--- 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);
diff --git a/src/components/composer/system/SystemCommandEditor.vue b/src/components/composer/system/SystemCommandEditor.vue
index 47b81d1..8b9143a 100644
--- 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: {
diff --git a/src/components/composer/ubrowser/UBrowserBasic.vue b/src/components/composer/ubrowser/UBrowserBasic.vue
index f5db468..c039457 100644
--- 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;
     };
diff --git a/src/components/composer/ubrowser/operations/UBrowserCookieList.vue b/src/components/composer/ubrowser/operations/UBrowserCookieList.vue
index 8faacf2..d220864 100644
--- 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);
diff --git a/src/components/composer/ubrowser/operations/UBrowserDeviceName.vue b/src/components/composer/ubrowser/operations/UBrowserDeviceName.vue
index 91fab79..4c45a43 100644
--- 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,
diff --git a/src/components/composer/ubrowser/operations/UBrowserFileList.vue b/src/components/composer/ubrowser/operations/UBrowserFileList.vue
index 8a3268f..12e20ea 100644
--- 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);
     },
diff --git a/src/components/composer/ubrowser/operations/UBrowserNamedParamList.vue b/src/components/composer/ubrowser/operations/UBrowserNamedParamList.vue
index caef399..f99a4ef 100644
--- 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);
diff --git a/src/components/composer/ui/SelectListEditor.vue b/src/components/composer/ui/SelectListEditor.vue
index 15a2ab5..9906938 100644
--- 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,
diff --git a/src/js/composer/commands/dataCommands.js b/src/js/composer/commands/dataCommands.js
index b3fc0a4..539642f 100644
--- 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: "总长度（可选）",
diff --git a/src/js/composer/commands/uiCommands.js b/src/js/composer/commands/uiCommands.js
index aa48f8b..f55100a 100644
--- 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"),
             },
           ],
         },
diff --git a/src/js/composer/customComponentGuide.js b/src/js/composer/customComponentGuide.js
index cf61a53..afe4821 100644
--- 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 - 输入框图标",
           ],
diff --git a/src/js/composer/formatString.js b/src/js/composer/formatString.js
index 1f531cd..bfc9b9f 100644
--- 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;
                 },
diff --git a/src/js/composer/ubrowserConfig.js b/src/js/composer/ubrowserConfig.js
index 31cc3c4..f12cc74 100644
--- 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,
diff --git a/src/js/composer/varInputValManager.js b/src/js/composer/varInputValManager.js
new file mode 100644
index 0000000..f07614f
--- /dev/null
+++ 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;
+};