优化参数值为空和传递空参数的逻辑

src/components/composer/MultiParams.vue

@@ -4,7 +4,7 @@
       v-if="hasFunctionSelector"
       :model-value="funcName"
       @update:model-value="funcName = $event"
-      :options="localCommand.functionSelector?.options"
+      :options="localCommand.functionSelector"
     />
     <ParamInput :configs="localConfig" :values="argvs" @update="updateArgv" />
   </div>
@@ -40,17 +40,22 @@ export default defineComponent({
     },
     // 特定函数独有参数配置
     functionConfig() {
-      return (
+      return this.getSelectFunction()?.config || [];
-        this.modelValue.functionSelector?.options.find(
-          (item) => item.value === this.funcName
-        )?.config || []
-      );
     },
     localConfig() {
       return [...this.commonConfig, ...this.functionConfig].map((item) => {
+        const value =
+          item.type === "varInput"
+            ? item.defaultValue || {
+                value: "",
+                isString: true,
+                __varInputVal__: true,
+              }
+            : // 其他类型情况复杂，不做判断，没有默认值返回undefined
+              item.defaultValue;
         return {
           ...item,
-          value: item.defaultValue,
+          value,
         };
       });
     },
@@ -62,7 +67,20 @@ export default defineComponent({
         return this.modelValue.value;
       },
       set(value) {
-        this.updateModelValue(value, this.defaultArgvs);
+        // 构建新的参数数组
+        const newArgvs = [];
+
+        // 保留通用配置的参数值
+        this.commonConfig.forEach((_, index) => {
+          newArgvs[index] = this.argvs[index];
+        });
+
+        // 使用新选择的函数独有配置的默认值
+        this.getSelectFunction(value)?.config?.forEach((config, index) => {
+          newArgvs[this.commonConfig.length + index] = config.defaultValue;
+        });
+
+        this.updateModelValue(value, newArgvs);
       },
     },
     argvs() {
@@ -75,6 +93,11 @@ export default defineComponent({
     },
   },
   methods: {
+    getSelectFunction(funcName = this.funcName) {
+      return this.modelValue.functionSelector?.find(
+        (item) => item.value === funcName
+      );
+    },
     updateArgv(index, value) {
       const newArgvs = [...this.argvs];
       newArgvs[index] = value;
@@ -82,10 +105,41 @@ export default defineComponent({
       this.updateModelValue(this.funcName, newArgvs);
     },
     generateCode(funcName, argvs) {
-      const newArgvs = argvs
+      console.log("argvs", argvs);
-        .map((argv) => stringifyArgv(argv))
+      /**
-        .filter((item) => item != null && item !== "");
+       * 字符串模式stringfiy后，null会变成'"null"', ''变成'""'
-      return `${funcName}(${newArgvs.join(",")})`;
+       * 变量模式stringify后，null变成'null', ''保持''
+       */
+      const stringifiedArgvs = argvs.map((argv) => stringifyArgv(argv));
+
+      /* 空值处理：
+       * 1. 去掉 undefined，'', null
+       * 2. varInput在字符串模式下，留空为'""'，所以不会被处理
+       * 3. 变量模式下，留空是'', 会被过滤
+       * 4. 如果想传递空字符串，将varInput切为字符串模式并留空
+       * 5. 如果不想传递对应参数，将varInput切为变量模式并留空
+       * 6. 如果想传递空参数，将varInput切为变量模式并设置为null或undefined
+
+       * [undefined, undefined] -> funcName()
+       * [undefined, 1] -> ''
+       * [1, undefined] -> funcName(1)
+       * [null, 1] -> funcName(null, 1)
+       * [1, 字符串模式下varInput留空] -> funcName(1, "")
+       * [1, 变量模式下varInput留空] -> funcName(1)
+       * [1, 变量模式下varInput设置为null] -> funcName(1, null)
+       */
+      // 空参数后面跟着非空参数，不生成代码
+      const isEmpty = (v) => v === undefined || v === "" || v === null;
+      for (let i = 0; i < stringifiedArgvs.length - 1; i++) {
+        if (isEmpty(stringifiedArgvs[i]) && !isEmpty(stringifiedArgvs[i + 1])) {
+          return "";
+        }
+      }
+
+      // 过滤空参数，由于前面已经对处于非空参数中间的空参数做了处理，这里直接过滤空参数不会对参数顺序造成影响
+      const finalArgvs = stringifiedArgvs.filter((v) => !isEmpty(v));
+
+      return `${funcName}(${finalArgvs.join(",")})`;
     },
     parseCodeToArgvs(code) {
       let argvs = window.lodashM.cloneDeep(this.defaultArgvs);
@@ -110,9 +164,7 @@ export default defineComponent({
     },
     getSummary(argvs) {
       // 虽然header里对溢出做了处理，但是这里截断主要是为了节省存储空间
-      const funcNameLabel = this.localCommand.functionSelector?.options.find(
+      const funcNameLabel = this.getSelectFunction()?.label;
-        (option) => option.value === this.funcName
-      )?.label;
       const subFeature = funcNameLabel ? `${funcNameLabel} ` : "";
       const allArgvs = argvs
         .filter((item) => item != null && item != "")

src/components/composer/common/NumberInput.vue

@@ -67,13 +67,17 @@ export default defineComponent({
         return this.modelValue;
       },
       set(value) {
+        if (value === null || value === undefined || value === "") {
+          this.$emit("update:modelValue", null);
+        } else {
           this.$emit("update:modelValue", value);
+        }
       },
     },
   },
   methods: {
     updateNumber(delta) {
-      this.$emit("update:modelValue", this.localValue + delta);
+      this.$emit("update:modelValue", (this.localValue || 0) + delta);
     },
   },
 });

src/components/composer/common/ParamInput.vue

@@ -43,6 +43,8 @@
       <q-select
         v-else-if="config.type === 'select'"
         filled
+        emit-value
+        map-options
         :model-value="values[index]"
         @update:model-value="$emit('update', index, $event)"
         :options="config.options"
@@ -113,9 +115,16 @@ export default defineComponent({
   emits: ["update"],
   methods: {
     getColumnStyle(width = 12) {
+      if (width === "auto") {
+        return {
+          flex: "1 1 0%",
+          minWidth: "0",
+        };
+      }
       const columnWidth = (width / 12) * 100;
       return {
         width: `calc(${columnWidth}% - var(--grid-gap))`,
+        flex: "0 0 auto",
       };
     },
   },
@@ -134,11 +143,18 @@ export default defineComponent({
 .grid-item {
   min-width: 50px;
   margin-bottom: 0;
+  display: flex;
+}
+
+.grid-item > * {
+  flex: 1;
+  min-width: 0;
 }
 
 @media (max-width: 600px) {
   .grid-item {
     width: 100% !important;
+    flex: 1 1 100% !important;
   }
 }
 </style>

src/js/composer/commands/dataCommands.js

@@ -17,8 +17,7 @@ export const dataCommands = {
           type: "varInput",
         },
       ],
-      functionSelector: {
+      functionSelector: [
-        options: [
         {
           label: "Base64编码",
           value: "quickcomposer.data.base64Encode",
@@ -61,7 +60,6 @@ export const dataCommands = {
         },
       ],
     },
-    },
     {
       value: "quickcomposer.data.symmetricCrypto",
       label: "对称加解密",
@@ -90,8 +88,7 @@ export const dataCommands = {
           type: "varInput",
         },
       ],
-      functionSelector: {
+      functionSelector: [
-        options: [
         {
           label: "MD5",
           value: "quickcomposer.data.md5Hash",
@@ -119,7 +116,6 @@ export const dataCommands = {
         },
       ],
     },
-    },
     {
       value: "Math.sin",
       label: "数学计算",
@@ -134,8 +130,7 @@ export const dataCommands = {
           type: "numInput",
         },
       ],
-      functionSelector: {
+      functionSelector: [
-        options: [
         {
           label: "正弦(sin)",
           value: "Math.sin",
@@ -208,7 +203,6 @@ export const dataCommands = {
         },
       ],
     },
-    },
     {
       value: "quickcomposer.data.random",
       label: "随机数",

src/js/composer/commands/simulateCommands.js

@@ -27,8 +27,7 @@ export const simulateCommands = {
           width: 6,
         },
       ],
-      functionSelector: {
+      functionSelector: [
-        options: [
         {
           label: "单击",
           value: "utools.simulateMouseClick",
@@ -45,8 +44,6 @@ export const simulateCommands = {
           icon: "mouse",
         },
       ],
-        allowEmptyArgv: true,
-      },
     },
     {
       value: "utools.simulateMouseMove",

src/js/composer/formatString.js

@@ -103,15 +103,19 @@ const stringifyObject = (jsonObj) => {
  * @returns {string} 格式化后的字符串
  */
 export const stringifyArgv = (argv) => {
-  // 处理普通字符串
+  // 普通字符串加上引号
   if (typeof argv === "string") {
     return `"${argv}"`;
   }
-  // 处理对象
+  // null类型是Object，需要单独处理，返回原值
+  if (argv === null) {
+    return null;
+  }
+  // 对象通过stringifyObject处理
   if (typeof argv === "object") {
     return stringifyObject(argv);
   }
-  // 处理其他类型
+  // 其他类型返回原值
   return argv;
 };
 
@@ -270,12 +274,25 @@ export const parseFunction = (functionStr, options = {}) => {
           return shouldUseVariableFormat
             ? { value: node.value, isString: true, __varInputVal__: true }
             : node.value;
+        // 数字、布尔
         case "NumericLiteral":
-          return node.value;
         case "BooleanLiteral":
-          return node.value;
+          return shouldUseVariableFormat
+            ? {
+                value: JSON.stringify(node.value),
+                isString: false,
+                __varInputVal__: true,
+              }
+            : node.value;
+        // null
         case "NullLiteral":
-          return null;
+          return shouldUseVariableFormat
+            ? {
+                value: "null",
+                isString: false,
+                __varInputVal__: true,
+              }
+            : null;
         case "Identifier":
           // 标识符（变量）总是不带引号的
           return shouldUseVariableFormat

项目说明.json

@@ -28,15 +28,11 @@
                 }
               },
               "functionSelector": {
-                "描述": "可选，函数选择器，用于选择函数，如果存在则使用MultiParams组件，用于一类参数类似，但函数名不同的命令",
-                "options": {
-                  "描述": "必选，选项，一个数组，每个元素是一个对象，包含以下属性：",
                 "配置项属性": {
                   "label": "必选，显示的名称",
                   "value": "必选，生成代码时使用的函数名",
                   "icon": "可选，图标",
                   "config": "可选，特定函数独有参数配置，和MultiParams组件的config一样"
-                  }
                 },
                 "value": "必选，默认值"
               }