OutPutEditor支持下拉选择变量和函数

This commit is contained in:
fofolee 2025-01-26 14:41:22 +08:00
parent 40f1e1d7f7
commit f1dd98624e
7 changed files with 112 additions and 27 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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
)}`
);
});
}