字符串处理函数优化

This commit is contained in:
fofolee
2025-01-03 00:28:49 +08:00
parent ef4726049e
commit 729b91d720
12 changed files with 287 additions and 200 deletions

View File

@@ -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;
}
/* 确保下拉按钮内容垂直居中 */

View File

@@ -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;

View File

@@ -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;
}
/* 调整面板内边距和布局 */

View File

@@ -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,

View File

@@ -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: {