实现哈希和编解码

src/components/editor/composer/ComposerCard.vue

@@ -93,8 +93,10 @@
             <component
               :is="command.component"
               v-model="argvLocal"
+              :command="command"
               class="col"
               v-if="!!command.component"
+              v-bind="command.componentProps || {}"
             />
             <!-- 通用组件参数 -->
             <template v-else>
@@ -132,6 +134,7 @@ import VariableInput from "./VariableInput.vue";
 import AxiosConfigEditor from "./http/AxiosConfigEditor.vue";
 import SymmetricCryptoEditor from "./crypto/SymmetricCryptoEditor.vue";
 import AsymmetricCryptoEditor from "./crypto/AsymmetricCryptoEditor.vue";
+import FunctionSelector from "./FunctionSelector.vue";
 import { validateVariableName } from "js/common/variableValidator";
 
 export default defineComponent({
@@ -143,6 +146,7 @@ export default defineComponent({
     AxiosConfigEditor,
     SymmetricCryptoEditor,
     AsymmetricCryptoEditor,
+    FunctionSelector,
   },
   props: {
     command: {

src/components/editor/composer/FunctionSelector.vue

@@ -0,0 +1,101 @@
+<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 "./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/js/composer/commands/textProcessingCommands.js

@@ -4,108 +4,61 @@ export const textProcessingCommands = {
   defaultOpened: false,
   commands: [
     {
-      value: "quickcomposer.textProcessing.base64Encode",
-      label: "Base64编码",
-      config: [
-        {
-          key: "text",
-          label: "要编码的文本",
-          type: "input",
-          defaultValue: "",
-          icon: "lock",
-        },
-      ],
+      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.base64Decode",
-      label: "Base64解码",
-      config: [
-        {
-          key: "text",
-          label: "要解码的Base64文本",
-          type: "input",
-          defaultValue: "",
-          icon: "lock_open",
-        },
-      ],
-    },
-    {
-      value: "quickcomposer.textProcessing.hexEncode",
-      label: "十六进制编码",
-      config: [
-        {
-          key: "text",
-          label: "要编码的文本",
-          type: "input",
-          defaultValue: "",
-          icon: "lock",
-        },
-      ],
-    },
-    {
-      value: "quickcomposer.textProcessing.hexDecode",
-      label: "十六进制解码",
-      config: [
-        {
-          key: "text",
-          label: "要解码的十六进制文本",
-          type: "input",
-          defaultValue: "",
-          icon: "lock_open",
-        },
-      ],
-    },
-    {
-      value: "quickcomposer.textProcessing.urlEncode",
-      label: "URL编码",
-      config: [
-        {
-          key: "text",
-          label: "要编码的文本",
-          type: "input",
-          defaultValue: "",
-          icon: "link",
-        },
-      ],
-    },
-    {
-      value: "quickcomposer.textProcessing.urlDecode",
-      label: "URL解码",
-      config: [
-        {
-          key: "text",
-          label: "要解码的URL编码文本",
-          type: "input",
-          defaultValue: "",
-          icon: "link_off",
-        },
-      ],
-    },
-    {
-      value: "quickcomposer.textProcessing.htmlEncode",
-      label: "HTML编码",
-      config: [
-        {
-          key: "text",
-          label: "要编码的文本",
-          type: "input",
-          defaultValue: "",
-          icon: "code",
-        },
-      ],
-    },
-    {
-      value: "quickcomposer.textProcessing.htmlDecode",
-      label: "HTML解码",
-      config: [
-        {
-          key: "text",
-          label: "要解码的HTML文本",
-          type: "input",
-          defaultValue: "",
-          icon: "code_off",
-        },
-      ],
+      value: "quickcomposer.textProcessing",
+      label: "编解码",
+      desc: "文本编解码",
+      icon: "code",
+      component: "FunctionSelector",
+      componentProps: {
+        inputLabel: "要编解码的文本",
+        selectLabel: "编解码方式",
+        options: [
+          {
+            label: "Base64编码",
+            value: "quickcomposer.textProcessing.base64Encode",
+          },
+          {
+            label: "Base64解码",
+            value: "quickcomposer.textProcessing.base64Decode",
+          },
+          {
+            label: "十六进制编码",
+            value: "quickcomposer.textProcessing.hexEncode",
+          },
+          {
+            label: "十六进制解码",
+            value: "quickcomposer.textProcessing.hexDecode",
+          },
+          { label: "URL编码", value: "quickcomposer.textProcessing.urlEncode" },
+          { label: "URL解码", value: "quickcomposer.textProcessing.urlDecode" },
+          {
+            label: "HTML编码",
+            value: "quickcomposer.textProcessing.htmlEncode",
+          },
+          {
+            label: "HTML解码",
+            value: "quickcomposer.textProcessing.htmlDecode",
+          },
+        ],
+      },
     },
     {
       value: "quickcomposer.textProcessing.reverseString",
@@ -206,44 +159,5 @@ export const textProcessingCommands = {
       label: "非对称加解密",
       component: "AsymmetricCryptoEditor",
     },
-    {
-      value: "quickcomposer.textProcessing.md5Hash",
-      label: "MD5哈希",
-      config: [
-        {
-          key: "text",
-          label: "要哈希的文本",
-          type: "input",
-          defaultValue: "",
-          icon: "enhanced_encryption",
-        },
-      ],
-    },
-    {
-      value: "quickcomposer.textProcessing.sha256Hash",
-      label: "SHA256哈希",
-      config: [
-        {
-          key: "text",
-          label: "要哈希的文本",
-          type: "input",
-          defaultValue: "",
-          icon: "enhanced_encryption",
-        },
-      ],
-    },
-    {
-      value: "quickcomposer.textProcessing.sm3Hash",
-      label: "SM3哈希",
-      config: [
-        {
-          key: "text",
-          label: "要哈希的文本",
-          type: "input",
-          defaultValue: "",
-          icon: "enhanced_encryption",
-        },
-      ],
-    },
   ],
 };