From 26fd4f5e1975ffdb768ac8820da9f4aebdb0c6d6 Mon Sep 17 00:00:00 2001
From: fofolee <fofolee@qq.com>
Date: Wed, 22 Jan 2025 09:06:17 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=E4=BA=86CommandComposer?=
 =?UTF-8?q?=E5=92=8CFlowTabs=E7=BB=84=E4=BB=B6=EF=BC=9A=E7=A7=BB=E9=99=A4?=
 =?UTF-8?q?=E4=BA=86=E6=9C=AA=E4=BD=BF=E7=94=A8=E7=9A=84=E6=96=B9=E6=B3=95?=
 =?UTF-8?q?=E5=B9=B6=E7=AE=80=E5=8C=96=E4=BA=86=E5=8F=98=E9=87=8F=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E3=80=82=E6=9B=B4=E6=96=B0=E4=BA=86=E5=8F=98=E9=87=8F?=
 =?UTF-8?q?=E5=90=8D=E7=A7=B0=E7=94=9F=E6=88=90=E9=80=BB=E8=BE=91=E4=BB=A5?=
 =?UTF-8?q?=E6=8F=90=E9=AB=98=E6=B8=85=E6=99=B0=E5=BA=A6=E5=92=8C=E4=B8=80?=
 =?UTF-8?q?=E8=87=B4=E6=80=A7=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/composer/CommandComposer.vue | 44 +------------
 src/components/composer/FlowTabs.vue        | 68 ++++++++++++++-------
 src/js/composer/variableManager.js          | 12 ++--
 3 files changed, 53 insertions(+), 71 deletions(-)

diff --git a/src/components/composer/CommandComposer.vue b/src/components/composer/CommandComposer.vue
index 5b0dccf..a13c8d8 100644
--- a/src/components/composer/CommandComposer.vue
+++ b/src/components/composer/CommandComposer.vue
@@ -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 });
diff --git a/src/components/composer/FlowTabs.vue b/src/components/composer/FlowTabs.vue
index efaf1af..29d3003 100644
--- a/src/components/composer/FlowTabs.vue
+++ b/src/components/composer/FlowTabs.vue
@@ -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
diff --git a/src/js/composer/variableManager.js b/src/js/composer/variableManager.js
index 53ad32e..d54ec96 100644
--- a/src/js/composer/variableManager.js
+++ b/src/js/composer/variableManager.js
@@ -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;
 }