From 9e213f7b65dd13ac2059087dd34d9ae2248cf7bf Mon Sep 17 00:00:00 2001
From: fofolee <fofolee@qq.com>
Date: Thu, 2 Jan 2025 18:25:35 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=A8=A1=E6=8B=9F=E9=BC=A0?=
 =?UTF-8?q?=E6=A0=87=E6=93=8D=E4=BD=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/composer/ComposerCard.vue      |  11 +-
 .../composer/flow/ComposerButtons.vue         |   2 +
 .../composer/ui/FunctionSelector.vue          | 101 --------------
 .../composer/ui/MultiParamInput.vue           |  77 ----------
 src/components/composer/ui/MultiParams.vue    | 132 ++++++++++++++++++
 src/js/composer/cardComponents.js             |   3 -
 src/js/composer/commands/index.js             |   4 +-
 src/js/composer/commands/keyCommands.js       |  13 --
 src/js/composer/commands/simulateCommands.js  |  81 +++++++++++
 src/js/composer/commands/systemCommands.js    |   2 +-
 .../commands/textProcessingCommands.js        |  26 +++-
 11 files changed, 243 insertions(+), 209 deletions(-)
 delete mode 100644 src/components/composer/ui/FunctionSelector.vue
 delete mode 100644 src/components/composer/ui/MultiParamInput.vue
 create mode 100644 src/components/composer/ui/MultiParams.vue
 delete mode 100644 src/js/composer/commands/keyCommands.js
 create mode 100644 src/js/composer/commands/simulateCommands.js

diff --git a/src/components/composer/ComposerCard.vue b/src/components/composer/ComposerCard.vue
index 6321231..3eb3c8b 100644
--- a/src/components/composer/ComposerCard.vue
+++ b/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 {
diff --git a/src/components/composer/flow/ComposerButtons.vue b/src/components/composer/flow/ComposerButtons.vue
index 3a21672..f1907e9 100644
--- a/src/components/composer/flow/ComposerButtons.vue
+++ b/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>
diff --git a/src/components/composer/ui/FunctionSelector.vue b/src/components/composer/ui/FunctionSelector.vue
deleted file mode 100644
index 656b7fb..0000000
--- a/src/components/composer/ui/FunctionSelector.vue
+++ /dev/null
@@ -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>
diff --git a/src/components/composer/ui/MultiParamInput.vue b/src/components/composer/ui/MultiParamInput.vue
deleted file mode 100644
index 5436eb3..0000000
--- a/src/components/composer/ui/MultiParamInput.vue
+++ /dev/null
@@ -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>
diff --git a/src/components/composer/ui/MultiParams.vue b/src/components/composer/ui/MultiParams.vue
new file mode 100644
index 0000000..01ec09c
--- /dev/null
+++ b/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>
diff --git a/src/js/composer/cardComponents.js b/src/js/composer/cardComponents.js
index 6baf159..da20447 100644
--- a/src/js/composer/cardComponents.js
+++ b/src/js/composer/cardComponents.js
@@ -4,9 +4,6 @@ import { defineAsyncComponent } from "vue";
 export const KeyEditor = defineAsyncComponent(() =>
   import("components/composer/ui/KeyEditor.vue")
 );
-export const FunctionSelector = defineAsyncComponent(() =>
-  import("components/composer/ui/FunctionSelector.vue")
-);
 
 // Control Flow Components
 export const ConditionalJudgment = defineAsyncComponent(() =>
diff --git a/src/js/composer/commands/index.js b/src/js/composer/commands/index.js
index fdb1e10..9355b21 100644
--- a/src/js/composer/commands/index.js
+++ b/src/js/composer/commands/index.js
@@ -4,7 +4,7 @@ import { systemCommands } from "./systemCommands";
 import { notifyCommands } from "./notifyCommands";
 import { textProcessingCommands } from "./textProcessingCommands";
 import { otherCommands } from "./otherCommands";
-import { keyCommands } from "./keyCommands";
+import { simulateCommands } from "./simulateCommands";
 import { controlCommands } from "./controlCommands";
 
 export const commandCategories = [
@@ -15,5 +15,5 @@ export const commandCategories = [
   textProcessingCommands,
   controlCommands,
   otherCommands,
-  keyCommands,
+  simulateCommands,
 ];
diff --git a/src/js/composer/commands/keyCommands.js b/src/js/composer/commands/keyCommands.js
deleted file mode 100644
index 40e4275..0000000
--- a/src/js/composer/commands/keyCommands.js
+++ /dev/null
@@ -1,13 +0,0 @@
-export const keyCommands = {
-  label: "按键操作",
-  icon: "keyboard",
-  defaultOpened: false,
-  commands: [
-    {
-      value: "keyTap",
-      label: "模拟按键",
-      config: [],
-      component: "KeyEditor",
-    },
-  ],
-};
diff --git a/src/js/composer/commands/simulateCommands.js b/src/js/composer/commands/simulateCommands.js
new file mode 100644
index 0000000..e271b9a
--- /dev/null
+++ b/src/js/composer/commands/simulateCommands.js
@@ -0,0 +1,81 @@
+export const simulateCommands = {
+  label: "模拟操作",
+  icon: "keyboard",
+  defaultOpened: false,
+  commands: [
+    {
+      value: "keyTap",
+      label: "模拟按键",
+      config: [],
+      component: "KeyEditor",
+    },
+    {
+      value: "utools",
+      label: "鼠标点击",
+      allowEmptyArgv: true,
+      config: [
+        {
+          label: "X坐标（留空则原地点击）",
+          icon: "drag_handle",
+          type: "input",
+          inputType: "number",
+          width: 8,
+        },
+        {
+          label: "Y坐标（留空则原地点击）",
+          icon: "drag_handle",
+          type: "input",
+          inputType: "number",
+          width: 8,
+        },
+      ],
+      functionSelector: {
+        selectLabel: "鼠标动作",
+        options: [
+          {
+            label: "单击",
+            value: "utools.simulateMouseClick",
+          },
+          {
+            label: "右击",
+            value: "utools.simulateMouseRightClick",
+          },
+          {
+            label: "双击",
+            value: "utools.simulateMouseDoubleClick",
+          },
+        ],
+        width: 2,
+        allowEmptyArgv: true,
+      },
+    },
+    {
+      value: "utools.simulateMouseMove",
+      label: "鼠标移动",
+      config: [
+        {
+          label: "X坐标",
+          icon: "drag_handle",
+          defaultValue: 0,
+          type: "input",
+          inputType: "number",
+          width: 8,
+        },
+        {
+          label: "Y坐标",
+          icon: "drag_handle",
+          defaultValue: 0,
+          type: "input",
+          inputType: "number",
+          width: 8,
+        },
+      ],
+    },
+    {
+      value: "utools.getCursorScreenPoint",
+      label: "获取鼠标坐标",
+      config: [],
+      allowEmptyArgv: true,
+    },
+  ],
+};
diff --git a/src/js/composer/commands/systemCommands.js b/src/js/composer/commands/systemCommands.js
index ca63678..b5ba46b 100644
--- a/src/js/composer/commands/systemCommands.js
+++ b/src/js/composer/commands/systemCommands.js
@@ -33,7 +33,7 @@ export const systemCommands = {
       value: "electron.clipboard.readText",
       label: "获取剪贴板内容",
       config: [],
-      icon: "content_copy",
+      allowEmptyArgv: true,
     },
   ],
 };
diff --git a/src/js/composer/commands/textProcessingCommands.js b/src/js/composer/commands/textProcessingCommands.js
index aaa62ac..6f815d3 100644
--- a/src/js/composer/commands/textProcessingCommands.js
+++ b/src/js/composer/commands/textProcessingCommands.js
@@ -8,9 +8,15 @@ export const textProcessingCommands = {
       label: "编解码",
       desc: "文本编解码",
       icon: "code",
-      component: "FunctionSelector",
-      componentProps: {
-        inputLabel: "要编解码的文本",
+      config: [
+        {
+          label: "要编解码的文本",
+          icon: "text_fields",
+          type: "input",
+          width: 8,
+        },
+      ],
+      functionSelector: {
         selectLabel: "编解码方式",
         options: [
           {
@@ -40,6 +46,7 @@ export const textProcessingCommands = {
             value: "quickcomposer.textProcessing.htmlDecode",
           },
         ],
+        width: 3,
       },
     },
     {
@@ -57,9 +64,15 @@ export const textProcessingCommands = {
       label: "哈希计算",
       desc: "计算文本的哈希值",
       icon: "enhanced_encryption",
-      component: "FunctionSelector",
-      componentProps: {
-        inputLabel: "要计算哈希的文本",
+      config: [
+        {
+          label: "要计算哈希的文本",
+          icon: "text_fields",
+          type: "input",
+          width: 8,
+        },
+      ],
+      functionSelector: {
         selectLabel: "哈希算法",
         options: [
           { label: "MD5", value: "quickcomposer.textProcessing.md5Hash" },
@@ -69,6 +82,7 @@ export const textProcessingCommands = {
           { label: "SM3", value: "quickcomposer.textProcessing.sm3Hash" },
         ],
       },
+      width: 3,
     },
     {
       value: "quickcomposer.textProcessing.reverseString",