From 839ea699218e0b9916c67397ca75b033b42176e0 Mon Sep 17 00:00:00 2001 From: fofolee Date: Wed, 22 Jan 2025 12:01:16 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=BC=BA=20FlowTabs=20=E5=92=8C?= =?UTF-8?q?=E5=8F=98=E9=87=8F=E7=AE=A1=E7=90=86=EF=BC=9A=E5=BC=95=E5=85=A5?= =?UTF-8?q?=E4=BA=86=20VariableManager=20=E7=BB=84=E4=BB=B6=E4=BB=A5?= =?UTF-8?q?=E6=9B=B4=E5=A5=BD=E5=9C=B0=E5=A4=84=E7=90=86=E5=8F=98=E9=87=8F?= =?UTF-8?q?=EF=BC=8C=E6=9B=B4=E6=96=B0=E4=BA=86=20ComposerFlow=20=E4=BB=A5?= =?UTF-8?q?=E6=94=AF=E6=8C=81=E8=87=AA=E5=AE=9A=E4=B9=89=E5=8F=98=E9=87=8F?= =?UTF-8?q?=EF=BC=8C=E5=B9=B6=E6=94=B9=E8=BF=9B=E4=BA=86=20VariableList=20?= =?UTF-8?q?=E4=B8=AD=E7=9A=84=E5=8F=98=E9=87=8F=E9=80=89=E6=8B=A9=E7=95=8C?= =?UTF-8?q?=E9=9D=A2=E3=80=82=E5=A2=9E=E5=8A=A0=E4=BA=86=E5=88=87=E6=8D=A2?= =?UTF-8?q?=E5=8F=98=E9=87=8F=E7=AE=A1=E7=90=86=E7=9A=84=E5=8A=9F=E8=83=BD?= =?UTF-8?q?=EF=BC=8C=E5=B9=B6=E8=B0=83=E6=95=B4=E4=BA=86=E4=BB=A3=E7=A0=81?= =?UTF-8?q?=E7=94=9F=E6=88=90=E4=BB=A5=E5=8C=85=E5=90=AB=E5=8F=82=E6=95=B0?= =?UTF-8?q?=E5=92=8C=E5=B1=80=E9=83=A8=E5=8F=98=E9=87=8F=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/composer/FlowTabs.vue | 92 ++++- .../composer/common/varinput/VariableList.vue | 136 ++++--- .../composer/flow/ComposerButtons.vue | 9 + .../composer/flow/VariableManager.vue | 363 ++++++++++++++++++ src/js/composer/generateCode.js | 13 +- 5 files changed, 557 insertions(+), 56 deletions(-) create mode 100644 src/components/composer/flow/VariableManager.vue diff --git a/src/components/composer/FlowTabs.vue b/src/components/composer/FlowTabs.vue index 29d3003..7ede6b2 100644 --- a/src/components/composer/FlowTabs.vue +++ b/src/components/composer/FlowTabs.vue @@ -77,17 +77,28 @@ /> -
+
+
@@ -96,6 +107,7 @@ import { defineComponent, provide, ref, computed } from "vue"; import ComposerFlow from "./ComposerFlow.vue"; import ComposerButtons from "./flow/ComposerButtons.vue"; +import VariableManager from "./flow/VariableManager.vue"; import { generateCode } from "js/composer/generateCode"; import { findCommandByValue } from "js/composer/composerConfig"; import { generateUniqSuffix } from "js/composer/variableManager"; @@ -107,6 +119,7 @@ export default defineComponent({ ComposerFlow, ComposerButtons, draggable, + VariableManager, }, props: { showCloseButton: { @@ -120,6 +133,7 @@ export default defineComponent({ name: "main", label: "主流程", commands: [], + customVariables: [], }); const subFlows = ref([]); @@ -130,6 +144,7 @@ export default defineComponent({ return { label: flow.label, value: flow.name, + id: flow.id, }; }); }; @@ -139,11 +154,14 @@ export default defineComponent({ const activeTab = ref("main"); - // 获取当前函数所有变量 - const getCurrentVariables = () => { + const getCurrentFlow = () => { + return flows.value.find((flow) => flow.id === activeTab.value); + }; + + // 获取当前函数所有输出变量 + const getOutputVariables = (flow = getCurrentFlow()) => { const variables = []; - const currentFlow = flows.value.find((flow) => flow.id === activeTab.value); - for (const [index, cmd] of currentFlow.commands.entries()) { + for (const [index, cmd] of flow.commands.entries()) { if (cmd.saveOutput && cmd.outputVariable) { variables.push( ...parseVariables(cmd.outputVariable).map((variable) => ({ @@ -154,6 +172,7 @@ export default defineComponent({ id: cmd.id, index, }, + type: "output", })) ); } @@ -161,13 +180,48 @@ export default defineComponent({ return variables; }; + const getFunctionParams = (flowId) => { + const flow = flows.value.find((f) => f.id === flowId); + return flow.customVariables.filter((v) => v.type === "param"); + }; + + provide("getFunctionParams", getFunctionParams); + + /** + * 获取当前函数所有变量 + * 返回格式： + * [ + * { name: "变量名", type: "变量类型", sourceCommand: { label: "变量来源" , index?: 来源命令索引, id?: 来源命令id} } + * ] + */ + const getCurrentVariables = () => { + const currentFlow = getCurrentFlow(); + const variables = getOutputVariables(currentFlow); + const customVariables = currentFlow.customVariables.map((v) => ({ + name: v.name, + type: v.type, + sourceCommand: { + label: v.type === "param" ? "函数参数" : "局部变量", + }, + })); + return [...customVariables, ...variables]; + }; + provide("getCurrentVariables", getCurrentVariables); - return { flows, mainFlow, subFlows, activeTab }; + return { + flows, + mainFlow, + subFlows, + activeTab, + getOutputVariables, + }; }, data() { return { isAllCollapsed: false, + showVariableManager: false, + outputVariables: [], }; }, methods: { @@ -189,6 +243,7 @@ export default defineComponent({ name, label: name.replace("func_", "函数"), commands: [], + customVariables: [], }); this.activeTab = id; }, @@ -225,6 +280,10 @@ export default defineComponent({ case "expandAll": this.expandAll(); break; + case "toggleVariableManager": + this.showVariableManager = !this.showVariableManager; + this.outputVariables = this.getOutputVariables(); + break; default: this.$emit("action", type, this.generateAllFlowCode()); } @@ -432,8 +491,19 @@ export default defineComponent({ overflow: hidden; } -.body--dark .tabs-header { - border-bottom-color: rgba(255, 255, 255, 0.05); +.flow-wrapper { + flex: 1; + position: relative; + overflow: hidden; + height: 100%; +} + +.variable-panel { + position: absolute; + right: 0; + top: 0; + bottom: 0; + z-index: 10; } .main-btn { diff --git a/src/components/composer/common/varinput/VariableList.vue b/src/components/composer/common/varinput/VariableList.vue index 148af19..bbed469 100644 --- a/src/components/composer/common/varinput/VariableList.vue +++ b/src/components/composer/common/varinput/VariableList.vue @@ -8,46 +8,59 @@ @click="({ variables, functions } = getAvailableVariablesAndFunctions())" > - - - 选择变量或函数 - - - - + + + + diff --git a/src/js/composer/generateCode.js b/src/js/composer/generateCode.js index 81bada8..d972e76 100644 --- a/src/js/composer/generateCode.js +++ b/src/js/composer/generateCode.js @@ -1,5 +1,9 @@ export function generateCode(flow) { - const { commands, name, label } = flow; + const { commands, name, label, customVariables = [] } = flow; + + const params = customVariables.filter((v) => v.type === "param") || []; + const manualVars = + customVariables.filter((v) => v.type === "var") || []; // 检查是否包含异步函数 const hasAsyncFunction = commands.some((cmd) => cmd.isAsync); @@ -8,8 +12,13 @@ export function generateCode(flow) { code.push(`// ${label}`); // 生成函数声明 - code.push(`${hasAsyncFunction ? "async " : ""}function ${funcName}() {`); + code.push( + `${hasAsyncFunction ? "async " : ""}function ${funcName}(${params + .map((p) => p.name) + .join(", ")}) {` + ); + code.push(manualVars.map((v) => ` let ${v.name} = ${v.value};`).join("\n")); const indent = " "; commands.forEach((cmd) => {