重构了CommandComposer和FlowTabs组件:移除了未使用的方法并简化了变量管理。更新了变量名称生成逻辑以提高清晰度和一致性。

This commit is contained in:
fofolee 2025-01-22 09:06:17 +08:00
parent 31e9ca6956
commit 26fd4f5e19
3 changed files with 53 additions and 71 deletions

View File

@ -4,7 +4,7 @@
<div class="composer-body row no-wrap">
<!-- 左侧命令列表 -->
<div class="command-section" style="width: 180px">
<ComposerList :commands="availableCommands" @add-command="addCommand" />
<ComposerList :commands="availableCommands" />
</div>
<!-- 右侧命令流程 -->
@ -22,11 +22,10 @@
</template>
<script>
import { defineComponent, provide, ref } from "vue";
import { defineComponent } from "vue";
import ComposerList from "./ComposerList.vue";
import FlowTabs from "./FlowTabs.vue";
import { availableCommands } from "js/composer/composerConfig";
import { parseVariables } from "js/composer/variableManager";
export default defineComponent({
name: "CommandComposer",
@ -34,36 +33,6 @@ export default defineComponent({
ComposerList,
FlowTabs,
},
setup() {
const commandFlow = ref([]);
//
const getCurrentVariables = () => {
const variables = [];
for (const [index, cmd] of commandFlow.value.entries()) {
if (cmd.saveOutput && cmd.outputVariable) {
variables.push(
...parseVariables(cmd.outputVariable).map((variable) => ({
name: variable,
//
sourceCommand: {
label: cmd.label,
id: cmd.id,
index,
},
}))
);
}
}
return variables;
};
provide("getCurrentVariables", getCurrentVariables);
return {
commandFlow,
};
},
data() {
return {
availableCommands,
@ -78,15 +47,6 @@ export default defineComponent({
},
emits: ["use-composer"],
methods: {
addCommand(action) {
let newAction = window.lodashM.cloneDeep(action);
this.commandFlow.push({
...newAction,
id: this.$root.getUniqueId(),
saveOutput: false,
outputVariable: null,
});
},
handleComposer(type, code) {
//
this.$emit("use-composer", { type, code });

View File

@ -93,14 +93,14 @@
</template>
<script>
import { defineComponent, provide, ref } from "vue";
import { defineComponent, provide, ref, computed } from "vue";
import ComposerFlow from "./ComposerFlow.vue";
import ComposerButtons from "./flow/ComposerButtons.vue";
import { generateCode } from "js/composer/generateCode";
import { findCommandByValue } from "js/composer/composerConfig";
import { generateUniqSuffix } from "js/composer/variableManager";
import draggable from "vuedraggable";
import { parseVariables } from "js/composer/variableManager";
export default defineComponent({
name: "FlowTabs",
components: {
@ -115,7 +115,16 @@ export default defineComponent({
},
},
setup() {
const mainFlow = ref({
id: "main",
name: "main",
label: "主流程",
commands: [],
});
const subFlows = ref([]);
//
const getCurrentFunctions = () => {
return subFlows.value.map((flow) => {
return {
@ -125,31 +134,42 @@ export default defineComponent({
});
};
provide("getCurrentFunctions", getCurrentFunctions);
return { subFlows };
const flows = computed(() => [mainFlow.value, ...subFlows.value]);
const activeTab = ref("main");
//
const getCurrentVariables = () => {
const variables = [];
const currentFlow = flows.value.find((flow) => flow.id === activeTab.value);
for (const [index, cmd] of currentFlow.commands.entries()) {
if (cmd.saveOutput && cmd.outputVariable) {
variables.push(
...parseVariables(cmd.outputVariable).map((variable) => ({
name: variable,
//
sourceCommand: {
label: cmd.label,
id: cmd.id,
index,
},
}))
);
}
}
return variables;
};
provide("getCurrentVariables", getCurrentVariables);
return { flows, mainFlow, subFlows, activeTab };
},
data() {
return {
activeTab: "main",
isAllCollapsed: false,
mainFlow: {
id: "main",
name: "main",
label: "主流程",
commands: [],
},
};
},
computed: {
flows: {
get() {
return [this.mainFlow, ...this.subFlows];
},
set(value) {
this.mainFlow = value[0];
this.subFlows = value.slice(1);
},
},
},
methods: {
generateFlowName(baseName = "func_") {
return (
@ -240,7 +260,7 @@ export default defineComponent({
if (!savedFlows) return;
const flowsData = JSON.parse(savedFlows);
this.flows = flowsData.map((flow) => ({
const newFlows = flowsData.map((flow) => ({
...flow,
commands: flow.commands.map((cmd) => {
const command = findCommandByValue(cmd.value);
@ -250,7 +270,9 @@ export default defineComponent({
};
}),
}));
this.activeTab = this.flows[0].id;
this.mainFlow = newFlows[0];
this.subFlows = newFlows.slice(1);
this.activeTab = this.mainFlow.id;
},
runFlows(flow) {
const code = flow

View File

@ -50,7 +50,7 @@ export function parseVariables(value) {
* @param {string} [currentName] - 当前的变量名如果有
* @returns {string} 有效的变量名
*/
function generateValidVarName(baseName, existingVars, currentName = null) {
function generateValidVarName(currentName, existingVars) {
// 如果当前名称有效且不重复,直接返回
if (
currentName &&
@ -60,13 +60,13 @@ function generateValidVarName(baseName, existingVars, currentName = null) {
return currentName;
}
// 如果变量名无效,生成一个随机变量名
if (!validateVariableName(baseName).isValid) {
baseName = "var" + generateRandomSuffix(existingVars.length);
// 如果变量名无效,改为var开头
if (!validateVariableName(currentName).isValid) {
currentName = "var";
}
// 如果变量名重复,添加随机后缀直到不重复
let finalName = baseName + generateUniqSuffix(baseName, existingVars);
// 添加随机后缀直到不重复
let finalName = currentName + generateUniqSuffix(currentName, existingVars);
return finalName;
}