编排新增多输入框组件

src/components/composer/ComposerCard.vue

@@ -99,26 +99,12 @@
               v-bind="command.componentProps || {}"
             />
             <!-- 通用组件参数 -->
-            <template v-else>
+            <MultiParamInput
-              <div
+              v-else
-                v-for="(item, index) in command.config"
+              v-model="argvLocal"
-                :key="item.key"
+              :command="command"
-                class="param-item col-12"
+              class="col"
-                :class="{ 'q-mt-sm': index > 0 }"
+            />
-              >
-                <VariableInput
-                  v-model="item.value"
-                  :label="item.label"
-                  :command="command"
-                  :class="[
-                    `col-${item.width || 12}`,
-                    { 'q-mt-sm': item.width && item.width < 12 },
-                  ]"
-                  v-if="item.type === 'input'"
-                  @update:model-value="handleArgvChange(item.key, $event)"
-                />
-              </div>
-            </template>
           </div>
         </div>
       </q-card-section>
@@ -131,6 +117,7 @@ import { defineComponent, inject } from "vue";
 import KeyEditor from "components/composer/ui/KeyEditor.vue";
 import UBrowserEditor from "components/composer/ubrowser/UBrowserEditor.vue";
 import VariableInput from "components/composer/ui/VariableInput.vue";
+import MultiParamInput from "components/composer/ui/MultiParamInput.vue";
 import AxiosConfigEditor from "components/composer/http/AxiosConfigEditor.vue";
 import SymmetricCryptoEditor from "components/composer/crypto/SymmetricCryptoEditor.vue";
 import AsymmetricCryptoEditor from "components/composer/crypto/AsymmetricCryptoEditor.vue";
@@ -143,6 +130,7 @@ export default defineComponent({
     KeyEditor,
     UBrowserEditor,
     VariableInput,
+    MultiParamInput,
     AxiosConfigEditor,
     SymmetricCryptoEditor,
     AsymmetricCryptoEditor,
@@ -317,6 +305,7 @@ export default defineComponent({
 </script>
 
 <style scoped>
+/* 卡片基础样式 */
 .composer-card {
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   transform-origin: center;
@@ -324,33 +313,6 @@ export default defineComponent({
   transform: translateY(0) scale(1);
 }
 
-/* 进入动画 */
-.composer-card-enter-active {
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.composer-card-enter-from {
-  opacity: 0;
-  transform: translateY(20px) scale(0.95);
-}
-
-/* 移除动画 */
-.composer-card-leave-active {
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  position: absolute;
-}
-
-.composer-card-leave-to {
-  opacity: 0;
-  transform: translateY(-20px) scale(0.95);
-}
-
-/* 拖拽动画 */
-/* .composer-card:active { */
-/* transform: scale(1.02); */
-/* transition: transform 0.2s; */
-/* } */
-
 .command-item {
   transition: all 0.3s ease;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
@@ -359,14 +321,9 @@ export default defineComponent({
 
 .command-item:hover {
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  /* transform: translateY(-1px); */
 }
 
-.composer-card :deep(.q-field__label) {
+/* 拖拽和放置样式 */
-  font-size: 13px;
-}
-
-/* 可放置状态动画 */
 .can-drop {
   transform: scale(1.02);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
@@ -374,21 +331,6 @@ export default defineComponent({
 
 .can-drop .command-item {
   border: 2px dashed var(--q-primary);
-  background: rgba(var(--q-primary-rgb), 0.05);
-}
-
-/* 暗色模式适配 */
-.body--dark .command-item {
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.body--dark .command-item:hover {
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
-}
-
-.body--dark .can-drop {
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 }
 
 .drag-handle {
@@ -401,81 +343,16 @@ export default defineComponent({
   color: var(--q-primary);
 }
 
-/* 添加新的样式 */
+/* 输出部分样式 */
 .output-section {
   max-width: 120px;
   margin-right: 4px;
 }
 
 .output-section :deep(.q-field) {
-  background: rgba(var(--q-primary-rgb), 0.03);
   border-radius: 4px;
 }
 
-/* 输出按钮样式优化 */
-.output-btn {
-  font-size: 12px;
-  border-radius: 4px;
-  min-height: 28px;
-  padding: 0 8px;
-  border: 1px solid rgba(var(--q-primary-rgb), 0.1);
-  transition: all 0.3s ease;
-}
-
-.output-btn:hover {
-  background: rgba(var(--q-primary-rgb), 0.05);
-}
-
-.output-btn .q-icon {
-  font-size: 14px;
-  margin-right: 4px;
-}
-
-.output-btn.q-btn--active {
-  background: rgba(var(--q-primary-rgb), 0.1);
-  color: var(--q-primary);
-}
-
-/* 按钮样式 */
-.run-btn,
-.remove-btn {
-  opacity: 0.5;
-  transition: all 0.3s ease;
-  font-size: 18px;
-}
-
-.run-btn:hover,
-.remove-btn:hover {
-  opacity: 1;
-  transform: scale(1.05);
-}
-
-.run-btn:hover {
-  color: var(--q-positive);
-}
-
-.remove-btn:hover {
-  color: var(--q-negative);
-}
-
-/* 暗色模式适配 */
-.body--dark .output-section :deep(.q-field) {
-  background: rgba(255, 255, 255, 0.03);
-}
-
-.body--dark .output-section :deep(.q-field--focused) {
-  background: #1d1d1d;
-}
-
-.body--dark .output-btn {
-  border-color: rgba(255, 255, 255, 0.1);
-}
-
-.body--dark .output-btn:hover {
-  background: rgba(255, 255, 255, 0.05);
-}
-
-/* 输入框内部样式美化 */
 .output-section :deep(.q-field__control) {
   height: 28px;
   min-height: 28px;
@@ -495,31 +372,86 @@ export default defineComponent({
   text-align: center;
 }
 
-/* Tooltip 样式优化 */
+/* 按钮样式 */
-:deep(.q-tooltip) {
+.output-btn,
-  max-width: 300px;
+.run-btn,
-  padding: 8px 12px;
+.remove-btn {
+  font-size: 12px;
+  border-radius: 4px;
+  min-height: 28px;
+  padding: 0 8px;
+  opacity: 0.6;
+  transition: all 0.3s ease;
 }
 
-/* 优化图标样式 */
+.output-btn:hover,
-.output-section :deep(.q-icon) {
+.run-btn:hover,
-  opacity: 0.8;
+.remove-btn:hover {
-  transition: opacity 0.3s ease;
-}
-
-.output-section :deep(.q-field--focused .q-icon) {
   opacity: 1;
+  transform: scale(1.05);
 }
 
-/* 参数项样式 */
+.run-btn:hover {
-.param-item {
+  color: var(--q-positive);
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
 }
 
-/* 当参数项换行时的间距 */
+.remove-btn:hover {
-.param-item :deep(.q-field) {
+  color: var(--q-negative);
-  margin-bottom: 0;
+}
+
+.output-btn.q-btn--active {
+  color: var(--q-primary);
+}
+
+/* 动画效果 */
+.composer-card-enter-active {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.composer-card-enter-from {
+  opacity: 0;
+  transform: translateY(20px) scale(0.95);
+}
+
+.composer-card-leave-active {
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  position: absolute;
+}
+
+.composer-card-leave-to {
+  opacity: 0;
+  transform: translateY(-20px) scale(0.95);
+}
+
+/* 暗色模式适配 */
+.body--dark {
+  .command-item {
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .command-item:hover {
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+  }
+
+  .can-drop {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  }
+
+  .output-section :deep(.q-field) {
+    background: rgba(255, 255, 255, 0.03);
+  }
+
+  .output-section :deep(.q-field--focused) {
+    background: #1d1d1d;
+  }
+
+  .output-btn {
+    border-color: rgba(255, 255, 255, 0.1);
+  }
+
+  .output-btn:hover {
+    background: rgba(255, 255, 255, 0.05);
+  }
 }
 </style>

src/components/composer/ui/MultiParamInput.vue

@@ -0,0 +1,77 @@
+<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(Boolean)
+        .join(",");
+
+      this.$emit("update:modelValue", 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/js/composer/commands/textProcessingCommands.js

@@ -3,24 +3,6 @@ export const textProcessingCommands = {
   icon: "code",
   defaultOpened: false,
   commands: [
-    {
-      value: "quickcomposer.textProcessing",
-      label: "哈希计算",
-      desc: "计算文本的哈希值",
-      icon: "enhanced_encryption",
-      component: "FunctionSelector",
-      componentProps: {
-        inputLabel: "要计算哈希的文本",
-        selectLabel: "哈希算法",
-        options: [
-          { label: "MD5", value: "quickcomposer.textProcessing.md5Hash" },
-          { label: "SHA1", value: "quickcomposer.textProcessing.sha1Hash" },
-          { label: "SHA256", value: "quickcomposer.textProcessing.sha256Hash" },
-          { label: "SHA512", value: "quickcomposer.textProcessing.sha512Hash" },
-          { label: "SM3", value: "quickcomposer.textProcessing.sm3Hash" },
-        ],
-      },
-    },
     {
       value: "quickcomposer.textProcessing",
       label: "编解码",
@@ -60,6 +42,34 @@ export const textProcessingCommands = {
         ],
       },
     },
+    {
+      value: "quickcomposer.textProcessing.symmetricCrypto",
+      label: "对称加解密",
+      component: "SymmetricCryptoEditor",
+    },
+    {
+      value: "quickcomposer.textProcessing.asymmetricCrypto",
+      label: "非对称加解密",
+      component: "AsymmetricCryptoEditor",
+    },
+    {
+      value: "quickcomposer.textProcessing",
+      label: "哈希计算",
+      desc: "计算文本的哈希值",
+      icon: "enhanced_encryption",
+      component: "FunctionSelector",
+      componentProps: {
+        inputLabel: "要计算哈希的文本",
+        selectLabel: "哈希算法",
+        options: [
+          { label: "MD5", value: "quickcomposer.textProcessing.md5Hash" },
+          { label: "SHA1", value: "quickcomposer.textProcessing.sha1Hash" },
+          { label: "SHA256", value: "quickcomposer.textProcessing.sha256Hash" },
+          { label: "SHA512", value: "quickcomposer.textProcessing.sha512Hash" },
+          { label: "SM3", value: "quickcomposer.textProcessing.sm3Hash" },
+        ],
+      },
+    },
     {
       value: "quickcomposer.textProcessing.reverseString",
       label: "字符串反转",
@@ -83,6 +93,7 @@ export const textProcessingCommands = {
           type: "input",
           defaultValue: "",
           icon: "text_fields",
+          width: 4,
         },
         {
           key: "oldStr",
@@ -90,6 +101,7 @@ export const textProcessingCommands = {
           type: "input",
           defaultValue: "",
           icon: "find_replace",
+          width: 4,
         },
         {
           key: "newStr",
@@ -97,6 +109,7 @@ export const textProcessingCommands = {
           type: "input",
           defaultValue: "",
           icon: "text_fields",
+          width: 4,
         },
       ],
     },
@@ -110,22 +123,23 @@ export const textProcessingCommands = {
           type: "input",
           defaultValue: "",
           icon: "text_fields",
+          width: 6,
         },
         {
           key: "start",
           label: "起始位置",
           type: "input",
           inputType: "number",
-          defaultValue: "0",
           icon: "first_page",
+          width: 3,
         },
         {
           key: "end",
           label: "结束位置",
           type: "input",
           inputType: "number",
-          defaultValue: "",
           icon: "last_page",
+          width: 3,
         },
       ],
     },
@@ -149,15 +163,5 @@ export const textProcessingCommands = {
         },
       ],
     },
-    {
-      value: "quickcomposer.textProcessing.symmetricCrypto",
-      label: "对称加解密",
-      component: "SymmetricCryptoEditor",
-    },
-    {
-      value: "quickcomposer.textProcessing.asymmetricCrypto",
-      label: "非对称加解密",
-      component: "AsymmetricCryptoEditor",
-    },
   ],
 };

src/js/composer/generateCode.js

@@ -13,12 +13,7 @@ export function generateCode(commandFlow) {
     }
 
     let awaitCmd = cmd.isAsync ? "await " : "";
-
+    line += `${awaitCmd}${cmd.value}(${cmd.argv})`;
-    if (!!cmd.component) {
-      line += `${awaitCmd}${cmd.argv}`;
-    } else {
-      line += `${awaitCmd}${cmd.value}(${cmd.argv})`;
-    }
 
     code.push(line);
   });