chore: add nanoid

package-lock.json

@@ -17,6 +17,7 @@
         "blueimp-md5": "^2.19.0",
         "element-plus": "^2.2.32",
         "lodash-es": "^4.17.21",
+        "nanoid": "^4.0.1",
         "pinia": "^2.0.32",
         "vue": "^3.2.47",
         "vue-router": "^4.1.6"
@@ -4094,14 +4095,14 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.4.tgz",
-      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+      "version": "4.0.1",
+      "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-4.0.1.tgz",
+      "integrity": "sha512-udKGtCCUafD3nQtJg9wBhRP3KMbPglUsgV5JVsXhvyBs/oefqb4sqMEhKBBgqZncYowu58p1prsZQBYvAj/Gww==",
       "bin": {
-        "nanoid": "bin/nanoid.cjs"
+        "nanoid": "bin/nanoid.js"
       },
       "engines": {
-        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+        "node": "^14 || ^16 || >=18"
       }
     },
     "node_modules/natural-compare": {
@@ -4469,6 +4470,17 @@
         "node": ">=4"
       }
     },
+    "node_modules/postcss/node_modules/nanoid": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.4.tgz",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmmirror.com/prelude-ls/-/prelude-ls-1.2.1.tgz",

package.json

@@ -24,6 +24,7 @@
     "blueimp-md5": "^2.19.0",
     "element-plus": "^2.2.32",
     "lodash-es": "^4.17.21",
+    "nanoid": "^4.0.1",
     "pinia": "^2.0.32",
     "vue": "^3.2.47",
     "vue-router": "^4.1.6"

src/components/flow/Index.vue

@@ -5,6 +5,7 @@ export default {
 </script>
 
 <script setup lang="ts">
+import { nanoid } from 'nanoid'
 import { VueFlow, useVueFlow, PanelPosition } from '@vue-flow/core'
 import { Controls } from '@vue-flow/controls'
 import Sidebar from './Sidebar.vue'
@@ -20,9 +21,6 @@ const props = withDefaults(defineProps<Props>(), { action: 'edit', role: 'teache
 provide('action', props.action)
 provide('role', props.role)
 
-let id = 0
-const getId = () => `node_${id++}`
-
 const { findNode, onConnect, addEdges, addNodes, project, vueFlowRef } = useVueFlow()
 
 const onDragOver = (event: DragEvent) => {
@@ -52,7 +50,7 @@ const onDrop = (event: DragEvent) => {
   const position = project({ x: event.clientX - left, y: event.clientY - top })
 
   const newNode = {
-    id: getId(),
+    id: nanoid(),
     type: 'custom',
     position,
     label: data.name,