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

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 (
-        this.modelValue.functionSelector?.options.find(
-          (item) => item.value === this.funcName
-        )?.config || []
-      );
+      return this.getSelectFunction()?.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
-        .map((argv) => stringifyArgv(argv))
-        .filter((item) => item != null && item !== "");
-      return `${funcName}(${newArgvs.join(",")})`;
+      console.log("argvs", argvs);
+      /**
+       * 字符串模式stringfiy后，null会变成'"null"', ''变成'""'
+       * 变量模式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(
-        (option) => option.value === this.funcName
-      )?.label;
+      const funcNameLabel = this.getSelectFunction()?.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) {
-        this.$emit("update:modelValue", 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>