mirror of
https://github.com/fofolee/uTools-quickcommand.git
synced 2025-09-24 04:53:31 +08:00
字符串处理函数优化
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
/* 确保下拉按钮内容垂直居中 */
|
||||
|
@@ -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;
|
||||
|
@@ -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;
|
||||
}
|
||||
|
||||
/* 调整面板内边距和布局 */
|
||||
|
@@ -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,
|
||||
|
@@ -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: {
|
Reference in New Issue
Block a user