mirror of
https://github.com/fofolee/uTools-quickcommand.git
synced 2025-06-07 21:46:12 +08:00
OutPutEditor支持下拉选择变量和函数
This commit is contained in:
parent
40f1e1d7f7
commit
f1dd98624e
@ -10,8 +10,10 @@
|
||||
<q-icon
|
||||
name="output"
|
||||
v-if="!command.neverHasOutput"
|
||||
class="output-btn"
|
||||
:color="command.outputVariable ? 'primary' : ''"
|
||||
:class="[
|
||||
'output-btn',
|
||||
command.outputVariable ? 'output-btn-active' : '',
|
||||
]"
|
||||
@click="showOutputEditor = true"
|
||||
>
|
||||
<q-tooltip>
|
||||
@ -195,6 +197,11 @@ export default {
|
||||
color: var(--q-primary);
|
||||
}
|
||||
|
||||
.output-btn-active {
|
||||
color: var(--q-primary);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 暗色模式适配 */
|
||||
.body--dark .output-btn {
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
|
@ -11,6 +11,7 @@
|
||||
v-model="simpleOutputVar"
|
||||
:label="currentOutputs?.label || '输出变量名'"
|
||||
autofocus
|
||||
:show-variable-list="true"
|
||||
class="q-px-sm"
|
||||
/>
|
||||
</SectionBlock>
|
||||
@ -75,6 +76,7 @@
|
||||
label="回调函数"
|
||||
placeholder="新函数名则自动创建"
|
||||
class="col-8"
|
||||
:show-function-list="true"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
|
@ -12,6 +12,14 @@
|
||||
<template v-slot:prepend>
|
||||
<div class="variable-label">{{ label }}</div>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<VariableList
|
||||
:show-variable-list="showVariableList"
|
||||
:show-function-list="showFunctionList"
|
||||
@emit-value="updateValBySelect"
|
||||
class="variable-list-btn"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
<q-select
|
||||
v-else
|
||||
@ -28,8 +36,12 @@
|
||||
|
||||
<script>
|
||||
import { defineComponent } from "vue";
|
||||
import VariableList from "components/composer/common/varinput/VariableList.vue";
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
VariableList,
|
||||
},
|
||||
name: "OutputField",
|
||||
props: {
|
||||
modelValue: {
|
||||
@ -51,8 +63,21 @@ export default defineComponent({
|
||||
type: null,
|
||||
default: null,
|
||||
},
|
||||
showVariableList: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
showFunctionList: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
emits: ["update:modelValue"],
|
||||
methods: {
|
||||
updateValBySelect(_type, val) {
|
||||
this.$emit("update:modelValue", val);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -73,6 +98,14 @@ export default defineComponent({
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.output-field:not(.q-select) :deep(.q-field__control) {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.output-field.q-select :deep(.q-field__append) {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* 去除filled输入框边框 */
|
||||
.output-field :deep(.q-field__control:before) {
|
||||
border: none;
|
||||
@ -83,4 +116,18 @@ export default defineComponent({
|
||||
height: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.variable-list-btn {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
/* 去掉下拉按钮的焦点效果 */
|
||||
.variable-list-btn :deep(.q-focus-helper) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* 移除波纹效果 */
|
||||
.variable-list-btn :deep(.q-ripple) {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
@ -47,7 +47,12 @@
|
||||
class="prepend-btn"
|
||||
/>
|
||||
<!-- 变量选择下拉 -->
|
||||
<VariableList @emit-value="updateValBySelect" class="prepend-btn" />
|
||||
<VariableList
|
||||
@emit-value="updateValBySelect"
|
||||
:show-variable-list="true"
|
||||
:show-function-list="true"
|
||||
class="prepend-btn variable-list-btn"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:prepend>
|
||||
<q-icon v-if="!noIcon" :name="icon || 'code'" />
|
||||
@ -294,4 +299,13 @@ export default defineComponent({
|
||||
margin-left: 5px;
|
||||
transition: all 0.6s ease;
|
||||
}
|
||||
|
||||
/* 暗色模式 */
|
||||
.variable-list-btn {
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.body--dark .variable-list-btn {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
</style>
|
||||
|
@ -4,12 +4,13 @@
|
||||
dense
|
||||
stretch
|
||||
size="sm"
|
||||
class="variable-dropdown"
|
||||
:dropdown-icon="icon"
|
||||
:no-icon-animation="icon !== 'arrow_drop_down'"
|
||||
@click="({ variables, functions } = getAvailableVariablesAndFunctions())"
|
||||
>
|
||||
<q-list class="variable-list">
|
||||
<template v-if="variables.length || functions.length">
|
||||
<div v-if="variables.length">
|
||||
<div v-if="variables.length && showVariableList">
|
||||
<q-item-label header class="variable-label">
|
||||
<q-separator class="separator-left" />
|
||||
<div class="label-content">
|
||||
@ -35,7 +36,7 @@
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</div>
|
||||
<div v-if="functions.length">
|
||||
<div v-if="functions.length && showFunctionList">
|
||||
<q-item-label header class="variable-label">
|
||||
<q-separator class="separator-left" />
|
||||
<div class="label-content">
|
||||
@ -143,13 +144,15 @@ export default defineComponent({
|
||||
|
||||
const getAvailableVariables = () => {
|
||||
const variables = getCurrentVariables();
|
||||
return variables.filter((variable) =>
|
||||
const usableVariables = variables.filter((variable) =>
|
||||
// 输出变量只显示在当前命令之前的
|
||||
variable.type === "output"
|
||||
? variable.sourceCommand.index < commandIndex.value
|
||||
: // 参数和局部变量显示所有
|
||||
true
|
||||
);
|
||||
// 去除名称重复的变量,只保留最新的
|
||||
return [...new Map(usableVariables.map((v) => [v.name, v])).values()];
|
||||
};
|
||||
|
||||
const getCurrentFunctions = inject("getCurrentFunctions");
|
||||
@ -188,6 +191,20 @@ export default defineComponent({
|
||||
);
|
||||
},
|
||||
},
|
||||
props: {
|
||||
showVariableList: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
showFunctionList: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: "arrow_drop_down",
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -293,15 +310,6 @@ export default defineComponent({
|
||||
color: var(--q-grey-7);
|
||||
}
|
||||
|
||||
/* 暗色模式 */
|
||||
.variable-dropdown {
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.body--dark .variable-dropdown {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
|
||||
.body--dark .variable-item:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
@ -160,7 +160,7 @@
|
||||
</div>
|
||||
<div class="var-list">
|
||||
<div
|
||||
v-for="(variable, index) in localFlow.outputVariables"
|
||||
v-for="(variable, index) in outputVariables"
|
||||
:key="index"
|
||||
class="var-item output-var"
|
||||
>
|
||||
@ -198,6 +198,11 @@ export default defineComponent({
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
outputVariables: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
emits: ["update:modelValue", "update:flow"],
|
||||
computed: {
|
||||
|
@ -1,15 +1,12 @@
|
||||
export function generateCode(flow) {
|
||||
let usedVarNames = {};
|
||||
let usedVarNames = [];
|
||||
|
||||
// 获取变量赋值代码,如果变量已经存在,则直接赋值,否则声明并赋值
|
||||
const getVarAssignCode = (varName, varValue, funcName) => {
|
||||
if (!usedVarNames[funcName]) {
|
||||
usedVarNames[funcName] = [];
|
||||
}
|
||||
if (usedVarNames[funcName].includes(varName)) {
|
||||
const getVarAssignCode = (varName, varValue) => {
|
||||
if (usedVarNames.includes(varName)) {
|
||||
return `${varName} = ${varValue};`;
|
||||
}
|
||||
usedVarNames[funcName].push(varName);
|
||||
usedVarNames.push(varName);
|
||||
if (!varValue) {
|
||||
return `let ${varName};`;
|
||||
}
|
||||
@ -42,7 +39,7 @@ export function generateCode(flow) {
|
||||
|
||||
// 局部变量赋值
|
||||
manualVars.forEach((v) => {
|
||||
code.push(indent + getVarAssignCode(v.name, v.value, flow.name));
|
||||
code.push(indent + getVarAssignCode(v.name, v.value));
|
||||
});
|
||||
|
||||
commands.forEach((cmd) => {
|
||||
@ -94,7 +91,8 @@ export function generateCode(flow) {
|
||||
code.push(
|
||||
`${indent}${getVarAssignCode(
|
||||
varName,
|
||||
getVarByPath(promiseName, path)
|
||||
getVarByPath(promiseName, path),
|
||||
flow.name
|
||||
)}`
|
||||
);
|
||||
});
|
||||
@ -107,7 +105,11 @@ export function generateCode(flow) {
|
||||
if (details) {
|
||||
Object.entries(details).forEach(([path, varName]) => {
|
||||
code.push(
|
||||
`${indent}${getVarAssignCode(varName, getVarByPath(name, path))}`
|
||||
`${indent}${getVarAssignCode(
|
||||
varName,
|
||||
getVarByPath(name, path),
|
||||
flow.name
|
||||
)}`
|
||||
);
|
||||
});
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user