加强变量校验,重复和非法时自动重命名,优化变量管理,实时获取最新变量,不再进行增删操作

This commit is contained in:
fofolee
2025-01-07 00:41:28 +08:00
parent 25be7f4926
commit 5947e537fe
10 changed files with 269 additions and 78 deletions

View File

@@ -29,6 +29,7 @@ import {
findCommandByValue,
} from "js/composer/composerConfig";
import { generateCode } from "js/composer/generateCode";
import { parseVariables } from "js/composer/variableManager";
export default defineComponent({
name: "CommandComposer",
@@ -37,37 +38,32 @@ export default defineComponent({
ComposerFlow,
},
setup() {
const variables = ref([]);
const commandFlow = ref([]);
const addVariable = (name, command) => {
if (!variables.value.find((v) => v.name === name)) {
variables.value.push({
name,
sourceCommand: command,
});
// 提供获取当前变量的函数,直接返回解析后的变量列表
const getCurrentVariables = () => {
const variables = [];
for (const cmd of commandFlow.value) {
if (cmd.saveOutput && cmd.outputVariable) {
variables.push(
...parseVariables(cmd.outputVariable).map((variable) => ({
name: variable,
sourceCommand: cmd,
}))
);
}
}
return variables;
};
const removeVariable = (name) => {
const index = variables.value.findIndex((v) => v.name === name);
if (index !== -1) {
variables.value.splice(index, 1);
}
};
provide("composerVariables", variables);
provide("addVariable", addVariable);
provide("removeVariable", removeVariable);
provide("getCurrentVariables", getCurrentVariables);
return {
variables,
addVariable,
removeVariable,
commandFlow,
};
},
data() {
return {
commandFlow: [],
availableCommands,
};
},

View File

@@ -66,11 +66,11 @@
<script>
import { defineComponent, inject } from "vue";
import { validateVariableName } from "js/common/variableValidator";
import VariableInput from "components/composer/common/VariableInput.vue";
import MultiParams from "components/composer/MultiParams.vue";
import CommandHead from "components/composer/card/CommandHead.vue";
import * as CardComponents from "js/composer/cardComponents";
import { processVariable } from "js/composer/variableManager";
export default defineComponent({
name: "ComposerCard",
@@ -110,46 +110,27 @@ export default defineComponent({
},
},
setup() {
const addVariable = inject("addVariable");
const removeVariable = inject("removeVariable");
const variables = inject("composerVariables", []);
return {
addVariable,
removeVariable,
variables,
};
const getCurrentVariables = inject("getCurrentVariables");
return { getCurrentVariables };
},
methods: {
handleOutputVariableUpdate(value) {
// 检查变量名是否合法
const validation = validateVariableName(value);
if (!validation.isValid) {
quickcommand.showMessageBox(validation.error, "warning");
return;
const result = processVariable({
value,
existingVars: this.getCurrentVariables().map((v) => v.name),
});
if (result.warning) {
quickcommand.showMessageBox(result.warning, "info");
}
// 检查变量名是否重复
if (this.variables.some((v) => v.name === value)) {
quickcommand.showMessageBox(`变量名 "${value}" 已经存在`, "warning");
return;
}
// 处理变量管理
if (this.localCommand.outputVariable) {
this.removeVariable(this.localCommand.outputVariable);
}
if (value) {
this.addVariable(value, this.localCommand);
}
this.localCommand.outputVariable = value;
this.localCommand.outputVariable = result.processedValue;
},
handleToggleOutput() {
this.localCommand.saveOutput = !this.localCommand.saveOutput;
// 如果关闭输出,清空变量名
if (!this.localCommand.saveOutput && this.localCommand.outputVariable) {
this.removeVariable(this.localCommand.outputVariable);
if (!this.localCommand.saveOutput) {
this.localCommand.outputVariable = null;
}
},

View File

@@ -74,6 +74,7 @@ import ChainStyles from "./flow/ChainStyles.vue";
import EmptyFlow from "./flow/EmptyFlow.vue";
import DropArea from "./flow/DropArea.vue";
import { findCommandByValue } from "js/composer/composerConfig";
import { processVariable } from "js/composer/variableManager";
export default defineComponent({
name: "ComposerFlow",
@@ -96,11 +97,11 @@ export default defineComponent({
required: true,
},
},
emits: ["update:modelValue", "add-command", "action"],
setup() {
const removeVariable = inject("removeVariable");
return { removeVariable };
const getCurrentVariables = inject("getCurrentVariables");
return { getCurrentVariables };
},
emits: ["update:modelValue", "add-command", "action"],
data() {
return {
dragIndex: -1,
@@ -261,13 +262,17 @@ export default defineComponent({
} catch (error) {}
},
createNewCommand(parsedAction) {
return {
const newCommand = {
...parsedAction,
id: this.getUniqueId(),
saveOutput: false,
useOutput: null,
outputVariable: null,
};
if (newCommand.saveOutput && newCommand.outputVariable) {
newCommand.outputVariable = processVariable({
value: newCommand.outputVariable,
existingVars: this.getCurrentVariables().map((v) => v.name),
}).processedValue;
}
return newCommand;
},
getUniqueId() {
return this.$root.getUniqueId();
@@ -284,9 +289,6 @@ export default defineComponent({
const cmd = newCommands[i];
// 如果chainId不为空则只删除指定chainId的命令
if (chainId && cmd.chainId !== chainId) continue;
if (cmd.outputVariable) {
this.removeVariable(cmd.outputVariable);
}
newCommands.splice(i, 1);
}
this.$emit("update:modelValue", newCommands);
@@ -326,7 +328,7 @@ export default defineComponent({
command,
{
//没有输出,则不打印
code: `${command.outputVariable} && console.log(${command.outputVariable})`,
code: `if(${command.outputVariable}!==undefined){console.log(${command.outputVariable})}`,
},
];
// 触发运行事件

View File

@@ -179,15 +179,13 @@ export default defineComponent({
)?.label;
const subFeature = funcNameLabel ? `${funcNameLabel} ` : "";
const allArgvs = argvs
.filter((item) => item != null && item != "")
.map((item) =>
item?.hasOwnProperty("__varInputVal__")
? window.lodashM.truncate(item.value, {
length: 30,
omission: "...",
})
: item
)
.filter((item) => item != null && item != "");
window.lodashM.truncate(stringifyArgv(item).toString(), {
length: 30,
omission: "...",
})
);
return `${subFeature}${allArgvs.join(",")}`;
},
updateModelValue(funcName, argvs) {

View File

@@ -9,8 +9,9 @@
<!-- 变量输入框 -->
<q-input
v-if="command.saveOutput"
:model-value="command.outputVariable"
@update:model-value="$emit('update:outputVariable', $event)"
v-model="inputValue"
@focus="sourceValue = inputValue"
@blur="handleBlur"
outlined
placeholder="变量名"
class="variable-input"
@@ -91,6 +92,17 @@ export default {
default: false,
},
},
data() {
return {
inputValue: this.command.outputVariable || "",
sourceValue: "",
};
},
watch: {
"command.outputVariable"(newVal) {
this.inputValue = newVal || "";
},
},
emits: [
"update:outputVariable",
"toggle-output",
@@ -98,6 +110,17 @@ export default {
"remove",
"toggle-collapse",
],
methods: {
handleBlur() {
// 如果输入框的值和源值相同,则不更新
if (
this.inputValue.replace(/[ ]/g, "") ===
this.sourceValue.replace(/[ ]/g, "")
)
return;
this.$emit("update:outputVariable", this.inputValue);
},
},
};
</script>
@@ -115,7 +138,7 @@ export default {
}
.variable-input {
width: 100px;
width: 120px;
}
.output-section :deep(.q-field) {

View File

@@ -79,7 +79,7 @@
}"
class="variable-dropdown prepend-btn"
size="sm"
v-if="variables.length"
@click="variables = getCurrentVariables()"
>
<q-list class="variable-list">
<q-item-label header class="variable-label">
@@ -108,6 +108,15 @@
</q-item-section>
</q-item>
</template>
<template v-else>
<q-item>
<q-item-section>
<q-item-label
>无可用变量请先点击命令卡片输出变量按钮设置变量</q-item-label
>
</q-item-section>
</q-item>
</template>
</q-list>
</q-btn-dropdown>
</template>
@@ -176,13 +185,14 @@ export default defineComponent({
emits: ["update:modelValue"],
setup() {
const variables = inject("composerVariables", []);
return { variables };
const getCurrentVariables = inject("getCurrentVariables");
return { getCurrentVariables };
},
data() {
return {
selectedVariable: null,
variables: [],
};
},

View File

@@ -136,7 +136,6 @@ export default defineComponent({
id: this.$root.getUniqueId(),
argv: "",
saveOutput: false,
useOutput: null,
cmd: action.value || action.cmd,
value: action.value || action.cmd,
};