新增ParamInporter统一处理通用组件导入

src/components/composer/MultiParams.vue

@@ -13,7 +13,7 @@
 <script>
 import { defineComponent } from "vue";
 import OperationCard from "components/composer/common/OperationCard.vue";
-import ParamInput from "components/composer/common/ParamInput.vue";
+import ParamInput from "components/composer/param/ParamInput.vue";
 import { stringifyArgv, parseFunction } from "js/composer/formatString";
 import { newVarInputVal } from "js/composer/varInputValManager";
 

src/components/composer/common/OptionEditor.vue

@@ -12,20 +12,11 @@
         class="grid-item"
         :style="getColumnStyle(config.width)"
       >
-        <component
+        <ParamImporter
-          :is="config.component"
+          :config="config"
           :model-value="localObject[key]"
           @update:model-value="updateOption(key, $event)"
-          v-bind="config"
+        />
-          filled
-          dense
-          :emit-value="config.component === 'q-select'"
-          :map-options="config.component === 'q-select'"
-        >
-          <template v-slot:prepend v-if="shouldShowQIcon(config)">
-            <q-icon :name="config.icon" />
-          </template>
-        </component>
       </div>
     </div>
   </component>
@@ -33,27 +24,13 @@
 
 <script>
 import { defineComponent } from "vue";
+import ParamImporter from "../param/ParamImporter.vue";
 import BorderLabel from "./BorderLabel.vue";
-import VariableInput from "./VariableInput.vue";
-import NumberInput from "./NumberInput.vue";
-import ArrayEditor from "./ArrayEditor.vue";
-import DictEditor from "./DictEditor.vue";
-import ButtonGroup from "./ButtonGroup.vue";
-import ControlInput from "./ControlInput.vue";
-import CheckGroup from "./CheckGroup.vue";
-import CheckButton from "./CheckButton.vue";
 export default defineComponent({
   name: "OptionEditor",
   components: {
     BorderLabel,
-    VariableInput,
+    ParamImporter,
-    NumberInput,
-    ArrayEditor,
-    DictEditor,
-    ButtonGroup,
-    ControlInput,
-    CheckGroup,
-    CheckButton,
   },
   emits: ["update:modelValue"],
   props: {

src/components/composer/control/ControlCommand.vue

@@ -45,7 +45,7 @@
 
 <script>
 import { defineComponent } from "vue";
-import ParamInput from "components/composer/common/ParamInput.vue";
+import ParamInput from "components/composer/param/ParamInput.vue";
 
 export default defineComponent({
   name: "ControlCommand",

src/components/composer/param/ParamImporter.vue

@@ -0,0 +1,77 @@
+<template>
+  <component
+    :is="config.component"
+    v-model="localValue"
+    v-bind="componentProps"
+    @update:model-value="$emit('update:modelValue', $event)"
+  >
+    <template v-if="isQuasarInput" #prepend>
+      <q-icon v-if="config.icon" :name="config.icon" />
+    </template>
+  </component>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+// 导入OptionEditor之外的通用组件，因为他还要被OptionEditor使用，防止循环引用
+import VariableInput from "components/composer/common/VariableInput.vue";
+import NumberInput from "components/composer/common/NumberInput.vue";
+import ArrayEditor from "components/composer/common/ArrayEditor.vue";
+import DictEditor from "components/composer/common/DictEditor.vue";
+import ButtonGroup from "components/composer/common/ButtonGroup.vue";
+import ControlInput from "components/composer/common/ControlInput.vue";
+import CheckGroup from "components/composer/common/CheckGroup.vue";
+import CheckButton from "components/composer/common/CheckButton.vue";
+import CodeEditor from "components/composer/common/CodeEditor.vue";
+
+export default defineComponent({
+  name: "ParamInput",
+  components: {
+    VariableInput,
+    NumberInput,
+    ArrayEditor,
+    DictEditor,
+    ButtonGroup,
+    ControlInput,
+    CheckGroup,
+    CheckButton,
+    CodeEditor,
+  },
+  props: {
+    config: {
+      type: Array,
+      required: true,
+    },
+    modelValue: {
+      type: Object,
+      required: true,
+    },
+  },
+  emits: ["update:modelValue"],
+  computed: {
+    localValue: {
+      get() {
+        return this.modelValue;
+      },
+      set(value) {
+        this.$emit("update:modelValue", value);
+      },
+    },
+    isQuasarInput() {
+      return ["q-select", "q-input"].includes(this.config?.component);
+    },
+    isQuasarSelect() {
+      return ["q-select"].includes(this.config?.component);
+    },
+    componentProps() {
+      return {
+        ...this.config,
+        filled: true,
+        dense: true,
+        emitValue: this.isQuasarSelect,
+        mapOptions: this.isQuasarSelect,
+      };
+    },
+  },
+});
+</script>

src/components/composer/param/ParamInput.vue

@@ -6,35 +6,26 @@
       class="grid-item"
       :style="getColumnStyle(config.width)"
     >
-      <component
+      <OptionEditor
-        :is="config.component"
+        v-if="config.component === 'OptionEditor'"
+        v-bind="config"
         :model-value="values[index]"
         @update:model-value="$emit('update', index, $event)"
-        v-bind="config"
+      />
-        filled
+      <ParamImporter
-        dense
+        v-else
-        :emit-value="config.component === 'q-select'"
+        :config="config"
-        :map-options="config.component === 'q-select'"
+        :model-value="values[index]"
-      >
+        @update:model-value="$emit('update', index, $event)"
-        <template v-slot:prepend v-if="shouldShowQIcon(config)">
+      />
-          <q-icon :name="config.icon" />
-        </template>
-      </component>
     </div>
   </div>
 </template>
 
 <script>
 import { defineComponent } from "vue";
-import VariableInput from "./VariableInput.vue";
+import ParamImporter from "components/composer/param/ParamImporter.vue";
-import NumberInput from "./NumberInput.vue";
+import OptionEditor from "components/composer/common/OptionEditor.vue";
-import ArrayEditor from "./ArrayEditor.vue";
-import DictEditor from "./DictEditor.vue";
-import ButtonGroup from "./ButtonGroup.vue";
-import ControlInput from "./ControlInput.vue";
-import CheckGroup from "./CheckGroup.vue";
-import OptionEditor from "./OptionEditor.vue";
-import CheckButton from "./CheckButton.vue";
 
 /**
  * 参数输入组件
@@ -50,15 +41,8 @@ import CheckButton from "./CheckButton.vue";
 export default defineComponent({
   name: "ParamInput",
   components: {
-    VariableInput,
+    ParamImporter,
-    NumberInput,
-    ArrayEditor,
-    DictEditor,
-    ButtonGroup,
-    ControlInput,
-    CheckGroup,
     OptionEditor,
-    CheckButton,
   },
   props: {
     configs: {