From 9eee3d1b14fcabd4b0a1d264522649f5fd9c5a7e Mon Sep 17 00:00:00 2001
From: fofolee <fofolee@qq.com>
Date: Sat, 11 Jan 2025 09:06:48 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9EParamInporter=E7=BB=9F?=
 =?UTF-8?q?=E4=B8=80=E5=A4=84=E7=90=86=E9=80=9A=E7=94=A8=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E5=AF=BC=E5=85=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/composer/MultiParams.vue       |  2 +-
 .../composer/common/OptionEditor.vue          | 33 ++------
 .../composer/control/ControlCommand.vue       |  2 +-
 .../composer/param/ParamImporter.vue          | 77 +++++++++++++++++++
 .../composer/{common => param}/ParamInput.vue | 42 ++++------
 5 files changed, 97 insertions(+), 59 deletions(-)
 create mode 100644 src/components/composer/param/ParamImporter.vue
 rename src/components/composer/{common => param}/ParamInput.vue (69%)

diff --git a/src/components/composer/MultiParams.vue b/src/components/composer/MultiParams.vue
index 20281f0..e9df810 100644
--- a/src/components/composer/MultiParams.vue
+++ b/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";
 
diff --git a/src/components/composer/common/OptionEditor.vue b/src/components/composer/common/OptionEditor.vue
index 141f1a6..642408f 100644
--- a/src/components/composer/common/OptionEditor.vue
+++ b/src/components/composer/common/OptionEditor.vue
@@ -12,20 +12,11 @@
         class="grid-item"
         :style="getColumnStyle(config.width)"
       >
-        <component
-          :is="config.component"
+        <ParamImporter
+          :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,
-    NumberInput,
-    ArrayEditor,
-    DictEditor,
-    ButtonGroup,
-    ControlInput,
-    CheckGroup,
-    CheckButton,
+    ParamImporter,
   },
   emits: ["update:modelValue"],
   props: {
diff --git a/src/components/composer/control/ControlCommand.vue b/src/components/composer/control/ControlCommand.vue
index ab97d8b..e5f6820 100644
--- a/src/components/composer/control/ControlCommand.vue
+++ b/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",
diff --git a/src/components/composer/param/ParamImporter.vue b/src/components/composer/param/ParamImporter.vue
new file mode 100644
index 0000000..b9460a9
--- /dev/null
+++ b/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>
diff --git a/src/components/composer/common/ParamInput.vue b/src/components/composer/param/ParamInput.vue
similarity index 69%
rename from src/components/composer/common/ParamInput.vue
rename to src/components/composer/param/ParamInput.vue
index 2c51fca..daa2a04 100644
--- a/src/components/composer/common/ParamInput.vue
+++ b/src/components/composer/param/ParamInput.vue
@@ -6,35 +6,26 @@
       class="grid-item"
       :style="getColumnStyle(config.width)"
     >
-      <component
-        :is="config.component"
+      <OptionEditor
+        v-if="config.component === 'OptionEditor'"
+        v-bind="config"
         :model-value="values[index]"
         @update:model-value="$emit('update', index, $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>
+      />
+      <ParamImporter
+        v-else
+        :config="config"
+        :model-value="values[index]"
+        @update:model-value="$emit('update', index, $event)"
+      />
     </div>
   </div>
 </template>
 
 <script>
 import { defineComponent } from "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 OptionEditor from "./OptionEditor.vue";
-import CheckButton from "./CheckButton.vue";
+import ParamImporter from "components/composer/param/ParamImporter.vue";
+import OptionEditor from "components/composer/common/OptionEditor.vue";
 
 /**
  * 参数输入组件
@@ -50,15 +41,8 @@ import CheckButton from "./CheckButton.vue";
 export default defineComponent({
   name: "ParamInput",
   components: {
-    VariableInput,
-    NumberInput,
-    ArrayEditor,
-    DictEditor,
-    ButtonGroup,
-    ControlInput,
-    CheckGroup,
+    ParamImporter,
     OptionEditor,
-    CheckButton,
   },
   props: {
     configs: {