From 1c35b6fdd8ac4b90bd4af131d820f57f30664e24 Mon Sep 17 00:00:00 2001
From: fofolee <fofolee@qq.com>
Date: Tue, 7 Jan 2025 12:07:07 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9Eparaminput=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=EF=BC=8C=E5=A4=84=E7=90=86=E5=A4=9A=E7=B1=BB=E5=9E=8B=E5=8F=82?=
 =?UTF-8?q?=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/composer/MultiParams.vue       | 149 +-----------------
 src/components/composer/common/ParamInput.vue | 144 +++++++++++++++++
 src/js/composer/commands/simulateCommands.js  |   2 +
 3 files changed, 153 insertions(+), 142 deletions(-)
 create mode 100644 src/components/composer/common/ParamInput.vue

diff --git a/src/components/composer/MultiParams.vue b/src/components/composer/MultiParams.vue
index bb42589..b8e16b4 100644
--- a/src/components/composer/MultiParams.vue
+++ b/src/components/composer/MultiParams.vue
@@ -1,105 +1,26 @@
 <template>
-  <div class="flex-container">
+  <div class="multi-params">
     <OperationCard
       v-if="hasFunctionSelector"
       :model-value="funcName"
       @update:model-value="funcName = $event"
       :options="localCommand.functionSelector?.options"
-      class="width-12"
     />
-    <div class="flex-container">
-      <div
-        v-for="(item, index) in localConfig"
-        :key="index"
-        class="grid-item"
-        :style="getColumnStyle(item.width)"
-      >
-        <VariableInput
-          v-if="item.type === 'varInput'"
-          :model-value="argvs[index]"
-          @update:model-value="updateArgv(index, $event)"
-          :label="item.label"
-          :icon="item.icon"
-          :options="item.options"
-        />
-        <NumberInput
-          v-else-if="item.type === 'numInput'"
-          :model-value="argvs[index]"
-          @update:model-value="updateArgv(index, $event)"
-          :label="item.label"
-          :icon="item.icon"
-        />
-        <ArrayEditor
-          v-else-if="item.type === 'arrayEditor'"
-          :model-value="argvs[index]"
-          @update:model-value="updateArgv(index, $event)"
-          :options="item.options"
-        />
-        <DictEditor
-          v-else-if="item.type === 'dictEditor'"
-          :model-value="argvs[index]"
-          @update:model-value="updateArgv(index, $event)"
-          :options="item.options"
-        />
-        <q-toggle
-          v-else-if="item.type === 'switch'"
-          :model-value="argvs[index]"
-          @update:model-value="updateArgv(index, $event)"
-          :label="item.label"
-          :icon="item.icon"
-        />
-        <q-select
-          v-else-if="item.type === 'select'"
-          filled
-          :model-value="argvs[index]"
-          @update:model-value="updateArgv(index, $event)"
-          :options="item.options"
-        >
-          <template v-slot:prepend>
-            <q-icon :name="item.icon || 'code'" />
-          </template>
-        </q-select>
-        <q-input
-          v-else-if="item.type === 'input'"
-          filled
-          :model-value="argvs[index]"
-          @update:model-value="updateArgv(index, $event)"
-          :label="item.label"
-          :icon="item.icon"
-        >
-          <template v-slot:prepend>
-            <q-icon :name="item.icon || 'code'" />
-          </template>
-        </q-input>
-        <q-checkbox
-          v-else-if="item.type === 'checkbox'"
-          :model-value="argvs[index]"
-          @update:model-value="updateArgv(index, $event)"
-          :label="item.label"
-          :icon="item.icon"
-        />
-      </div>
-    </div>
+    <ParamInput :configs="localConfig" :values="argvs" @update="updateArgv" />
   </div>
 </template>
 
 <script>
 import { defineComponent } from "vue";
-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 OperationCard from "components/composer/common/OperationCard.vue";
+import ParamInput from "components/composer/common/ParamInput.vue";
 import { stringifyArgv, parseFunction } from "js/composer/formatString";
 
 export default defineComponent({
   name: "MultiParams",
   components: {
-    VariableInput,
-    NumberInput,
-    ArrayEditor,
-    DictEditor,
     OperationCard,
+    ParamInput,
   },
   props: {
     modelValue: {
@@ -216,66 +137,10 @@ export default defineComponent({
 </script>
 
 <style scoped>
-.flex-container {
+.multi-params {
   display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-  width: 100%;
-  --grid-gap: 8px;
-}
-
-.grid-item {
-  min-width: 50px;
-  margin-bottom: 0;
-}
-
-@media (max-width: 600px) {
-  .grid-item {
-    width: 100% !important;
-  }
-}
-
-.operation-cards {
-  display: flex;
-  align-items: center;
-  overflow-x: auto;
-  overflow-y: hidden;
-  white-space: nowrap;
-  padding: 1px;
+  flex-direction: column;
   gap: 8px;
-  border-radius: 8px;
-}
-
-.operation-cards::-webkit-scrollbar {
-  display: none;
-}
-
-.operation-card {
-  cursor: pointer;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  border: 1px solid transparent;
-  border-radius: 6px;
-  min-width: 72px;
-  padding: 2px 0;
-  background: rgba(0, 0, 0, 0.05);
-}
-
-.body--dark .operation-card {
-  background: rgba(0, 0, 0, 0.05);
-}
-
-.operation-card:hover {
-  background: var(--q-primary-opacity-5);
-  transform: translateY(-1px);
-  border: 1px solid var(--q-primary-opacity-10);
-}
-
-.operation-card.active {
-  border-color: var(--q-primary);
-  background: var(--q-primary-opacity-5);
-}
-
-.body--dark .operation-card.active {
-  border-color: var(--q-primary-opacity-50);
+  width: 100%;
 }
 </style>
diff --git a/src/components/composer/common/ParamInput.vue b/src/components/composer/common/ParamInput.vue
new file mode 100644
index 0000000..29fbf95
--- /dev/null
+++ b/src/components/composer/common/ParamInput.vue
@@ -0,0 +1,144 @@
+<template>
+  <div class="param-grid">
+    <div
+      v-for="(config, index) in configs"
+      :key="index"
+      class="grid-item"
+      :style="getColumnStyle(config.width)"
+    >
+      <VariableInput
+        v-if="config.type === 'varInput'"
+        :model-value="values[index]"
+        @update:model-value="$emit('update', index, $event)"
+        :label="config.label"
+        :icon="config.icon"
+        :options="config.options"
+      />
+      <NumberInput
+        v-else-if="config.type === 'numInput'"
+        :model-value="values[index]"
+        @update:model-value="$emit('update', index, $event)"
+        :label="config.label"
+        :icon="config.icon"
+      />
+      <ArrayEditor
+        v-else-if="config.type === 'arrayEditor'"
+        :model-value="values[index]"
+        @update:model-value="$emit('update', index, $event)"
+        :options="config.options"
+      />
+      <DictEditor
+        v-else-if="config.type === 'dictEditor'"
+        :model-value="values[index]"
+        @update:model-value="$emit('update', index, $event)"
+        :options="config.options"
+      />
+      <q-toggle
+        v-else-if="config.type === 'switch'"
+        :model-value="values[index]"
+        @update:model-value="$emit('update', index, $event)"
+        :label="config.label"
+        :icon="config.icon"
+      />
+      <q-select
+        v-else-if="config.type === 'select'"
+        filled
+        :model-value="values[index]"
+        @update:model-value="$emit('update', index, $event)"
+        :options="config.options"
+      >
+        <template v-slot:prepend>
+          <q-icon :name="config.icon || 'code'" />
+        </template>
+      </q-select>
+      <q-input
+        v-else-if="config.type === 'input'"
+        filled
+        :model-value="values[index]"
+        @update:model-value="$emit('update', index, $event)"
+        :label="config.label"
+        :icon="config.icon"
+      >
+        <template v-slot:prepend>
+          <q-icon :name="config.icon || 'code'" />
+        </template>
+      </q-input>
+      <q-checkbox
+        v-else-if="config.type === 'checkbox'"
+        :model-value="values[index]"
+        @update:model-value="$emit('update', index, $event)"
+        :label="config.label"
+        :icon="config.icon"
+      />
+    </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";
+
+/**
+ * 参数输入组件
+ * @description 统一处理各种类型的参数输入
+ *
+ * @property {Object} config - 参数配置对象
+ * @property {String} config.type - 输入类型
+ * @property {String} [config.label] - 标签文本
+ * @property {String} [config.icon] - 图标
+ * @property {Object} [config.options] - 配置选项
+ * @property {any} value - 输入值
+ */
+export default defineComponent({
+  name: "ParamInput",
+  components: {
+    VariableInput,
+    NumberInput,
+    ArrayEditor,
+    DictEditor,
+  },
+  props: {
+    configs: {
+      type: Array,
+      required: true,
+    },
+    values: {
+      type: Array,
+      required: true,
+    },
+  },
+  emits: ["update"],
+  methods: {
+    getColumnStyle(width = 12) {
+      const columnWidth = (width / 12) * 100;
+      return {
+        width: `calc(${columnWidth}% - var(--grid-gap))`,
+      };
+    },
+  },
+});
+</script>
+
+<style scoped>
+.param-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--grid-gap);
+  width: 100%;
+  --grid-gap: 8px;
+}
+
+.grid-item {
+  min-width: 50px;
+  margin-bottom: 0;
+}
+
+@media (max-width: 600px) {
+  .grid-item {
+    width: 100% !important;
+  }
+}
+</style>
diff --git a/src/js/composer/commands/simulateCommands.js b/src/js/composer/commands/simulateCommands.js
index f657044..32b3ec9 100644
--- a/src/js/composer/commands/simulateCommands.js
+++ b/src/js/composer/commands/simulateCommands.js
@@ -72,6 +72,8 @@ export const simulateCommands = {
     {
       value: "utools.getCursorScreenPoint",
       label: "获取鼠标坐标",
+      outputVariable: "{x:curX,y:curY}",
+      saveOutput: true,
       config: [],
       allowEmptyArgv: true,
     },