mirror of
https://github.com/fofolee/uTools-quickcommand.git
synced 2025-06-09 15:04:06 +08:00
编排新增多输入框组件
This commit is contained in:
fofolee
parent
1063c87b49
commit
a2a3dbe0b6
@ -99,27 +99,13 @@
|
||||
v-bind="command.componentProps || {}"
|
||||
/>
|
||||
<!-- 通用组件参数 -->
|
||||
<template v-else>
|
||||
<div
|
||||
v-for="(item, index) in command.config"
|
||||
:key="item.key"
|
||||
class="param-item col-12"
|
||||
:class="{ 'q-mt-sm': index > 0 }"
|
||||
>
|
||||
<VariableInput
|
||||
v-model="item.value"
|
||||
:label="item.label"
|
||||
<MultiParamInput
|
||||
v-else
|
||||
v-model="argvLocal"
|
||||
: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)"
|
||||
class="col"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
@ -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) {
|
||||
max-width: 300px;
|
||||
padding: 8px 12px;
|
||||
/* 按钮样式 */
|
||||
.output-btn,
|
||||
.run-btn,
|
||||
.remove-btn {
|
||||
font-size: 12px;
|
||||
border-radius: 4px;
|
||||
min-height: 28px;
|
||||
padding: 0 8px;
|
||||
opacity: 0.6;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* 优化图标样式 */
|
||||
.output-section :deep(.q-icon) {
|
||||
opacity: 0.8;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.output-section :deep(.q-field--focused .q-icon) {
|
||||
.output-btn:hover,
|
||||
.run-btn:hover,
|
||||
.remove-btn:hover {
|
||||
opacity: 1;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* 参数项样式 */
|
||||
.param-item {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
.run-btn:hover {
|
||||
color: var(--q-positive);
|
||||
}
|
||||
|
||||
/* 当参数项换行时的间距 */
|
||||
.param-item :deep(.q-field) {
|
||||
margin-bottom: 0;
|
||||
.remove-btn:hover {
|
||||
color: var(--q-negative);
|
||||
}
|
||||
|
||||
.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>
|
||||
|
||||
77
src/components/composer/ui/MultiParamInput.vue
Normal file
77
src/components/composer/ui/MultiParamInput.vue
Normal file
@ -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>
|
||||
@ -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",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
@ -13,12 +13,7 @@ export function generateCode(commandFlow) {
|
||||
}
|
||||
|
||||
let awaitCmd = cmd.isAsync ? "await " : "";
|
||||
|
||||
if (!!cmd.component) {
|
||||
line += `${awaitCmd}${cmd.argv}`;
|
||||
} else {
|
||||
line += `${awaitCmd}${cmd.value}(${cmd.argv})`;
|
||||
}
|
||||
|
||||
code.push(line);
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user