新增模拟鼠标操作

src/components/composer/ComposerCard.vue

@@ -51,14 +51,14 @@
               :is="command.component"
               v-model="argvLocal"
               :command="command"
-              class="col"
+              class="col q-mt-sm"
               v-bind="command.componentProps || {}"
             />
-            <MultiParamInput
+            <MultiParams
               v-else
               v-model="argvLocal"
               :command="command"
-              class="col"
+              :class="command.config?.length ? 'col q-mt-sm' : 'col'"
             />
           </div>
         </div>
@@ -71,7 +71,7 @@
 import { defineComponent, inject } from "vue";
 import { validateVariableName } from "js/common/variableValidator";
 import VariableInput from "./ui/VariableInput.vue";
-import MultiParamInput from "./ui/MultiParamInput.vue";
+import MultiParams from "./ui/MultiParams.vue";
 import CommandHead from "./card/CommandHead.vue";
 import * as CardComponents from "js/composer/cardComponents";
 
@@ -79,7 +79,7 @@ export default defineComponent({
   name: "ComposerCard",
   components: {
     VariableInput,
-    MultiParamInput,
+    MultiParams,
     CommandHead,
     ...CardComponents,
   },
@@ -362,7 +362,6 @@ export default defineComponent({
   display: grid;
   grid-template-rows: 1fr;
   transition: grid-template-rows 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  margin-top: 8px;
 }
 
 .command-content {

src/components/composer/flow/ComposerButtons.vue

@@ -5,6 +5,8 @@
         :icon="isAllCollapsed ? 'unfold_more' : 'unfold_less'"
         dense
         flat
+        rounded
+        size="9px"
         @click="$emit('action', isAllCollapsed ? 'expandAll' : 'collapseAll')"
       >
         <q-tooltip>{{ isAllCollapsed ? "展开所有" : "折叠所有" }}</q-tooltip>

src/components/composer/ui/FunctionSelector.vue

@@ -1,101 +0,0 @@
-<template>
-  <div class="row q-col-gutter-sm">
-    <div class="col">
-      <VariableInput
-        :model-value="inputValue"
-        :label="inputLabel"
-        :command="command"
-        @update:model-value="handleInputChange"
-      />
-    </div>
-    <div class="col-4">
-      <q-select
-        v-model="selectedFunction"
-        :options="options"
-        :label="selectLabel"
-        dense
-        filled
-        emit-value
-        map-options
-        @update:model-value="handleFunctionChange"
-      >
-        <template v-slot:prepend>
-          <q-icon :name="command.icon || 'functions'" />
-        </template>
-      </q-select>
-    </div>
-  </div>
-</template>
-
-<script>
-import { defineComponent } from "vue";
-import VariableInput from "components/composer/ui/VariableInput.vue";
-
-export default defineComponent({
-  name: "FunctionSelector",
-  components: {
-    VariableInput,
-  },
-  props: {
-    modelValue: {
-      type: String,
-      default: "",
-    },
-    command: {
-      type: Object,
-      required: true,
-    },
-    options: {
-      type: Array,
-      required: true,
-    },
-    inputLabel: {
-      type: String,
-      default: "输入值",
-    },
-    selectLabel: {
-      type: String,
-      default: "选择函数",
-    },
-  },
-  emits: ["update:model-value"],
-  data() {
-    return {
-      selectedFunction: this.options[0]?.value || "",
-      inputValue: "",
-    };
-  },
-  watch: {
-    modelValue: {
-      immediate: true,
-      handler(val) {
-        if (!val) {
-          this.selectedFunction = this.options[0]?.value || "";
-          this.inputValue = "";
-          return;
-        }
-        // 从代码字符串解析出函数名和参数
-        const match = val.match(/(.+?)\((.*)\)/);
-        if (match) {
-          this.selectedFunction = match[1];
-          this.inputValue = match[2];
-        }
-      },
-    },
-  },
-  methods: {
-    generateCode() {
-      if (!this.selectedFunction || !this.inputValue) return "";
-      return `${this.selectedFunction}(${this.inputValue})`;
-    },
-    handleInputChange(value) {
-      this.inputValue = value;
-      this.$emit("update:model-value", this.generateCode());
-    },
-    handleFunctionChange(value) {
-      this.selectedFunction = value;
-      this.$emit("update:model-value", this.generateCode());
-    },
-  },
-});
-</script>

src/components/composer/ui/MultiParamInput.vue

@@ -1,77 +0,0 @@
-<template>
-  <div class="multi-param-input row q-col-gutter-sm">
-    <div
-      v-for="item in config"
-      :key="item.key"
-      :class="['param-item', `col-${item.width || 12}`]"
-    >
-      <VariableInput
-        v-model="item.value"
-        :label="item.label"
-        :command="item"
-        @update:model-value="handleArgvChange(item.key, $event)"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-import { defineComponent } from "vue";
-import VariableInput from "./VariableInput.vue";
-
-export default defineComponent({
-  name: "MultiParamInput",
-  components: {
-    VariableInput,
-  },
-  props: {
-    modelValue: {
-      type: String,
-      default: "",
-    },
-    command: {
-      type: Object,
-      required: true,
-    },
-  },
-  emits: ["update:modelValue"],
-  computed: {
-    config() {
-      return this.command.config || [];
-    },
-  },
-  methods: {
-    handleArgvChange(key, value) {
-      // 收集所有参数的当前值
-      const args = this.config.reduce((acc, item) => {
-        acc[item.key] = item.key === key ? value : item.value ?? "";
-        return acc;
-      }, {});
-
-      // 按照配置顺序拼接参数值
-      const argv = this.config
-        .map((item) => args[item.key])
-        .filter((val) => val !== undefined && val !== "")
-        .join(",");
-
-      this.$emit("update:modelValue", `${this.command.value}(${argv})`);
-    },
-  },
-});
-</script>
-
-<style scoped>
-.multi-param-input {
-  width: 100%;
-}
-
-.param-item {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.param-item :deep(.q-field) {
-  margin-bottom: 0;
-}
-</style>

src/components/composer/ui/MultiParams.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="flex-container">
+    <div
+      v-if="hasFunctionSelector"
+      class="flex-item"
+      :style="{ flex: command.functionSelector.width || 3 }"
+    >
+      <q-select
+        v-model="selectedFunction"
+        :options="command.functionSelector.options"
+        :label="command.functionSelector.selectLabel"
+        dense
+        filled
+        emit-value
+        map-options
+        @update:model-value="handleFunctionChange"
+      >
+        <template v-slot:prepend>
+          <q-icon :name="command.icon || 'functions'" />
+        </template>
+      </q-select>
+    </div>
+    <div
+      v-for="item in config"
+      :key="item.key"
+      class="flex-item"
+      :style="{ flex: item.width || 12 }"
+    >
+      <VariableInput
+        v-model="item.value"
+        :label="item.label"
+        :command="item"
+        @update:model-value="handleArgvChange(item.key, $event)"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+import VariableInput from "./VariableInput.vue";
+
+export default defineComponent({
+  name: "MultiParams",
+  components: {
+    VariableInput,
+  },
+  props: {
+    modelValue: {
+      type: String,
+      default: "",
+    },
+    command: {
+      type: Object,
+      required: true,
+    },
+  },
+  emits: ["update:modelValue"],
+  data() {
+    return {
+      selectedFunction: this.command.functionSelector?.options[0]?.value || "",
+      localConfig: (this.command.config || []).map((item) => ({
+        ...item,
+        value: item.defaultValue ?? "",
+      })),
+    };
+  },
+  computed: {
+    config() {
+      return this.localConfig;
+    },
+    hasFunctionSelector() {
+      return !!this.command.functionSelector;
+    },
+  },
+  methods: {
+    generateCode() {
+      const functionName = this.hasFunctionSelector
+        ? this.selectedFunction
+        : this.command.value;
+      const args = this.config
+        .map((item) => item.value)
+        .filter((val) => val !== undefined && val !== "")
+        .join(",");
+      return `${functionName}(${args})`;
+    },
+    handleArgvChange(key, value) {
+      const item = this.localConfig.find((item) => item.key === key);
+      if (item) {
+        item.value = value;
+      }
+
+      this.$emit("update:modelValue", this.generateCode());
+    },
+    handleFunctionChange(value) {
+      this.selectedFunction = value;
+      this.$emit("update:modelValue", this.generateCode());
+    },
+  },
+  mounted() {
+    if (this.command.allowEmptyArgv) {
+      this.$emit("update:modelValue", this.generateCode());
+    } else {
+      const hasDefaultValues = this.localConfig.some(
+        (item) => item.defaultValue !== undefined && item.defaultValue !== ""
+      );
+      if (hasDefaultValues) {
+        this.$emit("update:modelValue", this.generateCode());
+      }
+    }
+  },
+});
+</script>
+
+<style scoped>
+.flex-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  width: 100%;
+}
+
+.flex-item {
+  min-width: 100px; /* 设置最小宽度以确保内容可读性 */
+}
+
+@media (max-width: 600px) {
+  .flex-item {
+    flex: 1 1 100% !important; /* 在小屏幕上强制换行 */
+  }
+}
+</style>