字符串处理函数优化

plugin/lib/quickcomposer.js

@@ -1,5 +1,5 @@
 const quickcomposer = {
-  textProcessing: require("./quickcomposer/textProcessing"),
+  textProcessor: require("./quickcomposer/textProcessor"),
   simulate: require("./quickcomposer/simulate"),
 };
 

plugin/lib/quickcomposer/textProcessor/crypto.js

@@ -1,117 +1,10 @@
 const sm2 = require("sm-crypto").sm2;
-const sm3 = require("sm-crypto").sm3;
 const sm4 = require("sm-crypto").sm4;
 const CryptoJS = require("crypto-js");
 const NodeForge = require("node-forge");
+const { processSecret, dataConv } = require("./utils");
 
-// 数据编码转换
-const dataConv = (str, fromCodec, toCodec) => {
-  // 特殊处理 PEM 格式
-  if (fromCodec.toLowerCase() === "pem") {
-    const pemContent = str
-      .replace(/-----(BEGIN|END)[^-]+-----/g, "")
-      .replace(/[\r\n]/g, "");
-    return Buffer.from(pemContent, "base64").toString(toCodec.toLowerCase());
-  }
-  // 其他格式直接转换
-  return Buffer.from(str, fromCodec.toLowerCase()).toString(
-    toCodec.toLowerCase()
-  );
-};
-
-// 处理密钥和IV
-const processSecret = (key, codec, len) => {
-  // 转换成 hex 并填充到指定长度
-  const hexStr = dataConv(key, codec, "hex")
-    .padEnd(len * 2, "0")
-    .slice(0, len * 2);
-  return CryptoJS.enc.Hex.parse(hexStr);
-};
-
-const textProcessing = {
-  // base64 编码
-  base64Encode: function (text) {
-    return dataConv(text, "utf8", "base64");
-  },
-  // base64 解码
-  base64Decode: function (text) {
-    return dataConv(text, "base64", "utf8");
-  },
-  // URL 编码
-  urlEncode: function (text) {
-    return encodeURIComponent(text);
-  },
-  // URL 解码
-  urlDecode: function (text) {
-    return decodeURIComponent(text);
-  },
-  // html 编码
-  htmlEncode: function (text) {
-    return text
-      .replace(/&/g, "&")
-      .replace(/</g, "&lt;")
-      .replace(/>/g, "&gt;")
-      .replace(/"/g, "&quot;")
-      .replace(/'/g, "&#39;");
-  },
-  // html 解码
-  htmlDecode: function (text) {
-    return text
-      .replace(/&amp;/g, "&")
-      .replace(/&lt;/g, "<")
-      .replace(/&gt;/g, ">")
-      .replace(/&quot;/g, '"')
-      .replace(/&#39;/g, "'");
-  },
-  // 十六进制
-  hexEncode: function (text) {
-    return dataConv(text, "utf8", "hex");
-  },
-  // 十六进制解码
-  hexDecode: function (text) {
-    return dataConv(text, "hex", "utf8");
-  },
-  // MD5 哈希
-  md5Hash: function (text) {
-    return NodeForge.md.md5.create().update(text).digest().toHex();
-  },
-  // SHA1 哈希
-  sha1Hash: function (text) {
-    return NodeForge.md.sha1.create().update(text).digest().toHex();
-  },
-  // SHA256 哈希
-  sha256Hash: function (text) {
-    return NodeForge.md.sha256.create().update(text).digest().toHex();
-  },
-  // SHA512 哈希
-  sha512Hash: function (text) {
-    return NodeForge.md.sha512.create().update(text).digest().toHex();
-  },
-  // SM3 哈希
-  sm3Hash: function (text) {
-    return sm3(text);
-  },
-  // 字符串反转
-  reverseString: function (text) {
-    return text.split("").reverse().join("");
-  },
-  // 字符串替换
-  replaceString: function (text, oldStr, newStr) {
-    return text.replaceAll(oldStr, newStr);
-  },
-  // 字符串截取
-  substring: function (text, start, end) {
-    return text.substring(start, end);
-  },
-  // 正则处理
-  regexTransform: function (text, regex, replace) {
-    try {
-      if (replace === undefined) return text.match(regex);
-      return text.replace(regex, replace);
-    } catch (e) {
-      throw "正则表达式格式错误";
-    }
-  },
+const crypto = {
   // 非对称加解密
   asymmetricCrypto: function (config) {
     const {
@@ -209,6 +102,7 @@ const textProcessing = {
     }
     throw "不支持的算法";
   },
+
   // 对称加解密
   symmetricCrypto: function (config) {
     const {
@@ -364,4 +258,4 @@ const textProcessing = {
   },
 };
 
-module.exports = textProcessing;
+module.exports = crypto;

plugin/lib/quickcomposer/textProcessor/encoder.js

@@ -0,0 +1,48 @@
+const { dataConv } = require("./utils");
+
+const encoder = {
+  // base64 编码
+  base64Encode: function (text) {
+    return dataConv(text, "utf8", "base64");
+  },
+  // base64 解码
+  base64Decode: function (text) {
+    return dataConv(text, "base64", "utf8");
+  },
+  // URL 编码
+  urlEncode: function (text) {
+    return encodeURIComponent(text);
+  },
+  // URL 解码
+  urlDecode: function (text) {
+    return decodeURIComponent(text);
+  },
+  // html 编码
+  htmlEncode: function (text) {
+    return text
+      .replace(/&/g, "&")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;")
+      .replace(/'/g, "&#39;");
+  },
+  // html 解码
+  htmlDecode: function (text) {
+    return text
+      .replace(/&amp;/g, "&")
+      .replace(/&lt;/g, "<")
+      .replace(/&gt;/g, ">")
+      .replace(/&quot;/g, '"')
+      .replace(/&#39;/g, "'");
+  },
+  // 十六进制
+  hexEncode: function (text) {
+    return dataConv(text, "utf8", "hex");
+  },
+  // 十六进制解码
+  hexDecode: function (text) {
+    return dataConv(text, "hex", "utf8");
+  },
+};
+
+module.exports = encoder;

plugin/lib/quickcomposer/textProcessor/hash.js

@@ -0,0 +1,27 @@
+const NodeForge = require("node-forge");
+const sm3 = require("sm-crypto").sm3;
+
+const hash = {
+  // MD5 哈希
+  md5Hash: function (text) {
+    return NodeForge.md.md5.create().update(text).digest().toHex();
+  },
+  // SHA1 哈希
+  sha1Hash: function (text) {
+    return NodeForge.md.sha1.create().update(text).digest().toHex();
+  },
+  // SHA256 哈希
+  sha256Hash: function (text) {
+    return NodeForge.md.sha256.create().update(text).digest().toHex();
+  },
+  // SHA512 哈希
+  sha512Hash: function (text) {
+    return NodeForge.md.sha512.create().update(text).digest().toHex();
+  },
+  // SM3 哈希
+  sm3Hash: function (text) {
+    return sm3(text);
+  },
+};
+
+module.exports = hash;

plugin/lib/quickcomposer/textProcessor/index.js

@@ -0,0 +1,11 @@
+const encoder = require("./encoder");
+const hash = require("./hash");
+const string = require("./string");
+const crypto = require("./crypto");
+
+module.exports = {
+  ...encoder,
+  ...hash,
+  ...string,
+  ...crypto,
+};

plugin/lib/quickcomposer/textProcessor/string.js

@@ -0,0 +1,25 @@
+const string = {
+  // 字符串反转
+  reverseString: function (text) {
+    return text.split("").reverse().join("");
+  },
+  // 字符串替换
+  replaceString: function (text, oldStr, newStr) {
+    return text.replaceAll(oldStr, newStr);
+  },
+  // 字符串截取
+  substring: function (text, start, end) {
+    return text.substring(start, end);
+  },
+  // 正则处理
+  regexTransform: function (text, regex, replace) {
+    try {
+      if (replace === undefined) return text.match(regex);
+      return text.replace(regex, replace);
+    } catch (e) {
+      throw "正则表达式格式错误";
+    }
+  },
+};
+
+module.exports = string;

plugin/lib/quickcomposer/textProcessor/utils.js

@@ -0,0 +1,30 @@
+const CryptoJS = require("crypto-js");
+
+// 数据编码转换
+const dataConv = (str, fromCodec, toCodec) => {
+  // 特殊处理 PEM 格式
+  if (fromCodec.toLowerCase() === "pem") {
+    const pemContent = str
+      .replace(/-----(BEGIN|END)[^-]+-----/g, "")
+      .replace(/[\r\n]/g, "");
+    return Buffer.from(pemContent, "base64").toString(toCodec.toLowerCase());
+  }
+  // 其他格式直接转换
+  return Buffer.from(str, fromCodec.toLowerCase()).toString(
+    toCodec.toLowerCase()
+  );
+};
+
+// 处理密钥和IV
+const processSecret = (key, codec, len) => {
+  // 转换成 hex 并填充到指定长度
+  const hexStr = dataConv(key, codec, "hex")
+    .padEnd(len * 2, "0")
+    .slice(0, len * 2);
+  return CryptoJS.enc.Hex.parse(hexStr);
+};
+
+module.exports = {
+  dataConv,
+  processSecret,
+};

src/components/composer/crypto/AsymmetricCryptoEditor.vue

@@ -1,27 +1,40 @@
 <template>
   <div class="asymmetric-crypto-editor">
     <!-- 加密/解密切换 -->
-    <q-btn-toggle
-      v-model="operation"
-      :options="[
-        { label: '加密', value: 'encrypt' },
-        { label: '解密', value: 'decrypt' },
-      ]"
-      spread
-      dense
-      no-caps
-      unelevated
-      toggle-color="primary"
-    />
+    <div class="tabs-container">
+      <q-tabs
+        v-model="operation"
+        dense
+        class="text-grey"
+        active-color="primary"
+        indicator-color="primary"
+        align="justify"
+        narrow-indicator
+        inline-label
+      >
+        <q-tab name="encrypt" no-caps>
+          <div class="row items-center no-wrap">
+            <q-icon name="enhanced_encryption" size="16px" />
+            <div class="q-ml-xs">加密</div>
+          </div>
+        </q-tab>
+        <q-tab name="decrypt" no-caps>
+          <div class="row items-center no-wrap">
+            <q-icon name="no_encryption" size="16px" />
+            <div class="q-ml-xs">解密</div>
+          </div>
+        </q-tab>
+      </q-tabs>
+      <q-separator />
+    </div>
 
     <!-- 文本输入 -->
-    <div class="row">
+    <div class="row q-mt-sm">
       <VariableInput
         v-model="text"
         :label="operation === 'encrypt' ? '要加密的文本' : '要解密的文本'"
         :command="{
-          icon:
-            operation === 'encrypt' ? 'enhanced_encryption' : 'no_encryption',
+          icon: operation === 'encrypt' ? 'text_fields' : 'password',
         }"
         class="col-12"
         @update:model-value="updateConfig"
@@ -277,6 +290,28 @@ export default defineComponent({
   gap: 8px;
 }
 
+.tabs-container {
+  position: relative;
+}
+
+.tabs-container .q-tabs {
+  min-height: 32px;
+}
+
+.tabs-container .q-tab {
+  min-height: 32px;
+  padding: 0 12px;
+}
+
+.tabs-container .q-tab__content {
+  min-height: 32px;
+}
+
+.tabs-container .q-separator {
+  position: relative;
+  z-index: 0;
+}
+
 .row {
   display: flex;
   flex-wrap: wrap;
@@ -380,13 +415,9 @@ export default defineComponent({
   }
 }
 
-.q-btn-toggle {
-  border: 1px solid rgba(0, 0, 0, 0.12);
-  border-radius: 4px;
-}
-
-.body--dark .q-btn-toggle {
-  border-color: rgba(255, 255, 255, 0.12);
+.body--dark .q-tab,
+.body--dark .q-tab-panel {
+  background-color: #303133;
 }
 
 /* 确保下拉按钮内容垂直居中 */

src/components/composer/crypto/SymmetricCryptoEditor.vue

@@ -1,27 +1,40 @@
 <template>
-  <div class="symmetric-crypto-editor q-gutter-y-sm">
+  <div class="symmetric-crypto-editor">
     <!-- 加密/解密切换 -->
-    <q-btn-toggle
-      v-model="operation"
-      :options="[
-        { label: '加密', value: 'encrypt' },
-        { label: '解密', value: 'decrypt' },
-      ]"
-      spread
-      dense
-      no-caps
-      unelevated
-      toggle-color="primary"
-    />
+    <div class="tabs-container">
+      <q-tabs
+        v-model="operation"
+        dense
+        class="text-grey"
+        active-color="primary"
+        indicator-color="primary"
+        align="justify"
+        narrow-indicator
+        inline-label
+      >
+        <q-tab name="encrypt" no-caps>
+          <div class="row items-center no-wrap">
+            <q-icon name="enhanced_encryption" size="16px" />
+            <div class="q-ml-xs">加密</div>
+          </div>
+        </q-tab>
+        <q-tab name="decrypt" no-caps>
+          <div class="row items-center no-wrap">
+            <q-icon name="no_encryption" size="16px" />
+            <div class="q-ml-xs">解密</div>
+          </div>
+        </q-tab>
+      </q-tabs>
+      <q-separator />
+    </div>
 
     <!-- 文本输入 -->
-    <div class="row">
+    <div class="row q-mt-xs">
       <VariableInput
         v-model="text"
         :label="operation === 'encrypt' ? '要加密的文本' : '要解密的文本'"
         :command="{
-          icon:
-            operation === 'encrypt' ? 'enhanced_encryption' : 'no_encryption',
+          icon: operation === 'encrypt' ? 'text_fields' : 'password',
         }"
         class="col-8"
         @update:model-value="updateConfig"
@@ -316,16 +329,39 @@ export default defineComponent({
 </script>
 
 <style scoped>
-.crypto-editor {
+.symmetric-crypto-editor {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
 
+.tabs-container {
+  position: relative;
+}
+
+.tabs-container .q-tabs {
+  min-height: 32px;
+}
+
+.tabs-container .q-tab {
+  min-height: 32px;
+  padding: 0 12px;
+}
+
+.tabs-container .q-tab__content {
+  min-height: 32px;
+}
+
+.tabs-container .q-separator {
+  position: relative;
+  z-index: 0;
+}
+
 .row {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
+  align-items: stretch;
 }
 
 .col-select {
@@ -358,15 +394,6 @@ export default defineComponent({
   }
 }
 
-.q-btn-toggle {
-  border: 1px solid rgba(0, 0, 0, 0.12);
-  border-radius: 4px;
-}
-
-.body--dark .q-btn-toggle {
-  border-color: rgba(255, 255, 255, 0.12);
-}
-
 .key-input {
   position: relative;
 }
@@ -421,6 +448,11 @@ export default defineComponent({
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
+.body--dark .q-tab,
+.body--dark .q-tab-panel {
+  background-color: #303133;
+}
+
 /* 确保下拉按钮内容垂直居中 */
 .codec-dropdown :deep(.q-btn__content) {
   min-height: unset;

src/components/composer/ubrowser/UBrowserEditor.vue

@@ -15,17 +15,9 @@
     </q-tabs>
 
     <!-- 内容区域 -->
-    <q-tab-panels
-      v-model="step"
-      animated
-      swipeable
-      class="ubrowser-panels"
-    >
+    <q-tab-panels v-model="step" animated swipeable class="ubrowser-panels">
       <q-tab-panel name="1" class="panel-content">
-        <UBrowserBasic
-          :configs="configs"
-          @update:configs="updateConfigs"
-        />
+        <UBrowserBasic :configs="configs" @update:configs="updateConfigs" />
       </q-tab-panel>
 
       <q-tab-panel name="2" class="panel-content">
@@ -38,10 +30,7 @@
       </q-tab-panel>
 
       <q-tab-panel name="3" class="panel-content">
-        <UBrowserRun
-          :configs="configs"
-          @update:configs="updateConfigs"
-        />
+        <UBrowserRun :configs="configs" @update:configs="updateConfigs" />
       </q-tab-panel>
     </q-tab-panels>
   </div>
@@ -143,9 +132,9 @@ export default defineComponent({
 }
 
 /* 暗色模式 */
-.body--dark .ubrowser-tabs,
-.body--dark .ubrowser-panels {
-  background: rgba(255, 255, 255, 0.05);
+.body--dark .q-tab,
+.body--dark .q-tab-panel {
+  background-color: #303133;
 }
 
 /* 调整面板内边距和布局 */

src/js/composer/commands/index.js

@@ -2,7 +2,7 @@ import { fileCommands } from "./fileCommands";
 import { networkCommands } from "./networkCommands";
 import { systemCommands } from "./systemCommands";
 import { notifyCommands } from "./notifyCommands";
-import { textProcessingCommands } from "./textProcessingCommands";
+import { textProcessorCommands } from "./textProcessorCommands";
 import { otherCommands } from "./otherCommands";
 import { simulateCommands } from "./simulateCommands";
 import { controlCommands } from "./controlCommands";
@@ -12,7 +12,7 @@ export const commandCategories = [
   networkCommands,
   systemCommands,
   notifyCommands,
-  textProcessingCommands,
+  textProcessorCommands,
   controlCommands,
   otherCommands,
   simulateCommands,

src/js/composer/commands/textProcessorCommands.js

@@ -1,10 +1,10 @@
-export const textProcessingCommands = {
+export const textProcessorCommands = {
   label: "文本处理",
   icon: "code",
   defaultOpened: false,
   commands: [
     {
-      value: "quickcomposer.textProcessing",
+      value: "quickcomposer.textProcessor",
       label: "编解码",
       desc: "文本编解码",
       icon: "code",
@@ -21,46 +21,46 @@ export const textProcessingCommands = {
         options: [
           {
             label: "Base64编码",
-            value: "quickcomposer.textProcessing.base64Encode",
+            value: "quickcomposer.textProcessor.base64Encode",
           },
           {
             label: "Base64解码",
-            value: "quickcomposer.textProcessing.base64Decode",
+            value: "quickcomposer.textProcessor.base64Decode",
           },
           {
             label: "十六进制编码",
-            value: "quickcomposer.textProcessing.hexEncode",
+            value: "quickcomposer.textProcessor.hexEncode",
           },
           {
             label: "十六进制解码",
-            value: "quickcomposer.textProcessing.hexDecode",
+            value: "quickcomposer.textProcessor.hexDecode",
           },
-          { label: "URL编码", value: "quickcomposer.textProcessing.urlEncode" },
-          { label: "URL解码", value: "quickcomposer.textProcessing.urlDecode" },
+          { label: "URL编码", value: "quickcomposer.textProcessor.urlEncode" },
+          { label: "URL解码", value: "quickcomposer.textProcessor.urlDecode" },
           {
             label: "HTML编码",
-            value: "quickcomposer.textProcessing.htmlEncode",
+            value: "quickcomposer.textProcessor.htmlEncode",
           },
           {
             label: "HTML解码",
-            value: "quickcomposer.textProcessing.htmlDecode",
+            value: "quickcomposer.textProcessor.htmlDecode",
           },
         ],
         width: 3,
       },
     },
     {
-      value: "quickcomposer.textProcessing.symmetricCrypto",
+      value: "quickcomposer.textProcessor.symmetricCrypto",
       label: "对称加解密",
       component: "SymmetricCryptoEditor",
     },
     {
-      value: "quickcomposer.textProcessing.asymmetricCrypto",
+      value: "quickcomposer.textProcessor.asymmetricCrypto",
       label: "非对称加解密",
       component: "AsymmetricCryptoEditor",
     },
     {
-      value: "quickcomposer.textProcessing",
+      value: "quickcomposer.textProcessor",
       label: "哈希计算",
       desc: "计算文本的哈希值",
       icon: "enhanced_encryption",
@@ -75,17 +75,17 @@ export const textProcessingCommands = {
       functionSelector: {
         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" },
+          { label: "MD5", value: "quickcomposer.textProcessor.md5Hash" },
+          { label: "SHA1", value: "quickcomposer.textProcessor.sha1Hash" },
+          { label: "SHA256", value: "quickcomposer.textProcessor.sha256Hash" },
+          { label: "SHA512", value: "quickcomposer.textProcessor.sha512Hash" },
+          { label: "SM3", value: "quickcomposer.textProcessor.sm3Hash" },
         ],
       },
       width: 3,
     },
     {
-      value: "quickcomposer.textProcessing.reverseString",
+      value: "quickcomposer.textProcessor.reverseString",
       label: "字符串反转",
       config: [
         {
@@ -98,7 +98,7 @@ export const textProcessingCommands = {
       ],
     },
     {
-      value: "quickcomposer.textProcessing.replaceString",
+      value: "quickcomposer.textProcessor.replaceString",
       label: "字符串替换",
       config: [
         {
@@ -128,7 +128,7 @@ export const textProcessingCommands = {
       ],
     },
     {
-      value: "quickcomposer.textProcessing.substring",
+      value: "quickcomposer.textProcessor.substring",
       label: "字符串截取",
       config: [
         {
@@ -158,7 +158,7 @@ export const textProcessingCommands = {
       ],
     },
     {
-      value: "quickcomposer.textProcessing.regexTransform",
+      value: "quickcomposer.textProcessor.regexTransform",
       label: "正则提取/替换",
       component: "RegexEditor",
       componentProps: {