将唯一ID生成功能提取到单独的具模块中

src/App.vue

@@ -252,13 +252,6 @@ export default defineComponent({
           .padStart(2, "0")
       );
     },
-    getUniqueId() {
-      return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
-        const r = (Math.random() * 16) | 0;
-        const v = c === "x" ? r : (r & 0x3) | 0x8;
-        return v.toString(16);
-      });
-    },
   },
   watch: {
     // 监听 glassEffect 值变化

src/components/composer/ComposerFlow.vue

@@ -63,6 +63,7 @@ import ComposerCard from "./ComposerCard.vue";
 import ChainStyles from "./flow/ChainStyles.vue";
 import DropArea from "./flow/DropArea.vue";
 import { findCommandByValue } from "js/composer/composerConfig";
+import { getUniqueId } from "js/common/uuid";
 
 // 拖拽前的命令列表，非响应式
 let commandsBeforeDrag = [];
@@ -262,7 +263,7 @@ export default defineComponent({
           }
         } else {
           // 处理链式命令
-          const chainId = this.getUniqueId();
+          const chainId = getUniqueId();
           let insertIndex =
             this.dragIndex >= 0 ? this.dragIndex : newCommands.length;
 
@@ -270,7 +271,7 @@ export default defineComponent({
           for (const commandType of commandChain) {
             const commandItem = {
               ...newCommand,
-              id: this.getUniqueId(),
+              id: getUniqueId(),
               commandType,
               chainId,
             };
@@ -286,13 +287,10 @@ export default defineComponent({
     createNewCommand(parsedAction) {
       const newCommand = {
         ...parsedAction,
-        id: this.getUniqueId(),
+        id: getUniqueId(),
       };
       return newCommand;
     },
-    getUniqueId() {
-      return this.$root.getUniqueId();
-    },
     isFirstCommandInChain(command) {
       if (!command.commandChain) return false;
       return command.commandType === command.commandChain?.[0];
@@ -347,7 +345,7 @@ export default defineComponent({
       const newCommands = [...this.commands];
       const branchCommand = {
         ...window.lodashM.cloneDeep(findCommandByValue(value)),
-        id: this.getUniqueId(),
+        id: getUniqueId(),
         chainId: chainId,
         commandType: commandType,
       };
@@ -409,12 +407,12 @@ export default defineComponent({
     },
     copyCommands(commands) {
       // 生成新的chainId
-      const newChainId = this.getUniqueId();
+      const newChainId = getUniqueId();
       // 复制并修改每个命令
       const newCommands = [];
       commands.forEach((cmd) => {
         const copiedCommand = window.lodashM.cloneDeep(cmd);
-        copiedCommand.id = this.getUniqueId();
+        copiedCommand.id = getUniqueId();
         if (copiedCommand.chainId) copiedCommand.chainId = newChainId;
         newCommands.push(copiedCommand);
       });
@@ -439,7 +437,7 @@ export default defineComponent({
           // 单个命令的复制逻辑
           const newCommand = {
             ...command,
-            id: this.getUniqueId(),
+            id: getUniqueId(),
           };
           const newCommands = [...this.commands];
           newCommands.splice(index + 1, 0, newCommand);

src/components/composer/FlowTabs.vue

@@ -102,6 +102,7 @@ import FlowManager from "components/composer/flow/FlowManager.vue";
 import { generateCode } from "js/composer/generateCode";
 import { findCommandByValue } from "js/composer/composerConfig";
 import { generateUniqSuffix } from "js/composer/variableManager";
+import { getUniqueId } from "js/common/uuid";
 export default defineComponent({
   name: "FlowTabs",
   components: {
@@ -228,7 +229,7 @@ export default defineComponent({
       );
     },
     addFlow(options = {}) {
-      const id = this.$root.getUniqueId();
+      const id = getUniqueId();
       const name = options.name || this.generateFlowName();
       const newFlow = {
         id,

src/js/common/uuid.js

@@ -0,0 +1,7 @@
+export const getUniqueId = () => {
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+    const r = (Math.random() * 16) | 0;
+    const v = c === "x" ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+};